@hemia/lume-registry 0.0.1

package/README.md

@@ -0,0 +1,43 @@
+# @hemia/lume-registry
+
+Component templates registry for the Lume UI system. Contains source code for all Lume components organized by framework.
+
+## What is this?
+
+This package stores the component templates that the Lume CLI copies into user projects. **Users don't install this directly** — it's consumed by the `@hemia/lume` CLI.
+
+## Structure
+
+```
+registry/
+├── vue/
+│   ├── button/
+│   │   ├── button.vue
+│   │   └── meta.json
+│   └── card/
+│       ├── card.vue
+│       └── meta.json
+└── react/  (coming soon)
+```
+
+## How it works
+
+When a user runs:
+
+```bash
+bunx @hemia/lume@latest add button
+```
+
+The CLI:
+1. Reads the framework from `lume.config.json`
+2. Resolves `@hemia/lume-registry` package location
+3. Copies files from `registry/{framework}/{component}/` to the user's project
+4. Installs dependencies listed in `meta.json`
+
+## Usage
+
+This package is dependency of `@hemia/lume` CLI. It's not meant to be imported in user code.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@hemia/lume-registry",
+  "version": "0.0.1",
+  "type": "module",
+  "files": ["registry"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@hemia/lume-vue": "workspace:*",
+    "class-variance-authority": "^0.7.1",
+    "vue": "^3.4.0"
+  }
+}

package/registry/vue/alert/alert-action.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang="ts">
+import { cn } from "@hemia/lume-vue"
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-2', props.class)">
+    <slot />
+  </div>
+</template>

package/registry/vue/alert/alert-description.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang="ts">
+import { cn } from "@hemia/lume-vue"
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

package/registry/vue/alert/alert-title.vue

@@ -0,0 +1,14 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang="ts">
+import { cn } from "@hemia/lume-vue"
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

package/registry/vue/alert/alert.vue

@@ -0,0 +1,42 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang="ts">
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted/50 text-foreground border-border",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10 dark:bg-destructive/20",
+        tonal:
+          "border-transparent bg-destructive/10 text-destructive dark:bg-destructive/30 dark:text-destructive-200",
+        success:
+          "border-transparent bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 dark:bg-emerald-500/30",
+        warning:
+          "border-transparent bg-amber-500/10 text-amber-700 dark:text-amber-200 dark:bg-amber-500/30",
+        info:
+          "border-transparent bg-blue-500/10 text-blue-700 dark:text-blue-200 dark:bg-blue-500/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+type AlertVariants = VariantProps<typeof alertVariants>
+
+const props = defineProps<{
+  variant?: AlertVariants["variant"]
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

package/registry/vue/alert/index.ts

@@ -0,0 +1,4 @@
+export { default as Alert } from "./alert.vue"
+export { default as AlertTitle } from "./alert-title.vue"
+export { default as AlertDescription } from "./alert-description.vue"
+export { default as AlertAction } from "./alert-action.vue"

package/registry/vue/alert/meta.json

@@ -0,0 +1,19 @@
+{
+  "name": "alert",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "alert.vue",
+    "alert-title.vue",
+    "alert-description.vue",
+    "alert-action.vue",
+    "index.ts"
+  ],
+  "registryDependencies": [],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "peerDependencies": [
+    "@hemia/lume-vue"
+  ]
+}

package/registry/vue/alertdialog/alertdialog-action.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+import { Button } from '../button'
+
+const size = inject<string>('alert-dialog-size', 'md')
+
+const props = defineProps<{
+  variant?: 'default' | 'destructive'
+  class?: string
+}>()
+
+const isSm = computed(() => size === 'sm')
+</script>
+
+<template>
+  <Button :variant="props.variant" :class="cn(isSm && 'w-full justify-center', props.class)">
+    <slot />
+  </Button>
+</template>

