@rimelight/ui 0.0.42 → 0.0.44

package/src/components/file-upload/file-upload.theme.ts

@@ -1,24 +1,21 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createFileUploadTheme = () =>
-  defineTheme({
-    slots: ["root", "input", "content", "icon", "title", "description"],
-    base: {
-      root: "flex flex-col items-center justify-center w-full min-h-[150px] border-2 border-dashed border-border rounded-lg bg-background/50 hover:bg-muted/30 transition-colors cursor-pointer select-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-      input: "absolute opacity-0 size-0 pointer-events-none",
-      content: "flex flex-col items-center justify-center p-6 text-center gap-1.5",
-      icon: "size-8 text-muted-foreground",
-      title: "text-sm font-semibold text-foreground",
-      description: "text-xs text-muted-foreground"
-    },
-    variants: {
-      disabled: {
-        true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
-      }
-    },
-    defaultVariants: {
-      disabled: false
+export const fileUploadTheme = defineTheme("file-upload", {
+  slots: ["root", "input", "content", "icon", "title", "description"],
+  base: {
+    root: "flex flex-col items-center justify-center w-full min-h-[150px] border-2 border-dashed border-default rounded-lg bg-default/50 hover:bg-muted/30 transition-colors cursor-pointer select-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+    input: "absolute opacity-0 size-0 pointer-events-none",
+    content: "flex flex-col items-center justify-center p-6 text-center gap-1.5",
+    icon: "size-8 text-muted",
+    title: "text-sm font-semibold text-highlighted",
+    description: "text-xs text-muted"
+  },
+  variants: {
+    disabled: {
+      true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
     }
-  })
-
-export default createFileUploadTheme()
+  },
+  defaultVariants: {
+    disabled: false
+  }
+})

package/src/components/file-upload/file-upload.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface FileUploadProps {
   /**
    * Accepted file types (e.g. 'image/*', 'application/pdf').

package/src/components/floating-action/RLAFloatingAction.astro

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

package/src/components/floating-action/floating-action.theme.ts

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

package/src/components/footer/RLAFooter.astro

@@ -1,38 +1,34 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { FooterProps } from "./footer"
-import footerTheme from "./footer.theme"
-
-
-const footer = scv(footerTheme)
-
-const {
-  contain = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FooterProps
-
-const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
----
-
-<footer
-  class:list={[classes.root]}
-  data-slot="root"
-  data-contain={contain ? "true" : "false"}
-  {...rest}
->
-  <div class:list={[classes.container]} data-slot="container">
-    <div class:list={[classes.left]} data-slot="left">
-      <slot name="left" />
-    </div>
-    <div class:list={[classes.center]} data-slot="center">
-      <slot name="center" />
-    </div>
-    <div class:list={[classes.right]} data-slot="right">
-      <slot name="right" />
-    </div>
-  </div>
-</footer>
+---
+import type { FooterProps } from "./footer"
+import { footerTheme } from "./footer.theme"
+
+
+
+const {
+  contain = false,
+  theme,
+  ...rest
+} = Astro.props as FooterProps
+
+const classes = footerTheme(Astro.props)
+---
+
+<footer
+  class:list={[classes.root]}
+  data-slot="root"
+  data-contain={contain ? "true" : "false"}
+  data-theme={theme}
+  {...rest}
+>
+  <div class:list={[classes.container]} data-slot="container">
+    <div class:list={[classes.left]} data-slot="left">
+      <slot name="left" />
+    </div>
+    <div class:list={[classes.center]} data-slot="center">
+      <slot name="center" />
+    </div>
+    <div class:list={[classes.right]} data-slot="right">
+      <slot name="right" />
+    </div>
+  </div>
+</footer>

package/src/components/footer/footer.theme.ts

@@ -1,30 +1,27 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createFooterTheme = () =>
-  defineTheme({
-    slots: ["root", "container", "left", "center", "right"],
-    base: {
-      root: "py-8 lg:py-12 overflow-hidden",
-      container:
-        "box-border flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-xs sm:px-md md:px-xl lg:px-xl w-full",
-      left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
-      center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
-      right:
-        "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-none lg:items-end"
-    },
-    variants: {
-      contain: {
-        true: {
-          container: "mx-auto max-w-(--rl-container)"
-        },
-        false: {
-          container: "w-full"
-        }
+export const footerTheme = defineTheme("footer", {
+  slots: ["root", "container", "left", "center", "right"],
+  base: {
+    root: "py-8 lg:py-12 overflow-hidden text-default",
+    container:
+      "box-border flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-xs sm:px-md md:px-xl lg:px-xl w-full",
+    left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
+    center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
+    right:
+      "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-none lg:items-end"
+  },
+  variants: {
+    contain: {
+      true: {
+        container: "mx-auto max-w-(--rl-container)"
+      },
+      false: {
+        container: "w-full"
       }
-    },
-    defaultVariants: {
-      contain: false
     }
-  })
-
-export default createFooterTheme()
+  },
+  defaultVariants: {
+    contain: false
+  }
+})

package/src/components/footer/footer.ts

@@ -3,6 +3,10 @@ export interface FooterProps {
    * Whether to contain the footer content within a max-width container.
    */
   contain?: boolean
+  /**
+   * Theme mode override for the footer subtree ("dark" | "light").
+   */
+  theme?: "light" | "dark"
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/form/RLAForm.astro

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

package/src/components/form/form.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createFormTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "space-y-6"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createFormTheme()
+export const formTheme = defineTheme("form", {
+  slots: ["root"],
+  base: {
+    root: "space-y-6"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/form-field/RLAFormField.astro

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { FormFieldProps } from "./form-field"
-import formFieldTheme from "./form-field.theme"
+import { formFieldTheme } from "./form-field.theme"
 
 
-const formField = scv(formFieldTheme)
 
 const {
   id = `field-${Math.random().toString(36).substring(2, 9)}`,
@@ -14,15 +10,12 @@ const {
   description,
   error,
   required = false,
-  size = "md",
-  ui: uiProp,
-  class: className,
   ...rest
-} = Astro.props as FormFieldProps & { id?: string }
+} = Astro.props as FormFieldProps
 
-const classes = resolveClasses(formField, {
-  size
-}, useUi("formField", uiProp), className);
+
+
+const classes = formFieldTheme(Astro.props);
 ---
 <div class={classes.root} data-slot="root" {...rest}>
   {label && (

package/src/components/form-field/RLSFormField.tsx

@@ -0,0 +1,71 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { FormFieldProps } from "./form-field"
+import { formFieldTheme } from "./form-field.theme"
+
+export interface RLSFormFieldProps extends FormFieldProps {
+  children?: JSX.Element
+  hint?: JSX.Element
+  labelSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  errorSlot?: JSX.Element
+  helpSlot?: JSX.Element
+}
+
+const RLSFormField: Component<RLSFormFieldProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "id",
+    "label",
+    "description",
+    "error",
+    "required",
+    "size",
+    "ui",
+    "class",
+    "children",
+    "hint",
+    "labelSlot",
+    "descriptionSlot",
+    "errorSlot",
+    "helpSlot"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    formFieldTheme({
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.label || props.labelSlot || props.hint ? (
+        <div class="flex items-center justify-between gap-2">
+          <label for={props.id} class={resolvedClasses().label} data-slot="label">
+            {props.labelSlot ? props.labelSlot : props.label}
+            {props.required && <span class="text-error-500 ml-0.5">*</span>}
+          </label>
+          {props.hint}
+        </div>
+      ) : null}
+
+      {props.description || props.descriptionSlot ? (
+        <p class={resolvedClasses().description} data-slot="description">
+          {props.descriptionSlot ? props.descriptionSlot : props.description}
+        </p>
+      ) : null}
+
+      <div class="relative w-full">{props.children}</div>
+
+      {props.error || props.errorSlot ? (
+        <p class={resolvedClasses().error} data-slot="error">
+          {props.errorSlot ? props.errorSlot : props.error}
+        </p>
+      ) : null}
+
+      {props.helpSlot ? <div class="mt-1">{props.helpSlot}</div> : null}
+    </div>
+  )
+}
+
+export default RLSFormField

package/src/components/form-field/RLVFormField.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { FormFieldProps } from "./form-field"
-import formFieldTheme from "./form-field.theme"
-
-const formField = scv(formFieldTheme)
+import { formFieldTheme } from "./form-field.theme"
 
 const props = withDefaults(defineProps<FormFieldProps>(), {
   size: "md"
@@ -15,14 +10,10 @@ const props = withDefaults(defineProps<FormFieldProps>(), {
 const slots = useSlots()
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    formField,
-    {
-      size: props.size
-    },
-    useUi("formField", props.ui),
-    props.class
-  )
+  formFieldTheme({
+    size: props.size,
+    class: props.class
+  })
 )
 </script>
 

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

@@ -1,24 +1,21 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createFormFieldTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "description", "error"],
-    base: {
-      root: "flex flex-col gap-1.5 w-full",
-      label: "text-sm font-medium text-foreground",
-      description: "text-xs text-muted-foreground leading-normal",
-      error: "text-xs font-medium text-error-500 leading-normal"
-    },
-    variants: {
-      size: {
-        sm: { label: "text-xs", description: "text-[10px]", error: "text-[10px]" },
-        md: { label: "text-sm", description: "text-xs", error: "text-xs" },
-        lg: { label: "text-base", description: "text-sm", error: "text-sm" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+export const formFieldTheme = defineTheme("form-field", {
+  slots: ["root", "label", "description", "error"],
+  base: {
+    root: "flex flex-col gap-1.5 w-full",
+    label: "text-sm font-medium text-highlighted",
+    description: "text-xs text-muted leading-normal",
+    error: "text-xs font-medium text-error-500 leading-normal"
+  },
+  variants: {
+    size: {
+      sm: { label: "text-xs", description: "text-[10px]", error: "text-[10px]" },
+      md: { label: "text-sm", description: "text-xs", error: "text-xs" },
+      lg: { label: "text-base", description: "text-sm", error: "text-sm" }
     }
-  })
-
-export default createFormFieldTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

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

@@ -1,4 +1,5 @@
 export interface FormFieldProps {
+  id?: string
   /**
    * Label for the field.
    */

package/src/components/gallery/RLAGallery.astro

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

package/src/components/gallery/gallery.theme.ts

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

package/src/components/gamepad/RLAGamepad.astro

@@ -15,7 +15,7 @@ interface Props {
 const {
   highlightedButtons = [],
   groups = [],
-  highlightColor = 'var(--color-primary-500, #00c16a)',
+  highlightColor = 'var(--rl-primary-500)',
   backgroundColor = 'transparent'
 } = Astro.props
 

package/src/components/grid/RLAGrid.astro

@@ -1,27 +1,14 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { GridProps } from "./grid"
-import gridTheme from "./grid.theme"
+import { gridTheme } from "./grid.theme"
 
 
-const grid = scv(gridTheme)
 
 const {
-  cols = 2,
-  gap = "md",
-  stagger = false,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as GridProps
 
-const classes = resolveClasses(grid, {
-  cols: cols as any,
-  gap,
-  stagger
-}, useUi("grid", uiProp), className)
+const classes = gridTheme(Astro.props)
 ---
 
 <div class={classes.root} {...rest}>