@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCommentVNode, defineComponent, h, type ButtonHTMLAttributes, type PropType } from \"vue\"\nimport type { ControlSize, SemanticColors, Sizes, Variants } from \"@plexui/styles/types\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers.js\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers.js\"\nimport { LoadingIndicator } from \"../Indicator/index.js\"\nimport { TransitionGroup } from \"../Transition/index.js\"\nimport s from \"@plexui/styles/components/Button/Button.module.css\"\n\n// Vue port of packages/ui/src/components/Button/Button.tsx. Props, defaults\n// and rendered attributes match React 1:1 (checked by the parity tests).\n// Boolean props default to `undefined` where React distinguishes \"not set\"\n// from `false` (`inert` falls back to `loading`, `aria-disabled` renders \"false\").\n\nexport type ButtonColor = SemanticColors<\n  \"primary\" | \"secondary\" | \"danger\" | \"success\" | \"info\" | \"discovery\" | \"caution\" | \"warning\"\n>\n\nconst ButtonComponent = defineComponent({\n  name: \"Button\",\n  props: {\n    /** @default \"button\" */\n    type: { type: String as PropType<\"button\" | \"submit\" | \"reset\">, default: \"button\" },\n    /** Color for the button. @default \"primary\" */\n    color: { type: String as PropType<ButtonColor>, default: \"primary\" },\n    /** Style variant for the Button. @default \"solid\" */\n    variant: { type: String as PropType<Variants<\"solid\" | \"soft\" | \"outline\" | \"ghost\">>, default: \"solid\" },\n    /** Determines if the button should be a fully rounded pill shape. @default false */\n    pill: { type: Boolean, default: false },\n    /** Determines if the button should have matching width and height, based on the `size`. @default false */\n    uniform: { type: Boolean, default: false },\n    /** Controls size of the button: height, plus defaults for `gutterSize`, `iconSize` and font size. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    /** Controls the size of icons within the button, defaults to value from `size`. */\n    iconSize: String as PropType<Sizes<\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\">>,\n    /** Controls gutter on the edges of the button, defaults to value from `size`. */\n    gutterSize: String as PropType<Sizes<\"3xs\" | \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n    /** Displays loading indicator on top of button contents. @default false */\n    loading: { type: Boolean, default: undefined },\n    /** Displays selected styles on the button, varying by `variant`. @default false */\n    selected: { type: Boolean, default: undefined },\n    /** Determines if the button should take up 100% of available width. @default false */\n    block: { type: Boolean, default: undefined },\n    /** Applies a negative margin using the current gutter to optically align the button with surrounding content. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n    /** Disables the button visually and from interactions. @default false */\n    disabled: { type: Boolean, default: undefined },\n    /** Controls the visual tone when the button is disabled. \"relaxed\" will use a default cursor instead of not-allowed. */\n    disabledTone: String as PropType<\"relaxed\">,\n    /** Determines whether the button should be made inert, without introducing visual change. Defaults to `loading`. */\n    inert: { type: Boolean, default: undefined },\n  },\n  emits: {\n    click: (_event: MouseEvent) => true,\n  },\n  setup(props, { slots, emit }) {\n    const handleClick = (event: MouseEvent) => {\n      if (props.disabled) {\n        return\n      }\n      emit(\"click\", event)\n    }\n\n    return () => {\n      // Defaults to `loading` state\n      const inert = props.inert === undefined ? props.loading : props.inert\n      const isInert = props.disabled || inert\n      const { loading } = props\n\n      return h(\n        \"button\",\n        {\n          \"type\": props.type,\n          \"class\": s.Button,\n          \"data-color\": props.color,\n          \"data-variant\": props.variant,\n          \"data-pill\": props.pill ? \"\" : undefined,\n          \"data-uniform\": props.uniform ? \"\" : undefined,\n          \"data-size\": props.size,\n          \"data-gutter-size\": props.gutterSize,\n          \"data-icon-size\": props.iconSize,\n          \"data-loading\": loading ? \"\" : undefined,\n          \"data-selected\": props.selected ? \"\" : undefined,\n          \"data-block\": props.block ? \"\" : undefined,\n          \"data-optically-align\": props.opticallyAlign,\n          \"onPointerenter\": handlePressableMouseEnter,\n          // Non-visual, accessible disablement\n          // NOTE: Do not use literal `inert` because that is incorrect semantically\n          \"disabled\": isInert,\n          \"aria-disabled\": isInert,\n          \"tabindex\": isInert ? -1 : undefined,\n          // Visual disablement\n          \"data-disabled\": props.disabled ? \"\" : undefined,\n          \"data-disabled-tone\": props.disabled ? props.disabledTone : undefined,\n          \"onClick\": handleClick,\n        },\n        [\n          // React renders `{loading && <LoadingIndicator />}`: nothing when\n          // `loading` is unset, an empty slot when it is `false`.\n          h(\n            TransitionGroup,\n            { class: s.ButtonLoader, enterDuration: 250, exitDuration: 150 },\n            loading === undefined\n              ? undefined\n              : {\n                  default: () =>\n                    loading ? [h(LoadingIndicator, { key: \"loader\" })] : [createCommentVNode()],\n                },\n          ),\n          h(\"span\", { class: s.ButtonInner }, wrapTextNodeSiblings(slots.default?.())),\n        ],\n      )\n    }\n  },\n})\n\ntype ButtonOwnProps = InstanceType<typeof ButtonComponent>[\"$props\"]\n\n/** Button props plus the native <button> attributes that fall through to it, as in React. */\nexport type ButtonProps = ButtonOwnProps & Omit<ButtonHTMLAttributes, keyof ButtonOwnProps>\n\nexport const Button = ButtonComponent as typeof ButtonComponent & { new (): { $props: ButtonProps } }\n"]}

package/dist/es/components/Button/ButtonLink.js

