@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/controller-target.d.ts

@@ -0,0 +1,49 @@
+import type { Primitive } from "@ui-sdk/core";
+import { type Slots } from "vue";
+import { type PrimitiveHandle } from "./use-primitive.js";
+/**
+ * The component a part of `primitive` connects to: the one its controller is
+ * attached to, from anywhere on the page, or else the one it sits in. So a
+ * trigger inside one dialog that names another's controller opens the other,
+ * once that one mounts. Reading it in a render tracks it, so a part renders
+ * again once the component mounts. Call in `setup`.
+ */
+declare function useControllerTarget<P extends Primitive>(primitive: P, controller: () => object | undefined): () => PrimitiveHandle<P> | undefined;
+declare function useControllerEntry(controller: () => object | undefined, value: unknown): void;
+/**
+ * Shares the component a trigger connects to through its controller with the
+ * parts inside the trigger, like a select's value, in its default slot or its
+ * `render` slot. Call in the trigger's `setup`.
+ */
+declare function provideConnected<P extends Primitive>(primitive: P, handle: () => PrimitiveHandle<P> | undefined): void;
+/**
+ * The component of a part that may sit inside a trigger: the one the trigger
+ * connects to, undefined until that one mounts, or else its root's. Render it
+ * with `useConnectedPart`. Throws outside both, like `useHandle`. Call in `setup`.
+ */
+declare function useConnectedHandle<P extends Primitive>(primitive: P): () => PrimitiveHandle<P> | undefined;
+/**
+ * A part whose component isn't known yet, like a trigger a controller
+ * connects before its popup mounts: its element without a part, rendered the
+ * way a part renders, with a neutral `state` for its slots and `children`, its
+ * own content, like a value's placeholder.
+ */
+declare function renderUnbound<State extends object>(tag: string, props: Record<string, unknown>, { slots, state, children, }: {
+    slots: Slots;
+    state: State;
+    children?: (state: State) => unknown;
+}): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+/**
+ * Renders a part that may find its component through a controller, like a
+ * trigger outside its popup: `unbound` until `handle()` gives a component,
+ * then the render `bind` makes for that component, the way `usePart` makes
+ * one in setup. Both render from this one component, which binds again when
+ * the component changes, so the element, and the focus on it, stay. Call in
+ * `setup`; it returns the render function.
+ */
+declare function useConnectedPart<H extends PrimitiveHandle<Primitive>>(handle: () => H | undefined, bind: (handle: H) => () => unknown, unbound: () => unknown): () => unknown;
+export { provideConnected, renderUnbound, useConnectedHandle, useConnectedPart, useControllerEntry, useControllerTarget, };

package/dist/controller-target.js

@@ -0,0 +1,112 @@
+// src/controller-target.ts
+import {
+  effectScope,
+  inject,
+  onScopeDispose,
+  provide,
+  shallowRef,
+  watchPostEffect
+} from "vue";
+import {
+  renderElement,
+  useHandle,
+  useScope
+} from "./use-primitive.js";
+var controlled = /* @__PURE__ */ new WeakMap();
+function controlledRef(controller) {
+  let current = controlled.get(controller);
+  if (!current) {
+    controlled.set(controller, current = shallowRef(void 0));
+  }
+  return current;
+}
+function useControllerTarget(primitive, controller) {
+  const nearest = useScope(primitive)?.handle;
+  return () => {
+    const current = controller();
+    return (current && controlledRef(current).value) ?? nearest;
+  };
+}
+function useControllerEntry(controller, value) {
+  watchPostEffect((onCleanup) => {
+    const current = controller();
+    if (!current) {
+      return;
+    }
+    const entry = controlledRef(current);
+    entry.value = value;
+    onCleanup(() => {
+      if (entry.value === value) {
+        entry.value = void 0;
+      }
+    });
+  });
+}
+var connectedKeys = /* @__PURE__ */ new WeakMap();
+function connectedKey(primitive) {
+  let key = connectedKeys.get(primitive);
+  if (!key) {
+    connectedKeys.set(primitive, key = /* @__PURE__ */ Symbol(`${primitive.name}-connected`));
+  }
+  return key;
+}
+function provideConnected(primitive, handle) {
+  provide(
+    connectedKey(primitive),
+    handle
+  );
+}
+function useConnectedHandle(primitive) {
+  const connected = inject(connectedKey(primitive), null);
+  if (connected) {
+    return connected;
+  }
+  const handle = useHandle(primitive);
+  return () => handle;
+}
+function renderUnbound(tag, props, {
+  slots,
+  state,
+  children
+}) {
+  return renderElement(props, slots, state, { tag, children });
+}
+function watchedRefs(handle) {
+  let lastRef;
+  const watched = Object.create(handle);
+  watched.slot = (name, props, user) => {
+    const result = handle.slot(name, props, user);
+    lastRef = result.ref;
+    return result;
+  };
+  return { handle: watched, release: () => lastRef?.(null) };
+}
+function useConnectedPart(handle, bind, unbound) {
+  let current;
+  let bound;
+  onScopeDispose(() => bound?.scope.stop());
+  return () => {
+    const next = handle();
+    if (next !== current) {
+      current = next;
+      bound?.release();
+      bound?.scope.stop();
+      bound = next && bindTo(next, bind);
+    }
+    return bound ? bound.render() : unbound();
+  };
+}
+function bindTo(handle, bind) {
+  const scope = effectScope(true);
+  const watched = watchedRefs(handle);
+  const render = scope.run(() => bind(watched.handle));
+  return { scope, render, release: watched.release };
+}
+export {
+  provideConnected,
+  renderUnbound,
+  useConnectedHandle,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget
+};

