@hemia/lume-registry 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hemia/lume-registry",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "files": ["registry"],
   "publishConfig": {

package/registry/vue/alert/alert.vue

@@ -4,21 +4,21 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-lume-foreground",
   {
     variants: {
       variant: {
-        default: "bg-muted/50 text-foreground border-border",
+        default: "bg-lume-muted/50 text-lume-foreground border-lume-border",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10 dark:bg-destructive/20",
+          "border-lume-destructive/50 text-lume-destructive dark:border-lume-destructive [&>svg]:text-lume-destructive bg-lume-destructive/10 dark:bg-lume-destructive/20",
         tonal:
-          "border-transparent bg-destructive/10 text-destructive dark:bg-destructive/30 dark:text-destructive-200",
+          "border-transparent bg-lume-destructive/10 text-lume-destructive dark:bg-lume-destructive/30 dark:text-lume-destructive-200",
         success:
-          "border-transparent bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 dark:bg-emerald-500/30",
+          "bg-green-50 border-green-200/50 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:border-green-800/50",
         warning:
-          "border-transparent bg-amber-500/10 text-amber-700 dark:text-amber-200 dark:bg-amber-500/30",
+          "bg-amber-50 border-amber-200/50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200 dark:border-amber-800/50",
         info:
-          "border-transparent bg-blue-500/10 text-blue-700 dark:text-blue-200 dark:bg-blue-500/30",
+          "bg-blue-50 border-blue-200/50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200 dark:border-blue-800/50",
       },
     },
     defaultVariants: {

package/registry/vue/alertdialog/alertdialog-content.vue

@@ -65,7 +65,7 @@ const isCentered = computed(() => props.size === 'sm')
     >
       <div
         v-if="isOpen"
-        class="fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-0 border bg-background shadow-lg duration-200 sm:rounded-lg"
+        class="fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-0 border bg-lume-background shadow-lg duration-200 sm:rounded-lg"
         :class="cn(sizeClasses, isCentered && 'text-center', props.class)"
       >
         <slot />

package/registry/vue/alertdialog/alertdialog-footer.vue

@@ -24,7 +24,7 @@ const isSm = computed(() => size === 'sm')
       isSm
         ? 'flex-col-reverse'
         : 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      'bg-muted/50 rounded-b-lg px-6 py-4 dark:bg-muted/30',
+      'bg-lume-muted/50 rounded-b-lg px-6 py-4 dark:bg-lume-muted/30',
       isSm && 'grid grid-cols-2 gap-2',
       props.class
     )"

package/registry/vue/badge/badge.vue

@@ -3,19 +3,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-lume-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+          "border-transparent bg-lume-primary text-lume-primary-foreground shadow hover:bg-lume-primary/80",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-lume-secondary text-lume-secondary-foreground hover:bg-lume-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-        ghost: "border-transparent hover:bg-accent hover:text-accent-foreground",
-        link: "border-transparent text-primary underline-offset-4 hover:underline",
+          "border-transparent bg-lume-destructive text-lume-destructive-foreground shadow hover:bg-lume-destructive/80",
+        outline: "text-lume-foreground",
+        ghost: "border-transparent hover:bg-lume-accent hover:text-lume-accent-foreground",
+        link: "border-transparent text-lume-primary underline-offset-4 hover:underline",
       },
     },
     defaultVariants: {

package/registry/vue/button/button.vue

@@ -3,29 +3,29 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-[calc(var(--radius)*2.6)] border border-transparent bg-clip-padding text-sm font-medium transition-all outline-none select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-xl border border-transparent bg-clip-padding text-sm font-medium transition-all outline-none select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lume-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-lume-primary text-lume-primary-foreground hover:bg-lume-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-lume-destructive text-lume-destructive-foreground hover:bg-lume-destructive/90",
         outline:
-          "border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border-lume-input bg-lume-background hover:bg-lume-accent hover:text-lume-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-lume-secondary text-lume-secondary-foreground hover:bg-lume-secondary/80",
+        ghost: "hover:bg-lume-accent hover:text-lume-accent-foreground",
+        link: "text-lume-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        xs: "h-7 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md px-3",
-        lg: "h-10 rounded-md px-8",
-        icon: "size-9",
-        "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: "h-8 px-4 py-2",
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 rounded-lg px-3",
+        lg: "h-9 rounded-xl px-4",
+        icon: "size-8",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7",
+        "icon-lg": "size-9",
       },
     },
     defaultVariants: {

package/registry/vue/card/card-footer.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
     isSm
       ? 'flex-col-reverse w-[calc(100%+1rem)] -mx-2 -mb-2 px-2'
       : 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 -mx-6 -mb-6 px-6',
-    'bg-muted/50 rounded-b-xl dark:bg-muted/30 py-3',
+    'bg-lume-muted/50 rounded-b-xl dark:bg-lume-muted/30 py-3',
     props.class
   )">
     <slot />

package/registry/vue/field/field-description.vue

@@ -2,7 +2,7 @@
 import { cva } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
