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

package/dist/checkbox.js

@@ -0,0 +1,151 @@
+// src/checkbox.ts
+import {
+  checkbox as checkboxPrimitive,
+  checkboxGroup as checkboxGroupPrimitive
+} from "@ui-sdk/core/checkbox";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide
+} from "vue";
+import { useFieldControl } from "./field-context.js";
+import { toggleProps } from "./toggle-props.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import {
+  createCheckboxController,
+  createCheckboxGroupController
+} from "@ui-sdk/core/checkbox";
+var parts = createParts(checkboxPrimitive, { indicator: "span" });
+var CheckboxGroupKey = /* @__PURE__ */ Symbol("checkbox-group");
+var Checkbox = withElement(
+  "button",
+  defineComponent({
+    name: "Checkbox",
+    inheritAttrs: false,
+    props: {
+      checked: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      modelValue: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      defaultChecked: {
+        type: [Boolean, String],
+        default: void 0
+      },
+      parent: optionalBoolean,
+      controller: Object,
+      ...toggleProps
+    },
+    emits: {
+      "update:checked": (_checked) => true,
+      "update:modelValue": (_checked) => true,
+      checkedChange: (_checked, _details) => true
+    },
+    slots: Object,
+    setup(props, { attrs, emit }) {
+      const group = inject(CheckboxGroupKey, null);
+      const field = group ? null : useFieldControl();
+      const checkbox = usePrimitive(checkboxPrimitive, () => ({
+        parent: props.parent,
+        group: group ? () => group.api : void 0,
+        checked: orModel(props.checked, props.modelValue),
+        defaultChecked: props.defaultChecked,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        value: props.value,
+        form: props.form,
+        controller: props.controller,
+        debug: props.debug,
+        onCheckedChange: (checked, details) => {
+          emit("checkedChange", checked, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:checked", checked);
+          emit("update:modelValue", checked);
+        }
+      }));
+      const root = usePart(checkbox, "root", void 0, void 0, {
+        tag: "button",
+        extend: field?.props
+      });
+      return () => [root(), h("input", checkbox.slot("input"))];
+    }
+  })
+);
+var CheckboxIndicator = parts.Indicator;
+var CheckboxGroup = /* @__PURE__ */ withElement(
+  "div",
+  /* @__PURE__ */ defineComponent({
+    name: "CheckboxGroup",
+    inheritAttrs: false,
+    props: {
+      value: { type: Array, default: void 0 },
+      modelValue: { type: Array, default: void 0 },
+      defaultValue: { type: Array, default: void 0 },
+      allValues: { type: Array, default: void 0 },
+      readOnly: optionalBoolean,
+      disabled: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { emit }) {
+      const field = useFieldControl();
+      const group = usePrimitive(checkboxGroupPrimitive, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        allValues: props.allValues,
+        readOnly: props.readOnly,
+        disabled: props.disabled || field?.disabled(),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        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);
+        }
+      }));
+      provide(CheckboxGroupKey, group);
+      const root = usePart(group, "group", void 0, void 0, {
+        tag: "div",
+        extend: field?.props
+      });
+      return () => [root(), h("input", group.slot("group-input"))];
+    }
+  })
+);
+export {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxIndicator,
+  createCheckboxController,
+  createCheckboxGroupController
+};

package/dist/children.d.ts

@@ -0,0 +1,41 @@
+import { type Component, type VNode, type VNodeArrayChildren } from "vue";
+/**
+ * Marks a part inside an item that isn't its label, like an icon, so
+ * `learnLabels` skips its text. A pure call, so a page that never renders the
+ * part still drops it, which a set of parts in the root couldn't do.
+ */
+declare function notLabel<Part extends object>(part: Part): Part;
+/**
+ * For a root that renders its own content part when the app places none:
+ * whether one is placed. Render the root's own part inside `NotPlaced`, so it
+ * doesn't count.
+ */
+declare function usePlacedContent(): () => boolean;
+/** Called by a content part, so its root doesn't render one of its own as well. */
+declare function usePlaceContent(): void;
+/** Renders a root's own content part without counting it as placed. */
+declare const NotPlaced: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare function hasChild(children: unknown, type: Component): boolean;
+/**
+ * Tells a listbox the labels of its value from the items among the root's
+ * `children`, so the server's markup and the render that hydrates it show the
+ * label, not the value, before the items mount. The listbox looks only on its
+ * first render. Call it in the render, since a slot called in setup warns.
+ */
+declare function learnLabels(internal: {
+    keyOf: (value: unknown) => string;
+    learnLabels: (find: (keys: ReadonlySet<string>) => {
+        value: unknown;
+        label: string;
+    }[]) => void;
+}, children: VNodeArrayChildren, skip: ReadonlySet<unknown>): void;
+/**
+ * What a slot renders, or undefined when it renders nothing, so the part shows
+ * its own content in its place, the way Vue's `<slot>` shows its fallback.
+ */
+declare function slotContent<Props>(slot: ((props: Props) => VNode[]) | undefined, props: Props): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined;
+export { hasChild, learnLabels, notLabel, NotPlaced, slotContent, usePlaceContent, usePlacedContent, };

