@planningcenter/tapestry 4.2.0-rc.10 → 4.2.0-rc.11

package/dist/components/button/ToggleButton.d.ts

@@ -0,0 +1,52 @@
+import "./btn.css";
+import React from "react";
+import { BaseButtonElementProps } from "./BaseButton";
+type ToggleButtonControlledProps = {
+    /** Not available when `pressed` is provided. */
+    defaultPressed?: never;
+    /** Whether the button is pressed. Maps to `aria-pressed`. */
+    pressed: boolean;
+};
+type ToggleButtonUncontrolledProps = {
+    /** Initial pressed state. Defaults to `false` if omitted. */
+    defaultPressed?: boolean;
+    /** Omit to let the button manage its own pressed state. */
+    pressed?: never;
+};
+export type ToggleButtonProps = (ToggleButtonControlledProps | ToggleButtonUncontrolledProps) & {
+    /** Called with the next pressed state after each click. */
+    onChange?: (pressed: boolean) => void;
+};
+export declare function toggleButtonProps({ pressed }: {
+    pressed: boolean;
+}): {
+    "aria-pressed": boolean;
+};
+/**
+ * Resolves `pressed`/`defaultPressed`/`onChange` into a current
+ * pressed value and a click handler, whether the caller controls `pressed`
+ * or leaves the button to manage it. Always returns a real boolean — a
+ * toggle button must always announce `aria-pressed`, even with no props at
+ * all — starting from `defaultPressed` (or `false`) when uncontrolled.
+ */
+export declare function usePressedState({ defaultPressed, onChange, pressed, }: {
+    defaultPressed?: boolean;
+    onChange?: (pressed: boolean) => void;
+    pressed?: boolean;
+}): [boolean, () => void];
+/**
+ * A button that stays either "on" or "off" after each click — Mute,
+ * Bookmark, a filter chip — rather than firing a one-time action. Maps
+ * `pressed` to the native `aria-pressed` attribute, always present since a
+ * toggle button must announce that state. Manages its own pressed state,
+ * starting from `false`, when `pressed` is omitted — pass `defaultPressed`
+ * and/or `onChange` to seed or observe that uncontrolled state.
+ * Carries no default `kind` or CSS; `kind`/`className` stay exactly as
+ * caller-controlled as they are on plain `Button`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-button--docs | Storybook Documentation}
+ */
+export declare const ToggleButton: React.ForwardRefExoticComponent<(Omit<BaseButtonElementProps, "onChange"> & ToggleButtonProps) & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/components/button/ToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,KAAK,2BAA2B,GAAG;IACjC,gDAAgD;IAChD,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,KAAK,6BAA6B,GAAG;IACnC,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC5B,2BAA2B,GAC3B,6BAA6B,CAChC,GAAG;IACF,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE;;EAElE;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAmBxB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,0IAkCxB,CAAA"}

package/dist/components/button/ToggleButton.js

@@ -0,0 +1,56 @@
+import React__default, { forwardRef, useState } from 'react';
+import { BaseButton } from './BaseButton.js';
+
+function toggleButtonProps({ pressed }) {
+    return { "aria-pressed": pressed };
+}
+/**
+ * Resolves `pressed`/`defaultPressed`/`onChange` into a current
+ * pressed value and a click handler, whether the caller controls `pressed`
+ * or leaves the button to manage it. Always returns a real boolean — a
+ * toggle button must always announce `aria-pressed`, even with no props at
+ * all — starting from `defaultPressed` (or `false`) when uncontrolled.
+ */
+function usePressedState({ defaultPressed, onChange, pressed, }) {
+    const [uncontrolledPressed, setUncontrolledPressed] = useState(defaultPressed ?? false);
+    const isControlled = pressed !== undefined;
+    if (isControlled) {
+        const toggleControlledPressed = () => onChange?.(!pressed);
+        return [pressed, toggleControlledPressed];
+    }
+    const toggleUncontrolledPressed = () => {
+        const nextPressed = !uncontrolledPressed;
+        setUncontrolledPressed(nextPressed);
+        onChange?.(nextPressed);
+    };
+    return [uncontrolledPressed, toggleUncontrolledPressed];
+}
+/**
+ * A button that stays either "on" or "off" after each click — Mute,
+ * Bookmark, a filter chip — rather than firing a one-time action. Maps
+ * `pressed` to the native `aria-pressed` attribute, always present since a
+ * toggle button must announce that state. Manages its own pressed state,
+ * starting from `false`, when `pressed` is omitted — pass `defaultPressed`
+ * and/or `onChange` to seed or observe that uncontrolled state.
+ * Carries no default `kind` or CSS; `kind`/`className` stay exactly as
+ * caller-controlled as they are on plain `Button`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-button--docs | Storybook Documentation}
+ */
+const ToggleButton = forwardRef(({ defaultPressed, onClick, onChange, pressed, ...restProps }, ref) => {
+    const [currentPressed, togglePressed] = usePressedState({
+        defaultPressed,
+        onChange,
+        pressed,
+    });
+    const handleClick = (event) => {
+        togglePressed();
+        onClick?.(event);
+    };
+    return (React__default.createElement(BaseButton, { ref: ref, ...restProps, onClick: handleClick, ...toggleButtonProps({ pressed: currentPressed }) }));
+});
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton, toggleButtonProps, usePressedState };
+//# sourceMappingURL=ToggleButton.js.map

