@rark-ui/themes 1.2.0 → 1.2.2

package/src/default/crafts/tabs.ts

@@ -1,122 +1,122 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-tabs'
-
-export const tvTabs = tv({
-  slots: {
-    root: '',
-    list: ['flex', 'items-center', 'relative', 'overflow-hidden'],
-    trigger: [
-      'inline-flex',
-      'items-center',
-      'justify-center',
-      'whitespace-nowrap',
-      'rounded',
-      'transition-all',
-      'outline-offset-[-2px]',
-      'disabled:pointer-events-none',
-      'disabled:opacity-(--disabled-opacity)',
-    ],
-    content: ['mt-2'],
-    indicator: [],
-  },
-
-  variants: {
-    size: {
-      xs: {
-        trigger: 'text-xs',
-      },
-      sm: {
-        trigger: 'text-sm',
-      },
-      base: {
-        trigger: 'text-base',
-      },
-      lg: {
-        trigger: 'text-lg',
-      },
-    },
-    orientation: {
-      horizontal: {
-        indicator: 'w-(--width) bottom-0',
-      },
-      vertical: {
-        indicator: 'h-(--height)',
-      },
-    },
-    prev: {
-      true: '',
-      false: '',
-    },
-    next: {
-      true: '',
-      false: '',
-    },
-  },
-  compoundVariants: [
-    // horizontal
-    {
-      orientation: 'horizontal',
-      size: 'xs',
-      class: {
-        trigger: 'px-3 py-2',
-        indicator: 'h-0.5',
-      },
-    },
-    {
-      orientation: 'horizontal',
-      size: 'sm',
-      class: {
-        trigger: 'px-3.5 py-2.5',
-        indicator: 'h-0.75',
-      },
-    },
-    {
-      orientation: 'horizontal',
-      size: 'base',
-      class: {
-        trigger: 'px-4 py-3',
-        indicator: 'h-1',
-      },
-    },
-    {
-      orientation: 'horizontal',
-      size: 'lg',
-      class: {
-        trigger: 'px-4.5 py-3.5',
-        indicator: 'h-1.25',
-      },
-    },
-    {
-      orientation: 'horizontal',
-      prev: true,
-      class: {
-        content: 'data-[state=open]:-motion-translate-x-in data-[state=open]:motion-opacity-in',
-      },
-    },
-    {
-      orientation: 'horizontal',
-      next: true,
-      class: {
-        content: 'data-[state=open]:motion-translate-x-in data-[state=open]:motion-opacity-in',
-      },
-    },
-  ],
-  defaultVariants: {
-    size: 'base',
-    orientation: 'horizontal',
-    prev: false,
-    next: false,
-  },
-}, {
-  slots: {
-    root: prefix,
-    list: `${prefix}-list`,
-    trigger: `${prefix}-trigger`,
-    content: `${prefix}-content`,
-    indicator: `${prefix}-indicator`,
-  },
-})
-
-export type TabsVariants = VariantProps<typeof tvTabs>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-tabs'
+
+export const tvTabs = tv({
+  slots: {
+    root: '',
+    list: ['flex', 'items-center', 'relative', 'overflow-hidden'],
+    trigger: [
+      'inline-flex',
+      'items-center',
+      'justify-center',
+      'whitespace-nowrap',
+      'rounded',
+      'transition-all',
+      'outline-offset-[-2px]',
+      'disabled:pointer-events-none',
+      'disabled:opacity-(--disabled-opacity)',
+    ],
+    content: ['mt-2'],
+    indicator: [],
+  },
+
+  variants: {
+    size: {
+      xs: {
+        trigger: 'text-xs',
+      },
+      sm: {
+        trigger: 'text-sm',
+      },
+      base: {
+        trigger: 'text-base',
+      },
+      lg: {
+        trigger: 'text-lg',
+      },
+    },
+    orientation: {
+      horizontal: {
+        indicator: 'w-(--width) bottom-0',
+      },
+      vertical: {
+        indicator: 'h-(--height)',
+      },
+    },
+    prev: {
+      true: '',
+      false: '',
+    },
+    next: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    // horizontal
+    {
+      orientation: 'horizontal',
+      size: 'xs',
+      class: {
+        trigger: 'px-3 py-2',
+        indicator: 'h-0.5',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      class: {
+        trigger: 'px-3.5 py-2.5',
+        indicator: 'h-0.75',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'base',
+      class: {
+        trigger: 'px-4 py-3',
+        indicator: 'h-1',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      class: {
+        trigger: 'px-4.5 py-3.5',
+        indicator: 'h-1.25',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      prev: true,
+      class: {
+        content: 'data-[state=open]:-motion-translate-x-in data-[state=open]:motion-opacity-in',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      next: true,
+      class: {
+        content: 'data-[state=open]:motion-translate-x-in data-[state=open]:motion-opacity-in',
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'base',
+    orientation: 'horizontal',
+    prev: false,
+    next: false,
+  },
+}, {
+  slots: {
+    root: prefix,
+    list: `${prefix}-list`,
+    trigger: `${prefix}-trigger`,
+    content: `${prefix}-content`,
+    indicator: `${prefix}-indicator`,
+  },
+})
+
+export type TabsVariants = VariantProps<typeof tvTabs>

package/src/default/crafts/tags-input.ts

@@ -1,81 +1,81 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-tags-input'
-
-export const tvTagsInput = tv(
-  {
-    slots: {
-      root: ['flex flex-col'],
-      control: ['flex', 'items-center'],
-      scrollArea: '',
-      scrollAreaContent: '',
-      input: ['focus:outline-none', 'bg-transparent'],
-      item: '',
-      itemPreview: 'flex items-center gap-1 rounded-full cursor-default',
-      itemInput: 'p-0 w-fit min-w-0 outline-none',
-      itemText: '',
-    },
-
-    variants: {
-      size: {
-        xs: {
-          input: 'text-xs',
-          itemPreview: 'text-xs px-1.5',
-          itemInput: 'text-xs px-0.5',
-        },
-        sm: {
-          input: 'text-sm',
-          itemPreview: 'text-sm px-2',
-          itemInput: 'text-sm px-1',
-        },
-        base: {
-          input: 'text-base',
-          itemPreview: 'text-base px-2.5',
-          itemInput: 'text-base px-1.5',
-        },
-        lg: {
-          input: 'text-lg',
-          itemPreview: 'text-lg px-2.5',
-          itemInput: 'text-lg px-1.5',
-        },
-      },
-      inline: {
-        true: {
-          control: ['flex-nowrap', 'p-0', 'gap-0'],
-          scrollArea: ['flex-shrink-0', 'py-1.5', 'px-2', 'max-w-[calc(100%-var(--spacing)*10)]'],
-          scrollAreaContent: ['flex', 'flex-nowrap', 'gap-2'],
-          input: ['flex-shrink-1', 'py-1.5', 'px-2', 'min-w-5'],
-          itemText: 'whitespace-nowrap',
-        },
-        false: {
-          control: 'flex-wrap',
-        },
-      },
-      empty: {
-        true: {
-          scrollArea: 'p-0',
-        },
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-      inline: true,
-    },
-  },
-  {
-    slots: {
-      root: prefix,
-      control: `${prefix}-control`,
-      input: `${prefix}-input`,
-      scrollArea: `${prefix}-scroll-area`,
-      scrollAreaContent: `${prefix}-scroll-area-content`,
-      item: `${prefix}-item`,
-      itemPreview: `${prefix}-item-preview`,
-      itemInput: `${prefix}-item-input`,
-      itemText: `${prefix}-item-text`,
-    },
-  },
-)
-
-export type TagsInputVariants = VariantProps<typeof tvTagsInput>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-tags-input'
+
+export const tvTagsInput = tv(
+  {
+    slots: {
+      root: ['flex flex-col'],
+      control: ['flex', 'items-center'],
+      scrollArea: '',
+      scrollAreaContent: '',
+      input: ['focus:outline-none', 'bg-transparent'],
+      item: '',
+      itemPreview: 'flex items-center gap-1 rounded-full cursor-default',
+      itemInput: 'p-0 w-fit min-w-0 outline-none',
+      itemText: '',
+    },
+
+    variants: {
+      size: {
+        xs: {
+          input: 'text-xs',
+          itemPreview: 'text-xs px-1.5',
+          itemInput: 'text-xs px-0.5',
+        },
+        sm: {
+          input: 'text-sm',
+          itemPreview: 'text-sm px-2',
+          itemInput: 'text-sm px-1',
+        },
+        base: {
+          input: 'text-base',
+          itemPreview: 'text-base px-2.5',
+          itemInput: 'text-base px-1.5',
+        },
+        lg: {
+          input: 'text-lg',
+          itemPreview: 'text-lg px-2.5',
+          itemInput: 'text-lg px-1.5',
+        },
+      },
+      inline: {
+        true: {
+          control: ['flex-nowrap', 'p-0', 'gap-0'],
+          scrollArea: ['flex-shrink-0', 'py-1.5', 'px-2', 'max-w-[calc(100%-var(--spacing)*10)]'],
+          scrollAreaContent: ['flex', 'flex-nowrap', 'gap-2'],
+          input: ['flex-shrink-1', 'py-1.5', 'px-2', 'min-w-5'],
+          itemText: 'whitespace-nowrap',
+        },
+        false: {
+          control: 'flex-wrap',
+        },
+      },
+      empty: {
+        true: {
+          scrollArea: 'p-0',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      inline: true,
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      control: `${prefix}-control`,
+      input: `${prefix}-input`,
+      scrollArea: `${prefix}-scroll-area`,
+      scrollAreaContent: `${prefix}-scroll-area-content`,
+      item: `${prefix}-item`,
+      itemPreview: `${prefix}-item-preview`,
+      itemInput: `${prefix}-item-input`,
+      itemText: `${prefix}-item-text`,
+    },
+  },
+)
+
+export type TagsInputVariants = VariantProps<typeof tvTagsInput>

package/src/default/crafts/toast.ts

@@ -1,70 +1,70 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-toast'
-
-export const tvToast = tv(
-  {
-    slots: {
-      root: ['group/toast'],
-      content: ['flex', 'items-center', 'border-l-3', 'rounded-md'],
-      inner: 'flex flex-col w-max',
-      title: '',
-      description: '',
-      icon: 'size-[1lh]',
-      close: 'size-[1lh]',
-    },
-    variants: {
-      size: {
-        xs: {
-          content: 'py-3 px-4 space-x-3',
-          inner: 'gap-0.5',
-          icon: 'text-sm',
-          close: 'text-xs',
-          title: 'text-sm',
-          description: 'text-xs',
-        },
-        sm: {
-          content: 'py-4 px-6 space-x-4',
-          inner: 'gap-1',
-          icon: 'text-base',
-          close: 'text-sm',
-          title: 'text-base',
-          description: 'text-sm',
-        },
-        base: {
-          content: 'py-5 px-8 space-x-5',
-          inner: 'gap-1.5',
-          icon: 'text-base',
-          close: 'text-base',
-          title: 'text-lg',
-          description: 'text-base',
-        },
-        lg: {
-          content: 'py-6 px-10 space-x-6',
-          inner: 'gap-2',
-          icon: 'text-lg',
-          close: 'text-base',
-          title: 'text-lg',
-          description: 'text-base',
-        },
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  },
-  {
-    slots: {
-      root: prefix,
-      content: `${prefix}-content`,
-      inner: `${prefix}-inner`,
-      title: `${prefix}-title`,
-      description: `${prefix}-description`,
-      icon: `${prefix}-icon`,
-      close: `${prefix}-close`,
-    },
-  },
-)
-
-export type ToastVariants = VariantProps<typeof tvToast>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-toast'
+
+export const tvToast = tv(
+  {
+    slots: {
+      root: ['group/toast'],
+      content: ['flex', 'items-center', 'border-l-3', 'rounded-md'],
+      inner: 'flex flex-col w-max',
+      title: '',
+      description: '',
+      icon: 'size-[1lh]',
+      close: '',
+    },
+    variants: {
+      size: {
+        xs: {
+          content: 'py-3 px-4 space-x-3',
+          inner: 'gap-0.5',
+          icon: 'text-sm',
+          close: 'text-xs',
+          title: 'text-sm',
+          description: 'text-xs',
+        },
+        sm: {
+          content: 'py-4 px-6 space-x-4',
+          inner: 'gap-1',
+          icon: 'text-base',
+          close: 'text-sm',
+          title: 'text-base',
+          description: 'text-sm',
+        },
+        base: {
+          content: 'py-5 px-8 space-x-5',
+          inner: 'gap-1.5',
+          icon: 'text-base',
+          close: 'text-base',
+          title: 'text-lg',
+          description: 'text-base',
+        },
+        lg: {
+          content: 'py-6 px-10 space-x-6',
+          inner: 'gap-2',
+          icon: 'text-lg',
+          close: 'text-base',
+          title: 'text-lg',
+          description: 'text-base',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      content: `${prefix}-content`,
+      inner: `${prefix}-inner`,
+      title: `${prefix}-title`,
+      description: `${prefix}-description`,
+      icon: `${prefix}-icon`,
+      close: `${prefix}-close`,
+    },
+  },
+)
+
+export type ToastVariants = VariantProps<typeof tvToast>

package/src/default/crafts/toggle-group.ts

@@ -1,57 +1,57 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-toggle-group'
-
-export const tvToggleGroup = tv(
-  {
-    slots: {
-      root: ['w-fit', 'inline-flex', 'items-center', 'group/toggle-group', 'border', 'rounded'],
-      item: ['flex', 'items-center', 'justify-center', 'aspect-square'],
-    },
-    variants: {
-      size: {
-        xs: {
-          item: 'size-6 text-xs',
-        },
-        sm: {
-          item: 'size-7 text-sm',
-        },
-        base: {
-          item: 'size-8 text-base',
-        },
-        lg: {
-          item: 'size-9 text-lg',
-        },
-      },
-      orientation: {
-        horizontal: {
-          root: 'flex-row',
-          item: [
-            '[&:not([hidden])~:not([hidden])]:border-s',
-            '[&:not([hidden])~:not([hidden])]:border-e-0',
-          ],
-        },
-        vertical: {
-          root: 'flex-col',
-          item: [
-            '[&:not([hidden])~:not([hidden])]:border-t',
-            '[&:not([hidden])~:not([hidden])]:border-b-0',
-          ],
-        },
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-      orientation: 'horizontal',
-    },
-  },
-  {
-    slots: {
-      root: prefix,
-      item: `${prefix}-item`,
-    },
-  },
-)
-
-export type ToggleGroupVariants = VariantProps<typeof tvToggleGroup>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-toggle-group'
+
+export const tvToggleGroup = tv(
+  {
+    slots: {
+      root: ['w-fit', 'inline-flex', 'items-center', 'group/toggle-group', 'border', 'rounded'],
+      item: ['flex', 'items-center', 'justify-center', 'aspect-square'],
+    },
+    variants: {
+      size: {
+        xs: {
+          item: 'size-6 text-xs',
+        },
+        sm: {
+          item: 'size-7 text-sm',
+        },
+        base: {
+          item: 'size-8 text-base',
+        },
+        lg: {
+          item: 'size-9 text-lg',
+        },
+      },
+      orientation: {
+        horizontal: {
+          root: 'flex-row',
+          item: [
+            '[&:not([hidden])~:not([hidden])]:border-s',
+            '[&:not([hidden])~:not([hidden])]:border-e-0',
+          ],
+        },
+        vertical: {
+          root: 'flex-col',
+          item: [
+            '[&:not([hidden])~:not([hidden])]:border-t',
+            '[&:not([hidden])~:not([hidden])]:border-b-0',
+          ],
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      orientation: 'horizontal',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      item: `${prefix}-item`,
+    },
+  },
+)
+
+export type ToggleGroupVariants = VariantProps<typeof tvToggleGroup>