@planningcenter/tapestry 4.4.1-rc.1 → 4.4.1-rc.2

package/dist/components/segmented-control/IconSegment.d.ts

@@ -0,0 +1,23 @@
+import "./index.css";
+import React, { type ButtonHTMLAttributes } from "react";
+export interface IconSegmentProps {
+    /** Accessible label — required since there's no visible text. */
+    "aria-label": string;
+    /** Disables this item only. */
+    disabled?: boolean;
+    /** The icon to display. */
+    icon: React.ReactNode;
+    /** Unique identifier for this item. */
+    value: string;
+}
+export type IconSegmentElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof IconSegmentProps | "aria-checked" | "children" | "onClick" | "onKeyDown" | "role" | "tabIndex" | "type"> & IconSegmentProps;
+/**
+ * An icon-only item within a `SegmentedControl`, mirroring `IconButton`'s
+ * shape. Must be rendered as a direct child of `SegmentedControl` — it reads
+ * selection state, group `disabled`, and roving tabindex from that context.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ */
+export declare const IconSegment: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | "type" | keyof IconSegmentProps> & IconSegmentProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconSegment.d.ts.map

package/dist/components/segmented-control/IconSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSegment.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/IconSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAIpE,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAA;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,gBAAgB,GACtB,cAAc,GACd,UAAU,GACV,SAAS,GACT,WAAW,GACX,MAAM,GACN,UAAU,GACV,MAAM,CACT,GACC,gBAAgB,CAAA;AAElB;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,iQAKtB,CAAA"}

package/dist/components/segmented-control/IconSegment.js

@@ -0,0 +1,18 @@
+import React__default, { forwardRef } from 'react';
+import { SegmentBase } from './SegmentBase.js';
+
+/**
+ * An icon-only item within a `SegmentedControl`, mirroring `IconButton`'s
+ * shape. Must be rendered as a direct child of `SegmentedControl` — it reads
+ * selection state, group `disabled`, and roving tabindex from that context.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ */
+const IconSegment = forwardRef(function IconSegment({ icon, ...restProps }, ref) {
+    return React__default.createElement(SegmentBase, { ...restProps, content: icon, iconOnly: true, ref: ref });
+});
+IconSegment.displayName = "IconSegment";
+
+export { IconSegment };
+//# sourceMappingURL=IconSegment.js.map

package/dist/components/segmented-control/IconSegment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSegment.js","sources":["../../../src/components/segmented-control/IconSegment.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport React, { type ButtonHTMLAttributes, forwardRef } from \"react\"\n\nimport { SegmentBase } from \"./SegmentBase\"\n\nexport interface IconSegmentProps {\n  /** Accessible label — required since there's no visible text. */\n  \"aria-label\": string\n  /** Disables this item only. */\n  disabled?: boolean\n  /** The icon to display. */\n  icon: React.ReactNode\n  /** Unique identifier for this item. */\n  value: string\n}\n\nexport type IconSegmentElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  | keyof IconSegmentProps\n  | \"aria-checked\"\n  | \"children\"\n  | \"onClick\"\n  | \"onKeyDown\"\n  | \"role\"\n  | \"tabIndex\"\n  | \"type\"\n> &\n  IconSegmentProps\n\n/**\n * An icon-only item within a `SegmentedControl`, mirroring `IconButton`'s\n * shape. Must be rendered as a direct child of `SegmentedControl` — it reads\n * selection state, group `disabled`, and roving tabindex from that context.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}\n */\nexport const IconSegment = forwardRef<\n  HTMLButtonElement,\n  IconSegmentElementProps\n>(function IconSegment({ icon, ...restProps }: IconSegmentElementProps, ref) {\n  return <SegmentBase {...restProps} content={icon} iconOnly ref={ref} />\n})\n\nIconSegment.displayName = \"IconSegment\"\n"],"names":["React"],"mappings":";;;AA8BA;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,UAAU,CAGnC,SAAS,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAA2B,EAAE,GAAG,EAAA;AACzE,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,GAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAA,IAAA,EAAC,GAAG,EAAE,GAAG,GAAI;AACzE,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/segmented-control/Segment.d.ts