package/registry/vue/alertdialog/alertdialog-cancel.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { inject, type Ref, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+import { Button } from '../button'
+
+const dialog = inject<{
+  open: Ref<boolean>
+  onOpenChange: (value: boolean) => void
+}>('alert-dialog')
+
+const size = inject<string>('alert-dialog-size', 'md')
+
+const props = defineProps<{
+  class?: string
+}>()
+
+function close() {
+  dialog?.onOpenChange(false)
+}
+
+const isSm = computed(() => size === 'sm')
+</script>
+
+<template>
+  <Button
+    variant="outline"
+    :class="cn(isSm && 'w-full justify-center', props.class)"
+    @click="close"
+  >
+    <slot />
+  </Button>
+</template>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { inject, type Ref, computed, provide } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const dialog = inject<{
+  open: Ref<boolean>
+  onOpenChange: (value: boolean) => void
+}>('alert-dialog')
+
+const props = defineProps<{
+  class?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  persistent?: boolean
+}>()
+
+// Provide size to child components
+provide('alert-dialog-size', props.size || 'md')
+
+function close() {
+  dialog?.onOpenChange(false)
+}
+
+const isOpen = computed(() => dialog?.open.value ?? false)
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]'
+  }
+  return sizes[props.size || 'md']
+})
+
+const isCentered = computed(() => props.size === 'sm')
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 bg-black/80"
+        :class="{ 'cursor-not-allowed pointer-events-none': props.persistent }"
+        @click="!props.persistent && close()"
+      />
+    </Transition>
+  </Teleport>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 scale-95 translate-y-4"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+      leave-to-class="opacity-0 scale-95 translate-y-4"
+    >
+      <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="cn(sizeClasses, isCentered && 'text-center', props.class)"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/registry/vue/alertdialog/alertdialog-description.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { inject, type Ref, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const dialog = inject<{
+  open: Ref<boolean>
+}>('alert-dialog')
+
+const props = defineProps<{
+  class?: string
+}>()
+
+const isOpen = computed(() => dialog?.open.value ?? false)
+
+// Obtener el tamaño del content a través del provide/inject
+const size = inject<string>('alert-dialog-size', 'md')
+
+const isSm = computed(() => size === 'sm')
+</script>
+
+<template>
+  <div
+    :class="cn(
+      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',
+      isSm && 'grid grid-cols-2 gap-2',
+      props.class
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/registry/vue/alertdialog/alertdialog-header.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6 pb-2', props.class)">
+    <div v-if="$slots.media" class="flex justify-center">
+      <slot name="media" />
+    </div>
+    <slot />
+  </div>
+</template>

package/registry/vue/alertdialog/alertdialog-media.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn('w-auto inline-flex items-center justify-center rounded-md p-3', props.class)">
+    <slot />
+  </div>
+</template>

package/registry/vue/alertdialog/alertdialog-title.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <h2 :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h2>
+</template>

package/registry/vue/alertdialog/alertdialog-trigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { inject, type Ref } from 'vue'
+
+const dialog = inject<{
+  open: Ref<boolean>
+  onOpenChange: (value: boolean) => void
+}>('alert-dialog')
+
+const props = defineProps<{
+  asChild?: boolean
+  class?: string
+}>()
+
+function onClick(event: MouseEvent) {
+  // Stop propagation to prevent double-firing
+  event.stopPropagation()
+  dialog?.onOpenChange(true)
+}
+</script>
+
+<template>
+  <component
+    :is="props.asChild ? 'span' : 'button'"
+    :class="props.class"
+    @click="onClick"
+  >
+    <slot />
+  </component>
+</template>

package/registry/vue/alertdialog/alertdialog.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+import { ref, provide } from 'vue'
+
+const open = ref(false)
+
+function onOpenChange(value: boolean) {
+  open.value = value
+}
+
+provide('alert-dialog', {
+  open,
+  onOpenChange,
+})
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(props.class)">
+    <slot :open="open" :on-open-change="onOpenChange" />
+  </div>
+</template>

package/registry/vue/alertdialog/index.ts

@@ -0,0 +1,10 @@
+export { default as AlertDialog } from "./alertdialog.vue"
+export { default as AlertDialogTrigger } from "./alertdialog-trigger.vue"
+export { default as AlertDialogContent } from "./alertdialog-content.vue"
+export { default as AlertDialogHeader } from "./alertdialog-header.vue"
+export { default as AlertDialogFooter } from "./alertdialog-footer.vue"
+export { default as AlertDialogTitle } from "./alertdialog-title.vue"
+export { default as AlertDialogDescription } from "./alertdialog-description.vue"
+export { default as AlertDialogCancel } from "./alertdialog-cancel.vue"
+export { default as AlertDialogAction } from "./alertdialog-action.vue"
+export { default as AlertDialogMedia } from "./alertdialog-media.vue"

package/registry/vue/alertdialog/meta.json

@@ -0,0 +1,20 @@
+{
+  "name": "alert-dialog",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "alertdialog.vue",
+    "alertdialog-trigger.vue",
+    "alertdialog-content.vue",
+    "alertdialog-header.vue",
+    "alertdialog-footer.vue",
+    "alertdialog-title.vue",
+    "alertdialog-description.vue",
+    "alertdialog-cancel.vue",
+    "alertdialog-action.vue",
+    "index.ts"
+  ],
+  "registryDependencies": ["button"],
+  "dependencies": [],
+  "peerDependencies": ["@hemia/lume-vue"]
+}

