@rimelight/ui 0.0.33 → 0.0.35

package/src/themes/checkbox.theme.ts

@@ -1,50 +1,49 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createCheckboxTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "input", "box", "indicator", "label"],
-    base: {
-      root: "inline-flex items-center gap-2 cursor-pointer select-none",
-      input: "absolute opacity-0 size-0 pointer-events-none peer",
-      box: [
-        "size-4 shrink-0 rounded border border-border bg-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-      ],
-      indicator:
-        "flex items-center justify-center text-white scale-0 transition-transform duration-150",
-      label: "text-sm text-foreground leading-none"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            box: `peer-checked:bg-[var(--rl-bg)] peer-checked:border-[var(--rl-border)] focus-within:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      size: {
-        sm: { box: "size-3.5", label: "text-xs" },
-        md: { box: "size-4", label: "text-sm" },
-        lg: { box: "size-4.5", label: "text-base" }
-      },
-      checked: {
-        true: { indicator: "scale-100" },
-        false: { indicator: "scale-0" }
-      },
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary",
-      size: "md",
-      checked: false
-    }
-  })
-
-export default createCheckboxTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createCheckboxTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "input", "box", "indicator", "label"],
+    base: {
+      root: "inline-flex items-center gap-2 cursor-pointer select-none",
+      input: "absolute opacity-0 size-0 pointer-events-none peer",
+      box: [
+        "size-4 shrink-0 rounded border border-border bg-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ],
+      indicator:
+        "flex items-center justify-center text-white scale-0 transition-transform duration-150",
+      label: "text-sm text-foreground leading-none"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            box: `peer-checked:bg-[var(--rl-bg)] peer-checked:border-[var(--rl-border)] focus-within:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      size: {
+        sm: { box: "size-3.5", label: "text-xs" },
+        md: { box: "size-4", label: "text-sm" },
+        lg: { box: "size-4.5", label: "text-base" }
+      },
+      checked: {
+        true: { indicator: "scale-100" },
+        false: { indicator: "scale-0" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      checked: false
+    }
+  })
+
+export default createCheckboxTheme()

package/src/themes/chip.theme.ts

@@ -1,74 +1,73 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChipTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "base"],
-    base: {
-      root: "relative inline-flex items-center justify-center shrink-0",
-      base: "rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { base: `bg-${color}` }])),
-        neutral: { base: "bg-inverted" }
-      },
-      size: {
-        "3xs": { base: "h-[4px] min-w-[4px] text-[4px]" },
-        "2xs": { base: "h-[5px] min-w-[5px] text-[5px]" },
-        "xs": { base: "h-[6px] min-w-[6px] text-[6px]" },
-        "sm": { base: "h-[7px] min-w-[7px] text-[7px]" },
-        "md": { base: "h-[8px] min-w-[8px] text-[8px]" },
-        "lg": { base: "h-[9px] min-w-[9px] text-[9px]" },
-        "xl": { base: "h-[10px] min-w-[10px] text-[10px]" },
-        "2xl": { base: "h-[11px] min-w-[11px] text-[11px]" },
-        "3xl": { base: "h-[12px] min-w-[12px] text-[12px]" }
-      },
-      position: {
-        "top-right": { base: "top-0 right-0" },
-        "bottom-right": { base: "bottom-0 right-0" },
-        "top-left": { base: "top-0 left-0" },
-        "bottom-left": { base: "bottom-0 left-0" }
-      },
-      inset: {
-        false: { base: "" }
-      },
-      standalone: {
-        false: { base: "absolute" }
-      },
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      {
-        position: "top-right",
-        inset: false,
-        classNames: { base: "-translate-y-1/2 translate-x-1/2 transform" }
-      },
-      {
-        position: "bottom-right",
-        inset: false,
-        classNames: { base: "translate-y-1/2 translate-x-1/2 transform" }
-      },
-      {
-        position: "top-left",
-        inset: false,
-        classNames: { base: "-translate-y-1/2 -translate-x-1/2 transform" }
-      },
-      {
-        position: "bottom-left",
-        inset: false,
-        classNames: { base: "translate-y-1/2 -translate-x-1/2 transform" }
-      }
-    ],
-    defaultVariants: {
-      size: "md",
-      color: "primary",
-      position: "top-right"
-    }
-  })
-
-export default createChipTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChipTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "base"],
+    base: {
+      root: "relative inline-flex items-center justify-center shrink-0",
+      base: "rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { base: `bg-${color}` }])),
+        neutral: { base: "bg-inverted" }
+      } as Record<string, { base: string }>,
+      size: {
+        "3xs": { base: "h-[4px] min-w-[4px] text-[4px]" },
+        "2xs": { base: "h-[5px] min-w-[5px] text-[5px]" },
+        "xs": { base: "h-[6px] min-w-[6px] text-[6px]" },
+        "sm": { base: "h-[7px] min-w-[7px] text-[7px]" },
+        "md": { base: "h-[8px] min-w-[8px] text-[8px]" },
+        "lg": { base: "h-[9px] min-w-[9px] text-[9px]" },
+        "xl": { base: "h-[10px] min-w-[10px] text-[10px]" },
+        "2xl": { base: "h-[11px] min-w-[11px] text-[11px]" },
+        "3xl": { base: "h-[12px] min-w-[12px] text-[12px]" }
+      },
+      position: {
+        "top-right": { base: "top-0 right-0" },
+        "bottom-right": { base: "bottom-0 right-0" },
+        "top-left": { base: "top-0 left-0" },
+        "bottom-left": { base: "bottom-0 left-0" }
+      },
+      inset: {
+        false: { base: "" }
+      },
+      standalone: {
+        false: { base: "absolute" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        position: "top-right",
+        inset: false,
+        classNames: { base: "-translate-y-1/2 translate-x-1/2 transform" }
+      },
+      {
+        position: "bottom-right",
+        inset: false,
+        classNames: { base: "translate-y-1/2 translate-x-1/2 transform" }
+      },
+      {
+        position: "top-left",
+        inset: false,
+        classNames: { base: "-translate-y-1/2 -translate-x-1/2 transform" }
+      },
+      {
+        position: "bottom-left",
+        inset: false,
+        classNames: { base: "translate-y-1/2 -translate-x-1/2 transform" }
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      position: "top-right"
+    }
+  })
+
+export default createChipTheme()

