@sewadah/selaras 0.1.1

package/dist/runtime/components/CodeButton.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { codeButtonTheme } from "../theme/code-button";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  code: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const icons = useIcons();
+const copied = ref(false);
+async function copy() {
+  await navigator.clipboard.writeText(props.code);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 1500);
+}
+const theme = useComponentTheme("codeButton", codeButtonTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+</script>
+
+<template>
+  <button type="button" v-bind="rootProps" @click="copy">
+    <slot>{{ code }}</slot>
+    <Icon :name="copied ? icons.check : icons.copy" v-bind="iconProps" />
+  </button>
+</template>

package/dist/runtime/components/CodeButton.vue.d.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;
+    };
+};

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/CodeGroup.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { cloneVNode, Comment, computed, Fragment, ref, Text, useSlots } from "vue";
+import { useMessages } from "../composables/use-messages";
+import Tabs from "./Tabs.vue";
+const slots = useSlots();
+const messages = useMessages();
+function flatten(vnodes) {
+  const result = [];
+  for (const vnode of vnodes) {
+    if (vnode.type === Comment || vnode.type === Text)
+      continue;
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      result.push(...flatten(vnode.children));
+      continue;
+    }
+    result.push(vnode);
+  }
+  return result;
+}
+const children = computed(() => flatten(slots.default?.() ?? []));
+function labelFor(child, index) {
+  const props = child.props ?? {};
+  return props.filename || props.language || messages.value.codeTabFallback(index + 1);
+}
+const tabItems = computed(() => children.value.map((child, index) => ({
+  label: labelFor(child, index),
+  value: String(index)
+})));
+const activeTab = ref("0");
+</script>
+
+<template>
+  <Tabs v-model="activeTab" :items="tabItems">
+    <template v-for="(child, index) in children" :key="index" #[String(index)]>
+      <!--
+        cloneVNode is required, not optional: this vnode was captured from
+        CodeGroup's own default slot and is being re-inserted several levels
+        deeper (inside Tabs/TabsContent/Presence) - rendering the raw,
+        already-positioned vnode object there directly causes a Vue
+        hydration-shape mismatch (Fragment vs text) the first time this
+        panel mounts. Cloning gives it a fresh identity for its new spot.
+      -->
+      <component :is="() => cloneVNode(child)" />
+    </template>
+  </Tabs>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+import type { CodeTreeThemeSlots } from '../theme/code-tree.js';
+import type { UiProp } from '../utils/ui.js';
+import type { FileTreeNode } from './FileTree.vue.js';
+export interface CodeTreeFile extends FileTreeNode {
+    /** The file's content - read for a leaf node once selected, ignored for a directory. */
+    code?: string;
+    children?: CodeTreeFile[];
+}
+export interface CodeTreeProps {
+    items: CodeTreeFile[];
+    /** Whether a directory starts expanded. @default true */
+    defaultExpanded?: boolean;
+    ui?: UiProp<CodeTreeThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<CodeTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CodeTreeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/CodeTree.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useMessages } from "../composables/use-messages";
+import { codeTreeTheme } from "../theme/code-tree";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import FileTree from "./FileTree.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  defaultExpanded: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+function findFirstFile(nodes) {
+  for (const node of nodes) {
+    if (!node.children)
+      return node;
+    const found = findFirstFile(node.children);
+    if (found)
+      return found;
+  }
+  return void 0;
+}
+const selected = ref(findFirstFile(props.items));
+watch(() => props.items, () => {
+  selected.value = findFirstFile(props.items);
+});
+const messages = useMessages();
+const theme = useComponentTheme("codeTree", codeTreeTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const treeProps = computed(() => resolveSlot(ui.value.tree, props.ui?.tree));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const preProps = computed(() => resolveSlot(ui.value.pre, props.ui?.pre));
+const emptyProps = computed(() => resolveSlot(ui.value.empty, props.ui?.empty));
+const fileTreeUi = { root: "rounded-none border-0 bg-transparent p-0" };
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <div v-bind="treeProps">
+      <FileTree
+        :items="items"
+        :selected="selected"
+        :default-expanded="defaultExpanded"
+        :ui="fileTreeUi"
+        @update:selected="selected = $event"
+      />
+    </div>
+    <div v-if="selected" v-bind="contentProps">
+      <pre v-bind="preProps">{{ selected.code }}</pre>
+    </div>
+    <div v-else v-bind="emptyProps">
+      {{ messages.selectFile }}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { CodeTreeThemeSlots } from '../theme/code-tree.js';
+import type { UiProp } from '../utils/ui.js';
+import type { FileTreeNode } from './FileTree.vue.js';
+export interface CodeTreeFile extends FileTreeNode {
+    /** The file's content - read for a leaf node once selected, ignored for a directory. */
+    code?: string;
+    children?: CodeTreeFile[];
+}
+export interface CodeTreeProps {
+    items: CodeTreeFile[];
+    /** Whether a directory starts expanded. @default true */
+    defaultExpanded?: boolean;
+    ui?: UiProp<CodeTreeThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<CodeTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CodeTreeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,44 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CollapsibleThemeSlots } from '../theme/collapsible.js';
+import type { UiProp } from '../utils/ui.js';
+import { collapsibleTheme } from '../theme/collapsible.js';
+type CollapsibleVariants = VariantProps<typeof collapsibleTheme>;
+type __VLS_Slots = CollapsibleSlots;
+export interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    size?: CollapsibleVariants['size'];
+    /** Which way the content reveals - `down` expands below the trigger, `up` above it. Flips the chevron's rest/open rotation to match. @default 'down' */
+    direction?: CollapsibleVariants['direction'];
+    ui?: UiProp<CollapsibleThemeSlots>;
+}
+export interface CollapsibleEmits {
+    'update:open': [value: boolean];
+}
+export interface CollapsibleSlots {
+    /** The trigger's own content (label, icon, whatever) - rendered inside a real button, alongside the chevron. */
+    'trigger'?: (props: {
+        open: boolean;
+    }) => any;
+    'default'?: (props: {
+        open: boolean;
+    }) => any;
+    /** Replaces the default chevron. */
+    'chevron-icon'?: (props: {
+        open: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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/Collapsible.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui";
+import { computed, ref, watch } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { collapsibleTheme } from "../theme/collapsible";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  open: { type: Boolean, required: false, default: void 0 },
+  defaultOpen: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  direction: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open"]);
+defineSlots();
+const icons = useIcons();
+const theme = useComponentTheme("collapsible", collapsibleTheme);
+const ui = computed(() => theme.value({ size: props.size, direction: props.direction }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const chevronProps = computed(() => resolveSlot(ui.value.chevron, props.ui?.chevron));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const contentInnerProps = computed(() => resolveSlot(ui.value.contentInner, props.ui?.contentInner));
+const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
+watch(() => props.open, (value) => {
+  if (value !== void 0)
+    internalOpen.value = value;
+});
+function onUpdateOpen(value) {
+  internalOpen.value = value;
+  emit("update:open", value);
+}
+</script>
+
+<template>
+  <CollapsibleRoot :open="internalOpen" :disabled="disabled" v-bind="rootProps" @update:open="onUpdateOpen">
+    <CollapsibleTrigger v-bind="triggerProps">
+      <slot name="trigger" :open="internalOpen" />
+      <slot name="chevron-icon" :open="internalOpen">
+        <Icon :name="icons.chevronDown" v-bind="chevronProps" />
+      </slot>
+    </CollapsibleTrigger>
+    <CollapsibleContent v-bind="contentProps">
+      <div v-bind="contentInnerProps">
+        <slot :open="internalOpen" />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

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

@@ -0,0 +1,44 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CollapsibleThemeSlots } from '../theme/collapsible.js';
+import type { UiProp } from '../utils/ui.js';
+import { collapsibleTheme } from '../theme/collapsible.js';
+type CollapsibleVariants = VariantProps<typeof collapsibleTheme>;
+type __VLS_Slots = CollapsibleSlots;
+export interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    size?: CollapsibleVariants['size'];
+    /** Which way the content reveals - `down` expands below the trigger, `up` above it. Flips the chevron's rest/open rotation to match. @default 'down' */
+    direction?: CollapsibleVariants['direction'];
+    ui?: UiProp<CollapsibleThemeSlots>;
+}
+export interface CollapsibleEmits {
+    'update:open': [value: boolean];
+}
+export interface CollapsibleSlots {
+    /** The trigger's own content (label, icon, whatever) - rendered inside a real button, alongside the chevron. */
+    'trigger'?: (props: {
+        open: boolean;
+    }) => any;
+    'default'?: (props: {
+        open: boolean;
+    }) => any;
+    /** Replaces the default chevron. */
+    'chevron-icon'?: (props: {
+        open: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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/ColorModeToggle.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ColorModeToggle.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from "vue";
+import { useColorMode } from "#imports";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import Button from "./Button.vue";
+const colorMode = useColorMode();
+const icons = useIcons();
+const messages = useMessages();
+const isDark = computed(() => colorMode.value === "dark");
+function toggle() {
+  colorMode.preference = isDark.value ? "light" : "dark";
+}
+</script>
+
+<template>
+  <Button
+    :icon="isDark ? icons.darkMode : icons.lightMode"
+    variant="ghost"
+    color="neutral"
+    :aria-label="messages.colorModeToggle"
+    @click="toggle"
+  />
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,30 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { UiProp } from '../utils/ui.js';
+import { colorPickerTheme } from '../theme/color-picker.js';
+type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
+export interface ColorPickerProps {
+    modelValue?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    /** Shows an alpha (opacity) slider alongside hue. Reka's own hex output already extends to 8-digit hex (`#RRGGBBAA`) once alpha drops below 1, so this only toggles whether that channel is reachable in the UI - not a format change. @default true */
+    alpha?: boolean;
+    /** A row of preset colors shown below the hex field - omitted entirely (no swatch row) unless given. */
+    swatches?: string[];
+    placeholder?: string;
+    /** Below a 768px viewport width, presents the popover as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`), matching Select/Autocomplete/DatePicker's own mobileModal. */
+    mobileModal?: boolean;
+    size?: ColorPickerVariants['size'];
+    color?: ColorPickerVariants['color'];
+    ui?: UiProp<ColorPickerThemeSlots>;
+}
+export interface ColorPickerEmits {
+    'update:modelValue': [value: string];
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ColorPicker.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { ColorSwatch } from "reka-ui";
+import { computed, ref, watch } from "vue";
+import { useIsMobile } from "../composables/use-media-query";
+import { useMessages } from "../composables/use-messages";
+import ColorPickerBody from "../internal/ColorPickerBody.vue";
+import { colorPickerTheme } from "../theme/color-picker";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Modal from "./Modal.vue";
+import Popover from "./Popover.vue";
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  alpha: { type: Boolean, required: false, default: true },
+  swatches: { type: Array, required: false },
+  placeholder: { type: String, required: false },
+  mobileModal: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const messages = useMessages();
+const internalColor = ref(props.modelValue ?? props.defaultValue ?? "#000000");
+watch(() => props.modelValue, (value) => {
+  if (value !== void 0)
+    internalColor.value = value;
+});
+function onUpdateColor(value) {
+  internalColor.value = value;
+  emit("update:modelValue", value);
+}
+const internalOpen = ref(false);
+function onUpdateOpen(value) {
+  internalOpen.value = value;
+}
+const isMobile = useIsMobile();
+const showMobileModal = computed(() => props.mobileModal && isMobile.value);
+const theme = useComponentTheme("colorPicker", colorPickerTheme);
+const ui = computed(() => theme.value({ size: props.size, color: props.color }));
+const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const triggerSwatchProps = computed(() => resolveSlot(ui.value.triggerSwatch, props.ui?.triggerSwatch));
+const triggerValueProps = computed(() => resolveSlot(ui.value.triggerValue, props.ui?.triggerValue));
+const areaProps = computed(() => resolveSlot(ui.value.area, props.ui?.area));
+const thumbProps = computed(() => resolveSlot(ui.value.thumb, props.ui?.thumb));
+const sliderRootProps = computed(() => resolveSlot(ui.value.sliderRoot, props.ui?.sliderRoot));
+const trackProps = computed(() => resolveSlot(ui.value.track, props.ui?.track));
+const fieldProps = computed(() => resolveSlot(ui.value.field, props.ui?.field));
+const swatchListProps = computed(() => resolveSlot(ui.value.swatchList, props.ui?.swatchList));
+const swatchProps = computed(() => resolveSlot(ui.value.swatch, props.ui?.swatch));
+const swatchFillProps = computed(() => resolveSlot(ui.value.swatchFill, props.ui?.swatchFill));
+const swatchIndicatorProps = computed(() => resolveSlot(ui.value.swatchIndicator, props.ui?.swatchIndicator));
+const bodyProps = computed(() => ({
+  modelValue: internalColor.value,
+  disabled: props.disabled,
+  alpha: props.alpha,
+  swatches: props.swatches,
+  placeholder: props.placeholder,
+  areaProps: areaProps.value,
+  thumbProps: thumbProps.value,
+  sliderRootProps: sliderRootProps.value,
+  trackProps: trackProps.value,
+  fieldProps: fieldProps.value,
+  swatchListProps: swatchListProps.value,
+  swatchProps: swatchProps.value,
+  swatchFillProps: swatchFillProps.value,
+  swatchIndicatorProps: swatchIndicatorProps.value
+}));
+const popoverUi = computed(() => ({ content: resolveSlot(ui.value.content, props.ui?.content) }));
+const mobileModalUi = computed(() => ({ content: "rounded-[var(--ui-radius-md)]" }));
+const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
+</script>
+
+<template>
+  <Popover v-if="!showMobileModal" :open="internalOpen" :ui="popoverUi" @update:open="onUpdateOpen">
+    <button
+      type="button"
+      :disabled="disabled"
+      :aria-label="messages.colorPicker"
+      v-bind="triggerProps"
+    >
+      <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
+      <span v-bind="triggerValueProps">{{ internalColor }}</span>
+    </button>
+
+    <template #content>
+      <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
+    </template>
+  </Popover>
+
+  <Modal
+    v-else :open="internalOpen" :title="messages.colorPicker" :description="messages.colorPickerDescription"
+    :ui="mobileModalUi" @update:open="onUpdateOpen"
+  >
+    <button
+      type="button"
+      :disabled="disabled"
+      :aria-label="messages.colorPicker"
+      v-bind="triggerProps"
+    >
+      <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
+      <span v-bind="triggerValueProps">{{ internalColor }}</span>
+    </button>
+
+    <template #content>
+      <div v-bind="mobileContentProps">
+        <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
+      </div>
+    </template>
+  </Modal>
+</template>

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

@@ -0,0 +1,30 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { UiProp } from '../utils/ui.js';
+import { colorPickerTheme } from '../theme/color-picker.js';
+type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
+export interface ColorPickerProps {
+    modelValue?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    /** Shows an alpha (opacity) slider alongside hue. Reka's own hex output already extends to 8-digit hex (`#RRGGBBAA`) once alpha drops below 1, so this only toggles whether that channel is reachable in the UI - not a format change. @default true */
+    alpha?: boolean;
+    /** A row of preset colors shown below the hex field - omitted entirely (no swatch row) unless given. */
+    swatches?: string[];
+    placeholder?: string;
+    /** Below a 768px viewport width, presents the popover as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`), matching Select/Autocomplete/DatePicker's own mobileModal. */
+    mobileModal?: boolean;
+    size?: ColorPickerVariants['size'];
+    color?: ColorPickerVariants['color'];
+    ui?: UiProp<ColorPickerThemeSlots>;
+}
+export interface ColorPickerEmits {
+    'update:modelValue': [value: string];
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Column.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Never renders real DOM - STable reads this component's VNode props/slots
+ * directly out of its own default slot (via table-columns.ts) to build a
+ * TanStack ColumnDef, a technique several Vue table libraries use for a
+ * <Table>/<Column> children-as-config API. Mounting <SColumn> anywhere
+ * other than inside <STable> is a silent no-op, never an error.
+ *
+ * Three named slots read the same way: `default` (scoped with `{ row,
+ * value }`) customizes a cell's content, `header`/`footer` (scoped with
+ * `{ column }`) customize the column's header/footer cell - all three fall
+ * back to the plain `header`/`footer` string props when unset.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    header: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    footer: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sticks this column to the left/right edge during horizontal scroll. */
+    pinned: {
+        type: () => "left" | "right" | undefined;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    header: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    footer: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sticks this column to the left/right edge during horizontal scroll. */
+    pinned: {
+        type: () => "left" | "right" | undefined;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    header: string;
+    footer: string;
+    sortable: boolean;
+    filterable: boolean;
+    pinned: "right" | "left" | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;