package/dist/create-parts.d.ts

@@ -0,0 +1,126 @@
+import type { OptionsOf, Primitive, PropsOf, SlotName, StateOf, TypesOf } from "@ui-sdk/core";
+import { type PrimitiveGeneric } from "@ui-sdk/core/renderer";
+import { type DefineSetupFnComponent, type EmitsToProps, type HTMLAttributes, type IntrinsicElementAttributes, type PublicProps, type SlotsType, type VNode } from "vue";
+import { type StateSlots } from "./use-primitive.js";
+type Pascal<Name extends string> = Name extends `${infer Head}-${infer Tail}` ? `${Capitalize<Head>}${Pascal<Tail>}` : Capitalize<Name>;
+type CallbackKeys<Props> = {
+    [Key in keyof Props & `on${string}`]-?: NonNullable<Props[Key]> extends (...args: never[]) => unknown ? Key : never;
+}[keyof Props & `on${string}`];
+type CallbackArgs<Props, Key extends keyof Props> = Parameters<Extract<NonNullable<Props[Key]>, (...args: never[]) => unknown>>;
+/**
+ * A part's events: `<name>` for each `on<Name>` prop, and `update:<key>` for
+ * each `on<Key>Change` when there's a `<key>` prop, for `v-model:<key>`.
+ */
+type Emits<Props> = {
+    [Key in CallbackKeys<Props> as Key extends `on${infer Name}` ? Uncapitalize<Name> : never]: (...args: CallbackArgs<Props, Key>) => true;
+} & {
+    [Key in CallbackKeys<Props> as Key extends `on${infer Model}Change` ? Uncapitalize<Model> extends keyof Props ? `update:${Uncapitalize<Model>}` : never : never]: (value: CallbackArgs<Props, Key>[0]) => true;
+};
+type ModelKey<Props, Keys = ["value", "checked", "pressed", "open", "page", "layout"]> = Keys extends [infer Key extends string, ...infer Rest] ? Key extends keyof Props ? `on${Capitalize<Key>}Change` extends CallbackKeys<Props> ? Key : ModelKey<Props, Rest> : ModelKey<Props, Rest> : never;
+type Model<Props> = [ModelKey<Props>] extends [never] ? {} : {
+    modelValue?: Props[ModelKey<Props> & keyof Props];
+};
+type ModelEmits<Props> = [ModelKey<Props>] extends [never] ? {} : {
+    "update:modelValue": (value: CallbackArgs<Props, `on${Capitalize<ModelKey<Props>>}Change` & CallbackKeys<Props>>[0]) => true;
+};
+/**
+ * The attributes and events of the element `Tag`, which fall through to a part
+ * that renders it, with `data-*` attributes, which a template hands a
+ * component in camel case.
+ */
+type ElementAttributes<Tag extends string> = (Tag extends keyof IntrinsicElementAttributes ? IntrinsicElementAttributes[Tag] : HTMLAttributes) & {
+    [attribute: `data${Capitalize<string>}`]: unknown;
+};
+type FallthroughOf<Tag extends string, Props> = Omit<ElementAttributes<Tag>, keyof Props>;
+type Component = new (...args: any[]) => {
+    $props: object;
+};
+/**
+ * A part that also takes the attributes and events of the element `Tag` it
+ * renders, under strict templates too. One construct signature, so a template
+ * and `InstanceType` both see them.
+ */
+type ElementPart<Part extends Component, Tag extends string> = Pick<Part, keyof Part> & ElementConstructor<Part, Tag>;
+interface ElementConstructor<Part extends Component, Tag extends string> {
+    new (...args: any[]): ElementInstance<Part, Tag>;
+}
+type ElementInstance<Part extends Component, Tag extends string> = InstanceType<Part> & {
+    $props: FallthroughOf<Tag, InstanceType<Part>["$props"]>;
+};
+/**
+ * Types a part written by hand to take the attributes and events of the
+ * element it renders, the way `createParts` types its parts.
+ */
+declare function withElement<Tag extends string, Part extends Component>(_tag: Tag, part: Part): ElementPart<Part, Tag>;
+type PartComponent<Props, State, Tag extends string> = ElementPart<DefineSetupFnComponent<Omit<Props, CallbackKeys<Props>>, Emits<Props>, StateSlots<State>>, Tag>;
+type GenericProps<Props, Tag extends string = never> = Props & EmitsToProps<Emits<Props>> & PublicProps & ([Tag] extends [never] ? {} : FallthroughOf<Tag, Props>);
+type GenericRootProps<Props, Tag extends string = never> = GenericProps<Props, Tag> & Model<Props> & EmitsToProps<ModelEmits<Props>>;
+/**
+ * A hand-written root's component type, for one generic over its value like
+ * `createParts`' roots: `new <T>(props: RootPropsOf<Options<T>>) => RootInstanceOf<Options<T>>`.
+ * Callbacks are events and plain `v-model` binds the main value. A union of
+ * options, like one shape per `multiple`, keeps each shape's own.
+ */
+type RootPropsOf<Props, Tag extends string = never> = GenericRootProps<Props, Tag>;
+type RootInstanceOf<Props, State = {}, Tag extends string = never> = InstanceType<RootPart<Props, State, Tag>>;
+type RenderableWith<Props, State = {}, Tag extends string = never> = new (props: never) => RootInstanceOf<Props, State, Tag>;
+type RootSlot<P extends Primitive> = "root" & SlotName<P>;
+type GenericOf<P> = P extends {
+    generic?: infer G extends PrimitiveGeneric;
+} ? G : never;
+type Applied<G, T, U> = G & {
+    T: T;
+    U: U;
+};
+type DefaultOf<G extends PrimitiveGeneric, K extends "T" | "U"> = G extends {
+    defaults: Record<K, infer D>;
+} ? D & G[K] : G[K];
+type StateIn<P extends Primitive, S extends SlotName<P>, A> = A extends {
+    state: Record<S, infer State>;
+} ? State : StateOf<P, S>;
+type RootProps<P extends Primitive, Options, Tag extends string> = Options & ([Tag] extends [never] ? {} : PropsOf<P, RootSlot<P>>);
+type RootSlots<State, HasTag> = HasTag extends true ? StateSlots<State> : SlotsType<{
+    default?: () => VNode[];
+}>;
+type RootComponent<Props, State, HasTag> = DefineSetupFnComponent<Omit<Props, CallbackKeys<Props>> & Model<Props>, Emits<Props> & ModelEmits<Props>, RootSlots<State, HasTag>>;
+type RootPart<Props, State, Tag extends string> = [Tag] extends [never] ? RootComponent<Props, State, false> : ElementPart<RootComponent<Props, State, true>, Tag>;
+type RootOf<P extends Primitive, Tag extends string> = [GenericOf<P>] extends [
+    never
+] ? RootPart<RootProps<P, OptionsOf<P>, Tag>, StateOf<P, RootSlot<P>>, Tag> : new <A extends GenericOf<P>["T"] = DefaultOf<GenericOf<P>, "T">, B extends GenericOf<P>["U"] = DefaultOf<GenericOf<P>, "U">>(props: GenericRootProps<RootProps<P, Applied<GenericOf<P>, A, B>["options"], Tag>, Tag>) => RootInstanceOf<RootProps<P, Applied<GenericOf<P>, A, B>["options"], Tag>, StateIn<P, RootSlot<P>, Applied<GenericOf<P>, A, B>>, Tag>;
+type PartOf<P extends Primitive, S extends SlotName<P>, Tag extends string> = [
+    GenericOf<P>
+] extends [never] ? PartComponent<PropsOf<P, S>, StateOf<P, S>, Tag> : GenericOf<P> extends {
+    props: Record<S, unknown>;
+} ? new <A extends GenericOf<P>["T"] = DefaultOf<GenericOf<P>, "T">>(props: GenericProps<GenericPartProps<P, S, A>, Tag>) => InstanceType<PartComponent<GenericPartProps<P, S, A>, StateIn<P, S, Applied<GenericOf<P>, A, unknown>>, Tag>> : PartComponent<PropsOf<P, S>, StateIn<P, S, GenericOf<P>>, Tag>;
+type GenericPartProps<P extends Primitive, S extends SlotName<P>, A> = (Applied<GenericOf<P>, A, unknown>["props"] & Record<S, unknown>)[S];
+/**
+ * The components `createParts` makes: `Root`, and one per tagged slot, named in Pascal case.
+ * @stable
+ */
+type Parts<P extends Primitive, Tags extends {
+    [S in SlotName<P>]?: string;
+}> = {
+    Root: RootOf<P, Tags extends {
+        root: infer Tag extends string;
+    } ? Tag : never>;
+} & {
+    [S in keyof TypesOf<P>["slots"] as S extends Exclude<keyof Tags, "root"> & string ? Pascal<S> : never]: PartOf<P, S & SlotName<P>, Tags[S & keyof Tags] & string>;
+};
+/**
+ * Every part of a primitive as a component, typed from it. `Root` makes the
+ * instance from the primitive's options and shares it with the parts inside
+ * it. Each slot named in `tags` becomes a component that renders that tag,
+ * named in Pascal case, like `TabIcon` for `tab-icon`. Without a `root` tag,
+ * `Root` renders only its default slot. Callbacks are events, and
+ * `on<Key>Change` also emits `update:<key>`, so `v-model:<key>` works. Every
+ * part takes the attributes and events of its tag and a `render` slot, and its
+ * default slot receives its state.
+ *
+ * @example
+ * const { Root: Playlist, Track: PlaylistTrack } = createParts(playlist, { root: "ul", track: "li" })
+ * @stable
+ */
+declare function createParts<P extends Primitive, const Tags extends {
+    [S in SlotName<P>]?: string;
+}>(primitive: P, tags: Tags): Parts<P, Tags>;
+export { createParts, type ElementAttributes, type ElementConstructor, type ElementInstance, type ElementPart, type Parts, type RenderableWith, type RootInstanceOf, type RootPropsOf, withElement, };

