@xelqun/forms 0.0.0-stage → 0.1.1

package/resources/js/ui/XqSelect.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Check, ChevronDown } from 'lucide-vue-next';
+import {
+    SelectContent,
+    SelectItem,
+    SelectItemIndicator,
+    SelectItemText,
+    SelectPortal,
+    SelectRoot,
+    SelectTrigger,
+    SelectValue,
+    SelectViewport,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import type { SelectOption } from '../schema/types';
+import { controlClass, optionClass, popoverClass } from './classes';
+
+const props = defineProps<{
+    id?: string;
+    options: SelectOption[];
+    placeholder?: string | null;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedBy?: string;
+    class?: HTMLAttributes['class'];
+}>();
+const model = defineModel<string | number | null>();
+</script>
+
+<template>
+    <SelectRoot v-model="model" :disabled="disabled">
+        <SelectTrigger
+            :id="id"
+            data-slot="xq-select"
+            :aria-invalid="invalid || undefined"
+            :aria-describedby="describedBy"
+            :class="
+                cn(
+                    controlClass,
+                    'h-9 gap-2 px-3 py-1 flex cursor-pointer items-center justify-between text-left data-[placeholder]:text-xq-muted-foreground',
+                    props.class,
+                )
+            "
+        >
+            <SelectValue :placeholder="placeholder ?? 'Select an option'" class="truncate" />
+            <ChevronDown class="size-4 shrink-0 opacity-60" />
+        </SelectTrigger>
+        <SelectPortal>
+            <SelectContent
+                position="popper"
+                :side-offset="4"
+                :class="cn(popoverClass, 'max-h-72 min-w-32 w-(--reka-select-trigger-width)')"
+            >
+                <SelectViewport class="p-1">
+                    <SelectItem
+                        v-for="option in options"
+                        :key="String(option.value)"
+                        :value="option.value"
+                        :class="optionClass"
+                    >
+                        <SelectItemText>{{ option.label }}</SelectItemText>
+                        <SelectItemIndicator
+                            class="right-2 size-3.5 absolute flex items-center justify-center"
+                        >
+                            <Check class="size-4" />
+                        </SelectItemIndicator>
+                    </SelectItem>
+                    <div
+                        v-if="options.length === 0"
+                        class="px-2 py-6 text-sm text-center text-xq-muted-foreground"
+                    >
+                        No options
+                    </div>
+                </SelectViewport>
+            </SelectContent>
+        </SelectPortal>
+    </SelectRoot>
+</template>

package/resources/js/ui/XqSwitch.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ id?: string; disabled?: boolean; class?: HTMLAttributes['class'] }>();
+const model = defineModel<boolean>({ default: false });
+</script>
+
+<template>
+    <SwitchRoot
+        :id="id"
+        v-model="model"
+        data-slot="xq-switch"
+        :disabled="disabled"
+        :class="
+            cn(
+                'peer h-5 w-9 shadow-xs inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-xq-primary data-[state=unchecked]:bg-xq-input',
+                props.class,
+            )
+        "
+    >
+        <SwitchThumb
+            class="size-4 shadow-sm data-[state=unchecked]:translate-x-0.5 pointer-events-none block rounded-full bg-xq-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] motion-reduce:transition-none"
+        />
+    </SwitchRoot>
+</template>

package/resources/js/ui/XqTabs.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { TabsRoot } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class']; unmountOnHide?: boolean }>();
+const model = defineModel<string | number>();
+</script>
+
+<template>
+    <TabsRoot
+        v-model="model"
+        data-slot="xq-tabs"
+        :unmount-on-hide="unmountOnHide ?? true"
+        :class="cn('gap-3 flex flex-col', props.class)"
+    >
+        <slot />
+    </TabsRoot>
+</template>

package/resources/js/ui/XqTabsContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { TabsContent } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ value: string | number; class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <TabsContent
+        data-slot="xq-tabs-content"
+        :value="value"
+        :class="cn('outline-none', props.class)"
+    >
+        <slot />
+    </TabsContent>
+</template>

package/resources/js/ui/XqTabsList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { TabsList } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <TabsList
+        data-slot="xq-tabs-list"
+        :class="
+            cn(
+                'h-9 gap-1 p-1 inline-flex w-fit max-w-full items-center overflow-x-auto rounded-xq-lg bg-xq-muted text-xq-muted-foreground',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </TabsList>
+</template>

package/resources/js/ui/XqTabsTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { TabsTrigger } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{
+    value: string | number;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <TabsTrigger
+        data-slot="xq-tabs-trigger"
+        :value="value"
+        :disabled="disabled"
+        :class="
+            cn(
+                'gap-1.5 px-3 text-sm font-medium data-[state=active]:shadow-sm inline-flex h-full cursor-pointer items-center justify-center rounded-xq-md whitespace-nowrap transition-[color,box-shadow] outline-none hover:text-xq-foreground focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-xq-background data-[state=active]:text-xq-foreground',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </TabsTrigger>
+</template>

package/resources/js/ui/XqTextarea.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import { controlClass } from './classes';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const model = defineModel<string | null>();
+</script>
+
+<template>
+    <textarea
+        v-model="model"
+        data-slot="xq-textarea"
+        :class="cn(controlClass, 'min-h-16 px-3 py-2', props.class)"
+    />
+</template>

package/resources/js/ui/classes.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared class strings for form controls. Components use only --xq-* token
+ * utilities, so they never collide with an app's own design tokens.
+ */
+export const controlClass =
+    'w-full min-w-0 rounded-xq-md border border-xq-input bg-xq-background text-sm text-xq-foreground shadow-xs transition-[color,box-shadow,border-color] outline-none placeholder:text-xq-muted-foreground focus-visible:border-xq-ring focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:border-xq-destructive aria-invalid:ring-xq-destructive/20';
+
+export const popoverClass =
+    'z-50 overflow-hidden rounded-xq-md border border-xq-border bg-xq-popover text-xq-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
+
+export const optionClass =
+    'relative flex w-full cursor-default items-center gap-2 rounded-xq-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-xq-accent data-[highlighted]:text-xq-accent-foreground';

package/resources/js/ui/index.ts

@@ -0,0 +1,17 @@
+export { default as XqBadge } from './XqBadge.vue';
+export { default as XqButton } from './XqButton.vue';
+export { default as XqCalendar } from './XqCalendar.vue';
+export { default as XqCard } from './XqCard.vue';
+export { default as XqCheckbox } from './XqCheckbox.vue';
+export { default as XqCombobox } from './XqCombobox.vue';
+export { default as XqInput } from './XqInput.vue';
+export { default as XqLabel } from './XqLabel.vue';
+export { default as XqRadioGroup } from './XqRadioGroup.vue';
+export { default as XqRadioGroupItem } from './XqRadioGroupItem.vue';
+export { default as XqSelect } from './XqSelect.vue';
+export { default as XqSwitch } from './XqSwitch.vue';
+export { default as XqTabs } from './XqTabs.vue';
+export { default as XqTabsContent } from './XqTabsContent.vue';
+export { default as XqTabsList } from './XqTabsList.vue';
+export { default as XqTabsTrigger } from './XqTabsTrigger.vue';
+export { default as XqTextarea } from './XqTextarea.vue';