dst-rg 1.0.0

package/src/components/Switch/index.tsx

@@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import TextContentWrapper from "../ui/text-content-wrapper";
+import { SwitchProps } from "./_.type";
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(
+  (
+    {
+      className,
+      thumbClassName,
+      label,
+      labelClassName,
+      descriptionClassName,
+      description,
+      onToggle,
+      ...props
+    },
+    ref
+  ) => {
+    const [checked, setChecked] = React.useState(false);
+    const handleToggle = () => {
+      setChecked((prev) => !prev);
+      onToggle();
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex gap-1",
+          description ? "items-start" : "items-center"
+        )}
+      >
+        <SwitchPrimitives.Root
+          ref={ref}
+          className={cn(
+            "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-start rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand-600 data-[state=unchecked]:bg-gray-light-100",
+            className,
+            description ? "mt-0.5" : "mt-0"
+          )}
+          onCheckedChange={handleToggle}
+          checked={checked}
+          {...props}
+        >
+          <SwitchPrimitives.Thumb
+            className={cn(
+              "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:-translate-x-5 data-[state=checked]:ltr:translate-x-5 data-[state=unchecked]:-translate-x-0",
+              thumbClassName
+            )}
+          />
+        </SwitchPrimitives.Root>
+
+        <TextContentWrapper
+          label={label}
+          labelClassName={labelClassName}
+          handleClick={handleToggle}
+          description={description}
+          descriptionClassName={descriptionClassName}
+        />
+      </div>
+    );
+  }
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/components/Tabs/_.stories.tsx

@@ -0,0 +1,508 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { TabsListProps, TabsProps, TabsTriggerProps } from "./_.type";
+import { Tabs } from ".";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Custom Tabs component built using Radix UI and styled via CVA. Supports direction, RTL, list and trigger variants, and fullWidth layout.",
+      },
+    },
+  },
+  // ✅ Only include Tabs-specific props here
+  argTypes: {
+    direction: {
+      control: "inline-radio",
+      options: ["horizontal", "vertical"],
+      description:
+        "Layout direction of the Tabs (applies to root Tabs component)",
+    },
+    dir: {
+      control: "inline-radio",
+      options: ["ltr", "rtl"],
+      description: "Text direction for Tabs",
+    },
+  },
+};
+export default meta;
+
+// ✅ Shared content
+const Content = (
+  <>
+    <Tabs.Content value="tab1">
+      <div className="p-4 border rounded bg-white text-black">
+        Content for Tab 1
+      </div>
+    </Tabs.Content>
+    <Tabs.Content value="tab2">
+      <div className="p-4 border rounded bg-white text-black">
+        Content for Tab 2
+      </div>
+    </Tabs.Content>
+  </>
+);
+
+export const Default: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      <Tabs.List>
+        <Tabs.Trigger value="tab1">Tab One</Tabs.Trigger>
+        <Tabs.Trigger value="tab2">Tab Two</Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+
+// ✅ Story with Tabs.List variant controls
+export const WithListVariants: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+    listVariant: "bordered",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+export const WithListVariantsVertical: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "vertical",
+    dir: "rtl",
+    listVariant: "bordered",
+    triggerVariant: "bordered",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+
+export const WithListVariantsminimal: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+    listVariant: "minimal",
+    triggerVariant: "minimal",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+export const WithListVariantsOutlined: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+    listVariant: "outlined",
+    triggerVariant: "outlined",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+export const WithListVariantsBordered: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+    listVariant: "bordered",
+    triggerVariant: "bordered",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+export const WithListVariantsBrand: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+    listVariant: "brand",
+    triggerVariant: "brand",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};
+export const WithListVariantsGray: StoryObj<
+  TabsProps & {
+    listVariant: TabsListProps["listVariant"];
+    fullWidth: boolean;
+  } & { triggerVariant: TabsTriggerProps["triggerVariant"]; fullWidth: boolean }
+> = {
+  args: {
+    defaultValue: "tab1",
+    direction: "horizontal",
+    dir: "rtl",
+    listVariant: "gray",
+    triggerVariant: "gray",
+    fullWidth: true,
+  },
+  argTypes: {
+    listVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    triggerVariant: {
+      control: "select",
+      options: ["brand", "gray", "outlined", "bordered", "minimal"],
+      description: "Visual style for the Tabs list",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Stretch list items to fill container",
+    },
+  },
+  render: ({
+    defaultValue,
+    direction,
+    dir,
+    listVariant,
+    fullWidth,
+    triggerVariant,
+  }) => (
+    <Tabs defaultValue={defaultValue} direction={direction} dir={dir}>
+      <Tabs.List
+        listVariant={listVariant}
+        direction={direction}
+        fullWidth={fullWidth}
+      >
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab1"
+        >
+          Tab One
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          triggerVariant={triggerVariant}
+          fullWidth={fullWidth}
+          value="tab2"
+        >
+          Tab Two
+        </Tabs.Trigger>
+      </Tabs.List>
+      {Content}
+    </Tabs>
+  ),
+};