package/registry/vue/badge/badge.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+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",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+type BadgeVariants = VariantProps<typeof badgeVariants>
+
+defineProps<{
+  variant?: BadgeVariants["variant"]
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), $props.class)">
+    <slot />
+  </div>
+</template>

package/registry/vue/badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from "./badge.vue"

package/registry/vue/badge/meta.json

@@ -0,0 +1,16 @@
+{
+  "name": "badge",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "badge.vue",
+    "index.ts"
+  ],
+  "registryDependencies": [],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "peerDependencies": [
+    "@hemia/lume-vue"
+  ]
+}

package/registry/vue/button/button.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border-input bg-background hover:bg-accent hover:text-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",
+      },
+      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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+type ButtonVariants = VariantProps<typeof buttonVariants>
+
+const props = defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  type?: "button" | "submit" | "reset"
+  class?: string
+}>()
+</script>
+
+<template>
+  <button :type="props.type" :class="cn(buttonVariants({ variant, size }), props.class)">
+    <slot />
+  </button>
+</template>

package/registry/vue/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from "./button.vue"

package/registry/vue/button/meta.json

@@ -0,0 +1,16 @@
+{
+  "name": "button",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "button.vue",
+    "index.ts"
+  ],
+  "registryDependencies": [],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "peerDependencies": [
+    "@hemia/lume-vue"
+  ]
+}

package/registry/vue/card/card-action.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const size = inject<string>('card-size', 'default')
+const isSm = computed(() => size === 'sm')
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(
+    'absolute right-4 top-4 flex items-center gap-2',
+    isSm ? 'right-2 top-2' : '',
+    props.class
+  )">
+    <slot />
+  </div>
+</template>

package/registry/vue/card/card-content.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const size = inject<string>('card-size', 'default')
+const isSm = computed(() => size === 'sm')
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(
+    isSm ? 'pt-3 pb-3' : 'pt-6 pb-6',
+    props.class
+  )">
+    <slot />
+  </div>
+</template>

package/registry/vue/card/card-description.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const size = inject<string>('card-size', 'default')
+
+const isSm = computed(() => size === 'sm')
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(
+    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',
+    props.class
+  )">
+    <slot />
+  </div>
+</template>

package/registry/vue/card/card-header.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const size = inject<string>('card-size', 'default')
+const isSm = computed(() => size === 'sm')
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(
+    'flex flex-col',
+    isSm ? 'space-y-2 pr-6 mb-2' : 'space-y-1.5',
+    props.class
+  )">
+    <slot />
+  </div>
+</template>

package/registry/vue/card/card-title.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