@@ -0,0 +1,28 @@
+import "./index.css";
+import React, { type ButtonHTMLAttributes } from "react";
+export interface SegmentProps {
+    /** Disables this item only. */
+    disabled?: boolean;
+    /** Visible text. */
+    label: string;
+    /** Optional leading icon. */
+    prefix?: React.ReactNode;
+    /** Optional trailing icon. */
+    suffix?: React.ReactNode;
+    /**
+     * Unique identifier for this item — distinct from `label`, so relabeling
+     * doesn't change the selected identity.
+     */
+    value: string;
+}
+export type SegmentElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof SegmentProps | "aria-checked" | "children" | "onClick" | "onKeyDown" | "role" | "tabIndex" | "type"> & SegmentProps;
+/**
+ * A single item within a `SegmentedControl`. Must be rendered as a direct
+ * child of `SegmentedControl` — it reads selection state, group `disabled`,
+ * and roving tabindex from that context.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ */
+export declare const Segment: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | "type" | keyof SegmentProps> & SegmentProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Segment.d.ts.map

package/dist/components/segmented-control/Segment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/Segment.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAIpE,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,YAAY,GAClB,cAAc,GACd,UAAU,GACV,SAAS,GACT,WAAW,GACX,MAAM,GACN,UAAU,GACV,MAAM,CACT,GACC,YAAY,CAAA;AAEd;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,yPAmBnB,CAAA"}

package/dist/components/segmented-control/Segment.js

@@ -0,0 +1,22 @@
+import { wrapStringWithSpan } from '../../utilities/buttonLinkShared.js';
+import React__default, { forwardRef } from 'react';
+import { SegmentBase } from './SegmentBase.js';
+
+/**
+ * A single item within a `SegmentedControl`. Must be rendered as a direct
+ * child of `SegmentedControl` — it reads selection state, group `disabled`,
+ * and roving tabindex from that context.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ */
+const Segment = forwardRef(function Segment({ label, prefix, suffix, ...restProps }, ref) {
+    return (React__default.createElement(SegmentBase, { ...restProps, content: React__default.createElement(React__default.Fragment, null,
+            wrapStringWithSpan(prefix),
+            label,
+            wrapStringWithSpan(suffix)), ref: ref }));
+});
+Segment.displayName = "Segment";
+
+export { Segment };
+//# sourceMappingURL=Segment.js.map

package/dist/components/segmented-control/Segment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.js","sources":["../../../src/components/segmented-control/Segment.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { wrapStringWithSpan } from \"@utilities/buttonLinkShared\"\nimport React, { type ButtonHTMLAttributes, forwardRef } from \"react\"\n\nimport { SegmentBase } from \"./SegmentBase\"\n\nexport interface SegmentProps {\n  /** Disables this item only. */\n  disabled?: boolean\n  /** Visible text. */\n  label: string\n  /** Optional leading icon. */\n  prefix?: React.ReactNode\n  /** Optional trailing icon. */\n  suffix?: React.ReactNode\n  /**\n   * Unique identifier for this item — distinct from `label`, so relabeling\n   * doesn't change the selected identity.\n   */\n  value: string\n}\n\nexport type SegmentElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  | keyof SegmentProps\n  | \"aria-checked\"\n  | \"children\"\n  | \"onClick\"\n  | \"onKeyDown\"\n  | \"role\"\n  | \"tabIndex\"\n  | \"type\"\n> &\n  SegmentProps\n\n/**\n * A single item within a `SegmentedControl`. Must be rendered as a direct\n * child of `SegmentedControl` — it reads selection state, group `disabled`,\n * and roving tabindex from that context.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}\n */\nexport const Segment = forwardRef<HTMLButtonElement, SegmentElementProps>(\n  function Segment(\n    { label, prefix, suffix, ...restProps }: SegmentElementProps,\n    ref\n  ) {\n    return (\n      <SegmentBase\n        {...restProps}\n        content={\n          <>\n            {wrapStringWithSpan(prefix)}\n            {label}\n            {wrapStringWithSpan(suffix)}\n          </>\n        }\n        ref={ref}\n      />\n    )\n  }\n)\n\nSegment.displayName = \"Segment\"\n"],"names":["React"],"mappings":";;;;AAoCA;;;;;;;AAOG;MACU,OAAO,GAAG,UAAU,CAC/B,SAAS,OAAO,CACd,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAuB,EAC5D,GAAG,EAAA;AAEH,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,OACN,SAAS,EACb,OAAO,EACLA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;YACG,kBAAkB,CAAC,MAAM,CAAC;YAC1B,KAAK;YACL,kBAAkB,CAAC,MAAM,CAAC,CAC1B,EAEL,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/dist/components/segmented-control/SegmentBase.d.ts