@@ -0,0 +1,82 @@
+import { defineComponent, h, mergeProps } from "vue";
+import { handlePressableMouseEnter } from "../../lib/helpers.js";
+import { takesToProp, wrapTextNodeSiblings } from "../../lib/renderHelpers.js";
+import { useLinkComponent } from "../PlexUIProvider/internal.js";
+import s from "@plexui/styles/components/Button/Button.module.css";
+const defined = (props) => Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
+/** Vue port of `ButtonLink` from packages/ui/src/components/Button/Button.tsx. */
+export const ButtonLink = defineComponent({
+    name: "ButtonLink",
+    inheritAttrs: false,
+    props: {
+        /** Color for the link. @default "primary" */
+        color: { type: String, default: "primary" },
+        /** Style variant. @default "solid" */
+        variant: { type: String, default: "solid" },
+        /** Fully rounded pill shape. @default false */
+        pill: { type: Boolean, default: false },
+        /** Control height and typography scale. @default "md" */
+        size: { type: String, default: "md" },
+        gutterSize: String,
+        iconSize: String,
+        /** Force external-link behavior. */
+        external: { type: Boolean, default: undefined },
+        block: { type: Boolean, default: undefined },
+        opticallyAlign: String,
+        disabled: { type: Boolean, default: undefined },
+        disabledTone: String,
+        /** Link component override (e.g. a router link). */
+        as: [String, Object, Function],
+        href: String,
+        to: [String, Object],
+    },
+    emits: {
+        click: (_event) => true,
+    },
+    setup(props, { slots, attrs, emit }) {
+        const DefaultComponent = useLinkComponent();
+        return () => {
+            const { href, to, disabled } = props;
+            const isExternal = props.external ?? /^https?:\/\//.test(href ?? (typeof to === "string" ? to : "") ?? "");
+            const LinkComponent = props.as || (isExternal ? "a" : DefaultComponent.value);
+            const { class: className, ...restAttrs } = attrs;
+            const sharedProps = {
+                "class": [s.Button, className],
+                // React renders boolean `disabled` on a link as an empty attribute
+                "disabled": disabled ? "" : undefined,
+                "aria-disabled": disabled,
+                "tabindex": disabled ? -1 : undefined,
+                // Visual disablement (inert not supported in links, always applied)
+                "data-disabled": disabled ? "" : undefined,
+                "data-disabled-tone": disabled ? props.disabledTone : undefined,
+                "data-color": props.color,
+                "data-variant": props.variant,
+                "data-pill": props.pill ? "" : undefined,
+                "data-block": props.block ? "" : undefined,
+                "data-optically-align": props.opticallyAlign,
+                "data-size": props.size,
+                "data-gutter-size": props.gutterSize,
+                "data-icon-size": props.iconSize,
+                "onClick": disabled ? undefined : (event) => emit("click", event),
+                "onPointerenter": handlePressableMouseEnter,
+            };
+            const inner = () => h("span", { class: s.ButtonInner }, wrapTextNodeSiblings(slots.default?.()));
+            if (disabled) {
+                // Don't thread down stuff that isn't valid for a span - just keep the event handlers
+                const eventProps = Object.fromEntries(Object.entries(restAttrs).filter(([key, value]) => key.startsWith("on") && typeof value === "function"));
+                // mergeProps keeps both pointerenter handlers, as React composes them
+                return h("span", defined(mergeProps({ role: "link" }, sharedProps, eventProps)), [inner()]);
+            }
+            const linkProps = defined(mergeProps(isExternal
+                ? { target: "_blank", rel: "noopener noreferrer", href: href ?? to }
+                : // A router link (`to` required) gets the href as `to`
+                    to === undefined && takesToProp(LinkComponent)
+                        ? { to: href }
+                        : { href, to }, sharedProps, restAttrs));
+            return typeof LinkComponent === "string"
+                ? h(LinkComponent, linkProps, [inner()])
+                : h(LinkComponent, linkProps, { default: () => [inner()] });
+        };
+    },
+});
+//# sourceMappingURL=ButtonLink.js.map

