@rimelight/ui 0.0.42 → 0.0.44

package/src/components/pagination/pagination.theme.ts

@@ -1,28 +1,24 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPaginationTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "list", "item", "link", "ellipsis"],
-    base: {
-      root: "mx-auto flex w-full justify-center",
-      list: "flex flex-row items-center gap-1",
-      item: "",
-      link: [
-        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all size-9 cursor-pointer border border-border bg-background hover:bg-muted text-foreground decoration-none",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-      ],
-      ellipsis: "flex size-9 items-center justify-center text-muted-foreground"
-    },
-    variants: {
-      active: {
-        true: { link: "border-primary bg-primary text-primary-foreground hover:bg-primary/95" },
-        false: { link: "" }
-      }
-    },
-    defaultVariants: {
-      active: false
+export const paginationTheme = defineTheme("pagination", {
+  slots: ["root", "list", "item", "link", "ellipsis"],
+  base: {
+    root: "mx-auto flex w-full justify-center",
+    list: "flex flex-row items-center gap-1",
+    item: "",
+    link: [
+      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all size-9 cursor-pointer border border-default bg-default hover:bg-muted text-highlighted decoration-none",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+    ],
+    ellipsis: "flex size-9 items-center justify-center text-muted"
+  },
+  variants: {
+    active: {
+      true: { link: "border-primary bg-primary text-neutral-50 hover:bg-primary/95" },
+      false: { link: "" }
     }
-  })
-
-export default createPaginationTheme()
+  },
+  defaultVariants: {
+    active: false
+  }
+})

package/src/components/password/RLAPassword.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PasswordProps } from "./password"
-import passwordTheme from "./password.theme"
-
-
-const password = scv(passwordTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PasswordProps
-
-const classes = resolveClasses(password, {}, useUi("password", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { passwordTheme } from "./password.theme"
+
+
+
+const classes = passwordTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/password/password.theme.ts

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

package/src/components/phone-mockup/RLAPhoneMockup.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PhoneMockupProps } from "./phone-mockup"
-import phoneMockupTheme from "./phone-mockup.theme"
-
-
-const phoneMockup = scv(phoneMockupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PhoneMockupProps
-
-const classes = resolveClasses(phoneMockup, {}, useUi("phoneMockup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { phoneMockupTheme } from "./phone-mockup.theme"
+
+
+
+const classes = phoneMockupTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/phone-mockup/phone-mockup.theme.ts

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

package/src/components/placeholder/RLAPlaceholder.astro

@@ -1,43 +1,32 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PlaceholderProps } from "./placeholder"
-import placeholderTheme from "./placeholder.theme"
-
-
-const placeholder = scv(placeholderTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PlaceholderProps
-
-const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
----
-
-<div class={classes.base} {...rest}>
-  <svg class={classes.svg}>
-    <defs>
-      <pattern
-        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
-        x="0"
-        y="0"
-        width="10"
-        height="10"
-        patternUnits="userSpaceOnUse"
-      >
-        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
-      </pattern>
-    </defs>
-    <rect
-      stroke="none"
-      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
-      width="100%"
-      height="100%"
-    />
-  </svg>
-
-  <slot />
-</div>
+---
+import { placeholderTheme } from "./placeholder.theme"
+
+
+
+const classes = placeholderTheme(Astro.props)
+---
+
+<div class={classes.base} {...Astro.props}>
+  <svg class={classes.svg}>
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+
+  <slot />
+</div>

package/src/components/placeholder/placeholder.theme.ts

@@ -1,15 +1,12 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPlaceholderTheme = () =>
-  defineTheme({
-    slots: ["base", "svg"],
-    base: {
-      base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
-      svg: "absolute inset-0 h-full w-full stroke-primary/10"
-    },
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {}
-  })
-
-export default createPlaceholderTheme()
+export const placeholderTheme = defineTheme("placeholder", {
+  slots: ["base", "svg"],
+  base: {
+    base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
+    svg: "absolute inset-0 h-full w-full stroke-primary/10"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})