@rimelight/ui 0.0.32 → 0.0.33

package/src/themes/chat-shimmer.theme.ts

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

package/src/themes/chat-tool.theme.ts

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

package/src/themes/chat.theme.ts

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

package/src/themes/checkbox.theme.ts

@@ -1,48 +1,50 @@
-import { defineTheme } from "../utils/defineTheme"
-
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
-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: 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()

package/src/themes/chip.theme.ts

@@ -1,16 +1,74 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {
-    theme: {
-      flat: { root: "rl-flat" },
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
-  },
-  defaultVariants: {}
-})
+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()

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

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

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

@@ -1,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+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,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+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,33 +1,48 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const confirmTheme = 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 confirmTheme
+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()

package/src/themes/container.theme.ts

@@ -1,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+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()

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

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

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

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

package/src/themes/dashboard-resize-handle.theme.ts

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

package/src/themes/dashboard-search-button.theme.ts

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

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

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

package/src/themes/dashboard-sidebar-collapse.theme.ts

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