package/src/components/Tabs/_.style.ts

@@ -0,0 +1,63 @@
+import { cva } from "class-variance-authority";
+
+const basetabListStyles =
+  " text-muted-foreground inline-flex flex-row h-9  items-center";
+
+const listVariantStyle = {
+  brand: "",
+  gray: "",
+  outlined: "border-b border-rborder-secondary gap-2",
+  bordered:
+    "rounded-lg border border-rborder-secondary bg-rbg-secondary-alt p-1",
+  minimal:
+    " rounded-md border border-rborder-secondary bg-rbg-secondary-alt !gap-0.5",
+};
+
+export const tabListVariants = cva(basetabListStyles, {
+  variants: {
+    listVariant: listVariantStyle,
+    fullWidth: {
+      true: "justify-between",
+      false: "justify-start gap-1",
+    },
+    direction: {
+      vertical: "flex-col min-h-fit max-w-fit ",
+      horizontal: "flex-row w-full",
+    },
+  },
+  defaultVariants: {
+    listVariant: "brand",
+    fullWidth: true,
+    direction: "horizontal",
+  },
+});
+
+const basetabTriggerStyles =
+  " h-full py-2 px-3 cursor-pointer inline-flex items-center justify-center gap-2  text-sm font-normal whitespace-nowrap transition-[color,box-shadow]  disabled:pointer-events-none disabled:opacity-50  [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+const TriggerVariantStyle = {
+  brand:
+    "text-rtext-quaternary-500 data-[state=active]:rounded-sm data-[state=active]:bg-rbg-brand-primary-alt data-[state=active]:text-rtext-brand-secondary-700 ",
+  gray: "text-rtext-quaternary-500 data-[state=active]:rounded-sm data-[state=active]:bg-rbg-active data-[state=active]:text-rtext-secondary-700 ",
+  outlined:
+    "text-rtext-quaternary-500 data-[state=active]:text-rtext-brand-secondary-700 pb-2.5 data-[state=active]:pb-2 data-[state=active]:border-b-2 data-[state=active]:border-rgf-brand-primary-alt",
+  bordered:
+    "text-rtext-quaternary-500 data-[state=active]:rounded-sm data-[state=active]:text-rtext-secondary-700 data-[state=active]:bg-rbg-primary-alt data-[state=active]:shadow-sm",
+
+  minimal:
+    "text-rtext-quaternary-500 data-[state=active]:rounded-md data-[state=active]:text-rtext-secondary-700 data-[state=active]:bg-rbg-primary-alt data-[state=active]:border data-[state=active]:border-rborder-primary data-[state=active]:shadow-xs",
+};
+
+export const tabTriggerVariants = cva(basetabTriggerStyles, {
+  variants: {
+    triggerVariant: TriggerVariantStyle,
+    fullWidth: {
+      true: "w-full",
+      false: "w-fit justify-start gap-1 items-center",
+    },
+  },
+  defaultVariants: {
+    triggerVariant: "gray",
+    fullWidth: true,
+  },
+});