@raxium/themes 0.1.1

package/src/default/crafts/collapsible.ts

@@ -0,0 +1,61 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-collapsible'
+
+export const tvCollapsible = tv({
+  slots: {
+    root: [],
+    trigger: ['w-fit flex items-center'],
+    indicator: [
+      'data-[state=closed]:rotate-0',
+      'data-[state=open]:rotate-180',
+      'transition-transform',
+    ],
+    content: [
+      'overflow-hidden',
+      'data-[state=open]:animate-collapsible-down',
+      'data-[state=closed]:animate-collapsible-up',
+    ],
+  },
+  variants: {
+    size: {
+      xs: {
+        trigger: ['text-xs gap-3'],
+      },
+      sm: {
+        trigger: ['text-sm gap-4'],
+      },
+      base: {
+        trigger: ['text-base gap-4.5'],
+      },
+      lg: {
+        trigger: ['text-lg gap-5'],
+      },
+    },
+  },
+}, {
+  slots: {
+    root: prefix,
+    trigger: `${prefix}-trigger`,
+    indicator: `${prefix}-trigger-indicator`,
+    content: `${prefix}-content`,
+  },
+})
+export type CollapsibleVariants = VariantProps<typeof tvCollapsible>
+
+const readMorePrefix = 'rui-readmore'
+export const tvReadMore = tv({
+  slots: {
+    root: [],
+    content: [],
+    trigger: [],
+  },
+}, {
+  slots: {
+    root: readMorePrefix,
+    content: `${readMorePrefix}-content`,
+    trigger: `${readMorePrefix}-trigger`,
+  },
+})
+export type ReadMoreVariants = VariantProps<typeof tvReadMore>

package/src/default/crafts/date-picker.ts

