@sewadah/selaras 0.1.1

package/dist/runtime/components/Header.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from "vue";
+import { headerTheme } from "../theme/header";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("header", headerTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <header v-bind="rootProps">
+    <div v-bind="resolveSlot(ui.left, props.ui?.left)">
+      <slot />
+    </div>
+    <div v-if="$slots.right" v-bind="resolveSlot(ui.right, props.ui?.right)">
+      <slot name="right" />
+    </div>
+  </header>
+</template>

package/dist/runtime/components/Header.vue.d.ts

@@ -0,0 +1,20 @@
+import type { HeaderThemeSlots } from '../theme/header.js';
+import type { UiProp } from '../utils/ui.js';
+export interface HeaderProps {
+    ui?: UiProp<HeaderThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    right?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Icon.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { IconThemeSlots } from '../theme/icon.js';
+import type { UiProp } from '../utils/ui.js';
+import { iconTheme } from '../theme/icon.js';
+type IconVariants = VariantProps<typeof iconTheme>;
+export interface IconProps {
+    /** Any name Nuxt Icon resolves, e.g. `hugeicons:star` (or any other registered set, like `lucide:star`). */
+    name: string;
+    color?: IconVariants['color'];
+    ui?: UiProp<IconThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed } from "vue";
+import { iconTheme } from "../theme/icon";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  name: { type: String, required: true },
+  color: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("icon", iconTheme);
+const ui = computed(() => theme.value({ color: props.color }));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <Icon :name="name" v-bind="rootProps" />
+</template>

package/dist/runtime/components/Icon.vue.d.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { IconThemeSlots } from '../theme/icon.js';
+import type { UiProp } from '../utils/ui.js';
+import { iconTheme } from '../theme/icon.js';
+type IconVariants = VariantProps<typeof iconTheme>;
+export interface IconProps {
+    /** Any name Nuxt Icon resolves, e.g. `hugeicons:star` (or any other registered set, like `lucide:star`). */
+    name: string;
+    color?: IconVariants['color'];
+    ui?: UiProp<IconThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Input.d.vue.ts

@@ -0,0 +1,41 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { InputThemeSlots } from '../theme/input.js';
+import type { UiProp } from '../utils/ui.js';
+import { inputTheme } from '../theme/input.js';
+type InputVariants = VariantProps<typeof inputTheme>;
+export interface InputProps {
+    id?: string;
+    name?: string;
+    modelValue?: string | number;
+    type?: string;
+    placeholder?: string;
+    size?: InputVariants['size'];
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: InputVariants['color'];
+    clearable?: boolean;
+    icon?: string;
+    trailingIcon?: string;
+    ui?: UiProp<InputThemeSlots>;
+}
+export interface InputEmits {
+    'update:modelValue': [value: string];
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    'clear-icon'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Input.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { inputTheme } from "../theme/input";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: [String, Number], required: false },
+  type: { type: String, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  clearable: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const field = useFormField();
+const inputId = computed(() => props.id ?? field?.id);
+const inputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const describedBy = computed(() => field?.describedBy.value);
+const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
+const showClear = computed(() => !!props.clearable && !props.disabled && hasValue.value);
+function clear() {
+  emit("update:modelValue", "");
+}
+const themeProps = useThemeProps("input");
+const effectiveSize = computed(() => props.size ?? field?.size ?? themeProps.value.size ?? "md");
+const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("input", inputTheme);
+const ui = computed(() => theme.value({
+  size: effectiveSize.value,
+  color: props.color ?? themeProps.value.color ?? "primary",
+  invalid: inputInvalid.value,
+  hasLeadingIcon: !!props.icon,
+  hasTrailingIcon: !!props.trailingIcon || showClear.value
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const baseProps = computed(() => resolveSlot(ui.value.base, props.ui?.base));
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+    <input
+      :id="inputId"
+      data-ui-group-item
+      :value="modelValue"
+      :type="type"
+      :name="name ?? field?.name"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="inputInvalid || void 0"
+      :aria-describedby="describedBy"
+      v-bind="baseProps"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <Button
+      v-if="showClear"
+      :size="clearSize"
+      variant="text"
+      color="neutral"
+      :aria-label="messages.clear"
+      v-bind="resolveSlot(ui.clear, props.ui?.clear)"
+      @click="clear"
+    >
+      <template #icon="{ class: iconClass }">
+        <slot name="clear-icon">
+          <Icon :name="icons.close" :class="iconClass" />
+        </slot>
+      </template>
+    </Button>
+    <Icon v-else-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+  </div>
+</template>

package/dist/runtime/components/Input.vue.d.ts

@@ -0,0 +1,41 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { InputThemeSlots } from '../theme/input.js';
+import type { UiProp } from '../utils/ui.js';
+import { inputTheme } from '../theme/input.js';
+type InputVariants = VariantProps<typeof inputTheme>;
+export interface InputProps {
+    id?: string;
+    name?: string;
+    modelValue?: string | number;
+    type?: string;
+    placeholder?: string;
+    size?: InputVariants['size'];
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: InputVariants['color'];
+    clearable?: boolean;
+    icon?: string;
+    trailingIcon?: string;
+    ui?: UiProp<InputThemeSlots>;
+}
+export interface InputEmits {
+    'update:modelValue': [value: string];
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    'clear-icon'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InputGroup.d.vue.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { InputGroupThemeSlots } from '../theme/input-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { inputGroupTheme } from '../theme/input-group.js';
+type InputGroupVariants = VariantProps<typeof inputGroupTheme>;
+export interface InputGroupProps {
+    orientation?: InputGroupVariants['orientation'];
+    ui?: UiProp<InputGroupThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InputGroup.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+import { inputGroupTheme } from "../theme/input-group";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("inputGroup", inputGroupTheme);
+const ui = computed(() => theme.value({
+  orientation: props.orientation
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/InputGroup.vue.d.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { InputGroupThemeSlots } from '../theme/input-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { inputGroupTheme } from '../theme/input-group.js';
+type InputGroupVariants = VariantProps<typeof inputGroupTheme>;
+export interface InputGroupProps {
+    orientation?: InputGroupVariants['orientation'];
+    ui?: UiProp<InputGroupThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InputNumber.d.vue.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { InputNumberThemeSlots } from '../theme/input-number.js';
+import type { UiProp } from '../utils/ui.js';
+import { inputNumberTheme } from '../theme/input-number.js';
+type InputNumberVariants = VariantProps<typeof inputNumberTheme>;
+export interface InputNumberProps {
+    id?: string;
+    name?: string;
+    modelValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** When both `min` and `max` are set, stepping (click, arrow keys, or typing an out-of-range value) cycles past the boundary instead of clamping to it - e.g. an hour-of-day stepper going 12 -> 1, not getting stuck at 12. Default false (clamp), matching a plain bounded quantity. */
+    wrap?: boolean;
+    placeholder?: string;
+    /** Passed straight to `Intl.NumberFormat` for the read-only (blurred) display - e.g. `{ minimumIntegerDigits: 2 }` to zero-pad. Not applied while editing, so typing never fights reformatted text. */
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: InputNumberVariants['color'];
+    size?: InputNumberVariants['size'];
+    /** 'horizontal' (default) flanks the input with two full-height buttons; 'vertical' replaces them with a single compact up/down pair pinned to the end edge. */
+    orientation?: InputNumberVariants['orientation'];
+    ui?: UiProp<InputNumberThemeSlots>;
+}
+export interface InputNumberEmits {
+    'update:modelValue': [value: number | undefined];
+}
+declare const __VLS_export: import("vue").DefineComponent<InputNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/InputNumber.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useLocale } from "../composables/use-locale";
+import { useMessages } from "../composables/use-messages";
+import { inputNumberTheme } from "../theme/input-number";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: Number, required: false },
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false, default: 1 },
+  wrap: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  formatOptions: { type: null, required: false },
+  locale: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  color: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const field = useFormField();
+const inputId = computed(() => props.id ?? field?.id);
+const inputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const describedBy = computed(() => field?.describedBy.value);
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const buttonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const isFocused = ref(false);
+const editingValue = ref("");
+const effectiveLocale = computed(() => props.locale ?? useLocale().value);
+const numberFormatter = computed(() => props.formatOptions ? new Intl.NumberFormat(effectiveLocale.value, props.formatOptions) : void 0);
+const displayValue = computed(() => {
+  if (isFocused.value)
+    return editingValue.value;
+  if (props.modelValue === void 0)
+    return "";
+  return numberFormatter.value ? numberFormatter.value.format(props.modelValue) : String(props.modelValue);
+});
+function clamp(value) {
+  if (props.wrap && props.min !== void 0 && props.max !== void 0) {
+    const size = props.max - props.min + 1;
+    return props.min + ((value - props.min) % size + size) % size;
+  }
+  let result = value;
+  if (props.min !== void 0)
+    result = Math.max(props.min, result);
+  if (props.max !== void 0)
+    result = Math.min(props.max, result);
+  return result;
+}
+function commit(value) {
+  emit("update:modelValue", value === void 0 ? void 0 : clamp(value));
+}
+function focus() {
+  isFocused.value = true;
+  editingValue.value = props.modelValue === void 0 ? "" : String(props.modelValue);
+}
+function blur() {
+  isFocused.value = false;
+  const parsed = editingValue.value.trim() === "" ? void 0 : Number(editingValue.value);
+  commit(parsed === void 0 || Number.isNaN(parsed) ? void 0 : parsed);
+}
+function input(event) {
+  editingValue.value = event.target.value;
+}
+function keydown(event) {
+  if (event.key === "Enter") {
+    event.target.blur();
+    return;
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    stepBy(props.step);
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    stepBy(-props.step);
+  }
+}
+function stepBy(delta) {
+  const base = props.modelValue ?? props.min ?? 0;
+  commit(base + delta);
+  if (isFocused.value)
+    editingValue.value = String(clamp(base + delta));
+}
+const canDecrement = computed(() => !props.disabled && (props.wrap || props.min === void 0 || props.modelValue === void 0 || props.modelValue > props.min));
+const canIncrement = computed(() => !props.disabled && (props.wrap || props.max === void 0 || props.modelValue === void 0 || props.modelValue < props.max));
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("inputNumber", inputNumberTheme);
+const ui = computed(() => theme.value({ size: effectiveSize.value, color: props.color, invalid: inputInvalid.value, orientation: props.orientation }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+const stepperProps = computed(() => resolveSlot(ui.value.stepper, props.ui?.stepper));
+const stepperButtonProps = computed(() => resolveSlot(ui.value.stepperButton, props.ui?.stepperButton));
+const stepButtonUi = { base: "shrink-0" };
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <Button
+      v-if="orientation === 'horizontal'"
+      variant="text"
+      color="neutral"
+      :size="buttonSize"
+      :icon="icons.minus"
+      :aria-label="messages.decrement"
+      :disabled="!canDecrement"
+      :ui="stepButtonUi"
+      tabindex="-1"
+      @click="stepBy(-step)"
+    />
+    <input
+      :id="inputId"
+      :value="displayValue"
+      type="text"
+      inputmode="numeric"
+      :name="name ?? field?.name"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="inputInvalid || void 0"
+      :aria-describedby="describedBy"
+      v-bind="inputProps"
+      @focus="focus"
+      @blur="blur"
+      @input="input"
+      @keydown="keydown"
+    >
+    <Button
+      v-if="orientation === 'horizontal'"
+      variant="text"
+      color="neutral"
+      :size="buttonSize"
+      :icon="icons.plus"
+      :aria-label="messages.increment"
+      :disabled="!canIncrement"
+      :ui="stepButtonUi"
+      tabindex="-1"
+      @click="stepBy(step)"
+    />
+
+    <div v-else v-bind="stepperProps">
+      <button
+        type="button"
+        v-bind="stepperButtonProps"
+        :aria-label="messages.increment"
+        :disabled="!canIncrement"
+        tabindex="-1"
+        @click="stepBy(step)"
+      >
+        <Icon :name="icons.chevronUp" :class="applyClassPrefix('size-3')" />
+      </button>
+      <button
+        type="button"
+        v-bind="stepperButtonProps"
+        :aria-label="messages.decrement"
+        :disabled="!canDecrement"
+        tabindex="-1"
+        @click="stepBy(-step)"
+      >
+        <Icon :name="icons.chevronDown" :class="applyClassPrefix('size-3')" />
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/InputNumber.vue.d.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { InputNumberThemeSlots } from '../theme/input-number.js';
+import type { UiProp } from '../utils/ui.js';
+import { inputNumberTheme } from '../theme/input-number.js';
+type InputNumberVariants = VariantProps<typeof inputNumberTheme>;
+export interface InputNumberProps {
+    id?: string;
+    name?: string;
+    modelValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** When both `min` and `max` are set, stepping (click, arrow keys, or typing an out-of-range value) cycles past the boundary instead of clamping to it - e.g. an hour-of-day stepper going 12 -> 1, not getting stuck at 12. Default false (clamp), matching a plain bounded quantity. */
+    wrap?: boolean;
+    placeholder?: string;
+    /** Passed straight to `Intl.NumberFormat` for the read-only (blurred) display - e.g. `{ minimumIntegerDigits: 2 }` to zero-pad. Not applied while editing, so typing never fights reformatted text. */
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: InputNumberVariants['color'];
+    size?: InputNumberVariants['size'];
+    /** 'horizontal' (default) flanks the input with two full-height buttons; 'vertical' replaces them with a single compact up/down pair pinned to the end edge. */
+    orientation?: InputNumberVariants['orientation'];
+    ui?: UiProp<InputNumberThemeSlots>;
+}
+export interface InputNumberEmits {
+    'update:modelValue': [value: number | undefined];
+}
+declare const __VLS_export: import("vue").DefineComponent<InputNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Kbd.d.vue.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { KbdThemeSlots } from '../theme/kbd.js';
+import type { UiProp } from '../utils/ui.js';
+import { kbdTheme } from '../theme/kbd.js';
+type KbdVariants = VariantProps<typeof kbdTheme>;
+export interface KbdProps {
+    /** A key name resolved via a small built-in symbol map (`meta` -> ⌘, `up` -> ↑, ...) - falls back to the raw string itself when there's no match. Omit in favor of the default slot for anything more custom. */
+    value?: string;
+    size?: KbdVariants['size'];
+    ui?: UiProp<KbdThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Kbd.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from "vue";
+import { kbdTheme } from "../theme/kbd";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  value: { type: String, required: false },
+  size: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const KEY_SYMBOLS = {
+  meta: "\u2318",
+  command: "\u2318",
+  cmd: "\u2318",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  option: "\u2325",
+  shift: "\u21E7",
+  enter: "\u21B5",
+  return: "\u21B5",
+  backspace: "\u232B",
+  delete: "\u2326",
+  tab: "\u21E5",
+  capslock: "\u21EA",
+  escape: "Esc",
+  esc: "Esc",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192",
+  space: "Space"
+};
+const resolvedValue = computed(() => props.value ? KEY_SYMBOLS[props.value.toLowerCase()] ?? props.value : void 0);
+const theme = useComponentTheme("kbd", kbdTheme);
+const ui = computed(() => theme.value({ size: props.size }));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <kbd v-bind="rootProps"><slot>{{ resolvedValue }}</slot></kbd>
+</template>