@rimelight/ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,48 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createInputTheme = () =>
+  defineTheme({
+    slots: ["root", "input", "leading", "trailing"],
+    base: {
+      root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input:
+        "w-full bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      leading: "absolute left-3 flex items-center justify-center text-muted-foreground",
+      trailing: "absolute right-3 flex items-center justify-center text-muted-foreground"
+    },
+    variants: {
+      variant: {
+        default: {},
+        ghost: {
+          root: "bg-transparent border-none shadow-none focus-within:ring-0"
+        }
+      },
+      size: {
+        sm: { input: "py-1 text-xs", leading: "left-2.5", trailing: "right-2.5" },
+        md: { input: "py-1.5 text-sm", leading: "left-3", trailing: "right-3" },
+        lg: { input: "py-2 text-base", leading: "left-3.5", trailing: "right-3.5" }
+      },
+      hasLeading: {
+        true: { input: "pl-9" }
+      },
+      hasTrailing: {
+        true: { input: "pr-9" }
+      },
+      error: {
+        true: { root: "border-error-500 focus-within:ring-error-500/50" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      hasLeading: false,
+      hasTrailing: false,
+      error: false
+    }
+  })
+
+export default createInputTheme()

package/src/components/input/input.ts

@@ -0,0 +1,69 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface InputProps {
+  /**
+   * Type of input element.
+   */
+  type?: "text" | "password" | "email" | "number" | "date" | "search" | "tel" | "url"
+  /**
+   * The input value.
+   */
+  value?: string | number
+  /**
+   * Placeholder text.
+   */
+  placeholder?: string
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Readonly state.
+   */
+  readonly?: boolean
+  /**
+   * Name for forms.
+   */
+  name?: string
+  /**
+   * Required field state.
+   */
+  required?: boolean
+  /**
+   * Error state.
+   */
+  error?: boolean | string
+  /**
+   * Leading icon name.
+   */
+  leadingIcon?: string
+  /**
+   * Trailing icon name.
+   */
+  trailingIcon?: string
+  /**
+   * Variant style.
+   */
+  variant?: "default" | "ghost"
+  /**
+   * Size scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/input-date/RLAInputDate.astro

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

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

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

package/src/components/input-menu/RLAInputMenu.astro

@@ -0,0 +1,166 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { InputMenuProps } from "./input-menu"
+import inputMenuTheme from "./input-menu.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const inputMenu = scv(inputMenuTheme)
+
+const {
+  items = [],
+  value = "",
+  placeholder = "Select item...",
+  disabled = false,
+  name,
+  label,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputMenuProps
+
+const classes = resolveClasses(inputMenu, {
+  size
+}, useUi("inputMenu", uiProp), className);
+
+const normalizedItems = items.map(item => {
+  if (typeof item === "string") {
+    return { label: item, value: item }
+  }
+  return item
+})
+
+const selectedItem = normalizedItems.find(item => item.value === value)
+const initialLabel = selectedItem ? selectedItem.label : ""
+---
+<rla-input-menu {...rest}>
+  <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
+    {label && <label class={classes.label} data-slot="label">{label}</label>}
+    
+    <div class="relative w-full" data-inputMenu-wrapper>
+      <button
+        type="button"
+        class={classes.trigger}
+        data-slot="trigger"
+        disabled={disabled}
+        data-inputMenu-trigger
+      >
+        <span data-inputMenu-value>{initialLabel || placeholder}</span>
+        <RLAIcon name="chevronsUpDown" class="opacity-50" />
+      </button>
+
+      <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
+        <input
+          type="text"
+          class={classes.input}
+          placeholder="Search..."
+          data-inputMenu-search
+        />
+        <div class="py-1" data-inputMenu-items>
+          {normalizedItems.map(item => (
+            <div
+              class={classes.item}
+              data-slot="item"
+              data-value={item.value}
+              data-label={item.label}
+              data-inputMenu-item
+            >
+              <span class={classes.itemText}>{item.label}</span>
+              <RLAIcon name="check" class={classes.itemIcon + " hidden"} data-check-icon />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+    <input type="hidden" name={name} value={value} data-inputMenu-hidden-input />
+  </div>
+</rla-input-menu>
+
+<script>
+  class RLAInputMenu extends HTMLElement {
+    private inputMenuCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const wrapper = this.querySelector("[data-inputMenu-wrapper]") as HTMLElement | null;
+      if (!wrapper) return;
+
+      const trigger = wrapper.querySelector("[data-inputMenu-trigger]") as HTMLButtonElement;
+      const dropdown = wrapper.querySelector("[data-inputMenu-dropdown]") as HTMLDivElement;
+      const search = wrapper.querySelector("[data-inputMenu-search]") as HTMLInputElement;
+      const items = wrapper.querySelectorAll<HTMLElement>("[data-inputMenu-item]");
+      const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
+      const hiddenInput = this.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
+
+      if (!trigger || !dropdown) return;
+
+      const onTriggerClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        dropdown.classList.toggle("hidden");
+        if (!dropdown.classList.contains("hidden")) {
+          search?.focus();
+        }
+      };
+      trigger.addEventListener("click", onTriggerClick);
+
+      const onSearchInput = (e: Event) => {
+        const q = (e.target as HTMLInputElement).value.toLowerCase();
+        items.forEach(item => {
+          const label = (item as HTMLElement).dataset.label?.toLowerCase() || "";
+          if (label.includes(q)) {
+            (item as HTMLElement).classList.remove("hidden");
+          } else {
+            (item as HTMLElement).classList.add("hidden");
+          }
+        });
+      };
+      search?.addEventListener("input", onSearchInput);
+
+      const itemCleanups: (() => void)[] = [];
+      items.forEach(item => {
+        const onItemClick = (e: MouseEvent) => {
+          e.stopPropagation();
+          const val = (item as HTMLElement).dataset.value || "";
+          const label = (item as HTMLElement).dataset.label || "";
+          
+          if (hiddenInput) hiddenInput.value = val;
+          if (valueSpan) valueSpan.textContent = label;
+          
+          items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+          item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+          
+          dropdown.classList.add("hidden");
+        };
+        item.addEventListener("click", onItemClick);
+        itemCleanups.push(() => item.removeEventListener("click", onItemClick));
+      });
+
+      const onDocumentClick = () => {
+        dropdown.classList.add("hidden");
+      };
+      document.addEventListener("click", onDocumentClick);
+
+      this.inputMenuCleanup = () => {
+        trigger.removeEventListener("click", onTriggerClick);
+        search?.removeEventListener("input", onSearchInput);
+        itemCleanups.forEach(fn => fn());
+        document.removeEventListener("click", onDocumentClick);
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.inputMenuCleanup) {
+        this.inputMenuCleanup();
+        this.inputMenuCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-input-menu')) {
+    customElements.define('rla-input-menu', RLAInputMenu);
+  }
+</script>

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

@@ -0,0 +1,35 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createInputMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "trigger", "input", "content", "item", "itemText", "itemIcon"],
+    base: {
+      root: "relative w-full flex flex-col gap-1.5",
+      label: "text-sm font-medium text-foreground",
+      trigger:
+        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      input:
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-all placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      content:
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
+      item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      itemText: "truncate",
+      itemIcon: "ml-auto size-4"
+    },
+    variants: {
+      size: {
+        sm: { trigger: "h-8 px-2 text-xs", input: "h-8 text-xs", item: "py-1 px-1.5 text-xs" },
+        md: { trigger: "h-9 px-3 text-sm", input: "h-9 text-sm", item: "py-1.5 px-2 text-sm" },
+        lg: {
+          trigger: "h-10 px-4 text-base",
+          input: "h-10 text-base",
+          item: "py-2 px-2.5 text-base"
+        }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createInputMenuTheme()

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

@@ -0,0 +1,44 @@
+import type { ThemeColor } from "../../types/component"
+export interface InputMenuProps {
+  /**
+   * The list of items in the input menu.
+   */
+  items?: Array<{ label: string; value: string; [key: string]: any } | string>
+  /**
+   * Selected value(s).
+   */
+  value?: string | string[]
+  /**
+   * Placeholder text.
+   */
+  placeholder?: string
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Form control name.
+   */
+  name?: string
+  /**
+   * Form label.
+   */
+  label?: string
+  /**
+   * Size scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/input-number/RLAInputNumber.astro

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

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

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

package/src/components/input-pin/RLAInputPin.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { InputPinProps } from "./input-pin"
+import { resolveTheme } from "../../utils/resolveTheme"
+import inputPinThemeDefault, { createInputPinTheme } from "./input-pin.theme"
+const inputPinTheme = resolveTheme(inputPinThemeDefault, createInputPinTheme)
+
+
+const inputPin = scv(inputPinTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputPinProps
+
+const classes = resolveClasses(inputPin, {}, useUi("inputPin", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

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

@@ -0,0 +1,14 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createInputPinTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createInputPinTheme()

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

@@ -0,0 +1,11 @@
+export interface InputPinProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}