@rimelight/ui 0.0.37 → 0.0.39

package/src/components/tabs/tabs.theme.ts

@@ -0,0 +1,80 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createTabsTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "indicator", "trigger", "leadingIcon", "leadingAvatar", "label", "trailingBadge", "content"],
+    base: {
+      root: "flex gap-2 w-full",
+      list: "relative flex p-1 group items-center min-w-0",
+      indicator: "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
+      trigger:
+        "group relative inline-flex items-center justify-center min-w-0 whitespace-nowrap font-medium transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-none data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground",
+      leadingIcon: "shrink-0",
+      leadingAvatar: "shrink-0",
+      label: "truncate",
+      trailingBadge: "shrink-0",
+      content: "w-full focus-visible:outline-none"
+    },
+    variants: {
+      variant: {
+        pill: {
+          list: "bg-muted/60 dark:bg-muted/40 rounded-lg p-1",
+          trigger: "grow rounded-md data-[state=active]:text-foreground z-10",
+          indicator: "bg-background rounded-md shadow-xs top-1 bottom-1 h-[calc(100%-8px)]"
+        },
+        underline: {
+          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
+          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
+        },
+        link: {
+          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
+          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
+        }
+      },
+      orientation: {
+        horizontal: {
+          root: "flex-col",
+          list: "w-full",
+          indicator: "",
+          trigger: "justify-center"
+        },
+        vertical: {
+          root: "flex-row gap-6",
+          list: "flex-col items-stretch w-48 border-r border-border p-0",
+          trigger: "justify-start text-left"
+        }
+      },
+      size: {
+        xs: {
+          trigger: "px-2 py-1 text-xs gap-1",
+          leadingIcon: "size-3.5"
+        },
+        sm: {
+          trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+          leadingIcon: "size-4"
+        },
+        md: {
+          trigger: "px-3 py-1.5 text-sm gap-1.5",
+          leadingIcon: "size-4"
+        },
+        lg: {
+          trigger: "px-3.5 py-2 text-sm gap-2",
+          leadingIcon: "size-5"
+        },
+        xl: {
+          trigger: "px-4 py-2.5 text-base gap-2",
+          leadingIcon: "size-5"
+        }
+      }
+    },
+    defaultVariants: {
+      variant: "pill",
+      orientation: "horizontal",
+      size: "md"
+    }
+  })
+
+export default createTabsTheme()
+

package/src/components/tabs/tabs.ts