package/dist/es/components/Button/ButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../../../src/components/Button/ButtonLink.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, mergeProps, type PropType } from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers.js\"\nimport { takesToProp, wrapTextNodeSiblings } from \"../../lib/renderHelpers.js\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal.js\"\nimport type { LinkComponent } from \"../PlexUIProvider/index.js\"\nimport type { ButtonColor } from \"./Button.js\"\nimport s from \"@plexui/styles/components/Button/Button.module.css\"\n\ntype RouteTarget = string | Record<string, unknown>\n\nconst defined = (props: Record<string, unknown>) =>\n  Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined))\n\n/** Vue port of `ButtonLink` from packages/ui/src/components/Button/Button.tsx. */\nexport const ButtonLink = defineComponent({\n  name: \"ButtonLink\",\n  inheritAttrs: false,\n  props: {\n    /** Color for the link. @default \"primary\" */\n    color: { type: String as PropType<ButtonColor>, default: \"primary\" },\n    /** Style variant. @default \"solid\" */\n    variant: { type: String as PropType<Variants<\"solid\" | \"soft\" | \"outline\" | \"ghost\">>, default: \"solid\" },\n    /** Fully rounded pill shape. @default false */\n    pill: { type: Boolean, default: false },\n    /** Control height and typography scale. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    gutterSize: String as PropType<Sizes<\"3xs\" | \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n    iconSize: String as PropType<Sizes<\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\">>,\n    /** Force external-link behavior. */\n    external: { type: Boolean, default: undefined },\n    block: { type: Boolean, default: undefined },\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n    disabled: { type: Boolean, default: undefined },\n    disabledTone: String as PropType<\"relaxed\">,\n    /** Link component override (e.g. a router link). */\n    as: [String, Object, Function] as PropType<LinkComponent>,\n    href: String,\n    to: [String, Object] as PropType<RouteTarget>,\n  },\n  emits: {\n    click: (_event: MouseEvent) => true,\n  },\n  setup(props, { slots, attrs, emit }) {\n    const DefaultComponent = useLinkComponent()\n\n    return () => {\n      const { href, to, disabled } = props\n      const isExternal = props.external ?? /^https?:\\/\\//.test(href ?? (typeof to === \"string\" ? to : \"\") ?? \"\")\n      const LinkComponent = props.as || (isExternal ? \"a\" : DefaultComponent.value)\n      const { class: className, ...restAttrs } = attrs\n\n      const sharedProps = {\n        \"class\": [s.Button, className],\n        // React renders boolean `disabled` on a link as an empty attribute\n        \"disabled\": disabled ? \"\" : undefined,\n        \"aria-disabled\": disabled,\n        \"tabindex\": disabled ? -1 : undefined,\n        // Visual disablement (inert not supported in links, always applied)\n        \"data-disabled\": disabled ? \"\" : undefined,\n        \"data-disabled-tone\": disabled ? props.disabledTone : undefined,\n        \"data-color\": props.color,\n        \"data-variant\": props.variant,\n        \"data-pill\": props.pill ? \"\" : undefined,\n        \"data-block\": props.block ? \"\" : undefined,\n        \"data-optically-align\": props.opticallyAlign,\n        \"data-size\": props.size,\n        \"data-gutter-size\": props.gutterSize,\n        \"data-icon-size\": props.iconSize,\n        \"onClick\": disabled ? undefined : (event: MouseEvent) => emit(\"click\", event),\n        \"onPointerenter\": handlePressableMouseEnter,\n      }\n      const inner = () => h(\"span\", { class: s.ButtonInner }, wrapTextNodeSiblings(slots.default?.()))\n\n      if (disabled) {\n        // Don't thread down stuff that isn't valid for a span - just keep the event handlers\n        const eventProps = Object.fromEntries(\n          Object.entries(restAttrs).filter(([key, value]) => key.startsWith(\"on\") && typeof value === \"function\"),\n        )\n        // mergeProps keeps both pointerenter handlers, as React composes them\n        return h(\"span\", defined(mergeProps({ role: \"link\" }, sharedProps, eventProps)), [inner()])\n      }\n\n      const linkProps = defined(\n        mergeProps(\n          isExternal\n            ? { target: \"_blank\", rel: \"noopener noreferrer\", href: href ?? to }\n            : // A router link (`to` required) gets the href as `to`\n              to === undefined && takesToProp(LinkComponent)\n              ? { to: href }\n              : { href, to },\n          sharedProps,\n          restAttrs,\n        ),\n      )\n\n      return typeof LinkComponent === \"string\"\n        ? h(LinkComponent, linkProps, [inner()])\n        : h(LinkComponent, linkProps, { default: () => [inner()] })\n    }\n  },\n})\n"]}

package/dist/es/components/Button/CopyButton.js

@@ -0,0 +1,74 @@
+import { defineComponent, h, onBeforeUnmount, ref } from "vue";
+import { copyToClipboard } from "../../lib/copyToClipboard.js";
+import Check from "../Icon/svg/CheckMd.js";
+import Copy from "../Icon/svg/Copy.js";
+import { Animate } from "../Transition/index.js";
+import { Button } from "./Button.js";
+const CopyButtonComponent = defineComponent({
+    name: "CopyButton",
+    props: {
+        copyValue: {
+            type: [String, Object, Function],
+            required: true,
+        },
+    },
+    emits: {
+        click: (_event) => true,
+        /** The clipboard write settled; `copied` says whether it succeeded (React's `onCopy`). */
+        copy: (_copied) => true,
+    },
+    setup(props, { slots, emit, attrs }) {
+        const copied = ref(false);
+        let copiedTimeout = null;
+        let pending = false;
+        let mounted = true;
+        const handleClick = async (event) => {
+            // No-op while copied, or while a write is still in flight
+            if (copied.value || pending) {
+                return;
+            }
+            emit("click", event);
+            // The copied state follows the clipboard: a failed write shows no check
+            pending = true;
+            const succeeded = await copyToClipboard(typeof props.copyValue === "function" ? props.copyValue() : props.copyValue);
+            pending = false;
+            if (!mounted)
+                return;
+            emit("copy", succeeded);
+            if (!succeeded)
+                return;
+            copied.value = true;
+            copiedTimeout = window.setTimeout(() => {
+                copied.value = false;
+            }, 1300);
+        };
+        onBeforeUnmount(() => {
+            mounted = false;
+            if (copiedTimeout)
+                clearTimeout(copiedTimeout);
+        });
+        return () => {
+            // Icon-only copy buttons have no text content, so they need a name of their own
+            const ariaLabel = attrs["aria-label"] ?? (slots.default ? undefined : copied.value ? "Copied" : "Copy");
+            return h(Button, { "aria-label": ariaLabel, "onClick": handleClick }, {
+                default: () => [
+                    h(Animate, {
+                        class: "w-[var(--button-icon-size)] h-[var(--button-icon-size)]",
+                        initial: { scale: 0.6 },
+                        enter: { scale: 1, delay: 150, duration: 300 },
+                        exit: { scale: 0.6, duration: 150 },
+                        forceCompositeLayer: true,
+                    }, { default: () => [copied.value ? h(Check, { key: "copied-icon" }) : h(Copy, { key: "copy-icon" })] }),
+                    slots.default?.({ copied: copied.value }),
+                ],
+            });
+        };
+    },
+});
+/**
+ * Port of packages/ui/src/components/Button/CopyButton.tsx. Every Button
+ * prop passes through; the default slot receives `{ copied }`, like the
+ * React render-function child.
+ */
+export const CopyButton = CopyButtonComponent;
+//# sourceMappingURL=CopyButton.js.map

