@pearpages/pulp-react 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/alert.css +1 -0
- package/dist/alert.css.map +1 -1
- package/dist/alert.js +3 -3
- package/dist/button.css +1 -0
- package/dist/button.css.map +1 -1
- package/dist/button.js +1 -1
- package/dist/{chunk-K5QGGQOV.js → chunk-2KG43BOT.js} +4 -4
- package/dist/{chunk-K5QGGQOV.js.map → chunk-2KG43BOT.js.map} +1 -1
- package/dist/{chunk-DXOOW6Q6.js → chunk-4DER5LHM.js} +4 -4
- package/dist/{chunk-DXOOW6Q6.js.map → chunk-4DER5LHM.js.map} +1 -1
- package/dist/{chunk-FXRSZUDH.js → chunk-DVM37MEK.js} +3 -3
- package/dist/{chunk-FXRSZUDH.js.map → chunk-DVM37MEK.js.map} +1 -1
- package/dist/{chunk-KPQGS4PG.js → chunk-VSDEQHG4.js} +2 -2
- package/dist/chunk-VSDEQHG4.js.map +1 -0
- package/dist/{chunk-PM4YO67Q.js → chunk-XXC34COT.js} +3 -3
- package/dist/{chunk-PM4YO67Q.js.map → chunk-XXC34COT.js.map} +1 -1
- package/dist/icon-button.css +1 -0
- package/dist/icon-button.css.map +1 -1
- package/dist/icon-button.js +2 -2
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +5 -5
- package/dist/pagination.css +1 -0
- package/dist/pagination.css.map +1 -1
- package/dist/pagination.js +3 -3
- package/dist/toast.css +1 -0
- package/dist/toast.css.map +1 -1
- package/dist/toast.js +4 -4
- package/package.json +1 -1
- package/dist/chunk-KPQGS4PG.js.map +0 -1
package/dist/alert.css
CHANGED
package/dist/alert.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n .alert {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n\n display: flex;\n align-items: flex-start;\n gap: var(--alert-gap);\n padding: var(--alert-padding);\n border: var(--alert-border-width) solid var(--_accent);\n border-inline-start-width: var(--alert-accent-width);\n border-radius: var(--alert-radius);\n background-color: var(--_bg);\n color: var(--alert-fg);\n font-size: var(--alert-font-size);\n\n &[data-tone=\"info\"] {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n }\n\n &[data-tone=\"success\"] {\n --_bg: var(--alert-success-bg);\n --_accent: var(--alert-success-accent);\n --_title: var(--alert-success-title);\n }\n\n &[data-tone=\"warning\"] {\n --_bg: var(--alert-warning-bg);\n --_accent: var(--alert-warning-accent);\n --_title: var(--alert-warning-title);\n }\n\n &[data-tone=\"error\"] {\n --_bg: var(--alert-error-bg);\n --_accent: var(--alert-error-accent);\n --_title: var(--alert-error-title);\n }\n }\n\n .icon {\n flex: none;\n color: var(--_accent);\n }\n\n .body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n min-inline-size: 0;\n }\n\n .title {\n margin: 0;\n color: var(--_title);\n font-weight: var(--alert-title-font-weight);\n }\n\n .content {\n overflow-wrap: anywhere;\n }\n\n .action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-block-start: var(--space-1);\n }\n\n .dismiss {\n flex: none;\n margin-block: calc(-1 * var(--space-1));\n margin-inline-end: calc(-1 * var(--space-2));\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}
|
|
1
|
+
{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n .alert {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n\n display: flex;\n align-items: flex-start;\n gap: var(--alert-gap);\n padding: var(--alert-padding);\n border: var(--alert-border-width) solid var(--_accent);\n border-inline-start-width: var(--alert-accent-width);\n border-radius: var(--alert-radius);\n background-color: var(--_bg);\n color: var(--alert-fg);\n font-size: var(--alert-font-size);\n\n &[data-tone=\"info\"] {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n }\n\n &[data-tone=\"success\"] {\n --_bg: var(--alert-success-bg);\n --_accent: var(--alert-success-accent);\n --_title: var(--alert-success-title);\n }\n\n &[data-tone=\"warning\"] {\n --_bg: var(--alert-warning-bg);\n --_accent: var(--alert-warning-accent);\n --_title: var(--alert-warning-title);\n }\n\n &[data-tone=\"error\"] {\n --_bg: var(--alert-error-bg);\n --_accent: var(--alert-error-accent);\n --_title: var(--alert-error-title);\n }\n }\n\n .icon {\n flex: none;\n color: var(--_accent);\n }\n\n .body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n min-inline-size: 0;\n }\n\n .title {\n margin: 0;\n color: var(--_title);\n font-weight: var(--alert-title-font-weight);\n }\n\n .content {\n overflow-wrap: anywhere;\n }\n\n .action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-block-start: var(--space-1);\n }\n\n .dismiss {\n flex: none;\n margin-block: calc(-1 * var(--space-1));\n margin-inline-end: calc(-1 * var(--space-2));\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}
|
package/dist/alert.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { Alert } from './chunk-
|
|
2
|
-
import './chunk-
|
|
3
|
-
import './chunk-
|
|
1
|
+
export { Alert } from './chunk-XXC34COT.js';
|
|
2
|
+
import './chunk-DVM37MEK.js';
|
|
3
|
+
import './chunk-VSDEQHG4.js';
|
|
4
4
|
import './chunk-I4KC4V6A.js';
|
|
5
5
|
import './chunk-ZVDN3GRI.js';
|
|
6
6
|
import './chunk-Z4PN6B2C.js';
|
package/dist/button.css
CHANGED
package/dist/button.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;AClBA;AACE,GAACC;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;;;ACZA;AACE,GAACC;AACC,aAAS,IAAI;AACb,cAAU,IAAI;AACd,kBAAc,IAAI;AAElB,aAAS;AACT,UAAM;AACN,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAoB;AACrD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAoB;AACrD,KAAC,CAAC;AAAuB,eAAS;AAAK;AAEvC,KAAC,CAAC;AACA,gBAAU;AACV,oBAAc;AAChB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,gBAAY;AACZ,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,8BAA0B,IAAI;AAC9B,mBAAe,IAAI;AACnB,eAAW,aAAK,IAAI,oBAAoB,OAAO;AACjD;AAEA,aAHaC;AAIX;AACE,cAAQ;AACV;AACF;AAEA,UAAO,wBAAyB;AAC9B,KAhBDD;AAiBG,iBAAW;AACb;AACF;AACF;;;ACtCA;AACE,GAACE;AACC,aAAS;AACT,iBAAa;AACb,qBAAiB;AACjB,SAAK,IAAI;AACT,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,qBAAiB;AACjB,iBAAa;AACb,YAAQ;AACR,iBAAa;AACb;AAAA,MACE,iBAAiB,IAAI,0BAA0B,IAAI,yBAAyB;AAAA,MAC5E,aAAa,IAAI,0BAA0B,IAAI,yBAAyB;AAAA,MACxE,MAAM,IAAI,0BAA0B,IAAI;AAE1C,KAAC;AACC,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AAAA,IACD,CAAC,CAAC;AACA,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,CAAC;AACA,cAAQ;AACV;AAEA,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AAEX,OAAC,MAAM,KAAK,WAAW,CAAC;AACtB,0BAAkB,IAAI;AACxB;AAEA,OAAC,OAAO,KAAK,WAAW,CAAC;AACvB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,oBAAc,IAAI;AAClB,aAAO,IAAI;AAEX,OAAC,MAAM,KAAK,WAAW,CAAC;AACtB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,wBAAkB;AAClB,aAAO,IAAI;AAEX,OAAC,MAAM,KAAK,WAAW,CAAC;AACtB,0BAAkB,IAAI;AACxB;AACF;AACF;AAEA,GAACC;AACC,aAAS;AACX;AACF;","names":["icon","root","spinner","ring","spin","button","label"]}
|
|
1
|
+
{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label"]}
|
package/dist/button.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { IconButton } from './chunk-
|
|
2
|
-
import { Button } from './chunk-
|
|
1
|
+
import { IconButton } from './chunk-DVM37MEK.js';
|
|
2
|
+
import { Button } from './chunk-VSDEQHG4.js';
|
|
3
3
|
import { classes } from './chunk-MI4QUKQS.js';
|
|
4
4
|
import { ArrowLeft, ArrowRight } from '@pearpages/pulp-icons';
|
|
5
5
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
@@ -80,5 +80,5 @@ function Pagination({
|
|
|
80
80
|
Pagination.displayName = "Pagination";
|
|
81
81
|
|
|
82
82
|
export { Pagination, paginationRange };
|
|
83
|
-
//# sourceMappingURL=chunk-
|
|
84
|
-
//# sourceMappingURL=chunk-
|
|
83
|
+
//# sourceMappingURL=chunk-2KG43BOT.js.map
|
|
84
|
+
//# sourceMappingURL=chunk-2KG43BOT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pagination/range.ts","../src/pagination/Pagination.module.css","../src/pagination/Pagination.tsx"],"names":["root","list","page","ellipsis"],"mappings":"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","file":"chunk-K5QGGQOV.js","sourcesContent":["export type PaginationItem = number | 'start-ellipsis' | 'end-ellipsis';\n\n/** Which pages to show: boundaries at both ends, siblings around the current page, ellipses for the rest. */\nexport function paginationRange(page: number, count: number, siblings: number, boundaries: number): PaginationItem[] {\n const span = (from: number, to: number) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);\n const total = boundaries * 2 + siblings * 2 + 3;\n if (count <= total) return span(1, count);\n const start = span(1, boundaries);\n const end = span(count - boundaries + 1, count);\n const siblingStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);\n const siblingEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);\n return [\n ...start,\n ...(siblingStart > boundaries + 2 ? (['start-ellipsis'] as PaginationItem[]) : span(boundaries + 1, boundaries + 1)),\n ...span(siblingStart, siblingEnd),\n ...(siblingEnd < count - boundaries - 1 ? (['end-ellipsis'] as PaginationItem[]) : span(count - boundaries, count - boundaries)),\n ...end,\n ];\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer components {\n .root {\n --_size: var(--pagination-ellipsis-size-md);\n --_font-size: var(--pagination-font-size-md);\n\n font-family: var(--pagination-font-family);\n\n &[data-size=\"sm\"] {\n --_size: var(--pagination-ellipsis-size-sm);\n --_font-size: var(--pagination-font-size-sm);\n }\n }\n\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pagination-gap);\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .page {\n min-inline-size: var(--_size);\n padding-inline: 0;\n font-variant-numeric: tabular-nums;\n }\n\n .ellipsis {\n display: grid;\n place-items: center;\n min-inline-size: var(--_size);\n block-size: var(--_size);\n color: var(--pagination-ellipsis-fg);\n font-size: var(--_font-size);\n }\n}\n","import type { HTMLAttributes, Ref } from 'react';\nimport { ArrowLeft, ArrowRight } from '@pearpages/pulp-icons';\nimport { Button } from '../button';\nimport { IconButton } from '../icon-button';\nimport { classes } from '../internal/classes';\nimport { paginationRange } from './range';\nimport styles from './Pagination.module.css';\n\nexport type PaginationSize = 'sm' | 'md';\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n /** The current page, 1-based. */\n page: number;\n /** Total number of pages. */\n count: number;\n onPageChange?: (page: number) => void;\n /** Pages shown on each side of the current one. @default 1 */\n siblings?: number;\n /** Pages always shown at each end. @default 1 */\n boundaries?: number;\n /** Render pages as links (server-side or router pagination) instead of buttons. */\n getHref?: (page: number) => string;\n /** @default 'md' */\n size?: PaginationSize;\n /** The landmark's name. @default 'Pagination' */\n 'aria-label'?: string;\n /** @default 'Previous page' */\n previousLabel?: string;\n /** @default 'Next page' */\n nextLabel?: string;\n /** Accessible name of a page control. @default (n) => `Page ${n}` */\n pageLabel?: (page: number) => string;\n ref?: Ref<HTMLElement>;\n}\n\n/**\n * Page controls in a `nav` landmark: previous, numbered pages with the\n * current one marked `aria-current=\"page\"`, and next. Distant pages\n * collapse into an ellipsis. Buttons by default; `getHref` renders links so\n * the pages are crawlable and open in new tabs. Built from Button and\n * IconButton, so it needs no keyboard model of its own.\n *\n * @status experimental\n * @category Navigation\n * @accessibility A `nav` landmark named by `aria-label`; the current page carries `aria-current=\"page\"`; previous and next are IconButtons with names; ellipses are hidden from assistive technology. With `getHref` the controls are links.\n * @do Use `getHref` when pages have URLs so they can be opened in new tabs and crawled.\n * Keep `siblings` at 1 on narrow screens.\n * @dont Disable the whole component while a page loads; disable only what cannot be pressed.\n */\nexport function Pagination({\n page,\n count,\n onPageChange,\n siblings = 1,\n boundaries = 1,\n getHref,\n size = 'md',\n 'aria-label': ariaLabel = 'Pagination',\n previousLabel = 'Previous page',\n nextLabel = 'Next page',\n pageLabel = (n) => `Page ${n}`,\n className,\n ref,\n ...rest\n}: PaginationProps) {\n const go = (target: number) => () => onPageChange?.(target);\n\n return (\n <nav {...rest} ref={ref} aria-label={ariaLabel} className={classes(styles.root, className)} data-size={size}>\n <ul className={styles.list}>\n <li>\n {page > 1 && getHref ? (\n <IconButton<HTMLAnchorElement> asChild label={previousLabel} icon={<ArrowLeft />} variant=\"ghost\" size={size} onClick={go(page - 1)}>\n <a href={getHref(page - 1)} />\n </IconButton>\n ) : (\n <IconButton label={previousLabel} icon={<ArrowLeft />} variant=\"ghost\" size={size} disabled={page <= 1} onClick={go(page - 1)} />\n )}\n </li>\n {paginationRange(page, count, siblings, boundaries).map((item) =>\n typeof item === 'number' ? (\n <li key={item}>\n {getHref ? (\n <Button<HTMLAnchorElement>\n asChild\n variant={item === page ? 'primary' : 'ghost'}\n size={size}\n className={styles.page}\n aria-label={pageLabel(item)}\n aria-current={item === page ? 'page' : undefined}\n onClick={go(item)}\n >\n <a href={getHref(item)}>{item}</a>\n </Button>\n ) : (\n <Button\n variant={item === page ? 'primary' : 'ghost'}\n size={size}\n className={styles.page}\n aria-label={pageLabel(item)}\n aria-current={item === page ? 'page' : undefined}\n onClick={go(item)}\n >\n {item}\n </Button>\n )}\n </li>\n ) : (\n <li key={item} className={styles.ellipsis} aria-hidden=\"true\">\n …\n </li>\n ),\n )}\n <li>\n {page < count && getHref ? (\n <IconButton<HTMLAnchorElement> asChild label={nextLabel} icon={<ArrowRight />} variant=\"ghost\" size={size} onClick={go(page + 1)}>\n <a href={getHref(page + 1)} />\n </IconButton>\n ) : (\n <IconButton label={nextLabel} icon={<ArrowRight />} variant=\"ghost\" size={size} disabled={page >= count} onClick={go(page + 1)} />\n )}\n </li>\n </ul>\n </nav>\n );\n}\n\nPagination.displayName = 'Pagination';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/pagination/range.ts","../src/pagination/Pagination.module.css","../src/pagination/Pagination.tsx"],"names":["root","list","page","ellipsis"],"mappings":"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","file":"chunk-2KG43BOT.js","sourcesContent":["export type PaginationItem = number | 'start-ellipsis' | 'end-ellipsis';\n\n/** Which pages to show: boundaries at both ends, siblings around the current page, ellipses for the rest. */\nexport function paginationRange(page: number, count: number, siblings: number, boundaries: number): PaginationItem[] {\n const span = (from: number, to: number) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);\n const total = boundaries * 2 + siblings * 2 + 3;\n if (count <= total) return span(1, count);\n const start = span(1, boundaries);\n const end = span(count - boundaries + 1, count);\n const siblingStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);\n const siblingEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);\n return [\n ...start,\n ...(siblingStart > boundaries + 2 ? (['start-ellipsis'] as PaginationItem[]) : span(boundaries + 1, boundaries + 1)),\n ...span(siblingStart, siblingEnd),\n ...(siblingEnd < count - boundaries - 1 ? (['end-ellipsis'] as PaginationItem[]) : span(count - boundaries, count - boundaries)),\n ...end,\n ];\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer components {\n .root {\n --_size: var(--pagination-ellipsis-size-md);\n --_font-size: var(--pagination-font-size-md);\n\n font-family: var(--pagination-font-family);\n\n &[data-size=\"sm\"] {\n --_size: var(--pagination-ellipsis-size-sm);\n --_font-size: var(--pagination-font-size-sm);\n }\n }\n\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pagination-gap);\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .page {\n min-inline-size: var(--_size);\n padding-inline: 0;\n font-variant-numeric: tabular-nums;\n }\n\n .ellipsis {\n display: grid;\n place-items: center;\n min-inline-size: var(--_size);\n block-size: var(--_size);\n color: var(--pagination-ellipsis-fg);\n font-size: var(--_font-size);\n }\n}\n","import type { HTMLAttributes, Ref } from 'react';\nimport { ArrowLeft, ArrowRight } from '@pearpages/pulp-icons';\nimport { Button } from '../button';\nimport { IconButton } from '../icon-button';\nimport { classes } from '../internal/classes';\nimport { paginationRange } from './range';\nimport styles from './Pagination.module.css';\n\nexport type PaginationSize = 'sm' | 'md';\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n /** The current page, 1-based. */\n page: number;\n /** Total number of pages. */\n count: number;\n onPageChange?: (page: number) => void;\n /** Pages shown on each side of the current one. @default 1 */\n siblings?: number;\n /** Pages always shown at each end. @default 1 */\n boundaries?: number;\n /** Render pages as links (server-side or router pagination) instead of buttons. */\n getHref?: (page: number) => string;\n /** @default 'md' */\n size?: PaginationSize;\n /** The landmark's name. @default 'Pagination' */\n 'aria-label'?: string;\n /** @default 'Previous page' */\n previousLabel?: string;\n /** @default 'Next page' */\n nextLabel?: string;\n /** Accessible name of a page control. @default (n) => `Page ${n}` */\n pageLabel?: (page: number) => string;\n ref?: Ref<HTMLElement>;\n}\n\n/**\n * Page controls in a `nav` landmark: previous, numbered pages with the\n * current one marked `aria-current=\"page\"`, and next. Distant pages\n * collapse into an ellipsis. Buttons by default; `getHref` renders links so\n * the pages are crawlable and open in new tabs. Built from Button and\n * IconButton, so it needs no keyboard model of its own.\n *\n * @status experimental\n * @category Navigation\n * @accessibility A `nav` landmark named by `aria-label`; the current page carries `aria-current=\"page\"`; previous and next are IconButtons with names; ellipses are hidden from assistive technology. With `getHref` the controls are links.\n * @do Use `getHref` when pages have URLs so they can be opened in new tabs and crawled.\n * Keep `siblings` at 1 on narrow screens.\n * @dont Disable the whole component while a page loads; disable only what cannot be pressed.\n */\nexport function Pagination({\n page,\n count,\n onPageChange,\n siblings = 1,\n boundaries = 1,\n getHref,\n size = 'md',\n 'aria-label': ariaLabel = 'Pagination',\n previousLabel = 'Previous page',\n nextLabel = 'Next page',\n pageLabel = (n) => `Page ${n}`,\n className,\n ref,\n ...rest\n}: PaginationProps) {\n const go = (target: number) => () => onPageChange?.(target);\n\n return (\n <nav {...rest} ref={ref} aria-label={ariaLabel} className={classes(styles.root, className)} data-size={size}>\n <ul className={styles.list}>\n <li>\n {page > 1 && getHref ? (\n <IconButton<HTMLAnchorElement> asChild label={previousLabel} icon={<ArrowLeft />} variant=\"ghost\" size={size} onClick={go(page - 1)}>\n <a href={getHref(page - 1)} />\n </IconButton>\n ) : (\n <IconButton label={previousLabel} icon={<ArrowLeft />} variant=\"ghost\" size={size} disabled={page <= 1} onClick={go(page - 1)} />\n )}\n </li>\n {paginationRange(page, count, siblings, boundaries).map((item) =>\n typeof item === 'number' ? (\n <li key={item}>\n {getHref ? (\n <Button<HTMLAnchorElement>\n asChild\n variant={item === page ? 'primary' : 'ghost'}\n size={size}\n className={styles.page}\n aria-label={pageLabel(item)}\n aria-current={item === page ? 'page' : undefined}\n onClick={go(item)}\n >\n <a href={getHref(item)}>{item}</a>\n </Button>\n ) : (\n <Button\n variant={item === page ? 'primary' : 'ghost'}\n size={size}\n className={styles.page}\n aria-label={pageLabel(item)}\n aria-current={item === page ? 'page' : undefined}\n onClick={go(item)}\n >\n {item}\n </Button>\n )}\n </li>\n ) : (\n <li key={item} className={styles.ellipsis} aria-hidden=\"true\">\n …\n </li>\n ),\n )}\n <li>\n {page < count && getHref ? (\n <IconButton<HTMLAnchorElement> asChild label={nextLabel} icon={<ArrowRight />} variant=\"ghost\" size={size} onClick={go(page + 1)}>\n <a href={getHref(page + 1)} />\n </IconButton>\n ) : (\n <IconButton label={nextLabel} icon={<ArrowRight />} variant=\"ghost\" size={size} disabled={page >= count} onClick={go(page + 1)} />\n )}\n </li>\n </ul>\n </nav>\n );\n}\n\nPagination.displayName = 'Pagination';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Alert } from './chunk-
|
|
2
|
-
import { Button } from './chunk-
|
|
1
|
+
import { Alert } from './chunk-XXC34COT.js';
|
|
2
|
+
import { Button } from './chunk-VSDEQHG4.js';
|
|
3
3
|
import { classes } from './chunk-MI4QUKQS.js';
|
|
4
4
|
import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
@@ -155,5 +155,5 @@ function ToastProvider({ placement = "bottom-end", max = 5, duration = 6e3, labe
|
|
|
155
155
|
ToastProvider.displayName = "ToastProvider";
|
|
156
156
|
|
|
157
157
|
export { ToastProvider, useToast };
|
|
158
|
-
//# sourceMappingURL=chunk-
|
|
159
|
-
//# sourceMappingURL=chunk-
|
|
158
|
+
//# sourceMappingURL=chunk-4DER5LHM.js.map
|
|
159
|
+
//# sourceMappingURL=chunk-4DER5LHM.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toast/context.ts","../src/toast/Toast.module.css","../src/toast/Toast.tsx"],"names":["region","list","item","toast"],"mappings":"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","file":"chunk-DXOOW6Q6.js","sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\nimport type { AlertTone } from '../alert';\n\nexport interface ToastOptions {\n title: ReactNode;\n description?: ReactNode;\n /** @default 'info' */\n tone?: AlertTone;\n /** Milliseconds before auto-dismiss; `Infinity` keeps it until dismissed. Errors default to `Infinity`. */\n duration?: number;\n action?: { label: string; onClick: () => void };\n}\n\nexport interface ToastItem extends ToastOptions {\n id: string;\n}\n\nexport interface ToastContextValue {\n /** Shows a toast and returns its id. */\n toast: (options: ToastOptions) => string;\n dismiss: (id: string) => void;\n dismissAll: () => void;\n}\n\nexport const ToastContext = createContext<ToastContextValue | null>(null);\n\n/** The toast API. Must be used inside `ToastProvider`. */\nexport function useToast(): ToastContextValue {\n const context = useContext(ToastContext);\n if (!context) throw new Error('useToast must be used inside <ToastProvider>');\n return context;\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer components {\n .region {\n --_top: auto;\n --_end: var(--toast-offset);\n --_bottom: var(--toast-offset);\n --_start: auto;\n\n position: fixed;\n z-index: var(--toast-layer);\n inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n inline-size: min(var(--toast-width), 100vw);\n padding: 0;\n pointer-events: none;\n\n &[data-placement=\"top-end\"] {\n --_top: var(--toast-offset);\n --_bottom: auto;\n }\n\n &[data-placement=\"top-center\"] {\n --_top: var(--toast-offset);\n --_bottom: auto;\n --_start: 0;\n --_end: 0;\n\n margin-inline: auto;\n }\n }\n\n .list {\n display: flex;\n flex-direction: column;\n gap: var(--toast-gap);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .item {\n pointer-events: auto;\n animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n }\n\n .toast {\n border-radius: var(--toast-radius);\n box-shadow: var(--toast-shadow);\n }\n\n @keyframes enter {\n from {\n opacity: 0;\n translate: 0 var(--space-2);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .item {\n animation: none;\n }\n }\n}\n","import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Alert } from '../alert';\nimport { Button } from '../button';\nimport { classes } from '../internal/classes';\nimport { ToastContext, type ToastItem, type ToastOptions } from './context';\nimport styles from './Toast.module.css';\n\nexport type ToastPlacement = 'bottom-end' | 'top-end' | 'top-center';\n\nexport interface ToastProviderProps {\n /** @default 'bottom-end' */\n placement?: ToastPlacement;\n /** Most toasts shown at once; the oldest is dismissed first. @default 5 */\n max?: number;\n /** Default auto-dismiss time in milliseconds. @default 6000 */\n duration?: number;\n /** Accessible name of the region. @default 'Notifications' */\n label?: string;\n children: ReactNode;\n}\n\ninterface Timer {\n remaining: number;\n startedAt: number;\n handle: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Mount once near the app root. Owns a portal element with a polite live\n * region; `useToast()` adds notifications to it. Timers pause while the\n * region is hovered or holds focus, Escape dismisses the focused toast, and\n * error toasts stay until dismissed. Each toast is an Alert.\n *\n * @status stable\n * @category Feedback\n * @accessibility Owns a `region` named \"Notifications\" with `aria-live=\"polite\"`; each toast is an Alert with its live role off (the region announces). Timers pause while the region is hovered or holds focus; Escape dismisses the focused toast; error toasts stay until dismissed.\n * @do Mount it once near the app root.\n * Keep messages to one sentence; put detail behind an `action`.\n * @dont Use a toast for an error the user must fix in a form; show it at the field.\n * Stack more than a few; the cap drops the oldest.\n */\nexport function ToastProvider({ placement = 'bottom-end', max = 5, duration = 6000, label = 'Notifications', children }: ToastProviderProps) {\n const [items, setItems] = useState<ToastItem[]>([]);\n const [paused, setPaused] = useState(false);\n const timers = useRef(new Map<string, Timer>());\n const counter = useRef(0);\n\n const [container] = useState<HTMLDivElement | undefined>(() => {\n if (typeof document === 'undefined') return undefined;\n const element = document.createElement('div');\n element.dataset.pulpToasts = '';\n return element;\n });\n\n useEffect(() => {\n if (!container) return;\n document.body.append(container);\n return () => container.remove();\n }, [container]);\n\n const dismiss = useCallback((id: string) => {\n const timer = timers.current.get(id);\n if (timer?.handle !== undefined) clearTimeout(timer.handle);\n timers.current.delete(id);\n setItems((current) => current.filter((item) => item.id !== id));\n }, []);\n\n const dismissAll = useCallback(() => {\n for (const timer of timers.current.values()) if (timer.handle !== undefined) clearTimeout(timer.handle);\n timers.current.clear();\n setItems([]);\n }, []);\n\n const start = useCallback(\n (id: string, remaining: number) => {\n if (!Number.isFinite(remaining)) return;\n timers.current.set(id, { remaining, startedAt: Date.now(), handle: setTimeout(() => dismiss(id), remaining) });\n },\n [dismiss],\n );\n\n const toast = useCallback(\n (options: ToastOptions) => {\n counter.current += 1;\n const id = `toast-${counter.current}`;\n const ttl = options.duration ?? (options.tone === 'error' ? Infinity : duration);\n setItems((current) => {\n const next = [...current, { ...options, id }];\n const overflow = next.length - max;\n if (overflow > 0) {\n for (const old of next.slice(0, overflow)) {\n const timer = timers.current.get(old.id);\n if (timer?.handle !== undefined) clearTimeout(timer.handle);\n timers.current.delete(old.id);\n }\n return next.slice(overflow);\n }\n return next;\n });\n if (!paused) start(id, ttl);\n else timers.current.set(id, { remaining: ttl, startedAt: Date.now(), handle: undefined });\n return id;\n },\n [duration, max, paused, start],\n );\n\n // Pause: freeze every timer with its remaining time. Resume: restart them.\n useEffect(() => {\n const map = timers.current;\n if (paused) {\n for (const [id, timer] of map) {\n if (timer.handle === undefined) continue;\n clearTimeout(timer.handle);\n map.set(id, { ...timer, remaining: Math.max(0, timer.remaining - (Date.now() - timer.startedAt)), handle: undefined });\n }\n } else {\n for (const [id, timer] of map) {\n if (timer.handle !== undefined || !Number.isFinite(timer.remaining)) continue;\n map.set(id, { ...timer, startedAt: Date.now(), handle: setTimeout(() => dismiss(id), timer.remaining) });\n }\n }\n }, [paused, dismiss]);\n\n useEffect(() => {\n const map = timers.current;\n return () => {\n for (const timer of map.values()) if (timer.handle !== undefined) clearTimeout(timer.handle);\n };\n }, []);\n\n const value = useMemo(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);\n\n const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n if (event.key !== 'Escape') return;\n const item = (event.target as HTMLElement).closest<HTMLElement>('[data-toast-id]');\n if (item?.dataset.toastId) {\n event.preventDefault();\n dismiss(item.dataset.toastId);\n }\n };\n\n const region = (\n <section\n role=\"region\"\n aria-label={label}\n aria-live=\"polite\"\n className={classes(styles.region)}\n data-placement={placement}\n onMouseEnter={() => setPaused(true)}\n onMouseLeave={() => setPaused(false)}\n onFocus={() => setPaused(true)}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setPaused(false);\n }}\n onKeyDown={onKeyDown}\n >\n <ol className={styles.list}>\n {items.map((item) => (\n <li key={item.id} className={styles.item} data-toast-id={item.id} data-tone={item.tone ?? 'info'}>\n <Alert\n tone={item.tone}\n title={item.title}\n live=\"off\"\n className={styles.toast}\n onDismiss={() => dismiss(item.id)}\n action={\n item.action && (\n <Button\n size=\"sm\"\n variant=\"secondary\"\n onClick={() => {\n item.action?.onClick();\n dismiss(item.id);\n }}\n >\n {item.action.label}\n </Button>\n )\n }\n >\n {item.description}\n </Alert>\n </li>\n ))}\n </ol>\n </section>\n );\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {container ? createPortal(region, container) : null}\n </ToastContext.Provider>\n );\n}\n\nToastProvider.displayName = 'ToastProvider';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/toast/context.ts","../src/toast/Toast.module.css","../src/toast/Toast.tsx"],"names":["region","list","item","toast"],"mappings":"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","file":"chunk-4DER5LHM.js","sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\nimport type { AlertTone } from '../alert';\n\nexport interface ToastOptions {\n title: ReactNode;\n description?: ReactNode;\n /** @default 'info' */\n tone?: AlertTone;\n /** Milliseconds before auto-dismiss; `Infinity` keeps it until dismissed. Errors default to `Infinity`. */\n duration?: number;\n action?: { label: string; onClick: () => void };\n}\n\nexport interface ToastItem extends ToastOptions {\n id: string;\n}\n\nexport interface ToastContextValue {\n /** Shows a toast and returns its id. */\n toast: (options: ToastOptions) => string;\n dismiss: (id: string) => void;\n dismissAll: () => void;\n}\n\nexport const ToastContext = createContext<ToastContextValue | null>(null);\n\n/** The toast API. Must be used inside `ToastProvider`. */\nexport function useToast(): ToastContextValue {\n const context = useContext(ToastContext);\n if (!context) throw new Error('useToast must be used inside <ToastProvider>');\n return context;\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer components {\n .region {\n --_top: auto;\n --_end: var(--toast-offset);\n --_bottom: var(--toast-offset);\n --_start: auto;\n\n position: fixed;\n z-index: var(--toast-layer);\n inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n inline-size: min(var(--toast-width), 100vw);\n padding: 0;\n pointer-events: none;\n\n &[data-placement=\"top-end\"] {\n --_top: var(--toast-offset);\n --_bottom: auto;\n }\n\n &[data-placement=\"top-center\"] {\n --_top: var(--toast-offset);\n --_bottom: auto;\n --_start: 0;\n --_end: 0;\n\n margin-inline: auto;\n }\n }\n\n .list {\n display: flex;\n flex-direction: column;\n gap: var(--toast-gap);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .item {\n pointer-events: auto;\n animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n }\n\n .toast {\n border-radius: var(--toast-radius);\n box-shadow: var(--toast-shadow);\n }\n\n @keyframes enter {\n from {\n opacity: 0;\n translate: 0 var(--space-2);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .item {\n animation: none;\n }\n }\n}\n","import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Alert } from '../alert';\nimport { Button } from '../button';\nimport { classes } from '../internal/classes';\nimport { ToastContext, type ToastItem, type ToastOptions } from './context';\nimport styles from './Toast.module.css';\n\nexport type ToastPlacement = 'bottom-end' | 'top-end' | 'top-center';\n\nexport interface ToastProviderProps {\n /** @default 'bottom-end' */\n placement?: ToastPlacement;\n /** Most toasts shown at once; the oldest is dismissed first. @default 5 */\n max?: number;\n /** Default auto-dismiss time in milliseconds. @default 6000 */\n duration?: number;\n /** Accessible name of the region. @default 'Notifications' */\n label?: string;\n children: ReactNode;\n}\n\ninterface Timer {\n remaining: number;\n startedAt: number;\n handle: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Mount once near the app root. Owns a portal element with a polite live\n * region; `useToast()` adds notifications to it. Timers pause while the\n * region is hovered or holds focus, Escape dismisses the focused toast, and\n * error toasts stay until dismissed. Each toast is an Alert.\n *\n * @status stable\n * @category Feedback\n * @accessibility Owns a `region` named \"Notifications\" with `aria-live=\"polite\"`; each toast is an Alert with its live role off (the region announces). Timers pause while the region is hovered or holds focus; Escape dismisses the focused toast; error toasts stay until dismissed.\n * @do Mount it once near the app root.\n * Keep messages to one sentence; put detail behind an `action`.\n * @dont Use a toast for an error the user must fix in a form; show it at the field.\n * Stack more than a few; the cap drops the oldest.\n */\nexport function ToastProvider({ placement = 'bottom-end', max = 5, duration = 6000, label = 'Notifications', children }: ToastProviderProps) {\n const [items, setItems] = useState<ToastItem[]>([]);\n const [paused, setPaused] = useState(false);\n const timers = useRef(new Map<string, Timer>());\n const counter = useRef(0);\n\n const [container] = useState<HTMLDivElement | undefined>(() => {\n if (typeof document === 'undefined') return undefined;\n const element = document.createElement('div');\n element.dataset.pulpToasts = '';\n return element;\n });\n\n useEffect(() => {\n if (!container) return;\n document.body.append(container);\n return () => container.remove();\n }, [container]);\n\n const dismiss = useCallback((id: string) => {\n const timer = timers.current.get(id);\n if (timer?.handle !== undefined) clearTimeout(timer.handle);\n timers.current.delete(id);\n setItems((current) => current.filter((item) => item.id !== id));\n }, []);\n\n const dismissAll = useCallback(() => {\n for (const timer of timers.current.values()) if (timer.handle !== undefined) clearTimeout(timer.handle);\n timers.current.clear();\n setItems([]);\n }, []);\n\n const start = useCallback(\n (id: string, remaining: number) => {\n if (!Number.isFinite(remaining)) return;\n timers.current.set(id, { remaining, startedAt: Date.now(), handle: setTimeout(() => dismiss(id), remaining) });\n },\n [dismiss],\n );\n\n const toast = useCallback(\n (options: ToastOptions) => {\n counter.current += 1;\n const id = `toast-${counter.current}`;\n const ttl = options.duration ?? (options.tone === 'error' ? Infinity : duration);\n setItems((current) => {\n const next = [...current, { ...options, id }];\n const overflow = next.length - max;\n if (overflow > 0) {\n for (const old of next.slice(0, overflow)) {\n const timer = timers.current.get(old.id);\n if (timer?.handle !== undefined) clearTimeout(timer.handle);\n timers.current.delete(old.id);\n }\n return next.slice(overflow);\n }\n return next;\n });\n if (!paused) start(id, ttl);\n else timers.current.set(id, { remaining: ttl, startedAt: Date.now(), handle: undefined });\n return id;\n },\n [duration, max, paused, start],\n );\n\n // Pause: freeze every timer with its remaining time. Resume: restart them.\n useEffect(() => {\n const map = timers.current;\n if (paused) {\n for (const [id, timer] of map) {\n if (timer.handle === undefined) continue;\n clearTimeout(timer.handle);\n map.set(id, { ...timer, remaining: Math.max(0, timer.remaining - (Date.now() - timer.startedAt)), handle: undefined });\n }\n } else {\n for (const [id, timer] of map) {\n if (timer.handle !== undefined || !Number.isFinite(timer.remaining)) continue;\n map.set(id, { ...timer, startedAt: Date.now(), handle: setTimeout(() => dismiss(id), timer.remaining) });\n }\n }\n }, [paused, dismiss]);\n\n useEffect(() => {\n const map = timers.current;\n return () => {\n for (const timer of map.values()) if (timer.handle !== undefined) clearTimeout(timer.handle);\n };\n }, []);\n\n const value = useMemo(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);\n\n const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n if (event.key !== 'Escape') return;\n const item = (event.target as HTMLElement).closest<HTMLElement>('[data-toast-id]');\n if (item?.dataset.toastId) {\n event.preventDefault();\n dismiss(item.dataset.toastId);\n }\n };\n\n const region = (\n <section\n role=\"region\"\n aria-label={label}\n aria-live=\"polite\"\n className={classes(styles.region)}\n data-placement={placement}\n onMouseEnter={() => setPaused(true)}\n onMouseLeave={() => setPaused(false)}\n onFocus={() => setPaused(true)}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setPaused(false);\n }}\n onKeyDown={onKeyDown}\n >\n <ol className={styles.list}>\n {items.map((item) => (\n <li key={item.id} className={styles.item} data-toast-id={item.id} data-tone={item.tone ?? 'info'}>\n <Alert\n tone={item.tone}\n title={item.title}\n live=\"off\"\n className={styles.toast}\n onDismiss={() => dismiss(item.id)}\n action={\n item.action && (\n <Button\n size=\"sm\"\n variant=\"secondary\"\n onClick={() => {\n item.action?.onClick();\n dismiss(item.id);\n }}\n >\n {item.action.label}\n </Button>\n )\n }\n >\n {item.description}\n </Alert>\n </li>\n ))}\n </ol>\n </section>\n );\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {container ? createPortal(region, container) : null}\n </ToastContext.Provider>\n );\n}\n\nToastProvider.displayName = 'ToastProvider';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button } from './chunk-
|
|
1
|
+
import { Button } from './chunk-VSDEQHG4.js';
|
|
2
2
|
import { Icon } from './chunk-ASNTNTJW.js';
|
|
3
3
|
import { classes } from './chunk-MI4QUKQS.js';
|
|
4
4
|
import { isValidElement, cloneElement } from 'react';
|
|
@@ -34,5 +34,5 @@ function IconButton({
|
|
|
34
34
|
IconButton.displayName = "IconButton";
|
|
35
35
|
|
|
36
36
|
export { IconButton };
|
|
37
|
-
//# sourceMappingURL=chunk-
|
|
38
|
-
//# sourceMappingURL=chunk-
|
|
37
|
+
//# sourceMappingURL=chunk-DVM37MEK.js.map
|
|
38
|
+
//# sourceMappingURL=chunk-DVM37MEK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon-button/IconButton.module.css","../src/icon-button/IconButton.tsx"],"names":["iconButton"],"mappings":";;;;;;;AAAA,IAAA,kBAAA,GAAA;AAAA,EAGG,UAAA,EAAAA;AAAA,CAAA;ACwBI,SAAS,UAAA,CAAsD;AAAA,EACpE,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,mBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA;AAAA,MACA,YAAA,EAAY,KAAA;AAAA,MACZ,OAAO,KAAA,IAAS,KAAA;AAAA,MAChB,gBAAA,EAAe,EAAA;AAAA,MACf,SAAA,EAAW,OAAA,CAAQ,kBAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA,OAAA,IAAW,eAAe,QAAQ,CAAA,GAAI,aAAa,QAAA,EAAU,MAAA,EAAW,KAAK,CAAA,GAAI;AAAA;AAAA,GACpF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/icon-button/IconButton.module.css","../src/icon-button/IconButton.tsx"],"names":["iconButton"],"mappings":";;;;;;;AAAA,IAAA,kBAAA,GAAA;AAAA,EAGG,UAAA,EAAAA;AAAA,CAAA;ACwBI,SAAS,UAAA,CAAsD;AAAA,EACpE,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,mBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA;AAAA,MACA,YAAA,EAAY,KAAA;AAAA,MACZ,OAAO,KAAA,IAAS,KAAA;AAAA,MAChB,gBAAA,EAAe,EAAA;AAAA,MACf,SAAA,EAAW,OAAA,CAAQ,kBAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA,OAAA,IAAW,eAAe,QAAQ,CAAA,GAAI,aAAa,QAAA,EAAU,MAAA,EAAW,KAAK,CAAA,GAAI;AAAA;AAAA,GACpF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-DVM37MEK.js","sourcesContent":["/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n","import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps<E extends HTMLElement = HTMLButtonElement>\n extends Omit<ButtonProps<E>, 'children' | 'iconStart' | 'iconEnd'> {\n /** The accessible name. Required: an icon alone is not a name. Also used as the tooltip unless `title` is given. */\n label: string;\n /** The glyph, for instance from `@pearpages/pulp-icons`. */\n icon: ReactNode;\n /** With `asChild`: the element to render (a link, for instance). Its own children are replaced by the icon. */\n children?: ReactElement;\n}\n\n/**\n * A square Button that shows only an icon and therefore *requires* a name.\n * Everything else (variants, sizes, loading, asChild) is Button's; the\n * `--icon-button-size-*` tokens make it square.\n *\n * @status stable\n * @category Actions\n * @accessibility A Button with `aria-label` from the required `label`; `title` shows it as a tooltip. Everything else is Button's.\n * @do Write the label as the action (\"Close\", \"Add item\").\n * @dont Use the icon's name as the label.\n */\nexport function IconButton<E extends HTMLElement = HTMLButtonElement>({\n label,\n icon,\n title,\n className,\n asChild = false,\n children,\n ...rest\n}: IconButtonProps<E>) {\n const glyph = <Icon size=\"inherit\">{icon}</Icon>;\n return (\n <Button\n {...rest}\n asChild={asChild}\n aria-label={label}\n title={title ?? label}\n data-icon-only=\"\"\n className={classes(styles.iconButton, className)}\n >\n {asChild && isValidElement(children) ? cloneElement(children, undefined, glyph) : glyph}\n </Button>\n );\n}\n\nIconButton.displayName = 'IconButton';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button/Button.module.css","../src/button/Button.tsx"],"names":["button","label"],"mappings":";;;;;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,MAAA,EAAAA,eAAAA;AAAA,EAoFA,KAAA,EAAAC;AAAA,CAAA;AC7CH,IAAM,KAAA,GAAQ,CAAC,KAAA,KAAsB,KAAA,CAAM,cAAA,EAAe;AAE1D,IAAM,MAAM,OAAO,OAAA,KAAY,WAAA,IAAe,OAAA,CAAQ,KAAK,QAAA,KAAa,YAAA;AAGxE,SAAS,QAAQ,IAAA,EAA0B;AACzC,EAAA,OAAO,SAAS,OAAA,CAAQ,IAAI,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAC5C,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,SAAiB,KAAA,CAAM,IAAA,GAAO,MAAA,GAAS,CAAA;AAC5D,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,IAAA;AACtC,IAAA,IAAI,eAAyC,KAAK,CAAA,SAAU,OAAA,CAAQ,KAAA,CAAM,MAAM,QAAQ,CAAA;AACxF,IAAA,OAAO,KAAA;AAAA,EACT,CAAC,CAAA;AACH;AAiBO,SAAS,MAAA,CAAkD;AAAA,EAChE,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AAKjB,EAAA,MAAM,QAAQ,QAAA,IAAY,OAAA;AAC1B,EAAA,MAAM,cAAA,GAAiB,CAAC,OAAA,IAAW,QAAA;AAEnC,EAAA,IAAI,GAAA,IAAO,CAAC,OAAA,CAAQ,OAAA,GAAW,SAAkD,KAAA,EAAO,QAAA,GAAW,QAAQ,CAAA,EAAG;AAC5G,IAAA,IAAI,CAAC,IAAA,CAAK,YAAY,KAAK,CAAC,IAAA,CAAK,iBAAiB,CAAA,EAAG;AACnD,MAAA,OAAA,CAAQ,KAAK,uFAAuF,CAAA;AAAA,IACtG;AAAA,EACF;AAEA,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,IAAA;AAAA,IACH,GAAA;AAAA,IACA,SAAA,EAAW,OAAA,CAAQ,cAAA,CAAO,MAAA,EAAQ,SAAS,CAAA;AAAA,IAC3C,cAAA,EAAgB,OAAA;AAAA,IAChB,WAAA,EAAa,IAAA;AAAA,IACb,cAAA,EAAgB,UAAU,EAAA,GAAK,MAAA;AAAA,IAC/B,aAAa,OAAA,IAAW,MAAA;AAAA,IACxB,UAAU,cAAA,IAAkB,MAAA;AAAA,IAC5B,eAAA,EAAiB,KAAA,IAAS,CAAC,cAAA,GAAiB,IAAA,GAAO,MAAA;AAAA,IACnD,IAAA,EAAM,OAAA,GAAU,MAAA,GAAa,IAAA,IAAQ,QAAA;AAAA,IACrC,OAAA,EAAS,QAAQ,KAAA,GAAQ;AAAA,GAC3B;AAEA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,qBAChB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,OAAA,wBAAY,OAAA,EAAA,EAAQ,UAAA,EAAU,MAAC,IAAA,EAAK,SAAA,EAAU,MAAK,SAAA,EAAU,CAAA;AAAA,IAC7D,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,oBAC9C,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,CAAO,OAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACrC,OAAA,oBAAW,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC5C,CAAA;AAGF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,QAAA;AAGd,IAAA,OAAO,aAAA,CAAc,QAAA,EAAU,QAAA,EAAU,EAAE,GAAG,KAAA,EAAO,QAAA,EAAU,QAAA,CAAS,KAAA,CAAM,KAAA,EAAO,QAAQ,CAAA,EAAE,EAAG;AAAA;AAAA,MAEhG,OAAA,EAAS,KAAA,GAAQ,CAAC,SAAS,IAAI;AAAC,KACjC,CAAA;AAAA,EACH;AAEA,EAAA,2BAAQ,QAAA,EAAA,EAAQ,GAAI,KAAA,EAAoD,QAAA,EAAA,QAAA,CAAS,QAAQ,CAAA,EAAE,CAAA;AAC7F;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-VSDEQHG4.js","sourcesContent":["/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","import { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react';\nimport { Icon } from '../icon';\nimport { renderAsChild } from '../internal/asChild';\nimport { Spinner } from '../spinner';\nimport { classes } from '../internal/classes';\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Visual emphasis. One `primary` per view; `secondary` for the rest;\n * `ghost` for actions that sit inside other content.\n * @default 'primary'\n */\n variant?: ButtonVariant;\n /** @default 'md' */\n size?: ButtonSize;\n /**\n * Shows a spinner, sets `aria-busy` and `aria-disabled`, and blocks\n * activation. The element stays focusable so focus is not lost mid-action,\n * and the label stays in place so the button keeps its width.\n * @default false\n */\n loading?: boolean;\n /** Decorative element before the label. Hidden from assistive technology. */\n iconStart?: ReactNode;\n /** Decorative element after the label. Hidden from assistive technology. */\n iconEnd?: ReactNode;\n /**\n * Render the single child element instead of a `<button>`, merging the\n * button's props into it. Use it to style a router `<Link>` or an `<a>` as a\n * button. Disabled and loading states then use `aria-disabled`, and the\n * child's own `onClick` does not run while the control is inert.\n * @default false\n */\n asChild?: boolean;\n /**\n * The rendered element. With `asChild` that is the child's element, so pass\n * the type parameter: `<Button<HTMLAnchorElement> asChild ref={anchorRef}>`.\n */\n ref?: Ref<E>;\n children: ReactNode;\n}\n\nconst BLOCK = (event: MouseEvent) => event.preventDefault();\n\nconst DEV = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n/** True when some text exists anywhere in the children tree. */\nfunction hasText(node: ReactNode): boolean {\n return Children.toArray(node).some((child) => {\n if (typeof child === 'string') return child.trim().length > 0;\n if (typeof child === 'number') return true;\n if (isValidElement<{ children?: ReactNode }>(child)) return hasText(child.props.children);\n return false;\n });\n}\n\n/**\n * The one action component. Variants map to emphasis, not colour: one\n * `primary` per view, `secondary` for the rest, `ghost` inside other content.\n * Every value comes from `--button-*` tokens, so a brand restyles it without\n * touching the component. State is exposed as `data-variant`, `data-size` and\n * `data-loading` for styling, tests and agents alike.\n *\n * @status stable\n * @category Actions\n * @accessibility A native `button` (or the child element with `asChild`). `loading` sets `aria-disabled` and `aria-busy` and keeps focus; only `disabled` removes it from the tab order. Icon-only use warns in development: use IconButton, which requires a name.\n * @do One `primary` per view.\n * Use `asChild` for links that look like buttons, keeping the `a` semantics.\n * @dont Use `loading` on a button that is not the one that started the work.\n * Rely on colour to tell variants apart; the label carries the meaning.\n */\nexport function Button<E extends HTMLElement = HTMLButtonElement>({\n variant = 'primary',\n size = 'md',\n loading = false,\n iconStart,\n iconEnd,\n asChild = false,\n className,\n disabled = false,\n type,\n onClick,\n ref,\n children,\n ...rest\n}: ButtonProps<E>) {\n // Inert: must not activate. `disabled` on a real <button> also removes it\n // from the tab order, which is right for \"disabled\" and wrong for \"loading\":\n // the element the user just pressed must keep focus. So loading (and every\n // asChild state) uses aria-disabled and blocks activation in the handler.\n const inert = disabled || loading;\n const nativeDisabled = !asChild && disabled;\n\n if (DEV && !hasText(asChild ? (children as { props?: { children?: ReactNode } }).props?.children : children)) {\n if (!rest['aria-label'] && !rest['aria-labelledby']) {\n console.warn('Button: no text content and no aria-label. Icon-only buttons need an accessible name.');\n }\n }\n\n const props = {\n ...rest,\n ref,\n className: classes(styles.button, className),\n 'data-variant': variant,\n 'data-size': size,\n 'data-loading': loading ? '' : undefined,\n 'aria-busy': loading || undefined,\n disabled: nativeDisabled || undefined,\n 'aria-disabled': inert && !nativeDisabled ? true : undefined,\n type: asChild ? undefined : (type ?? 'button'),\n onClick: inert ? BLOCK : onClick,\n };\n\n const decorate = (label: ReactNode) => (\n <>\n {loading && <Spinner decorative size=\"inherit\" tone=\"inherit\" />}\n {iconStart && <Icon size=\"inherit\">{iconStart}</Icon>}\n <span className={styles.label}>{label}</span>\n {iconEnd && <Icon size=\"inherit\">{iconEnd}</Icon>}\n </>\n );\n\n if (asChild) {\n const child = children as { props?: { children?: ReactNode } };\n // The helper merges the forwarded ref with the child's; nothing reads it.\n // eslint-disable-next-line react-hooks/refs -- forwarded, not read\n return renderAsChild('Button', children, { ...props, children: decorate(child.props?.children) }, {\n // An inert control must not run the child's handler either.\n replace: inert ? ['onClick'] : [],\n });\n }\n\n return <button {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}>{decorate(children)}</button>;\n}\n\nButton.displayName = 'Button';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconButton } from './chunk-
|
|
1
|
+
import { IconButton } from './chunk-DVM37MEK.js';
|
|
2
2
|
import { Icon } from './chunk-ASNTNTJW.js';
|
|
3
3
|
import { classes } from './chunk-MI4QUKQS.js';
|
|
4
4
|
import { Close, Warning, Check, Info } from '@pearpages/pulp-icons';
|
|
@@ -49,5 +49,5 @@ function Alert({
|
|
|
49
49
|
Alert.displayName = "Alert";
|
|
50
50
|
|
|
51
51
|
export { Alert };
|
|
52
|
-
//# sourceMappingURL=chunk-
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
52
|
+
//# sourceMappingURL=chunk-XXC34COT.js.map
|
|
53
|
+
//# sourceMappingURL=chunk-XXC34COT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/alert/Alert.module.css","../src/alert/Alert.tsx"],"names":["alert","icon","body","title","content","action","dismiss"],"mappings":";;;;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,aAAAA;AAAA,EAyCA,IAAA,EAAAC,YAAAA;AAAA,EAKA,IAAA,EAAAC,YAAAA;AAAA,EAQA,KAAA,EAAAC,aAAAA;AAAA,EAMA,OAAA,EAAAC,eAAAA;AAAA,EAIA,MAAA,EAAAC,cAAAA;AAAA,EAOA,OAAA,EAAAC;AAAA,CAAA;ACzCH,IAAM,YAAA,GAA6C;AAAA,EACjD,IAAA,sBAAO,IAAA,EAAA,EAAK,CAAA;AAAA,EACZ,OAAA,sBAAU,KAAA,EAAA,EAAM,CAAA;AAAA,EAChB,OAAA,sBAAU,OAAA,EAAA,EAAQ,CAAA;AAAA,EAClB,KAAA,sBAAQ,OAAA,EAAA,EAAQ;AAClB,CAAA;AAeO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,IAAA,GAAO,IAAA,KAAS,IAAA,KAAS,OAAA,GAAU,WAAA,GAAc,QAAA,CAAA;AACvD,EAAA,MAAM,OAAO,IAAA,KAAS,KAAA,GAAQ,MAAA,GAAY,IAAA,KAAS,cAAc,OAAA,GAAU,QAAA;AAC3E,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAY,YAAA,CAAa,IAAI,CAAA,GAAI,IAAA;AAExD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,CAAA,EAAG,aAAW,IAAA,EAC1F,QAAA,EAAA;AAAA,IAAA,KAAA,wBACE,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,SAAA,EAAW,aAAA,CAAO,MAC/B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,IAAA,EACpB,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,aAAA,CAAO,OAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC5C,4BAAY,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,SAAU,QAAA,EAAS,CAAA;AAAA,MACtD,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,QAAS,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,6BACC,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,MAAK,IAAA,EAAK,KAAA,EAAO,YAAA,EAAc,IAAA,sBAAO,KAAA,EAAA,EAAM,CAAA,EAAI,SAAS,SAAA,EAAW,SAAA,EAAW,cAAO,OAAA,EAAS;AAAA,GAAA,EAE/H,CAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/alert/Alert.module.css","../src/alert/Alert.tsx"],"names":["alert","icon","body","title","content","action","dismiss"],"mappings":";;;;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,aAAAA;AAAA,EAyCA,IAAA,EAAAC,YAAAA;AAAA,EAKA,IAAA,EAAAC,YAAAA;AAAA,EAQA,KAAA,EAAAC,aAAAA;AAAA,EAMA,OAAA,EAAAC,eAAAA;AAAA,EAIA,MAAA,EAAAC,cAAAA;AAAA,EAOA,OAAA,EAAAC;AAAA,CAAA;ACzCH,IAAM,YAAA,GAA6C;AAAA,EACjD,IAAA,sBAAO,IAAA,EAAA,EAAK,CAAA;AAAA,EACZ,OAAA,sBAAU,KAAA,EAAA,EAAM,CAAA;AAAA,EAChB,OAAA,sBAAU,OAAA,EAAA,EAAQ,CAAA;AAAA,EAClB,KAAA,sBAAQ,OAAA,EAAA,EAAQ;AAClB,CAAA;AAeO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,IAAA,GAAO,IAAA,KAAS,IAAA,KAAS,OAAA,GAAU,WAAA,GAAc,QAAA,CAAA;AACvD,EAAA,MAAM,OAAO,IAAA,KAAS,KAAA,GAAQ,MAAA,GAAY,IAAA,KAAS,cAAc,OAAA,GAAU,QAAA;AAC3E,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAY,YAAA,CAAa,IAAI,CAAA,GAAI,IAAA;AAExD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,CAAA,EAAG,aAAW,IAAA,EAC1F,QAAA,EAAA;AAAA,IAAA,KAAA,wBACE,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,SAAA,EAAW,aAAA,CAAO,MAC/B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,IAAA,EACpB,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,aAAA,CAAO,OAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC5C,4BAAY,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,SAAU,QAAA,EAAS,CAAA;AAAA,MACtD,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,QAAS,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,6BACC,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,MAAK,IAAA,EAAK,KAAA,EAAO,YAAA,EAAc,IAAA,sBAAO,KAAA,EAAA,EAAM,CAAA,EAAI,SAAS,SAAA,EAAW,SAAA,EAAW,cAAO,OAAA,EAAS;AAAA,GAAA,EAE/H,CAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-XXC34COT.js","sourcesContent":["/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n .alert {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n\n display: flex;\n align-items: flex-start;\n gap: var(--alert-gap);\n padding: var(--alert-padding);\n border: var(--alert-border-width) solid var(--_accent);\n border-inline-start-width: var(--alert-accent-width);\n border-radius: var(--alert-radius);\n background-color: var(--_bg);\n color: var(--alert-fg);\n font-size: var(--alert-font-size);\n\n &[data-tone=\"info\"] {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n }\n\n &[data-tone=\"success\"] {\n --_bg: var(--alert-success-bg);\n --_accent: var(--alert-success-accent);\n --_title: var(--alert-success-title);\n }\n\n &[data-tone=\"warning\"] {\n --_bg: var(--alert-warning-bg);\n --_accent: var(--alert-warning-accent);\n --_title: var(--alert-warning-title);\n }\n\n &[data-tone=\"error\"] {\n --_bg: var(--alert-error-bg);\n --_accent: var(--alert-error-accent);\n --_title: var(--alert-error-title);\n }\n }\n\n .icon {\n flex: none;\n color: var(--_accent);\n }\n\n .body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n min-inline-size: 0;\n }\n\n .title {\n margin: 0;\n color: var(--_title);\n font-weight: var(--alert-title-font-weight);\n }\n\n .content {\n overflow-wrap: anywhere;\n }\n\n .action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-block-start: var(--space-1);\n }\n\n .dismiss {\n flex: none;\n margin-block: calc(-1 * var(--space-1));\n margin-inline-end: calc(-1 * var(--space-2));\n }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Check, Close, Info, Warning } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { classes } from '../internal/classes';\nimport styles from './Alert.module.css';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'error';\nexport type AlertLive = 'polite' | 'assertive' | 'off';\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** @default 'info' */\n tone?: AlertTone;\n title?: ReactNode;\n /** Replaces the tone's default glyph; `null` shows none. */\n icon?: ReactNode | null;\n /** Buttons or links placed under the body. */\n action?: ReactNode;\n /** Renders a dismiss button that calls this. */\n onDismiss?: () => void;\n /** @default 'Dismiss' */\n dismissLabel?: string;\n /**\n * How assistive technology announces it: `assertive` (`role=\"alert\"`),\n * `polite` (`role=\"status\"`) or `off` (no live role, for content present at\n * page load or inside another live region). Defaults to assertive for\n * `error`, polite otherwise.\n */\n live?: AlertLive;\n ref?: Ref<HTMLDivElement>;\n children?: ReactNode;\n}\n\nconst DEFAULT_ICON: Record<AlertTone, ReactNode> = {\n info: <Info />,\n success: <Check />,\n warning: <Warning />,\n error: <Warning />,\n};\n\n/**\n * An inline message with a tone. Tint, accent and title colour come from\n * the status tokens; the body keeps the default text colour so long\n * messages stay readable. Toast renders one Alert per notification.\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"alert\"` for `tone=\"error\"` (assertive), `role=\"status\"` otherwise (polite); `live=\"off\"` opts out. The glyph is decorative; the tone is carried by the title and text, never by colour alone.\n * @do Give it a `title` when the body is more than one sentence.\n * Use `onDismiss` for messages the user can act on and clear.\n * @dont Announce errors through both an Alert and a Toast.\n * Use it as a page-level banner for marketing copy.\n */\nexport function Alert({\n tone = 'info',\n title,\n icon,\n action,\n onDismiss,\n dismissLabel = 'Dismiss',\n live,\n className,\n ref,\n children,\n ...rest\n}: AlertProps) {\n const mode = live ?? (tone === 'error' ? 'assertive' : 'polite');\n const role = mode === 'off' ? undefined : mode === 'assertive' ? 'alert' : 'status';\n const glyph = icon === undefined ? DEFAULT_ICON[tone] : icon;\n\n return (\n <div {...rest} ref={ref} role={role} className={classes(styles.alert, className)} data-tone={tone}>\n {glyph && (\n <Icon size=\"md\" className={styles.icon}>\n {glyph}\n </Icon>\n )}\n <div className={styles.body}>\n {title && <p className={styles.title}>{title}</p>}\n {children && <div className={styles.content}>{children}</div>}\n {action && <div className={styles.action}>{action}</div>}\n </div>\n {onDismiss && (\n <IconButton variant=\"ghost\" size=\"sm\" label={dismissLabel} icon={<Close />} onClick={onDismiss} className={styles.dismiss} />\n )}\n </div>\n );\n}\n\nAlert.displayName = 'Alert';\n"]}
|
package/dist/icon-button.css
CHANGED
package/dist/icon-button.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton"]}
|
package/dist/icon-button.js
CHANGED
package/dist/index.css
CHANGED