@@ -0,0 +1,79 @@
+import type { ThemeColor } from "../../types/component"
+
+export interface TabItem {
+  label?: string
+  value?: string
+  icon?: string
+  badge?: string | number | { label?: string | number; color?: string; variant?: string }
+  content?: string
+  disabled?: boolean
+  slot?: string
+  class?: any
+  ui?: any
+  [key: string]: any
+}
+
+export interface TabsProps<T extends TabItem = TabItem> {
+  /**
+   * The tab items.
+   */
+  items?: T[]
+  /**
+   * Active tab value.
+   */
+  value?: string
+  /**
+   * Default active tab value when uncontrolled.
+   */
+  defaultValue?: string
+  /**
+   * Tab variant.
+   * @defaultValue 'pill'
+   */
+  variant?: "pill" | "underline" | "link" | "solid" | "pills"
+  /**
+   * Layout orientation.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: "horizontal" | "vertical"
+  /**
+   * Size scale.
+   * @defaultValue 'md'
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Whether to render content panels automatically. Set to false for tab bar only.
+   * @defaultValue true
+   */
+  content?: boolean
+  /**
+   * Unmount hidden tab panels from DOM. Defaults to true.
+   * If false, panel is hidden via CSS/attribute.
+   * @defaultValue true
+   */
+  unmountOnHide?: boolean
+  /**
+   * Property key for value on item object.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  /**
+   * Property key for label on item object.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}
+

package/src/components/textarea/RLATextarea.astro

@@ -0,0 +1,43 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { TextareaProps } from "./textarea"
+import textareaTheme from "./textarea.theme"
+
+
+const textarea = scv(textareaTheme)
+
+const {
+  value = "",
+  placeholder,
+  disabled = false,
+  readonly = false,
+  name,
+  required = false,
+  rows = 4,
+  error = false,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TextareaProps
+
+const classes = resolveClasses(textarea, {
+  size,
+  error: !!error
+}, useUi("textarea", uiProp), className);
+---
+<div class={classes.root} data-slot="root">
+  <textarea
+    class={classes.textarea}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    name={name}
+    required={required}
+    rows={rows}
+    {...rest}
+  >{value}</textarea>
+</div>

package/src/components/textarea/RLVTextarea.vue

@@ -0,0 +1,52 @@
+<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"
+
+defineOptions({ name: "RLVTextarea" })
+
+const attrs = useAttrs()
+const textareaScv = scv(textareaThemeDefault)
+
+const modelValue = defineModel<string>()
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  size: "md",
+  color: "neutral",
+  rows: 3,
+  disabled: false,
+  readonly: false
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    textareaScv,
+    {
+      size: props.size,
+      color: props.color,
+      error: !!props.error,
+      disabled: props.disabled
+    },
+    useUi("textarea", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <textarea
+    v-bind="attrs"
+    v-model="modelValue"
+    :name="name"
+    :rows="rows"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :required="required"
+    :class="resolvedClasses.root"
+    data-slot="root"
+  />
+</template>

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

@@ -0,0 +1,27 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+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]"
+    },
+    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
+    }
+  })
+
+export default createTextareaTheme()

package/src/components/textarea/textarea.ts

@@ -0,0 +1,52 @@
+import type { ThemeColor } from "../../types/component"
+export interface TextareaProps {
+  /**
+   * The text value.
+   */
+  value?: string
+  /**
+   * Placeholder text.
+   */
+  placeholder?: string
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Readonly state.
+   */
+  readonly?: boolean
+  /**
+   * Name for forms.
+   */
+  name?: string
+  /**
+   * Required field state.
+   */
+  required?: boolean
+  /**
+   * Row count.
+   */
+  rows?: number
+  /**
+   * Error state.
+   */
+  error?: boolean | 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/theme-selector/RLAThemeSelector.astro

@@ -0,0 +1,106 @@
+---
+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 RLAButton from "../button/RLAButton.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const themeSelector = scv(themeSelectorTheme)
+
+const {
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as ThemeSelectorProps
+
+const classes = resolveClasses(themeSelector, {
+    size
+}, useUi("themeSelector", uiProp), className);
+---
+
+<rla-theme-selector {...rest}>
+    <RLAButton
+            size={size}
+            class:list={["theme-toggle-button", classes.root]}
+            variant="ghost"
+            square
+            aria-label="Toggle theme"
+    >
+        <RLAIcon name="sun" class={classes.sun} />
+        <RLAIcon name="moon" class={classes.moon} />
+    </RLAButton>
+</rla-theme-selector>
+
+<script>
+    import { defineShortcuts } from "../../utils/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');
+        }
+    }
+
+    applyStoredTheme();
+
+    function onToggle() {
+        const willBeDark = !document.documentElement.classList.contains('dark');
+        document.documentElement.classList.toggle('dark',  willBeDark);
+        document.documentElement.classList.toggle('light', !willBeDark);
+        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());
+        });
+    }
+
+    class RLAThemeSelector extends HTMLElement {
+        private buttonCleanup: (() => void) | null = null;
+
+        connectedCallback() {
+            this.style.display = 'contents';
+            const button = this.querySelector('.theme-toggle-button');
+            if (!button) return;
+
+            const isDark = document.documentElement.classList.contains('dark');
+            button.setAttribute('data-state', isDark ? 'on' : 'off');
+            button.setAttribute('aria-pressed', isDark.toString());
+
+            button.addEventListener('click', onToggle);
+
+            const cleanupShortcut = defineShortcuts({
+                meta_alt_t: {
+                    handler: onToggle,
+                    label: "Toggle Theme",
+                    description: "Switch between light and dark theme mode",
+                    category: "system"
+                }
+            });
+
+            this.buttonCleanup = () => {
+                button.removeEventListener('click', onToggle);
+                cleanupShortcut();
+            };
+        }
+
+        disconnectedCallback() {
+            if (this.buttonCleanup) {
+                this.buttonCleanup();
+                this.buttonCleanup = null;
+            }
+        }
+    }
+
+    if (!customElements.get('rla-theme-selector')) {
+        customElements.define('rla-theme-selector', RLAThemeSelector);
+    }
+</script>

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

@@ -0,0 +1,15 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+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()

package/src/components/timeline/RLATimeline.astro