package/src/themes/color-area.theme.ts

@@ -0,0 +1,33 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorAreaTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "area", "thumb"],
+    base: {
+      root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
+      area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
+      thumb:
+        "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorAreaTheme()

package/src/themes/color-field.theme.ts

@@ -0,0 +1,32 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorFieldTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "input"],
+    base: {
+      root: "relative flex items-center border border-border rounded-lg bg-background shadow-sm px-3 py-1.5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input:
+        "w-full bg-transparent border-0 p-0 text-sm focus:outline-none focus:ring-0 text-foreground placeholder-muted-foreground"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            input: `focus:ring-0`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorFieldTheme()

package/src/themes/color-picker.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createColorPickerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createColorPickerTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorPickerTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createColorPickerTheme()

package/src/themes/color-slider.theme.ts

@@ -0,0 +1,34 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorSliderTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "track", "thumb"],
+    base: {
+      root: "relative flex w-full touch-none select-none items-center outline-none",
+      track:
+        "relative h-3 w-full grow rounded-full border border-border bg-muted cursor-pointer outline-none",
+      thumb:
+        "absolute block size-5 rounded-full border-2 border-white shadow-md cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorSliderTheme()

package/src/themes/command-palette.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createCommandPaletteTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createCommandPaletteTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createCommandPaletteTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createCommandPaletteTheme()

package/src/themes/compare.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createCompareTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createCompareTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createCompareTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createCompareTheme()

package/src/themes/confirm.theme.ts

@@ -1,48 +1,48 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createConfirmTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "backdrop",
-      "content",
-      "header",
-      "title",
-      "description",
-      "footer",
-      "cancelButton",
-      "actionButton"
-    ],
-    base: {
-      root: "relative inline-block",
-      trigger: "",
-      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
-      content: [
-        "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
-        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
-      ],
-      header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
-      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
-      description: "text-sm text-muted-foreground leading-relaxed",
-      footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
-      cancelButton: "w-full sm:w-auto",
-      actionButton: "w-full sm:w-auto"
-    },
-    variants: {
-      variant: {
-        default: { actionButton: "" },
-        destructive: {
-          actionButton: "bg-error-500 hover:bg-error-600 focus-visible:ring-error-500/50"
-        }
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  })
-
-export default createConfirmTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createConfirmTheme = (_colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "backdrop",
+      "content",
+      "header",
+      "title",
+      "description",
+      "footer",
+      "cancelButton",
+      "actionButton"
+    ],
+    base: {
+      root: "relative inline-block",
+      trigger: "",
+      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+      content: [
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
+        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
+      ],
+      header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
+      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+      description: "text-sm text-muted-foreground leading-relaxed",
+      footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
+      cancelButton: "w-full sm:w-auto",
+      actionButton: "w-full sm:w-auto"
+    },
+    variants: {
+      variant: {
+        default: { actionButton: "" },
+        destructive: {
+          actionButton: "bg-error-500 hover:bg-error-600 focus-visible:ring-error-500/50"
+        }
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  })
+
+export default createConfirmTheme()

package/src/themes/container.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createContainerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "w-full max-w-(--rl-container) mx-auto px-4 sm:px-6 lg:px-8"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createContainerTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createContainerTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "w-full max-w-[var(--rl-container)] mx-auto px-xs sm:px-md md:px-xl lg:px-xl"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createContainerTheme()

package/src/themes/context-menu.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createContextMenuTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createContextMenuTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createContextMenuTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createContextMenuTheme()

package/src/themes/dashboard-group.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createDashboardGroupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardGroupTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createDashboardGroupTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createDashboardGroupTheme()

package/src/themes/dashboard-navbar.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createDashboardNavbarTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardNavbarTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createDashboardNavbarTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createDashboardNavbarTheme()