package/registry/vue/card/card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+import { cn } from '@hemia/lume-vue'
+
+const props = defineProps<{
+  size?: 'default' | 'sm'
+  class?: string
+}>()
+
+provide('card-size', props.size || 'default')
+</script>
+
+<template>
+  <div :class="cn(
+    'relative rounded-xl border bg-card text-card-foreground shadow',
+    size === 'sm' ? 'p-2 pb-2' : 'p-6',
+    props.class
+  )">
+    <slot />
+  </div>
+</template>

package/registry/vue/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from "./card.vue"
+export { default as CardHeader } from "./card-header.vue"
+export { default as CardTitle } from "./card-title.vue"
+export { default as CardDescription } from "./card-description.vue"
+export { default as CardContent } from "./card-content.vue"
+export { default as CardFooter } from "./card-footer.vue"
+export { default as CardAction } from "./card-action.vue"

package/registry/vue/card/meta.json

@@ -0,0 +1,18 @@
+{
+  "name": "card",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "card.vue",
+    "card-header.vue",
+    "card-title.vue",
+    "card-description.vue",
+    "card-content.vue",
+    "card-footer.vue",
+    "card-action.vue",
+    "index.ts"
+  ],
+  "registryDependencies": [],
+  "dependencies": [],
+  "peerDependencies": ["@hemia/lume-vue"]
+}

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cva } from "class-variance-authority"
+import { cn } from "@hemia/lume-vue"
+
+const fieldDescriptionVariants = cva("text-[0.8rem] text-muted-foreground")
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <p :class="cn(fieldDescriptionVariants(), props.class)">
+    <slot />
+  </p>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+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"
+)
+
+const props = defineProps<{
+  class?: string
+}>()
+
+defineOptions({
+  inheritAttrs: false
+})
+</script>
+
+<template>
+  <div :class="cn(fieldGroupVariants(), props.class)" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/registry/vue/field/field-label.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cva } from "class-variance-authority"
+import { cn } from "@hemia/lume-vue"
+
+const fieldLabelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const props = defineProps<{
+  forId?: string
+  class?: string
+}>()
+</script>
+
+<template>
+  <label :for="forId" :class="cn(fieldLabelVariants(), props.class)">
+    <slot />
+  </label>
+</template>

package/registry/vue/field/field-legend.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cva } from "class-variance-authority"
+import { cn } from "@hemia/lume-vue"
+
+const fieldLegendVariants = cva("text-sm font-medium leading-none")
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <legend :class="cn(fieldLegendVariants(), props.class)">
+    <slot />
+  </legend>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cva } from "class-variance-authority"
+import { cn } from "@hemia/lume-vue"
+
+const fieldSeparatorVariants = cva("h-px bg-border")
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(fieldSeparatorVariants(), props.class)" />
+</template>

