@rimelight/ui 0.0.41 → 0.0.43

package/src/components/post/post.theme.ts

@@ -1,53 +1,50 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPostTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "imageWrapper",
-      "image",
-      "content",
-      "title",
-      "description",
-      "badge",
-      "date",
-      "footer"
-    ],
-    base: {
-      root: "group relative flex overflow-hidden transition-all duration-300",
-      imageWrapper: "relative overflow-hidden aspect-video",
-      image: "absolute inset-0 w-full h-full object-cover transition-transform duration-500",
-      content: "flex-1 p-4",
-      title: "font-bold text-xl line-clamp-2",
-      description: "text-neutral-500 text-sm mt-1 line-clamp-3",
-      date: "text-xs text-neutral-400 mt-2",
-      footer: "p-4 border-t border-neutral-100"
-    },
-    variants: {
-      orientation: {
-        vertical: {
-          root: "flex-col"
-        },
-        horizontal: {
-          root: "flex-col md:flex-row",
-          imageWrapper: "w-full md:w-80 md:shrink-0 md:aspect-auto"
-        }
+export const postTheme = defineTheme("post", {
+  slots: [
+    "root",
+    "imageWrapper",
+    "image",
+    "content",
+    "title",
+    "description",
+    "badge",
+    "date",
+    "footer"
+  ],
+  base: {
+    root: "group relative flex overflow-hidden transition-all duration-300",
+    imageWrapper: "relative overflow-hidden aspect-video",
+    image: "absolute inset-0 w-full h-full object-cover transition-transform duration-500",
+    content: "flex-1 p-4",
+    title: "font-bold text-xl line-clamp-2",
+    description: "text-neutral-500 text-sm mt-1 line-clamp-3",
+    date: "text-xs text-neutral-400 mt-2",
+    footer: "p-4 border-t border-neutral-100"
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: "flex-col"
       },
-      variant: {
-        soft: {
-          root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
-          image: "group-hover:scale-105"
-        },
-        ghost: {
-          root: "bg-transparent",
-          image: "rounded-xl group-hover:opacity-90"
-        }
+      horizontal: {
+        root: "flex-col md:flex-row",
+        imageWrapper: "w-full md:w-80 md:shrink-0 md:aspect-auto"
       }
     },
-    defaultVariants: {
-      orientation: "vertical",
-      variant: "soft"
+    variant: {
+      soft: {
+        root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
+        image: "group-hover:scale-105"
+      },
+      ghost: {
+        root: "bg-transparent",
+        image: "rounded-xl group-hover:opacity-90"
+      }
     }
-  })
-
-export default createPostTheme()
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "soft"
+  }
+})

package/src/components/pricing-plan/RLAPricingPlan.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PricingPlanProps } from "./pricing-plan"
-import pricingPlanTheme from "./pricing-plan.theme"
-
-
-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 />
+---
+import { pricingPlanTheme } from "./pricing-plan.theme"
+
+
+
+const classes = pricingPlanTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/pricing-plan/pricing-plan.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPricingPlanTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createPricingPlanTheme()
+export const pricingPlanTheme = defineTheme("pricing-plan", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/pricing-table/RLAPricingTable.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PricingTableProps } from "./pricing-table"
-import pricingTableTheme from "./pricing-table.theme"
-
-
-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 />
+---
+import { pricingTableTheme } from "./pricing-table.theme"
+
+
+
+const classes = pricingTableTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/pricing-table/pricing-table.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPricingTableTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createPricingTableTheme()
+export const pricingTableTheme = defineTheme("pricing-table", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/progress/RLAProgress.astro

@@ -1,30 +1,15 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ProgressProps } from "./progress"
-import { resolveTheme } from "../../utils/resolveTheme"
-import progressThemeDefault, { createProgressTheme } from "./progress.theme"
-const progressTheme = resolveTheme(progressThemeDefault, createProgressTheme)
+import { progressTheme } from "./progress.theme"
 
