@rark-ui/themes 1.2.0 → 1.2.1

package/src/default/crafts/toggle.ts

@@ -1,34 +1,34 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-toggle'
-
-export const tvToggle = tv({
-  base: [
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'rounded',
-    'border',
-    'transition-all',
-    'disabled:pointer-events-none',
-    'disabled:opacity-(--disabled-opacity)',
-    '[&_svg]:pointer-events-none',
-    '[&_svg]:shrink-0',
-  ],
-  variants: {
-    size: {
-      xs: 'h-6 text-xs gap-1.5 px-3',
-      sm: 'h-7 text-sm gap-2.5 px-4',
-      base: 'h-8 text-base gap-3 px-5',
-      lg: 'h-9 text-lg gap-3.5 px-6',
-    },
-  },
-  defaultVariants: {
-    size: 'base',
-  },
-}, {
-  class: prefix,
-})
-
-export type ToggleVariants = VariantProps<typeof tvToggle>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-toggle'
+
+export const tvToggle = tv({
+  base: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded',
+    'border',
+    'transition-all',
+    'disabled:pointer-events-none',
+    'disabled:opacity-(--disabled-opacity)',
+    '[&_svg]:pointer-events-none',
+    '[&_svg]:shrink-0',
+  ],
+  variants: {
+    size: {
+      xs: 'h-6 text-xs gap-1.5 px-3',
+      sm: 'h-7 text-sm gap-2.5 px-4',
+      base: 'h-8 text-base gap-3 px-5',
+      lg: 'h-9 text-lg gap-3.5 px-6',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
+}, {
+  class: prefix,
+})
+
+export type ToggleVariants = VariantProps<typeof tvToggle>

package/src/default/crafts/tooltip.ts

@@ -1,63 +1,63 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-tooltip'
-
-export const tvTooltip = tv(
-  {
-    slots: {
-      content: [
-        'rounded-(--border-radius)',
-        'data-[state=open]:motion-opacity-in',
-        'data-[state=open]:motion-scale-in-95',
-        'data-[state=open]:data-[placement^=bottom]:motion-translate-y-in-[.25rem]',
-        'data-[state=open]:data-[placement^=top]:-motion-translate-y-in-[.25rem]',
-        'data-[state=open]:data-[placement^=left]:-motion-translate-x-in-[.25rem]',
-        'data-[state=open]:data-[placement^=right]:motion-translate-x-in-[.25rem]',
-        'data-[state=closed]:motion-opacity-out',
-        'data-[state=closed]:motion-scale-out-95',
-        'data-[state=closed]:data-[placement^=bottom]:motion-translate-y-out-[.25rem]',
-        'data-[state=closed]:data-[placement^=top]:-motion-translate-y-out-[.25rem]',
-        'data-[state=closed]:data-[placement^=left]:-motion-translate-x-out-[.25rem]',
-        'data-[state=closed]:data-[placement^=right]:motion-translate-x-out-[.25rem]',
-      ],
-      contentInner: ['relative', 'rounded-(--border-radius)', 'z-10'],
-    },
-    variants: {
-      size: {
-        xs: {
-          contentInner: 'px-1.5 py-0.5 text-xs',
-        },
-        sm: {
-          contentInner: 'px-2 py-1 text-sm',
-        },
-        base: {
-          contentInner: 'px-2.5 py-1.5 text-base',
-        },
-        lg: {
-          contentInner: 'px-3 py-2 text-lg',
-        },
-      },
-      bordered: {
-        true: {
-          content: 'border',
-        },
-        false: {
-          content: 'border-none',
-        },
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-      bordered: true,
-    },
-  },
-  {
-    slots: {
-      content: `${prefix}-content`,
-      contentInner: `${prefix}-content-inner`,
-    },
-  },
-)
-
-export type TooltipVariants = VariantProps<typeof tvTooltip>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-tooltip'
+
+export const tvTooltip = tv(
+  {
+    slots: {
+      content: [
+        'rounded-(--border-radius)',
+        'data-[state=open]:motion-opacity-in',
+        'data-[state=open]:motion-scale-in-95',
+        'data-[state=open]:data-[placement^=bottom]:motion-translate-y-in-[.25rem]',
+        'data-[state=open]:data-[placement^=top]:-motion-translate-y-in-[.25rem]',
+        'data-[state=open]:data-[placement^=left]:-motion-translate-x-in-[.25rem]',
+        'data-[state=open]:data-[placement^=right]:motion-translate-x-in-[.25rem]',
+        'data-[state=closed]:motion-opacity-out',
+        'data-[state=closed]:motion-scale-out-95',
+        'data-[state=closed]:data-[placement^=bottom]:motion-translate-y-out-[.25rem]',
+        'data-[state=closed]:data-[placement^=top]:-motion-translate-y-out-[.25rem]',
+        'data-[state=closed]:data-[placement^=left]:-motion-translate-x-out-[.25rem]',
+        'data-[state=closed]:data-[placement^=right]:motion-translate-x-out-[.25rem]',
+      ],
+      contentInner: ['relative', 'rounded-(--border-radius)', 'z-10'],
+    },
+    variants: {
+      size: {
+        xs: {
+          contentInner: 'px-1.5 py-0.5 text-xs',
+        },
+        sm: {
+          contentInner: 'px-2 py-1 text-sm',
+        },
+        base: {
+          contentInner: 'px-2.5 py-1.5 text-base',
+        },
+        lg: {
+          contentInner: 'px-3 py-2 text-lg',
+        },
+      },
+      bordered: {
+        true: {
+          content: 'border',
+        },
+        false: {
+          content: 'border-none',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      bordered: true,
+    },
+  },
+  {
+    slots: {
+      content: `${prefix}-content`,
+      contentInner: `${prefix}-content-inner`,
+    },
+  },
+)
+
+export type TooltipVariants = VariantProps<typeof tvTooltip>

package/src/default/crafts/tree.ts

@@ -1,165 +1,165 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-tree'
-
-export const tvTree = tv(
-  {
-    slots: {
-      root: '',
-      tree: '',
-    },
-  },
-  {
-    slots: {
-      root: prefix,
-      tree: `${prefix}-tree`,
-    },
-  },
-)
-
-export type TreeVariants = VariantProps<typeof tvTree>
-
-export const tvTreeBranch = tv(
-  {
-    slots: {
-      root: 'data-[disabled]:pointer-events-none',
-      control: 'flex items-center justify-between data-[disabled]:pointer-events-none',
-      title: 'flex items-center',
-      text: '',
-      icon: 'size-[1lh]',
-      indicator: [
-        'data-[state=open]:rotate-90',
-        'data-[state=closed]:rotate-0',
-        'transition-transform',
-      ],
-      content: [
-        'overflow-hidden',
-        'data-[state=open]:animate-collapsible-down',
-        'data-[state=closed]:animate-collapsible-up',
-      ],
-      indentGuide: '',
-      checkbox: '',
-      checkboxIndicator: '',
-    },
-
-    variants: {
-      size: {
-        xs: {
-          control: [
-            'text-xs',
-            'min-h-6',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*3.5)))]',
-          ],
-          title: 'gap-2',
-        },
-        sm: {
-          control: [
-            'text-sm',
-            'min-h-8',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4)))]',
-          ],
-          title: 'gap-2.5',
-        },
-        base: {
-          control: [
-            'text-base',
-            'min-h-10',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4.5)))]',
-          ],
-          title: 'gap-3',
-        },
-        lg: {
-          control: [
-            'text-lg',
-            'min-h-12',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*5)))]',
-          ],
-          title: 'gap-3.5',
-        },
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  },
-  {
-    slots: {
-      root: `${prefix}-branch`,
-      control: `${prefix}-branch-control`,
-      title: `${prefix}-branch-title`,
-      text: `${prefix}-branch-text`,
-      icon: `${prefix}-branch-icon`,
-      indicator: `${prefix}-branch-indicator`,
-      content: `${prefix}-branch-content`,
-      indentGuide: `${prefix}-branch-indent-guide`,
-      checkbox: `${prefix}-branch-checkbox`,
-      checkboxIndicator: `${prefix}-branch-checkbox-indicator`,
-    },
-  },
-)
-export type TreeBranchVariants = VariantProps<typeof tvTreeBranch>
-
-export const tvTreeItem = tv(
-  {
-    slots: {
-      root: 'data-[disabled]:pointer-events-none',
-      title: 'flex items-center gap-2',
-      icon: 'size-[1lh]',
-      text: '',
-      checkbox: '',
-      checkboxIndicator: '',
-    },
-    variants: {
-      size: {
-        xs: {
-          title: [
-            'gap-2',
-            'min-h-6',
-            'text-xs',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*3.5)))]',
-          ],
-        },
-        sm: {
-          title: [
-            'gap-2.5',
-            'min-h-8',
-            'text-sm',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4)))]',
-          ],
-        },
-        base: {
-          title: [
-            'gap-3',
-            'min-h-10',
-            'text-base',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4.5)))]',
-          ],
-        },
-        lg: {
-          title: [
-            'gap-3.5',
-            'min-h-12',
-            'text-lg',
-            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*5)))]',
-          ],
-        },
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  },
-  {
-    slots: {
-      root: `${prefix}-item`,
-      title: `${prefix}-item-title`,
-      icon: `${prefix}-item-icon`,
-      text: `${prefix}-item-text`,
-      checkbox: `${prefix}-item-checkbox`,
-      checkboxIndicator: `${prefix}-item-checkbox-indicator`,
-    },
-  },
-)
-
-export type TreeItemVariants = VariantProps<typeof tvTreeItem>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-tree'
+
+export const tvTree = tv(
+  {
+    slots: {
+      root: '',
+      tree: '',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      tree: `${prefix}-tree`,
+    },
+  },
+)
+
+export type TreeVariants = VariantProps<typeof tvTree>
+
+export const tvTreeBranch = tv(
+  {
+    slots: {
+      root: 'data-[disabled]:pointer-events-none',
+      control: 'flex items-center justify-between data-[disabled]:pointer-events-none',
+      title: 'flex items-center',
+      text: '',
+      icon: 'size-[1lh]',
+      indicator: [
+        'data-[state=open]:rotate-90',
+        'data-[state=closed]:rotate-0',
+        'transition-transform',
+      ],
+      content: [
+        'overflow-hidden',
+        'data-[state=open]:animate-collapsible-down',
+        'data-[state=closed]:animate-collapsible-up',
+      ],
+      indentGuide: '',
+      checkbox: '',
+      checkboxIndicator: '',
+    },
+
+    variants: {
+      size: {
+        xs: {
+          control: [
+            'text-xs',
+            'min-h-6',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*3.5)))]',
+          ],
+          title: 'gap-2',
+        },
+        sm: {
+          control: [
+            'text-sm',
+            'min-h-8',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4)))]',
+          ],
+          title: 'gap-2.5',
+        },
+        base: {
+          control: [
+            'text-base',
+            'min-h-10',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4.5)))]',
+          ],
+          title: 'gap-3',
+        },
+        lg: {
+          control: [
+            'text-lg',
+            'min-h-12',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*5)))]',
+          ],
+          title: 'gap-3.5',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      root: `${prefix}-branch`,
+      control: `${prefix}-branch-control`,
+      title: `${prefix}-branch-title`,
+      text: `${prefix}-branch-text`,
+      icon: `${prefix}-branch-icon`,
+      indicator: `${prefix}-branch-indicator`,
+      content: `${prefix}-branch-content`,
+      indentGuide: `${prefix}-branch-indent-guide`,
+      checkbox: `${prefix}-branch-checkbox`,
+      checkboxIndicator: `${prefix}-branch-checkbox-indicator`,
+    },
+  },
+)
+export type TreeBranchVariants = VariantProps<typeof tvTreeBranch>
+
+export const tvTreeItem = tv(
+  {
+    slots: {
+      root: 'data-[disabled]:pointer-events-none',
+      title: 'flex items-center gap-2',
+      icon: 'size-[1lh]',
+      text: '',
+      checkbox: '',
+      checkboxIndicator: '',
+    },
+    variants: {
+      size: {
+        xs: {
+          title: [
+            'gap-2',
+            'min-h-6',
+            'text-xs',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*3.5)))]',
+          ],
+        },
+        sm: {
+          title: [
+            'gap-2.5',
+            'min-h-8',
+            'text-sm',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4)))]',
+          ],
+        },
+        base: {
+          title: [
+            'gap-3',
+            'min-h-10',
+            'text-base',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4.5)))]',
+          ],
+        },
+        lg: {
+          title: [
+            'gap-3.5',
+            'min-h-12',
+            'text-lg',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*5)))]',
+          ],
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      root: `${prefix}-item`,
+      title: `${prefix}-item-title`,
+      icon: `${prefix}-item-icon`,
+      text: `${prefix}-item-text`,
+      checkbox: `${prefix}-item-checkbox`,
+      checkboxIndicator: `${prefix}-item-checkbox-indicator`,
+    },
+  },
+)
+
+export type TreeItemVariants = VariantProps<typeof tvTreeItem>

