@rark-ui/themes 1.1.0 → 1.2.1

package/src/default/crafts/select.ts

@@ -0,0 +1,122 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-select'
+
+export const tvSelect = tv(
+  {
+    slots: {
+      root: '',
+      trigger: [
+        'group',
+        'flex',
+        'items-center',
+        'min-w-[10.875rem]',
+        'rounded',
+        'gap-1.5',
+        'px-2',
+        'py-1.5',
+        'text-start',
+        'transition-colors',
+        'data-[disabled]:pointer-events-none',
+        'data-[disabled]:opacity-(--disabled-opacity)',
+      ],
+      indicator: ['data-[state=open]:rotate-180', 'transition-transform'],
+      value: 'flex-1 flex items-center [&>span]:truncate',
+      content: [
+        'relative',
+        'z-auto',
+        'min-w-(--reference-width)',
+        'rounded',
+        'p-0',
+        'z-(--z-popover)',
+        '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: '',
+      item: [
+        'w-full',
+        'relative',
+        'flex',
+        'items-center',
+        'justify-between',
+        'gap-2',
+        'rounded',
+        'cursor-default',
+        'select-none',
+        'data-[disabled]:pointer-events-none',
+        'data-[disabled]:opacity-(--disabled-opacity)',
+      ],
+      itemIndicator: '[&_path]:animate-check-dash',
+      itemGroup: '',
+      itemGroupLabel: 'relative border-b',
+      clearTrigger: ['flex', 'items-center', 'justify-center'],
+    },
+    variants: {
+      size: {
+        xs: {
+          trigger: 'text-xs',
+          item: 'text-xs px-1.5 py-1',
+          contentInner: 'px-1.5 py-1',
+          itemGroupLabel: 'text-sm px-1.5 py-1.5 mb-1.5',
+        },
+        sm: {
+          trigger: 'text-sm',
+          item: 'text-sm px-2 py-1.5',
+          contentInner: 'px-2 py-1.5',
+          itemGroupLabel: 'text-base px-2 py-2 mb-2',
+        },
+        base: {
+          trigger: 'text-base',
+          item: 'text-base px-2.5 py-1.5',
+          contentInner: 'px-2.5 py-1.5',
+          itemGroupLabel: 'text-xl px-2.5 py-2.5 mb-2.5',
+        },
+        lg: {
+          trigger: 'text-lg',
+          item: 'text-lg px-3 py-2',
+          contentInner: 'px-3 py-2',
+          itemGroupLabel: 'text-xl px-3 py-3 mb-3',
+        },
+      },
+      bordered: {
+        true: {
+          trigger: 'border',
+          content: 'border',
+        },
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      bordered: true,
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      trigger: `${prefix}-trigger`,
+      indicator: `${prefix}-indicator`,
+      content: `${prefix}-content`,
+      contentInner: `${prefix}-content-inner`,
+      value: `${prefix}-value`,
+      item: `${prefix}-item`,
+      itemIndicator: `${prefix}-item-indicator`,
+      itemGroup: `${prefix}-item-group`,
+      itemGroupLabel: `${prefix}-item-group-label`,
+      clearTrigger: `${prefix}-clear-trigger`,
+    },
+  },
+)
+
+export type SelectVariants = VariantProps<typeof tvSelect>

package/src/default/crafts/skeleton.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-skeleton'
+
+export const tvSkeleton = tv(
+  {
+    base: '',
+    variants: {
+      variant: {
+        pulse: 'animate-pulse',
+        wave: 'animate-skeleton-wave animate-infinite',
+      },
+      shape: {
+        rect: 'rounded',
+        circle: 'rounded-full',
+      },
+    },
+  },
+  { class: prefix },
+)
+
+export type SkeletonVariants = VariantProps<typeof tvSkeleton>

package/src/default/crafts/slider.ts

@@ -0,0 +1,93 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-slider'
+
+export const tvSlider = tv(
+  {
+    slots: {
+      root: '',
+      control: '',
+      track: '',
+      range: '',
+      thumb: 'z-10 rounded-full data-dragging:scale-120 transition-transform',
+      marker: '',
+      markerDot: 'absolute left-1/2 -translate-x-1/2 rounded-full',
+    },
+    variants: {
+      size: {
+        xs: {
+          control: 'h-[max(var(--slider-thumb-height),.5rem)]',
+          track: 'h-0.5 rounded',
+          range: 'rounded',
+          thumb: [
+            'w-[max(var(--slider-thumb-width),.5rem)]',
+            'h-[max(var(--slider-thumb-height),.5rem)]',
+          ],
+          markerDot: 'size-1.5 -top-[calc(max(var(--slider-thumb-height),.5rem)/2+var(--spacing)*0.75)]',
+        },
+        sm: {
+          control: 'h-[max(var(--slider-thumb-height),.75rem)]',
+          track: 'h-1 rounded-md',
+          range: 'rounded-md',
+          thumb: [
+            'w-[max(var(--slider-thumb-width),.75rem)]',
+            'h-[max(var(--slider-thumb-height),.75rem)]',
+          ],
+          markerDot: 'size-2 -top-[calc(max(var(--slider-thumb-height),.75rem)/2+var(--spacing))]',
+        },
+        base: {
+          control: 'h-[max(var(--slider-thumb-height),1rem)]',
+          track: 'h-1.5 rounded-lg',
+          range: 'rounded-lg',
+          thumb: [
+            'w-[max(var(--slider-thumb-width),1rem)]',
+            'h-[max(var(--slider-thumb-height),1rem)]',
+          ],
+          markerDot: 'size-2.5 -top-[calc(max(var(--slider-thumb-height),1rem)/2+var(--spacing)*1.25)]',
+        },
+        lg: {
+          control: 'h-[max(var(--slider-thumb-height),1.25rem)]',
+          track: 'h-2 rounded-xl',
+          range: 'rounded-xl',
+          thumb: [
+            'w-[max(var(--slider-thumb-width),1.25rem)]',
+            'h-[max(var(--slider-thumb-height),1.25rem)]',
+          ],
+          markerDot: 'size-3 -top-[calc(max(var(--slider-thumb-height),1.25rem)/2+var(--spacing)*1.5)]',
+        },
+      },
+      orientation: {
+        horizontal: {
+          root: 'flex flex-col',
+          control: 'w-full flex items-center',
+          track: 'w-full',
+          range: 'h-full',
+        },
+        vertical: {
+          root: 'flex items-center justify-center',
+          control: 'h-full flex items-center',
+          track: 'h-full',
+          range: 'w-full',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      orientation: 'horizontal',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      control: `${prefix}-control`,
+      track: `${prefix}-track`,
+      range: `${prefix}-range`,
+      thumb: `${prefix}-thumb`,
+      marker: `${prefix}-marker`,
+      markerDot: `${prefix}-marker-dot`,
+    },
+  },
+)
+
+export type SliderVariants = VariantProps<typeof tvSlider>

package/src/default/crafts/spin.ts

@@ -0,0 +1,64 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-spin'
+
+export const tvSpin = tv(
+  {
+    slots: {
+      root: '',
+      mask: ['absolute', 'top-0', 'left-0', 'size-full'],
+      indicator: [
+        'absolute',
+        'top-1/2',
+        'left-1/2',
+        'transform',
+        'translate-x-[-50%]',
+        'translate-y-[-50%]',
+        'flex',
+        'items-center',
+        'justify-center',
+        'gap-2',
+      ],
+      icon: ['inline-block', 'size-6'],
+      text: ['text-xs'],
+    },
+    variants: {
+      mode: {
+        fullscreen: {
+          root: ['fixed', 'top-0', 'left-0', 'w-screen', 'h-screen', 'z-(--z-loading)'],
+        },
+        inline: ['absolute', 'inset-0'],
+      },
+      size: {
+        xs: {
+          icon: ['size-6'],
+          text: ['text-xs'],
+        },
+        sm: {
+          icon: ['size-8'],
+          text: ['text-sm'],
+        },
+        base: {
+          icon: ['size-10'],
+          text: ['text-base'],
+        },
+        lg: {
+          icon: ['size-12'],
+          text: ['text-lg'],
+        },
+      },
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      mask: `${prefix}-mask`,
+      indicator: `${prefix}-indicator`,
+      icon: `${prefix}-icon`,
+      text: `${prefix}-text`,
+    },
+  },
+)
+
+export interface SpinVariants extends VariantProps<typeof tvSpin> {}

package/src/default/crafts/switch.ts

@@ -0,0 +1,71 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-switch'
+
+export const tvSwitch = tv({
+  slots: {
+    root: [
+      'inline-flex',
+      'items-center',
+      'gap-2',
+      'w-fit',
+      'group/switch',
+    ],
+    control: [
+      'block',
+      'shrink-0',
+      'rounded-full',
+      'border-2',
+      'transition-colors',
+      'disabled:opacity-(--disabled-opacity)',
+    ],
+    thumb: [
+      'pointer-events-none',
+      'block',
+      'size-3.5',
+      'rounded-full',
+      'origin-center',
+      'transition-transform',
+      'data-[state=checked]:translate-x-full',
+      'data-[state=unchecked]:translate-x-0',
+    ],
+    label: '',
+  },
+  variants: {
+    size: {
+      xs: {
+        control: 'w-7 h-4',
+        thumb: 'size-3',
+        label: 'text-xs',
+      },
+      sm: {
+        control: 'w-8 h-4.5',
+        thumb: 'size-3.5',
+        label: 'text-sm',
+      },
+      base: {
+        control: 'w-9 h-5',
+        thumb: 'size-4',
+        label: 'text-base',
+      },
+      lg: {
+        control: 'w-10 h-5.5',
+        thumb: 'size-4.5',
+        label: 'text-lg',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
+}, {
+  slots: {
+    root: prefix,
+    control: `${prefix}-control`,
+    thumb: `${prefix}-thumb`,
+    label: `${prefix}-label`,
+  },
+})
+
+export type SwitchVariants = VariantProps<typeof tvSwitch>

package/src/default/crafts/tabs.ts

@@ -0,0 +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>

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

@@ -0,0 +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>

package/src/default/crafts/toast.ts

@@ -0,0 +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: '',
+    },
+    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

@@ -0,0 +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>