@sewadah/selaras 0.1.1

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

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ButtonGroupThemeSlots } from '../theme/button-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { buttonGroupTheme } from '../theme/button-group.js';
+type ButtonGroupVariants = VariantProps<typeof buttonGroupTheme>;
+export interface ButtonGroupProps {
+    orientation?: ButtonGroupVariants['orientation'];
+    ui?: UiProp<ButtonGroupThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & 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/Callout.d.vue.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CalloutThemeSlots } from '../theme/callout.js';
+import type { UiProp } from '../utils/ui.js';
+import { calloutTheme } from '../theme/callout.js';
+type CalloutVariants = VariantProps<typeof calloutTheme>;
+type __VLS_Slots = CalloutSlots;
+export interface CalloutProps {
+    /** @default 'note' */
+    type?: CalloutVariants['type'];
+    title?: string;
+    /** Falls back to the type's own default icon (info/success/warning/danger) - pass `false` to render no icon at all. */
+    icon?: string | false;
+    ui?: UiProp<CalloutThemeSlots>;
+}
+export interface CalloutSlots {
+    title?: () => any;
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutProps> & 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/Callout.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { calloutTheme } from "../theme/callout";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  type: { type: null, required: false },
+  title: { type: String, required: false },
+  icon: { type: [String, Boolean], required: false, default: void 0 },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const icons = useIcons();
+const DEFAULT_ICON = {
+  note: "info",
+  tip: "success",
+  warning: "warning",
+  danger: "danger"
+};
+const iconName = computed(() => {
+  if (props.icon === false)
+    return void 0;
+  return props.icon ?? icons.value[DEFAULT_ICON[props.type ?? "note"]];
+});
+const theme = useComponentTheme("callout", calloutTheme);
+const ui = computed(() => theme.value({ type: props.type }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+</script>
+
+<template>
+  <div v-bind="rootProps" role="note">
+    <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
+    <div v-bind="contentProps">
+      <p v-if="title || $slots.title" v-bind="titleProps">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </p>
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CalloutThemeSlots } from '../theme/callout.js';
+import type { UiProp } from '../utils/ui.js';
+import { calloutTheme } from '../theme/callout.js';
+type CalloutVariants = VariantProps<typeof calloutTheme>;
+type __VLS_Slots = CalloutSlots;
+export interface CalloutProps {
+    /** @default 'note' */
+    type?: CalloutVariants['type'];
+    title?: string;
+    /** Falls back to the type's own default icon (info/success/warning/danger) - pass `false` to render no icon at all. */
+    icon?: string | false;
+    ui?: UiProp<CalloutThemeSlots>;
+}
+export interface CalloutSlots {
+    title?: () => any;
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutProps> & 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/Card.d.vue.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CardThemeSlots } from '../theme/card.js';
+import type { UiProp } from '../utils/ui.js';
+import { cardTheme } from '../theme/card.js';
+type CardVariants = VariantProps<typeof cardTheme>;
+type __VLS_Slots = CardSlots;
+export interface CardProps {
+    /** @default 'outline' */
+    variant?: CardVariants['variant'];
+    ui?: UiProp<CardThemeSlots>;
+}
+export interface CardSlots {
+    header?: () => any;
+    default?: () => any;
+    footer?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & 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/Card.vue

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

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

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CardThemeSlots } from '../theme/card.js';
+import type { UiProp } from '../utils/ui.js';
+import { cardTheme } from '../theme/card.js';
+type CardVariants = VariantProps<typeof cardTheme>;
+type __VLS_Slots = CardSlots;
+export interface CardProps {
+    /** @default 'outline' */
+    variant?: CardVariants['variant'];
+    ui?: UiProp<CardThemeSlots>;
+}
+export interface CardSlots {
+    header?: () => any;
+    default?: () => any;
+    footer?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & 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/CardGroup.d.vue.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CardGroupThemeSlots } from '../theme/card-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { cardGroupTheme } from '../theme/card-group.js';
+type CardGroupVariants = VariantProps<typeof cardGroupTheme>;
+export interface CardGroupProps {
+    /** Column count at the `sm` breakpoint and up - single column below it regardless. @default 2 */
+    cols?: CardGroupVariants['cols'];
+    ui?: UiProp<CardGroupThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardGroupProps> & 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/CardGroup.vue

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

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

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CardGroupThemeSlots } from '../theme/card-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { cardGroupTheme } from '../theme/card-group.js';
+type CardGroupVariants = VariantProps<typeof cardGroupTheme>;
+export interface CardGroupProps {
+    /** Column count at the `sm` breakpoint and up - single column below it regardless. @default 2 */
+    cols?: CardGroupVariants['cols'];
+    ui?: UiProp<CardGroupThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardGroupProps> & 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/Checkbox.d.vue.ts

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CheckboxThemeSlots } from '../theme/checkbox.js';
+import type { UiProp } from '../utils/ui.js';
+import { checkboxTheme } from '../theme/checkbox.js';
+type CheckboxVariants = VariantProps<typeof checkboxTheme>;
+export interface CheckboxProps {
+    id?: string;
+    name?: string;
+    modelValue?: boolean | 'indeterminate';
+    label?: string;
+    /** A second, muted line under the label - for a standalone checkbox (e.g. "Accept terms") where wrapping it in its own FormField would be needless ceremony. */
+    description?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    size?: CheckboxVariants['size'];
+    color?: CheckboxVariants['color'];
+    /** `card` wraps the checkbox and label in a bordered box, highlighted when checked - the same treatment RadioGroup's own `card` variant already applies per item. */
+    variant?: CheckboxVariants['variant'];
+    ui?: UiProp<CheckboxThemeSlots>;
+}
+export interface CheckboxEmits {
+    'update:modelValue': [value: boolean | 'indeterminate'];
+}
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    description?: (props: typeof __VLS_17) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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/Checkbox.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
+import { computed } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { checkboxTheme } from "../theme/checkbox";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: [Boolean, String], required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const field = useFormField();
+const checkboxId = computed(() => props.id ?? field?.id);
+const checkboxInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const describedBy = computed(() => field?.describedBy.value);
+const theme = useComponentTheme("checkbox", checkboxTheme);
+const ui = computed(() => theme.value({
+  invalid: checkboxInvalid.value,
+  size: effectiveSize.value,
+  color: props.color,
+  variant: props.variant
+}));
+const rootProps = useRootProps(() => ui.value.root, () => withFallthroughClass(props.description ? "items-start" : void 0, props.ui?.root));
+const boxProps = computed(() => resolveSlot(ui.value.box, withFallthroughClass(props.description ? "mt-0.5" : void 0, props.ui?.box)));
+const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
+const labelGroupProps = computed(() => resolveSlot(ui.value.labelGroup, props.ui?.labelGroup));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const checkIconProps = computed(() => resolveSlot(ui.value.checkIcon, props.ui?.checkIcon));
+const indeterminateIconProps = computed(() => resolveSlot(ui.value.indeterminateIcon, props.ui?.indeterminateIcon));
+const glyphState = computed(() => props.modelValue === "indeterminate" ? "indeterminate" : props.modelValue ? "checked" : "unchecked");
+</script>
+
+<template>
+  <label v-bind="rootProps">
+    <CheckboxRoot
+      :id="checkboxId"
+      :model-value="modelValue"
+      :name="name ?? field?.name"
+      :disabled="disabled"
+      :required="required"
+      :aria-invalid="checkboxInvalid || void 0"
+      :aria-describedby="describedBy"
+      v-bind="boxProps"
+      @update:model-value="(value) => emit('update:modelValue', value)"
+    >
+      <CheckboxIndicator force-mount v-bind="indicatorProps">
+        <svg viewBox="0 0 24 24" :class="applyClassPrefix('size-full')" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 13l4 4L19 7" :data-state="glyphState" v-bind="checkIconProps" />
+          <path d="M5 12h14" :data-state="glyphState" v-bind="indeterminateIconProps" />
+        </svg>
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    <span v-if="description" v-bind="labelGroupProps">
+      <span v-if="label || $slots.default" v-bind="labelProps"><slot>{{ label }}</slot></span>
+      <span v-bind="descriptionProps">
+        <slot name="description">{{ description }}</slot>
+      </span>
+    </span>
+    <span v-else-if="label || $slots.default" v-bind="labelProps">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CheckboxThemeSlots } from '../theme/checkbox.js';
+import type { UiProp } from '../utils/ui.js';
+import { checkboxTheme } from '../theme/checkbox.js';
+type CheckboxVariants = VariantProps<typeof checkboxTheme>;
+export interface CheckboxProps {
+    id?: string;
+    name?: string;
+    modelValue?: boolean | 'indeterminate';
+    label?: string;
+    /** A second, muted line under the label - for a standalone checkbox (e.g. "Accept terms") where wrapping it in its own FormField would be needless ceremony. */
+    description?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    size?: CheckboxVariants['size'];
+    color?: CheckboxVariants['color'];
+    /** `card` wraps the checkbox and label in a bordered box, highlighted when checked - the same treatment RadioGroup's own `card` variant already applies per item. */
+    variant?: CheckboxVariants['variant'];
+    ui?: UiProp<CheckboxThemeSlots>;
+}
+export interface CheckboxEmits {
+    'update:modelValue': [value: boolean | 'indeterminate'];
+}
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    description?: (props: typeof __VLS_17) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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/Chip.d.vue.ts

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ChipThemeSlots } from '../theme/chip.js';
+import type { UiProp } from '../utils/ui.js';
+import { chipTheme } from '../theme/chip.js';
+type ChipVariants = VariantProps<typeof chipTheme>;
+export interface ChipProps {
+    label?: string;
+    icon?: string;
+    removable?: boolean;
+    /** Overrides the remove button's aria-label - it's icon-only, so it needs a name from somewhere. Defaults to "Remove {label}", or plain "Remove" without one. */
+    removeLabel?: string;
+    disabled?: boolean;
+    /** Fully-rounded pill shape instead of the default (Badge's own) small radius. */
+    rounded?: boolean;
+    color?: ChipVariants['color'];
+    variant?: ChipVariants['variant'];
+    size?: ChipVariants['size'];
+    ui?: UiProp<ChipThemeSlots>;
+}
+export interface ChipEmits {
+    remove: [];
+}
+declare var __VLS_1: {
+    class: unknown;
+}, __VLS_8: {}, __VLS_10: {
+    remove: () => void;
+    class: unknown;
+}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    remove?: (props: typeof __VLS_10) => any;
+} & {
+    'remove-icon'?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
+    onRemove?: (() => 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/Chip.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { chipTheme } from "../theme/chip";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  removable: { type: Boolean, required: false },
+  removeLabel: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  rounded: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["remove"]);
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("chip", chipTheme);
+const themeProps = useThemeProps("chip");
+const ui = computed(() => theme.value({
+  color: props.color ?? themeProps.value.color,
+  variant: props.variant,
+  size: props.size ?? themeProps.value.size,
+  disabled: props.disabled,
+  rounded: props.rounded,
+  removable: props.removable
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const effectiveRemoveLabel = computed(() => props.removeLabel ?? messages.value.removeItem(props.label));
+</script>
+
+<template>
+  <span v-bind="rootProps">
+    <slot name="icon" :class="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon).class">
+      <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+    </slot>
+    <span v-bind="resolveSlot(ui.label, props.ui?.label)">
+      <slot>{{ label }}</slot>
+    </span>
+    <!--
+      Unlike remove-icon (swaps just the glyph), this replaces the whole
+      control - needed when a host context has its own interactive element
+      that must BE the remove control (e.g. Reka TagsInput's
+      TagsInputItemDelete, which renders its own <button> and can't be
+      nested inside ours without recreating the button-in-button
+      corruption already fixed once for Select's clear button). The
+      scoped `class` still carries this slot's resolved/overridden
+      classes so a replacement can opt into matching Chip's own look.
+    -->
+    <slot
+      v-if="removable"
+      name="remove"
+      :class="resolveSlot(ui.remove, props.ui?.remove).class"
+      :remove="() => emit('remove')"
+    >
+      <button
+        type="button"
+        :disabled="disabled"
+        :aria-label="effectiveRemoveLabel"
+        v-bind="resolveSlot(ui.remove, props.ui?.remove)"
+        @click.stop="emit('remove')"
+      >
+        <slot name="remove-icon">
+          <Icon :name="icons.close" v-bind="resolveSlot(ui.removeIcon, props.ui?.removeIcon)" />
+        </slot>
+      </button>
+    </slot>
+  </span>
+</template>

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

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ChipThemeSlots } from '../theme/chip.js';
+import type { UiProp } from '../utils/ui.js';
+import { chipTheme } from '../theme/chip.js';
+type ChipVariants = VariantProps<typeof chipTheme>;
+export interface ChipProps {
+    label?: string;
+    icon?: string;
+    removable?: boolean;
+    /** Overrides the remove button's aria-label - it's icon-only, so it needs a name from somewhere. Defaults to "Remove {label}", or plain "Remove" without one. */
+    removeLabel?: string;
+    disabled?: boolean;
+    /** Fully-rounded pill shape instead of the default (Badge's own) small radius. */
+    rounded?: boolean;
+    color?: ChipVariants['color'];
+    variant?: ChipVariants['variant'];
+    size?: ChipVariants['size'];
+    ui?: UiProp<ChipThemeSlots>;
+}
+export interface ChipEmits {
+    remove: [];
+}
+declare var __VLS_1: {
+    class: unknown;
+}, __VLS_8: {}, __VLS_10: {
+    remove: () => void;
+    class: unknown;
+}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    remove?: (props: typeof __VLS_10) => any;
+} & {
+    'remove-icon'?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
+    onRemove?: (() => 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/CodeButton.d.vue.ts

@@ -0,0 +1,21 @@
+import type { CodeButtonThemeSlots } from '../theme/code-button.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = CodeButtonSlots;
+export interface CodeButtonProps {
+    /** Both the displayed text (unless the default slot overrides it) and what actually gets copied. */
+    code: string;
+    ui?: UiProp<CodeButtonThemeSlots>;
+}
+export interface CodeButtonSlots {
+    /** Overrides the displayed text - `code` still governs what's copied. */
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CodeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CodeButtonProps> & 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;
+    };
+};