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

package/dist/rating.js

@@ -0,0 +1,146 @@
+// src/rating.ts
+import {
+  rating,
+  ratingItemValues
+} from "@ui-sdk/core/rating";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide
+} from "vue";
+import { withElement } from "./create-parts.js";
+import { useFieldControl } from "./field-context.js";
+import { readOnlyOf } from "./text-control.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { createRatingController } from "@ui-sdk/core/rating";
+var ItemKey = /* @__PURE__ */ Symbol("rating-item");
+var ItemScope = defineComponent({
+  name: "RatingItemScope",
+  props: {
+    index: { type: Number, required: true },
+    step: { type: Number, required: true }
+  },
+  setup(props, { slots }) {
+    provide(ItemKey, props);
+    return () => slots.default?.();
+  }
+});
+var Rating = withElement(
+  "div",
+  defineComponent({
+    name: "Rating",
+    inheritAttrs: false,
+    props: {
+      value: { type: Number, default: void 0 },
+      modelValue: {
+        type: Number,
+        default: void 0
+      },
+      defaultValue: {
+        type: Number,
+        default: void 0
+      },
+      max: { type: Number, default: 5 },
+      step: { type: Number, default: 1 },
+      deselectable: optionalBoolean,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      loop: optionalBoolean,
+      getValueLabel: Function,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { attrs, emit, slots }) {
+      const field = useFieldControl();
+      const control = usePrimitive(rating, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        max: props.max,
+        step: props.step,
+        deselectable: props.deselectable,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        loop: props.loop,
+        getValueLabel: props.getValueLabel,
+        controller: props.controller,
+        debug: props.debug,
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        }
+      }));
+      const stars = (state) => Array.from(
+        { length: props.max },
+        (_, at) => h(
+          ItemScope,
+          { key: at, index: at + 1, step: props.step },
+          () => slots.default?.({ state }) ?? h(RatingItem)
+        )
+      );
+      return usePart(control, "root", void 0, void 0, {
+        tag: "div",
+        extend: field?.props,
+        children: stars
+      });
+    }
+  })
+);
+var RatingRadio = defineComponent({
+  name: "RatingRadio",
+  props: { value: { type: String, required: true } },
+  setup(props) {
+    const control = useScope(rating).handle;
+    const radio = () => ({ value: props.value });
+    const button = usePart(control, "radio", radio, () => ({}), "button");
+    return () => [button(), h("input", control.slot("input", radio()))];
+  }
+});
+var RatingItem = withElement(
+  "span",
+  defineComponent({
+    name: "RatingItem",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const item = inject(ItemKey, null);
+      if (!item) {
+        throw new Error("RatingItem must be used inside <Rating>.");
+      }
+      const radios = () => ratingItemValues(item.index, item.step).map(
+        (score) => h(RatingRadio, { key: score, value: String(score) })
+      );
+      return usePart(rating, "item", () => ({ index: item.index }), void 0, {
+        tag: "span",
+        children: (state) => [slots.default?.({ state }), radios()]
+      });
+    }
+  })
+);
+export {
+  Rating,
+  RatingItem,
+  createRatingController
+};

package/dist/renderless.d.ts

@@ -0,0 +1,4 @@
+import type { SetupContext } from "vue";
+declare function warnAttributes(name: string, attrs: SetupContext["attrs"], read?: string[]): void;
+declare function renderless<Component>(component: Component): Component;
+export { renderless, warnAttributes };

package/dist/renderless.js

@@ -0,0 +1,28 @@
+// src/renderless.ts
+import { warn } from "@ui-sdk/core/renderer";
+var warned = /* @__PURE__ */ new Set();
+function warnAttributes(name, attrs, read = []) {
+  const keys = Object.keys(attrs).filter((key) => !read.includes(key)).join(", ");
+  if (!keys || warned.has(`${name} ${keys}`)) {
+    return;
+  }
+  warned.add(`${name} ${keys}`);
+  warn(
+    `${name} renders no element, so it ignores ${keys}. Put them on one of its parts.`
+  );
+}
+function renderless(component) {
+  const options = component;
+  const setup = options.setup;
+  options.inheritAttrs = false;
+  const read = options.props && "readOnly" in options.props ? ["readonly"] : [];
+  options.setup = (props, context) => {
+    warnAttributes(options.name ?? "This root", context.attrs, read);
+    return setup?.(props, context);
+  };
+  return component;
+}
+export {
+  renderless,
+  warnAttributes
+};

