chore: deprecate older components (#199)

* chore: deprecate older components

* fix: update correct variable

packages/raystack/avatar/avatar.tsx

@@ -26,6 +26,10 @@ const avatar = cva(styles.avatar, {
 });
 
 const image = cva(styles.image);
+
+/**
+ * @deprecated Use AvatarProps from '@raystack/apsara/v1' instead.
+ */
 export interface AvatarProps
   extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
     VariantProps<typeof avatar> {}
@@ -59,6 +63,9 @@ const AvatarRoot = forwardRef<
 
 AvatarRoot.displayName = AvatarPrimitive.Root.displayName;
 
+/**
+ * @deprecated Use AvatarImageProps from '@raystack/apsara/v1' instead.
+ */
 export interface AvatarImageProps
   extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,
     VariantProps<typeof image> {}
@@ -77,6 +84,9 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const fallback = cva(styles.fallback);
 
+/**
+ * @deprecated Use FallbackProps from '@raystack/apsara/v1' instead.
+ */
 export interface FallbackProps
   extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,
     VariantProps<typeof fallback> {}

packages/raystack/badge/badge.tsx

@@ -22,4 +22,7 @@ const Badge: ForwardRefRenderFunction<unknown, BadgeProps> = (props, ref) => {
   return <span className={badge({ color, className })}>{children}</span>;
 };
 
+/**
+ * @deprecated Use Badge from '@raystack/apsara/v1' instead.
+ */
 export default React.forwardRef<unknown, BadgeProps>(Badge);

packages/raystack/checkbox/checkbox.tsx

@@ -18,6 +18,9 @@ const checkbox = cva(styles.checkbox, {
   },
 });
 
+/**
+ * @deprecated Use CheckboxProps from '@raystack/apsara/v1' instead.
+ */
 export interface CheckboxProps
   extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
     VariantProps<typeof checkbox>,
@@ -45,6 +48,10 @@ export const Checkbox = forwardRef<
 ));
 
 const indicator = cva(styles.indicator);
+
+/**
+ * @deprecated Use IndicatorProps from '@raystack/apsara/v1' instead.
+ */
 export interface IndicatorProps
   extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>,
     VariantProps<typeof indicator> {}

packages/raystack/dropdown-menu/dropdown-menu.tsx

@@ -80,6 +80,10 @@ DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
 type DropdownMenuProps = React.ComponentProps<
   typeof DropdownMenuPrimitive.Root
 >;
+
+/**
+ * @deprecated Use RootDropdownMenu from '@raystack/apsara/v1' instead.
+ */
 export function RootDropdownMenu({ children, ...props }: DropdownMenuProps) {
   return (
     <DropdownMenuPrimitive.Root {...props}>

packages/raystack/inputfield/inputfield.tsx

@@ -27,6 +27,10 @@ type InputFieldProps = PropsWithChildren<VariantProps<typeof inputfield>> &
     children?: React.ReactNode;
   };
 
+
+/**
+ * @deprecated Use InputField from '@raystack/apsara/v1' instead.
+ */
 export const InputField = ({ label, children, ...props }: InputFieldProps) => {
   return (
     <Flex direction="column" gap="extra-small" {...props}>

packages/raystack/text/text.tsx

@@ -38,6 +38,9 @@ const text = cva(styles.text, {
   },
 });
 
+/**
+ * @deprecated Use TextProps from '@raystack/apsara/v1' instead.
+ */
 export type TextProps = PropsWithChildren<VariantProps<typeof text>> &
   HTMLAttributes<HTMLSpanElement>;
 

packages/raystack/v1/components/badge/badge.tsx

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
 
 import styles from "./badge.module.css";
 

packages/raystack/v1/index.tsx

@@ -1,6 +1,7 @@
 import "./styles/index.css";
 
 export { Avatar, AvatarGroup } from "./components/avatar";
+export { Badge } from "./components/badge";
 export { Box } from "./components/box"
 export { Breadcrumb } from "./components/breadcrumb";
 export { Button } from "./components/button";
@@ -12,7 +13,6 @@ export { Flex } from "./components/flex";
 export { InputField } from "./components/inputField";
 export { Spinner } from "./components/spinner";
 export { Text } from "./components/text";
-export { Badge } from "./components/badge";
 export {
   ThemeProvider,
   ThemeProviderProps,

packages/raystack/v1/styles/colors.css

@@ -40,7 +40,7 @@
   --rs-color-text-success-primary-hover: var(--rs-success-11);
 
   /* Border Colors */
-  --rs-color-border-base-tertiary: var(--rs-neutral-1);
+  --rs-color-border-base-tertiary: var(--rs-neutral-7);
   --rs-color-border-base-focus: var(--rs-neutral-8);
   --rs-color-border-base-primary: var(--rs-neutral-4);
   --rs-color-border-accent-primary: var(--rs-accent-7);