@planningcenter/tapestry 4.10.0-rc.9 → 4.10.0

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

@@ -1 +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"}
+{"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;AAEpE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAE7D,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;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,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

@@ -7,7 +7,7 @@ import { SegmentBase } from './SegmentBase.js';
  * 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}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-segmentedcontrol--docs | Storybook Documentation}
  */
 const IconSegment = forwardRef(function IconSegment({ icon, ...restProps }, ref) {
     return React__default.createElement(SegmentBase, { ...restProps, content: icon, iconOnly: true, ref: ref });

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

@@ -1 +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;;;;"}
+{"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, type SegmentKind } 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  /**\n   * This segment's color when selected. Default `'interaction-subtle'`.\n   */\n  kind?: SegmentKind\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/forms-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":";;;AAkCA;;;;;;;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

@@ -1,8 +1,13 @@
 import "./index.css";
 import React, { type ButtonHTMLAttributes } from "react";
+import { type SegmentKind } from "./SegmentBase";
 export interface SegmentProps {
     /** Disables this item only. */
     disabled?: boolean;
+    /**
+     * This segment's color when selected. Default `'interaction-subtle'`.
+     */
+    kind?: SegmentKind;
     /** Visible text. */
     label: string;
     /** Optional leading icon. */
@@ -22,7 +27,7 @@ export type SegmentElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>,
  * and roving tabindex from that context.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-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

@@ -1 +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"}
+{"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;AAEpE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAE7D,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,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

@@ -8,7 +8,7 @@ import { SegmentBase } from './SegmentBase.js';
  * and roving tabindex from that context.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-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,

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

@@ -1 +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;;;;"}
+{"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, type SegmentKind } from \"./SegmentBase\"\n\nexport interface SegmentProps {\n  /** Disables this item only. */\n  disabled?: boolean\n  /**\n   * This segment's color when selected. Default `'interaction-subtle'`.\n   */\n  kind?: SegmentKind\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/forms-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":";;;;AAwCA;;;;;;;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

@@ -1,13 +1,9 @@
 import React, { type ButtonHTMLAttributes } from "react";
-export type SegmentKind = "interaction-subtle";
+export type SegmentKind = "error" | "interaction-bold" | "interaction-subtle" | "neutral-subtle" | "success" | "warning";
 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;
 }

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

@@ -1 +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"}
+{"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,GACnB,OAAO,GACP,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,SAAS,GACT,SAAS,CAAA;AAWb,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,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.map

@@ -1 +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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"}
+{"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 =\n  | \"error\"\n  | \"interaction-bold\"\n  | \"interaction-subtle\"\n  | \"neutral-subtle\"\n  | \"success\"\n  | \"warning\"\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  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

@@ -44,17 +44,11 @@ export type SegmentedControlProps = SegmentedControlControlledProps | SegmentedC
 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.
+ * where exactly one `Segment`/`IconSegment` is selected at a time. Arrow keys
+ * move the selection, and the group is one tab stop.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-segmentedcontrol--docs | Storybook Documentation}
  */
 export declare const SegmentedControl: {
     ({ children, className, defaultValue, disabled, fullWidth, hideLabel, id, label, onChange, size, value, ...restProps }: SegmentedControlElementProps): React.JSX.Element;

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

@@ -1 +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"}
+{"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;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB;4HAa1B,4BAA4B;;CAqD9B,CAAA"}

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

@@ -5,17 +5,11 @@ 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.
+ * where exactly one `Segment`/`IconSegment` is selected at a time. Arrow keys
+ * move the selection, and the group is one tab stop.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-segmentedcontrol--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-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);

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

@@ -1 +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;;;;"}
+{"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. Arrow keys\n * move the selection, and the group is one tab stop.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-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;;;;;;;AAOG;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/index.d.ts

@@ -3,6 +3,7 @@ export type { IconSegmentElementProps, IconSegmentProps } from "./IconSegment";
 export { IconSegment } from "./IconSegment";
 export type { SegmentElementProps, SegmentProps } from "./Segment";
 export { Segment } from "./Segment";
+export type { SegmentKind } from "./SegmentBase";
 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

@@ -1 +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"}
+{"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,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,4BAA4B,EAC5B,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/index.css

@@ -5655,6 +5655,161 @@ a.tds-dropdown-item:is(:hover, :active){
   --tds-search-input-clear-button-visibility:visible;
 }
 
+.tds-segmented-control{
+  --tds-segmented-control-font-size:var(--t-font-size-md);
+  --tds-segmented-control-padding:var(--t-spacing-half);
+  --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
+  --tds-segmented-control-icon-size:.66666667lh;
+  --tds-segmented-control-border-radius:var(--t-border-radius-md);
+  --tds-segmented-control-max-width:280px;
+  --tds-segmented-control-min-height:var(--t-container-size-md);
+  --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
+  --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
+  --tds-segmented-control-width:fit-content;
+
+  display:flex;
+  flex-direction:column;
+  gap:var(--t-spacing-half);
+  align-items:flex-start;
+  width:var(--tds-segmented-control-width);
+}
+
+.tds-segmented-control--sm{
+  --tds-segmented-control-font-size:var(--t-font-size-sm);
+  --tds-segmented-control-padding-inline:7px;
+  --tds-segmented-control-min-height:var(--t-container-size-sm);
+}
+
+.tds-segmented-control--full-width{
+  --tds-segmented-control-width:100%;
+  --tds-segmented-control-max-width:none;
+}
+
+.tds-segmented-control--full-width .tds-segmented-control-segment{
+    flex:1 1 0;
+  }
+
+.tds-segmented-control-label{
+  font-size:var(--tds-segmented-control-font-size);
+  font-weight:var(--t-font-weight-normal);
+  color:var(--t-text-color-headline);
+}
+
+.tds-segmented-control-label--hidden{
+  position:absolute;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  white-space:nowrap;
+  clip-path:inset(50%);
+}
+
+.tds-segmented-control-track{
+  display:inline-flex;
+  gap:var(--tds-segmented-control-track-gap);
+  width:var(--tds-segmented-control-width);
+  padding:var(--tds-segmented-control-padding);
+  background-color:var(--t-form-background-color);
+  border:1px solid var(--t-border-color);
+  border-radius:var(--tds-segmented-control-border-radius);
+}
+
+.tds-segmented-control-segment{
+  --tds-segmented-control-color:var(--t-text-color-status-neutral);
+  --tds-segmented-control-background-color:transparent;
+
+  display:inline-flex;
+  gap:var(--t-spacing-1);
+  align-items:center;
+  justify-content:center;
+  max-width:var(--tds-segmented-control-max-width);
+  min-height:var(--tds-segmented-control-min-height);
+  padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
+  padding-inline:var(--tds-segmented-control-padding-inline);
+  font:inherit;
+  font-size:var(--tds-segmented-control-font-size);
+  color:var(--tds-segmented-control-color);
+  text-align:center;
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  background-color:var(--tds-segmented-control-background-color);
+  border:0;
+  border-radius:var(--t-border-radius-sm);
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-200);
+  transition-property:color, background-color;
+}
+
+.tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
+    padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
+  }
+
+.tds-segmented-control-segment .symbol{
+    display:block;
+    flex-shrink:0;
+    width:var(--tds-segmented-control-icon-size);
+    height:var(--tds-segmented-control-icon-size);
+  }
+
+.tds-segmented-control-segment:focus-visible{
+    outline:var(--t-focus-ring-outline);
+    outline-offset:var(--t-focus-ring-offset);
+  }
+
+.tds-segmented-control-segment:hover{
+    --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-ghost-hover);
+  }
+
+.tds-segmented-control-segment[aria-checked="true"]{
+    --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
+    --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
+
+    cursor:default;
+  }
+
+.tds-segmented-control-segment:disabled{
+    --tds-segmented-control-background-color:transparent;
+    --tds-segmented-control-color:var(--t-text-color-disabled);
+
+    pointer-events:none;
+  }
+
+.tds-segmented-control-segment[aria-checked="true"]:disabled{
+      --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
+    }
+
+.tds-segmented-control-segment--neutral-subtle{
+  --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
+  --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
+}
+
+.tds-segmented-control-segment--interaction-subtle{
+  --tds-segmented-control-color-checked:var(--t-text-color-interaction);
+  --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
+}
+
+.tds-segmented-control-segment--interaction-bold{
+  --tds-segmented-control-color-checked:var(--t-text-color-inverted);
+  --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
+}
+
+.tds-segmented-control-segment--success{
+  --tds-segmented-control-color-checked:var(--t-text-color-status-success);
+  --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
+}
+
+.tds-segmented-control-segment--warning{
+  --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
+  --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
+}
+
+.tds-segmented-control-segment--error{
+  --tds-segmented-control-color-checked:var(--t-text-color-status-error);
+  --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
+}
+
 .tds-select{
   --tds-select-border-color:var(--t-form-border-color);
   --tds-select-border-color-hover:var(--t-form-border-color-hover);