package/dist/resizable.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The group: lays its panels out along its orientation. `v-model:layout` controls it.
+ * @stable
+ */
+declare const Resizable: import("./create-parts.js").ElementPart<new (props: Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/resizable").ResizablePrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onLayoutChange" | "onLayoutCommit"> & {
+    modelValue?: number[] | undefined;
+} & {
+    "onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
+    onLayoutChange?: ((layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutChangeDetails) => any) | undefined;
+    onLayoutCommit?: ((layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutCommitDetails) => any) | undefined;
+    "onUpdate:layout"?: ((value: number[]) => any) | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/resizable").ResizablePrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onLayoutChange" | "onLayoutCommit"> & {
+    modelValue?: number[] | undefined;
+} & {
+    "onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
+    onLayoutChange?: ((layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutChangeDetails) => any) | undefined;
+    onLayoutCommit?: ((layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutCommitDetails) => any) | undefined;
+    "onUpdate:layout"?: ((value: number[]) => any) | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    layoutChange: (layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutChangeDetails) => true;
+    layoutCommit: (layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutCommitDetails) => true;
+} & {
+    "update:layout": (value: number[]) => true;
+} & {
+    "update:modelValue": (value: number[]) => true;
+}, import("vue").PublicProps, {}, false, {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/resizable").ResizableState>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/resizable").ResizablePrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onLayoutChange" | "onLayoutCommit"> & {
+    modelValue?: number[] | undefined;
+} & {
+    "onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
+    onLayoutChange?: ((layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutChangeDetails) => any) | undefined;
+    onLayoutCommit?: ((layout: number[], details: import("@ui-sdk/core/resizable").ResizableLayoutCommitDetails) => any) | undefined;
+    "onUpdate:layout"?: ((value: number[]) => any) | undefined;
+}, {}, {}, {}, {}, {}>, "div">;
+/**
+ * A panel. Its size is written to `--resizable-panel-size` on every frame of a
+ * drag, so it never renders for a resize unless its slot reads `size`.
+ * @stable
+ */
+declare const ResizablePanel: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/resizable").ResizablePanelProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/resizable").ResizablePanelState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/resizable").ResizablePanelProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/resizable").ResizablePanelState>>>, "div">;
+/**
+ * The handle between two panels: a focusable separator to drag or move with keys.
+ * @stable
+ */
+declare const ResizableHandle: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/resizable").ResizableHandleProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/resizable").ResizableHandleState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/resizable").ResizableHandleProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/resizable").ResizableHandleState>>>, "div">;
+export { createResizableController, resizableStorageKey, } from "@ui-sdk/core/resizable";
+export type { ResizableApi, ResizableChangeOptions, ResizableController, ResizableHandleProps, ResizableHandleState, ResizableLayoutChangeDetails, ResizableLayoutChangeReason, ResizableLayoutCommitDetails, ResizableOptions, ResizablePanelProps, ResizablePanelState, ResizablePrimitive, ResizableSize, ResizableState, ResizableStorage, } from "@ui-sdk/core/resizable";
+export { Resizable, ResizableHandle, ResizablePanel };

package/dist/resizable.js

@@ -0,0 +1,22 @@
+// src/resizable.ts
+import { resizable } from "@ui-sdk/core/resizable";
+import { createParts } from "./create-parts.js";
+import {
+  createResizableController,
+  resizableStorageKey
+} from "@ui-sdk/core/resizable";
+var parts = createParts(resizable, {
+  root: "div",
+  panel: "div",
+  handle: "div"
+});
+var Resizable = parts.Root;
+var ResizablePanel = parts.Panel;
+var ResizableHandle = parts.Handle;
+export {
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+  createResizableController,
+  resizableStorageKey
+};

package/dist/scroll-area.d.ts

