@rimelight/ui 0.0.42 → 0.0.44

package/src/components/input/RLSInput.tsx

@@ -0,0 +1,101 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { InputProps } from "./input"
+import { inputTheme } from "./input.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSInputProps extends InputProps {
+  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void
+  onChange?: (e: Event & { currentTarget: HTMLInputElement }) => void
+  onBlur?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void
+  onFocus?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void
+  onKeyDown?: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+  ref?: HTMLInputElement | ((el: HTMLInputElement) => void)
+  leading?: JSX.Element
+  trailing?: JSX.Element
+}
+
+const RLSInput: Component<RLSInputProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "type",
+    "value",
+    "placeholder",
+    "disabled",
+    "readonly",
+    "name",
+    "required",
+    "error",
+    "leadingIcon",
+    "trailingIcon",
+    "variant",
+    "size",
+    "color",
+    "theme",
+    "ui",
+    "class",
+    "onInput",
+    "onChange",
+    "onBlur",
+    "onFocus",
+    "onKeyDown",
+    "ref",
+    "leading",
+    "trailing"
+  ])
+
+  const hasLeading = () => !!(props.leadingIcon || props.leading)
+  const hasTrailing = () => !!(props.trailingIcon || props.trailing)
+
+  const resolvedClasses = createMemo(() =>
+    inputTheme({
+      variant: props.variant ?? "default",
+      size: props.size ?? "md",
+      hasLeading: hasLeading(),
+      hasTrailing: hasTrailing(),
+      error: !!props.error,
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root">
+      {props.leading ? (
+        props.leading
+      ) : props.leadingIcon ? (
+        <span class={resolvedClasses().leading} data-slot="leading">
+          <RLSIcon name={props.leadingIcon} size="sm" aria-hidden="true" />
+        </span>
+      ) : null}
+
+      <input
+        ref={props.ref}
+        type={props.type || "text"}
+        name={props.name}
+        value={props.value !== undefined ? props.value : ""}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        readonly={props.readonly}
+        required={props.required}
+        class={resolvedClasses().input}
+        data-slot="input"
+        onInput={props.onInput}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        onKeyDown={props.onKeyDown}
+        {...rest}
+      />
+
+      {props.trailing ? (
+        props.trailing
+      ) : props.trailingIcon ? (
+        <span class={resolvedClasses().trailing} data-slot="trailing">
+          <RLSIcon name={props.trailingIcon} size="sm" aria-hidden="true" />
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export default RLSInput

package/src/components/input/RLVInput.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { InputProps } from "./input"
-import inputTheme from "./input.theme"
-
-const input = scv(inputTheme)
+import { inputTheme } from "./input.theme"
 
 const props = withDefaults(defineProps<InputProps & { modelValue?: string | number }>(), {
   type: "text",
@@ -34,20 +29,16 @@ const isLeading = computed(() => !!(props.leadingIcon || slots.leading))
 const isTrailing = computed(() => !!(props.trailingIcon || slots.trailing))
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    input,
-    {
-      size: props.size,
-      color: props.color,
-      error: !!props.error,
-      disabled: props.disabled,
-      leading: isLeading.value,
-      trailing: isTrailing.value,
-      theme: props.theme
-    },
-    useUi("input", props.ui),
-    props.class
-  )
+  inputTheme({
+    size: props.size,
+    color: props.color,
+    error: !!props.error,
+    disabled: props.disabled,
+    leading: isLeading.value,
+    trailing: isTrailing.value,
+    theme: props.theme,
+    class: props.class
+  })
 )
 
 function onInput(event: Event) {

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

@@ -1,48 +1,41 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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" }
+export const inputTheme = defineTheme("input", {
+  slots: ["root", "input", "leading", "trailing"],
+  base: {
+    root: "relative flex items-center w-full rounded-md border border-default bg-default 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 disabled:cursor-not-allowed disabled:opacity-50",
+    leading: "absolute left-3 flex items-center justify-center text-muted",
+    trailing: "absolute right-3 flex items-center justify-center text-muted"
+  },
+  variants: {
+    variant: {
+      default: {},
+      ghost: {
+        root: "bg-transparent border-none shadow-none focus-within:ring-0"
       }
     },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-      hasLeading: false,
-      hasTrailing: false,
-      error: false
+    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" }
     }
-  })
-
-export default createInputTheme()
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    hasLeading: false,
+    hasTrailing: false,
+    error: false
+  }
+})

package/src/components/input/input.ts

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

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

@@ -1,21 +1,10 @@
----
-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 />
+---
+import { inputDateTheme } from "./input-date.theme"
+
+
+
+const classes = inputDateTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

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

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

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

@@ -1,13 +1,9 @@
 ---
-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 { inputMenuTheme } from "./input-menu.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const inputMenu = scv(inputMenuTheme)
 
 const {
   items = [],
@@ -16,16 +12,10 @@ const {
   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 classes = inputMenuTheme(Astro.props);
 
 const normalizedItems = items.map(item => {
   if (typeof item === "string") {
@@ -50,7 +40,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
         data-inputMenu-trigger
       >
         <span data-inputMenu-value>{initialLabel || placeholder}</span>
-        <RLAIcon name="chevronsUpDown" class="opacity-50" />
+        <RLAIcon name="i-rl-chevronsUpDown" class="opacity-50" />
       </button>
 
       <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
@@ -70,7 +60,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
               data-inputMenu-item
             >
               <span class={classes.itemText}>{item.label}</span>
-              <RLAIcon name="check" class={classes.itemIcon + " hidden"} data-check-icon />
+              <RLAIcon name="i-rl-check" class={classes.itemIcon + " hidden"} data-check-icon />
             </div>
           ))}
         </div>

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

@@ -1,35 +1,32 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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"
-        }
+export const inputMenuTheme = defineTheme("input-menu", {
+  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-highlighted",
+    trigger:
+      "flex h-9 w-full items-center justify-between rounded-md border border-default bg-default 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-default bg-transparent px-3 py-1 text-sm shadow-sm transition-all placeholder:text-muted 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-elevated p-1 text-highlighted 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-accented hover:text-highlighted 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()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

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

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface InputMenuProps {
   /**
    * The list of items in the input menu.

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

@@ -1,21 +1,10 @@
----
-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 />
+---
+import { inputNumberTheme } from "./input-number.theme"
+
+
+
+const classes = inputNumberTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

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

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

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

@@ -1,23 +1,10 @@
----
-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 />
+---
+import { inputPinTheme } from "./input-pin.theme"
+
+
+
+const classes = inputPinTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

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

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

package/src/components/input-rating/RLAInputRating.astro

@@ -1,24 +1,16 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { InputRatingProps } from "./input-rating"
-import { resolveTheme } from "../../utils/resolveTheme"
-import inputRatingThemeDefault, { createInputRatingTheme } from "./input-rating.theme"
-const inputRatingTheme = resolveTheme(inputRatingThemeDefault, createInputRatingTheme)
+import { inputRatingTheme } from "./input-rating.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const inputRating = scv(inputRatingTheme)
 
 const {
   id,
   readonly = false,
   icon = "star",
   emptyIcon,
-  color = "primary",
   size = "md",
-  orientation = "horizontal",
   step = 1,
   disabled = false,
   required = false,
@@ -27,23 +19,10 @@ const {
   length = 5,
   clearable = false,
   hoverable = false,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as InputRatingProps
 
-const classes = resolveClasses(
-  inputRating,
-  {
-    orientation,
-    size,
-    color: color as any,
-    readonly,
-    disabled
-  },
-  useUi("inputRating", uiProp),
-  className
-)
+const classes = inputRatingTheme(Astro.props)
 
 const sizeMap = {
   xs: "0.75rem",