package/dist/es/components/Button/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../../src/components/Button/CopyButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, onBeforeUnmount, ref, type PropType } from \"vue\"\nimport { copyToClipboard, type ClipboardContent } from \"../../lib/copyToClipboard.js\"\nimport Check from \"../Icon/svg/CheckMd.js\"\nimport Copy from \"../Icon/svg/Copy.js\"\nimport { Animate } from \"../Transition/index.js\"\nimport { Button, type ButtonProps } from \"./Button.js\"\n\nconst CopyButtonComponent = defineComponent({\n  name: \"CopyButton\",\n  props: {\n    copyValue: {\n      type: [String, Object, Function] as PropType<\n        string | ClipboardContent | (() => string) | (() => ClipboardContent)\n      >,\n      required: true,\n    },\n  },\n  emits: {\n    click: (_event: MouseEvent) => true,\n    /** The clipboard write settled; `copied` says whether it succeeded (React's `onCopy`). */\n    copy: (_copied: boolean) => true,\n  },\n  setup(props, { slots, emit, attrs }) {\n    const copied = ref(false)\n    let copiedTimeout: number | null = null\n    let pending = false\n    let mounted = true\n\n    const handleClick = async (event: MouseEvent) => {\n      // No-op while copied, or while a write is still in flight\n      if (copied.value || pending) {\n        return\n      }\n\n      emit(\"click\", event)\n\n      // The copied state follows the clipboard: a failed write shows no check\n      pending = true\n      const succeeded = await copyToClipboard(typeof props.copyValue === \"function\" ? props.copyValue() : props.copyValue)\n      pending = false\n      if (!mounted) return\n      emit(\"copy\", succeeded)\n      if (!succeeded) return\n\n      copied.value = true\n      copiedTimeout = window.setTimeout(() => {\n        copied.value = false\n      }, 1300)\n    }\n\n    onBeforeUnmount(() => {\n      mounted = false\n      if (copiedTimeout) clearTimeout(copiedTimeout)\n    })\n\n    return () => {\n      // Icon-only copy buttons have no text content, so they need a name of their own\n      const ariaLabel =\n        (attrs[\"aria-label\"] as string | undefined) ?? (slots.default ? undefined : copied.value ? \"Copied\" : \"Copy\")\n\n      return h(Button, { \"aria-label\": ariaLabel, \"onClick\": handleClick }, {\n        default: () => [\n          h(\n            Animate,\n            {\n              class: \"w-[var(--button-icon-size)] h-[var(--button-icon-size)]\",\n              initial: { scale: 0.6 },\n              enter: { scale: 1, delay: 150, duration: 300 },\n              exit: { scale: 0.6, duration: 150 },\n              forceCompositeLayer: true,\n            },\n            { default: () => [copied.value ? h(Check, { key: \"copied-icon\" }) : h(Copy, { key: \"copy-icon\" })] },\n          ),\n          slots.default?.({ copied: copied.value }),\n        ],\n      })\n    }\n  },\n})\n\ntype CopyButtonOwnProps = InstanceType<typeof CopyButtonComponent>[\"$props\"]\n\n/** CopyButton props plus every Button prop, which pass through to the Button. */\nexport type CopyButtonProps = CopyButtonOwnProps & Omit<ButtonProps, keyof CopyButtonOwnProps>\n\n/**\n * Port of packages/ui/src/components/Button/CopyButton.tsx. Every Button\n * prop passes through; the default slot receives `{ copied }`, like the\n * React render-function child.\n */\nexport const CopyButton = CopyButtonComponent as typeof CopyButtonComponent & { new (): { $props: CopyButtonProps } }\n"]}

package/dist/es/components/Button/index.js

@@ -0,0 +1,4 @@
+export { Button } from "./Button.js";
+export { ButtonLink } from "./ButtonLink.js";
+export { CopyButton } from "./CopyButton.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAsC,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAA","sourcesContent":["export { Button, type ButtonColor, type ButtonProps } from \"./Button.js\"\nexport { ButtonLink } from \"./ButtonLink.js\"\nexport { CopyButton, type CopyButtonProps } from \"./CopyButton.js\"\n"]}