package/dist/children.js

@@ -0,0 +1,135 @@
+// src/children.ts
+import {
+  Comment,
+  defineComponent,
+  Fragment,
+  inject,
+  isVNode,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  shallowRef
+} from "vue";
+var notLabelKey = /* @__PURE__ */ Symbol.for("ui-sdk.not-label");
+function notLabel(part) {
+  ;
+  part[notLabelKey] = true;
+  return part;
+}
+var placedKey = /* @__PURE__ */ Symbol("ui-sdk.placed");
+function usePlacedContent() {
+  const count = shallowRef(0);
+  provide(placedKey, () => {
+    count.value++;
+    return () => count.value--;
+  });
+  return () => count.value > 0;
+}
+function usePlaceContent() {
+  const register = inject(placedKey, null);
+  if (!register) {
+    return;
+  }
+  let unregister;
+  onMounted(() => unregister = register());
+  onBeforeUnmount(() => unregister?.());
+}
+var NotPlaced = defineComponent({
+  name: "NotPlaced",
+  setup(_, { slots }) {
+    provide(placedKey, null);
+    return () => slots.default?.();
+  }
+});
+function hasChild(children, type) {
+  if (!Array.isArray(children)) {
+    return false;
+  }
+  for (const child of children) {
+    if (Array.isArray(child) ? hasChild(child, type) : isVNode(child) && (child.type === type || hasChild(child.children, type))) {
+      return true;
+    }
+  }
+  return false;
+}
+function labelsAmong(nodes, {
+  keys,
+  keyOf,
+  skip
+}) {
+  const found = [];
+  const visit = (node) => {
+    if (Array.isArray(node)) {
+      return node.forEach(visit);
+    }
+    if (!isVNode(node)) {
+      return;
+    }
+    const { value, label } = node.props ?? {};
+    if (value === void 0 || typeof node.type === "string" || !keys.has(keyOf(value))) {
+      return childrenOf(node).forEach(visit);
+    }
+    const text = typeof label === "string" ? label : visibleText(childrenOf(node), skip);
+    if (text) {
+      found.push({ value, label: text });
+    }
+  };
+  nodes.forEach(visit);
+  return found;
+}
+function childrenOf(node) {
+  const { children } = node;
+  if (typeof children === "string") {
+    return [children];
+  }
+  if (Array.isArray(children)) {
+    return children;
+  }
+  return slotNodes(children?.default);
+}
+function slotNodes(slot) {
+  try {
+    const nodes = slot?.();
+    return Array.isArray(nodes) ? nodes : nodes == null ? [] : [nodes];
+  } catch {
+    return [];
+  }
+}
+function visibleText(nodes, skip) {
+  const text = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+      return String(node);
+    }
+    if (Array.isArray(node)) {
+      return node.map(text).join("");
+    }
+    if (!isVNode(node) || node.type === Comment || skip.has(node.type) || node.type[notLabelKey] || node.props?.["aria-hidden"]) {
+      return "";
+    }
+    return childrenOf(node).map(text).join("");
+  };
+  return nodes.map(text).join("").replace(/\s+/g, " ").trim();
+}
+function learnLabels(internal, children, skip) {
+  internal.learnLabels(
+    (keys) => labelsAmong(children, { keys, keyOf: internal.keyOf, skip })
+  );
+}
+function rendersSomething(nodes) {
+  return nodes.some(
+    (node) => !isVNode(node) || node.type !== Comment && (node.type !== Fragment || (Array.isArray(node.children) ? rendersSomething(node.children) : !!node.children))
+  );
+}
+function slotContent(slot, props) {
+  const nodes = slot?.(props);
+  return nodes && rendersSomething(nodes) ? nodes : void 0;
+}
+export {
+  NotPlaced,
+  hasChild,
+  learnLabels,
+  notLabel,
+  slotContent,
+  usePlaceContent,
+  usePlacedContent
+};

