@rimelight/ui 0.0.42 → 0.0.44

package/src/components/button/RLSButton.tsx

@@ -0,0 +1,169 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ButtonProps } from "./button"
+import { buttonTheme } from "./button.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSButtonProps extends ButtonProps {
+  children?: JSX.Element
+  leading?: JSX.Element
+  trailing?: JSX.Element
+  onClick?: (e: MouseEvent) => void
+  type?: "button" | "submit" | "reset"
+}
+
+const RLSButton: Component<RLSButtonProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "variant",
+    "color",
+    "size",
+    "href",
+    "label",
+    "leadingIcon",
+    "trailingIcon",
+    "loading",
+    "loadingAuto",
+    "square",
+    "block",
+    "justify",
+    "active",
+    "activeColor",
+    "activeVariant",
+    "rounded",
+    "theme",
+    "ui",
+    "class",
+    "disabled",
+    "children",
+    "leading",
+    "trailing",
+    "onClick",
+    "type",
+    "external",
+    "externalIcon",
+    "noExternalIcon",
+    "target",
+    "rel",
+    "prefetch",
+    "raw",
+    "ariaLabel",
+    "ariaCurrentValue"
+  ])
+
+  const isLeading = () => !!(props.leadingIcon || props.leading) || !!props.loading
+  const isTrailing = () =>
+    !!(props.trailingIcon || props.trailing) || (!!props.loading && !isLeading())
+
+  const showLeadingIcon = () => {
+    if (props.loading) return "loaderCircle"
+    return props.leadingIcon
+  }
+
+  const showTrailingIcon = () => {
+    if (props.loading) return "loaderCircle"
+    return props.trailingIcon
+  }
+
+  const leadingIconClass = () => (props.loading && isLeading() ? "animate-spin" : "")
+  const trailingIconClass = () => (props.loading && isTrailing() ? "animate-spin" : "")
+
+  const classes = createMemo<Record<string, string>>(() =>
+    buttonTheme({
+      variant:
+        props.active && props.activeVariant ? props.activeVariant : (props.variant ?? "solid"),
+      color: props.active && props.activeColor ? props.activeColor : (props.color ?? "primary"),
+      size: props.size ?? "md",
+      justify: props.justify,
+      block: props.block,
+      square: props.square !== undefined ? props.square : !props.label && !props.children,
+      rounded: props.rounded,
+      leading: isLeading(),
+      trailing: isTrailing(),
+      loading: props.loading,
+      active: props.active,
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  if (props.href) {
+    return (
+      <a
+        href={props.href}
+        target={props.target}
+        rel={props.rel || undefined}
+        class={classes().root}
+        data-slot="root"
+        aria-label={props.ariaLabel}
+        aria-disabled={props.disabled ? "true" : undefined}
+        onClick={props.onClick}
+        {...rest}
+      >
+        {props.leading ? (
+          props.leading
+        ) : isLeading() && showLeadingIcon() ? (
+          <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
+            <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+          </span>
+        ) : null}
+
+        {props.children !== undefined && props.children !== null ? (
+          props.children
+        ) : props.label !== undefined && props.label !== null ? (
+          <span class={classes().label} data-slot="label">
+            {props.label}
+          </span>
+        ) : null}
+
+        {props.trailing ? (
+          props.trailing
+        ) : isTrailing() && showTrailingIcon() ? (
+          <span
+            class={`${classes().trailingIcon}  ${trailingIconClass()}`}
+            data-slot="trailing-icon"
+          >
+            <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+          </span>
+        ) : null}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type={props.type || "button"}
+      disabled={props.disabled}
+      class={classes().root}
+      data-slot="root"
+      aria-label={props.ariaLabel}
+      onClick={props.onClick}
+      {...rest}
+    >
+      {props.leading ? (
+        props.leading
+      ) : isLeading() && showLeadingIcon() ? (
+        <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
+          <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+        </span>
+      ) : null}
+
+      {props.children !== undefined && props.children !== null ? (
+        props.children
+      ) : props.label !== undefined && props.label !== null ? (
+        <span class={classes().label} data-slot="label">
+          {props.label}
+        </span>
+      ) : null}
+
+      {props.trailing ? (
+        props.trailing
+      ) : isTrailing() && showTrailingIcon() ? (
+        <span class={`${classes().trailingIcon}  ${trailingIconClass()}`} data-slot="trailing-icon">
+          <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+export default RLSButton

package/src/components/button/RLVButton.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
 import { computed, useSlots, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ButtonProps } from "./button"
-import { resolveTheme } from "../../utils/resolveTheme"
-import buttonThemeDefault, { createButtonTheme } from "./button.theme"
-const buttonTheme = resolveTheme(buttonThemeDefault, createButtonTheme)
+import { buttonTheme } from "./button.theme"
 import RLVIcon from "../icon/RLVIcon.vue"
 const attrs = useAttrs()
-const button = scv(buttonTheme)
 
 const {
   variant = "solid",
@@ -24,9 +18,7 @@ const {
   block = false,
   active = false,
   activeColor,
-  activeVariant,
-  ui: uiProp,
-  class: className
+  activeVariant
 } = defineProps<ButtonProps>()
 
 const slots = useSlots()
@@ -61,22 +53,17 @@ defineSlots<{
 }>()
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    button,
-    {
-      variant: active && activeVariant ? activeVariant : variant,
-      color: active && activeColor ? activeColor : color,
-      size,
-      block,
-      square: square || (!label && !slots.default),
-      leading: isLeading.value,
-      trailing: isTrailing.value,
-      loading,
-      active
-    },
-    useUi("button", uiProp),
-    className
-  )
+  buttonTheme({
+    variant: active && activeVariant ? activeVariant : variant,
+    color: active && activeColor ? activeColor : color,
+    size,
+    block,
+    square: square || (!label && !slots.default),
+    leading: isLeading.value,
+    trailing: isTrailing.value,
+    loading,
+    active
+  })
 )
 
 const Tag = href ? "a" : "button"

package/src/components/button/button.theme.ts

@@ -1,235 +1,174 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createButtonTheme = (colors: readonly string[] = colorConfig.colors) => {
-  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
-  for (const c of colors) {
-    colorVariants[c] = { root: "" }
-  }
-
-  return defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: [
-        "group inline-flex items-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
-        "transition-colors outline-none",
-        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-      ],
-      label: "truncate",
-      leadingIcon: "shrink-0 flex items-center justify-center",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0 flex items-center justify-center"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" },
-        ghost: { root: "" },
-        link: { root: "" }
-      },
-      color: colorVariants,
-      size: {
-        xs: {
-          root: "text-xs gap-1 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        sm: {
-          root: "text-sm gap-1.5 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-4"
-        },
-        md: {
-          root: "text-base gap-2 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "xs",
-          trailingIcon: "size-5"
-        },
-        lg: {
-          root: "text-lg gap-2.5 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "sm",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-2xl gap-3 [&_svg]:size-7",
-          leadingIcon: "size-7",
-          leadingAvatarSize: "lg",
-          trailingIcon: "size-7"
-        }
-      },
-      justify: {
-        start: { root: "justify-start" },
-        center: { root: "justify-center" },
-        end: { root: "justify-end" },
-        between: { root: "justify-between" },
-        around: { root: "justify-around" },
-        evenly: { root: "justify-evenly" }
+export const buttonTheme = defineTheme("button", {
+  slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
+  base: {
+    root: [
+      "group inline-flex items-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
+      "transition-colors outline-none",
+      "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
+    ],
+    label: "truncate",
+    leadingIcon: "shrink-0 flex items-center justify-center",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0 flex items-center justify-center"
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: "bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
       },
-      block: {
-        true: { root: "w-full", trailingIcon: "ms-auto" }
+      outline: {
+        root: "ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
       },
-      square: {
-        true: {},
-        false: {}
+      soft: {
+        root: "text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
       },
-      rounded: {
-        true: { root: "rounded-full" },
-        false: { root: "rounded-md" }
+      subtle: {
+        root: "text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
       },
-      leading: { true: {} },
-      trailing: { true: {} },
-      loading: { true: {} },
-      active: {
-        true: { root: "" },
-        false: { root: "" }
+      ghost: {
+        root: "text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
       },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+      link: {
+        root: "text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
       }
     },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "ghost" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "link" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "ring ring-inset ring-current text-default bg-transparent hover:bg-elevated active:bg-elevated disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
+    color: "auto",
+    size: {
+      xs: {
+        root: "text-xs gap-1 [&_svg]:size-4",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
       },
-      {
-        color: "neutral",
-        variant: "ghost",
-        classNames: {
-          root: "text-default hover:bg-hover active:bg-hover/80 focus:outline-none focus-visible:bg-hover hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
-        }
+      sm: {
+        root: "text-sm gap-1.5 [&_svg]:size-4",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-4"
       },
-      {
-        color: "neutral",
-        variant: "link",
-        classNames: {
-          root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
-        }
+      md: {
+        root: "text-base gap-2 [&_svg]:size-5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-5"
       },
-      { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
-      { square: true, size: "xs", classNames: { root: "p-1" } },
-      { square: false, size: "sm", classNames: { root: "px-2.5 py-1.5" } },
-      { square: true, size: "sm", classNames: { root: "p-1.5" } },
-      { square: false, size: "md", classNames: { root: "px-3 py-2" } },
-      { square: true, size: "md", classNames: { root: "p-2" } },
-      { square: false, size: "lg", classNames: { root: "px-3.5 py-2.5" } },
-      { square: true, size: "lg", classNames: { root: "p-2.5" } },
-      { square: false, size: "xl", classNames: { root: "px-5 py-3.5" } },
-      { square: true, size: "xl", classNames: { root: "p-3.5" } },
-      {
-        loading: true,
-        leading: true,
-        classNames: {
-          leadingIcon: "animate-spin"
-        }
+      lg: {
+        root: "text-lg gap-2.5 [&_svg]:size-5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "sm",
+        trailingIcon: "size-5"
       },
-      {
-        loading: true,
-        leading: false,
-        trailing: true,
-        classNames: {
-          trailingIcon: "animate-spin"
-        }
+      xl: {
+        root: "text-2xl gap-3 [&_svg]:size-7",
+        leadingIcon: "size-7",
+        leadingAvatarSize: "lg",
+        trailingIcon: "size-7"
       }
-    ],
-    defaultVariants: {
+    },
+    justify: {
+      start: { root: "justify-start" },
+      center: { root: "justify-center" },
+      end: { root: "justify-end" },
+      between: { root: "justify-between" },
+      around: { root: "justify-around" },
+      evenly: { root: "justify-evenly" }
+    },
+    block: {
+      true: { root: "w-full", trailingIcon: "ms-auto" }
+    },
+    square: {
+      true: {},
+      false: {}
+    },
+    rounded: {
+      true: { root: "rounded-full" },
+      false: { root: "rounded-md" }
+    },
+    leading: { true: {} },
+    trailing: { true: {} },
+    loading: { true: {} },
+    active: {
+      true: { root: "" },
+      false: { root: "" }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
       variant: "solid",
-      color: "primary",
-      size: "md",
-      justify: "center"
+      classNames: {
+        root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      classNames: {
+        root: "ring ring-inset ring-current text-default bg-transparent hover:bg-elevated active:bg-elevated disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      classNames: {
+        root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      classNames: {
+        root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "ghost",
+      classNames: {
+        root: "text-default hover:bg-hover active:bg-hover/80 focus:outline-none focus-visible:bg-hover hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "link",
+      classNames: {
+        root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
+    { square: true, size: "xs", classNames: { root: "p-1" } },
+    { square: false, size: "sm", classNames: { root: "px-2.5 py-1.5" } },
+    { square: true, size: "sm", classNames: { root: "p-1.5" } },
+    { square: false, size: "md", classNames: { root: "px-3 py-2" } },
+    { square: true, size: "md", classNames: { root: "p-2" } },
+    { square: false, size: "lg", classNames: { root: "px-3.5 py-2.5" } },
+    { square: true, size: "lg", classNames: { root: "p-2.5" } },
+    { square: false, size: "xl", classNames: { root: "px-5 py-3.5" } },
+    { square: true, size: "xl", classNames: { root: "p-3.5" } },
+    {
+      loading: true,
+      leading: true,
+      classNames: {
+        leadingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      classNames: {
+        trailingIcon: "animate-spin"
+      }
     }
-  })
-}
-
-export default createButtonTheme()
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    justify: "center",
+    rounded: false
+  }
+})

package/src/components/button/button.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 import type { LinkProps } from "../link/link"
 
 export interface ButtonProps extends LinkProps {

package/src/components/calendar/RLACalendar.astro

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