@@ -0,0 +1,22 @@
+import React, { type ButtonHTMLAttributes } from "react";
+export type SegmentKind = "interaction-subtle";
+export interface SegmentBaseProps {
+    content: React.ReactNode;
+    disabled?: boolean;
+    iconOnly?: boolean;
+    /**
+     * Not yet exposed on `Segment`/`IconSegment` —
+     * V1 only has one value ("interaction-subtle").
+     */
+    kind?: SegmentKind;
+    value: string;
+}
+export type SegmentBaseElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof SegmentBaseProps | "aria-checked" | "children" | "onClick" | "onKeyDown" | "role" | "tabIndex" | "type"> & SegmentBaseProps;
+/**
+ * Shared `role="radio"` button implementation for `Segment` and
+ * `IconSegment` — selection state, roving tabindex, arrow-key navigation,
+ * and disabled propagation all live here so the two public components only
+ * differ in what they render inside the button.
+ */
+export declare const SegmentBase: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | "type" | keyof SegmentBaseProps> & SegmentBaseProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SegmentBase.d.ts.map

package/dist/components/segmented-control/SegmentBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentBase.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAA0B,MAAM,OAAO,CAAA;AAIhF,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAA;AAW9C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,gBAAgB,GACtB,cAAc,GACd,UAAU,GACV,SAAS,GACT,WAAW,GACX,MAAM,GACN,UAAU,GACV,MAAM,CACT,GACC,gBAAgB,CAAA;AAElB;;;;;GAKG;AACH,eAAO,MAAM,WAAW,iQAuFtB,CAAA"}

package/dist/components/segmented-control/SegmentBase.js

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import React__default, { forwardRef, useContext } from 'react';
+import { SegmentedControlContext } from './SegmentedControlContext.js';
+
+const ARROW_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+];
+/**
+ * Shared `role="radio"` button implementation for `Segment` and
+ * `IconSegment` — selection state, roving tabindex, arrow-key navigation,
+ * and disabled propagation all live here so the two public components only
+ * differ in what they render inside the button.
+ */
+const SegmentBase = forwardRef(function SegmentBase({ className, content, disabled = false, iconOnly = false, kind = "interaction-subtle", value, ...restProps }, ref) {
+    const context = useContext(SegmentedControlContext);
+    const isDisabled = disabled || (context?.disabled ?? false);
+    const isChecked = context?.value === value;
+    const combinedClassName = classNames("tds-segmented-control-segment", iconOnly && "tds-segmented-control-segment--icon-only", `tds-segmented-control-segment--${kind}`, className);
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        context?.onSelect(value);
+    };
+    const handleKeyDown = (event) => {
+        if (!ARROW_KEYS.includes(event.key))
+            return;
+        const track = event.currentTarget.closest('[role="radiogroup"]');
+        if (!track)
+            return;
+        const segments = Array.from(track.querySelectorAll('[role="radio"]:not(:disabled)'));
+        const currentIndex = segments.indexOf(event.currentTarget);
+        if (currentIndex === -1)
+            return;
+        let nextIndex = currentIndex;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowUp":
+                nextIndex = currentIndex === 0 ? segments.length - 1 : currentIndex - 1;
+                break;
+            case "ArrowRight":
+            case "ArrowDown":
+                nextIndex = currentIndex === segments.length - 1 ? 0 : currentIndex + 1;
+                break;
+            case "Home":
+                nextIndex = 0;
+                break;
+            case "End":
+                nextIndex = segments.length - 1;
+                break;
+        }
+        const nextSegment = segments[nextIndex];
+        if (!nextSegment || nextSegment === event.currentTarget)
+            return;
+        event.preventDefault();
+        nextSegment.focus();
+        const nextValue = nextSegment.dataset.segmentValue;
+        if (nextValue)
+            context?.onSelect(nextValue);
+    };
+    return (React__default.createElement("button", { ...restProps, "aria-checked": isChecked ? "true" : "false", className: combinedClassName, "data-segment-value": value, disabled: isDisabled, onClick: handleClick, onKeyDown: handleKeyDown, ref: ref, role: "radio", tabIndex: value === context?.tabbableValue ? 0 : -1, type: "button" }, content));
+});
+SegmentBase.displayName = "SegmentBase";
+
+export { SegmentBase };
+//# sourceMappingURL=SegmentBase.js.map