package/dist/es/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,63 @@
+import { defineComponent, h } from "vue";
+import { Separator } from "../Separator/index.js";
+import { firstElementChild, mergeSlotProps } from "../Tooltip/slot.js";
+import s from "@plexui/styles/components/ButtonGroup/ButtonGroup.module.css";
+const ButtonGroupComponent = defineComponent({
+    name: "ButtonGroup",
+    props: {
+        /** Direction of the joined buttons. @default "horizontal" */
+        orientation: { type: String, default: "horizontal" },
+    },
+    setup(props, { slots }) {
+        return () => h("div", {
+            "role": "group",
+            "data-slot": "button-group",
+            "data-orientation": props.orientation,
+            "class": s.Root,
+        }, slots.default?.());
+    },
+});
+/** Joins buttons, inputs and other controls into a single visual unit. */
+export const ButtonGroup = ButtonGroupComponent;
+/** Thin divider between items (React `ButtonGroup.Separator`). Other props go to `Separator`. */
+export const ButtonGroupSeparator = defineComponent({
+    name: "ButtonGroupSeparator",
+    props: {
+        /**
+         * When omitted, uses `"vertical"`, the axis that looks right between
+         * horizontal items. Pass explicitly inside a vertical group.
+         */
+        orientation: String,
+    },
+    setup(props) {
+        return () => h(Separator, {
+            "data-slot": "button-group-separator",
+            "orientation": props.orientation ?? "vertical",
+            "class": s.Separator,
+        });
+    },
+});
+/** Muted label sharing the group's joined geometry (React `ButtonGroup.Text`). */
+export const ButtonGroupText = defineComponent({
+    name: "ButtonGroupText",
+    inheritAttrs: false,
+    props: {
+        /**
+         * Render the passed child (label, span, ...) instead of a `<div>`, while
+         * keeping the group's visual treatment.
+         * @default false
+         */
+        asChild: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { class: className, ...restAttrs } = attrs;
+            const ownProps = { "data-slot": "button-group-text", "class": [s.Text, className], ...restAttrs };
+            if (!props.asChild)
+                return h("div", ownProps, slots.default?.());
+            const child = firstElementChild(slots.default?.());
+            return child ? mergeSlotProps(child, ownProps) : null;
+        };
+    },
+});
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/es/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAsC,MAAM,KAAK,CAAA;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,CAAC,MAAM,8DAA8D,CAAA;AAY5E,MAAM,oBAAoB,GAAG,eAAe,CAAC;IAC3C,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,6DAA6D;QAC7D,WAAW,EAAE,EAAE,IAAI,EAAE,MAA0C,EAAE,OAAO,EAAE,YAAY,EAAE;KACzF;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE,CACV,CAAC,CACC,KAAK,EACL;YACE,MAAM,EAAE,OAAO;YACf,WAAW,EAAE,cAAc;YAC3B,kBAAkB,EAAE,KAAK,CAAC,WAAW;YACrC,OAAO,EAAE,CAAC,CAAC,IAAI;SAChB,EACD,KAAK,CAAC,OAAO,EAAE,EAAE,CAClB,CAAA;IACL,CAAC;CACF,CAAC,CAAA;AAOF,0EAA0E;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,oBAE1B,CAAA;AAED,iGAAiG;AACjG,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IAClD,IAAI,EAAE,sBAAsB;IAC5B,KAAK,EAAE;QACL;;;WAGG;QACH,WAAW,EAAE,MAA0C;KACxD;IACD,KAAK,CAAC,KAAK;QACT,OAAO,GAAG,EAAE,CACV,CAAC,CAAC,SAAS,EAAE;YACX,WAAW,EAAE,wBAAwB;YACrC,aAAa,EAAE,KAAK,CAAC,WAAW,IAAI,UAAU;YAC9C,OAAO,EAAE,CAAC,CAAC,SAAS;SACrB,CAAC,CAAA;IACN,CAAC;CACF,CAAC,CAAA;AAMF,kFAAkF;AAClF,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL;;;;WAIG;QACH,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;KAC3C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;YAChD,MAAM,QAAQ,GAAG,EAAE,WAAW,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAA;YACjG,IAAI,CAAC,KAAK,CAAC,OAAO;gBAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YAChE,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YAClD,OAAO,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QACvD,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import { defineComponent, h, type HTMLAttributes, type PropType } from \"vue\"\nimport { Separator } from \"../Separator/index.js\"\nimport { firstElementChild, mergeSlotProps } from \"../Tooltip/slot.js\"\nimport s from \"@plexui/styles/components/ButtonGroup/ButtonGroup.module.css\"\n\n// Vue port of packages/ui/src/components/ButtonGroup/ButtonGroup.tsx.\n// Exports are flat (`ButtonGroupSeparator` for `ButtonGroup.Separator`, ...).\n// React spreads the remaining props after its own attributes, so caller\n// attributes win; Vue's attribute fallthrough merges them the same way.\n// `asChild` merges the way Radix's Slot does (the slot's class comes first,\n// the child's own props win, the child's handlers run first), which Reka's\n// Slot does not, hence the Tooltip's slot helpers.\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst ButtonGroupComponent = defineComponent({\n  name: \"ButtonGroup\",\n  props: {\n    /** Direction of the joined buttons. @default \"horizontal\" */\n    orientation: { type: String as PropType<ButtonGroupOrientation>, default: \"horizontal\" },\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\n        \"div\",\n        {\n          \"role\": \"group\",\n          \"data-slot\": \"button-group\",\n          \"data-orientation\": props.orientation,\n          \"class\": s.Root,\n        },\n        slots.default?.(),\n      )\n  },\n})\n\ntype ButtonGroupOwnProps = InstanceType<typeof ButtonGroupComponent>[\"$props\"]\n\n/** ButtonGroup props plus the native <div> attributes that fall through to it, as in React. */\nexport type ButtonGroupProps = ButtonGroupOwnProps & Omit<HTMLAttributes, keyof ButtonGroupOwnProps>\n\n/** Joins buttons, inputs and other controls into a single visual unit. */\nexport const ButtonGroup = ButtonGroupComponent as typeof ButtonGroupComponent & {\n  new (): { $props: ButtonGroupProps }\n}\n\n/** Thin divider between items (React `ButtonGroup.Separator`). Other props go to `Separator`. */\nexport const ButtonGroupSeparator = defineComponent({\n  name: \"ButtonGroupSeparator\",\n  props: {\n    /**\n     * When omitted, uses `\"vertical\"`, the axis that looks right between\n     * horizontal items. Pass explicitly inside a vertical group.\n     */\n    orientation: String as PropType<ButtonGroupOrientation>,\n  },\n  setup(props) {\n    return () =>\n      h(Separator, {\n        \"data-slot\": \"button-group-separator\",\n        \"orientation\": props.orientation ?? \"vertical\",\n        \"class\": s.Separator,\n      })\n  },\n})\n\nexport type ButtonGroupSeparatorProps = InstanceType<typeof ButtonGroupSeparator>[\"$props\"] & {\n  decorative?: boolean\n}\n\n/** Muted label sharing the group's joined geometry (React `ButtonGroup.Text`). */\nexport const ButtonGroupText = defineComponent({\n  name: \"ButtonGroupText\",\n  inheritAttrs: false,\n  props: {\n    /**\n     * Render the passed child (label, span, ...) instead of a `<div>`, while\n     * keeping the group's visual treatment.\n     * @default false\n     */\n    asChild: { type: Boolean, default: false },\n  },\n  setup(props, { attrs, slots }) {\n    return () => {\n      const { class: className, ...restAttrs } = attrs\n      const ownProps = { \"data-slot\": \"button-group-text\", \"class\": [s.Text, className], ...restAttrs }\n      if (!props.asChild) return h(\"div\", ownProps, slots.default?.())\n      const child = firstElementChild(slots.default?.())\n      return child ? mergeSlotProps(child, ownProps) : null\n    }\n  },\n})\n\nexport type ButtonGroupTextProps = InstanceType<typeof ButtonGroupText>[\"$props\"] & HTMLAttributes\n"]}

