@rimelight/ui 0.0.41 → 0.0.43

package/src/components/color-field/RLAColorField.astro

@@ -1,12 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveTheme } from "../../utils/resolveTheme"
-import colorFieldThemeDefault, { createColorFieldTheme } from "./color-field.theme"
-const colorFieldTheme = resolveTheme(colorFieldThemeDefault, createColorFieldTheme)
+import { colorFieldTheme } from "./color-field.theme"
 
-const colorField = scv(colorFieldTheme)
 
 export interface Props {
   channel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
@@ -42,15 +36,10 @@ const {
   step = 1,
   color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as Props
 
-const classes = resolveClasses(colorField, {
-  color,
-  theme
-}, useUi("colorField", uiProp), className)
+const classes = colorFieldTheme(Astro.props)
 
 const initialValue = modelValue || defaultValue
 ---
@@ -65,7 +54,7 @@ const initialValue = modelValue || defaultValue
   {...rest}
 >
   <div class={classes.root} data-slot="root">
-    <div class="w-5 h-5 rounded border border-border mr-2 shrink-0 shadow-sm" data-slot="swatch"></div>
+    <div class="w-5 h-5 rounded border border-default mr-2 shrink-0 shadow-sm" data-slot="swatch"></div>
     <input
       type="text"
       class={classes.input}

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

@@ -1,32 +1,20 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createColorFieldTheme = (colors: readonly string[] = colorConfig.colors) =>
-  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 const colorFieldTheme = defineTheme("color-field", {
+  slots: ["root", "input"],
+  base: {
+    root: "relative flex items-center border border-default rounded-lg bg-default shadow-sm px-3 py-1.5 focus-within:ring-2 focus-within:ring-[var(--rl-ring)]/50 focus-within:ring-offset-2",
+    input:
+      "w-full bg-transparent border-0 p-0 text-sm focus:outline-none focus:ring-0 text-highlighted placeholder-muted-foreground"
+  },
+  variants: {
+    color: "auto",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createColorFieldTheme()
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/color-field/color-field.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ColorFieldProps {
   channel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"

package/src/components/color-picker/RLAColorPicker.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ColorPickerProps } from "./color-picker"
-import colorPickerTheme from "./color-picker.theme"
-
-
-const colorPicker = scv(colorPickerTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ColorPickerProps
-
-const classes = resolveClasses(colorPicker, {}, useUi("colorPicker", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { colorPickerTheme } from "./color-picker.theme"
+
+
+
+const classes = colorPickerTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

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

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

package/src/components/color-slider/RLAColorSlider.astro

@@ -1,12 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveTheme } from "../../utils/resolveTheme"
-import colorSliderThemeDefault, { createColorSliderTheme } from "./color-slider.theme"
-const colorSliderTheme = resolveTheme(colorSliderThemeDefault, createColorSliderTheme)
+import { colorSliderTheme } from "./color-slider.theme"
 
-const colorSlider = scv(colorSliderTheme)
 
 export interface Props {
   channel: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
@@ -40,15 +34,10 @@ const {
   step = 1,
   color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as Props
 
-const classes = resolveClasses(colorSlider, {
-  color,
-  theme
-}, useUi("colorSlider", uiProp), className)
+const classes = colorSliderTheme(Astro.props)
 
 const initialValue = modelValue || defaultValue
 ---

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

@@ -1,34 +1,22 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createColorSliderTheme = (colors: readonly string[] = colorConfig.colors) =>
-  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 const colorSliderTheme = defineTheme("color-slider", {
+  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-default 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-[var(--rl-ring)]/50"
+  },
+  variants: {
+    color: "auto",
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createColorSliderTheme()
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/color-slider/color-slider.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ColorSliderProps {
   channel: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"

package/src/components/command-palette/RLACommandPalette.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { CommandPaletteProps } from "./command-palette"
-import commandPaletteTheme from "./command-palette.theme"
-
-
-const commandPalette = scv(commandPaletteTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CommandPaletteProps
-
-const classes = resolveClasses(commandPalette, {}, useUi("commandPalette", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { commandPaletteTheme } from "./command-palette.theme"
+
+
+
+const classes = commandPaletteTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

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

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

package/src/components/compare/RLACompare.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { CompareProps } from "./compare"
-import compareTheme from "./compare.theme"
-
-
-const compare = scv(compareTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CompareProps
-
-const classes = resolveClasses(compare, {}, useUi("compare", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { compareTheme } from "./compare.theme"
+
+
+
+const classes = compareTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/compare/compare.theme.ts

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

package/src/components/confirm/RLAConfirm.astro

@@ -1,122 +1,114 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ConfirmProps } from "./confirm"
-import { resolveTheme } from "../../utils/resolveTheme"
-import confirmThemeDefault, { createConfirmTheme } from "./confirm.theme"
-const confirmTheme = resolveTheme(confirmThemeDefault, createConfirmTheme)
-import RLAButton from "../button/RLAButton.astro"
-
-const alertDialog = scv(confirmTheme)
-
-const {
-  variant = "default",
-  title,
-  description,
-  actionLabel = "Confirm",
-  cancelLabel = "Cancel",
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ConfirmProps & { variant?: "default" | "destructive" }
-
-const classes = resolveClasses(alertDialog, {
-  variant
-}, useUi("alertDialog", uiProp), className)
-
-const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
-const isDestructive = variant === "destructive"
----
-
-<div class={classes.root} data-slot="alert-dialog-container">
-  {triggerLabel ? (
-    <RLAButton
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      data-dialog-show={dialogId}
-    >
-      {triggerLabel}
-    </RLAButton>
-  ) : (
-    <span data-dialog-show={dialogId}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-lock-scroll="true"
-    {...rest}
-  >
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer">
-        <RLAButton
-          class={classes.cancelButton}
-          data-slot="cancel"
-          variant="outline"
-          color={isDestructive ? "error" : "neutral"}
-          type="button"
-          data-dialog-close={dialogId}
-        >
-          {cancelLabel}
-        </RLAButton>
-        <RLAButton
-          class={classes.actionButton}
-          data-slot="action"
-          color={isDestructive ? "error" : "primary"}
-          variant={isDestructive ? "subtle" : "solid"}
-          type="button"
-          data-dialog-close={dialogId}
-        >
-          {actionLabel}
-        </RLAButton>
-      </slot>
-    </div>
-  </dialog>
-</div>
-
-<script>
-(function() {
-  const win = window as unknown as Window & { rlConfirm?: () => Promise<boolean> };
-  if (win.rlConfirm) return;
-  var pendingResolve: ((value: boolean) => void) | null = null;
-
-  document.addEventListener("click", function(e) {
-    const target = e.target as HTMLElement | null;
-    var btn = target?.closest("[data-slot='cancel'], [data-slot='action']");
-    if (!btn || !pendingResolve) return;
-    pendingResolve(btn.getAttribute("data-slot") === "action");
-    pendingResolve = null;
-  }, true);
-
-  win.rlConfirm = function() {
-    return new Promise<boolean>(function(resolve) {
-      var dialog = document.querySelector("[data-slot='alert-dialog-container'] dialog") as HTMLDialogElement | null;
-      if (!dialog) { resolve(false); return; }
-      pendingResolve = resolve;
-      dialog.addEventListener("close", function() {
-        if (pendingResolve) {
-          pendingResolve(false);
-          pendingResolve = null;
-        }
-      }, { once: true });
-      dialog.showModal();
-    });
-  };
-})();
-</script>
+---
+import type { ConfirmProps } from "./confirm"
+import { confirmTheme } from "./confirm.theme"
+import RLAButton from "../button/RLAButton.astro"
+
+
+const {
+  variant = "default",
+  title,
+  description,
+  actionLabel = "Confirm",
+  cancelLabel = "Cancel",
+  triggerLabel,
+  ...rest
+} = Astro.props as ConfirmProps
+
+
+
+const classes = confirmTheme(Astro.props)
+
+const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
+const isDestructive = variant === "destructive"
+---
+
+<div class={classes.root} data-slot="alert-dialog-container">
+  {triggerLabel ? (
+    <RLAButton
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      data-dialog-show={dialogId}
+    >
+      {triggerLabel}
+    </RLAButton>
+  ) : (
+    <span data-dialog-show={dialogId}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll="true"
+    {...rest}
+  >
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer">
+        <RLAButton
+          class={classes.cancelButton}
+          data-slot="cancel"
+          variant="outline"
+          color={isDestructive ? "error" : "neutral"}
+          type="button"
+          data-dialog-close={dialogId}
+        >
+          {cancelLabel}
+        </RLAButton>
+        <RLAButton
+          class={classes.actionButton}
+          data-slot="action"
+          color={isDestructive ? "error" : "primary"}
+          variant={isDestructive ? "subtle" : "solid"}
+          type="button"
+          data-dialog-close={dialogId}
+        >
+          {actionLabel}
+        </RLAButton>
+      </slot>
+    </div>
+  </dialog>
+</div>
+
+<script>
+(function() {
+  const win = window as unknown as Window & { rlConfirm?: () => Promise<boolean> };
+  if (win.rlConfirm) return;
+  var pendingResolve: ((value: boolean) => void) | null = null;
+
+  document.addEventListener("click", function(e) {
+    const target = e.target as HTMLElement | null;
+    var btn = target?.closest("[data-slot='cancel'], [data-slot='action']");
+    if (!btn || !pendingResolve) return;
+    pendingResolve(btn.getAttribute("data-slot") === "action");
+    pendingResolve = null;
+  }, true);
+
+  win.rlConfirm = function() {
+    return new Promise<boolean>(function(resolve) {
+      var dialog = document.querySelector("[data-slot='alert-dialog-container'] dialog") as HTMLDialogElement | null;
+      if (!dialog) { resolve(false); return; }
+      pendingResolve = resolve;
+      dialog.addEventListener("close", function() {
+        if (pendingResolve) {
+          pendingResolve(false);
+          pendingResolve = null;
+        }
+      }, { once: true });
+      dialog.showModal();
+    });
+  };
+})();
+</script>