package/dist/components/segmented-control/SegmentBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentBase.js","sources":["../../../src/components/segmented-control/SegmentBase.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { type ButtonHTMLAttributes, forwardRef, useContext } from \"react\"\n\nimport { SegmentedControlContext } from \"./SegmentedControlContext\"\n\nexport type SegmentKind = \"interaction-subtle\"\n\nconst ARROW_KEYS = [\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n]\n\nexport interface SegmentBaseProps {\n  content: React.ReactNode\n  disabled?: boolean\n  iconOnly?: boolean\n  /**\n   * Not yet exposed on `Segment`/`IconSegment` —\n   * V1 only has one value (\"interaction-subtle\").\n   */\n  kind?: SegmentKind\n  value: string\n}\n\nexport type SegmentBaseElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  | keyof SegmentBaseProps\n  | \"aria-checked\"\n  | \"children\"\n  | \"onClick\"\n  | \"onKeyDown\"\n  | \"role\"\n  | \"tabIndex\"\n  | \"type\"\n> &\n  SegmentBaseProps\n\n/**\n * Shared `role=\"radio\"` button implementation for `Segment` and\n * `IconSegment` — selection state, roving tabindex, arrow-key navigation,\n * and disabled propagation all live here so the two public components only\n * differ in what they render inside the button.\n */\nexport const SegmentBase = forwardRef<\n  HTMLButtonElement,\n  SegmentBaseElementProps\n>(function SegmentBase(\n  {\n    className,\n    content,\n    disabled = false,\n    iconOnly = false,\n    kind = \"interaction-subtle\",\n    value,\n    ...restProps\n  }: SegmentBaseElementProps,\n  ref\n) {\n  const context = useContext(SegmentedControlContext)\n  const isDisabled = disabled || (context?.disabled ?? false)\n  const isChecked = context?.value === value\n\n  const combinedClassName = classNames(\n    \"tds-segmented-control-segment\",\n    iconOnly && \"tds-segmented-control-segment--icon-only\",\n    `tds-segmented-control-segment--${kind}`,\n    className\n  )\n\n  const handleClick = () => {\n    if (isDisabled) return\n    context?.onSelect(value)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (!ARROW_KEYS.includes(event.key)) return\n\n    const track = event.currentTarget.closest('[role=\"radiogroup\"]')\n    if (!track) return\n\n    const segments = Array.from(\n      track.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    )\n    const currentIndex = segments.indexOf(event.currentTarget)\n    if (currentIndex === -1) return\n\n    let nextIndex = currentIndex\n    switch (event.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        nextIndex = currentIndex === 0 ? segments.length - 1 : currentIndex - 1\n        break\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        nextIndex = currentIndex === segments.length - 1 ? 0 : currentIndex + 1\n        break\n      case \"Home\":\n        nextIndex = 0\n        break\n      case \"End\":\n        nextIndex = segments.length - 1\n        break\n    }\n\n    const nextSegment = segments[nextIndex]\n    if (!nextSegment || nextSegment === event.currentTarget) return\n\n    event.preventDefault()\n    nextSegment.focus()\n    const nextValue = nextSegment.dataset.segmentValue\n    if (nextValue) context?.onSelect(nextValue)\n  }\n\n  return (\n    <button\n      {...restProps}\n      aria-checked={isChecked ? \"true\" : \"false\"}\n      className={combinedClassName}\n      data-segment-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n      role=\"radio\"\n      tabIndex={value === context?.tabbableValue ? 0 : -1}\n      type=\"button\"\n    >\n      {content}\n    </button>\n  )\n})\n\nSegmentBase.displayName = \"SegmentBase\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,64 @@
+import "./index.css";
+import React, { type HTMLAttributes } from "react";
+export type SegmentedControlSize = "md" | "sm";
+interface SegmentedControlSharedProps {
+    /** `Segment`/`IconSegment` elements. */
+    children: React.ReactNode;
+    /** Disables the whole group. */
+    disabled?: boolean;
+    /**
+     * If `true`, the group spans 100% of its container and items split the
+     * width evenly. Intended for a primary mode switch at the top of a
+     * section/modal/pane — not for a control nested deep in a form.
+     */
+    fullWidth?: boolean;
+    /**
+     * If `true`, renders `label` visually hidden instead of a visible
+     * element.
+     */
+    hideLabel?: boolean;
+    /**
+     * Accessible label for the group. Rendered as a visible element by
+     * default.
+     */
+    label: string;
+    /** Called with the newly selected item's `value`. */
+    onChange?: (value: string) => void;
+    /** Default `'md'`. */
+    size?: SegmentedControlSize;
+}
+interface SegmentedControlControlledProps extends SegmentedControlSharedProps {
+    defaultValue?: never;
+    /** Controlled selected item's `value`. */
+    value: string;
+}
+interface SegmentedControlUncontrolledProps extends SegmentedControlSharedProps {
+    /**
+     * Uncontrolled initial selected item's `value` — a segmented control
+     * always reflects a current mode, so one item must start selected.
+     */
+    defaultValue: string;
+    value?: never;
+}
+export type SegmentedControlProps = SegmentedControlControlledProps | SegmentedControlUncontrolledProps;
+export type SegmentedControlElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof SegmentedControlProps | "children" | "role"> & SegmentedControlProps;
+/**
+ * A single-select group of items — Table/Card, Yes/No, Tag/Tag group —
+ * where exactly one `Segment`/`IconSegment` is selected at a time. Hand-rolls
+ * the W3C APG `radiogroup` pattern: `role="radiogroup"` container,
+ * `role="radio"` + `aria-checked` items, one roving tab stop, arrow keys move
+ * both focus and selection.
+ *
+ * Not a binary on/off choice (`ToggleSwitch` is the right component there),
+ * and not a form control — `SegmentedControl`'s state is read from and
+ * written to independently of any surrounding form.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ */
+export declare const SegmentedControl: {
+    ({ children, className, defaultValue, disabled, fullWidth, hideLabel, id, label, onChange, size, value, ...restProps }: SegmentedControlElementProps): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/segmented-control/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAA;AAI5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9C,UAAU,2BAA2B;IACnC,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAA;CAC5B;AAED,UAAU,+BAAgC,SAAQ,2BAA2B;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,iCACR,SAAQ,2BAA2B;IACnC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,qBAAqB,GAC7B,+BAA+B,GAC/B,iCAAiC,CAAA;AAErC,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,qBAAqB,GAAG,UAAU,GAAG,MAAM,CAClD,GACC,qBAAqB,CAAA;AAEvB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB;4HAa1B,4BAA4B;;CAqD9B,CAAA"}

package/dist/components/segmented-control/SegmentedControl.js

@@ -0,0 +1,52 @@
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React__default, { useState } from 'react';
+import { SegmentedControlContext } from './SegmentedControlContext.js';
+
+/**
+ * A single-select group of items — Table/Card, Yes/No, Tag/Tag group —
+ * where exactly one `Segment`/`IconSegment` is selected at a time. Hand-rolls
+ * the W3C APG `radiogroup` pattern: `role="radiogroup"` container,
+ * `role="radio"` + `aria-checked` items, one roving tab stop, arrow keys move
+ * both focus and selection.
+ *
+ * Not a binary on/off choice (`ToggleSwitch` is the right component there),
+ * and not a form control — `SegmentedControl`'s state is read from and
+ * written to independently of any surrounding form.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ */
+const SegmentedControl = ({ children, className, defaultValue, disabled = false, fullWidth = false, hideLabel = false, id, label, onChange, size = "md", value, ...restProps }) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : uncontrolledValue;
+    const onSelect = (nextValue) => {
+        if (nextValue === selectedValue)
+            return;
+        if (!isControlled)
+            setUncontrolledValue(nextValue);
+        onChange?.(nextValue);
+    };
+    const contextValue = {
+        disabled,
+        onSelect,
+        tabbableValue: selectedValue,
+        value: selectedValue,
+    };
+    const stableId = useId();
+    const componentId = id || `tds-segmented-control-${stableId}`;
+    const labelId = `${componentId}-label`;
+    const combinedClassName = classNames("tds-segmented-control", {
+        "tds-segmented-control--full-width": fullWidth,
+        "tds-segmented-control--sm": size === "sm",
+    }, className);
+    return (React__default.createElement("div", { ...restProps, className: combinedClassName, id: componentId },
+        React__default.createElement("div", { className: classNames("tds-segmented-control-label", hideLabel && "tds-segmented-control-label--hidden"), id: labelId }, label),
+        React__default.createElement("div", { "aria-labelledby": labelId, className: "tds-segmented-control-track", role: "radiogroup" },
+            React__default.createElement(SegmentedControlContext.Provider, { value: contextValue }, children))));
+};
+SegmentedControl.displayName = "SegmentedControl";
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/segmented-control/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useState } from \"react\"\n\nimport { SegmentedControlContext } from \"./SegmentedControlContext\"\n\nexport type SegmentedControlSize = \"md\" | \"sm\"\n\ninterface SegmentedControlSharedProps {\n  /** `Segment`/`IconSegment` elements. */\n  children: React.ReactNode\n  /** Disables the whole group. */\n  disabled?: boolean\n  /**\n   * If `true`, the group spans 100% of its container and items split the\n   * width evenly. Intended for a primary mode switch at the top of a\n   * section/modal/pane — not for a control nested deep in a form.\n   */\n  fullWidth?: boolean\n  /**\n   * If `true`, renders `label` visually hidden instead of a visible\n   * element.\n   */\n  hideLabel?: boolean\n  /**\n   * Accessible label for the group. Rendered as a visible element by\n   * default.\n   */\n  label: string\n  /** Called with the newly selected item's `value`. */\n  onChange?: (value: string) => void\n  /** Default `'md'`. */\n  size?: SegmentedControlSize\n}\n\ninterface SegmentedControlControlledProps extends SegmentedControlSharedProps {\n  defaultValue?: never\n  /** Controlled selected item's `value`. */\n  value: string\n}\n\ninterface SegmentedControlUncontrolledProps\n  extends SegmentedControlSharedProps {\n  /**\n   * Uncontrolled initial selected item's `value` — a segmented control\n   * always reflects a current mode, so one item must start selected.\n   */\n  defaultValue: string\n  value?: never\n}\n\nexport type SegmentedControlProps =\n  | SegmentedControlControlledProps\n  | SegmentedControlUncontrolledProps\n\nexport type SegmentedControlElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof SegmentedControlProps | \"children\" | \"role\"\n> &\n  SegmentedControlProps\n\n/**\n * A single-select group of items — Table/Card, Yes/No, Tag/Tag group —\n * where exactly one `Segment`/`IconSegment` is selected at a time. Hand-rolls\n * the W3C APG `radiogroup` pattern: `role=\"radiogroup\"` container,\n * `role=\"radio\"` + `aria-checked` items, one roving tab stop, arrow keys move\n * both focus and selection.\n *\n * Not a binary on/off choice (`ToggleSwitch` is the right component there),\n * and not a form control — `SegmentedControl`'s state is read from and\n * written to independently of any surrounding form.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}\n */\nexport const SegmentedControl = ({\n  children,\n  className,\n  defaultValue,\n  disabled = false,\n  fullWidth = false,\n  hideLabel = false,\n  id,\n  label,\n  onChange,\n  size = \"md\",\n  value,\n  ...restProps\n}: SegmentedControlElementProps) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue)\n  const isControlled = value !== undefined\n  const selectedValue = isControlled ? value : uncontrolledValue\n\n  const onSelect = (nextValue: string) => {\n    if (nextValue === selectedValue) return\n    if (!isControlled) setUncontrolledValue(nextValue)\n    onChange?.(nextValue)\n  }\n\n  const contextValue = {\n    disabled,\n    onSelect,\n    tabbableValue: selectedValue,\n    value: selectedValue,\n  }\n\n  const stableId = useId()\n  const componentId = id || `tds-segmented-control-${stableId}`\n  const labelId = `${componentId}-label`\n\n  const combinedClassName = classNames(\n    \"tds-segmented-control\",\n    {\n      \"tds-segmented-control--full-width\": fullWidth,\n      \"tds-segmented-control--sm\": size === \"sm\",\n    },\n    className\n  )\n\n  return (\n    <div {...restProps} className={combinedClassName} id={componentId}>\n      <div\n        className={classNames(\n          \"tds-segmented-control-label\",\n          hideLabel && \"tds-segmented-control-label--hidden\"\n        )}\n        id={labelId}\n      >\n        {label}\n      </div>\n      <div\n        aria-labelledby={labelId}\n        className=\"tds-segmented-control-track\"\n        role=\"radiogroup\"\n      >\n        <SegmentedControlContext.Provider value={contextValue}>\n          {children}\n        </SegmentedControlContext.Provider>\n      </div>\n    </div>\n  )\n}\n\nSegmentedControl.displayName = \"SegmentedControl\"\n"],"names":["React"],"mappings":";;;;;AA+DA;;;;;;;;;;;;;AAaG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACiB,KAAI;IACjC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC;AACxE,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS;IACxC,MAAM,aAAa,GAAG,YAAY,GAAG,KAAK,GAAG,iBAAiB;AAE9D,IAAA,MAAM,QAAQ,GAAG,CAAC,SAAiB,KAAI;QACrC,IAAI,SAAS,KAAK,aAAa;YAAE;AACjC,QAAA,IAAI,CAAC,YAAY;YAAE,oBAAoB,CAAC,SAAS,CAAC;AAClD,QAAA,QAAQ,GAAG,SAAS,CAAC;AACvB,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG;QACnB,QAAQ;QACR,QAAQ;AACR,QAAA,aAAa,EAAE,aAAa;AAC5B,QAAA,KAAK,EAAE,aAAa;KACrB;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,WAAW,GAAG,EAAE,IAAI,CAAA,sBAAA,EAAyB,QAAQ,EAAE;AAC7D,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,WAAW,QAAQ;AAEtC,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,uBAAuB,EACvB;AACE,QAAA,mCAAmC,EAAE,SAAS;QAC9C,2BAA2B,EAAE,IAAI,KAAK,IAAI;KAC3C,EACD,SAAS,CACV;IAED,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAE,WAAW,EAAA;AAC/D,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,6BAA6B,EAC7B,SAAS,IAAI,qCAAqC,CACnD,EACD,EAAE,EAAE,OAAO,EAAA,EAEV,KAAK,CACF;QACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,iBAAA,EACmB,OAAO,EACxB,SAAS,EAAC,6BAA6B,EACvC,IAAI,EAAC,YAAY,EAAA;AAEjB,YAAAA,cAAA,CAAA,aAAA,CAAC,uBAAuB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,EAClD,QAAQ,CACwB,CAC/B,CACF;AAEV;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/components/segmented-control/SegmentedControlContext.d.ts