@@ -0,0 +1,72 @@
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type Orientation = "vertical" | "horizontal";
+/**
+ * Groups the parts. The scrollbars are placed against it.
+ * @stable
+ */
+declare const ScrollArea: import("./create-parts.js").ElementPart<new (props: Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {}, import("vue").PublicProps, {}, false, {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, never> & {}, {}, {}, {}, {}, {}>, "div">;
+/**
+ * The native scroller. Keyboard, wheel, touch, find in page and screen readers scroll it.
+ * @stable
+ */
+declare const ScrollAreaViewport: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>>>, "div">;
+/**
+ * Wraps the content inside the viewport.
+ * @stable
+ */
+declare const ScrollAreaContent: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaState>>>, "div">;
+/**
+ * Where the two scrollbars meet.
+ * @stable
+ */
+declare const ScrollAreaCorner: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * A button that scrolls to the end, like "Jump to latest". Name it with its content.
+ * @stable
+ */
+declare const ScrollAreaScrollToEnd: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaScrollToEndState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/scroll-area").ScrollAreaScrollToEndState>>>, "button">;
+/**
+ * A scrollbar for one axis, over the viewport's edge.
+ * @stable
+ */
+declare const ScrollAreaScrollbar: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    orientation: {
+        type: PropType<Orientation>;
+        default: string;
+    };
+}>, (() => 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/scroll-area").ScrollAreaScrollbarState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    orientation: {
+        type: PropType<Orientation>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    orientation: Orientation;
+}, PartSlots<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive, "scrollbar">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The part of the scrollbar that shows where the view is, and drags.
+ * @stable
+ */
+declare const ScrollAreaThumb: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => 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/scroll-area").ScrollAreaThumbState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/scroll-area").ScrollAreaPrimitive, "thumb">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+export { createScrollAreaController } from "@ui-sdk/core/scroll-area";
+export type { ScrollAreaController, ScrollAreaOptions, ScrollAreaPrimitive, ScrollAreaScrollOptions, ScrollAreaScrollToEndState, ScrollAreaScrollbarProps, ScrollAreaScrollbarState, ScrollAreaState, ScrollAreaThumbState, ScrollAreaType, } from "@ui-sdk/core/scroll-area";
+export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaScrollToEnd, ScrollAreaThumb, ScrollAreaViewport, };

package/dist/scroll-area.js

@@ -0,0 +1,77 @@
+// src/scroll-area.ts
+import { scrollArea } from "@ui-sdk/core/scroll-area";
+import {
+  computed,
+  defineComponent,
+  inject,
+  provide
+} from "vue";
+import { createParts, withElement } from "./create-parts.js";
+import { usePart } from "./use-primitive.js";
+import { createScrollAreaController } from "@ui-sdk/core/scroll-area";
+var OrientationKey = /* @__PURE__ */ Symbol(
+  "scroll-area-orientation"
+);
+var parts = createParts(scrollArea, {
+  root: "div",
+  viewport: "div",
+  content: "div",
+  corner: "div",
+  "scroll-to-end": "button"
+});
+var ScrollArea = parts.Root;
+var ScrollAreaViewport = parts.Viewport;
+var ScrollAreaContent = parts.Content;
+var ScrollAreaCorner = parts.Corner;
+var ScrollAreaScrollToEnd = parts.ScrollToEnd;
+var ScrollAreaScrollbar = withElement(
+  "div",
+  defineComponent({
+    name: "ScrollAreaScrollbar",
+    inheritAttrs: false,
+    props: {
+      orientation: {
+        type: String,
+        default: "vertical"
+      }
+    },
+    slots: Object,
+    setup(props) {
+      const scrollbar = computed(() => ({
+        id: props.orientation,
+        orientation: props.orientation
+      }));
+      provide(OrientationKey, () => props.orientation);
+      return usePart(scrollArea, "scrollbar", () => scrollbar.value);
+    }
+  })
+);
+var ScrollAreaThumb = withElement(
+  "div",
+  defineComponent({
+    name: "ScrollAreaThumb",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const orientation = inject(
+        OrientationKey,
+        () => "vertical"
+      );
+      const thumb = computed(() => ({
+        id: orientation(),
+        orientation: orientation()
+      }));
+      return usePart(scrollArea, "thumb", () => thumb.value);
+    }
+  })
+);
+export {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaScrollToEnd,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  createScrollAreaController
+};

package/dist/segmented-control.d.ts

