@rimelight/ui 0.0.32 → 0.0.33

package/src/components/astro/RLAPricingPlan.astro

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

package/src/components/astro/RLAPricingTable.astro

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

package/src/components/astro/RLAProse.astro

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

package/src/components/astro/RLAQrCode.astro

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

package/src/components/astro/RLARadioGroup.astro

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

package/src/components/astro/RLARating.astro

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

package/src/components/astro/RLASeparator.astro

@@ -1,27 +1,78 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SeparatorProps } from "../../types"
-import separatorTheme from "../../themes/separator.theme"
-
-const separator = scv(separatorTheme)
-
-const {
-  orientation = "horizontal",
-  decorative = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SeparatorProps
-
-const classes = resolveClasses(separator, {
-  orientation
-}, useUi("separator", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role={decorative ? "none" : "separator"}
-  aria-orientation={decorative ? undefined : orientation}
-  {...rest}
-/>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SeparatorProps } from "../../types"
+import separatorThemeDefault, { createSeparatorTheme } from "../../themes/separator.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAAvatar from "./RLAAvatar.astro"
+import { cx } from "css-variants"
+
+const uiConfig = getUIConfig()
+const separatorTheme = uiConfig.colors ? createSeparatorTheme() : separatorThemeDefault
+
+const separator = scv(separatorTheme)
+
+const {
+  orientation = "horizontal",
+  color = "neutral",
+  size = "xs",
+  type = "solid",
+  label,
+  icon,
+  avatar,
+  position = "center",
+  decorative = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SeparatorProps
+
+const classes = resolveClasses(separator, {
+  orientation,
+  color,
+  size,
+  type,
+  position
+}, useUi("separator", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  {...rest}
+>
+  <div class={classes.border} />
+
+  {(label || icon || avatar || Astro.slots.has("default")) && (
+    <>
+      <div class={classes.container} data-slot="container">
+        <slot name="avatar">
+          {avatar && (
+            <RLAAvatar 
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
+              size={classes.avatarSize as any} 
+              class={classes.avatar} 
+              data-slot="avatar" 
+            />
+          )}
+        </slot>
+        
+        <slot name="icon">
+          {icon && (
+            <span class={classes.icon} data-slot="icon">
+              <span class={cx(icon)} aria-hidden="true" />
+            </span>
+          )}
+        </slot>
+
+        <span class={classes.label} data-slot="label">
+          {label}
+          <slot />
+        </span>
+      </div>
+
+      <div class={classes.border} />
+    </>
+  )}
+</div>