@planningcenter/tapestry 4.12.0-rc.0 → 4.12.0

package/dist/components/pane/PaneHeaderActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneHeaderActions.js","sources":["../../../src/components/pane/PaneHeaderActions.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneHeaderActionsProps {\n  /**\n   * The actions themselves — buttons that affect the whole pane (e.g. Save /\n   * Cancel). Laid out in a row; pass any `Flex` prop to adjust the layout.\n   */\n  children: React.ReactNode\n}\n\nexport type PaneHeaderActionsElementProps = FlexProps & PaneHeaderActionsProps\n\n/**\n * The trailing action cluster of a `PaneHeader`. Wraps its children in a\n * `Flex` row and accepts every `Flex` prop, so the caller controls spacing and\n * alignment without reaching for a wrapper element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneHeaderActions({\n  children,\n  className,\n  ...restProps\n}: PaneHeaderActionsElementProps) {\n  const combinedClassName = classNames(\"tds-pane-header-actions\", className)\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"row\"\n      gap={1}\n      {...restProps}\n      className={combinedClassName}\n    >\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeaderActions.displayName = \"PaneHeaderActions\"\n"],"names":["React"],"mappings":";;;;AAgBA;;;;;;;AAOG;AACG,SAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACkB,EAAA;IAC9B,MAAM,iBAAiB,GAAG,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC;IAE1E,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EAAA,GACF,SAAS,EACb,SAAS,EAAE,iBAAiB,EAAA,EAE3B,QAAQ,CACJ;AAEX;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"PaneHeaderActions.js","sources":["../../../src/components/pane/PaneHeaderActions.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneHeaderActionsProps {\n  /**\n   * The actions themselves — buttons that affect the whole pane (e.g. Save /\n   * Cancel). Laid out in a row; pass any `Flex` prop to adjust the layout.\n   */\n  children: React.ReactNode\n}\n\nexport type PaneHeaderActionsElementProps = FlexProps & PaneHeaderActionsProps\n\n/**\n * The trailing action cluster of a `PaneHeader`. Wraps its children in a\n * `Flex` row and accepts every `Flex` prop, so the caller controls spacing and\n * alignment without reaching for a wrapper element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function PaneHeaderActions({\n  children,\n  className,\n  ...restProps\n}: PaneHeaderActionsElementProps) {\n  const combinedClassName = classNames(\"tds-pane-header-actions\", className)\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"row\"\n      gap={1}\n      {...restProps}\n      className={combinedClassName}\n    >\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeaderActions.displayName = \"PaneHeaderActions\"\n"],"names":["React"],"mappings":";;;;AAgBA;;;;;;;AAOG;AACG,SAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACkB,EAAA;IAC9B,MAAM,iBAAiB,GAAG,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC;IAE1E,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EAAA,GACF,SAAS,EACb,SAAS,EAAE,iBAAiB,EAAA,EAE3B,QAAQ,CACJ;AAEX;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/components/sidenav/defineElements.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-B2xqMgNQ.js';
+import '../../packages/tapestry-wc/dist/components/p-CBFtMIxJ.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/components/time-field/TimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,IAAI,EACT,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IACtC,gGAAgG;IAChG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAyDvB"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,IAAI,EACT,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAGhF,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IACtC,gGAAgG;IAChG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBA6DvB"}

package/dist/components/time-field/TimeField.js

@@ -1,7 +1,9 @@
 import { parseTime as $58246871e4652552$export$c9698ec7f05a07e1 } from './../../ext/@internationalized/date/dist/private/string.js';
 import Icon from '../../utilities/Icon.js';
+import { useDateFieldLocale } from '../../utilities/useDateFieldLocale.js';
 import classNames from 'classnames';
 import React from 'react';
+import { I18nProvider } from 'react-aria/I18nProvider';
 import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text } from 'react-aria-components/TimeField';
 
 /**
@@ -22,11 +24,13 @@ function TimeField({ className, defaultValue, description, disabled, forceLeadin
         "tds-field--lg": size === "lg",
         "tds-time-field--lg": size === "lg",
     }, className);
+    const dateFieldLocale = useDateFieldLocale();
     return (React.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: asTimeFieldValue(defaultValue), granularity: "minute", isDisabled: disabled, isReadOnly: readOnly, isRequired: required, maxValue: asTimeFieldValue(max), minValue: asTimeFieldValue(min), shouldForceLeadingZeros: forceLeadingZeros },
         !hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
-        React.createElement(DateInput, { "aria-invalid": invalid || undefined, className: "tds-field-control tds-time-field-input" }, (segment) => (React.createElement(DateSegment, { "aria-invalid": invalid || undefined, className: segment.type === "literal"
-                ? "tds-field-date-segment-separator"
-                : "tds-field-date-segment", segment: segment }))),
+        React.createElement(I18nProvider, { locale: dateFieldLocale },
+            React.createElement(DateInput, { "aria-invalid": invalid || undefined, className: "tds-field-control tds-time-field-input" }, (segment) => (React.createElement(DateSegment, { "aria-invalid": invalid || undefined, className: segment.type === "literal"
+                    ? "tds-field-date-segment-separator"
+                    : "tds-field-date-segment", segment: segment })))),
         description && (React.createElement(Text, { elementType: "p", className: "tds-field-description", slot: "description" },
             React.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));

package/dist/components/time-field/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n  type CalendarDateTime,\n  parseTime,\n  type Time,\n  type ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  DateInput,\n  DateSegment,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n  type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n  /** The default value for the field, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"12:00\"`). */\n  defaultValue?: TimeFieldValue | string\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: React.ReactNode\n  /** Disables the field. */\n  disabled?: boolean\n  /** If `true`, always shows leading zeros in the hour field. */\n  forceLeadingZeros?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** The maximum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"17:00\"`). */\n  max?: TimeFieldValue | string\n  /** The minimum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"09:00\"`). */\n  min?: TimeFieldValue | string\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the time field. */\n  size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n  | \"children\"\n  | \"granularity\"\n  | \"placeholderValue\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"name\"\n  | \"onChange\"\n  | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n  AriaTimeFieldProps<TimeFieldValue>,\n  TimeFieldProps,\n  AriaTimeFieldPropsToOmit,\n  AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  forceLeadingZeros,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: TimeFieldElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-time-field\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-time-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  return (\n    <AriaTimeField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={asTimeFieldValue(defaultValue)}\n      granularity=\"minute\"\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={asTimeFieldValue(max)}\n      minValue={asTimeFieldValue(min)}\n      shouldForceLeadingZeros={forceLeadingZeros}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <DateInput\n        aria-invalid={invalid || undefined}\n        className=\"tds-field-control tds-time-field-input\"\n      >\n        {(segment) => (\n          <DateSegment\n            aria-invalid={invalid || undefined}\n            className={\n              segment.type === \"literal\"\n                ? \"tds-field-date-segment-separator\"\n                : \"tds-field-date-segment\"\n            }\n            segment={segment}\n          />\n        )}\n      </DateInput>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaTimeField>\n  )\n}\n\nfunction asTimeFieldValue(\n  value: TimeFieldValue | string | undefined\n): TimeFieldValue | undefined {\n  if (typeof value === \"string\") {\n    return parseTime(value)\n  }\n  return value ?? undefined\n}\n"],"names":["AriaTimeField","parseTime"],"mappings":";;;;;;AA0EA;;;;;;;;;;;;AAYG;AACG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,SAAS,CACV;IAED,QACE,KAAA,CAAA,aAAA,CAACA,WAAa,EAAA,EAAA,GACR,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,gBAAgB,CAAC,YAAY,CAAC,EAC5C,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACM,OAAO,IAAI,SAAS,EAClC,SAAS,EAAC,wCAAwC,EAAA,EAEjD,CAAC,OAAO,MACP,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,cAAA,EACI,OAAO,IAAI,SAAS,EAClC,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;AAEA,SAAS,gBAAgB,CACvB,KAA0C,EAAA;AAE1C,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAOC,yCAAS,CAAC,KAAK,CAAC;IACzB;IACA,OAAO,KAAK,IAAI,SAAS;AAC3B;;;;"}
+{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n  type CalendarDateTime,\n  parseTime,\n  type Time,\n  type ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport { useDateFieldLocale } from \"@utilities/useDateFieldLocale\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport { I18nProvider } from \"react-aria/I18nProvider\"\nimport {\n  DateInput,\n  DateSegment,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n  type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n  /** The default value for the field, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"12:00\"`). */\n  defaultValue?: TimeFieldValue | string\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: React.ReactNode\n  /** Disables the field. */\n  disabled?: boolean\n  /** If `true`, always shows leading zeros in the hour field. */\n  forceLeadingZeros?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** The maximum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"17:00\"`). */\n  max?: TimeFieldValue | string\n  /** The minimum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"09:00\"`). */\n  min?: TimeFieldValue | string\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the time field. */\n  size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n  | \"children\"\n  | \"granularity\"\n  | \"placeholderValue\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"name\"\n  | \"onChange\"\n  | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n  AriaTimeFieldProps<TimeFieldValue>,\n  TimeFieldProps,\n  AriaTimeFieldPropsToOmit,\n  AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  forceLeadingZeros,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: TimeFieldElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-time-field\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-time-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const dateFieldLocale = useDateFieldLocale()\n\n  return (\n    <AriaTimeField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={asTimeFieldValue(defaultValue)}\n      granularity=\"minute\"\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={asTimeFieldValue(max)}\n      minValue={asTimeFieldValue(min)}\n      shouldForceLeadingZeros={forceLeadingZeros}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <I18nProvider locale={dateFieldLocale}>\n        <DateInput\n          aria-invalid={invalid || undefined}\n          className=\"tds-field-control tds-time-field-input\"\n        >\n          {(segment) => (\n            <DateSegment\n              aria-invalid={invalid || undefined}\n              className={\n                segment.type === \"literal\"\n                  ? \"tds-field-date-segment-separator\"\n                  : \"tds-field-date-segment\"\n              }\n              segment={segment}\n            />\n          )}\n        </DateInput>\n      </I18nProvider>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaTimeField>\n  )\n}\n\nfunction asTimeFieldValue(\n  value: TimeFieldValue | string | undefined\n): TimeFieldValue | undefined {\n  if (typeof value === \"string\") {\n    return parseTime(value)\n  }\n  return value ?? undefined\n}\n"],"names":["AriaTimeField","parseTime"],"mappings":";;;;;;;;AA4EA;;;;;;;;;;;;AAYG;AACG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,SAAS,CACV;AAED,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE;IAE5C,QACE,KAAA,CAAA,aAAA,CAACA,WAAa,EAAA,EAAA,GACR,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,gBAAgB,CAAC,YAAY,CAAC,EAC5C,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,eAAe,EAAA;AACnC,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACM,OAAO,IAAI,SAAS,EAClC,SAAS,EAAC,wCAAwC,EAAA,EAEjD,CAAC,OAAO,MACP,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,cAAA,EACI,OAAO,IAAI,SAAS,EAClC,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,sBAAE;sBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS,CACC;AACd,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;AAEA,SAAS,gBAAgB,CACvB,KAA0C,EAAA;AAE1C,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAOC,yCAAS,CAAC,KAAK,CAAC;IACzB;IACA,OAAO,KAAK,IAAI,SAAS;AAC3B;;;;"}