-const fieldDescriptionVariants = cva("text-[0.8rem] text-muted-foreground")
+const fieldDescriptionVariants = cva("text-[0.8rem] text-lume-muted-foreground")
 
 const props = defineProps<{
   class?: string

package/registry/vue/field/field-group.vue

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const fieldGroupVariants = cva(
-  "flex flex-wrap items-center gap-2 has-[input:focus]:rounded-lg has-[input:focus]:border-ring has-[input:focus]:ring-3 has-[input:focus]:ring-ring/50"
+  "flex flex-wrap items-center gap-2"
 )
 
 const props = defineProps<{

package/registry/vue/field/field-separator.vue

@@ -2,7 +2,7 @@
 import { cva } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
-const fieldSeparatorVariants = cva("h-px bg-border")
+const fieldSeparatorVariants = cva("h-px bg-lume-border")
 
 const props = defineProps<{
   class?: string

package/registry/vue/textfield/textfield.vue

@@ -4,12 +4,12 @@ import { cn } from "@hemia/lume-vue"
 import { Field, FieldLabel, FieldDescription, FieldGroup } from "../field/index"
 
 const textfieldVariants = cva(
-  "flex h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+  "flex h-9 w-full min-w-0 rounded-lg border border-lume-input bg-transparent px-2.5 py-1 text-base transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-lume-foreground placeholder:text-lume-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lume-input/50 disabled:opacity-50 md:text-sm dark:bg-lume-input/30 dark:disabled:bg-lume-input/80",
   {
     variants: {
       variant: {
         default: "",
-        error: "bg-background border-destructive aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        error: "bg-lume-background border-lume-destructive",
       },
       size: {
         default: "",
@@ -25,7 +25,7 @@ const textfieldVariants = cva(
 )
 
 const textfieldIconVariants = cva(
-  "text-muted-foreground flex shrink-0 items-center",
+  "text-lume-muted-foreground flex shrink-0 items-center",
   {
     variants: {
       size: {
@@ -91,30 +91,31 @@ const getInputPaddingClass = () => {
 <template>
   <Field :class="props.class">
     <FieldLabel v-if="label" :for="forId">{{ label }}</FieldLabel>
-    <FieldGroup class="flex flex-1 items-center">
-      <!-- Prepend icon (outside the textfield, to the left) -->
+    
+    <FieldGroup>
+      
       <component
         v-if="prependIcon"
         :is="prependIcon"
-        class="text-muted-foreground flex shrink-0 items-center"
+        class="text-lume-muted-foreground flex shrink-0 items-center"
         :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
       />
-      <!-- Textfield inner container -->
+      
       <div
+        :aria-invalid="!!error"
         :class="cn(
           textfieldVariants({ variant: error ? 'error' : variant, size }),
-          'flex flex-1 items-center focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring/50 dark:focus-within:[--ring:217.2_32.6%_50%] focus-within:[--ring:210_5%_80%]'
+          'flex flex-1 items-center gap-2',
+          error
+            ? 'border-lume-destructive ring-2 ring-lume-destructive/20 dark:border-lume-destructive/50 dark:ring-lume-destructive/40'
+            : 'focus-within:ring-2 focus-within:ring-lume-ring/25'
         )"
       >
-        <!-- Prepend-inner icon (inside, at start) -->
         <component
           v-if="prependInnerIcon"
           :is="prependInnerIcon"
-          class="text-muted-foreground flex shrink-0 items-center"
-          :class="[
-            iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4',
-            'me-1.5'
-          ]"
+          class="text-lume-muted-foreground flex shrink-0 items-center"
+          :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
         />
         <input
           :id="forId"
@@ -122,35 +123,31 @@ const getInputPaddingClass = () => {
           :value="modelValue"
           :placeholder="placeholder"
           :disabled="disabled"
-          :aria-invalid="!!error"
           :class="cn(
-            'flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 w-full min-w-0',
+            'flex-1 bg-transparent placeholder:text-lume-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 w-full min-w-0 outline-none focus:outline-none focus-visible:outline-none',
             getInputPaddingClass()
           )"
           :style="{ '--tf-padding-x': '0.625rem' }"
           @input="onInput"
         />
-        <!-- Append-inner icon (inside, at end) -->
         <component
           v-if="appendInnerIcon"
           :is="appendInnerIcon"
-          class="text-muted-foreground flex shrink-0 items-center"
-          :class="[
-            iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4',
-            'ms-1.5'
-          ]"
+          class="text-lume-muted-foreground flex shrink-0 items-center"
+          :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
         />
       </div>
-      <!-- Append icon (outside the textfield, to the right) -->
+      
       <component
         v-if="appendIcon"
         :is="appendIcon"
-        class="text-muted-foreground flex shrink-0 items-center"
+        class="text-lume-muted-foreground flex shrink-0 items-center"
         :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
       />
     </FieldGroup>
+    
     <FieldDescription v-if="description && !error">{{ description }}</FieldDescription>
-    <p v-if="error" class="text-[0.8rem] font-medium text-destructive">
+    <p v-if="error" class="text-[0.8rem] font-medium text-lume-destructive">
       {{ error }}
     </p>
   </Field>