@@ -0,0 +1,151 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type SegmentedControlController, type SegmentedControlOrientation, type SegmentedControlValueChangeReason } from "@ui-sdk/core/segmented-control";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A row of options where exactly one is on, like a radio group drawn as
+ * buttons, with an indicator that slides to the checked item.
+ * @experimental
+ */
+declare const SegmentedControl: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    orientation: PropType<SegmentedControlOrientation>;
+    controller: PropType<SegmentedControlController>;
+    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<{
+        value: string | null;
+        disabled: boolean;
+        readOnly: boolean;
+        required: boolean;
+        orientation: "horizontal" | "vertical";
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string | null) => true;
+    "update:modelValue": (_value: string | null) => true;
+    valueChange: (_value: string | null, _details: ChangeDetails<SegmentedControlValueChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    orientation: PropType<SegmentedControlOrientation>;
+    controller: PropType<SegmentedControlController>;
+    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: ChangeDetails<SegmentedControlValueChangeReason>) => any) | undefined;
+}>, {
+    value: string | null;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: string | null;
+    required: boolean;
+    loop: boolean;
+    readOnly: boolean;
+    modelValue: string | null;
+}, PartSlots<import("@ui-sdk/core/segmented-control").SegmentedControlPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * One option, and the hidden native radio that takes part in the form.
+ * @experimental
+ */
+declare const SegmentedControlItem: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        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)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, PartSlots<import("@ui-sdk/core/segmented-control").SegmentedControlPrimitive, "item">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * Sits behind the checked item. Its box comes from the
+ * `--segmented-control-indicator-*` variables, measured from the root.
+ * @experimental
+ */
+declare const SegmentedControlIndicator: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/segmented-control").SegmentedControlIndicatorState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/segmented-control").SegmentedControlIndicatorState>>>, "span">;
+export { createSegmentedControlController } from "@ui-sdk/core/segmented-control";
+export type { SegmentedControlApi, SegmentedControlChangeOptions, SegmentedControlController, SegmentedControlIndicatorState, SegmentedControlItemProps, SegmentedControlItemState, SegmentedControlOptions, SegmentedControlOrientation, SegmentedControlPrimitive, SegmentedControlState, SegmentedControlValueChangeReason, } from "@ui-sdk/core/segmented-control";
+export { SegmentedControl, SegmentedControlIndicator, SegmentedControlItem };

package/dist/segmented-control.js

@@ -0,0 +1,110 @@
+// src/segmented-control.ts
+import {
+  segmentedControl
+} from "@ui-sdk/core/segmented-control";
+import { defineComponent, h } from "vue";
+import { createParts, withElement } from "./create-parts.js";
+import { useFieldControl } from "./field-context.js";
+import { readOnlyOf } from "./text-control.js";
+import {
+  optionalBoolean,
+  orModel,
+  provideProps,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { createSegmentedControlController } from "@ui-sdk/core/segmented-control";
+var parts = createParts(segmentedControl, { indicator: "span" });
+var SegmentedControl = withElement(
+  "div",
+  defineComponent({
+    name: "SegmentedControl",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, default: void 0 },
+      modelValue: {
+        type: String,
+        default: void 0
+      },
+      defaultValue: {
+        type: String,
+        default: void 0
+      },
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      loop: optionalBoolean,
+      orientation: String,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { attrs, emit }) {
+      const field = useFieldControl();
+      const control = usePrimitive(segmentedControl, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        loop: props.loop,
+        orientation: props.orientation,
+        controller: props.controller,
+        debug: props.debug,
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        }
+      }));
+      return usePart(control, "root", void 0, void 0, {
+        tag: "div",
+        extend: field?.props
+      });
+    }
+  })
+);
+var SegmentedControlItem = withElement(
+  "button",
+  defineComponent({
+    name: "SegmentedControlItem",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, required: true },
+      disabled: optionalBoolean
+    },
+    slots: Object,
+    setup(props) {
+      const control = useScope(segmentedControl)?.handle;
+      if (!control) {
+        throw new Error(
+          "SegmentedControlItem must be used inside <SegmentedControl>."
+        );
+      }
+      const item = () => ({ value: props.value, disabled: props.disabled });
+      provideProps(segmentedControl, "item", item);
+      const button = usePart(control, "item", item, void 0, "button");
+      return () => [button(), h("input", control.slot("input", item()))];
+    }
+  })
+);
+var SegmentedControlIndicator = parts.Indicator;
+export {
+  SegmentedControl,
+  SegmentedControlIndicator,
+  SegmentedControlItem,
+  createSegmentedControlController
+};