package/dist/index.css

@@ -3388,6 +3388,15 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-loading-spinner-visibility:visible;
   --tds-loading-spinner-animation-play-state:running;
 }
+
+.tds-combo-box-loading-label--hidden{
+  position:absolute;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  white-space:nowrap;
+  clip-path:inset(50%);
+}
 .tds-combo-box-list-section:not(:first-child){
     margin-block-start:var(--t-spacing-half);
   }
@@ -5272,6 +5281,139 @@ a.tds-dropdown-item:is(:hover, :active){
     margin-inline-end:var(--tds-number-stepper-button-offset);
   }
 
+.tds-pane{
+  --tds-pane-background-color:var(--t-surface-color-card);
+  --tds-pane-border-radius:var(--t-border-radius-lg);
+  --tds-pane-border-color:var(--t-border-color);
+
+  --tds-pane-header-padding-block:var(--t-spacing-1-half);
+  --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
+
+  --tds-pane-title-color:var(--t-text-color-headline);
+  --tds-pane-title-font-size:var(--t-font-size-lg);
+  --tds-pane-title-font-weight:var(--t-font-weight-medium);
+  --tds-pane-title-line-height:1.4;
+
+  --tds-pane-body-padding:var(--t-spacing-3);
+
+  --tds-pane-footer-padding-block:var(--t-spacing-2);
+  --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
+
+  --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
+  --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
+
+  background:var(--tds-pane-background-color);
+  border-radius:var(--tds-pane-border-radius);
+  border:var(--t-border-width) solid var(--tds-pane-border-color);
+  display:flex;
+  flex-direction:column;
+}
+
+.tds-pane-header{
+  border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
+  padding-block:var(--tds-pane-header-padding-block);
+  padding-inline:var(--tds-pane-header-padding-inline);
+}
+
+.tds-pane-header  > tds-helper-shelf > .tds-helper-shelf-trigger{
+    margin-inline:calc(-1 * var(--t-spacing-1)) auto;
+  }
+
+.tds-pane-header  > tds-helper-shelf > .tds-helper-shelf{
+    flex-basis:100%;
+    order:1;
+  }
+
+.tds-pane-header:has( > tds-helper-shelf){
+    row-gap:var(--tds-pane-header-padding-block);
+    padding-block-end:0;
+  }
+
+.tds-pane-header  > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
+    font-size:var(--t-font-size-md);
+    margin-block-end:var(--tds-pane-header-padding-block);
+  }
+
+.tds-pane-title{
+  color:var(--tds-pane-title-color);
+  font-size:var(--tds-pane-title-font-size);
+  font-weight:var(--tds-pane-title-font-weight);
+  line-height:var(--tds-pane-title-line-height);
+  margin:0;
+}
+
+.tds-pane-body{
+  padding:var(--tds-pane-body-padding);
+}
+
+.tds-pane-footer{
+  padding-block-end:var(--tds-pane-footer-padding-block);
+  padding-inline:var(--tds-pane-footer-padding-inline);
+}
+
+.tds-pane-divider{
+  border:0;
+  border-top:var(--t-border-width) solid var(--tds-pane-border-color);
+  margin-block:var(--tds-pane-divider-margin-block);
+  margin-inline:var(--tds-pane-divider-margin-inline);
+}
+
+.tds-pane-divider.tds-pane-divider--inset{
+    margin-inline:0;
+  }
+
+tds-helper-shelf{
+  display:contents;
+}
+
+.tds-helper-shelf{
+  --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
+  --tds-helper-shelf-border-radius:var(--t-border-radius-md);
+  --tds-helper-shelf-color:var(--t-text-color);
+  --tds-helper-shelf-font-size:var(--t-font-size-sm);
+  --tds-helper-shelf-line-height:1.5;
+  --tds-helper-shelf-padding:var(--t-spacing-1);
+
+  height:0;
+  overflow:hidden;
+  transition:height var(--t-duration-300) var(--t-ease-in);
+}
+
+@media (prefers-reduced-motion: reduce){
+
+.tds-helper-shelf{
+    transition:none;
+}
+  }
+
+.tds-helper-shelf--expanded{
+  height:auto;
+  transition-timing-function:var(--t-ease-out);
+}
+
+@supports (interpolate-size: allow-keywords){
+  .tds-helper-shelf{
+    interpolate-size:allow-keywords;
+  }
+}
+
+.tds-helper-shelf-content{
+  padding:var(--tds-helper-shelf-padding);
+  font-size:var(--tds-helper-shelf-font-size);
+  line-height:var(--tds-helper-shelf-line-height);
+  color:var(--tds-helper-shelf-color);
+  background:var(--tds-helper-shelf-background-color);
+  border-radius:var(--tds-helper-shelf-border-radius);
+}
+
+.tds-helper-shelf-trigger{
+  --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
+}
+
+.tds-helper-shelf-trigger[aria-expanded="true"]{
+    --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
+  }
+
 .tds-popover{
   max-inline-size:24rem;
   overflow:auto;