@@ -0,0 +1,261 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-date-picker'
+
+export const tvDatePicker = tv(
+  {
+    slots: {
+      root: '',
+      control: ['flex', 'items-center', 'gap-2', 'w-fit'],
+      content: [
+        'group/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: '',
+    },
+
+    variants: {
+      size: {
+        xs: {
+          contentInner: 'px-1.5 py-1',
+        },
+        sm: {
+          contentInner: 'px-2 py-1.5',
+        },
+        base: {
+          contentInner: 'px-2.5 py-1.5',
+        },
+        lg: {
+          contentInner: 'px-3 py-2',
+        },
+      },
+      bordered: {
+        true: {
+          content: 'border',
+        },
+        false: '',
+      },
+    },
+  },
+  {
+    slots: {
+      root: `${prefix}`,
+      control: `${prefix}-control`,
+      content: `${prefix}-content`,
+      contentInner: `${prefix}-content-inner`,
+    },
+  },
+)
+
+export type DatePickerVariants = VariantProps<typeof tvDatePicker>
+
+export const tvDatePickerView = tv(
+  {
+    slots: {
+      view: 'flex flex-col gap-2',
+      viewControl: ['flex', 'items-center', 'justify-between', 'w-full'],
+      viewControlTrigger: '',
+      viewTrigger: 'rounded',
+      table: 'grid gap-2',
+      tableHead: 'grid',
+      tableHeader: 'block text-center truncate uppercase',
+      tableBody: 'grid',
+      tableCell: '',
+      tableCellTrigger: [
+        'relative',
+        'flex',
+        'items-center',
+        'justify-center',
+        'size-full',
+        'cursor-default',
+      ],
+    },
+    variants: {
+      size: {
+        xs: {
+          view: 'text-xs',
+          viewControl: '',
+          viewControlTrigger: 'box-content p-1.5',
+          viewTrigger: 'text-xs h-6 px-1.5',
+          tableHeader: 'w-6 text-xxs',
+        },
+        sm: {
+          view: 'text-sm',
+          viewControl: '',
+          viewControlTrigger: 'box-content p-2',
+          viewTrigger: 'text-sm h-8 px-2',
+          tableHeader: 'w-8 text-xs',
+        },
+        base: {
+          view: 'text-base',
+          viewControl: '',
+          viewControlTrigger: 'box-content p-2.5',
+          viewTrigger: 'text-base h-9.5 px-2.5',
+          tableHeader: 'w-10 text-sm',
+        },
+        lg: {
+          view: 'text-lg',
+          viewControl: '',
+          viewControlTrigger: 'box-content p-3',
+          viewTrigger: 'text-lg h-10 px-3',
+          tableHeader: 'w-12 text-base',
+        },
+      },
+
+      view: {
+        day: {
+          tableHead: 'grid-cols-7',
+          tableBody: 'grid-cols-7',
+          tableCell: 'aspect-square',
+        },
+        month: {
+          tableBody: 'grid-cols-4',
+          tableCell: 'aspect-[16/9]',
+        },
+        year: {
+          tableBody: 'grid-cols-4',
+          tableCell: 'aspect-[16/9]',
+        },
+      },
+
+      selected: {
+        true: {
+          tableCellTrigger: 'rounded',
+        },
+      },
+
+      inRange: {
+        true: {
+          tableCellTrigger: 'rounded-none',
+        },
+      },
+      firstInRange: {
+        true: {
+          tableCellTrigger: 'rounded-tl rounded-bl',
+        },
+      },
+      firstInHoveredRange: {
+        true: {
+          tableCellTrigger: 'rounded-tl rounded-bl',
+        },
+      },
+      lastInRange: {
+        true: {
+          tableCellTrigger: 'rounded-br rounded-tr',
+        },
+      },
+      lastInHoveredRange: {
+        true: {
+          tableCellTrigger: 'rounded-br rounded-tr',
+        },
+      },
+      today: {
+        true: {
+          tableCellTrigger: [
+            'after:content-[""]',
+            'after:absolute',
+            'after:top-0',
+            'after:right-0',
+            'after:rounded-full',
+          ],
+        },
+      },
+    },
+
+    compoundVariants: [
+      {
+        size: 'xs',
+        view: ['month', 'year'],
+        class: {
+          tableCell: 'w-12',
+        },
+      },
+      {
+        size: 'sm',
+        view: ['month', 'year'],
+        class: {
+          tableCell: 'w-14',
+        },
+      },
+      {
+        size: 'base',
+        view: ['month', 'year'],
+        class: {
+          tableCell: 'w-16',
+        },
+      },
+      {
+        size: 'lg',
+        view: ['month', 'year'],
+        class: {
+          tableCell: 'w-18',
+        },
+      },
+      {
+        today: true,
+        size: 'xs',
+        class: {
+          tableCellTrigger: 'after:w-1.25 after:h-1.25',
+        },
+      },
+      {
+        today: true,
+        size: 'sm',
+        class: {
+          tableCellTrigger: 'after:w-1.5 after:h-1.5',
+        },
+      },
+      {
+        today: true,
+        size: 'base',
+        class: {
+          tableCellTrigger: 'after:w-1.75 after:h-1.75',
+        },
+      },
+      {
+        today: true,
+        size: 'lg',
+        class: {
+          tableCellTrigger: 'after:w-2 after:h-2',
+        },
+      },
+    ],
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      view: `${prefix}-view`,
+      viewControl: `${prefix}-view-control`,
+      viewTrigger: `${prefix}-view-trigger`,
+      viewControlTrigger: `${prefix}-view-control-trigger`,
+      table: `${prefix}-table`,
+      tableHead: `${prefix}-table-head`,
+      tableHeader: `${prefix}-table-header`,
+      tableBody: `${prefix}-table-body`,
+      tableCell: `${prefix}-table-cell`,
+      tableCellTrigger: `${prefix}-table-cell-trigger`,
+    },
+  },
+)
+
+export type DatePickerViewVariants = VariantProps<typeof tvDatePickerView>

package/src/default/crafts/dialog.ts