package/registry/vue/field/field.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@hemia/lume-vue"
+
+const fieldVariants = cva("grid gap-1.5 rounded-lg", {
+  variants: {
+    orientation: {
+      horizontal: "grid-cols-[1fr,auto]",
+      vertical: "",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+type FieldVariants = VariantProps<typeof fieldVariants>
+
+const props = defineProps<{
+  orientation?: FieldVariants["orientation"]
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn(fieldVariants({ orientation }), props.class)">
+    <slot />
+  </div>
+</template>

package/registry/vue/field/fieldset.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from "@hemia/lume-vue"
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <fieldset :class="cn('space-y-2.5', props.class)">
+    <slot />
+  </fieldset>
+</template>

package/registry/vue/field/index.ts

@@ -0,0 +1,7 @@
+export { default as Field } from "./field.vue"
+export { default as FieldLabel } from "./field-label.vue"
+export { default as FieldDescription } from "./field-description.vue"
+export { default as FieldGroup } from "./field-group.vue"
+export { default as FieldLegend } from "./field-legend.vue"
+export { default as FieldSeparator } from "./field-separator.vue"
+export { default as FieldSet } from "./fieldset.vue"

package/registry/vue/field/meta.json

@@ -0,0 +1,22 @@
+{
+  "name": "field",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "field.vue",
+    "field-label.vue",
+    "field-description.vue",
+    "field-group.vue",
+    "field-legend.vue",
+    "field-separator.vue",
+    "fieldset.vue",
+    "index.ts"
+  ],
+  "registryDependencies": [],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "peerDependencies": [
+    "@hemia/lume-vue"
+  ]
+}

package/registry/vue/icon/icon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@hemia/lume-vue"
+
+const iconVariants = cva(
+  "inline-flex shrink-0 items-center justify-center",
+  {
+    variants: {
+      size: {
+        default: "size-4",
+        sm: "size-3",
+        lg: "size-5",
+        xl: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+type IconVariants = VariantProps<typeof iconVariants>
+
+// Export for external use
+defineExpose({ iconVariants, IconVariants })
+
+defineProps<{
+  size?: IconVariants["size"]
+  class?: string
+}>()
+</script>
+
+<template>
+  <span :class="cn(iconVariants({ size }), props.class)">
+    <slot />
+  </span>
+</template>

package/registry/vue/icon/index.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from "./icon.vue"
+export { iconVariants, type IconVariants } from "./icon.variants"

package/registry/vue/icon/meta.json

@@ -0,0 +1,16 @@
+{
+  "name": "icon",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "icon.vue",
+    "index.ts"
+  ],
+  "registryDependencies": [],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "peerDependencies": [
+    "@hemia/lume-vue"
+  ]
+}

package/registry/vue/textfield/index.ts

@@ -0,0 +1 @@
+export { default as TextField } from "./textfield.vue"

package/registry/vue/textfield/meta.json

@@ -0,0 +1,16 @@
+{
+  "name": "textfield",
+  "framework": "vue",
+  "type": "component",
+  "files": [
+    "textfield.vue",
+    "index.ts"
+  ],
+  "registryDependencies": ["field"],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "peerDependencies": [
+    "@hemia/lume-vue"
+  ]
+}

package/registry/vue/textfield/textfield.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from "class-variance-authority"
+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",
+  {
+    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",
+      },
+      size: {
+        default: "",
+        sm: "h-8",
+        lg: "h-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const textfieldIconVariants = cva(
+  "text-muted-foreground flex shrink-0 items-center",
+  {
+    variants: {
+      size: {
+        default: "size-4",
+        sm: "size-3.5",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+type TextfieldVariants = VariantProps<typeof textfieldVariants>
+type TextfieldIconVariants = VariantProps<typeof textfieldIconVariants>
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  error?: string
+  forId?: string
+  variant?: TextfieldVariants["variant"]
+  size?: TextfieldVariants["size"]
+  iconSize?: TextfieldIconVariants["size"]
+  modelValue?: string
+  type?: string
+  placeholder?: string
+  disabled?: boolean
+  class?: string
+  prependIcon?: any
+  prependInnerIcon?: any
+  appendInnerIcon?: any
+  appendIcon?: any
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+}>()
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit("update:modelValue", target.value)
+}
+
+// Compute padding classes for input based on inner icon presence
+const getInputPaddingClass = () => {
+  const padding = []
+  if (props.prependInnerIcon) {
+    padding.push("ps-1.5")
+  } else {
+    padding.push("ps-[var(--tf-padding-x)]")
+  }
+  if (props.appendInnerIcon) {
+    padding.push("pe-1.5")
+  } else {
+    padding.push("pe-[var(--tf-padding-x)]")
+  }
+  return padding.join(" ")
+}
+</script>
+
+<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) -->
+      <component
+        v-if="prependIcon"
+        :is="prependIcon"
+        class="text-muted-foreground flex shrink-0 items-center"
+        :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
+      />
+      <!-- Textfield inner container -->
+      <div
+        :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%]'
+        )"
+      >
+        <!-- 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'
+          ]"
+        />
+        <input
+          :id="forId"
+          :type="type"
+          :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',
+            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'
+          ]"
+        />
+      </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="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">
+      {{ error }}
+    </p>
+  </Field>
+</template>