package/dist/es/components/ButtonGroup/index.js

@@ -0,0 +1,2 @@
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from "./ButtonGroup.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,eAAe,GAKhB,MAAM,kBAAkB,CAAA","sourcesContent":["export {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  type ButtonGroupOrientation,\n  type ButtonGroupProps,\n  type ButtonGroupSeparatorProps,\n  type ButtonGroupTextProps,\n} from \"./ButtonGroup.js\"\n"]}

package/dist/es/components/Card/Card.js

@@ -0,0 +1,82 @@
+import { defineComponent, h, mergeProps } from "vue";
+import { takesToProp } from "../../lib/renderHelpers.js";
+import { useLinkComponent } from "../PlexUIProvider/internal.js";
+import s from "@plexui/styles/components/Card/Card.module.css";
+const defined = (props) => Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
+const CardComponent = defineComponent({
+    name: "Card",
+    inheritAttrs: false,
+    props: {
+        /**
+         * Visual variant of the card: `"outline"` (1px border), `"solid"` (muted
+         * background) or `"ghost"` (no border, no background).
+         * @default "outline"
+         */
+        variant: { type: String, default: "outline" },
+        /** Padding scale. @default "md" */
+        size: { type: String, default: "md" },
+        /** Adds hover/focus affordances. Automatic when `href` is provided. @default false */
+        interactive: { type: Boolean, default: false },
+        /** When provided, the Card renders as a link. */
+        href: String,
+        /** Explicitly flag as external, otherwise detected from `href`. */
+        external: { type: Boolean, default: undefined },
+        /** Override the rendered link component (e.g. a router link). */
+        as: [String, Object, Function],
+    },
+    setup(props, { attrs, slots }) {
+        const DefaultLink = useLinkComponent();
+        return () => {
+            const { class: className, ...restAttrs } = attrs;
+            // React checks `typeof href === "string"`, so an empty href still makes a link
+            const isLink = typeof props.href === "string";
+            const sharedProps = {
+                "class": [s.Card, className],
+                "data-variant": props.variant,
+                "data-size": props.size,
+                "data-interactive": props.interactive || isLink ? "" : undefined,
+            };
+            if (!isLink) {
+                return h("div", defined(mergeProps(sharedProps, restAttrs)), slots.default?.());
+            }
+            const href = props.href;
+            const isExternal = props.external ?? /^https?:\/\//.test(href);
+            const LinkComponent = props.as || (isExternal ? "a" : DefaultLink.value);
+            const linkAttrs = isExternal
+                ? { target: "_blank", rel: "noopener noreferrer", href }
+                : // A router link (`to` required) gets the href as `to`
+                    takesToProp(LinkComponent)
+                        ? { to: href }
+                        : { href };
+            const linkProps = defined(mergeProps(sharedProps, linkAttrs, restAttrs));
+            return typeof LinkComponent === "string"
+                ? h(LinkComponent, linkProps, slots.default?.())
+                : h(LinkComponent, linkProps, { default: () => slots.default?.() });
+        };
+    },
+});
+/** Surface primitive. Renders a `<div>`, or a link when `href` is set. */
+export const Card = CardComponent;
+const part = (name, tag, className) => {
+    const component = defineComponent({
+        name,
+        setup(_props, { slots }) {
+            return () => h(tag, { class: className }, slots.default?.());
+        },
+    });
+    // Attributes fall through to the part's element
+    return component;
+};
+/** Title + description + optional action (React `Card.Header`). */
+export const CardHeader = part("CardHeader", "div", s.Header);
+/** Card heading, an `<h3>` (React `Card.Title`). */
+export const CardTitle = part("CardTitle", "h3", s.Title);
+/** Subtitle or explanation, a `<p>` (React `Card.Description`). */
+export const CardDescription = part("CardDescription", "p", s.Description);
+/** Primary body region (React `Card.Content`). */
+export const CardContent = part("CardContent", "div", s.Content);
+/** Trailing actions row (React `Card.Footer`). */
+export const CardFooter = part("CardFooter", "div", s.Footer);
+/** Absolute top-right slot inside `CardHeader` (React `Card.Action`). */
+export const CardAction = part("CardAction", "div", s.Action);
+//# sourceMappingURL=Card.js.map

