@rimelight/ui 0.0.42 → 0.0.44

package/src/components/textarea/RLVTextarea.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { TextareaProps } from "./textarea"
-import textareaThemeDefault from "./textarea.theme"
+import { textareaTheme } from "./textarea.theme"
 
 defineOptions({ name: "RLVTextarea" })
 
 const attrs = useAttrs()
-const textareaScv = scv(textareaThemeDefault)
 
 const modelValue = defineModel<string>()
 
@@ -22,17 +18,13 @@ const props = withDefaults(defineProps<TextareaProps>(), {
 })
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    textareaScv,
-    {
-      size: props.size,
-      color: props.color,
-      error: !!props.error,
-      disabled: props.disabled
-    },
-    useUi("textarea", props.ui),
-    props.class
-  )
+  textareaTheme({
+    size: props.size,
+    color: props.color,
+    error: !!props.error,
+    disabled: props.disabled,
+    class: props.class
+  })
 )
 </script>
 

package/src/components/textarea/textarea.theme.ts

@@ -1,27 +1,24 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTextareaTheme = () =>
-  defineTheme({
-    slots: ["root", "textarea"],
-    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",
-      textarea:
-        "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
+export const textareaTheme = defineTheme("textarea", {
+  slots: ["root", "textarea"],
+  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",
+    textarea:
+      "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
+  },
+  variants: {
+    size: {
+      sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
+      md: { textarea: "py-2 text-sm min-h-[80px]" },
+      lg: { textarea: "py-2.5 text-base min-h-[100px]" }
     },
-    variants: {
-      size: {
-        sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
-        md: { textarea: "py-2 text-sm min-h-[80px]" },
-        lg: { textarea: "py-2.5 text-base min-h-[100px]" }
-      },
-      error: {
-        true: { root: "border-error-500 focus-within:ring-error-500/50" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      error: false
+    error: {
+      true: { root: "border-error-500 focus-within:ring-error-500/50" }
     }
-  })
-
-export default createTextareaTheme()
+  },
+  defaultVariants: {
+    size: "md",
+    error: false
+  }
+})

package/src/components/textarea/textarea.ts

@@ -1,5 +1,6 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 export interface TextareaProps {
+  autoGrow?: boolean
   /**
    * The text value.
    */

package/src/components/theme-selector/RLAThemeSelector.astro

@@ -1,25 +1,17 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ThemeSelectorProps } from "./theme-selector"
-import themeSelectorTheme from "./theme-selector.theme"
+import { themeSelectorTheme } from "./theme-selector.theme"
 import RLAButton from "../button/RLAButton.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const themeSelector = scv(themeSelectorTheme)
 
 const {
-    size = "md",
-    ui: uiProp,
-    class: className,
-    ...rest
+  size = "md",
+  ...rest
 } = Astro.props as ThemeSelectorProps
 
-const classes = resolveClasses(themeSelector, {
-    size
-}, useUi("themeSelector", uiProp), className);
+const classes = themeSelectorTheme(Astro.props);
 ---
 
 <rla-theme-selector {...rest}>
@@ -30,33 +22,35 @@ const classes = resolveClasses(themeSelector, {
             square
             aria-label="Toggle theme"
     >
-        <RLAIcon name="sun" class={classes.sun} />
-        <RLAIcon name="moon" class={classes.moon} />
+        <RLAIcon name="i-rl-sun" class={classes.sun} />
+        <RLAIcon name="i-rl-moon" class={classes.moon} />
     </RLAButton>
 </rla-theme-selector>
 
+<style is:global>
+    .rla-theme-sun { display: none; }
+    [data-theme="dark"] .rla-theme-sun { display: block; }
+    .rla-theme-moon { display: block; }
+    [data-theme="dark"] .rla-theme-moon { display: none; }
+</style>
+
 <script>
-    import { defineShortcuts } from "../../utils/shortcuts"
+    import { defineShortcuts } from "../../shortcuts"
 
     function applyStoredTheme() {
         const stored = localStorage.getItem('theme');
-        if (stored === 'dark') {
-            document.documentElement.classList.add('dark');
-            document.documentElement.classList.remove('light');
-        } else if (stored === 'light') {
-            document.documentElement.classList.remove('dark');
-            document.documentElement.classList.add('light');
+        if (stored === 'dark' || stored === 'light') {
+            document.documentElement.setAttribute('data-theme', stored);
         }
     }
 
     applyStoredTheme();
 
     function onToggle() {
-        const willBeDark = !document.documentElement.classList.contains('dark');
-        document.documentElement.classList.toggle('dark',  willBeDark);
-        document.documentElement.classList.toggle('light', !willBeDark);
+        const willBeDark = document.documentElement.getAttribute('data-theme') !== 'dark';
+        document.documentElement.setAttribute('data-theme', willBeDark ? 'dark' : 'light');
         localStorage.setItem('theme', willBeDark ? 'dark' : 'light');
-        
+
         document.querySelectorAll('.theme-toggle-button').forEach(btn => {
             btn.setAttribute('data-state', willBeDark ? 'on' : 'off');
             btn.setAttribute('aria-pressed', willBeDark.toString());
@@ -71,7 +65,7 @@ const classes = resolveClasses(themeSelector, {
             const button = this.querySelector('.theme-toggle-button');
             if (!button) return;
 
-            const isDark = document.documentElement.classList.contains('dark');
+            const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
             button.setAttribute('data-state', isDark ? 'on' : 'off');
             button.setAttribute('aria-pressed', isDark.toString());
 
@@ -103,4 +97,4 @@ const classes = resolveClasses(themeSelector, {
     if (!customElements.get('rla-theme-selector')) {
         customElements.define('rla-theme-selector', RLAThemeSelector);
     }
-</script>
+</script>

package/src/components/theme-selector/theme-selector.theme.ts

@@ -1,15 +1,12 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createThemeSelectorTheme = () =>
-  defineTheme({
-    slots: ["root", "sun", "moon"],
-    base: {
-      root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
-      sun: "hidden dark:block w-5 h-5 text-current",
-      moon: "dark:hidden w-5 h-5 text-current"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createThemeSelectorTheme()
+export const themeSelectorTheme = defineTheme("theme-selector", {
+  slots: ["root", "sun", "moon"],
+  base: {
+    root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
+    sun: "rla-theme-sun w-5 h-5 text-current",
+    moon: "rla-theme-moon w-5 h-5 text-current"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/timeline/RLATimeline.astro

@@ -1,42 +1,22 @@
 ---
-import { scv, cx } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { TimelineProps, TimelineItem } from "./timeline"
-import { resolveTheme } from "../../utils/resolveTheme"
-import timelineThemeDefault, { createTimelineTheme } from "./timeline.theme"
-const timelineTheme = resolveTheme(timelineThemeDefault, createTimelineTheme)
+import { timelineTheme } from "./timeline.theme"
 import RLAAvatar from "../avatar/RLAAvatar.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const timeline = scv(timelineTheme)
-
 const {
   as: Component = "div",
   items,
   size = "md",
-  color = "primary",
   orientation = "vertical",
   valueKey = "value",
   defaultValue,
   modelValue,
   reverse = false,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as TimelineProps
 
-const classes = resolveClasses(
-  timeline,
-  {
-    orientation,
-    size,
-    color,
-    reverse
-  },
-  useUi("timeline", uiProp),
-  className
-)
+const classes = timelineTheme(Astro.props)
 
 const activeVal = modelValue !== undefined ? modelValue : defaultValue
 
@@ -44,7 +24,7 @@ function getItemValue(item: TimelineItem, index: number) {
   return item[valueKey] !== undefined ? item[valueKey] : index
 }
 
-function getItemState(item: TimelineItem, index: number): "active" | "completed" | undefined {
+function getItemState(_item: TimelineItem, index: number): "active" | "completed" | undefined {
   if (activeVal === undefined) return undefined
 
   let currentIndex = -1
@@ -70,15 +50,15 @@ function getItemState(item: TimelineItem, index: number): "active" | "completed"
   }
 }
 
-function getSlotName(item: TimelineItem, slotType: string): string {
-  return item.slot ? `${item.slot}-${slotType}` : slotType
+function getSlotName(item: TimelineItem, base: string) {
+  return item.slot ? `${item.slot}-${base}` : base
 }
 ---
 
 <Component
-  data-orientation={orientation}
   data-slot="root"
   class={classes.root}
+  data-orientation={orientation}
   {...rest}
 >
   {items && items.length > 0 ? (
@@ -101,12 +81,12 @@ function getSlotName(item: TimelineItem, slotType: string): string {
       return (
         <div
           data-slot="item"
-          class={cx(classes.item, item.ui?.item, item.class)}
+          class:list={[classes.item, item.ui?.item, item.class]}
           data-state={state}
         >
           <div
             data-slot="container"
-            class={cx(classes.container, item.ui?.container)}
+            class:list={[classes.container, item.ui?.container]}
           >
             <RLAAvatar
               size={size as any}
@@ -114,12 +94,12 @@ function getSlotName(item: TimelineItem, slotType: string): string {
               alt={item.avatar?.alt}
               {...(typeof item.avatar === "object" ? item.avatar : {})}
               data-slot="indicator"
-              class={cx(classes.indicator, item.ui?.indicator)}
+              class:list={[classes.indicator, item.ui?.indicator]}
               ui={{ icon: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted", fallback: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted" }}
             >
               {hasCustomIndicator ? (
-                <slot name={itemIndicatorSlot} item={item}>
-                  <slot name="indicator" item={item} />
+                <slot name={itemIndicatorSlot}>
+                  <slot name="indicator" />
                 </slot>
               ) : item.icon ? (
                 <RLAIcon name={item.icon} class="text-inherit" />
@@ -129,7 +109,7 @@ function getSlotName(item: TimelineItem, slotType: string): string {
             {!isLast && (
               <div
                 data-slot="separator"
-                class={cx(classes.separator, item.ui?.separator)}
+                class:list={[classes.separator, item.ui?.separator]}
                 data-orientation={orientation}
               />
             )}
@@ -137,21 +117,21 @@ function getSlotName(item: TimelineItem, slotType: string): string {
 
           <div
             data-slot="wrapper"
-            class={cx(classes.wrapper, item.ui?.wrapper)}
+            class:list={[classes.wrapper, item.ui?.wrapper]}
           >
             {hasCustomWrapper ? (
-              <slot name={itemWrapperSlot} item={item}>
-                <slot name="wrapper" item={item} />
+              <slot name={itemWrapperSlot}>
+                <slot name="wrapper" />
               </slot>
             ) : (
               <>
                 {(item.date || hasCustomDate) && (
                   <div
                     data-slot="date"
-                    class={cx(classes.date, item.ui?.date)}
+                    class:list={[classes.date, item.ui?.date]}
                   >
-                    <slot name={itemDateSlot} item={item}>
-                      <slot name="date" item={item}>
+                    <slot name={itemDateSlot}>
+                      <slot name="date">
                         {item.date}
                       </slot>
                     </slot>
@@ -161,10 +141,10 @@ function getSlotName(item: TimelineItem, slotType: string): string {
                 {(item.title || hasCustomTitle) && (
                   <div
                     data-slot="title"
-                    class={cx(classes.title, item.ui?.title)}
+                    class:list={[classes.title, item.ui?.title]}
                   >
-                    <slot name={itemTitleSlot} item={item}>
-                      <slot name="title" item={item}>
+                    <slot name={itemTitleSlot}>
+                      <slot name="title">
                         {item.title}
                       </slot>
                     </slot>
@@ -174,10 +154,10 @@ function getSlotName(item: TimelineItem, slotType: string): string {
                 {(item.description || hasCustomDescription) && (
                   <div
                     data-slot="description"
-                    class={cx(classes.description, item.ui?.description)}
+                    class:list={[classes.description, item.ui?.description]}
                   >
-                    <slot name={itemDescriptionSlot} item={item}>
-                      <slot name="description" item={item}>
+                    <slot name={itemDescriptionSlot}>
+                      <slot name="description">
                         {item.description}
                       </slot>
                     </slot>