-const progress = scv(progressTheme)
 
 const {
   value = 0,
   max = 100,
-  color = "primary",
-  size = "md",
-  theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as ProgressProps
 
-const classes = resolveClasses(progress, {
-  color,
-  size,
-  theme
-}, useUi("progress", uiProp), className)
+const classes = progressTheme(Astro.props)
 
 const percentage = Math.min(100, Math.max(0, (value / max) * 100))
 const id = `progress-${Math.random().toString(36).substring(2, 9)}`

package/src/components/progress/progress.theme.ts

@@ -1,37 +1,25 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createProgressTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "indicator"],
-    base: {
-      root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
-      indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
+export const progressTheme = defineTheme("progress", {
+  slots: ["root", "indicator"],
+  base: {
+    root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
+    indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out bg-[var(--rl-bg)]"
+  },
+  variants: {
+    color: "auto",
+    size: {
+      sm: { root: "h-1.5" },
+      md: { root: "h-3" },
+      lg: { root: "h-5" }
     },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            indicator: `bg-[var(--rl-bg)]`
-          }
-        ])
-      ),
-      size: {
-        sm: { root: "h-1.5" },
-        md: { root: "h-3" },
-        lg: { root: "h-5" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary",
-      size: "md"
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
     }
-  })
-
-export default createProgressTheme()
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+})

package/src/components/progress/progress.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ProgressProps {
   /**

package/src/components/prose/RLAProse.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ProseProps } from "./prose"
-import proseTheme from "./prose.theme"
-
-
-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 />
+---
+import { proseTheme } from "./prose.theme"
+
+
+
+const classes = proseTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/prose/prose.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createProseTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createProseTheme()
+export const proseTheme = defineTheme("prose", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/qr-code/RLAQrCode.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { QrCodeProps } from "./qr-code"
-import qrCodeTheme from "./qr-code.theme"
-
-
-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 />
+---
+import { qrCodeTheme } from "./qr-code.theme"
+
+
+
+const classes = qrCodeTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/qr-code/qr-code.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createQrCodeTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createQrCodeTheme()
+export const qrCodeTheme = defineTheme("qr-code", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/quote/quote.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createQuoteTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createQuoteTheme()
+export const quoteTheme = defineTheme("quote", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/radio-group/RLARadioGroup.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { RadioGroupProps } from "./radio-group"
-import radioGroupTheme from "./radio-group.theme"
-
-
-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 />
+---
+import { radioGroupTheme } from "./radio-group.theme"
+
+
+
+const classes = radioGroupTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/radio-group/radio-group.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createRadioGroupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createRadioGroupTheme()
+export const radioGroupTheme = defineTheme("radio-group", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/rating/RLARating.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { RatingProps } from "./rating"
-import ratingTheme from "./rating.theme"
-
-
-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 />
+---
+import { ratingTheme } from "./rating.theme"
+
+
+
+const classes = ratingTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/rating/rating.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createRatingTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createRatingTheme()
+export const ratingTheme = defineTheme("rating", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/scroll-area/RLAScrollArea.astro

@@ -1,25 +1,17 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ScrollAreaProps } from "./scroll-area"
-import scrollAreaTheme from "./scroll-area.theme"
+import { scrollAreaTheme } from "./scroll-area.theme"
 
 
-const scrollArea = scv(scrollAreaTheme)
 
 const {
   orientation = "vertical",
   scrollHideDelay = 600,
   height,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as ScrollAreaProps
 
-const classes = resolveClasses(scrollArea, {
-  orientation
-}, useUi("scrollArea", uiProp), className)
+const classes = scrollAreaTheme(Astro.props)
 
 const heightStyle = height
   ? `height:${typeof height === "number" ? `${height}px` : height}`

package/src/components/scroll-area/scroll-area.theme.ts

@@ -1,26 +1,23 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createScrollAreaTheme = () =>
-  defineTheme({
-    slots: ["root", "viewport", "scrollbar", "thumb"],
-    base: {
-      root: "relative overflow-hidden w-full",
-      viewport:
-        "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-      scrollbar:
-        "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
-      thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground/45"
-    },
-    variants: {
-      orientation: {
-        vertical: { scrollbar: "right-0 top-0 bottom-0 w-2.5 flex-col" },
-        horizontal: { scrollbar: "bottom-0 left-0 right-0 h-2.5 flex-row" },
-        both: { scrollbar: "" }
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical"
+export const scrollAreaTheme = defineTheme("scroll-area", {
+  slots: ["root", "viewport", "scrollbar", "thumb"],
+  base: {
+    root: "relative overflow-hidden w-full",
+    viewport:
+      "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+    scrollbar:
+      "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
+    thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted/45"
+  },
+  variants: {
+    orientation: {
+      vertical: { scrollbar: "right-0 top-0 bottom-0 w-2.5 flex-col" },
+      horizontal: { scrollbar: "bottom-0 left-0 right-0 h-2.5 flex-row" },
+      both: { scrollbar: "" }
     }
-  })
-
-export default createScrollAreaTheme()
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+})