@sewadah/selaras 0.1.1

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

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SplitterResizeHandleThemeSlots } from '../theme/splitter-resize-handle.js';
+import type { UiProp } from '../utils/ui.js';
+import { splitterResizeHandleTheme } from '../theme/splitter-resize-handle.js';
+type SplitterResizeHandleVariants = VariantProps<typeof splitterResizeHandleTheme>;
+export interface SplitterResizeHandleProps {
+    /** Match the parent Splitter's own `direction` - this isn't read from it automatically. @default 'horizontal' */
+    direction?: SplitterResizeHandleVariants['direction'];
+    disabled?: boolean;
+    ui?: UiProp<SplitterResizeHandleThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SplitterResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SplitterResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,57 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { StepperThemeSlots } from '../theme/stepper.js';
+import type { UiProp } from '../utils/ui.js';
+import { stepperTheme } from '../theme/stepper.js';
+type StepperVariants = VariantProps<typeof stepperTheme>;
+type StepState = 'inactive' | 'active' | 'completed';
+export interface Step {
+    title?: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type __VLS_Slots = StepperSlots;
+export interface StepperProps {
+    items: Step[];
+    modelValue?: number;
+    defaultValue?: number;
+    /** Restricts clicking a step to at most one ahead of the current one - going back to any earlier/completed step is always allowed regardless. @default true */
+    linear?: boolean;
+    orientation?: StepperVariants['orientation'];
+    size?: StepperVariants['size'];
+    color?: StepperVariants['color'];
+    ui?: UiProp<StepperThemeSlots>;
+}
+export interface StepperEmits {
+    'update:modelValue': [value: number];
+}
+export interface StepperSlots {
+    indicator?: (props: {
+        item: Step;
+        index: number;
+        state: StepState;
+    }) => any;
+    title?: (props: {
+        item: Step;
+        index: number;
+        state: StepState;
+    }) => any;
+    description?: (props: {
+        item: Step;
+        index: number;
+        state: StepState;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<StepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<StepperProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => 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/Stepper.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { stepperTheme } from "../theme/stepper";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  modelValue: { type: Number, required: false },
+  defaultValue: { type: Number, required: false },
+  linear: { type: Boolean, required: false, default: true },
+  orientation: { type: null, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+defineSlots();
+const icons = useIcons();
+const theme = useComponentTheme("stepper", stepperTheme);
+const ui = computed(() => theme.value({
+  orientation: props.orientation,
+  size: props.size,
+  color: props.color
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
+const connectorProps = computed(() => resolveSlot(ui.value.connector, props.ui?.connector));
+const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const labelsProps = computed(() => resolveSlot(ui.value.labels, props.ui?.labels));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+</script>
+
+<template>
+  <StepperRoot
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :linear="linear"
+    :orientation="orientation"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <StepperItem
+      v-for="(item, index) in items"
+      :key="index"
+      v-slot="{ state }"
+      :step="index + 1"
+      :disabled="item.disabled"
+      v-bind="itemProps"
+    >
+      <!--
+        The separator lives inside its *preceding* item (not as a
+        root-level sibling between items) - Reka's own StepperSeparator
+        injects that item's context internally, so it can only be
+        rendered as a descendant of the StepperItem it belongs to.
+        Pairing it with the indicator here (rather than the labels below)
+        is what lets a thin line center against the indicator's own
+        height for free, via this row's own `items-center`.
+      -->
+      <div v-bind="connectorProps">
+        <StepperTrigger v-bind="triggerProps">
+          <!--
+            StepperIndicator, unlike StepperItem/StepperTrigger/
+            StepperSeparator, never sets data-state on itself (confirmed
+            by reading Reka's compiled source) - passed through manually
+            here so the theme's own data-[state=completed] fill actually
+            has something to match against.
+          -->
+          <StepperIndicator :data-state="state" v-bind="indicatorProps">
+            <slot name="indicator" :item="item" :index="index" :state="state">
+              <Icon v-if="state === 'completed'" :name="icons.check" v-bind="iconProps" />
+              <Icon v-else-if="item.icon" :name="item.icon" v-bind="iconProps" />
+              <template v-else>
+                {{ index + 1 }}
+              </template>
+            </slot>
+          </StepperIndicator>
+        </StepperTrigger>
+        <StepperSeparator v-if="index < items.length - 1" v-bind="separatorProps" />
+      </div>
+      <div v-if="item.title || item.description || $slots.title || $slots.description" v-bind="labelsProps">
+        <StepperTitle v-if="item.title || $slots.title" v-bind="titleProps">
+          <slot name="title" :item="item" :index="index" :state="state">
+            {{ item.title }}
+          </slot>
+        </StepperTitle>
+        <StepperDescription v-if="item.description || $slots.description" v-bind="descriptionProps">
+          <slot name="description" :item="item" :index="index" :state="state">
+            {{ item.description }}
+          </slot>
+        </StepperDescription>
+      </div>
+    </StepperItem>
+  </StepperRoot>
+</template>

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

@@ -0,0 +1,57 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { StepperThemeSlots } from '../theme/stepper.js';
+import type { UiProp } from '../utils/ui.js';
+import { stepperTheme } from '../theme/stepper.js';
+type StepperVariants = VariantProps<typeof stepperTheme>;
+type StepState = 'inactive' | 'active' | 'completed';
+export interface Step {
+    title?: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type __VLS_Slots = StepperSlots;
+export interface StepperProps {
+    items: Step[];
+    modelValue?: number;
+    defaultValue?: number;
+    /** Restricts clicking a step to at most one ahead of the current one - going back to any earlier/completed step is always allowed regardless. @default true */
+    linear?: boolean;
+    orientation?: StepperVariants['orientation'];
+    size?: StepperVariants['size'];
+    color?: StepperVariants['color'];
+    ui?: UiProp<StepperThemeSlots>;
+}
+export interface StepperEmits {
+    'update:modelValue': [value: number];
+}
+export interface StepperSlots {
+    indicator?: (props: {
+        item: Step;
+        index: number;
+        state: StepState;
+    }) => any;
+    title?: (props: {
+        item: Step;
+        index: number;
+        state: StepState;
+    }) => any;
+    description?: (props: {
+        item: Step;
+        index: number;
+        state: StepState;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<StepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<StepperProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => 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/Switch.d.vue.ts

@@ -0,0 +1,49 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SwitchThemeSlots } from '../theme/switch.js';
+import type { UiProp } from '../utils/ui.js';
+import { switchTheme } from '../theme/switch.js';
+type SwitchVariants = VariantProps<typeof switchTheme>;
+export interface SwitchProps {
+    id?: string;
+    name?: string;
+    modelValue?: boolean;
+    label?: string;
+    /** A second, muted line under the label - for a standalone toggle (e.g. a settings list) where wrapping every switch in its own FormField would be needless ceremony. */
+    description?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    size?: SwitchVariants['size'];
+    color?: SwitchVariants['color'];
+    /** Shows a spinner in the thumb. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy switch shouldn't be touchable. Takes precedence over checkedIcon/uncheckedIcon. */
+    loading?: boolean;
+    /** Icon shown in the thumb when on. */
+    checkedIcon?: string;
+    /** Icon shown in the thumb when off. */
+    uncheckedIcon?: string;
+    ui?: UiProp<SwitchThemeSlots>;
+}
+export interface SwitchEmits {
+    'update:modelValue': [value: boolean];
+}
+declare var __VLS_30: {}, __VLS_32: {}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_30) => any;
+} & {
+    description?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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/Switch.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { computed } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { switchTheme } from "../theme/switch";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: Boolean, 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 },
+  loading: { type: Boolean, required: false },
+  checkedIcon: { type: String, required: false },
+  uncheckedIcon: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const field = useFormField();
+const switchId = computed(() => props.id ?? field?.id);
+const switchInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const describedBy = computed(() => field?.describedBy.value);
+const theme = useComponentTheme("switch", switchTheme);
+const ui = computed(() => theme.value({ invalid: switchInvalid.value, size: effectiveSize.value, color: props.color }));
+const rootProps = useRootProps(() => ui.value.root, () => withFallthroughClass(props.description ? "items-start" : void 0, props.ui?.root));
+const trackProps = computed(() => resolveSlot(ui.value.track, withFallthroughClass(props.description ? "mt-0.5" : void 0, props.ui?.track)));
+const thumbProps = computed(() => resolveSlot(ui.value.thumb, props.ui?.thumb));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+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 icons = useIcons();
+</script>
+
+<template>
+  <label v-bind="rootProps">
+    <SwitchRoot
+      :id="switchId"
+      :model-value="modelValue"
+      :name="name ?? field?.name"
+      :disabled="disabled"
+      :required="required"
+      :aria-invalid="switchInvalid || void 0"
+      :aria-describedby="describedBy"
+      v-bind="trackProps"
+      @update:model-value="(value) => emit('update:modelValue', value)"
+    >
+      <SwitchThumb v-bind="thumbProps">
+        <Icon v-if="loading" :name="icons.loading" :class="applyClassPrefix('animate-spin')" v-bind="iconProps" />
+        <Icon v-else-if="modelValue && checkedIcon" :name="checkedIcon" v-bind="iconProps" />
+        <Icon v-else-if="!modelValue && uncheckedIcon" :name="uncheckedIcon" v-bind="iconProps" />
+      </SwitchThumb>
+    </SwitchRoot>
+    <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/Switch.vue.d.ts

@@ -0,0 +1,49 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SwitchThemeSlots } from '../theme/switch.js';
+import type { UiProp } from '../utils/ui.js';
+import { switchTheme } from '../theme/switch.js';
+type SwitchVariants = VariantProps<typeof switchTheme>;
+export interface SwitchProps {
+    id?: string;
+    name?: string;
+    modelValue?: boolean;
+    label?: string;
+    /** A second, muted line under the label - for a standalone toggle (e.g. a settings list) where wrapping every switch in its own FormField would be needless ceremony. */
+    description?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    size?: SwitchVariants['size'];
+    color?: SwitchVariants['color'];
+    /** Shows a spinner in the thumb. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy switch shouldn't be touchable. Takes precedence over checkedIcon/uncheckedIcon. */
+    loading?: boolean;
+    /** Icon shown in the thumb when on. */
+    checkedIcon?: string;
+    /** Icon shown in the thumb when off. */
+    uncheckedIcon?: string;
+    ui?: UiProp<SwitchThemeSlots>;
+}
+export interface SwitchEmits {
+    'update:modelValue': [value: boolean];
+}
+declare var __VLS_30: {}, __VLS_32: {}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_30) => any;
+} & {
+    description?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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/Table.d.vue.ts

@@ -0,0 +1,83 @@
+import type { TableThemeSlots } from '../theme/table.js';
+import type { UiProp } from '../utils/ui.js';
+export interface TableProps {
+    data: unknown[];
+    columns?: any[];
+    selectable?: boolean;
+    pageSize?: number;
+    loading?: boolean;
+    sorting?: any[];
+    defaultSorting?: any[];
+    rowSelection?: Record<string, boolean>;
+    globalFilter?: string;
+    pageIndex?: number;
+    size?: 'sm' | 'md' | 'lg';
+    gridlines?: boolean;
+    striped?: boolean;
+    expandable?: boolean;
+    expanded?: any;
+    columnVisibility?: Record<string, boolean>;
+    columnToggle?: boolean;
+    /** Enables vertical scroll with a sticky header, capped at this CSS height (e.g. '24rem'). */
+    scrollHeight?: string;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    /** Opts out of the local sorted/filtered/paginated row models - set when `data` is already sorted/filtered/paginated server-side, so this table doesn't redundantly (and incorrectly) reprocess an already-server-processed slice. `sorting`/`globalFilter`/`pageIndex` still drive the UI and still emit their `update:*` events the same way - only the *local row model* is skipped, not the state itself. `manualPagination` also suppresses the built-in Pagination UI entirely (there's no way to know the real page count from a server-paginated slice) - bring your own `SPagination`, bound to your own server metadata, the same way this table already expects you to bring your own search input for `globalFilter`. */
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    manualPagination?: boolean;
+    /** Adds a class to a body row based on its own data - e.g. highlighting a flagged row. Called per row, not per render, so keep it cheap. */
+    rowClass?: (row: unknown) => string | undefined;
+    /** Same as `rowClass`, for inline styles. */
+    rowStyle?: (row: unknown) => Record<string, string> | undefined;
+    ui?: UiProp<TableThemeSlots>;
+}
+export interface TableEmits {
+    'update:sorting': [value: any[]];
+    'update:rowSelection': [value: Record<string, boolean>];
+    'update:globalFilter': [value: string];
+    'update:pageIndex': [value: number];
+    'update:expanded': [value: any];
+    'update:columnVisibility': [value: Record<string, boolean>];
+    'rowClick': [row: unknown, event: MouseEvent];
+    'rowContextmenu': [row: unknown, event: MouseEvent];
+}
+declare var __VLS_44: {
+    row: import("@tanstack/vue-table").RowData;
+}, __VLS_51: {};
+type __VLS_Slots = {} & {
+    expanded?: (props: typeof __VLS_44) => any;
+} & {
+    empty?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableProps, {
+    exportCsv: (filename?: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sorting": (value: any[]) => any;
+    "update:rowSelection": (value: Record<string, boolean>) => any;
+    "update:globalFilter": (value: string) => any;
+    "update:pageIndex": (value: number) => any;
+    "update:expanded": (value: any) => any;
+    "update:columnVisibility": (value: Record<string, boolean>) => any;
+    rowClick: (row: unknown, event: MouseEvent) => any;
+    rowContextmenu: (row: unknown, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{
+    "onUpdate:sorting"?: ((value: any[]) => any) | undefined;
+    "onUpdate:rowSelection"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
+    "onUpdate:pageIndex"?: ((value: number) => any) | undefined;
+    "onUpdate:expanded"?: ((value: any) => any) | undefined;
+    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
+    onRowClick?: ((row: unknown, event: MouseEvent) => any) | undefined;
+    onRowContextmenu?: ((row: unknown, event: MouseEvent) => 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;
+    };
+};