package/dist/create-parts.js

@@ -0,0 +1,206 @@
+// src/create-parts.ts
+import { schemaOf } from "@ui-sdk/core/renderer";
+import {
+  defineComponent,
+  useId
+} from "vue";
+import {
+  optionalBoolean,
+  pascal,
+  provideProps,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { warnAttributes } from "./renderless.js";
+var kindOf = (spec) => typeof spec === "string" ? spec : typeof spec === "object" ? spec.kind : "value";
+var fromOf = (spec, key) => {
+  if (typeof spec !== "object") {
+    return void 0;
+  }
+  const [slot, prop = key] = spec.from.split(".");
+  return { slot, prop };
+};
+var propTypes = {
+  string: String,
+  number: Number,
+  boolean: optionalBoolean,
+  list: [Array, String],
+  value: null,
+  id: null,
+  key: null,
+  action: Function
+};
+function runtimeProps(...schemas) {
+  const props = {};
+  for (const schema of schemas) {
+    for (const key in schema) {
+      const kind = kindOf(schema[key]);
+      if (kind !== "callback") {
+        props[key] = propTypes[kind];
+      }
+    }
+  }
+  return props;
+}
+function eventsOf(schema) {
+  return Object.keys(schema).filter((key) => kindOf(schema[key]) === "callback").map((key) => {
+    const event = key[2].toLowerCase() + key.slice(3);
+    const model = event.endsWith("Change") ? event.slice(0, -"Change".length) : "";
+    return {
+      key,
+      event,
+      update: model in schema ? `update:${model}` : void 0
+    };
+  });
+}
+var models = ["value", "checked", "pressed", "open", "page", "layout"];
+var modelOf = (events) => models.find((key) => events.some(({ update }) => update === `update:${key}`));
+var emitsOf = (events) => events.flatMap(({ event, update }) => update ? [event, update] : [event]);
+function emitters(events, emit) {
+  const callbacks = {};
+  for (const { key, event, update } of events) {
+    callbacks[key] = (...args) => {
+      emit(event, ...args);
+      if (update && !args[1]?.canceled) {
+        emit(update, args[0]);
+      }
+    };
+  }
+  return callbacks;
+}
+// @__NO_SIDE_EFFECTS__
+function withElement(_tag, part) {
+  return part;
+}
+function createParts(primitive, tags) {
+  const schema = schemaOf(primitive);
+  const name = pascal(primitive.name);
+  const tagOf = tags;
+  const provides = new Set(
+    Object.values(schema.slots).flatMap(
+      (props) => Object.entries(props).flatMap(
+        ([key, spec]) => fromOf(spec, key)?.slot ?? []
+      )
+    )
+  );
+  const keyed = new Set(
+    Object.entries(schema.slots).flatMap(
+      ([slot, props]) => Object.values(props).some((spec) => kindOf(spec) === "key") ? [slot] : []
+    )
+  );
+  const options = Object.keys(schema.options).filter(
+    (option) => kindOf(schema.options[option]) !== "callback"
+  );
+  const rootSchema = tagOf.root ? schema.slots.root ?? {} : {};
+  const rootEvents = eventsOf({ ...schema.options, ...rootSchema });
+  const model = modelOf(rootEvents);
+  function useSlotProps(slot, props, callbacks, model2) {
+    const scope = useScope(primitive);
+    const around = scope?.around ?? {};
+    const fields = Object.entries(schema.slots[slot] ?? {}).filter(([, spec]) => kindOf(spec) !== "callback").map(([prop, spec]) => {
+      const from = fromOf(spec, prop);
+      if (from && !around[from.slot] && spec.required) {
+        throw new Error(
+          `<${name}${pascal(slot)}> must be used inside <${name}${pascal(from.slot)}>.`
+        );
+      }
+      return {
+        prop,
+        id: kindOf(spec) === "id" ? useId() : void 0,
+        from,
+        key: kindOf(spec) === "key"
+      };
+    });
+    return () => {
+      const result = { ...callbacks };
+      for (const { prop, id, from, key } of fields) {
+        let value = props[prop];
+        if (value === void 0 && prop === model2) {
+          value = props.modelValue;
+        }
+        if (value === void 0) {
+          value = id ?? (from && around[from.slot]?.()[from.prop]);
+        }
+        result[prop] = value;
+        if (key) {
+          result.id = (scope?.handle.api).internal.keyOf(value);
+        }
+      }
+      return result;
+    };
+  }
+  const Root = defineComponent({
+    name,
+    inheritAttrs: false,
+    props: {
+      ...runtimeProps(schema.options, rootSchema),
+      ...model ? { modelValue: null } : {}
+    },
+    emits: [...emitsOf(rootEvents), ...model ? ["update:modelValue"] : []],
+    setup(props, { slots, emit, attrs }) {
+      const callbacks = emitters(rootEvents, (event, ...args) => {
+        emit(event, ...args);
+        if (event === `update:${model}`) {
+          emit("update:modelValue", ...args);
+        }
+      });
+      const handle = usePrimitive(primitive, () => {
+        const current = { ...callbacks };
+        for (const option of options) {
+          current[option] = props[option];
+        }
+        if (model && current[model] === void 0) {
+          current[model] = props.modelValue;
+        }
+        return current;
+      });
+      if (!tagOf.root) {
+        warnAttributes(name, attrs);
+        return () => slots.default?.();
+      }
+      return usePart(
+        handle,
+        "root",
+        useSlotProps("root", props, callbacks, model),
+        void 0,
+        tagOf.root
+      );
+    }
+  });
+  const parts = { Root };
+  for (const slot in tagOf) {
+    if (slot === "root") {
+      continue;
+    }
+    const partName = `${name}${pascal(slot)}`;
+    const slotSchema = schema.slots[slot] ?? {};
+    const events = eventsOf(slotSchema);
+    parts[pascal(slot)] = defineComponent({
+      name: partName,
+      inheritAttrs: false,
+      props: runtimeProps(slotSchema),
+      emits: emitsOf(events),
+      setup(props, { emit, attrs }) {
+        if (!useScope(primitive)) {
+          throw new Error(`<${partName}> must be used inside <${name}>.`);
+        }
+        const slotProps = useSlotProps(slot, props, emitters(events, emit));
+        if (provides.has(slot)) {
+          provideProps(
+            primitive,
+            slot,
+            keyed.has(slot) ? () => ({ ...slotProps(), value: slotProps().id }) : slotProps
+          );
+        }
+        const user = "id" in slotSchema ? () => props.id == null ? attrs : { ...attrs, id: props.id } : void 0;
+        return usePart(primitive, slot, slotProps, user, tagOf[slot]);
+      }
+    });
+  }
+  return parts;
+}
+export {
+  createParts,
+  withElement
+};

package/dist/date-input.d.ts

@@ -0,0 +1,133 @@
+import { type DateMatchers } from "@ui-sdk/core/date-input";
+import { type PropType } from "vue";
+import type { PartSlots } from "./use-primitive.js";
+/**
+ * A segment, like the month: an input arrow keys step and digits fill, named
+ * by its unit. The text between segments renders as a span.
+ * @stable
+ */
+declare const DateInputSegment: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    segment: {
+        type: PropType<import("@ui-sdk/core/date-input").DateInputSegmentData>;
+        required: true;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-input").DateInputSegmentState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    segment: {
+        type: PropType<import("@ui-sdk/core/date-input").DateInputSegmentData>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/date-input").DateInputPrimitive, "segment">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * The root: a group of segments the locale orders, like month, day and year,
+ * and the hidden input the ISO value submits with. Without content it renders
+ * every segment; its default slot gets `state`, whose `segments` it can render.
+ * @stable
+ */
+declare const DateInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    unavailable: PropType<DateMatchers>;
+    value: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    granularity: PropType<"day" | "hour" | "minute" | "second">;
+    hourCycle: PropType<import("@ui-sdk/core/date-input").HourCycle>;
+    min: StringConstructor;
+    max: StringConstructor;
+    locale: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<import("@ui-sdk/core/date-input").DateInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-input").DateInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string | null) => boolean;
+    "update:modelValue": (_value: string | null) => boolean;
+    valueChange: (_value: string | null, _details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/date-input").DateInputValueChangeReason>) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    unavailable: PropType<DateMatchers>;
+    value: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    granularity: PropType<"day" | "hour" | "minute" | "second">;
+    hourCycle: PropType<import("@ui-sdk/core/date-input").HourCycle>;
+    min: StringConstructor;
+    max: StringConstructor;
+    locale: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<import("@ui-sdk/core/date-input").DateInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string | null) => any) | undefined;
+    "onUpdate:value"?: ((_value: string | null) => any) | undefined;
+    onValueChange?: ((_value: string | null, _details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/date-input").DateInputValueChangeReason>) => any) | undefined;
+}>, {
+    value: string | null;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: string | null;
+    required: boolean;
+    readOnly: boolean;
+    modelValue: string | null;
+}, PartSlots<import("@ui-sdk/core/date-input").DateInputPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+export { createDateInputController } from "@ui-sdk/core/date-input";
+export type { DateInputApi, DateInputChangeOptions, DateInputController, DateInputGranularity, DateInputOptions, DateInputPrimitive, DateInputSegmentData, DateInputSegmentProps, DateInputSegmentState, DateInputSegmentType, DateInputState, DateInputValueChangeReason, DateMatcher, DateMatchers, HourCycle, } from "@ui-sdk/core/date-input";
+export { DateInput, DateInputSegment };

package/dist/date-input.js

@@ -0,0 +1,31 @@
+// src/date-input.ts
+import { dateInput } from "@ui-sdk/core/date-input";
+import { defineComponent } from "vue";
+import { withElement } from "./create-parts.js";
+import {
+  defineSegment,
+  rootEmits,
+  rootProps,
+  setupRoot
+} from "./segmented-input.js";
+import { createDateInputController } from "@ui-sdk/core/date-input";
+var DateInputSegment = defineSegment(dateInput, "DateInputSegment");
+var DateInput = withElement(
+  "div",
+  defineComponent({
+    name: "DateInput",
+    inheritAttrs: false,
+    props: {
+      ...rootProps,
+      unavailable: null
+    },
+    emits: rootEmits,
+    slots: Object,
+    setup: (props, context) => setupRoot(dateInput, DateInputSegment, props, context)
+  })
+);
+export {
+  DateInput,
+  DateInputSegment,
+  createDateInputController
+};