@rimelight/ui 0.0.42 → 0.0.43

package/src/components/input-rating/input-rating.theme.ts

@@ -1,84 +1,72 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createInputRatingTheme = (colors: readonly string[] = colorConfig.colors) => {
-  const colorVariants: Record<string, { root?: string; indicator: string; item: string }> = {
-    neutral: {
-      indicator: "text-highlighted",
-      item: "focus-visible:outline-inverted"
-    }
-  }
-  for (const c of colors) {
-    colorVariants[c] = {
-      root: "rl-color-" + c,
-      indicator: "text-[var(--rl-bg)]",
-      item: "focus-visible:outline-[var(--rl-ring)]"
-    }
-  }
-
-  return defineTheme({
-    slots: ["root", "item", "indicator", "icon", "emptyIcon"],
-    base: {
-      root: "inline-flex select-none",
-      item: [
-        "relative inline-block cursor-pointer select-none rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
-        "transition-all duration-150"
-      ],
-      indicator:
-        "absolute inset-y-0 left-0 overflow-hidden outline-none pointer-events-none flex items-center justify-start",
-      icon: "block w-[var(--item-size)] h-[var(--item-size)] max-w-none shrink-0",
-      emptyIcon:
-        "absolute inset-0 overflow-hidden pointer-events-none flex items-center justify-start text-muted"
-    },
-    variants: {
-      orientation: {
-        horizontal: {
-          root: "flex-row items-center gap-0.5"
-        },
-        vertical: {
-          root: "flex-col items-center gap-0.5"
-        }
+export const inputRatingTheme = defineTheme("input-rating", {
+  slots: ["root", "item", "indicator", "icon", "emptyIcon"],
+  base: {
+    root: "inline-flex select-none",
+    item: [
+      "relative inline-block cursor-pointer select-none rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]",
+      "transition-all duration-150"
+    ],
+    indicator:
+      "absolute inset-y-0 left-0 overflow-hidden outline-none pointer-events-none flex items-center justify-start text-[var(--rl-bg)]",
+    icon: "block w-[var(--item-size)] h-[var(--item-size)] max-w-none shrink-0",
+    emptyIcon:
+      "absolute inset-0 overflow-hidden pointer-events-none flex items-center justify-start text-muted"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-row items-center gap-0.5"
       },
-      size: {
-        xs: { item: "size-3" },
-        sm: { item: "size-4" },
-        md: { item: "size-5" },
-        lg: { item: "size-6" },
-        xl: { item: "size-7" }
+      vertical: {
+        root: "flex-col items-center gap-0.5"
+      }
+    },
+    size: {
+      xs: { item: "size-3" },
+      sm: { item: "size-4" },
+      md: { item: "size-5" },
+      lg: { item: "size-6" },
+      xl: { item: "size-7" }
+    },
+    color: "auto",
+    readonly: {
+      true: {
+        root: "cursor-default",
+        item: "cursor-default pointer-events-none"
       },
-      color: colorVariants,
-      readonly: {
-        true: {
-          root: "cursor-default",
-          item: "cursor-default pointer-events-none"
-        },
-        false: {}
+      false: {}
+    },
+    disabled: {
+      true: {
+        root: "opacity-75 cursor-not-allowed",
+        item: "cursor-not-allowed pointer-events-none"
       },
-      disabled: {
-        true: {
-          root: "opacity-75 cursor-not-allowed",
-          item: "cursor-not-allowed pointer-events-none"
-        },
-        false: {}
+      false: {}
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    orientation: "horizontal",
+    readonly: false,
+    disabled: false
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      classNames: {
+        indicator: "text-highlighted",
+        item: "focus-visible:outline-inverted"
       }
     },
-    defaultVariants: {
-      color: "primary",
-      size: "md",
-      orientation: "horizontal",
+    {
       readonly: false,
-      disabled: false
-    },
-    compoundVariants: [
-      {
-        readonly: false,
-        disabled: false,
-        classNames: {
-          item: "hover:scale-110"
-        }
+      disabled: false,
+      classNames: {
+        item: "hover:scale-110"
       }
-    ]
-  })
-}
-
-export default createInputRatingTheme()
+    }
+  ]
+})

package/src/components/input-rating/input-rating.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 
 export interface InputRatingProps {
   /**

package/src/components/input-tags/RLAInputTags.astro

@@ -1,21 +1,174 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { InputTagsProps } from "./input-tags"
-import inputTagsTheme from "./input-tags.theme"
-
-
-const inputTags = scv(inputTagsTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as InputTagsProps
-
-const classes = resolveClasses(inputTags, {}, useUi("inputTags", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { InputTagsProps, TagItem } from "./input-tags"
+import { inputTagsTheme } from "./input-tags.theme"
+
+
+
+const {
+  items,
+  displayLimit = 4,
+  estimatedTagWidth = 80,
+  showInput = false,
+  name,
+  placeholder = "Add tag…",
+  ...rest
+} = Astro.props as InputTagsProps
+
+const classes = inputTagsTheme(Astro.props)
+
+// ─── Responsive CSS Item Counter ────────────────────────────────────────────
+//
+// Each tag is a flat DOM sibling. Container queries hide tags from the right
+// as the container shrinks and set --hidden-items. CSS counters combine it
+// with the server-side --base-hidden to render "+N more" — no resize observer.
+//
+// Unlike AvatarGroup (fixed-size items), tags have variable widths. We use
+// `estimatedTagWidth` as the per-tag width approximation for breakpoints.
+// Users can tune this prop for label-length mismatches.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const uid = Math.random().toString(36).substring(2, 9)
+const cName = `rla-it-${uid}`
+
+// Normalize items to TagItem objects
+const normalizedItems: TagItem[] = (items ?? []).map(item =>
+  typeof item === "string" ? { label: item, value: item } : item
+)
+
+const renderedItems   = normalizedItems.slice(0, displayLimit)
+const baseHiddenCount = Math.max(0, normalizedItems.length - displayLimit)
+const needsOverflow   = normalizedItems.length >= displayLimit
+
+// Gap between tags in px (gap-1.5 = 6px)
+const tagGapPx  = 6
+// Width of the "+N more" chip
+const morePx    = 56
+
+// Generate per-instance container-query CSS
+// Same cascade-based approach as AvatarGroup:
+//   each breakpoint hides ONE new nth-child, smaller containers match more rules.
+let instanceCss = ""
+if (needsOverflow && renderedItems.length > 1) {
+  const maxBreaks = renderedItems.length - 1 // keep at least the first tag
+  for (let i = 0; i < maxBreaks; i++) {
+    const hiddenItems  = i + 1
+    const visibleCount = renderedItems.length - hiddenItems
+    // Min container width for visibleCount tags + more chip + gaps
+    const maxWidth     = visibleCount * estimatedTagWidth + (visibleCount) * tagGapPx + morePx + tagGapPx
+    const hideNthChild = renderedItems.length - i // counting from the end
+
+    instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
+    instanceCss += `\n  [data-it="${uid}"] { --hidden-items: ${hiddenItems}; }`
+    instanceCss += `\n  [data-it="${uid}"] > .rla-it-tag.hidable:nth-child(${hideNthChild}) { display: none; }`
+    if (baseHiddenCount === 0) {
+      instanceCss += `\n  [data-it="${uid}"] > .rla-it-more-hidden { display: inline-flex; }`
+    }
+    instanceCss += `\n}`
+  }
+}
+---
+
+{normalizedItems.length > 0 ? (
+  <div
+    class="rla-it-host"
+    style={`container-type: inline-size; container-name: ${cName};`}
+    {...rest}
+  >
+    <div
+      class:list={[classes.root, "rla-it-list"]}
+      data-slot="root"
+      data-it={uid}
+      style={`--base-hidden: ${baseHiddenCount}; --hidden-items: 0;`}
+    >
+      {renderedItems.map((item, idx) => (
+        <span
+          class:list={[
+            classes.tag,
+            "rla-it-tag",
+            needsOverflow && idx > 0 && "hidable"
+          ]}
+          data-slot="tag"
+        >
+          <span class={classes.tagLabel}>{item.label}</span>
+          {name && <input type="hidden" name={name} value={item.value ?? item.label} />}
+        </span>
+      ))}
+
+      {needsOverflow && (
+        <span
+          class:list={[
+            classes.more,
+            "rla-it-more",
+            baseHiddenCount === 0 && "rla-it-more-hidden"
+          ]}
+          aria-hidden="true"
+          data-slot="more"
+        >
+          +<span class="rla-it-count" /> more
+        </span>
+      )}
+
+      {showInput && (
+        <input
+          type="text"
+          name={name ? `${name}__input` : undefined}
+          placeholder={placeholder}
+          class:list={[classes.input]}
+          data-slot="input"
+          autocomplete="off"
+        />
+      )}
+    </div>
+  </div>
+) : (
+  <div class={classes.root} data-slot="root" {...rest}>
+    <slot />
+    {showInput && (
+      <input
+        type="text"
+        name={name ? `${name}__input` : undefined}
+        placeholder={placeholder}
+        class:list={[classes.input]}
+        data-slot="input"
+        autocomplete="off"
+      />
+    )}
+  </div>
+)}
+
+<!-- Per-instance CSS scoped via unique data-it attribute -->
+<style is:inline set:html={instanceCss} />
+
+<style>
+  .rla-it-host {
+    display: block;
+    width: 100%;
+  }
+
+  .rla-it-tag {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  /* "+more" chip — flex, visible by default when base-hidden > 0 */
+  .rla-it-more {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
+  /* Hidden by default when base-hidden is 0 (revealed by container queries) */
+  .rla-it-more-hidden {
+    display: none;
+  }
+
+  /*
+   * CSS Counter — sums --base-hidden (render-time) + --hidden-items (CSS queries).
+   * Zero JS. The browser does the arithmetic via counter-reset: calc().
+   */
+  .rla-it-count::after {
+    counter-reset: rla-it-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
+    content: counter(rla-it-cnt);
+  }
+</style>

package/src/components/input-tags/input-tags.theme.ts

@@ -1,13 +1,38 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createInputTagsTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createInputTagsTheme()
+export const inputTagsTheme = defineTheme("input-tags", {
+  slots: ["root", "tag", "tagLabel", "more", "input"],
+  base: {
+    root: "flex flex-wrap items-center gap-1.5",
+    tag: [
+      "inline-flex items-center gap-1 px-2 py-0.5",
+      "rounded-full text-xs font-medium",
+      "bg-[var(--rl-bg)]/10 text-[var(--rl-text)]",
+      "ring-1 ring-[var(--rl-border)]/30",
+      "whitespace-nowrap select-none"
+    ],
+    tagLabel: "leading-none",
+    more: [
+      "inline-flex items-center justify-center px-2 py-0.5",
+      "rounded-full text-xs font-semibold",
+      "bg-muted text-muted",
+      "ring-1 ring-border/40",
+      "whitespace-nowrap select-none cursor-default"
+    ],
+    input: ["flex-1 min-w-[6rem] bg-transparent text-sm outline-none", "placeholder:text-muted"]
+  },
+  variants: {
+    color: "auto"
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      classNames: {
+        tag: "bg-elevated text-highlighted ring-border/60"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "neutral"
+  }
+})

package/src/components/input-tags/input-tags.ts

@@ -1,4 +1,54 @@
+export interface TagItem {
+  /**
+   * Visible label.
+   */
+  label: string
+  /**
+   * Optional value (used as key; falls back to label).
+   */
+  value?: string
+  /**
+   * Color variant for the tag chip.
+   */
+  color?: string
+}
+
 export interface InputTagsProps {
+  /**
+   * Array of tag data to render automatically. Enables the CSS responsive item counter. When
+   * omitted, falls back to `<slot />`.
+   */
+  items?: Array<string | TagItem>
+  /**
+   * Maximum number of tags to show at full container width. Additional tags are pre-hidden
+   * server-side and counted. Container queries will responsively hide more as width shrinks.
+   *
+   * @default 4
+   */
+  displayLimit?: number
+  /**
+   * Estimated width (px) of each tag chip — used to compute container-query breakpoints. Increase
+   * for longer labels, decrease for shorter ones.
+   *
+   * @default 80
+   */
+  estimatedTagWidth?: number
+  /**
+   * When true, renders a text input after the tags for entering new values. Tag addition/removal is
+   * handled natively via form submission; for client-side interactivity use the Vue variant or a
+   * custom slot.
+   *
+   * @default false
+   */
+  showInput?: boolean
+  /**
+   * `name` attribute forwarded to the hidden inputs and text input.
+   */
+  name?: string
+  /**
+   * Placeholder for the optional text input.
+   */
+  placeholder?: string
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/input-time/RLAInputTime.astro

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

package/src/components/input-time/input-time.theme.ts

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

package/src/components/kbd/RLAKbd.astro

@@ -1,32 +1,17 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { KbdProps } from "./kbd"
-import { resolveTheme } from "../../utils/resolveTheme"
-import kbdThemeDefault, { createKbdTheme } from "./kbd.theme"
-const kbdTheme = resolveTheme(kbdThemeDefault, createKbdTheme)
-
-
-const kbd = scv(kbdTheme)
-
-const {
-  size = "md",
-  color = "neutral",
-  variant = "outline",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as KbdProps & { color?: string; variant?: string; theme?: string }
-
-const classes = resolveClasses(kbd, {
-  size,
-  color: color as "neutral",
-  variant: variant as "solid",
-  theme: theme as "dark"
-}, useUi("kbd", uiProp), className)
----
-<kbd class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</kbd>
+---
+import type { KbdProps } from "./kbd"
+import { kbdTheme } from "./kbd.theme"
+
+
+
+const {
+  ...rest
+} = Astro.props as KbdProps
+
+
+
+const classes = kbdTheme(Astro.props)
+---
+<kbd class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</kbd>