@rimelight/ui 0.0.32 → 0.0.33

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,31 @@
----
-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`
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  style={{ top: topOffset, zIndex }}
+  {...rest}
+>
+  <slot />
+</div>

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>

package/src/components/astro/RLATooltip.astro

@@ -1,31 +1,35 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { TooltipProps } from "../../types"
-import tooltipTheme from "../../themes/tooltip.theme"
-
-const tooltip = scv(tooltipTheme)
-
-const {
-  content,
-  placement = "top",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TooltipProps
-
-const classes = resolveClasses(tooltip, {
-  placement
-}, useUi("tooltip", uiProp), className)
----
-<div class={classes.root} data-slot="tooltip-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot />
-  </div>
-
-  <div class={classes.content} data-slot="content" role="tooltip">
-    <slot name="content">
-      {content}
-    </slot>
-  </div>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TooltipProps } from "../../types"
+import tooltipThemeDefault, { createTooltipTheme } from "../../themes/tooltip.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const tooltipTheme = uiConfig.colors ? createTooltipTheme() : tooltipThemeDefault
+
+const tooltip = scv(tooltipTheme)
+
+const {
+  content,
+  placement = "top",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TooltipProps
+
+const classes = resolveClasses(tooltip, {
+  placement
+}, useUi("tooltip", uiProp), className)
+---
+<div class={classes.root} data-slot="tooltip-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot />
+  </div>
+
+  <div class={classes.content} data-slot="content" role="tooltip">
+    <slot name="content">
+      {content}
+    </slot>
+  </div>
+</div>

package/src/components/astro/RLATour.astro

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

package/src/components/astro/RLATree.astro

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