package/dist/collapsible.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A panel of content that a button shows and hides. Put its trigger and panel inside.
+ * @stable
+ */
+declare const Collapsible: import("./create-parts.js").ElementPart<new (props: Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/collapsible").CollapsiblePrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onOpenChange" | "onOpenChangeComplete"> & {
+    modelValue?: boolean | undefined;
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpenChange?: ((open: boolean, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/collapsible").CollapsibleOpenChangeReason>) => any) | undefined;
+    onOpenChangeComplete?: ((open: boolean) => any) | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/collapsible").CollapsiblePrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onOpenChange" | "onOpenChangeComplete"> & {
+    modelValue?: boolean | undefined;
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpenChange?: ((open: boolean, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/collapsible").CollapsibleOpenChangeReason>) => any) | undefined;
+    onOpenChangeComplete?: ((open: boolean) => any) | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openChange: (open: boolean, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/collapsible").CollapsibleOpenChangeReason>) => true;
+    openChangeComplete: (open: boolean) => true;
+} & {
+    "update:open": (value: boolean) => true;
+} & {
+    "update:modelValue": (value: boolean) => true;
+}, import("vue").PublicProps, {}, false, {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/collapsible").CollapsibleState>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, Omit<import("@ui-sdk/core").OptionsOf<import("@ui-sdk/core/collapsible").CollapsiblePrimitive> & import("@ui-sdk/core/renderer").BaseSlotProps, "onOpenChange" | "onOpenChangeComplete"> & {
+    modelValue?: boolean | undefined;
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpenChange?: ((open: boolean, details: import("@ui-sdk/core").ChangeDetails<import("@ui-sdk/core/collapsible").CollapsibleOpenChangeReason>) => any) | undefined;
+    onOpenChangeComplete?: ((open: boolean) => any) | undefined;
+}, {}, {}, {}, {}, {}>, "div">;
+/**
+ * The button that opens and closes the panel. It says whether the panel is open with `aria-expanded`.
+ * @stable
+ */
+declare const CollapsibleTrigger: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/collapsible").CollapsibleState>>>, 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/collapsible").CollapsibleState>>>, "button">;
+/**
+ * The content the trigger shows and hides. Closed, it leaves the page unless `keepMounted` or
+ * `hiddenUntilFound` keeps it.
+ * @stable
+ */
+declare const CollapsiblePanel: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/collapsible").CollapsiblePanelProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/collapsible").CollapsibleState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/collapsible").CollapsiblePanelProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/collapsible").CollapsibleState>>>, "div">;
+export { createCollapsibleController } from "@ui-sdk/core/collapsible";
+export type { CollapsibleApi, CollapsibleChangeOptions, CollapsibleController, CollapsibleOpenChangeReason, CollapsibleOptions, CollapsiblePanelProps, CollapsiblePanelState, CollapsiblePrimitive, CollapsibleState, CollapsibleTriggerProps, CollapsibleTriggerState, } from "@ui-sdk/core/collapsible";
+export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/collapsible.js

@@ -0,0 +1,18 @@
+// src/collapsible.ts
+import { collapsible } from "@ui-sdk/core/collapsible";
+import { createParts } from "./create-parts.js";
+import { createCollapsibleController } from "@ui-sdk/core/collapsible";
+var parts = createParts(collapsible, {
+  root: "div",
+  trigger: "button",
+  panel: "div"
+});
+var Collapsible = parts.Root;
+var CollapsibleTrigger = parts.Trigger;
+var CollapsiblePanel = parts.Panel;
+export {
+  Collapsible,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+  createCollapsibleController
+};

package/dist/color-picker.d.ts

@@ -0,0 +1,187 @@
+import { type ColorChannel, type ColorFormat, type ColorGamut, type ColorPickerController, type ColorPickerSpace, type ColorPickerValueChangeDetails, type ColorPickerValueCommitDetails } from "@ui-sdk/core/color-picker";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * The root: a group around the picker's parts, and the hidden input the form submits.
+ * @experimental
+ */
+declare const ColorPicker: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    space: PropType<ColorPickerSpace>;
+    format: PropType<ColorFormat>;
+    gamut: {
+        type: PropType<ColorGamut | false>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<ColorPickerController>;
+    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/color-picker").ColorPickerState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string) => true;
+    "update:modelValue": (_value: string) => true;
+    valueChange: (_value: string, _details: ColorPickerValueChangeDetails) => true;
+    valueCommit: (_value: string, _details: ColorPickerValueCommitDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    space: PropType<ColorPickerSpace>;
+    format: PropType<ColorFormat>;
+    gamut: {
+        type: PropType<ColorGamut | false>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<ColorPickerController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
+    onValueChange?: ((_value: string, _details: ColorPickerValueChangeDetails) => any) | undefined;
+    onValueCommit?: ((_value: string, _details: ColorPickerValueCommitDetails) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: string;
+    required: boolean;
+    readOnly: boolean;
+    modelValue: string;
+    gamut: false | ColorGamut;
+}, PartSlots<import("@ui-sdk/core/color-picker").ColorPickerPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A surface for two channels, `x` and `y`. Its background comes from
+ * `--color-area-background` where gradients draw it, or a `ColorPickerAreaCanvas`.
+ * @experimental
+ */
+declare const ColorPickerArea: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerAreaProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerAreaProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, "div">;
+/**
+ * The area's thumb: a slider screen readers hear as both channels.
+ * @experimental
+ */
+declare const ColorPickerAreaThumb: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerAreaProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerAreaProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, "div">;
+/**
+ * Paints the area pixel by pixel, for channels no gradient draws, like OKLCH's
+ * chroma by lightness. Colors outside the gamut stay transparent.
+ * @experimental
+ */
+declare const ColorPickerAreaCanvas: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerAreaProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerAreaProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "canvas">;
+/**
+ * A track for one `channel`, drawn by `--color-slider-background`.
+ * @experimental
+ */
+declare const ColorPickerSlider: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderState>>>, "div">;
+/**
+ * The slider's thumb, at `--color-slider-thumb-position`.
+ * @experimental
+ */
+declare const ColorPickerSliderThumb: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSliderState>>>, "div">;
+/**
+ * A text input that reads any CSS color on Enter or blur. Text that isn't
+ * one goes back to the value.
+ * @experimental
+ */
+declare const ColorPickerInput: 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/color-picker").ColorPickerState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/color-picker").ColorPickerPrimitive, "input">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * A number input for one `channel`, in the units people read it in.
+ * @experimental
+ */
+declare const ColorPickerChannelInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    channel: PropType<ColorChannel>;
+}>, (() => 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/color-picker").ColorPickerState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    channel: PropType<ColorChannel>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/color-picker").ColorPickerPrimitive, "channel-input">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * The color itself, as `--color-picker-color`, named for screen readers.
+ * @experimental
+ */
+declare const ColorPickerSwatch: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, 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/color-picker").ColorPickerState>>>, "div">;
+/**
+ * A button that picks a color from the screen, where the browser can.
+ * Elsewhere it's disabled, with `data-unsupported`.
+ * @experimental
+ */
+declare const ColorPickerEyeDropper: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, 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/color-picker").ColorPickerState>>>, "button">;
+/**
+ * A list of preset colors. Arrow keys move between them.
+ * @experimental
+ */
+declare const ColorPickerSwatches: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerState>>>, 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/color-picker").ColorPickerState>>>, "div">;
+/**
+ * A preset color, as `--color-picker-color`. Pressing it sets the value.
+ * @experimental
+ */
+declare const ColorPickerSwatchItem: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSwatchItemProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSwatchItemState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSwatchItemProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/color-picker").ColorPickerSwatchItemState>>>, "button">;
+export { createColorPickerController } from "@ui-sdk/core/color-picker";
+export type { Color, ColorChannel, ColorFormat, ColorGamut, ColorPickerApi, ColorPickerAreaProps, ColorPickerChangeOptions, ColorPickerChannelInputProps, ColorPickerController, ColorPickerOptions, ColorPickerPrimitive, ColorPickerSliderProps, ColorPickerSliderState, ColorPickerSpace, ColorPickerState, ColorPickerSwatchItemProps, ColorPickerSwatchItemState, ColorPickerValueChangeDetails, ColorPickerValueChangeReason, ColorPickerValueCommitDetails, } from "@ui-sdk/core/color-picker";
+export { ColorPicker, ColorPickerArea, ColorPickerAreaCanvas, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerEyeDropper, ColorPickerInput, ColorPickerSlider, ColorPickerSliderThumb, ColorPickerSwatch, ColorPickerSwatches, ColorPickerSwatchItem, };