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

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"}