@planningcenter/tapestry 3.2.1-rc.4 → 3.2.1-rc.5

package/dist/components/NumberStepper/NumberStepper.d.ts

@@ -0,0 +1,44 @@
+import "../button/btn.css";
+import "./index.css";
+import React, { type AriaAttributes } from "react";
+export type NumberStepperSize = "md" | "lg";
+export interface NumberStepperProps {
+    /** The default uncontrolled value. */
+    defaultValue?: number;
+    /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
+    description?: string;
+    /** Disables the input and stepper buttons. */
+    disabled?: boolean;
+    /** Formatting options for the displayed value. Uses `Intl.NumberFormat`. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** If `true`, renders the label visually hidden. */
+    hideLabel?: boolean;
+    /** If `true`, applies error styling to the field and description. */
+    invalid?: boolean;
+    /** Accessible label for the field. */
+    label: string;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Field name for form submission. */
+    name?: string;
+    /** Called when the value changes. */
+    onChange?: (value: number) => void;
+    /** Allows the value to be read but not changed. */
+    readOnly?: boolean;
+    /** If `true`, appends an asterisk after the label text. */
+    required?: boolean;
+    /** The size of the number stepper. */
+    size?: NumberStepperSize;
+    /** Amount to increment or decrement by. Defaults to `1`. */
+    step?: number;
+    /** The controlled value. */
+    value?: number;
+}
+export type NumberStepperElementProps = NumberStepperProps & Omit<AriaAttributes, keyof NumberStepperProps> & {
+    className?: string;
+    id?: string;
+};
+export declare function NumberStepper({ className, defaultValue, description, disabled, formatOptions, hideLabel, id, invalid, label, max, min, name, onChange, readOnly, required, size, step, value, ...restProps }: NumberStepperElementProps): React.JSX.Element;
+//# sourceMappingURL=NumberStepper.d.ts.map

package/dist/components/NumberStepper/NumberStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAUlD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IACxC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,yBAAyB,GAAG,kBAAkB,GACxD,IAAI,CAAC,cAAc,EAAE,MAAM,kBAAkB,CAAC,GAAG;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAEH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EACb,EAAE,yBAAyB,qBAwD3B"}

package/dist/components/NumberStepper/NumberStepper.js

@@ -0,0 +1,22 @@
+import Icon from '../../utilities/Icon.js';
+import classNames from 'classnames';
+import React__default from 'react';
+import { NumberField, Label, Group, Input, Button, Text } from 'react-aria-components';
+
+function NumberStepper({ className, defaultValue, description, disabled, formatOptions, hideLabel, id, invalid, label, max, min, name, onChange, readOnly, required, size = "md", step, value, ...restProps }) {
+    const combinedClassName = classNames("tds-number-stepper", { "tds-number-stepper--lg": size === "lg" }, className);
+    return (React__default.createElement(NumberField, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: defaultValue, formatOptions: formatOptions, id: id, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max, minValue: min, name: name, onChange: onChange ?? undefined, step: step, value: value },
+        !hideLabel && (React__default.createElement(Label, { className: "tds-number-stepper-label" }, label)),
+        React__default.createElement(Group, { className: "tds-number-stepper-field" },
+            React__default.createElement(Input, { className: "tds-number-stepper-input" }),
+            React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "decrement" },
+                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#minus" })),
+            React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "increment" },
+                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#plus" }))),
+        description && (React__default.createElement(Text, { className: "tds-number-stepper-description", slot: "description" },
+            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-number-stepper-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            description))));
+}
+
+export { NumberStepper };
+//# sourceMappingURL=NumberStepper.js.map

