@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLASpeedDial.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SpeedDialProps } from "../../types"
-import speedDialThemeDefault from "../../themes/speed-dial.theme"
-
-const speedDial = scv(speedDialThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SpeedDialProps
-
-const classes = resolveClasses(speedDial, {}, useUi("speedDial", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SpeedDialProps } from "../../types"
+import speedDialThemeDefault, { createSpeedDialTheme } from "../../themes/speed-dial.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const speedDialTheme = uiConfig.colors ? createSpeedDialTheme() : speedDialThemeDefault
+
+const speedDial = scv(speedDialTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SpeedDialProps
+
+const classes = resolveClasses(speedDial, {}, useUi("speedDial", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLASplitter.astro

@@ -24,10 +24,11 @@ const total = defaultSizes.reduce((s, v) => s + v, 0)
 const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
 
 const panelCount = sizes.length
+const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
 ---
 
 <div
-  class={classes.root}
+  class:list={[classes.root, id]}
   data-slot="root"
   data-resizable
   data-direction={direction}
@@ -39,7 +40,6 @@ const panelCount = sizes.length
         class={classes.panel}
         data-slot="panel"
         data-resizable-panel={i}
-        style={direction === "horizontal" ? `width:${size}%` : `height:${size}%`}
       >
         <slot name={`panel-${i}`}>
           {i === 0
@@ -175,3 +175,15 @@ const panelCount = sizes.length
     });
   });
 </script>
+
+<style is:inline set:html={`
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
+
+  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
+`} />

package/src/components/astro/RLASpoiler.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SpoilerProps } from "../../types"
-import spoilerThemeDefault from "../../themes/spoiler.theme"
-
-const spoiler = scv(spoilerThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SpoilerProps
-
-const classes = resolveClasses(spoiler, {}, useUi("spoiler", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SpoilerProps } from "../../types"
+import spoilerThemeDefault, { createSpoilerTheme } from "../../themes/spoiler.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const spoilerTheme = uiConfig.colors ? createSpoilerTheme() : spoilerThemeDefault
+
+const spoiler = scv(spoilerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SpoilerProps
+
+const classes = resolveClasses(spoiler, {}, useUi("spoiler", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAStepper.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { StepperProps } from "../../types"
-import stepperThemeDefault from "../../themes/stepper.theme"
-
-const stepper = scv(stepperThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as StepperProps
-
-const classes = resolveClasses(stepper, {}, useUi("stepper", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { StepperProps } from "../../types"
+import stepperThemeDefault, { createStepperTheme } from "../../themes/stepper.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const stepperTheme = uiConfig.colors ? createStepperTheme() : stepperThemeDefault
+
+const stepper = scv(stepperTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as StepperProps
+
+const classes = resolveClasses(stepper, {}, useUi("stepper", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLASteps.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  class?: string
+}
+
+const { class: className = "", ...rest } = Astro.props
+---
+<div class:list={["rl-steps-container", className]} {...rest}>
+  <slot />
+</div>
+
+<style is:global>
+  .rl-steps-container ol {
+    list-style: none;
+    counter-reset: steps-counter 0;
+    padding-inline-start: 0;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .rl-steps-container ol > li {
+    counter-increment: steps-counter;
+    position: relative;
+    padding-inline-start: 3rem;
+    padding-bottom: 1.5rem;
+    min-height: 2.5rem;
+  }
+
+  .rl-steps-container ol > li + li {
+    margin-top: 0;
+  }
+
+  /* Custom bullet */
+  .rl-steps-container ol > li::before {
+    content: counter(steps-counter);
+    position: absolute;
+    top: 0.125rem;
+    left: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    line-height: 1.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-align: center;
+    color: var(--primary-foreground, #fff);
+    background-color: var(--primary, #3b82f6);
+    border-radius: 9999px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+
+  /* Vertical guideline */
+  .rl-steps-container ol > li::after {
+    content: '';
+    position: absolute;
+    top: 2rem;
+    bottom: 0.125rem;
+    left: 0.875rem;
+    width: 2px;
+    background-color: var(--border, #e5e7eb);
+  }
+
+  /* Hide guideline on the last item */
+  .rl-steps-container ol > li:last-child::after {
+    display: none;
+  }
+
+  /* Style headings or paragraphs inside list items nicely */
+  .rl-steps-container ol > li > :first-child {
+    margin-top: 0;
+  }
+</style>

package/src/components/astro/RLAStickySurface.astro

@@ -1,27 +1,38 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { StickySurfaceProps } from "../../types"
-import stickySurfaceTheme from "../../themes/sticky-surface.theme"
-
-const stickySurface = scv(stickySurfaceTheme)
-
-const {
-  offsetTop = 0,
-  zIndex = 10,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as StickySurfaceProps
-
-const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
-const topOffset = `${offsetTop}px`
----
-<div
-  class={classes.root}
-  data-slot="root"
-  style={{ top: topOffset, zIndex }}
-  {...rest}
->
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { StickySurfaceProps } from "../../types"
+import stickySurfaceThemeDefault, { createStickySurfaceTheme } from "../../themes/sticky-surface.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const stickySurfaceTheme = uiConfig.colors ? createStickySurfaceTheme() : stickySurfaceThemeDefault
+
+const stickySurface = scv(stickySurfaceTheme)
+
+const {
+  offsetTop = 0,
+  zIndex = 10,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as StickySurfaceProps
+
+const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
+const topOffset = `${offsetTop}px`
+const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
+---
+<div
+  class:list={[classes.root, id]}
+  data-slot="root"
+  {...rest}
+>
+  <slot />
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    top: ${topOffset} !important;
+    z-index: ${zIndex} !important;
+  }
+`} />

package/src/components/astro/RLATableOfContents.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TableOfContentsProps } from "../../types"
-import tableOfContentsThemeDefault from "../../themes/table-of-contents.theme"
-
-const tableOfContents = scv(tableOfContentsThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TableOfContentsProps
-
-const classes = resolveClasses(tableOfContents, {}, useUi("tableOfContents", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TableOfContentsProps } from "../../types"
+import tableOfContentsThemeDefault, { createTableOfContentsTheme } from "../../themes/table-of-contents.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const tableOfContentsTheme = uiConfig.colors ? createTableOfContentsTheme() : tableOfContentsThemeDefault
+
+const tableOfContents = scv(tableOfContentsTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TableOfContentsProps
+
+const classes = resolveClasses(tableOfContents, {}, useUi("tableOfContents", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLATabs.astro

@@ -1,92 +1,133 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TabsProps } from "../../types"
-import tabsThemeDefault, { createTabsTheme } from "../../themes/tabs.theme"
-
-const tabsTheme = tabsThemeDefault
-const tabs = scv(tabsTheme)
-
-const {
-  items = [],
-  value = "",
-  variant = "solid",
-  orientation = "horizontal",
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TabsProps
-
-const classes = resolveClasses(tabs, {
-  variant,
-  orientation,
-  size
-}, useUi("tabs", uiProp), className);
-
-const initialValue = value || (items.length > 0 ? items[0].value : "")
----
-<div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue} {...rest}>
-  <div class={classes.list} data-slot="list" role="tablist">
-    {items.map((item) => {
-      const active = item.value === initialValue
-      return (
-        <button
-          type="button"
-          class={classes.trigger}
-          data-slot="trigger"
-          role="tab"
-          data-value={item.value}
-          data-state={active ? "active" : "inactive"}
-          disabled={item.disabled}
-        >
-          {item.icon && <span class={item.icon + " mr-2"} />}
-          {item.label}
-        </button>
-      )
-    })}
-  </div>
-  <div class="flex-1">
-    <slot>
-      {items.map(item => {
-        const active = item.value === initialValue
-        return (
-          <div
-            class={classes.content + (active ? "" : " hidden")}
-            data-slot="content"
-            role="tabpanel"
-            data-value={item.value}
-          >
-            {item.content}
-          </div>
-        )
-      })}
-    </slot>
-  </div>
-</div>
-
-<script>
-  document.querySelectorAll("[data-tabs-container]").forEach(container => {
-    const triggers = container.querySelectorAll("[role=tab]");
-    const panels = container.querySelectorAll("[role=tabpanel]");
-
-    triggers.forEach(trigger => {
-      trigger.addEventListener("click", () => {
-        const targetValue = (trigger as HTMLButtonElement).dataset.value;
-
-        triggers.forEach(t => {
-          t.setAttribute("data-state", t.dataset.value === targetValue ? "active" : "inactive");
-        });
-
-        panels.forEach(panel => {
-          if ((panel as HTMLElement).dataset.value === targetValue) {
-            panel.classList.remove("hidden");
-          } else {
-            panel.classList.add("hidden");
-          }
-        });
-      });
-    });
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TabsProps } from "../../types"
+import tabsThemeDefault, { createTabsTheme } from "../../themes/tabs.theme"
+
+const tabsTheme = tabsThemeDefault
+const tabs = scv(tabsTheme)
+
+const {
+  items = [],
+  value = "",
+  variant = "solid",
+  orientation = "horizontal",
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TabsProps
+
+const classes = resolveClasses(tabs, {
+  variant,
+  orientation,
+  size
+}, useUi("tabs", uiProp), className);
+
+const initialValue = value || (items.length > 0 ? items[0].value : "")
+---
+<div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue} {...rest}>
+  <div class={classes.list} data-slot="list" role="tablist">
+    {items.map((item) => {
+      const active = item.value === initialValue
+      return (
+        <button
+          type="button"
+          class={classes.trigger}
+          data-slot="trigger"
+          role="tab"
+          data-value={item.value}
+          data-state={active ? "active" : "inactive"}
+          disabled={item.disabled}
+        >
+          {item.icon && <span class={item.icon + " mr-2"} />}
+          {item.label}
+        </button>
+      )
+    })}
+  </div>
+  <div class="flex-1">
+    <slot>
+      {items.map(item => {
+        const active = item.value === initialValue
+        return (
+          <div
+            class={classes.content + (active ? "" : " hidden")}
+            data-slot="content"
+            role="tabpanel"
+            data-value={item.value}
+          >
+            {item.content}
+          </div>
+        )
+      })}
+    </slot>
+  </div>
+</div>
+
+<script>
+  function initTabs() {
+    document.querySelectorAll("[data-tabs-container]").forEach(container => {
+      const containerValue = (container as HTMLElement).dataset.value;
+      const triggers = container.querySelectorAll("[role=tab]");
+      const panels = container.querySelectorAll("[role=tabpanel]");
+
+      triggers.forEach(trigger => {
+        const val = (trigger as HTMLButtonElement).dataset.value;
+        trigger.setAttribute("data-state", val === containerValue ? "active" : "inactive");
+      });
+
+      panels.forEach(panel => {
+        const val = (panel as HTMLElement).dataset.value;
+        if (val === containerValue) {
+          panel.classList.remove("hidden");
+          (panel as HTMLElement).style.display = "";
+        } else {
+          panel.classList.add("hidden");
+          (panel as HTMLElement).style.display = "none";
+        }
+      });
+    });
+  }
+
+  // Setup click listeners
+  function setupTabsListeners() {
+    document.querySelectorAll("[data-tabs-container]").forEach(container => {
+      const triggers = container.querySelectorAll("[role=tab]");
+      const panels = container.querySelectorAll("[role=tabpanel]");
+
+      triggers.forEach(trigger => {
+        // Prevent duplicate listener registration
+        if ((trigger as any).__tabsListenerAttached) return;
+        (trigger as any).__tabsListenerAttached = true;
+
+        trigger.addEventListener("click", () => {
+          const targetValue = (trigger as HTMLButtonElement).dataset.value;
+
+          triggers.forEach(t => {
+            t.setAttribute("data-state", t.dataset.value === targetValue ? "active" : "inactive");
+          });
+
+          panels.forEach(panel => {
+            if ((panel as HTMLElement).dataset.value === targetValue) {
+              panel.classList.remove("hidden");
+              (panel as HTMLElement).style.display = "";
+            } else {
+              panel.classList.add("hidden");
+              (panel as HTMLElement).style.display = "none";
+            }
+          });
+        });
+      });
+    });
+  }
+
+  initTabs();
+  setupTabsListeners();
+
+  document.addEventListener("astro:after-swap", () => {
+    initTabs();
+    setupTabsListeners();
+  });
+</script>

package/src/components/astro/RLAThemeSelector.astro

@@ -2,9 +2,13 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ThemeSelectorProps } from "../../types"
-import themeSelectorTheme from "../../themes/theme-selector.theme"
+import themeSelectorThemeDefault, { createThemeSelectorTheme } from "../../themes/theme-selector.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
 import RLAButton from "./RLAButton.astro"
 
+const uiConfig = getUIConfig()
+const themeSelectorTheme = uiConfig.colors ? createThemeSelectorTheme() : themeSelectorThemeDefault
+
 const themeSelector = scv(themeSelectorTheme)
 
 const {

package/src/components/astro/RLATimeline.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TimelineProps } from "../../types"
-import timelineThemeDefault from "../../themes/timeline.theme"
-
-const timeline = scv(timelineThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TimelineProps
-
-const classes = resolveClasses(timeline, {}, useUi("timeline", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TimelineProps } from "../../types"
+import timelineThemeDefault, { createTimelineTheme } from "../../themes/timeline.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const timelineTheme = uiConfig.colors ? createTimelineTheme() : timelineThemeDefault
+
+const timeline = scv(timelineTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TimelineProps
+
+const classes = resolveClasses(timeline, {}, useUi("timeline", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>