@sth87/shadcn-design-system 0.0.36 → 0.1.0

package/dist/AI_CONTEXT.md

@@ -51,14 +51,14 @@ const Example = (args: AvatarProps) => {
   ];
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center -space-x-3 hover:space-x-1">
+    <div className="ds:flex ds:flex-col ds:gap-4">
+      <div className="ds:flex ds:items-center ds:-space-x-3 ds:hover:space-x-1">
         {avatars.map((avatar, index) => (
           <Avatar key={index} {...avatar} />
         ))}
       </div>
 
-      <div className="flex items-center -space-x-3 hover:space-x-1">
+      <div className="ds:flex ds:items-center ds:-space-x-3 ds:hover:space-x-1">
         {avatars.map((avatar, index) => (
           <Tooltip
             key={index}
@@ -141,21 +141,21 @@ type BreadcrumbProps = React.ComponentProps<"nav"> & {
 ```tsx
 // Example from Story 'render' function
 const Example = (args) => (
-    <div className="flex flex-col gap-6">
+    <div className="ds:flex ds:flex-col ds:gap-6">
       <div>
-        <h3 className="text-sm font-medium mb-3">Default Variant</h3>
+        <h3 className="ds:text-sm ds:font-medium ds:mb-3">Default Variant</h3>
         <Breadcrumb {...args} variant="default" />
       </div>
       <div>
-        <h3 className="text-sm font-medium mb-3">Compact Variant</h3>
+        <h3 className="ds:text-sm ds:font-medium ds:mb-3">Compact Variant</h3>
         <Breadcrumb {...args} variant="compact" />
       </div>
       <div>
-        <h3 className="text-sm font-medium mb-3">Badge Variant</h3>
+        <h3 className="ds:text-sm ds:font-medium ds:mb-3">Badge Variant</h3>
         <Breadcrumb {...args} variant="badge" />
       </div>
       <div>
-        <h3 className="text-sm font-medium mb-3">Bordered Variant</h3>
+        <h3 className="ds:text-sm ds:font-medium ds:mb-3">Bordered Variant</h3>
         <Breadcrumb {...args} variant="bordered" />
       </div>
     </div>
@@ -181,7 +181,7 @@ type ButtonProps = SButtonProps & {
 // Example from Default
 const Example = (args: ButtonProps) => (
   <Button {...args}>
-    <BottleWine className="animate-draw" /> {args.children}
+    <BottleWine className="ds:animate-draw" /> {args.children}
   </Button>
 );
 ```
@@ -257,7 +257,7 @@ interface CarouselProps {
 ```tsx
 // Example from Story 'render' function
 const Example = (args) => (
-    <div className="w-[600px]">
+    <div className="ds:w-[600px]">
       <Carousel {...args}>
         {images.map((src, index)
 ```
@@ -306,7 +306,7 @@ const Example = (args: CheckboxProps) => {
 
 export const CheckedType = (args: CheckboxProps) => {
   return (
-    <div className="flex flex-row gap-4">
+    <div className="ds:flex ds:flex-row ds:gap-4">
       <Checkbox {...args} checked={false} label="Unchecked" />
       <Checkbox {...args} checked label="Checked" />
       <Checkbox {...args} checked="indeterminate" label="Indeterminate" />
@@ -316,7 +316,7 @@ export const CheckedType = (args: CheckboxProps) => {
 
 export const Sizes = (args: CheckboxProps) => {
   return (
-    <div className="flex flex-row gap-4 items-center">
+    <div className="ds:flex ds:flex-row ds:gap-4 ds:items-center">
       <Checkbox {...args} size="sm" checked />
       <Checkbox {...args} size="default" checked />
       <Checkbox {...args} size="lg" checked />
@@ -326,7 +326,7 @@ export const Sizes = (args: CheckboxProps) => {
 
 export const WithLabel = (args: CheckboxProps) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="ds:flex ds:flex-col ds:gap-4">
       <Checkbox {...args} label="Checkbox Label" />
       <Checkbox
         {...args}
@@ -338,8 +338,8 @@ export const WithLabel = (args: CheckboxProps) => {
 
 export const Colors = (args: CheckboxProps) => {
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-row gap-4">
+    <div className="ds:flex ds:flex-col ds:gap-4">
+      <div className="ds:flex ds:flex-row ds:gap-4">
         Default colors:
         <Checkbox {...args} color="primary" checked />
         <Checkbox {...args} color="secondary" checked />
@@ -349,32 +349,32 @@ export const Colors = (args: CheckboxProps) => {
         <Checkbox {...args} color="error" checked />
         <Checkbox {...args} color="warning" checked />
       </div>
-      <div className="flex flex-row gap-4">
+      <div className="ds:flex ds:flex-row ds:gap-4">
         Custom colors:
         <Checkbox
           {...args}
           checked
-          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-pink-400 hover:border-blue-200 hover:bg-pink-200"
+          className="ds:data-[state=checked]:border-blue-600 ds:data-[state=checked]:bg-pink-400 ds:hover:border-blue-200 ds:hover:bg-pink-200"
         />
         <Checkbox
           {...args}
           checked
-          className="data-[state=checked]:border-purple-500 data-[state=checked]:bg-purple-500"
+          className="ds:data-[state=checked]:border-purple-500 ds:data-[state=checked]:bg-purple-500"
         />
         <Checkbox
           {...args}
           checked
-          className="data-[state=checked]:border-yellow-500 data-[state=checked]:bg-yellow-500"
+          className="ds:data-[state=checked]:border-yellow-500 ds:data-[state=checked]:bg-yellow-500"
         />
         <Checkbox
           {...args}
           checked
-          className="data-[state=checked]:border-[#00d9b9] data-[state=checked]:bg-[#00d9b9] [&_svg]:text-red-500"
+          className="ds:data-[state=checked]:border-[#00d9b9] ds:data-[state=checked]:bg-[#00d9b9] ds:[&_svg]:text-red-500"
         />
         <Checkbox
           {...args}
           checked
-          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-transparent [&_svg]:text-purple-500"
+          className="ds:data-[state=checked]:border-blue-600 ds:data-[state=checked]:bg-transparent ds:[&_svg]:text-purple-500"
         />
       </div>
     </div>
@@ -383,19 +383,19 @@ export const Colors = (args: CheckboxProps) => {
 
 export const CustomIcons = (args: CheckboxProps) => {
   return (
-    <div className="flex flex-row gap-4">
+    <div className="ds:flex ds:flex-row ds:gap-4">
       <Checkbox {...args} color="primary" icon={<Heart />} />
       <Checkbox {...args} color="success" icon={<Star />} />
       <Checkbox
         {...args}
         icon={
-          <Angry className="stroke-1 size-8 group-data-[state=checked]:stroke-white group-data-[state=checked]:fill-red-500" />
+          <Angry className="ds:stroke-1 ds:size-8 ds:group-data-[state=checked]:stroke-white ds:group-data-[state=checked]:fill-red-500" />
         }
       />
       <Checkbox
         {...args}
         icon={
-          <Star className="stroke-1 size-10 group-data-[state=checked]:stroke-fuchsia-500 group-data-[state=checked]:fill-fuchsia-500" />
+          <Star className="ds:stroke-1 ds:size-10 ds:group-data-[state=checked]:stroke-fuchsia-500 ds:group-data-[state=checked]:fill-fuchsia-500" />
         }
       />
     </div>
@@ -524,7 +524,7 @@ const Example = (args) => {
 
     return (
       <Command
-        className="rounded-lg border shadow-md md:min-w-[450px]"
+        className="ds:rounded-lg ds:border ds:shadow-md ds:md:min-w-[450px]"
         items={items}
         search
       />
@@ -603,7 +603,7 @@ const Example = (args) => {
     return (
       <ContextMenu
         trigger={
-          <div className="flex h-[200px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+          <div className="ds:flex ds:h-[200px] ds:w-[300px] ds:items-center ds:justify-center ds:rounded-md ds:border ds:border-dashed ds:text-sm">
             {"Right click here"}
           </div>
         }
@@ -728,7 +728,7 @@ export const DefaultWithValue: Story = {
 export const WithLabel: Story = {
   render: function WithLabelComponent(args) {
     return (
-      <div className="flex flex-col gap-4">
+      <div className="ds:flex ds:flex-col ds:gap-4">
         <DatePicker {...args} value="20/10/1991" />
         <DatePicker isFloatLabel size="lg" {...args} value="29/08/2017" />
         <DatePicker isFloatLabel {...args} value="26/02/2020" />
@@ -826,7 +826,7 @@ export const WithAutoMask: Story = {
 export const WithDifferentFormats: Story = {
   render: function WithDifferentFormats(args) {
     return (
-      <div className="flex flex-col gap-4">
+      <div className="ds:flex ds:flex-col ds:gap-4">
         <DatePicker {...args} label="yyyy-MM-DD" format="yyyy-MM-dd" />
         <DatePicker {...args} label="MM.yyyy" format="MM.yyyy" />
         <DatePicker
@@ -851,8 +851,8 @@ export const CustomWithChildren: Story = {
     const [date, setDate] = useState<Date | undefined>();
 
     return (
-      <div className="flex flex-col gap-4">
-        <p className="text-sm text-muted-foreground">
+      <div className="ds:flex ds:flex-col ds:gap-4">
+        <p className="ds:text-sm ds:text-muted-foreground">
           Custom trigger with children render prop
         </p>
         <DatePicker
@@ -862,7 +862,7 @@ export const CustomWithChildren: Story = {
         >
           {({ value, date: currentDate }) => (
             <button
-              className="px-4 py-2 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
+              className="ds:px-4 ds:py-2 ds:rounded-md ds:border ds:border-input ds:bg-background ds:hover:bg-accent ds:hover:text-accent-foreground ds:transition-colors"
               onClick={() => {
                 console.log("Current value:", value);
 ```
@@ -940,7 +940,7 @@ const Example = (args) => {
         title="Dialog Title"
         description="This is a default dialog with a simple message."
         footer={
-          <div className="flex gap-2 justify-end w-full">
+          <div className="ds:flex ds:gap-2 ds:justify-end ds:w-full">
             <Button variant="outline" onClick={() => setOpen(false)}
 ```
 
@@ -993,7 +993,7 @@ const Example = () => {
         <DropdownMenu
           trigger={<Button variant="outline">Theme: {theme}</Button>}
           content={
-            <div className="w-48">
+            <div className="ds:w-48">
               <DropdownMenu.Label>Theme</DropdownMenu.Label>
               <DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>
                 <DropdownMenu.RadioItem value="light">
@@ -1021,23 +1021,23 @@ export const WithSubmenu: Story = {
     <DropdownMenu
       trigger={
         <Button variant="outline">
-          <MoreHorizontal className="h-4 w-4" />
+          <MoreHorizontal className="ds:h-4 ds:w-4" />
         </Button>
       }
       content={
-        <div className="w-48">
+        <div className="ds:w-48">
           <DropdownMenu.Item>
-            <Copy className="mr-2 h-4 w-4" />
+            <Copy className="ds:mr-2 ds:h-4 ds:w-4" />
             Copy
           </DropdownMenu.Item>
           <DropdownMenu.Item>
-            <Share className="mr-2 h-4 w-4" />
+            <Share className="ds:mr-2 ds:h-4 ds:w-4" />
             Share
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Sub>
             <DropdownMenu.SubTrigger>
-              <Download className="mr-2 h-4 w-4" />
+              <Download className="ds:mr-2 ds:h-4 ds:w-4" />
               Export
             </DropdownMenu.SubTrigger>
             <DropdownMenu.SubContent>
@@ -1048,7 +1048,7 @@ export const WithSubmenu: Story = {
           </DropdownMenu.Sub>
           <DropdownMenu.Sub>
             <DropdownMenu.SubTrigger>
-              <Upload className="mr-2 h-4 w-4" />
+              <Upload className="ds:mr-2 ds:h-4 ds:w-4" />
               Import
             </DropdownMenu.SubTrigger>
             <DropdownMenu.SubContent>
@@ -1065,12 +1065,12 @@ export const WithSubmenu: Story = {
 // Different sides
 export const Sides: Story = {
   render: () => (
-    <div className="flex gap-4 flex-wrap">
+    <div className="ds:flex ds:gap-4 ds:flex-wrap">
       <DropdownMenu
         trigger={<Button variant="outline">Bottom</Button>}
         side="bottom"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1081,7 +1081,7 @@ export const Sides: Story = {
         trigger={<Button variant="outline">Top</Button>}
         side="top"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1092,7 +1092,7 @@ export const Sides: Story = {
         trigger={<Button variant="outline">Right</Button>}
         side="right"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1103,7 +1103,7 @@ export const Sides: Story = {
         trigger={<Button variant="outline">Left</Button>}
         side="left"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1116,12 +1116,12 @@ export const Sides: Story = {
 // Different alignments
 export const Alignments: Story = {
   render: () => (
-    <div className="flex gap-4 flex-wrap">
+    <div className="ds:flex ds:gap-4 ds:flex-wrap">
       <DropdownMenu
         trigger={<Button variant="outline">Start</Button>}
         align="start"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1132,7 +1132,7 @@ export const Alignments: Story = {
         trigger={<Button variant="outline">Center</Button>}
         align="center"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1143,7 +1143,7 @@ export const Alignments: Story = {
         trigger={<Button variant="outline">End</Button>}
         align="end"
         content={
-          <div className="w-32">
+          <div className="ds:w-32">
             <DropdownMenu.Item>Item 1</DropdownMenu.Item>
             <DropdownMenu.Item>Item 2</DropdownMenu.Item>
           </div>
@@ -1177,9 +1177,9 @@ type GlassProps = {
 ```tsx
 // Example from Story 'render' function
 const Example = (args) => (
-    <div className="flex flex-col gap-4">
-      <Glass className="h-60 w-120">
-        <div className="p-4 w-full h-full text-foreground">
+    <div className="ds:flex ds:flex-col ds:gap-4">
+      <Glass className="ds:h-60 ds:w-120">
+        <div className="ds:p-4 ds:w-full ds:h-full ds:text-foreground">
           Đây là 1 container
         </div>
       </Glass>
@@ -1187,7 +1187,7 @@ const Example = (args) => (
         <input
           type="email"
           placeholder="Enter your email..."
-          className="px-6 py-2 bg-transparent border-none outline-none text-white placeholder:text-white/70"
+          className="ds:px-6 ds:py-2 ds:bg-transparent ds:border-none ds:outline-none ds:text-white ds:placeholder:text-white/70"
         />
       </Glass>
     </div>
@@ -1236,16 +1236,16 @@ const Example = () => {
   return (
     <div>
       <div
-        className="relative cursor-pointer inline-block"
+        className="ds:relative ds:cursor-pointer ds:inline-block"
         onClick={() => setVisible(true)}
       >
         <img
           src={sampleImages[0].src}
           alt={sampleImages[0].alt}
-          className="w-80 h-60 object-cover rounded-lg"
+          className="ds:w-80 ds:h-60 ds:object-cover ds:rounded-lg"
         />
-        <div className="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors flex items-center justify-center rounded-lg pointer-events-none">
-          <span className="text-white opacity-0 group-hover:opacity-100 transition-opacity">
+        <div className="ds:absolute ds:inset-0 ds:bg-black/0 ds:hover:bg-black/10 ds:transition-colors ds:flex ds:items-center ds:justify-center ds:rounded-lg ds:pointer-events-none">
+          <span className="ds:text-white ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity">
             Click to preview
           </span>
         </div>
@@ -1272,11 +1272,11 @@ const ImageGridDemo = () => {
 
   return (
     <div>
-      <div className="grid grid-cols-2 gap-4 max-w-2xl">
+      <div className="ds:grid ds:grid-cols-2 ds:gap-4 ds:max-w-2xl">
         {sampleImages.map((img, index) => (
           <div
             key={index}
-            className="relative group cursor-pointer"
+            className="ds:relative ds:group ds:cursor-pointer"
             onClick={() => {
               setCurrentIndex(index);
 ```
@@ -1319,7 +1319,7 @@ type InputProps = BaseInputProps & {
 const Example = (args: InputProps) => <Input {...args} />;
 
 export const WithLabel = (args: InputProps) => (
-  <div className="flex flex-col gap-4 w-80">
+  <div className="ds:flex ds:flex-col ds:gap-4 ds:w-80">
     <Input
       {...args}
       label="Label normal"
@@ -1379,7 +1379,7 @@ type InputOTPProps = Omit<
 ```tsx
 // Example from Story 'render' function
 const Example = (args) => (
-    <div className="flex flex-col items-center gap-4">
+    <div className="ds:flex ds:flex-col ds:items-center ds:gap-4">
       <InputOTP size="xs" />
       <InputOTP size="sm" />
       <InputOTP size="normal" />
@@ -1438,11 +1438,11 @@ interface MarqueeRootProps extends DivProps {
 // Example from Default
 const Example = (args: typeof Marquee) => {
   const items = tricks.map((trick) => (
-    <div className="flex w-[260px] flex-col gap-1 rounded-md border bg-card p-4 text-card-foreground shadow-sm">
-      <div className="font-medium text-sm leading-tight sm:text-base">
+    <div className="ds:flex ds:w-[260px] ds:flex-col ds:gap-1 ds:rounded-md ds:border ds:bg-card ds:p-4 ds:text-card-foreground ds:shadow-sm">
+      <div className="ds:font-medium ds:text-sm ds:leading-tight ds:sm:text-base">
         {trick.title}
       </div>
-      <span className="line-clamp-2 text-muted-foreground text-sm">
+      <span className="ds:line-clamp-2 ds:text-muted-foreground ds:text-sm">
         {trick.description}
       </span>
     </div>
@@ -1488,11 +1488,11 @@ interface MasonryRootProps extends DivProps {
 ```tsx
 // Example from Story 'render' function
 const Example = (args) => (
-    <div className="p-4">
+    <div className="ds:p-4">
       <Masonry<ImageItem>
         columnCount={3}
         gap={12}
-        fallback={<Skeleton className="h-72 w-full" />}
+        fallback={<Skeleton className="ds:h-72 ds:w-full" />}
         items={items}
         renderItem={(item)
 ```
@@ -1527,12 +1527,12 @@ const Example = (args) => {
       const [currentPage, setCurrentPage] = React.useState(10);
 
       return (
-        <div className="space-y-4">
+        <div className="ds:space-y-4">
           <div>
-            <h3 className="text-sm font-medium mb-2">
+            <h3 className="ds:text-sm ds:font-medium ds:mb-2">
               Jump on Ellipsis (hover over ... to see directional jump buttons)
             </h3>
-            <p className="text-xs text-muted-foreground mb-2">
+            <p className="ds:text-xs ds:text-muted-foreground ds:mb-2">
               Current page: {currentPage}. Hover over the ellipsis (...) before
               the active page to see "Previous" button, or after the active page
               to see "Next" button. Clicking jumps by maxPages amount.
@@ -1590,9 +1590,9 @@ const Example = (args) => {
         {...restArgs}
         trigger={<Button variant="outline">Open Popover</Button>}
         content={
-          <div className="space-y-2">
-            <h4 className="font-medium leading-none">Dimensions</h4>
-            <p className="text-sm text-muted-foreground">
+          <div className="ds:space-y-2">
+            <h4 className="ds:font-medium ds:leading-none">Dimensions</h4>
+            <p className="ds:text-sm ds:text-muted-foreground">
               Set the dimensions for the layer.
             </p>
           </div>
@@ -1628,7 +1628,7 @@ interface QRCodeRootProps extends Omit<React.ComponentProps<"div">, "onError"> {
 ```tsx
 // Example from Story 'render' function
 const Example = (args) => (
-    <div className="flex gap-2">
+    <div className="ds:flex ds:gap-2">
       <QRCode
         value="https://example.com"
         size={100}
@@ -1716,10 +1716,10 @@ export const Sizes = (args: RadioProps) => {
     { label: "Large", value: "lg" },
   ];
   return (
-    <div className="flex flex-col gap-4">
-      <Radio {...args} size="sm" options={option} className="flex gap-2" />
-      <Radio {...args} size="default" options={option} className="flex gap-2" />
-      <Radio {...args} size="lg" options={option} className="flex gap-2" />
+    <div className="ds:flex ds:flex-col ds:gap-4">
+      <Radio {...args} size="sm" options={option} className="ds:flex ds:gap-2" />
+      <Radio {...args} size="default" options={option} className="ds:flex ds:gap-2" />
+      <Radio {...args} size="lg" options={option} className="ds:flex ds:gap-2" />
     </div>
   );
 };
@@ -1735,8 +1735,8 @@ export const Colors = (args: RadioProps) => {
     { label: "Warning", value: "warning" },
   ];
   return (
-    <div className="flex flex-col gap-4">
-      <Radio.Group {...args} className="flex gap-2">
+    <div className="ds:flex ds:flex-col ds:gap-4">
+      <Radio.Group {...args} className="ds:flex ds:gap-2">
         {option.map((opt) => (
           <Radio.Item
             key={opt.value}
@@ -1747,46 +1747,46 @@ export const Colors = (args: RadioProps) => {
         ))}
       </Radio.Group>
 
-      <Radio.Group {...args} className="flex gap-2">
+      <Radio.Group {...args} className="ds:flex ds:gap-2">
         <Radio.Item
           value="option1"
           label="Purple"
-          className="border-purple-500 text-purple-500"
+          className="ds:border-purple-500 ds:text-purple-500"
         />
         <Radio.Item
           value="option2"
           label="Yellow"
-          className="border-yellow-500 text-yellow-500"
+          className="ds:border-yellow-500 ds:text-yellow-500"
         />
         <Radio.Item
           value="option3"
           label="Green"
-          className="border-green-500 bg-green-500 text-white"
+          className="ds:border-green-500 ds:bg-green-500 ds:text-white"
         />
         <Radio.Item
           value="option4"
           label="Pink"
-          className="border-pink-500 bg-pink-500 text-white"
+          className="ds:border-pink-500 ds:bg-pink-500 ds:text-white"
         />
         <Radio.Item
           value="option5"
           label="Blue"
-          className="hover:border-blue-500 text-white data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500"
+          className="ds:hover:border-blue-500 ds:text-white ds:data-[state=checked]:border-blue-500 ds:data-[state=checked]:bg-blue-500"
         />
         <Radio.Item
           value="option6"
           label="Lime"
-          className="border-lime-400 text-white data-[state=checked]:border-lime-400 data-[state=checked]:bg-lime-400"
+          className="ds:border-lime-400 ds:text-white ds:data-[state=checked]:border-lime-400 ds:data-[state=checked]:bg-lime-400"
         />
         <Radio.Item
           value="option7"
           label="Square"
-          className="rounded-none border-red-400 text-white data-[state=checked]:border-red-400 data-[state=checked]:bg-red-400"
+          className="ds:rounded-none ds:border-red-400 ds:text-white ds:data-[state=checked]:border-red-400 ds:data-[state=checked]:bg-red-400"
         />
         <Radio.Item
           value="option8"
           label="Square"
-          className="rounded-none border-teal-300 text-white data-[state=checked]:border-teal-300 data-[state=checked]:bg-teal-300"
+          className="ds:rounded-none ds:border-teal-300 ds:text-white ds:data-[state=checked]:border-teal-300 ds:data-[state=checked]:bg-teal-300"
         />
       </Radio.Group>
     </div>
@@ -1852,7 +1852,7 @@ const Example = (message: string) => {
     };
 
     return (
-      <div className="space-y-4">
+      <div className="ds:space-y-4">
         <Rate
           value={value}
           onChange={(v) => {
@@ -1872,18 +1872,18 @@ const Example = (message: string) => {
             addLog("Blurred");
           }}
         />
-        <div className="space-y-2 text-sm">
-          <p className="text-muted-foreground">Value: {value}</p>
-          <p className="text-muted-foreground">
+        <div className="ds:space-y-2 ds:text-sm">
+          <p className="ds:text-muted-foreground">Value: {value}</p>
+          <p className="ds:text-muted-foreground">
             Hover value: {hoverValue || "-"}
           </p>
-          <p className="text-muted-foreground">
+          <p className="ds:text-muted-foreground">
             Focused: {focused ? "Yes" : "No"}
           </p>
-          <div className="p-2 bg-muted rounded text-xs space-y-1">
-            <p className="font-medium">Event logs:</p>
+          <div className="ds:p-2 ds:bg-muted ds:rounded ds:text-xs ds:space-y-1">
+            <p className="ds:font-medium">Event logs:</p>
             {logs.length === 0 ? (
-              <p className="text-muted-foreground">No events yet</p>
+              <p className="ds:text-muted-foreground">No events yet</p>
             ) : (
               logs.map((log, i) => <p key={i}>{log}</p>)
             )}
@@ -1919,13 +1919,13 @@ export const ProductReview: Story = {
         Object.values(ratings).filter((v) => v > 0).length || 0;
 
     return (
-      <div className="w-[400px] space-y-6 p-6 border rounded-lg">
-        <h3 className="text-lg font-semibold">Đánh giá sản phẩm</h3>
+      <div className="ds:w-[400px] ds:space-y-6 ds:p-6 ds:border ds:rounded-lg">
+        <h3 className="ds:text-lg ds:font-semibold">Đánh giá sản phẩm</h3>
 
-        <div className="space-y-4">
+        <div className="ds:space-y-4">
           {categories.map(({ key, label }) => (
-            <div key={key} className="flex items-center gap-4">
-              <span className="text-sm w-40">{label}:</span>
+            <div key={key} className="ds:flex ds:items-center ds:gap-4">
+              <span className="ds:text-sm ds:w-40">{label}:</span>
               <Rate
                 allowHalf
                 value={ratings[key as keyof typeof ratings]}
@@ -1937,11 +1937,11 @@ export const ProductReview: Story = {
           ))}
         </div>
 
-        <div className="pt-4 border-t">
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">Đánh giá trung bình:</span>
-            <div className="flex items-center gap-2">
-              <span className="text-2xl font-bold text-primary">
+        <div className="ds:pt-4 ds:border-t">
+          <div className="ds:flex ds:items-center ds:justify-between">
+            <span className="ds:text-sm ds:font-medium">Đánh giá trung bình:</span>
+            <div className="ds:flex ds:items-center ds:gap-2">
+              <span className="ds:text-2xl ds:font-bold ds:text-primary">
                 {average.toFixed(1)}
               </span>
               <Rate value={average} allowHalf disabled size="small" />
@@ -2002,18 +2002,18 @@ interface ResizableProps {
 // Example from Story 'render' function
 const Example = (args) => {
     return (
-      <div className="h-[400px] w-[800px] rounded-lg border">
+      <div className="ds:h-[400px] ds:w-[800px] ds:rounded-lg ds:border">
         <Resizable direction="horizontal">
           <Resizable.Panel defaultSize={25} minSize={15}>
-            <PanelContent title="Panel 1" className="bg-red-500/20" />
+            <PanelContent title="Panel 1" className="ds:bg-red-500/20" />
           </Resizable.Panel>
           <Resizable.Handle withHandle />
           <Resizable.Panel defaultSize={50}>
-            <PanelContent title="Panel 2" className="bg-green-500/20" />
+            <PanelContent title="Panel 2" className="ds:bg-green-500/20" />
           </Resizable.Panel>
           <Resizable.Handle withHandle />
           <Resizable.Panel defaultSize={25} minSize={15}>
-            <PanelContent title="Panel 3" className="bg-blue-500/20" />
+            <PanelContent title="Panel 3" className="ds:bg-blue-500/20" />
           </Resizable.Panel>
         </Resizable>
       </div>
@@ -2061,20 +2061,18 @@ const Example = (args) => {
           return (
             <div
               key={i}
-              className={`flex ${isMe ? "justify-end" : "justify-start"}`}
+              className={`ds:flex ${isMe ? "justify-end" : "justify-start"}`}
             >
               <div
-                className={`max-w-[70%] rounded-lg px-3 py-2 text-sm ${
-                  isMe
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-muted text-muted-foreground"
-                }`}
+                className={`ds:max-w-[70%] ds:rounded-lg ds:px-3 ds:py-2 ds:text-sm ${isMe
+                                          ? "bg-primary text-primary-foreground"
+                                          : "bg-muted text-muted-foreground"}`}
               >
                 <p>
                   {isMe ? "My message " : "Their message "}
                   {i + 1}
                 </p>
-                <p className="text-xs opacity-70 mt-1">
+                <p className="ds:text-xs ds:opacity-70 ds:mt-1">
                   {new Date().toLocaleTimeString()}
 ```
 
@@ -2120,7 +2118,7 @@ type SelectProps = Omit<ComboboxProps, "ref"> & {
 ```tsx
 // Example from Default
 const Example = (args: SelectProps) => (
-  <div className="w-96">
+  <div className="ds:w-96">
     <Select {...args} />
   </div>
 );
@@ -2142,13 +2140,13 @@ type unknown = any
 // Example from Default
 const Example = (args: SeparatorProps) => (
   <div
-    className={`w-64 h-48 flex items-center justify-center ${args.orientation === "vertical" ? "flex-row" : "flex-col"}`}
+    className={`ds:w-64 ds:h-48 ds:flex ds:items-center ds:justify-center ${args.orientation === "vertical" ? "flex-row" : "flex-col"}`}
   >
-    <div className="p-4">Content 1</div>
-    <Separator {...args} className="w-full h-full">
+    <div className="ds:p-4">Content 1</div>
+    <Separator {...args} className="ds:w-full ds:h-full">
       {args?.children}
     </Separator>
-    <div className="p-4">Content 2</div>
+    <div className="ds:p-4">Content 2</div>
   </div>
 );
 ```
@@ -2218,7 +2216,7 @@ const Example = () => {
         size="lg"
         stickyFooter
         footer={
-          <div className="flex gap-2 justify-end w-full">
+          <div className="ds:flex ds:gap-2 ds:justify-end ds:w-full">
             <Button variant="outline" onClick={() => setOpen(false)}>
               Cancel
             </Button>
@@ -2226,15 +2224,15 @@ const Example = () => {
           </div>
         }
       >
-        <div className="space-y-4 py-4">
+        <div className="ds:space-y-4 ds:py-4">
           <div>
-            <label htmlFor="name" className="block text-sm font-medium mb-2">
+            <label htmlFor="name" className="ds:block ds:text-sm ds:font-medium ds:mb-2">
               Name
             </label>
             <input
               id="name"
               type="text"
-              className="w-full px-3 py-2 border rounded-md"
+              className="ds:w-full ds:px-3 ds:py-2 ds:border ds:rounded-md"
               value={formData.name}
               onChange={(e) =>
                 setFormData({ ...formData, name: e.target.value })
@@ -2243,13 +2241,13 @@ const Example = () => {
             />
           </div>
           <div>
-            <label htmlFor="email" className="block text-sm font-medium mb-2">
+            <label htmlFor="email" className="ds:block ds:text-sm ds:font-medium ds:mb-2">
               Email
             </label>
             <input
               id="email"
               type="email"
-              className="w-full px-3 py-2 border rounded-md"
+              className="ds:w-full ds:px-3 ds:py-2 ds:border ds:rounded-md"
               value={formData.email}
               onChange={(e) =>
                 setFormData({ ...formData, email: e.target.value })
@@ -2258,13 +2256,13 @@ const Example = () => {
             />
           </div>
           <div>
-            <label htmlFor="message" className="block text-sm font-medium mb-2">
+            <label htmlFor="message" className="ds:block ds:text-sm ds:font-medium ds:mb-2">
               Message
             </label>
             <textarea
               id="message"
               rows={5}
-              className="w-full px-3 py-2 border rounded-md"
+              className="ds:w-full ds:px-3 ds:py-2 ds:border ds:rounded-md"
               value={formData.message}
               onChange={(e) =>
                 setFormData({ ...formData, message: e.target.value })
@@ -2401,35 +2399,35 @@ export const NavigationMenu: Story = {
       if (item.type === "page") {
         return (
           <div
-            className="focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]"
+            className="ds:focus-visible:ring-ring/50 ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:p-1 ds:outline-none ds:focus-visible:ring-[3px]"
             style={{ paddingLeft: `${level === 0 ? 0.25 : 1.75}rem` }}
           >
             {level === 0 ? (
-              <item.icon className="size-4 shrink-0" />
+              <item.icon className="ds:size-4 ds:shrink-0" />
             ) : (
-              <CircleSmallIcon className="size-4 shrink-0" />
+              <CircleSmallIcon className="ds:size-4 ds:shrink-0" />
             )}
-            <span className="text-sm">{item.name}</span>
+            <span className="ds:text-sm">{item.name}</span>
           </div>
         );
       }
 
       return (
         <Collapsible
-          className="flex flex-col gap-1.5"
+          className="ds:flex ds:flex-col ds:gap-1.5"
           style={{ paddingLeft: `${level === 0 ? 0 : 1.5}rem` }}
           variant="ghost"
         >
-          <CollapsibleTrigger className="focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]">
+          <CollapsibleTrigger className="ds:focus-visible:ring-ring/50 ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:p-1 ds:outline-none ds:focus-visible:ring-[3px]">
             {level === 0 ? (
-              <item.icon className="size-4 shrink-0" />
+              <item.icon className="ds:size-4 ds:shrink-0" />
             ) : (
-              <CircleSmallIcon className="size-4 shrink-0" />
+              <CircleSmallIcon className="ds:size-4 ds:shrink-0" />
             )}
-            <span className="flex-1 text-start text-sm">{item.name}</span>
-            <ChevronRightIcon className='size-4 shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+            <span className="ds:flex-1 ds:text-start ds:text-sm">{item.name}</span>
+            <ChevronRightIcon className='ds:size-4 ds:shrink-0 ds:transition-transform ds:[[data-state="open"]>&]:rotate-90' />
           </CollapsibleTrigger>
-          <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down flex flex-col gap-1.5 overflow-hidden transition-all duration-300">
+          <CollapsibleContent className="ds:data-[state=closed]:animate-collapsible-up ds:data-[state=open]:animate-collapsible-down ds:flex ds:flex-col ds:gap-1.5 ds:overflow-hidden ds:transition-all ds:duration-300">
             {item.children.map((item: any) => (
               <NavigationMenu key={item.name} item={item} level={level + 1} />
             ))}
@@ -2456,8 +2454,8 @@ const Example = (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <div className="px-2 py-2">
-            <h2 className="text-lg font-semibold">My App</h2>
+          <div className="ds:px-2 ds:py-2">
+            <h2 className="ds:text-lg ds:font-semibold">My App</h2>
           </div>
         </SidebarHeader>
         <SidebarContent>
@@ -2467,31 +2465,31 @@ const Example = (args) => (
               <SidebarMenu>
                 <SidebarMenuItem>
                   <SidebarMenuButton>
-                    <Home className="size-4" />
+                    <Home className="ds:size-4" />
                     <span>Home</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
                 <SidebarMenuItem>
                   <SidebarMenuButton>
-                    <Inbox className="size-4" />
+                    <Inbox className="ds:size-4" />
                     <span>Inbox</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
                 <SidebarMenuItem>
                   <SidebarMenuButton>
-                    <Calendar className="size-4" />
+                    <Calendar className="ds:size-4" />
                     <span>Calendar</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
                 <SidebarMenuItem>
                   <SidebarMenuButton>
-                    <Search className="size-4" />
+                    <Search className="ds:size-4" />
                     <span>Search</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
                 <SidebarMenuItem>
                   <SidebarMenuButton>
-                    <Settings className="size-4" />
+                    <Settings className="ds:size-4" />
                     <span>Settings</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
@@ -2503,7 +2501,7 @@ const Example = (args) => (
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton>
-                <User className="size-4" />
+                <User className="ds:size-4" />
                 <span>Account</span>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -2511,12 +2509,12 @@ const Example = (args) => (
         </SidebarFooter>
       </Sidebar>
       <SidebarInset>
-        <header className="flex h-16 items-center gap-2 border-b px-4">
+        <header className="ds:flex ds:h-16 ds:items-center ds:gap-2 ds:border-b ds:px-4">
           <SidebarTrigger />
-          <h1 className="text-lg font-semibold">Dashboard</h1>
+          <h1 className="ds:text-lg ds:font-semibold">Dashboard</h1>
         </header>
-        <div className="flex flex-1 flex-col gap-4 p-4">
-          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="ds:flex ds:flex-1 ds:flex-col ds:gap-4 ds:p-4">
+          <div className="ds:grid ds:auto-rows-min ds:gap-4 ds:md:grid-cols-3">
             {Array.from({ length: 6 })
 ```
 
@@ -2539,11 +2537,11 @@ const Example = (args) => {
         return (
           <div
             key={i}
-            className={`flex gap-2 ${isMe ? "flex-row-reverse" : ""}`}
+            className={`ds:flex ds:gap-2 ${isMe ? "flex-row-reverse" : ""}`}
           >
-            <Skeleton className="size-10 rounded-full shrink-0" />
-            <div className="space-y-2 flex-1">
-              <Skeleton className={`h-16 w-4/5 ${isMe ? "ml-auto" : ""}`} />
+            <Skeleton className="ds:size-10 ds:rounded-full ds:shrink-0" />
+            <div className="ds:space-y-2 ds:flex-1">
+              <Skeleton className={`ds:h-16 ds:w-4/5 ${isMe ? "ml-auto" : ""}`} />
             </div>
           </div>
         );
@@ -2591,15 +2589,15 @@ const Example = (args) => {
     };
 
     return (
-      <div className="w-80 space-y-4 p-6 rounded-lg border bg-card">
-        <div className="flex items-center justify-between">
+      <div className="ds:w-80 ds:space-y-4 ds:p-6 ds:rounded-lg ds:border ds:bg-card">
+        <div className="ds:flex ds:items-center ds:justify-between">
           <div>
-            <h3 className="font-semibold">Temperature</h3>
-            <p className="text-sm text-muted-foreground">
+            <h3 className="ds:font-semibold">Temperature</h3>
+            <p className="ds:text-sm ds:text-muted-foreground">
               Set your preferred temperature
             </p>
           </div>
-          <span className={`text-3xl font-bold ${getTempColor(temp[0])}
+          <span className={`ds:text-3xl ds:font-bold ${getTempColor(temp[0])}
 ```
 
 ---
@@ -2641,7 +2639,7 @@ const Example = (args: typeof Stepper) => {
   return (
     <Stepper
       aria-label="Onboarding stepper with steps"
-      className="w-full"
+      className="ds:w-full"
       defaultValue="step-1"
       {...args}
       steps={steps}
@@ -2651,13 +2649,13 @@ const Example = (args: typeof Stepper) => {
 
 export const Manual = () => {
   return (
-    <Stepper aria-label="Onboarding stepper manual" className="w-full">
+    <Stepper aria-label="Onboarding stepper manual" className="ds:w-full">
       <Stepper.List>
         {steps.map((step, index) => (
           <Stepper.Item key={step.value} value={step.value}>
             <Stepper.Trigger>
               <Stepper.Indicator />
-              <div className="flex flex-col">
+              <div className="ds:flex ds:flex-col">
                 <Stepper.Title>{step.title}</Stepper.Title>
                 <Stepper.Description>{step.description}</Stepper.Description>
               </div>
@@ -2716,43 +2714,43 @@ type SwitchProps = Omit<
 // Example from GlassEffect
 const Example = () => {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <span className="text-sm font-medium">Custom Purple Switch:</span>
-        <Switch className="data-[state=checked]:bg-purple-500 data-[state=unchecked]:bg-purple-200" />
+    <div className="ds:flex ds:flex-col ds:gap-6">
+      <div className="ds:flex ds:flex-col ds:gap-2">
+        <span className="ds:text-sm ds:font-medium">Custom Purple Switch:</span>
+        <Switch className="ds:data-[state=checked]:bg-purple-500 ds:data-[state=unchecked]:bg-purple-200" />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <span className="text-sm font-medium">Custom Gradient Switch:</span>
-        <Switch className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-pink-500 data-[state=checked]:to-violet-500 data-[state=unchecked]:bg-gray-300 border-none" />
+      <div className="ds:flex ds:flex-col ds:gap-2">
+        <span className="ds:text-sm ds:font-medium">Custom Gradient Switch:</span>
+        <Switch className="ds:data-[state=checked]:bg-gradient-to-r ds:data-[state=checked]:from-pink-500 ds:data-[state=checked]:to-violet-500 ds:data-[state=unchecked]:bg-gray-300 ds:border-none" />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <span className="text-sm font-medium">Custom Orange Switch:</span>
-        <Switch className="data-[state=checked]:bg-orange-500 data-[state=unchecked]:bg-orange-200 [&_[data-slot=switch-thumb]]:data-[state=checked]:bg-orange-100" />
+      <div className="ds:flex ds:flex-col ds:gap-2">
+        <span className="ds:text-sm ds:font-medium">Custom Orange Switch:</span>
+        <Switch className="ds:data-[state=checked]:bg-orange-500 ds:data-[state=unchecked]:bg-orange-200 ds:[&_[data-slot=switch-thumb]]:data-[state=checked]:bg-orange-100" />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <span className="text-sm font-medium">Custom Teal Switch:</span>
-        <Switch className="data-[state=checked]:bg-teal-500 data-[state=unchecked]:bg-teal-200 [&_[data-slot=switch-thumb]]:data-[state=checked]:bg-teal-100" />
+      <div className="ds:flex ds:flex-col ds:gap-2">
+        <span className="ds:text-sm ds:font-medium">Custom Teal Switch:</span>
+        <Switch className="ds:data-[state=checked]:bg-teal-500 ds:data-[state=unchecked]:bg-teal-200 ds:[&_[data-slot=switch-thumb]]:data-[state=checked]:bg-teal-100" />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <span className="text-sm font-medium">Custom Thumb Color:</span>
-        <Switch className="data-[state=checked]:bg-pink-400 data-[state=unchecked]:!bg-pink-800 [&_[data-slot=switch-thumb]]:data-[state=checked]:bg-yellow-500" />
+      <div className="ds:flex ds:flex-col ds:gap-2">
+        <span className="ds:text-sm ds:font-medium">Custom Thumb Color:</span>
+        <Switch className="ds:data-[state=checked]:bg-pink-400 ds:data-[state=unchecked]:!bg-pink-800 ds:[&_[data-slot=switch-thumb]]:data-[state=checked]:bg-yellow-500" />
       </div>
     </div>
   );
 };
 
 const DisabledStateComponent = () => (
-  <div className="flex flex-col gap-4">
-    <div className="flex items-center gap-4">
-      <span className="text-sm font-medium">Disabled (Off):</span>
+  <div className="ds:flex ds:flex-col ds:gap-4">
+    <div className="ds:flex ds:items-center ds:gap-4">
+      <span className="ds:text-sm ds:font-medium">Disabled (Off):</span>
       <Switch checked={false} disabled />
     </div>
-    <div className="flex items-center gap-4">
-      <span className="text-sm font-medium">Disabled (On):</span>
+    <div className="ds:flex ds:items-center ds:gap-4">
+      <span className="ds:text-sm ds:font-medium">Disabled (On):</span>
       <Switch checked={true} disabled />
     </div>
   </div>
@@ -2812,11 +2810,11 @@ const Example = (args) => {
       {
         key: "overview",
         label: "Overview",
-        icon: <Home className="size-4" />,
+        icon: <Home className="ds:size-4" />,
         children: (
-          <div className="p-4 border rounded-lg">
-            <h3 className="font-semibold mb-2">Overview</h3>
-            <p className="text-sm text-muted-foreground">
+          <div className="ds:p-4 ds:border ds:rounded-lg">
+            <h3 className="ds:font-semibold ds:mb-2">Overview</h3>
+            <p className="ds:text-sm ds:text-muted-foreground">
               Dashboard overview with key metrics and statistics.
             </p>
           </div>
@@ -2825,11 +2823,11 @@ const Example = (args) => {
       {
         key: "profile",
         label: "Profile",
-        icon: <User className="size-4" />,
+        icon: <User className="ds:size-4" />,
         children: (
-          <div className="p-4 border rounded-lg">
-            <h3 className="font-semibold mb-2">Profile</h3>
-            <p className="text-sm text-muted-foreground">
+          <div className="ds:p-4 ds:border ds:rounded-lg">
+            <h3 className="ds:font-semibold ds:mb-2">Profile</h3>
+            <p className="ds:text-sm ds:text-muted-foreground">
               Manage your profile information and preferences.
             </p>
           </div>
@@ -2838,11 +2836,11 @@ const Example = (args) => {
       {
         key: "settings",
         label: "Settings",
-        icon: <Settings className="size-4" />,
+        icon: <Settings className="ds:size-4" />,
         children: (
-          <div className="p-4 border rounded-lg">
-            <h3 className="font-semibold mb-2">Settings</h3>
-            <p className="text-sm text-muted-foreground">
+          <div className="ds:p-4 ds:border ds:rounded-lg">
+            <h3 className="ds:font-semibold ds:mb-2">Settings</h3>
+            <p className="ds:text-sm ds:text-muted-foreground">
               Configure your application settings and preferences.
             </p>
           </div>
@@ -2851,11 +2849,11 @@ const Example = (args) => {
       {
         key: "notifications",
         label: "Notifications",
-        icon: <Bell className="size-4" />,
+        icon: <Bell className="ds:size-4" />,
         children: (
-          <div className="p-4 border rounded-lg">
-            <h3 className="font-semibold mb-2">Notifications</h3>
-            <p className="text-sm text-muted-foreground">
+          <div className="ds:p-4 ds:border ds:rounded-lg">
+            <h3 className="ds:font-semibold ds:mb-2">Notifications</h3>
+            <p className="ds:text-sm ds:text-muted-foreground">
               Manage your notification preferences and alerts.
             </p>
           </div>
@@ -2867,7 +2865,7 @@ const Example = (args) => {
       <Tabs
         defaultActiveKey="overview"
         items={items}
-        className="w-[500px]"
+        className="ds:w-[500px]"
         fullWidth
       />
     );
@@ -2905,7 +2903,7 @@ type TextareaProps = Omit<
 ```tsx
 // Example from Default
 const Example = (args: TextareaProps) => (
-  <div className="w-96">
+  <div className="ds:w-96">
     <Textarea {...args} />
   </div>
 );
@@ -2938,7 +2936,7 @@ No explicit Props type definition found.
 // Example from Story 'render' function
 const Example = (args) => {
     return (
-      <div className="flex flex-col items-center gap-3 p-6 w-96">
+      <div className="ds:flex ds:flex-col ds:items-center ds:gap-3 ds:p-6 ds:w-96">
         <Toaster {...args} />
         <Button onClick={() => toast("This is a default toast")}
 ```
@@ -2981,7 +2979,7 @@ export const Variants = (args: ToggleProps) => {
   const [pressed1, setPressed1] = useState(false);
   const [pressed2, setPressed2] = useState(false);
   return (
-    <div className="flex flex-row gap-4">
+    <div className="ds:flex ds:flex-row ds:gap-4">
       <Toggle {...args} pressed={pressed1} onPressedChange={setPressed1} />
       <Toggle
         {...args}
@@ -2995,24 +2993,24 @@ export const Variants = (args: ToggleProps) => {
 
 export const ToggleWithIcon = (args: ToggleProps) => {
   return (
-    <div className="flex flex-row items-center gap-2">
+    <div className="ds:flex ds:flex-row ds:items-center ds:gap-2">
       <Toggle
         {...args}
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
+        className="ds:data-[state=on]:bg-transparent ds:data-[state=on]:*:[svg]:fill-yellow-500 ds:data-[state=on]:*:[svg]:stroke-yellow-500"
       >
         <StarIcon />
         Star
       </Toggle>
       <Toggle
         {...args}
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
+        className="ds:data-[state=on]:bg-transparent ds:data-[state=on]:*:[svg]:fill-red-500 ds:data-[state=on]:*:[svg]:stroke-red-500"
       >
         <HeartIcon />
         Heart
       </Toggle>
       <Toggle
         {...args}
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
+        className="ds:data-[state=on]:bg-transparent ds:data-[state=on]:*:[svg]:fill-blue-500 ds:data-[state=on]:*:[svg]:stroke-blue-500"
       >
         <BookmarkIcon />
         Bookmark
@@ -3026,7 +3024,7 @@ export const Sizes = (args: ToggleProps) => {
   const [pressed2, setPressed2] = useState(false);
   const [pressed3, setPressed3] = useState(false);
   return (
-    <div className="flex flex-row gap-4 items-center">
+    <div className="ds:flex ds:flex-row ds:gap-4 ds:items-center">
       <Toggle
         {...args}
         size="sm"
@@ -3058,7 +3056,7 @@ export const Colors = (args: ToggleProps) => {
   const [pressed6, setPressed6] = useState(true);
   const [pressed7, setPressed7] = useState(true);
   return (
-    <div className="flex flex-row gap-4">
+    <div className="ds:flex ds:flex-row ds:gap-4">
       <Toggle
         {...args}
         color="primary"
@@ -3140,9 +3138,9 @@ type TooltipProps = TooltipContentProps & {
 const Example = (args) => {
   const content = (pos: string) => {
     return (
-      <div className="flex flex-col gap-2">
-        <h2 className="font-semibold flex items-center gap-2">
-          <Info className="size-4" /> {pos} Tooltip
+      <div className="ds:flex ds:flex-col ds:gap-2">
+        <h2 className="ds:font-semibold ds:flex ds:items-center ds:gap-2">
+          <Info className="ds:size-4" /> {pos} Tooltip
         </h2>
         <div>Additional content</div>
       </div>