@@ -0,0 +1,8 @@
+export interface SegmentedControlContextValue {
+    disabled: boolean;
+    onSelect: (value: string) => void;
+    tabbableValue: string | undefined;
+    value: string | undefined;
+}
+export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
+//# sourceMappingURL=SegmentedControlContext.d.ts.map

package/dist/components/segmented-control/SegmentedControlContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAA"}

package/dist/components/segmented-control/SegmentedControlContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const SegmentedControlContext = createContext(null);
+
+export { SegmentedControlContext };
+//# sourceMappingURL=SegmentedControlContext.js.map

package/dist/components/segmented-control/SegmentedControlContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.js","sources":["../../../src/components/segmented-control/SegmentedControlContext.tsx"],"sourcesContent":["import { createContext } from \"react\"\n\nexport interface SegmentedControlContextValue {\n  disabled: boolean\n  onSelect: (value: string) => void\n  tabbableValue: string | undefined\n  value: string | undefined\n}\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null)\n"],"names":[],"mappings":";;MASa,uBAAuB,GAClC,aAAa,CAAsC,IAAI;;;;"}

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,8 @@
+import "./index.css";
+export type { IconSegmentElementProps, IconSegmentProps } from "./IconSegment";
+export { IconSegment } from "./IconSegment";
+export type { SegmentElementProps, SegmentProps } from "./Segment";
+export { Segment } from "./Segment";
+export type { SegmentedControlElementProps, SegmentedControlProps, SegmentedControlSize, } from "./SegmentedControl";
+export { SegmentedControl } from "./SegmentedControl";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/segmented-control/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EACV,4BAA4B,EAC5B,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}