package/dist/components/NumberStepper/NumberStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/NumberStepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type AriaAttributes } from \"react\"\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField as AriaNumberField,\n  Text,\n} from \"react-aria-components\"\n\nexport type NumberStepperSize = \"md\" | \"lg\"\n\nexport interface NumberStepperProps {\n  /** The default uncontrolled value. */\n  defaultValue?: number\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and stepper buttons. */\n  disabled?: boolean\n  /** Formatting options for the displayed value. Uses `Intl.NumberFormat`. */\n  formatOptions?: Intl.NumberFormatOptions\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  /** Maximum allowed value. */\n  max?: number\n  /** Minimum allowed value. */\n  min?: number\n  /** Field name for form submission. */\n  name?: string\n  /** Called when the value changes. */\n  onChange?: (value: number) => void\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 number stepper. */\n  size?: NumberStepperSize\n  /** Amount to increment or decrement by. Defaults to `1`. */\n  step?: number\n  /** The controlled value. */\n  value?: number\n}\n\nexport type NumberStepperElementProps = NumberStepperProps &\n  Omit<AriaAttributes, keyof NumberStepperProps> & {\n    className?: string\n    id?: string\n  }\n\nexport function NumberStepper({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  formatOptions,\n  hideLabel,\n  id,\n  invalid,\n  label,\n  max,\n  min,\n  name,\n  onChange,\n  readOnly,\n  required,\n  size = \"md\",\n  step,\n  value,\n  ...restProps\n}: NumberStepperElementProps) {\n  const combinedClassName = classNames(\n    \"tds-number-stepper\",\n    { \"tds-number-stepper--lg\": size === \"lg\" },\n    className\n  )\n\n  return (\n    <AriaNumberField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={defaultValue}\n      formatOptions={formatOptions}\n      id={id}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max}\n      minValue={min}\n      name={name}\n      onChange={onChange ?? undefined}\n      step={step}\n      value={value}\n    >\n      {!hideLabel && (\n        <Label className=\"tds-number-stepper-label\">{label}</Label>\n      )}\n      <Group className=\"tds-number-stepper-field\">\n        <Input className=\"tds-number-stepper-input\" />\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"decrement\"\n        >\n          <Icon aria-hidden symbol=\"general#minus\" />\n        </Button>\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"increment\"\n        >\n          <Icon aria-hidden symbol=\"general#plus\" />\n        </Button>\n      </Group>\n      {description && (\n        <Text className=\"tds-number-stepper-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-number-stepper-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaNumberField>\n  )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AA0DM,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,oBAAoB,EACpB,EAAE,wBAAwB,EAAE,IAAI,KAAK,IAAI,EAAE,EAC3C,SAAS,CACV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EAAA;AAEX,QAAA,CAAC,SAAS,KACTD,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAS,CAC5D;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA;AACzC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,EAAA;YACjEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,6CAA6C,EACvD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}

package/dist/components/NumberStepper/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { NumberStepperElementProps, NumberStepperProps, NumberStepperSize, } from "./NumberStepper";
+export { NumberStepper } from "./NumberStepper";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NumberStepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberStepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.css

@@ -1991,6 +1991,56 @@ a[class="tds-btn"]{
   border-radius:var(--t-border-radius-round);
 }
 
+.tds-btn--infield{
+  --tds-btn-color:var(--t-text-color-status-neutral);
+  --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
+  --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
+  --tds-btn-color-hover:var(--t-text-color-status-neutral);
+  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
+  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
+  --tds-btn-color-active:var(--t-text-color-status-neutral);
+  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
+  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
+  --tds-btn-color-disabled:var(--t-text-color-disabled);
+  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-padding-x:0;
+  --tds-btn-padding-y:0;
+  --tds-btn-font-size:.66lh;
+  --tds-btn-min-height:auto;
+  --tds-btn-border-width:var(--t-border-width);
+
+  aspect-ratio:1;
+  cursor:pointer;
+}
+
+.tds-btn--infield[data-hovered]:not([data-disabled]){
+    color:var(--tds-btn-color-hover);
+    background-color:var(--tds-btn-bg-hover);
+    border-color:var(--tds-btn-border-color-hover);
+  }
+
+.tds-btn--infield[data-focus-visible]{
+    color:var(--tds-btn-color-hover);
+    outline:var(--t-focus-ring-outline);
+    outline-offset:var(--t-focus-ring-offset);
+    background-color:var(--tds-btn-bg-hover);
+    border-color:var(--tds-btn-border-color-hover);
+  }
+
+.tds-btn--infield[data-pressed]:not([data-disabled]){
+    color:var(--tds-btn-color-active);
+    background-color:var(--tds-btn-bg-active);
+    border-color:var(--tds-btn-border-color-active);
+  }
+
+.tds-btn--infield[data-disabled]{
+    color:var(--tds-btn-color-disabled);
+    pointer-events:none;
+    background-color:var(--tds-btn-bg-disabled);
+    border-color:var(--tds-btn-border-color-disabled);
+  }
+
 .tds-loading-spinner{
   --tds-loading-spinner-size:1.25em;