package/dist/components/button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef, useState } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\ntype ToggleButtonControlledProps = {\n  /** Not available when `pressed` is provided. */\n  defaultPressed?: never\n  /** Whether the button is pressed. Maps to `aria-pressed`. */\n  pressed: boolean\n}\n\ntype ToggleButtonUncontrolledProps = {\n  /** Initial pressed state. Defaults to `false` if omitted. */\n  defaultPressed?: boolean\n  /** Omit to let the button manage its own pressed state. */\n  pressed?: never\n}\n\nexport type ToggleButtonProps = (\n  | ToggleButtonControlledProps\n  | ToggleButtonUncontrolledProps\n) & {\n  /** Called with the next pressed state after each click. */\n  onChange?: (pressed: boolean) => void\n}\n\nexport function toggleButtonProps({ pressed }: { pressed: boolean }) {\n  return { \"aria-pressed\": pressed }\n}\n\n/**\n * Resolves `pressed`/`defaultPressed`/`onChange` into a current\n * pressed value and a click handler, whether the caller controls `pressed`\n * or leaves the button to manage it. Always returns a real boolean — a\n * toggle button must always announce `aria-pressed`, even with no props at\n * all — starting from `defaultPressed` (or `false`) when uncontrolled.\n */\nexport function usePressedState({\n  defaultPressed,\n  onChange,\n  pressed,\n}: {\n  defaultPressed?: boolean\n  onChange?: (pressed: boolean) => void\n  pressed?: boolean\n}): [boolean, () => void] {\n  const [uncontrolledPressed, setUncontrolledPressed] = useState(\n    defaultPressed ?? false\n  )\n\n  const isControlled = pressed !== undefined\n\n  if (isControlled) {\n    const toggleControlledPressed = () => onChange?.(!pressed)\n    return [pressed, toggleControlledPressed]\n  }\n\n  const toggleUncontrolledPressed = () => {\n    const nextPressed = !uncontrolledPressed\n    setUncontrolledPressed(nextPressed)\n    onChange?.(nextPressed)\n  }\n\n  return [uncontrolledPressed, toggleUncontrolledPressed]\n}\n\n/**\n * A button that stays either \"on\" or \"off\" after each click — Mute,\n * Bookmark, a filter chip — rather than firing a one-time action. Maps\n * `pressed` to the native `aria-pressed` attribute, always present since a\n * toggle button must announce that state. Manages its own pressed state,\n * starting from `false`, when `pressed` is omitted — pass `defaultPressed`\n * and/or `onChange` to seed or observe that uncontrolled state.\n * Carries no default `kind` or CSS; `kind`/`className` stay exactly as\n * caller-controlled as they are on plain `Button`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-button--docs | Storybook Documentation}\n */\nexport const ToggleButton = forwardRef<\n  HTMLButtonElement,\n  Omit<BaseButtonElementProps, \"onChange\"> & ToggleButtonProps\n>(\n  (\n    {\n      defaultPressed,\n      onClick,\n      onChange,\n      pressed,\n      ...restProps\n    }: Omit<BaseButtonElementProps, \"onChange\"> & ToggleButtonProps,\n    ref\n  ) => {\n    const [currentPressed, togglePressed] = usePressedState({\n      defaultPressed,\n      onChange,\n      pressed,\n    })\n\n    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n      togglePressed()\n      onClick?.(event)\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        {...restProps}\n        onClick={handleClick}\n        {...toggleButtonProps({ pressed: currentPressed })}\n      />\n    )\n  }\n)\n\nToggleButton.displayName = \"ToggleButton\"\n"],"names":["React"],"mappings":";;;AA4BM,SAAU,iBAAiB,CAAC,EAAE,OAAO,EAAwB,EAAA;AACjE,IAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE;AACpC;AAEA;;;;;;AAMG;AACG,SAAU,eAAe,CAAC,EAC9B,cAAc,EACd,QAAQ,EACR,OAAO,GAKR,EAAA;AACC,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,cAAc,IAAI,KAAK,CACxB;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,KAAK,SAAS;IAE1C,IAAI,YAAY,EAAE;QAChB,MAAM,uBAAuB,GAAG,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAC1D,QAAA,OAAO,CAAC,OAAO,EAAE,uBAAuB,CAAC;IAC3C;IAEA,MAAM,yBAAyB,GAAG,MAAK;AACrC,QAAA,MAAM,WAAW,GAAG,CAAC,mBAAmB;QACxC,sBAAsB,CAAC,WAAW,CAAC;AACnC,QAAA,QAAQ,GAAG,WAAW,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,OAAO,CAAC,mBAAmB,EAAE,yBAAyB,CAAC;AACzD;AAEA;;;;;;;;;;;;AAYG;MACU,YAAY,GAAG,UAAU,CAIpC,CACE,EACE,cAAc,EACd,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACiD,EAC/D,GAAG,KACD;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,GAAG,eAAe,CAAC;QACtD,cAAc;QACd,QAAQ;QACR,OAAO;AACR,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAA+C,CAAC,KAAK,KAAI;AACxE,QAAA,aAAa,EAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EACb,OAAO,EAAE,WAAW,EAAA,GAChB,iBAAiB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAA,CAClD;AAEN,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/button/ToggleIconButton.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { IconButtonProps } from "./IconButton";
+import { ToggleButtonProps } from "./ToggleButton";
+/**
+ * An icon-only button that stays either "on" or "off" after each click.
+ * Maps `pressed` to the native `aria-pressed` attribute, always present
+ * since a toggle button must announce that state. Manages its own pressed
+ * state, starting from `false`, when `pressed` is omitted — pass
+ * `defaultPressed` and/or `onChange` to seed or observe that
+ * uncontrolled state. Carries no default `kind` or CSS; `kind`/`className`
+ * stay exactly as caller-controlled as they are on plain `IconButton`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-icon-button--docs | Storybook Documentation}
+ */
+export declare const ToggleIconButton: React.ForwardRefExoticComponent<(Omit<IconButtonProps, "onChange"> & ToggleButtonProps) & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleIconButton.d.ts.map

package/dist/components/button/ToggleIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/ToggleIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EACL,iBAAiB,EAGlB,MAAM,gBAAgB,CAAA;AAEvB;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,mIAkC5B,CAAA"}

package/dist/components/button/ToggleIconButton.js

@@ -0,0 +1,32 @@
+import React__default, { forwardRef } from 'react';
+import { IconButton } from './IconButton.js';
+import { usePressedState, toggleButtonProps } from './ToggleButton.js';
+
+/**
+ * An icon-only button that stays either "on" or "off" after each click.
+ * Maps `pressed` to the native `aria-pressed` attribute, always present
+ * since a toggle button must announce that state. Manages its own pressed
+ * state, starting from `false`, when `pressed` is omitted — pass
+ * `defaultPressed` and/or `onChange` to seed or observe that
+ * uncontrolled state. Carries no default `kind` or CSS; `kind`/`className`
+ * stay exactly as caller-controlled as they are on plain `IconButton`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-icon-button--docs | Storybook Documentation}
+ */
+const ToggleIconButton = forwardRef(({ defaultPressed, onClick, onChange, pressed, ...restProps }, ref) => {
+    const [currentPressed, togglePressed] = usePressedState({
+        defaultPressed,
+        onChange,
+        pressed,
+    });
+    const handleClick = (event) => {
+        togglePressed();
+        onClick?.(event);
+    };
+    return (React__default.createElement(IconButton, { ref: ref, ...restProps, onClick: handleClick, ...toggleButtonProps({ pressed: currentPressed }) }));
+});
+ToggleIconButton.displayName = "ToggleIconButton";
+
+export { ToggleIconButton };
+//# sourceMappingURL=ToggleIconButton.js.map

package/dist/components/button/ToggleIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleIconButton.js","sources":["../../../src/components/button/ToggleIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { IconButton, IconButtonProps } from \"./IconButton\"\nimport {\n  ToggleButtonProps,\n  toggleButtonProps,\n  usePressedState,\n} from \"./ToggleButton\"\n\n/**\n * An icon-only button that stays either \"on\" or \"off\" after each click.\n * Maps `pressed` to the native `aria-pressed` attribute, always present\n * since a toggle button must announce that state. Manages its own pressed\n * state, starting from `false`, when `pressed` is omitted — pass\n * `defaultPressed` and/or `onChange` to seed or observe that\n * uncontrolled state. Carries no default `kind` or CSS; `kind`/`className`\n * stay exactly as caller-controlled as they are on plain `IconButton`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-toggle-icon-button--docs | Storybook Documentation}\n */\nexport const ToggleIconButton = forwardRef<\n  HTMLButtonElement,\n  Omit<IconButtonProps, \"onChange\"> & ToggleButtonProps\n>(\n  (\n    {\n      defaultPressed,\n      onClick,\n      onChange,\n      pressed,\n      ...restProps\n    }: Omit<IconButtonProps, \"onChange\"> & ToggleButtonProps,\n    ref\n  ) => {\n    const [currentPressed, togglePressed] = usePressedState({\n      defaultPressed,\n      onChange,\n      pressed,\n    })\n\n    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n      togglePressed()\n      onClick?.(event)\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        {...restProps}\n        onClick={handleClick}\n        {...toggleButtonProps({ pressed: currentPressed })}\n      />\n    )\n  }\n)\n\nToggleIconButton.displayName = \"ToggleIconButton\"\n"],"names":["React"],"mappings":";;;;AASA;;;;;;;;;;;AAWG;MACU,gBAAgB,GAAG,UAAU,CAIxC,CACE,EACE,cAAc,EACd,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EAC0C,EACxD,GAAG,KACD;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,GAAG,eAAe,CAAC;QACtD,cAAc;QACd,QAAQ;QACR,OAAO;AACR,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAA+C,CAAC,KAAK,KAAI;AACxE,QAAA,aAAa,EAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EACb,OAAO,EAAE,WAAW,EAAA,GAChB,iBAAiB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAA,CAClD;AAEN,CAAC;AAGH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/index.css

@@ -2303,12 +2303,23 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-color:var(--tds-btn-border-color-hover);
   }
 
-.tds-btn:active,.tds-btn.active,.tds-btn[aria-pressed="true"]{
+.tds-btn:active,.tds-btn.active{
     color:var(--tds-btn-color-active);
     background-color:var(--tds-btn-bg-active);
     border-color:var(--tds-btn-border-color-active);
   }
 
+.tds-btn[aria-pressed="true"]{
+    color:var(--tds-btn-color-active);
+    background-color:var(--tds-btn-bg-active);
+    border-color:var(--tds-btn-border-color-active);
+  }
+
+.tds-btn[aria-pressed="true"]:hover,.tds-btn[aria-pressed="true"]:focus-visible{
+      background-color:hsl(from var(--tds-btn-bg-active) h s calc(l - 5));
+      border-color:hsl(from var(--tds-btn-border-color-active) h s calc(l - 5));
+    }
+
 .tds-btn:disabled,.tds-btn.disabled{
     --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
     --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);