@@ -0,0 +1,103 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-dialog'
+
+export const tvDialog = tv(
+  {
+    slots: {
+      backdrop: [
+        'fixed',
+        'inset-0',
+        'z-(--z-overlay)',
+        'data-[state=open]:motion-opacity-in',
+        'data-[state=open]:animate-backdrop-blur-in',
+        'data-[state=closed]:motion-opacity-out',
+        'data-[state=closed]:animate-backdrop-blur-out',
+      ],
+      positioner: ['fixed', 'inset-0', 'z-(--z-modal)', 'flex', 'items-center', 'justify-center'],
+      content: [
+        'relative',
+        'max-w-full',
+        'md:max-w-[80vw]',
+        'border',
+        'rounded',
+        'data-[state=open]:motion-opacity-in',
+        'data-[state=open]:motion-translate-y-in',
+        'data-[state=closed]:motion-opacity-out',
+        'data-[state=closed]:motion-translate-y-out',
+      ],
+      close: '',
+      header: ['flex', 'items-center', 'justify-between'],
+      title: [],
+      body: ['flex-1', 'overflow-y-auto'],
+      footer: ['flex', 'items-center', 'justify-end'],
+    },
+    variants: {
+      size: {
+        xs: {
+          body: 'p-4 text-xs',
+          footer: 'px-4 py-3 gap-4 text-xs',
+          header: 'py-2 px-4 text-xs',
+          close: [
+            'p-0.25',
+            'text-xs',
+            'data-[variant=content-close]:pt-1.5',
+            'data-[variant=content-close]:pr-1.5',
+          ],
+        },
+        sm: {
+          body: 'p-5 text-sm',
+          footer: 'px-5 py-4 gap-5 text-sm',
+          header: 'py-2.5 px-5 text-sm',
+          close: [
+            'p-0.5',
+            'text-sm',
+            'data-[variant=content-close]:p-0',
+            'data-[variant=content-close]:pt-2',
+            'data-[variant=content-close]:pr-2',
+          ],
+        },
+        base: {
+          body: 'p-6 text-base',
+          footer: 'px-6 py-5 gap-6 text-base',
+          header: 'py-3 px-6 text-base',
+          close: [
+            'p-0.75',
+            'text-base',
+            'data-[variant=content-close]:pt-2.5',
+            'data-[variant=content-close]:pr-2.5',
+          ],
+        },
+        lg: {
+          body: 'p-8 text-lg',
+          footer: 'px-8 py-6 gap-8 text-lg',
+          header: 'py-4 px-8 text-lg',
+          close: [
+            'p-1',
+            'text-lg',
+            'data-[variant=content-close]:pt-3',
+            'data-[variant=content-close]:pr-3',
+          ],
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      backdrop: `${prefix}-backdrop`,
+      positioner: `${prefix}-positioner`,
+      content: `${prefix}-content`,
+      header: `${prefix}-header`,
+      close: `${prefix}-close`,
+      title: `${prefix}-title`,
+      body: `${prefix}-body`,
+      footer: `${prefix}-footer`,
+    },
+  },
+)
+
+export type DialogVariants = VariantProps<typeof tvDialog>

package/src/default/crafts/editable.ts

@@ -0,0 +1,108 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+import { tvInput } from './input'
+
+const prefix = 'rui-editable'
+
+export const tvEditable = tv(
+  {
+    slots: {
+      root: 'flex items-center',
+      area: '',
+      preview: '',
+    },
+    variants: {
+      size: {
+        xs: '',
+        sm: '',
+        base: '',
+        lg: '',
+      },
+    },
+    compoundVariants: [
+      {
+        size: 'xs',
+        class: {
+          root: 'text-xs',
+        },
+      },
+      {
+        size: 'sm',
+        class: {
+          root: 'text-sm',
+        },
+      },
+      {
+        size: 'base',
+        class: {
+          root: 'text-base',
+        },
+      },
+      {
+        size: 'lg',
+        class: {
+          root: 'text-lg',
+        },
+      },
+    ],
+    defaultVariants: { size: 'base' },
+  },
+  {
+    slots: {
+      root: prefix,
+      area: `${prefix}-area`,
+      preview: `${prefix}-preview`,
+    },
+  },
+)
+
+export const tvEditableInput = tv(
+  {
+    extend: tvInput,
+    slots: {
+      root: '',
+      input: 'min-w-20 w-fit',
+      clearable: '',
+    },
+    compoundVariants: [
+      {
+        size: 'xs',
+        class: {
+          root: 'px-1 py-0.25',
+          clearable: 'text-xs size-[1lh]',
+        },
+      },
+      {
+        size: 'sm',
+        class: {
+          root: 'px-1 py-0.5',
+          clearable: 'text-sm size-[1lh]',
+        },
+      },
+      {
+        size: 'base',
+        class: {
+          root: 'px-2 py-0.75',
+          clearable: 'text-base size-[1lh]',
+        },
+      },
+      {
+        size: 'lg',
+        class: {
+          root: 'px-2 py-1',
+          clearable: 'text-lg size-[1lh]',
+        },
+      },
+    ],
+  },
+  {
+    slots: {
+      root: `${prefix}-input`,
+      input: `${prefix}-input-input`,
+      clearable: `${prefix}-input-clearable`,
+    },
+  },
+)
+
+export type EditableVariants = VariantProps<typeof tvEditable>
+export type EditableInputVariants = VariantProps<typeof tvEditableInput>

package/src/default/crafts/floating-panel.ts

@@ -0,0 +1,71 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-floating-panel'
+
+export const tvFloatingPanel = tv(
+  {
+    slots: {
+      positioner: '',
+      content: '',
+      header: 'w-full flex items-center justify-between',
+      control: 'flex items-center gap-2',
+      title: '',
+      trigger: 'flex items-center justify-center',
+      resizeVertical: 'h-full w-2',
+      resizeHorizontal: 'w-full h-2',
+      resizeCorner: 'size-2',
+    },
+    variants: {
+      size: {
+        xs: {
+          header: 'py-2 pl-4 pr-3 text-xs',
+          control: '',
+          trigger: 'size-5',
+          resizeVertical: 'w-0.5',
+          resizeHorizontal: 'h-0.5',
+          resizeCorner: 'size-1',
+        },
+        sm: {
+          header: 'py-2.5 pl-5 pr-4 text-sm',
+          control: '',
+          trigger: 'size-6',
+          resizeVertical: 'w-0.75',
+          resizeHorizontal: 'h-0.75',
+          resizeCorner: 'size-1.5',
+        },
+        base: {
+          header: 'py-3 pl-6 pr-5 text-base',
+          control: '',
+          trigger: 'size-7',
+          resizeVertical: 'w-1',
+          resizeHorizontal: 'h-1',
+          resizeCorner: 'size-2',
+        },
+        lg: {
+          header: 'py-4 pl-8 pr-7 text-lg',
+          control: '',
+          trigger: 'size-8',
+          resizeVertical: 'w-1.25',
+          resizeHorizontal: 'h-1.25',
+          resizeCorner: 'size-2.5',
+        },
+      },
+    },
+  },
+  {
+    slots: {
+      positioner: `${prefix}-positioner`,
+      content: `${prefix}-content`,
+      header: `${prefix}-header`,
+      control: `${prefix}-control`,
+      title: `${prefix}-title`,
+      trigger: `${prefix}-trigger`,
+      resizeVertical: `${prefix}-resize-vertical`,
+      resizeHorizontal: `${prefix}-resize-horizontal`,
+      resizeCorner: `${prefix}-resize-corner`,
+    },
+  },
+)
+
+export type FloatingPanelVariants = VariantProps<typeof tvFloatingPanel>

package/src/default/crafts/hotkey.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+import { tvInput } from './input'
+
+const inputPrefix = 'rui-input'
+const prefix = 'rui-hotkey'
+
+export const tvHotkey = tv(
+  {
+    extend: tvInput,
+    slots: {
+      root: ['relative'],
+      input: [],
+    },
+  },
+  {
+    slots: {
+      root: [inputPrefix, prefix],
+      input: [`${inputPrefix}-input`, `${prefix}-input`],
+    },
+  },
+)
+
+export type HotkeyVariants = VariantProps<typeof tvHotkey>

package/src/default/crafts/hover-card.ts

@@ -0,0 +1,83 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-hover-card'
+
+export const tvHoverCard = 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: '',
+        sm: '',
+        base: '',
+        lg: '',
+      },
+      bordered: {
+        true: '',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      bordered: true,
+    },
+    compoundVariants: [
+      {
+        size: 'xs',
+        class: {
+          contentInner: 'px-1.5 py-0.5 text-xs',
+        },
+      },
+      {
+        size: 'sm',
+        class: {
+          contentInner: 'px-2 py-1 text-sm',
+        },
+      },
+      {
+        size: 'base',
+        class: {
+          contentInner: 'px-2.5 py-1.5 text-base',
+        },
+      },
+      {
+        size: 'lg',
+        class: {
+          contentInner: 'px-3 py-2 text-lg',
+        },
+      },
+      {
+        bordered: true,
+        class: {
+          content: 'border',
+        },
+      },
+    ],
+  },
+  {
+    slots: {
+      content: `${prefix}-content`,
+      contentInner: `${prefix}-content-inner`,
+    },
+  },
+)
+
+export type HoverCardVariants = VariantProps<typeof tvHoverCard>