package/dist/es/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, mergeProps, type AnchorHTMLAttributes, type DefineComponent, type HTMLAttributes, type PropType } from \"vue\"\nimport { takesToProp } from \"../../lib/renderHelpers.js\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal.js\"\nimport type { LinkComponent } from \"../PlexUIProvider/index.js\"\nimport s from \"@plexui/styles/components/Card/Card.module.css\"\n\n// Vue port of packages/ui/src/components/Card/Card.tsx. Exports are flat\n// (`CardHeader` for `Card.Header`, ...). As in React, caller attributes are\n// applied after the card's own (`class` is merged), so they win.\n\nexport type CardVariant = \"outline\" | \"solid\" | \"ghost\"\nexport type CardSize = \"sm\" | \"md\" | \"lg\"\n\nconst defined = (props: Record<string, unknown>) =>\n  Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined))\n\nconst CardComponent = defineComponent({\n  name: \"Card\",\n  inheritAttrs: false,\n  props: {\n    /**\n     * Visual variant of the card: `\"outline\"` (1px border), `\"solid\"` (muted\n     * background) or `\"ghost\"` (no border, no background).\n     * @default \"outline\"\n     */\n    variant: { type: String as PropType<CardVariant>, default: \"outline\" },\n    /** Padding scale. @default \"md\" */\n    size: { type: String as PropType<CardSize>, default: \"md\" },\n    /** Adds hover/focus affordances. Automatic when `href` is provided. @default false */\n    interactive: { type: Boolean, default: false },\n    /** When provided, the Card renders as a link. */\n    href: String,\n    /** Explicitly flag as external, otherwise detected from `href`. */\n    external: { type: Boolean, default: undefined },\n    /** Override the rendered link component (e.g. a router link). */\n    as: [String, Object, Function] as PropType<LinkComponent>,\n  },\n  setup(props, { attrs, slots }) {\n    const DefaultLink = useLinkComponent()\n\n    return () => {\n      const { class: className, ...restAttrs } = attrs\n      // React checks `typeof href === \"string\"`, so an empty href still makes a link\n      const isLink = typeof props.href === \"string\"\n\n      const sharedProps = {\n        \"class\": [s.Card, className],\n        \"data-variant\": props.variant,\n        \"data-size\": props.size,\n        \"data-interactive\": props.interactive || isLink ? \"\" : undefined,\n      }\n\n      if (!isLink) {\n        return h(\"div\", defined(mergeProps(sharedProps, restAttrs)), slots.default?.())\n      }\n\n      const href = props.href as string\n      const isExternal = props.external ?? /^https?:\\/\\//.test(href)\n      const LinkComponent = props.as || (isExternal ? \"a\" : DefaultLink.value)\n      const linkAttrs = isExternal\n        ? { target: \"_blank\", rel: \"noopener noreferrer\", href }\n        : // A router link (`to` required) gets the href as `to`\n          takesToProp(LinkComponent)\n          ? { to: href }\n          : { href }\n      const linkProps = defined(mergeProps(sharedProps, linkAttrs, restAttrs))\n\n      return typeof LinkComponent === \"string\"\n        ? h(LinkComponent, linkProps, slots.default?.())\n        : h(LinkComponent, linkProps, { default: () => slots.default?.() })\n    }\n  },\n})\n\ntype CardOwnProps = InstanceType<typeof CardComponent>[\"$props\"]\n\n/** Card props plus the native <div> / <a> attributes that fall through to it, as in React. */\nexport type CardProps = CardOwnProps & Omit<HTMLAttributes & AnchorHTMLAttributes, keyof CardOwnProps>\n\n/** Surface primitive. Renders a `<div>`, or a link when `href` is set. */\nexport const Card = CardComponent as typeof CardComponent & { new (): { $props: CardProps } }\n\n// An explicit type keeps the published declaration on Vue's `DefineComponent`\n// alias; an inferred one is expanded there and fails consumers' type checks\n// (`GlobalComponents` against `Record<string, Component>`, TS2344).\ntype CardPart = DefineComponent & { new (): { $props: CardSlotProps } }\n\nconst part = (name: string, tag: string, className: string | undefined): CardPart => {\n  const component = defineComponent({\n    name,\n    setup(_props, { slots }) {\n      return () => h(tag, { class: className }, slots.default?.())\n    },\n  })\n  // Attributes fall through to the part's element\n  return component as unknown as CardPart\n}\n\n/** Title + description + optional action (React `Card.Header`). */\nexport const CardHeader = part(\"CardHeader\", \"div\", s.Header)\n/** Card heading, an `<h3>` (React `Card.Title`). */\nexport const CardTitle = part(\"CardTitle\", \"h3\", s.Title)\n/** Subtitle or explanation, a `<p>` (React `Card.Description`). */\nexport const CardDescription = part(\"CardDescription\", \"p\", s.Description)\n/** Primary body region (React `Card.Content`). */\nexport const CardContent = part(\"CardContent\", \"div\", s.Content)\n/** Trailing actions row (React `Card.Footer`). */\nexport const CardFooter = part(\"CardFooter\", \"div\", s.Footer)\n/** Absolute top-right slot inside `CardHeader` (React `Card.Action`). */\nexport const CardAction = part(\"CardAction\", \"div\", s.Action)\n\n/** Props of the Card parts: native attributes of their element. */\nexport type CardSlotProps = HTMLAttributes\n"]}

package/dist/es/components/Card/index.js

@@ -0,0 +1,2 @@
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GAKV,MAAM,WAAW,CAAA","sourcesContent":["export {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  type CardProps,\n  type CardSize,\n  type CardSlotProps,\n  type CardVariant,\n} from \"./Card.js\"\n"]}

package/dist/es/components/Checkbox/Checkbox.js

