@rimelight/ui 0.0.3 → 0.0.5

package/src/themes/button.theme.ts

@@ -0,0 +1,45 @@
+import type { ClassValue } from "css-variants"
+
+/**
+ * Shared button theme configuration. Used by both RLAButton (Astro) and RLVButton (Vue) components.
+ */
+export const buttonTheme = {
+  base: [
+    "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:op-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40"
+  ] satisfies ClassValue,
+  variants: {
+    variant: {
+      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
+      primary:
+        "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
+      secondary:
+        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      outline:
+        "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground b shadow-xs",
+      ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
+      success:
+        "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50",
+      warning:
+        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50"
+    },
+    size: {
+      "xs": "px-xs py-2xs text-xs has-[>svg]:px-xs [&_svg:not([class*='size-'])]:size-xs",
+      "sm": "px-sm py-3xs text-sm has-[>svg]:px-sm [&_svg:not([class*='size-'])]:size-sm",
+      "md": "px-md py-2xs text-md has-[>svg]:px-md [&_svg:not([class*='size-'])]:size-md",
+      "lg": "px-lg py-xs text-lg has-[>svg]:px-lg [&_svg:not([class*='size-'])]:size-lg",
+      "xl": "px-xl py-sm text-xl has-[>svg]:px-xl [&_svg:not([class*='size-'])]:size-xl",
+      "icon": "size-10 p-0",
+      "icon-sm": "size-8 p-0"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+} as const

package/src/themes/index.ts

@@ -0,0 +1,11 @@
+import { buttonTheme } from "./button.theme"
+
+/**
+ * Default UI configuration for all components. This is the baseline that gets merged with
+ * user-provided overrides via the Astro integration options.
+ */
+export const defaultUIConfig = {
+  button: buttonTheme
+} as const
+
+export type DefaultUIConfig = typeof defaultUIConfig