@@ -0,0 +1,195 @@
+---
+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 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 activeVal = modelValue !== undefined ? modelValue : defaultValue
+
+function getItemValue(item: TimelineItem, index: number) {
+  return item[valueKey] !== undefined ? item[valueKey] : index
+}
+
+function getItemState(item: TimelineItem, index: number): "active" | "completed" | undefined {
+  if (activeVal === undefined) return undefined
+
+  let currentIndex = -1
+  if (items && items.length > 0) {
+    if (typeof activeVal === "string") {
+      currentIndex = items.findIndex((i) => getItemValue(i, items.indexOf(i)) === activeVal)
+    } else if (typeof activeVal === "number") {
+      if (reverse) {
+        currentIndex = items.length - 1 - activeVal
+      } else {
+        currentIndex = activeVal
+      }
+    }
+  }
+
+  if (currentIndex === -1) return undefined
+  if (index === currentIndex) return "active"
+
+  if (reverse) {
+    return index > currentIndex ? "completed" : undefined
+  } else {
+    return index < currentIndex ? "completed" : undefined
+  }
+}
+
+function getSlotName(item: TimelineItem, slotType: string): string {
+  return item.slot ? `${item.slot}-${slotType}` : slotType
+}
+---
+
+<Component
+  data-orientation={orientation}
+  data-slot="root"
+  class={classes.root}
+  {...rest}
+>
+  {items && items.length > 0 ? (
+    items.map((item, index) => {
+      const state = getItemState(item, index)
+      const isLast = index === items.length - 1
+
+      const itemIndicatorSlot = getSlotName(item, "indicator")
+      const itemWrapperSlot = getSlotName(item, "wrapper")
+      const itemDateSlot = getSlotName(item, "date")
+      const itemTitleSlot = getSlotName(item, "title")
+      const itemDescriptionSlot = getSlotName(item, "description")
+
+      const hasCustomIndicator = Astro.slots.has(itemIndicatorSlot) || (item.slot && Astro.slots.has("indicator"))
+      const hasCustomWrapper = Astro.slots.has(itemWrapperSlot) || (item.slot && Astro.slots.has("wrapper"))
+      const hasCustomDate = Astro.slots.has(itemDateSlot) || (item.slot && Astro.slots.has("date"))
+      const hasCustomTitle = Astro.slots.has(itemTitleSlot) || (item.slot && Astro.slots.has("title"))
+      const hasCustomDescription = Astro.slots.has(itemDescriptionSlot) || (item.slot && Astro.slots.has("description"))
+
+      return (
+        <div
+          data-slot="item"
+          class={cx(classes.item, item.ui?.item, item.class)}
+          data-state={state}
+        >
+          <div
+            data-slot="container"
+            class={cx(classes.container, item.ui?.container)}
+          >
+            <RLAAvatar
+              size={size as any}
+              src={item.avatar?.src}
+              alt={item.avatar?.alt}
+              {...(typeof item.avatar === "object" ? item.avatar : {})}
+              data-slot="indicator"
+              class={cx(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>
+              ) : item.icon ? (
+                <RLAIcon name={item.icon} class="text-inherit" />
+              ) : null}
+            </RLAAvatar>
+
+            {!isLast && (
+              <div
+                data-slot="separator"
+                class={cx(classes.separator, item.ui?.separator)}
+                data-orientation={orientation}
+              />
+            )}
+          </div>
+
+          <div
+            data-slot="wrapper"
+            class={cx(classes.wrapper, item.ui?.wrapper)}
+          >
+            {hasCustomWrapper ? (
+              <slot name={itemWrapperSlot} item={item}>
+                <slot name="wrapper" item={item} />
+              </slot>
+            ) : (
+              <>
+                {(item.date || hasCustomDate) && (
+                  <div
+                    data-slot="date"
+                    class={cx(classes.date, item.ui?.date)}
+                  >
+                    <slot name={itemDateSlot} item={item}>
+                      <slot name="date" item={item}>
+                        {item.date}
+                      </slot>
+                    </slot>
+                  </div>
+                )}
+
+                {(item.title || hasCustomTitle) && (
+                  <div
+                    data-slot="title"
+                    class={cx(classes.title, item.ui?.title)}
+                  >
+                    <slot name={itemTitleSlot} item={item}>
+                      <slot name="title" item={item}>
+                        {item.title}
+                      </slot>
+                    </slot>
+                  </div>
+                )}
+
+                {(item.description || hasCustomDescription) && (
+                  <div
+                    data-slot="description"
+                    class={cx(classes.description, item.ui?.description)}
+                  >
+                    <slot name={itemDescriptionSlot} item={item}>
+                      <slot name="description" item={item}>
+                        {item.description}
+                      </slot>
+                    </slot>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )
+    })
+  ) : (
+    <slot />
+  )}
+</Component>