@@ -0,0 +1,172 @@
+import { computed, defineComponent, h, onMounted, ref, useId, watch } from "vue";
+import { CheckboxIndicator as RekaCheckboxIndicator, CheckboxRoot as RekaCheckboxRoot } from "reka-ui";
+import { bubbleInputStyle, useBubbleInputEffect, useCheckedTracker, useIsFormControl, useSize } from "./bubbleInput.js";
+import { ControlButton, isListener } from "./ControlButton.js";
+import s from "@plexui/styles/components/Checkbox/Checkbox.module.css";
+const CheckboxComponent = defineComponent({
+    name: "Checkbox",
+    inheritAttrs: false,
+    props: {
+        /** The `id` of the checkbox. */
+        id: String,
+        /** The state of the checkbox when it is initially rendered. Use when you do not need to control its state. */
+        defaultChecked: { type: [Boolean, String], default: undefined },
+        /** The controlled state of the checkbox. Bind with `v-model:checked`. */
+        checked: { type: [Boolean, String], default: undefined },
+        /** Optional accessible label rendered to the right of the checkbox. The `label` slot takes rich content. */
+        label: String,
+        /** Optional second line below the label, linked via `aria-describedby`. The `description` slot takes rich content. */
+        description: String,
+        /** When `true`, prevents the user from interacting with the checkbox. */
+        disabled: { type: Boolean, default: false },
+        /** When `true`, indicates that the user must check the checkbox before the owning form can be submitted. */
+        required: { type: Boolean, default: undefined },
+        /** The name of the checkbox. Submitted with its owning form as part of a name/value pair. */
+        name: String,
+        /** The value given as data when submitted with a `name`. @default "on" */
+        value: String,
+        /** The orientation of the checkbox relative to the label. @default "left" */
+        orientation: { type: String, default: "left" },
+        /** Determines if the checkbox should be a fully rounded pill shape. @default false */
+        pill: { type: Boolean, default: false },
+        /** Visual style: `"solid"` fills the box when checked, `"ghost"` shows the checkmark only. @default "solid" */
+        variant: { type: String, default: "solid" },
+    },
+    emits: {
+        /** The state of the checkbox changed */
+        "update:checked": (_checked) => true,
+        /** The checkbox gained focus */
+        focus: (_event) => true,
+        /** The checkbox lost focus */
+        blur: (_event) => true,
+    },
+    setup(props, { attrs, slots, emit }) {
+        const generatedId = useId();
+        const container = ref(null);
+        const control = ref(null);
+        const bubbleInput = ref(null);
+        useCheckedTracker(bubbleInput);
+        // Radix's useControllableState: controlled while `checked` is set, and
+        // only actual changes are reported
+        const internalChecked = ref(props.defaultChecked ?? false);
+        const checked = computed(() => props.checked ?? internalChecked.value);
+        // The state a click asks for (Reka's toggle sets it), for the user click
+        let requestedChecked = true;
+        const setChecked = (next) => {
+            requestedChecked = next === true;
+            if (next === checked.value)
+                return;
+            if (props.checked === undefined)
+                internalChecked.value = next;
+            emit("update:checked", next);
+        };
+        const initialChecked = checked.value;
+        const isFormControl = useIsFormControl(control, () => attrs.form);
+        const controlSize = useSize(() => (isFormControl.value ? control.value : null));
+        const onUserClick = useBubbleInputEffect(bubbleInput, () => checked.value, true);
+        onMounted(() => {
+            control.value = container.value?.firstElementChild ?? null;
+        });
+        // Like a native checkbox, a form reset restores the initial state
+        watch(control, (button, _, onCleanup) => {
+            const form = button?.form;
+            if (!form)
+                return;
+            const reset = () => setChecked(initialChecked);
+            form.addEventListener("reset", reset);
+            onCleanup(() => form.removeEventListener("reset", reset));
+        });
+        // In a form, the button's click stops here; the input's click bubbles instead
+        const afterClick = (event) => {
+            const hasConsumerStoppedPropagation = event.cancelBubble;
+            onUserClick({ requestedChecked, hasConsumerStoppedPropagation });
+            if (bubbleInput.value && isFormControl.value && !hasConsumerStoppedPropagation)
+                event.stopPropagation();
+        };
+        // Prevents text selection when double-clicking the label
+        const handleLabelMouseDown = (event) => {
+            if (!event.defaultPrevented && event.detail > 1)
+                event.preventDefault();
+        };
+        return () => {
+            const { class: className, form, ...rest } = attrs;
+            const id = props.id ?? generatedId;
+            const hasLabel = Boolean(slots.label || props.label);
+            // The description only renders next to a label; it comes before any ids
+            // the caller (a Field, say) passes
+            const descriptionId = hasLabel && (slots.description || props.description) ? `${id}-label-description` : undefined;
+            const indeterminateDefault = props.defaultChecked === "indeterminate" ? false : props.defaultChecked;
+            const inputDefaultChecked = indeterminateDefault ?? (initialChecked === "indeterminate" ? false : initialChecked);
+            // The consumer's listeners compose with Reka's; other attributes land
+            // on the button after the component's own, as `{...restProps}` does
+            const listeners = {
+                onFocus: (event) => emit("focus", event),
+                onBlur: (event) => emit("blur", event),
+            };
+            const buttonAttrs = {};
+            for (const [key, value] of Object.entries(rest)) {
+                if (isListener(key))
+                    listeners[key] = value;
+                else
+                    buttonAttrs[key] = value;
+            }
+            const ariaDescribedBy = [descriptionId, buttonAttrs["aria-describedby"]].filter(Boolean).join(" ") || undefined;
+            const labelElement = hasLabel
+                ? h("label", { for: id, class: s.Label, onMousedown: handleLabelMouseDown }, slots.label ? slots.label() : props.label)
+                : null;
+            return h("div", {
+                "ref": container,
+                "data-disabled": props.disabled ? "" : undefined,
+                "data-has-label": hasLabel ? "" : undefined,
+                "data-orientation": props.orientation,
+                "class": [className, s.Container],
+            }, [
+                h(RekaCheckboxRoot, {
+                    "asChild": true,
+                    "modelValue": checked.value,
+                    "onUpdate:modelValue": setChecked,
+                    "disabled": props.disabled,
+                    // Passed even when unset, so Reka renders no aria-required="false"
+                    "required": props.required,
+                }, {
+                    default: () => h(ControlButton, {
+                        "listeners": listeners,
+                        "after": { onClick: afterClick },
+                        "class": s.Checkbox,
+                        "id": id,
+                        "data-pill": props.pill ? "" : undefined,
+                        "data-variant": props.variant,
+                        "value": props.value ?? "on",
+                        // Reka marks a disabled checkbox aria-disabled; Radix does not
+                        "aria-disabled": undefined,
+                        ...buttonAttrs,
+                        "aria-describedby": ariaDescribedBy,
+                    }, { default: () => h(RekaCheckboxIndicator, { class: s.CheckMark }) }),
+                }),
+                isFormControl.value
+                    ? h("input", {
+                        "ref": bubbleInput,
+                        "type": "checkbox",
+                        "aria-hidden": "true",
+                        "^checked": inputDefaultChecked ? "" : undefined,
+                        "required": props.required,
+                        "disabled": props.disabled,
+                        "name": props.name,
+                        "^value": props.value ?? "on",
+                        "form": form,
+                        "tabindex": -1,
+                        "style": bubbleInputStyle(controlSize.value, { transform: "translateX(-100%)" }),
+                    })
+                    : null,
+                descriptionId
+                    ? h("div", { class: s.LabelGroup }, [
+                        labelElement,
+                        h("span", { id: descriptionId, class: s.Description }, slots.description ? slots.description() : props.description),
+                    ])
+                    : labelElement,
+            ]);
+        };
+    },
+});
+export const Checkbox = CheckboxComponent;
+//# sourceMappingURL=Checkbox.js.map