package/src/default/index.ts

@@ -1,4 +1,4 @@
-export { cn } from '../shared/utils/cn'
-export { tv } from '../shared/utils/tv'
-export * as crafts from './crafts'
-export type * from './crafts'
+export { cn } from '../shared/utils/cn'
+export { tv } from '../shared/utils/tv'
+export * as crafts from './crafts'
+export type * from './crafts'

package/src/razer/components/arrow.css

@@ -1,20 +1,20 @@
-@layer components {
-  *:where([data-part='arrow']) {
-    --arrow-border: var(--color-h00);
-    --arrow-background: var(--color-hff);
-
-    &[data-theme-surface='dark'] {
-      --arrow-border: var(--color-h33);
-      --arrow-background: var(--color-h00);
-    }
-
-    &[data-theme-surface='razer'] {
-      --arrow-border: var(--color-h00);
-      --arrow-background: var(--color-rz-green);
-    }
-  }
-
-  *:where([data-part='arrow-tip']) {
-    @apply bg-(--arrow-background) data-theme-bordered:border-(--arrow-border);
-  }
+@layer components {
+  *:where([data-part='arrow']) {
+    --arrow-border: var(--color-h00);
+    --arrow-background: var(--color-hff);
+
+    &[data-theme-surface='dark'] {
+      --arrow-border: var(--color-h33);
+      --arrow-background: var(--color-h00);
+    }
+
+    &[data-theme-surface='razer'] {
+      --arrow-border: var(--color-h00);
+      --arrow-background: var(--color-rz-green);
+    }
+  }
+
+  *:where([data-part='arrow-tip']) {
+    @apply bg-(--arrow-background) data-theme-bordered:border-(--arrow-border);
+  }
 }

package/src/razer/components/badge.css

@@ -1,13 +1,13 @@
-@layer components {
-  .rui-badge {
-    &[data-variant="default"] {
-      @apply bg-rz-green text-h00 font-rob-bold
-    }
-    &[data-variant="secondary"] {
-      @apply bg-h00 text-rz-green
-    }
-    &[data-variant="dot"] {
-      @apply bg-rz-red
-    }
-  }
+@layer components {
+  .rui-badge {
+    &[data-variant="default"] {
+      @apply bg-rz-green text-h00 font-rob-bold
+    }
+    &[data-variant="secondary"] {
+      @apply bg-h00 text-rz-green
+    }
+    &[data-variant="dot"] {
+      @apply bg-rz-red
+    }
+  }
 }