@pearpages/pulp-react 0.2.1 → 0.2.2
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/README.md +3 -0
- package/dist/accordion.css +2 -0
- package/dist/accordion.css.map +1 -1
- package/dist/accordion.js +2 -2
- package/dist/alert.css +6 -0
- package/dist/alert.css.map +1 -1
- package/dist/alert.js +6 -6
- package/dist/badge.css +2 -0
- package/dist/badge.css.map +1 -1
- package/dist/badge.js +2 -2
- package/dist/button.css +4 -0
- package/dist/button.css.map +1 -1
- package/dist/button.js +4 -4
- package/dist/calendar.css +2 -0
- package/dist/calendar.css.map +1 -1
- package/dist/calendar.js +3 -3
- package/dist/card.css +1 -0
- package/dist/card.css.map +1 -1
- package/dist/card.js +1 -1
- package/dist/checkbox.css +2 -0
- package/dist/checkbox.css.map +1 -1
- package/dist/checkbox.js +3 -3
- package/dist/{chunk-7DS4I7OJ.js → chunk-2E2ESMS2.js} +2 -2
- package/dist/chunk-2E2ESMS2.js.map +1 -0
- package/dist/{chunk-FH54XQ35.js → chunk-2IYYES7V.js} +2 -2
- package/dist/chunk-2IYYES7V.js.map +1 -0
- package/dist/{chunk-GTTXRDXV.js → chunk-2NSQPN7S.js} +3 -3
- package/dist/chunk-2NSQPN7S.js.map +1 -0
- package/dist/{chunk-IDNGNQNV.js → chunk-55QUKGK2.js} +2 -2
- package/dist/chunk-55QUKGK2.js.map +1 -0
- package/dist/{chunk-TGMDOQCL.js → chunk-5PYLJQJX.js} +3 -3
- package/dist/chunk-5PYLJQJX.js.map +1 -0
- package/dist/{chunk-VSDEQHG4.js → chunk-5TTYVQ6Q.js} +4 -4
- package/dist/chunk-5TTYVQ6Q.js.map +1 -0
- package/dist/{chunk-BBV4L5WO.js → chunk-6BIEW4WJ.js} +3 -3
- package/dist/{chunk-BBV4L5WO.js.map → chunk-6BIEW4WJ.js.map} +1 -1
- package/dist/{chunk-6I26MMQF.js → chunk-737GQSOB.js} +3 -3
- package/dist/chunk-737GQSOB.js.map +1 -0
- package/dist/{chunk-WDWTQKIJ.js → chunk-BAPNIZDV.js} +5 -5
- package/dist/chunk-BAPNIZDV.js.map +1 -0
- package/dist/{chunk-ASOQ2MVR.js → chunk-BR2EH4TK.js} +2 -2
- package/dist/chunk-BR2EH4TK.js.map +1 -0
- package/dist/{chunk-YUHS5S5Y.js → chunk-DGIXNUNI.js} +2 -2
- package/dist/chunk-DGIXNUNI.js.map +1 -0
- package/dist/{chunk-OUFAFINB.js → chunk-DVZ46GQN.js} +3 -3
- package/dist/chunk-DVZ46GQN.js.map +1 -0
- package/dist/{chunk-T76YSNTZ.js → chunk-EDTA65L5.js} +3 -3
- package/dist/chunk-EDTA65L5.js.map +1 -0
- package/dist/{chunk-3GWESUGD.js → chunk-F3S5BHX2.js} +2 -2
- package/dist/chunk-F3S5BHX2.js.map +1 -0
- package/dist/{chunk-Z4PN6B2C.js → chunk-IB5UUE3S.js} +2 -2
- package/dist/chunk-IB5UUE3S.js.map +1 -0
- package/dist/{chunk-MXWXJZFS.js → chunk-IFIQLIA3.js} +3 -3
- package/dist/chunk-IFIQLIA3.js.map +1 -0
- package/dist/{chunk-4HRNRTXI.js → chunk-IRNTXAA7.js} +3 -3
- package/dist/{chunk-4HRNRTXI.js.map → chunk-IRNTXAA7.js.map} +1 -1
- package/dist/{chunk-OXYP34CG.js → chunk-JOGIN4SS.js} +3 -3
- package/dist/chunk-JOGIN4SS.js.map +1 -0
- package/dist/{chunk-MRQWUCBA.js → chunk-LA3YBXCR.js} +2 -2
- package/dist/chunk-LA3YBXCR.js.map +1 -0
- package/dist/{chunk-2ZP4ZBI5.js → chunk-LKWZZIRZ.js} +2 -2
- package/dist/chunk-LKWZZIRZ.js.map +1 -0
- package/dist/{chunk-2PXTVZ7H.js → chunk-M5VL22MY.js} +2 -2
- package/dist/chunk-M5VL22MY.js.map +1 -0
- package/dist/{chunk-DVM37MEK.js → chunk-MF66ICX6.js} +4 -4
- package/dist/chunk-MF66ICX6.js.map +1 -0
- package/dist/{chunk-XXC34COT.js → chunk-N4C3NQIN.js} +4 -4
- package/dist/chunk-N4C3NQIN.js.map +1 -0
- package/dist/{chunk-XDVS7HX7.js → chunk-N6E2E2OY.js} +3 -3
- package/dist/chunk-N6E2E2OY.js.map +1 -0
- package/dist/{chunk-GUZMLYST.js → chunk-NOUUOH4R.js} +6 -6
- package/dist/chunk-NOUUOH4R.js.map +1 -0
- package/dist/{chunk-ASNTNTJW.js → chunk-O5LII5XP.js} +2 -2
- package/dist/chunk-O5LII5XP.js.map +1 -0
- package/dist/{chunk-N7L66GMG.js → chunk-OFFFRIJG.js} +2 -2
- package/dist/chunk-OFFFRIJG.js.map +1 -0
- package/dist/{chunk-OGIQRHNF.js → chunk-OFKSU77Y.js} +3 -3
- package/dist/chunk-OFKSU77Y.js.map +1 -0
- package/dist/{chunk-XUROYTJ7.js → chunk-TJJBCS3N.js} +3 -3
- package/dist/chunk-TJJBCS3N.js.map +1 -0
- package/dist/{chunk-4DER5LHM.js → chunk-U3N3G2UA.js} +4 -4
- package/dist/chunk-U3N3G2UA.js.map +1 -0
- package/dist/{chunk-AWQHULJC.js → chunk-VIGD7KHC.js} +2 -2
- package/dist/chunk-VIGD7KHC.js.map +1 -0
- package/dist/{chunk-2KG43BOT.js → chunk-VQN5DQP6.js} +4 -4
- package/dist/chunk-VQN5DQP6.js.map +1 -0
- package/dist/{chunk-O6OBFL3Q.js → chunk-W2UUZ2DC.js} +3 -3
- package/dist/chunk-W2UUZ2DC.js.map +1 -0
- package/dist/{chunk-5SBKZS56.js → chunk-W6HEBHA7.js} +3 -3
- package/dist/{chunk-5SBKZS56.js.map → chunk-W6HEBHA7.js.map} +1 -1
- package/dist/{chunk-TVI5AXLE.js → chunk-WJDDKNE7.js} +3 -3
- package/dist/{chunk-TVI5AXLE.js.map → chunk-WJDDKNE7.js.map} +1 -1
- package/dist/{chunk-7RQQASKS.js → chunk-XGWFTFGR.js} +3 -3
- package/dist/chunk-XGWFTFGR.js.map +1 -0
- package/dist/{chunk-Y4TZA77G.js → chunk-XWPXW46D.js} +2 -2
- package/dist/chunk-XWPXW46D.js.map +1 -0
- package/dist/{chunk-UX42PQLT.js → chunk-Y4YVAHD2.js} +5 -5
- package/dist/chunk-Y4YVAHD2.js.map +1 -0
- package/dist/{chunk-P5C2U5ZF.js → chunk-YBECKOVP.js} +3 -3
- package/dist/chunk-YBECKOVP.js.map +1 -0
- package/dist/{chunk-75GTNRBH.js → chunk-YK2OOM56.js} +3 -3
- package/dist/chunk-YK2OOM56.js.map +1 -0
- package/dist/{chunk-DWE374JX.js → chunk-Z6SS4G4V.js} +3 -3
- package/dist/chunk-Z6SS4G4V.js.map +1 -0
- package/dist/{chunk-I4KC4V6A.js → chunk-ZL5MMRLG.js} +3 -3
- package/dist/chunk-ZL5MMRLG.js.map +1 -0
- package/dist/combobox.css +6 -0
- package/dist/combobox.css.map +1 -1
- package/dist/combobox.js +7 -7
- package/dist/date-picker.css +4 -0
- package/dist/date-picker.css.map +1 -1
- package/dist/date-picker.js +5 -5
- package/dist/dialog.css +1 -0
- package/dist/dialog.css.map +1 -1
- package/dist/dialog.js +1 -1
- package/dist/field.css +1 -0
- package/dist/field.css.map +1 -1
- package/dist/field.js +1 -1
- package/dist/heading.css +1 -0
- package/dist/heading.css.map +1 -1
- package/dist/heading.js +1 -1
- package/dist/icon-button.css +5 -0
- package/dist/icon-button.css.map +1 -1
- package/dist/icon-button.js +5 -5
- package/dist/icon.css +1 -0
- package/dist/icon.css.map +1 -1
- package/dist/icon.js +1 -1
- package/dist/index.css +38 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +42 -42
- package/dist/inline.css +1 -0
- package/dist/inline.css.map +1 -1
- package/dist/inline.js +1 -1
- package/dist/listbox.css +2 -0
- package/dist/listbox.css.map +1 -1
- package/dist/listbox.js +3 -3
- package/dist/menu.css +2 -0
- package/dist/menu.css.map +1 -1
- package/dist/menu.js +2 -2
- package/dist/pagination.css +6 -0
- package/dist/pagination.css.map +1 -1
- package/dist/pagination.js +6 -6
- package/dist/picker.css +4 -0
- package/dist/picker.css.map +1 -1
- package/dist/picker.js +5 -5
- package/dist/popover.css +1 -0
- package/dist/popover.css.map +1 -1
- package/dist/popover.js +1 -1
- package/dist/progress.css +2 -0
- package/dist/progress.css.map +1 -1
- package/dist/progress.js +2 -2
- package/dist/radio.css +2 -0
- package/dist/radio.css.map +1 -1
- package/dist/radio.js +2 -2
- package/dist/select.css +2 -0
- package/dist/select.css.map +1 -1
- package/dist/select.js +2 -2
- package/dist/sheet.css +2 -0
- package/dist/sheet.css.map +1 -1
- package/dist/sheet.js +2 -2
- package/dist/skeleton.css +1 -0
- package/dist/skeleton.css.map +1 -1
- package/dist/skeleton.js +1 -1
- package/dist/slider.css +2 -0
- package/dist/slider.css.map +1 -1
- package/dist/slider.js +2 -2
- package/dist/spinner.css +2 -0
- package/dist/spinner.css.map +1 -1
- package/dist/spinner.js +2 -2
- package/dist/stack.css +1 -0
- package/dist/stack.css.map +1 -1
- package/dist/stack.js +1 -1
- package/dist/switch.css +2 -0
- package/dist/switch.css.map +1 -1
- package/dist/switch.js +3 -3
- package/dist/table.css +2 -0
- package/dist/table.css.map +1 -1
- package/dist/table.js +2 -2
- package/dist/tabs.css +1 -0
- package/dist/tabs.css.map +1 -1
- package/dist/tabs.js +1 -1
- package/dist/text-field.css +2 -0
- package/dist/text-field.css.map +1 -1
- package/dist/text-field.js +2 -2
- package/dist/text.css +1 -0
- package/dist/text.css.map +1 -1
- package/dist/text.js +1 -1
- package/dist/textarea.css +2 -0
- package/dist/textarea.css.map +1 -1
- package/dist/textarea.js +2 -2
- package/dist/toast.css +7 -0
- package/dist/toast.css.map +1 -1
- package/dist/toast.js +7 -7
- package/dist/tooltip.css +1 -0
- package/dist/tooltip.css.map +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/visually-hidden.css +1 -0
- package/dist/visually-hidden.css.map +1 -1
- package/dist/visually-hidden.js +1 -1
- package/package.json +3 -3
- package/dist/chunk-2KG43BOT.js.map +0 -1
- package/dist/chunk-2PXTVZ7H.js.map +0 -1
- package/dist/chunk-2ZP4ZBI5.js.map +0 -1
- package/dist/chunk-3GWESUGD.js.map +0 -1
- package/dist/chunk-4DER5LHM.js.map +0 -1
- package/dist/chunk-6I26MMQF.js.map +0 -1
- package/dist/chunk-75GTNRBH.js.map +0 -1
- package/dist/chunk-7DS4I7OJ.js.map +0 -1
- package/dist/chunk-7RQQASKS.js.map +0 -1
- package/dist/chunk-ASNTNTJW.js.map +0 -1
- package/dist/chunk-ASOQ2MVR.js.map +0 -1
- package/dist/chunk-AWQHULJC.js.map +0 -1
- package/dist/chunk-DVM37MEK.js.map +0 -1
- package/dist/chunk-DWE374JX.js.map +0 -1
- package/dist/chunk-FH54XQ35.js.map +0 -1
- package/dist/chunk-GTTXRDXV.js.map +0 -1
- package/dist/chunk-GUZMLYST.js.map +0 -1
- package/dist/chunk-I4KC4V6A.js.map +0 -1
- package/dist/chunk-IDNGNQNV.js.map +0 -1
- package/dist/chunk-MRQWUCBA.js.map +0 -1
- package/dist/chunk-MXWXJZFS.js.map +0 -1
- package/dist/chunk-N7L66GMG.js.map +0 -1
- package/dist/chunk-O6OBFL3Q.js.map +0 -1
- package/dist/chunk-OGIQRHNF.js.map +0 -1
- package/dist/chunk-OUFAFINB.js.map +0 -1
- package/dist/chunk-OXYP34CG.js.map +0 -1
- package/dist/chunk-P5C2U5ZF.js.map +0 -1
- package/dist/chunk-T76YSNTZ.js.map +0 -1
- package/dist/chunk-TGMDOQCL.js.map +0 -1
- package/dist/chunk-UX42PQLT.js.map +0 -1
- package/dist/chunk-VSDEQHG4.js.map +0 -1
- package/dist/chunk-WDWTQKIJ.js.map +0 -1
- package/dist/chunk-XDVS7HX7.js.map +0 -1
- package/dist/chunk-XUROYTJ7.js.map +0 -1
- package/dist/chunk-XXC34COT.js.map +0 -1
- package/dist/chunk-Y4TZA77G.js.map +0 -1
- package/dist/chunk-YUHS5S5Y.js.map +0 -1
- package/dist/chunk-Z4PN6B2C.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/text-field/TextField.module.css","../src/text-field/TextField.tsx"],"names":["field","input"],"mappings":";;;;;AAAA,IAAA,iBAAA,GAAA;AAAA,EAOG,KAAA,EAAAA,iBAAAA;AAAA,EAIA,KAAA,EAAAC;AAAA,CAAA;AC8BI,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AAEtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,iBAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACX,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACpB,GAAA,CAAC,KAAA,CAAM,OAAA,EAAN,EAAc,oBAAkB,WAAA,EAC/B,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAO,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,iBAAA,CAAO,KAAA,EAAO,UAAoB,CAAA,EAC1E,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-MXWXJZFS.js","sourcesContent":["/*\n * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer components {\n .field {\n font-family: var(--text-field-font-family);\n }\n\n .input {\n min-block-size: var(--text-field-height-md);\n padding-block: 0;\n padding-inline: var(--text-field-padding-inline);\n border: 1px solid var(--text-field-border-default);\n border-radius: var(--text-field-radius);\n background-color: var(--text-field-bg);\n color: var(--text-field-fg);\n font-size: var(--text-field-font-size-md);\n transition:\n border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n &::placeholder {\n color: var(--text-field-placeholder);\n }\n\n &:focus-visible {\n border-color: var(--text-field-border-focus);\n outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n outline-offset: var(--text-field-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:read-only:not(:disabled) {\n background-color: var(--color-surface-sunken);\n }\n\n &:hover:not(:disabled, :focus-visible) {\n border-color: var(--text-field-border-hover);\n }\n }\n\n .field[data-size=\"sm\"] .input {\n min-block-size: var(--text-field-height-sm);\n font-size: var(--text-field-font-size-sm);\n }\n\n .field[data-size=\"lg\"] .input {\n min-block-size: var(--text-field-height-lg);\n font-size: var(--text-field-font-size-lg);\n }\n\n .field[data-invalid] .input {\n border-color: var(--text-field-border-invalid);\n }\n}\n","import type { InputHTMLAttributes, ReactNode, Ref } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './TextField.module.css';\n\nexport type TextFieldSize = 'sm' | 'md' | 'lg';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /** Visible label. Always rendered: a placeholder is not a label. */\n label: ReactNode;\n /** Help text under the field, exposed as the input's accessible description. */\n description?: ReactNode;\n /**\n * Error message. Its presence marks the input invalid (`aria-invalid`,\n * `data-invalid`) and the message is announced as an alert.\n */\n error?: ReactNode;\n /** @default 'md' */\n size?: TextFieldSize;\n /** The `<input>` element. */\n ref?: Ref<HTMLInputElement>;\n /** Applied to the wrapper, not the input. */\n className?: string;\n}\n\n/**\n * A single-line text input on top of `Field`: label, description and error\n * wired for assistive technology. Controlled and uncontrolled behave exactly\n * like the native input (`value`/`onChange` or `defaultValue`). Every value\n * comes from `--text-field-*` and `--field-*` tokens; state is exposed as\n * `data-size`, `data-invalid`, `data-disabled` and `data-readonly` on the\n * wrapper.\n *\n * @status stable\n * @category Forms\n * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies.\n * @do Always pass `label`; use a visible one.\n * Prefer `error` text that says how to fix the value.\n * @dont Use `placeholder` as the label.\n * Use it for multi-line text; use Textarea.\n */\nexport function TextField({\n label,\n description,\n error,\n size = 'md',\n required,\n disabled,\n readOnly,\n id,\n className,\n ref,\n 'aria-describedby': describedBy,\n ...rest\n}: TextFieldProps) {\n const invalid = error !== undefined && error !== null && error !== false && error !== '';\n\n return (\n <Field\n id={id}\n invalid={invalid}\n disabled={Boolean(disabled)}\n required={Boolean(required)}\n className={classes(styles.field, className)}\n data-size={size}\n data-readonly={readOnly ? '' : undefined}\n >\n <Field.Label>{label}</Field.Label>\n <Field.Control aria-describedby={describedBy}>\n <input {...rest} ref={ref} className={styles.input} readOnly={readOnly} />\n </Field.Control>\n {description && <Field.Description>{description}</Field.Description>}\n {invalid && <Field.Error>{error}</Field.Error>}\n </Field>\n );\n}\n\nTextField.displayName = 'TextField';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/popover/Popover.module.css","../src/popover/Popover.tsx"],"names":["content","title"],"mappings":"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","file":"chunk-N7L66GMG.js","sourcesContent":["/* Every value is a token (--popover-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n .content {\n --_gap: var(--popover-gap);\n\n position: fixed;\n z-index: var(--popover-layer);\n inset-block-start: var(--_y);\n inset-inline-start: var(--_x);\n display: flex;\n flex-direction: column;\n gap: var(--popover-gap);\n inline-size: var(--popover-width);\n max-inline-size: calc(100vw - 2 * var(--space-4));\n padding: var(--popover-padding);\n border: var(--size-hairline) solid var(--popover-border);\n border-radius: var(--popover-radius);\n background-color: var(--popover-bg);\n color: var(--popover-fg);\n font-family: var(--font-family-body);\n box-shadow: var(--popover-shadow);\n animation: fade var(--popover-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--popover-focus-ring-width) solid var(--popover-focus-ring);\n outline-offset: var(--popover-focus-ring-offset);\n }\n }\n\n .title {\n margin: 0;\n font-family: var(--font-family-display);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n line-height: var(--font-line-height-tight);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .content {\n animation: none;\n }\n }\n}\n","import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport { useDismiss } from '../internal/useDismiss';\nimport styles from './Popover.module.css';\n\nexport type PopoverPlacement = FloatingPlacement;\n\ninterface PopoverContextValue {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n titleId: string;\n placement: PopoverPlacement;\n floating: ReturnType<typeof useFloatingPosition>;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\nfunction usePopover(part: string): PopoverContextValue {\n const context = useContext(PopoverContext);\n if (!context) throw new Error(`${part} must be rendered inside <Popover>`);\n return context;\n}\n\nexport interface PopoverProps {\n /** Controlled open state. */\n open?: boolean;\n /** @default false */\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Preferred side; flips when there is no room. @default 'bottom-start' */\n placement?: PopoverPlacement;\n children: ReactNode;\n}\n\n/**\n * A non-modal layer anchored to its trigger: a small form, a filter, a\n * detail panel. The page stays interactive; Escape, a click outside or\n * `Popover.Close` dismiss it and focus returns to the trigger. Compose with\n * `Popover.Trigger`, `Popover.Content` and `Popover.Close`. For anything that\n * must block the page, use Dialog.\n *\n * @status stable\n * @category Overlays\n * @accessibility A non-modal `role=\"dialog\"` named by `title` (or `aria-label`); the trigger has `aria-haspopup=\"dialog\"` and `aria-expanded`. Focus moves to the first focusable element on open and back to the trigger on close; Escape and a click outside dismiss it.\n * @do Give it a `title` or `aria-label`.\n * Use `Popover.Close` inside forms so a keyboard user has a clear exit.\n * @dont Put a long form or a destructive confirmation in it; use Dialog.\n * Open it on hover; that is Tooltip.\n */\nexport function Popover({ open, defaultOpen = false, onOpenChange, placement = 'bottom-start', children }: PopoverProps) {\n const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n const controlled = open !== undefined;\n const isOpen = controlled ? open : uncontrolled;\n const setOpen = useCallback(\n (next: boolean) => {\n if (!controlled) setUncontrolled(next);\n onOpenChange?.(next);\n },\n [controlled, onOpenChange],\n );\n const id = useId();\n const floating = useFloatingPosition({ open: isOpen, placement });\n\n return (\n <PopoverContext.Provider value={{ open: isOpen, setOpen, contentId: `${id}-content`, titleId: `${id}-title`, placement, floating }}>\n {children}\n </PopoverContext.Provider>\n );\n}\n\ninterface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Render the child element as the trigger instead of a plain button. @default false */\n asChild?: boolean;\n ref?: Ref<HTMLButtonElement>;\n children: ReactNode;\n}\n\nfunction PopoverTrigger({ asChild = false, onClick, ref, children, ...rest }: PopoverTriggerProps) {\n const popover = usePopover('Popover.Trigger');\n const props = {\n ...rest,\n ref: popover.floating.refs.setReference,\n 'aria-haspopup': 'dialog' as const,\n 'aria-expanded': popover.open,\n 'aria-controls': popover.open ? popover.contentId : undefined,\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (!event.defaultPrevented) popover.setOpen(!popover.open);\n },\n };\n if (asChild) {\n // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n return renderAsChild('Popover.Trigger', children, { ...props, ref: mergeRefs(ref, popover.floating.refs.setReference) });\n }\n return (\n <button type=\"button\" {...props} ref={mergeRefs(ref, popover.floating.refs.setReference)}>\n {children}\n </button>\n );\n}\n\nfunction mergeRefs<T>(a: Ref<T> | undefined, b: (node: T | null) => void) {\n return (node: T | null) => {\n b(node);\n if (typeof a === 'function') a(node);\n else if (a) a.current = node;\n };\n}\n\ninterface PopoverContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Rendered as the dialog's heading and used as its accessible name. Otherwise pass `aria-label`. */\n title?: ReactNode;\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nfunction PopoverContent({ title, className, ref, children, ...rest }: PopoverContentProps) {\n const popover = usePopover('Popover.Content');\n const { refs, positionStyle, placement } = popover.floating;\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n useDismiss({\n open: popover.open,\n onDismiss: () => popover.setOpen(false),\n inside: () => [refs.reference.current as Element | null, refs.floating.current],\n });\n\n // Move focus in on open; give it back to the trigger on close.\n useEffect(() => {\n if (popover.open) {\n const content = contentRef.current;\n if (!content) return;\n const first = content.querySelector<HTMLElement>('input, select, textarea, button, a[href], [tabindex]:not([tabindex=\"-1\"])');\n (first ?? content).focus();\n return () => {\n const reference = refs.reference.current as HTMLElement | null;\n if (content.contains(document.activeElement) || document.activeElement === document.body) reference?.focus();\n };\n }\n }, [popover.open, refs.reference]);\n\n if (!popover.open) return null;\n return createPortal(\n <div\n {...rest}\n ref={mergeRefs(ref, (node) => {\n contentRef.current = node;\n refs.setFloating(node);\n })}\n id={popover.contentId}\n role=\"dialog\"\n aria-labelledby={title ? popover.titleId : undefined}\n tabIndex={-1}\n className={classes(styles.content, className)}\n data-placement={placement}\n // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n style={positionStyle}\n >\n {title && (\n <h2 id={popover.titleId} className={styles.title}>\n {title}\n </h2>\n )}\n {children}\n </div>,\n document.body,\n );\n}\n\ninterface PopoverCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n children: ReactNode;\n}\n\nfunction PopoverClose({ asChild = false, onClick, children, ...rest }: PopoverCloseProps) {\n const popover = usePopover('Popover.Close');\n const props = {\n ...rest,\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (!event.defaultPrevented) popover.setOpen(false);\n },\n };\n if (asChild) return renderAsChild('Popover.Close', children, props);\n return (\n <button type=\"button\" {...props}>\n {children}\n </button>\n );\n}\n\nPopover.displayName = 'Popover';\nPopoverTrigger.displayName = 'Popover.Trigger';\nPopoverContent.displayName = 'Popover.Content';\nPopoverClose.displayName = 'Popover.Close';\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\nPopover.Close = PopoverClose;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/accordion/Accordion.module.css","../src/accordion/Accordion.tsx"],"names":["accordion","item","heading","trigger","label","chevron","panel"],"mappings":"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","file":"chunk-O6OBFL3Q.js","sourcesContent":["/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer components {\n .accordion {\n display: flex;\n flex-direction: column;\n border: var(--size-hairline) solid var(--accordion-border);\n border-radius: var(--accordion-radius);\n font-family: var(--font-family-body);\n }\n\n .item {\n border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n &:last-child {\n border-block-end: none;\n }\n }\n\n .heading {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n }\n\n .trigger {\n display: flex;\n gap: var(--accordion-trigger-gap);\n align-items: center;\n inline-size: 100%;\n padding-block: var(--accordion-trigger-padding-block);\n padding-inline: var(--accordion-trigger-padding-inline);\n border: none;\n background-color: transparent;\n color: var(--accordion-trigger-fg);\n font-size: var(--accordion-trigger-font-size);\n font-weight: var(--accordion-trigger-font-weight);\n text-align: start;\n cursor: pointer;\n transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--accordion-trigger-bg-hover);\n }\n }\n\n .label {\n flex: 1;\n }\n\n .chevron {\n color: var(--accordion-trigger-chevron);\n transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n }\n\n .trigger[data-state=\"open\"] .chevron {\n rotate: 180deg;\n }\n\n .panel {\n padding-block: var(--accordion-panel-padding-block);\n padding-inline: var(--accordion-panel-padding-inline);\n color: var(--accordion-panel-fg);\n font-size: var(--accordion-panel-font-size);\n }\n}\n","import {\n createContext,\n createElement,\n useCallback,\n useContext,\n useId,\n useState,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { ChevronDown } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Accordion.module.css';\n\nexport type AccordionType = 'single' | 'multiple';\nexport type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\ninterface AccordionContextValue {\n openValues: ReadonlySet<string>;\n toggle: (value: string) => void;\n headingLevel: AccordionHeadingLevel;\n baseId: string;\n}\n\ninterface ItemContextValue {\n value: string;\n open: boolean;\n disabled: boolean;\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\nconst ItemContext = createContext<ItemContextValue | null>(null);\n\nfunction useAccordion(part: string): AccordionContextValue {\n const context = useContext(AccordionContext);\n if (!context) throw new Error(`${part} must be rendered inside <Accordion>`);\n return context;\n}\n\nfunction useItem(part: string): ItemContextValue {\n const context = useContext(ItemContext);\n if (!context) throw new Error(`${part} must be rendered inside <Accordion.Item>`);\n return context;\n}\n\nexport interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n /** `single` keeps one item open; `multiple` allows any number. @default 'single' */\n type?: AccordionType;\n /** Controlled open item(s): a string for `single`, an array for `multiple`. */\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: string | string[]) => void;\n /** In `single` mode, whether the open item can be closed again. @default true */\n collapsible?: boolean;\n /** The heading level of every trigger, for the document outline. @default 3 */\n headingLevel?: AccordionHeadingLevel;\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nconst toSet = (value: string | string[] | undefined): Set<string> =>\n new Set(value === undefined ? [] : Array.isArray(value) ? value : [value]);\n\n/**\n * Vertically stacked sections that expand one at a time or independently.\n * Each trigger is a button inside a real heading, each panel a labelled\n * region; arrows, Home and End move between triggers. Controlled or\n * uncontrolled by `value`. Compose with `Accordion.Item`,\n * `Accordion.Trigger` and `Accordion.Panel`.\n *\n * @status stable\n * @category Navigation\n * @accessibility Each trigger is a `button` inside a heading of the given `headingLevel`; each panel is a `region` labelled by its trigger. Arrows, Home and End move between triggers; Enter or Space toggles.\n * @do Set `headingLevel` to fit the page outline.\n * Use `multiple` when sections are independent reference material.\n * @dont Nest interactive content in the trigger; it is one button.\n * Use it for a single show-more; use Popover or plain content instead.\n */\nexport function Accordion({\n type = 'single',\n value,\n defaultValue,\n onValueChange,\n collapsible = true,\n headingLevel = 3,\n className,\n onKeyDown,\n ref,\n children,\n ...rest\n}: AccordionProps) {\n const [uncontrolled, setUncontrolled] = useState<Set<string>>(() => toSet(defaultValue));\n const controlled = value !== undefined;\n const openValues = controlled ? toSet(value) : uncontrolled;\n\n const toggle = useCallback(\n (item: string) => {\n const next = new Set(openValues);\n if (next.has(item)) {\n if (type === 'single' && !collapsible) return;\n next.delete(item);\n } else {\n if (type === 'single') next.clear();\n next.add(item);\n }\n if (!controlled) setUncontrolled(next);\n onValueChange?.(type === 'single' ? (next.values().next().value ?? '') : Array.from(next));\n },\n [openValues, type, collapsible, controlled, onValueChange],\n );\n\n const baseId = useId();\n const rove = useRovingFocus({ orientation: 'vertical', selector: '[data-accordion-trigger]' });\n\n return (\n <AccordionContext.Provider value={{ openValues, toggle, headingLevel, baseId }}>\n <div\n {...rest}\n ref={ref}\n className={classes(styles.accordion, className)}\n data-type={type}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented) rove(event);\n }}\n >\n {children}\n </div>\n </AccordionContext.Provider>\n );\n}\n\ninterface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n disabled?: boolean;\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nfunction AccordionItem({ value, disabled = false, className, ref, children, ...rest }: AccordionItemProps) {\n const accordion = useAccordion('Accordion.Item');\n const open = accordion.openValues.has(value);\n return (\n <ItemContext.Provider value={{ value, open, disabled }}>\n <div\n {...rest}\n ref={ref}\n className={classes(styles.item, className)}\n data-state={open ? 'open' : 'closed'}\n data-disabled={disabled ? '' : undefined}\n >\n {children}\n </div>\n </ItemContext.Provider>\n );\n}\n\ninterface AccordionTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n ref?: Ref<HTMLButtonElement>;\n children: ReactNode;\n}\n\nfunction AccordionTrigger({ className, onClick, ref, children, ...rest }: AccordionTriggerProps) {\n const accordion = useAccordion('Accordion.Trigger');\n const item = useItem('Accordion.Trigger');\n const triggerId = `${accordion.baseId}-${item.value}-trigger`;\n const panelId = `${accordion.baseId}-${item.value}-panel`;\n return createElement(\n `h${accordion.headingLevel}`,\n { className: styles.heading },\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n id={triggerId}\n aria-expanded={item.open}\n aria-controls={panelId}\n disabled={item.disabled}\n className={classes(styles.trigger, className)}\n data-accordion-trigger=\"\"\n data-state={item.open ? 'open' : 'closed'}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) accordion.toggle(item.value);\n }}\n >\n <span className={styles.label}>{children}</span>\n <Icon size=\"inherit\" className={styles.chevron}>\n <ChevronDown />\n </Icon>\n </button>,\n );\n}\n\ninterface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nfunction AccordionPanel({ className, ref, children, ...rest }: AccordionPanelProps) {\n const accordion = useAccordion('Accordion.Panel');\n const item = useItem('Accordion.Panel');\n return (\n <div\n {...rest}\n ref={ref}\n id={`${accordion.baseId}-${item.value}-panel`}\n role=\"region\"\n aria-labelledby={`${accordion.baseId}-${item.value}-trigger`}\n hidden={!item.open}\n className={classes(styles.panel, className)}\n data-state={item.open ? 'open' : 'closed'}\n >\n {children}\n </div>\n );\n}\n\nAccordion.displayName = 'Accordion';\nAccordionItem.displayName = 'Accordion.Item';\nAccordionTrigger.displayName = 'Accordion.Trigger';\nAccordionPanel.displayName = 'Accordion.Panel';\n\nAccordion.Item = AccordionItem;\nAccordion.Trigger = AccordionTrigger;\nAccordion.Panel = AccordionPanel;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/select/Select.module.css","../src/select/Select.tsx"],"names":["field","control","select"],"mappings":";;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,KAAA,EAAAA,cAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAuBA,MAAA,EAAAC;AAAA,CAAA;ACbI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,cAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,MAAA,EAAA,EAAK,SAAA,EAAW,eAAO,OAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,WAAA,EAC/B,+BAAC,QAAA,EAAA,EAAQ,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,eAAO,MAAA,EAC3C,QAAA,EAAA;AAAA,UAAA,WAAA,KAAgB,0BACf,GAAA,CAAC,QAAA,EAAA,EAAO,OAAM,EAAA,EAAG,QAAA,EAAU,UACxB,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAED;AAAA,SAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-OGIQRHNF.js","sourcesContent":["/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer components {\n .field {\n --_height: var(--select-height-md);\n --_font-size: var(--select-font-size-md);\n --_border: var(--select-border-default);\n\n font-family: var(--select-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--select-height-sm);\n --_font-size: var(--select-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--select-height-lg);\n --_font-size: var(--select-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--select-border-invalid); }\n }\n\n .control {\n display: grid;\n align-items: center;\n\n & > * {\n grid-area: 1 / 1;\n }\n\n &::after {\n content: \"\";\n inline-size: var(--space-2);\n block-size: var(--space-2);\n margin-inline-end: var(--select-chevron-inset);\n border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n justify-self: end;\n rotate: 45deg;\n translate: 0 -25%;\n pointer-events: none;\n grid-area: 1 / 1;\n }\n }\n\n .select {\n inline-size: 100%;\n min-block-size: var(--_height);\n padding-block: 0;\n padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--select-radius);\n background-color: var(--select-bg);\n color: var(--select-fg);\n font-size: var(--_font-size);\n appearance: none;\n cursor: pointer;\n transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n border-color: var(--select-border-focus);\n outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n outline-offset: var(--select-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :focus-visible) {\n border-color: var(--select-border-hover);\n }\n\n &:has(option[value=\"\"]:checked) {\n color: var(--select-placeholder);\n }\n }\n}\n","import type { ReactNode, Ref, SelectHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Select.module.css';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n /** Visible label. Always rendered. */\n label: ReactNode;\n description?: ReactNode;\n /** Presence marks the control invalid and announces the message. */\n error?: ReactNode;\n /** @default 'md' */\n size?: SelectSize;\n /** An empty first option shown until a value is chosen. */\n placeholder?: string;\n /** The `<select>` element. */\n ref?: Ref<HTMLSelectElement>;\n /** Applied to the wrapper, not the select. */\n className?: string;\n /** `<option>` and `<optgroup>` elements. */\n children: ReactNode;\n}\n\n/**\n * A native `<select>` on top of Field: the browser's own popup, keyboard and\n * assistive-technology support, with the closed control drawn from\n * `--select-*` tokens. For rich options or multi-select, a listbox component\n * comes later on a headless layer; this one stays native on purpose.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.\n * @do Use it for a plain list of words; it is the most robust choice on every platform.\n * @dont Use it for options that need a description or an icon; use Picker.\n */\nexport function Select({\n label,\n description,\n error,\n size = 'md',\n placeholder,\n required,\n disabled,\n id,\n className,\n ref,\n children,\n 'aria-describedby': describedBy,\n ...rest\n}: SelectProps) {\n const invalid = error !== undefined && error !== null && error !== false && error !== '';\n return (\n <Field\n id={id}\n invalid={invalid}\n disabled={Boolean(disabled)}\n required={Boolean(required)}\n className={classes(styles.field, className)}\n data-size={size}\n >\n <Field.Label>{label}</Field.Label>\n <span className={styles.control}>\n <Field.Control aria-describedby={describedBy}>\n <select {...rest} ref={ref} className={styles.select}>\n {placeholder !== undefined && (\n <option value=\"\" disabled={required}>\n {placeholder}\n </option>\n )}\n {children}\n </select>\n </Field.Control>\n </span>\n {description && <Field.Description>{description}</Field.Description>}\n {invalid && <Field.Error>{error}</Field.Error>}\n </Field>\n );\n}\n\nSelect.displayName = 'Select';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/switch/Switch.module.css","../src/switch/Switch.tsx"],"names":["switch","row","input"],"mappings":";;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,MAAA,EAAAA,eAAAA;AAAA,EAWA,GAAA,EAAAC,YAAAA;AAAA,EAMA,KAAA,EAAAC;AAAA,CAAA;ACOI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAe,cAAA,CAAO,MAAA;AAAA,MACtB,cAAc,cAAA,CAAO,GAAA;AAAA,MACrB,kBAAA,EAAkB,WAAA;AAAA,MAClB,OAAA,kBAAS,GAAA,CAAC,OAAA,EAAA,EAAO,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAK,UAAA,EAAW,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,cAAA,CAAO,KAAA,EAAO;AAAA;AAAA,GAC7F;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-OUFAFINB.js","sourcesContent":["/*\n * Every value is a token (--switch-*). The input is the track; its ::before\n * is the thumb. Size and invalid state resolve into private custom\n * properties on the root.\n */\n\n@layer components {\n .switch {\n --_size: var(--switch-size-md);\n --_track: var(--switch-track-bg);\n\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_size: var(--switch-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--switch-size-lg); }\n &[data-invalid] { --_track: var(--switch-track-invalid); }\n }\n\n .row {\n display: flex;\n align-items: center;\n gap: var(--switch-gap);\n }\n\n .input {\n --_inset: calc(2 * var(--switch-thumb-inset));\n\n position: relative;\n flex: none;\n inline-size: calc(2 * var(--_size));\n block-size: var(--_size);\n margin: 0;\n border: none;\n border-radius: var(--switch-radius);\n background-color: var(--_track);\n appearance: none;\n cursor: pointer;\n transition: background-color var(--switch-motion-duration) var(--motion-easing-standard);\n\n &::before {\n content: \"\";\n position: absolute;\n inset-block-start: var(--_inset);\n inset-inline-start: var(--_inset);\n inline-size: calc(var(--_size) - 2 * var(--_inset));\n block-size: calc(var(--_size) - 2 * var(--_inset));\n border-radius: var(--switch-radius);\n background-color: var(--switch-thumb);\n transition: translate var(--switch-motion-duration) var(--motion-easing-standard);\n }\n\n &:checked {\n background-color: var(--switch-track-bg-checked);\n\n &::before {\n translate: var(--_size) 0;\n background-color: var(--switch-thumb-checked);\n }\n }\n\n &:focus-visible {\n outline: var(--switch-focus-ring-width) solid var(--switch-focus-ring);\n outline-offset: var(--switch-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :checked) {\n background-color: var(--switch-track-bg-hover);\n }\n\n &:hover:not(:disabled):checked {\n background-color: var(--switch-track-bg-checked-hover);\n }\n }\n}\n","import type { InputHTMLAttributes, ReactNode, Ref } from 'react';\nimport { ToggleField, type ToggleSize } from '../internal/ToggleField';\nimport styles from './Switch.module.css';\n\nexport type SwitchSize = ToggleSize;\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n /** Visible label beside the switch. */\n label: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n /** @default 'md' */\n size?: SwitchSize;\n /** The `<input>` element. */\n ref?: Ref<HTMLInputElement>;\n /** Applied to the wrapper, not the input. */\n className?: string;\n}\n\n/**\n * An on/off control: a native checkbox with `role=\"switch\"`, so assistive\n * technology announces on and off, and the browser handles keyboard, forms\n * and state. Use it for settings that take effect immediately; use Checkbox\n * for choices submitted with a form. Drawn with `--switch-*` tokens.\n *\n * @status stable\n * @category Forms\n * @accessibility A native checkbox with `role=\"switch\"`, so on and off are announced; Space toggles; label, description and error wire through Field.\n * @do Use it for settings that apply immediately.\n * @dont Use it inside a form that needs a submit; use Checkbox.\n */\nexport function Switch({\n label,\n description,\n error,\n size = 'md',\n required,\n disabled,\n id,\n className,\n ref,\n 'aria-describedby': describedBy,\n ...rest\n}: SwitchProps) {\n return (\n <ToggleField\n label={label}\n description={description}\n error={error}\n size={size}\n required={required}\n disabled={disabled}\n id={id}\n className={className}\n rootClassName={styles.switch}\n rowClassName={styles.row}\n aria-describedby={describedBy}\n control={<input {...rest} ref={ref} type=\"checkbox\" role=\"switch\" className={styles.input} />}\n />\n );\n}\n\nSwitch.displayName = 'Switch';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/internal/dates.ts","../src/calendar/Calendar.module.css","../src/calendar/CalendarGrid.tsx"],"names":["root","header","heading","nav","grid","weekday","cell","AriaButton","AriaHeading","AriaCalendarGrid","AriaCalendarGridHeader","AriaCalendarHeaderCell","AriaCalendarGridBody","AriaCalendarCell"],"mappings":";;;;;;AAOO,SAAS,OAAO,GAAA,EAAiE;AACtF,EAAA,IAAI,GAAA,KAAQ,QAAW,OAAO,MAAA;AAC9B,EAAA,IAAI,GAAA,KAAQ,IAAA,IAAQ,GAAA,KAAQ,EAAA,EAAI,OAAO,IAAA;AACvC,EAAA,OAAO,UAAU,GAAG,CAAA;AACtB;AAEO,SAAS,SAAS,IAAA,EAAuC;AAC9D,EAAA,OAAO,OAAO,IAAA,CAAK,QAAA,GAAW,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA,GAAI,IAAA;AAC/C;;;ACfA,IAAA,gBAAA,GAAA;AAAA,EAOG,IAAA,EAAAA,eAAAA;AAAA,EAWA,MAAA,EAAAC,iBAAAA;AAAA,EAOA,OAAA,EAAAC,kBAAAA;AAAA,EAMA,GAAA,EAAAC,cAAAA;AAAA,EA6BA,IAAA,EAAAC,eAAAA;AAAA,EAKA,OAAA,EAAAC,kBAAAA;AAAA,EASA,IAAA,EAAAC;AAAA,CAAA;ACrDI,SAAS,YAAA,GAAe;AAC7B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,gBAAA,CAAO,MAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,MAAA,EAAA,EAAW,IAAA,EAAK,UAAA,EAAW,SAAA,EAAW,gBAAA,CAAO,GAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EACT,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,GACf,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAACC,OAAA,EAAA,EAAY,SAAA,EAAW,gBAAA,CAAO,OAAA,EAAS,CAAA;AAAA,sBACxC,GAAA,CAACD,MAAA,EAAA,EAAW,IAAA,EAAK,MAAA,EAAO,WAAW,gBAAA,CAAO,GAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EACT,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,GAChB,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,yBACCE,cAAA,EAAA,EAAiB,SAAA,EAAW,gBAAA,CAAO,IAAA,EAAM,cAAa,OAAA,EACrD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,kBAAA,EAAA,EAAwB,WAAC,GAAA,qBAAQ,GAAA,CAACC,sBAAuB,SAAA,EAAW,gBAAA,CAAO,OAAA,EAAU,QAAA,EAAA,GAAA,EAAI,CAAA,EAA0B,CAAA;AAAA,sBACpH,GAAA,CAACC,gBAAA,EAAA,EAAsB,QAAA,EAAA,CAAC,IAAA,qBAAS,GAAA,CAACC,gBAAiB,IAAA,EAAY,SAAA,EAAW,gBAAA,CAAO,IAAA,EAAM,CAAA,EAAG;AAAA,KAAA,EAC5F;AAAA,GAAA,EACF,CAAA;AAEJ;AAGO,IAAM,oBAAoB,gBAAA,CAAO","file":"chunk-OXYP34CG.js","sourcesContent":["import { parseDate, type CalendarDate, type DateValue } from '@internationalized/date';\n\n/**\n * pulp's date contract is an ISO calendar date string (`YYYY-MM-DD`); the\n * vendor's date objects stay behind this boundary (decision record 001).\n * `undefined` stays `undefined` so uncontrolled props remain uncontrolled.\n */\nexport function toDate(iso: string | null | undefined): CalendarDate | null | undefined {\n if (iso === undefined) return undefined;\n if (iso === null || iso === '') return null;\n return parseDate(iso);\n}\n\nexport function fromDate(date: DateValue | null): string | null {\n return date ? date.toString().slice(0, 10) : null;\n}\n","/*\n * Every value is a token (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer components {\n .root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--calendar-gap);\n padding: var(--calendar-padding);\n background-color: var(--calendar-bg);\n color: var(--calendar-fg);\n font-family: var(--calendar-font-family);\n font-size: var(--calendar-font-size);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--calendar-gap);\n }\n\n .heading {\n margin: 0;\n font-size: var(--calendar-heading-font-size);\n font-weight: var(--calendar-heading-font-weight);\n }\n\n .nav {\n display: grid;\n place-items: center;\n inline-size: var(--calendar-nav-size);\n block-size: var(--calendar-nav-size);\n padding: 0;\n border: none;\n border-radius: var(--calendar-nav-radius);\n background-color: transparent;\n color: var(--calendar-nav-fg);\n cursor: pointer;\n transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n &[data-hovered] {\n background-color: var(--calendar-nav-bg-hover);\n color: var(--calendar-nav-fg-hover);\n }\n\n &[data-focus-visible] {\n outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n outline-offset: var(--calendar-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n .grid {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n .weekday {\n inline-size: var(--calendar-cell-size);\n padding: 0;\n color: var(--calendar-weekday-fg);\n font-size: var(--calendar-weekday-font-size);\n font-weight: var(--calendar-weekday-font-weight);\n text-align: center;\n }\n\n .cell {\n display: grid;\n place-items: center;\n inline-size: var(--calendar-cell-size);\n block-size: var(--calendar-cell-size);\n border-radius: var(--calendar-cell-radius);\n color: var(--calendar-cell-fg);\n cursor: pointer;\n outline: none;\n transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n &[data-outside-month] {\n display: none;\n }\n\n &[data-today] {\n color: var(--calendar-cell-fg-today);\n font-weight: var(--calendar-heading-font-weight);\n }\n\n &[data-hovered] {\n background-color: var(--calendar-cell-bg-hover);\n }\n\n &[data-selected] {\n background-color: var(--calendar-cell-bg-selected);\n color: var(--calendar-cell-fg-selected);\n\n &[data-hovered] {\n background-color: var(--calendar-cell-bg-selected-hover);\n }\n }\n\n &[data-focus-visible] {\n outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n outline-offset: var(--calendar-focus-ring-offset);\n }\n\n &[data-unavailable] {\n color: var(--calendar-cell-fg-unavailable);\n text-decoration: line-through;\n cursor: not-allowed;\n }\n\n /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n &[data-disabled] {\n color: var(--calendar-cell-fg-unavailable);\n cursor: not-allowed;\n }\n }\n}\n","import {\n Button as AriaButton,\n CalendarCell as AriaCalendarCell,\n CalendarGrid as AriaCalendarGrid,\n CalendarGridBody as AriaCalendarGridBody,\n CalendarGridHeader as AriaCalendarGridHeader,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n Heading as AriaHeading,\n} from 'react-aria-components';\nimport { ChevronLeft, ChevronRight } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport styles from './Calendar.module.css';\n\n/**\n * The month view shared by Calendar and DatePicker: navigation, the visible\n * month name, weekday header and the day grid. It reads its state from the\n * vendor's calendar context, so it works inside either root. The vendor\n * names the grid for assistive technology through a visually hidden `h2`;\n * the visible month name is decorative (`aria-hidden`), which is why it is\n * a plain div and not a heading level of pulp's choosing.\n */\nexport function CalendarGrid() {\n return (\n <>\n <div className={styles.header}>\n <AriaButton slot=\"previous\" className={styles.nav}>\n <Icon size=\"inherit\">\n <ChevronLeft />\n </Icon>\n </AriaButton>\n <AriaHeading className={styles.heading} />\n <AriaButton slot=\"next\" className={styles.nav}>\n <Icon size=\"inherit\">\n <ChevronRight />\n </Icon>\n </AriaButton>\n </div>\n <AriaCalendarGrid className={styles.grid} weekdayStyle=\"short\">\n <AriaCalendarGridHeader>{(day) => <AriaCalendarHeaderCell className={styles.weekday}>{day}</AriaCalendarHeaderCell>}</AriaCalendarGridHeader>\n <AriaCalendarGridBody>{(date) => <AriaCalendarCell date={date} className={styles.cell} />}</AriaCalendarGridBody>\n </AriaCalendarGrid>\n </>\n );\n}\n\n/** The root class, for DatePicker to style the vendor calendar inside its popover. */\nexport const calendarRootClass = styles.root;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/slider/Slider.module.css","../src/slider/Slider.tsx"],"names":["root","header","hidden","output","track","rail","fill","thumb","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderFill","AriaSliderThumb","AriaText"],"mappings":"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","file":"chunk-P5C2U5ZF.js","sourcesContent":["/*\n * Every value is a token (--slider-*); the label and description read\n * --field-*. React Aria positions the thumbs and the fill (its inline\n * values); the rail is the visible track inside a larger pointer target.\n * State: data-orientation and data-disabled on the root; data-dragging,\n * data-hovered, data-focus-visible on a thumb.\n */\n\n@layer components {\n .root {\n --_thumb: var(--slider-thumb-size);\n\n display: flex;\n flex-direction: column;\n gap: var(--slider-gap);\n inline-size: 100%;\n font-family: var(--slider-font-family);\n\n &[data-orientation=\"vertical\"] {\n inline-size: auto;\n block-size: var(--slider-track-length);\n }\n\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n gap: var(--slider-gap);\n }\n\n .hidden {\n position: absolute;\n inline-size: var(--size-hairline);\n block-size: var(--size-hairline);\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n }\n\n .output {\n color: var(--slider-output-fg);\n font-family: var(--slider-output-font-family);\n font-size: var(--slider-output-font-size);\n font-variant-numeric: tabular-nums;\n }\n\n .track {\n position: relative;\n block-size: var(--slider-track-hit-size);\n\n .root[data-orientation=\"vertical\"] & {\n inline-size: var(--slider-track-hit-size);\n block-size: 100%;\n }\n }\n\n /* Disabled dims the track, not the label and output, so the text keeps its contrast. */\n .root[data-disabled] .track {\n opacity: 0.55;\n }\n\n .rail {\n position: absolute;\n inset-block-start: 50%;\n inline-size: 100%;\n block-size: var(--slider-track-size);\n overflow: hidden;\n border-radius: var(--slider-track-radius);\n background-color: var(--slider-track-bg);\n translate: 0 -50%;\n\n .root[data-orientation=\"vertical\"] & {\n inset-block-start: 0;\n inset-inline-start: 50%;\n inline-size: var(--slider-track-size);\n block-size: 100%;\n translate: -50% 0;\n }\n }\n\n .fill {\n position: absolute;\n block-size: 100%;\n background-color: var(--slider-fill);\n\n .root[data-orientation=\"vertical\"] & {\n inline-size: 100%;\n }\n }\n\n .thumb {\n inset-block-start: 50%;\n inline-size: var(--_thumb);\n block-size: var(--_thumb);\n border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);\n border-radius: var(--slider-thumb-radius);\n background-color: var(--slider-thumb-bg);\n box-shadow: var(--slider-thumb-shadow);\n cursor: grab;\n transition: border-color var(--slider-motion-duration) var(--motion-easing-standard);\n\n .root[data-orientation=\"vertical\"] & {\n inset-block-start: auto;\n inset-inline-start: 50%;\n }\n\n &[data-hovered],\n &[data-dragging] {\n border-color: var(--slider-thumb-border-hover);\n }\n\n &[data-dragging] {\n cursor: grabbing;\n }\n\n &[data-focus-visible] {\n outline: var(--slider-focus-ring-width) solid var(--slider-focus-ring);\n outline-offset: var(--slider-focus-ring-offset);\n }\n }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n Label as AriaLabel,\n Slider as AriaSlider,\n SliderFill as AriaSliderFill,\n SliderOutput as AriaSliderOutput,\n SliderThumb as AriaSliderThumb,\n SliderTrack as AriaSliderTrack,\n Text as AriaText,\n} from 'react-aria-components';\nimport { classes } from '../internal/classes';\nimport fieldStyles from '../internal/AriaField.module.css';\nimport styles from './Slider.module.css';\n\nexport type SliderValue = number | [number, number];\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\nexport interface SliderProps<T extends SliderValue = number> {\n /** Visible label. Always rendered; `hideLabel` keeps it for assistive technology only. */\n label: ReactNode;\n /** @default false */\n hideLabel?: boolean;\n description?: ReactNode;\n /** One number, or a `[start, end]` pair for a range with two thumbs. */\n value?: T;\n defaultValue?: T;\n /** Called on every change while dragging or pressing arrows. */\n onChange?: (value: T) => void;\n /** Called once when the drag ends or the key is released. */\n onChangeEnd?: (value: T) => void;\n /** @default 0 */\n min?: number;\n /** @default 100 */\n max?: number;\n /** @default 1 */\n step?: number;\n /** How the value reads in the output and to assistive technology, for instance `{ style: 'percent' }` or `{ style: 'currency', currency: 'EUR' }`. */\n formatOptions?: Intl.NumberFormatOptions;\n /** Names for the two thumbs of a range. @default ['Minimum', 'Maximum'] */\n thumbLabels?: readonly [string, string];\n /** Show the formatted value next to the label. @default true */\n showOutput?: boolean;\n /** @default 'horizontal' */\n orientation?: SliderOrientation;\n /** @default false */\n disabled?: boolean;\n /** Submitted with a form; a range submits two inputs with this name. */\n name?: string;\n className?: string;\n /** The group element. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Picks a number, or a range, on a track: React Aria's slider (decision\n * record 001) provides the hidden range inputs, arrow, Page Up/Down, Home and\n * End keys, drag with a thumb that stays under the pointer, and\n * `aria-valuetext` in the formatted form. The output element shows the\n * same text, so what a screen reader hears is what sighted users see.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label containing one hidden `input type=\"range\"` per thumb (named by `thumbLabels` for a range) with `aria-valuetext` in the formatted form; the `output` element shows the same text. Arrows step, Page Up/Down step by ten, Home/End jump; thumbs drag with mouse or touch.\n * @do Set `formatOptions` so the spoken value matches the unit (\"40%\", \"€200\").\n * Use `hideLabel` only when a visible heading already names it.\n * @dont Use it for precise values; provide a numeric field alongside.\n * Use a `step` so small the keyboard cannot reach the ends in reasonable time.\n */\nexport function Slider<T extends SliderValue = number>({\n label,\n hideLabel = false,\n description,\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n min = 0,\n max = 100,\n step = 1,\n formatOptions,\n thumbLabels = ['Minimum', 'Maximum'],\n showOutput = true,\n orientation = 'horizontal',\n disabled = false,\n name,\n className,\n ref,\n}: SliderProps<T>) {\n const range = Array.isArray(value ?? defaultValue);\n return (\n <AriaSlider\n ref={ref}\n className={classes(styles.root, className)}\n data-range={range ? '' : undefined}\n value={value as number | number[] | undefined}\n defaultValue={(defaultValue ?? (range ? [min, max] : min)) as number | number[]}\n onChange={onChange as ((value: number | number[]) => void) | undefined}\n onChangeEnd={onChangeEnd as ((value: number | number[]) => void) | undefined}\n minValue={min}\n maxValue={max}\n step={step}\n formatOptions={formatOptions}\n orientation={orientation}\n isDisabled={disabled}\n >\n <div className={styles.header}>\n <AriaLabel className={classes(fieldStyles.label, hideLabel && styles.hidden)}>{label}</AriaLabel>\n {showOutput && <AriaSliderOutput className={styles.output} />}\n </div>\n <AriaSliderTrack className={styles.track}>\n <span className={styles.rail} aria-hidden=\"true\">\n <AriaSliderFill className={styles.fill} />\n </span>\n <AriaSliderThumb index={0} className={styles.thumb} aria-label={range ? thumbLabels[0] : undefined} name={name} />\n {range && <AriaSliderThumb index={1} className={styles.thumb} aria-label={thumbLabels[1]} name={name} />}\n </AriaSliderTrack>\n {description && (\n <AriaText slot=\"description\" className={fieldStyles.description}>\n {description}\n </AriaText>\n )}\n </AriaSlider>\n );\n}\n\nSlider.displayName = 'Slider';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/listbox/Listbox.module.css","../src/listbox/ListboxOptions.tsx"],"names":["list","check","item","itemBody","itemLabel","itemDescription","empty","AriaListBoxItem","AriaText"],"mappings":";;;;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAQG,IAAA,EAAAA,cAAAA;AAAA,EAoBA,KAAA,EAAAC,eAAAA;AAAA,EAMA,IAAA,EAAAC,cAAAA;AAAA,EA8BA,QAAA,EAAAC,kBAAAA;AAAA,EAMA,SAAA,EAAAC,mBAAAA;AAAA,EAMA,eAAA,EAAAC,yBAAAA;AAAA,EAKA,KAAA,EAAAC;AAAA,CAAA;AC1DI,SAAS,aAAa,IAAA,EAAmB;AAC9C,EAAA,uBACE,IAAA,CAACC,WAAA,EAAA,EAAgB,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,KAAA,EAAO,UAAA,EAAY,IAAA,CAAK,QAAA,EAAU,SAAA,EAAW,gBAAO,IAAA,EAChG,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,SAAA,EAAU,SAAA,EAAW,gBAAO,KAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,SAAM,CAAA,EACT,CAAA;AAAA,oBACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,eAAA,CAAO,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,QAAS,IAAA,EAAK,OAAA,EAAQ,WAAW,eAAA,CAAO,SAAA,EACtC,eAAK,KAAA,EACR,CAAA;AAAA,MACC,IAAA,CAAK,WAAA,oBACJ,GAAA,CAACA,IAAA,EAAA,EAAS,IAAA,EAAK,eAAc,SAAA,EAAW,eAAA,CAAO,eAAA,EAC5C,QAAA,EAAA,IAAA,CAAK,WAAA,EACR;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;AAEO,SAAS,YAAY,OAAA,EAAoB;AAC9C,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAA,CAAO,OAAQ,QAAA,EAAA,OAAA,EAAQ,CAAA;AAChD;AAGO,IAAM,YAAY,CAAA,GAAI,KAAA,KAAoD,QAAQ,eAAA,CAAO,IAAA,EAAM,GAAG,KAAK","file":"chunk-T76YSNTZ.js","sourcesContent":["/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer components {\n .list {\n display: flex;\n flex-direction: column;\n max-block-size: var(--listbox-max-height);\n padding: var(--listbox-padding);\n overflow: auto;\n border: var(--size-hairline) solid var(--listbox-border);\n border-radius: var(--listbox-radius);\n background-color: var(--listbox-bg);\n color: var(--listbox-fg);\n font-family: var(--listbox-font-family);\n font-size: var(--listbox-font-size);\n outline: none;\n\n &[data-focus-visible] {\n outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n outline-offset: var(--listbox-focus-ring-offset);\n }\n }\n\n .check {\n flex: none;\n visibility: hidden;\n color: var(--listbox-item-check);\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--listbox-item-gap);\n padding-block: var(--listbox-item-padding-block);\n padding-inline: var(--listbox-item-padding-inline);\n border-radius: var(--listbox-item-radius);\n color: var(--listbox-item-fg);\n cursor: default;\n outline: none;\n\n &[data-hovered],\n &[data-focused] {\n background-color: var(--listbox-item-bg-focus);\n }\n\n &[data-selected] {\n background-color: var(--listbox-item-bg-selected);\n\n .check {\n visibility: visible;\n }\n }\n\n &[data-disabled] {\n color: var(--listbox-item-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .itemBody {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .itemLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .itemDescription {\n color: var(--listbox-item-fg-muted);\n font-size: var(--listbox-item-description-font-size);\n }\n\n .empty {\n padding: var(--listbox-empty-padding);\n color: var(--listbox-empty-fg);\n }\n}\n","import type { ReactNode } from 'react';\nimport { ListBoxItem as AriaListBoxItem, Text as AriaText } from 'react-aria-components';\nimport { Check } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './Listbox.module.css';\n\n/** One option. `id` is the value; `label` is what the user sees and types against. */\nexport interface ListboxItem {\n id: string;\n label: string;\n /** A second, muted line under the label. */\n description?: string;\n /** @default false */\n disabled?: boolean;\n}\n\n/**\n * The option renderer shared by Listbox, Combobox and Picker, so the three\n * agree on what an option looks like and read the same `--listbox-item-*`\n * tokens. React Aria adds the state (`data-selected`, `data-focused`,\n * `data-disabled`); the tick is always in the DOM and shown by CSS.\n */\nexport function renderOption(item: ListboxItem) {\n return (\n <AriaListBoxItem id={item.id} textValue={item.label} isDisabled={item.disabled} className={styles.item}>\n <Icon size=\"inherit\" className={styles.check}>\n <Check />\n </Icon>\n <span className={styles.itemBody}>\n <AriaText slot=\"label\" className={styles.itemLabel}>\n {item.label}\n </AriaText>\n {item.description && (\n <AriaText slot=\"description\" className={styles.itemDescription}>\n {item.description}\n </AriaText>\n )}\n </span>\n </AriaListBoxItem>\n );\n}\n\nexport function renderEmpty(message: ReactNode) {\n return <div className={styles.empty}>{message}</div>;\n}\n\n/** The list class, for Combobox and Picker to put the list inside their popovers. */\nexport const listClass = (...extra: Array<string | false | null | undefined>) => classes(styles.list, ...extra);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/textarea/Textarea.module.css","../src/textarea/Textarea.tsx"],"names":["field","textarea"],"mappings":";;;;;AAAA,IAAA,gBAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,gBAAAA;AAAA,EAIA,QAAA,EAAAC;AAAA,CAAA;AC+BI,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,UAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,CAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,gBAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,gBAAA,EAAgB,WAAW,EAAA,GAAK,MAAA;AAAA,MAChC,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,KAAA,CAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,aAC/B,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAU,GAAG,IAAA,EAAM,KAAU,IAAA,EAAY,QAAA,EAAoB,SAAA,EAAW,gBAAA,CAAO,UAAU,CAAA,EAC5F,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-TGMDOQCL.js","sourcesContent":["/* Every value is a token (--textarea-*). Label, description and error come from Field. */\n\n@layer components {\n .field {\n font-family: var(--textarea-font-family);\n }\n\n .textarea {\n min-block-size: var(--textarea-min-height);\n padding-block: var(--textarea-padding-block);\n padding-inline: var(--textarea-padding-inline);\n border: var(--size-hairline) solid var(--textarea-border-default);\n border-radius: var(--textarea-radius);\n background-color: var(--textarea-bg);\n color: var(--textarea-fg);\n font-size: var(--textarea-font-size-md);\n line-height: var(--textarea-line-height);\n resize: vertical;\n transition:\n border-color var(--textarea-motion-duration) var(--motion-easing-standard),\n background-color var(--textarea-motion-duration) var(--motion-easing-standard);\n\n &::placeholder {\n color: var(--textarea-placeholder);\n }\n\n &:focus-visible {\n border-color: var(--textarea-border-focus);\n outline: var(--textarea-focus-ring-width) solid var(--textarea-focus-ring);\n outline-offset: var(--textarea-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:read-only:not(:disabled) {\n background-color: var(--color-surface-sunken);\n }\n\n &:hover:not(:disabled, :focus-visible) {\n border-color: var(--textarea-border-hover);\n }\n }\n\n .field[data-size=\"sm\"] .textarea { font-size: var(--textarea-font-size-sm); }\n .field[data-size=\"lg\"] .textarea { font-size: var(--textarea-font-size-lg); }\n .field[data-resize=\"none\"] .textarea { resize: none; }\n .field[data-resize=\"both\"] .textarea { resize: both; }\n .field[data-auto-grow] .textarea { field-sizing: content; }\n .field[data-invalid] .textarea { border-color: var(--textarea-border-invalid); }\n}\n","import type { ReactNode, Ref, TextareaHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Textarea.module.css';\n\nexport type TextareaSize = 'sm' | 'md' | 'lg';\nexport type TextareaResize = 'vertical' | 'none' | 'both';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n /** Visible label. Always rendered. */\n label: ReactNode;\n description?: ReactNode;\n /** Presence marks the control invalid and announces the message. */\n error?: ReactNode;\n /** @default 'md' */\n size?: TextareaSize;\n /** @default 'vertical' */\n resize?: TextareaResize;\n /** Grow with the content (`field-sizing: content`, where supported). @default false */\n autoGrow?: boolean;\n /** The `<textarea>` element. */\n ref?: Ref<HTMLTextAreaElement>;\n /** Applied to the wrapper, not the textarea. */\n className?: string;\n}\n\n/**\n * A multi-line text input on top of Field. Same contract as TextField;\n * its own `--textarea-*` tokens so it can diverge. `rows` sets the initial\n * height; `autoGrow` follows the content in browsers that support\n * `field-sizing`, and falls back to `rows` elsewhere.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `textarea` wired through Field; `autoGrow` uses `field-sizing: content` where supported and falls back to `rows`.\n * @do Set `rows` to the typical length of the answer.\n * @dont Disable `resize` without giving the field enough rows.\n */\nexport function Textarea({\n label,\n description,\n error,\n size = 'md',\n resize = 'vertical',\n autoGrow = false,\n rows = 3,\n required,\n disabled,\n readOnly,\n id,\n className,\n ref,\n 'aria-describedby': describedBy,\n ...rest\n}: TextareaProps) {\n const invalid = error !== undefined && error !== null && error !== false && error !== '';\n return (\n <Field\n id={id}\n invalid={invalid}\n disabled={Boolean(disabled)}\n required={Boolean(required)}\n className={classes(styles.field, className)}\n data-size={size}\n data-resize={resize}\n data-auto-grow={autoGrow ? '' : undefined}\n data-readonly={readOnly ? '' : undefined}\n >\n <Field.Label>{label}</Field.Label>\n <Field.Control aria-describedby={describedBy}>\n <textarea {...rest} ref={ref} rows={rows} readOnly={readOnly} className={styles.textarea} />\n </Field.Control>\n {description && <Field.Description>{description}</Field.Description>}\n {invalid && <Field.Error>{error}</Field.Error>}\n </Field>\n );\n}\n\nTextarea.displayName = 'Textarea';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/date-picker/DatePicker.module.css","../src/date-picker/DatePicker.tsx"],"names":["root","control","input","segment","button","popover","dialog","AriaDatePicker","AriaGroup","AriaDateInput","AriaDateSegment","AriaButton","CalendarIcon","AriaPopover","AriaDialog","AriaCalendar"],"mappings":"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","file":"chunk-UX42PQLT.js","sourcesContent":["/*\n * Every value is a token (--date-picker-*); the calendar reads --calendar-*.\n * The control is a group drawn like a text field around the date segments.\n * React Aria writes the state: data-focus-within, data-hovered,\n * data-disabled, data-invalid on the group; data-placeholder, data-focused\n * on each segment.\n */\n\n@layer components {\n .root {\n --_height: var(--date-picker-height-md);\n --_font-size: var(--date-picker-font-size-md);\n --_border: var(--date-picker-border-default);\n\n font-family: var(--date-picker-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--date-picker-height-sm);\n --_font-size: var(--date-picker-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--date-picker-height-lg);\n --_font-size: var(--date-picker-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--date-picker-border-invalid); }\n }\n\n .control {\n display: flex;\n align-items: center;\n min-block-size: var(--_height);\n padding-inline-start: var(--date-picker-padding-inline);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--date-picker-radius);\n background-color: var(--date-picker-bg);\n color: var(--date-picker-fg);\n font-size: var(--_font-size);\n transition: border-color var(--date-picker-motion-duration) var(--motion-easing-standard);\n\n &[data-focus-within] {\n border-color: var(--date-picker-border-focus);\n outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n outline-offset: var(--date-picker-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-hovered]:not([data-focus-within], [data-disabled]) {\n border-color: var(--date-picker-border-hover);\n }\n }\n\n .input {\n display: flex;\n flex: 1;\n align-items: center;\n }\n\n .segment {\n padding-inline: var(--date-picker-segment-padding-inline);\n border-radius: var(--date-picker-segment-radius);\n font-variant-numeric: tabular-nums;\n outline: none;\n caret-color: transparent;\n\n &[data-type=\"literal\"] {\n padding-inline: 0;\n }\n\n &[data-placeholder] {\n color: var(--date-picker-segment-fg-placeholder);\n }\n\n &[data-focused] {\n background-color: var(--date-picker-segment-bg-focus);\n color: var(--date-picker-fg);\n }\n }\n\n .button {\n display: grid;\n place-items: center;\n inline-size: var(--date-picker-icon-size);\n block-size: calc(var(--_height) - 2 * var(--size-hairline));\n padding: 0;\n border: none;\n border-radius: var(--date-picker-radius);\n background-color: transparent;\n color: var(--date-picker-icon);\n cursor: pointer;\n\n &[data-focus-visible] {\n outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n outline-offset: calc(-1 * var(--date-picker-focus-ring-width));\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n }\n\n .popover {\n padding-block-start: var(--date-picker-gap);\n animation: fade var(--date-picker-popover-duration) var(--motion-easing-standard);\n\n &[data-placement=\"top\"] {\n padding-block: 0 var(--date-picker-gap);\n }\n }\n\n .dialog {\n border: var(--size-hairline) solid var(--date-picker-dialog-border);\n border-radius: var(--date-picker-dialog-radius);\n background-color: var(--date-picker-dialog-bg);\n box-shadow: var(--date-picker-popover-shadow);\n outline: none;\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .popover {\n animation: none;\n }\n }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n Button as AriaButton,\n Calendar as AriaCalendar,\n DateInput as AriaDateInput,\n DatePicker as AriaDatePicker,\n DateSegment as AriaDateSegment,\n Dialog as AriaDialog,\n Group as AriaGroup,\n I18nProvider,\n Popover as AriaPopover,\n} from 'react-aria-components';\nimport { Calendar as CalendarIcon } from '@pearpages/pulp-icons';\nimport { CalendarGrid, calendarRootClass } from '../calendar/CalendarGrid';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { fromDate, toDate } from '../internal/dates';\nimport styles from './DatePicker.module.css';\n\nexport type DatePickerSize = 'sm' | 'md' | 'lg';\n\nexport interface DatePickerProps {\n /** Visible label. Always rendered. */\n label: ReactNode;\n description?: ReactNode;\n /** Presence marks the control invalid and announces the message. */\n error?: ReactNode;\n /** The date as `YYYY-MM-DD` (controlled). `null` is \"none\". */\n value?: string | null;\n defaultValue?: string | null;\n onChange?: (value: string | null) => void;\n /** Earliest selectable date, `YYYY-MM-DD`. */\n min?: string;\n /** Latest selectable date, `YYYY-MM-DD`. */\n max?: string;\n /** Marks single dates as unavailable in the calendar. */\n isDateUnavailable?: (date: string) => boolean;\n /** BCP 47 tag. Segment order, month names and the first weekday follow it; defaults to the browser's. */\n locale?: string;\n /** @default 'md' */\n size?: DatePickerSize;\n /** @default false */\n required?: boolean;\n /** @default false */\n disabled?: boolean;\n /** @default false */\n readOnly?: boolean;\n /** Submitted with a form as `YYYY-MM-DD` through a hidden input. */\n name?: string;\n autoFocus?: boolean;\n /** Applied to the field wrapper. */\n className?: string;\n /** The wrapper element. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A date field with a calendar popover, on React Aria's date picker\n * (decision record 001): the date is typed segment by segment in the\n * user's locale order (arrows and digits, no free text to parse), and the\n * button opens the same month grid as Calendar. Dates cross the API as\n * ISO strings.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label holding one `spinbutton` per date segment (day, month, year in the locale's order), a button that opens a `dialog` containing the Calendar grid, and a hidden input for forms. Arrows step a segment, digits type it, Escape closes the dialog and returns focus.\n * @do Pass `locale` when the app's language is not the browser's.\n * Use `min`/`max` for ranges the user cannot choose outside of.\n * @dont Parse the value yourself; it is always `YYYY-MM-DD`.\n * Use it for a date of birth decades away; the segments are faster than the calendar.\n */\nexport function DatePicker({\n label,\n description,\n error,\n value,\n defaultValue,\n onChange,\n min,\n max,\n isDateUnavailable,\n locale,\n size = 'md',\n required = false,\n disabled = false,\n readOnly = false,\n name,\n autoFocus,\n className,\n ref,\n}: DatePickerProps) {\n const invalid = isPresent(error);\n const picker = (\n <AriaDatePicker\n ref={ref}\n className={ariaFieldClass(styles.root, className)}\n data-size={size}\n value={toDate(value)}\n defaultValue={toDate(defaultValue)}\n onChange={(date) => onChange?.(fromDate(date))}\n minValue={toDate(min) ?? undefined}\n maxValue={toDate(max) ?? undefined}\n isDateUnavailable={isDateUnavailable && ((date) => isDateUnavailable(fromDate(date) ?? ''))}\n isRequired={required}\n isDisabled={disabled}\n isReadOnly={readOnly}\n isInvalid={invalid}\n name={name}\n autoFocus={autoFocus}\n granularity=\"day\"\n >\n <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n <AriaGroup className={styles.control}>\n <AriaDateInput className={styles.input}>{(segment) => <AriaDateSegment segment={segment} className={styles.segment} />}</AriaDateInput>\n <AriaButton className={styles.button}>\n <Icon size=\"inherit\">\n <CalendarIcon />\n </Icon>\n </AriaButton>\n </AriaGroup>\n <AriaFieldDescription>{description}</AriaFieldDescription>\n <AriaFieldError>{error}</AriaFieldError>\n <AriaPopover className={styles.popover} placement=\"bottom start\">\n <AriaDialog className={styles.dialog}>\n <AriaCalendar className={calendarRootClass}>\n <CalendarGrid />\n </AriaCalendar>\n </AriaDialog>\n </AriaPopover>\n </AriaDatePicker>\n );\n return locale ? <I18nProvider locale={locale}>{picker}</I18nProvider> : picker;\n}\n\nDatePicker.displayName = 'DatePicker';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/Button.module.css","../src/button/Button.tsx"],"names":["button","label"],"mappings":"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","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 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/picker/Picker.module.css","../src/picker/Picker.tsx"],"names":["root","trigger","value","chevron","popover","list","AriaSelect","AriaButton","AriaSelectValue","AriaPopover","AriaListBox"],"mappings":";;;;;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EAOG,IAAA,EAAAA,aAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAkCA,KAAA,EAAAC,cAAAA;AAAA,EAWA,OAAA,EAAAC,gBAAAA;AAAA,EAKA,OAAA,EAAAC,gBAAAA;AAAA,EAUA,IAAA,EAAAC;AAAA,CAAA;AC9BI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,cAAA;AAAA,EACd,YAAA,GAAe,YAAA;AAAA,EACf,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,OAAA,GAAU,UAAU,KAAK,CAAA;AAC/B,EAAA,uBACE,IAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA,CAAe,cAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MAChD,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAa,KAAA;AAAA,MACb,kBAAA,EAAoB,YAAA;AAAA,MACpB,iBAAA,EAAmB,CAAC,GAAA,KAAQ,QAAA,GAAW,QAAQ,IAAA,GAAO,IAAA,GAAO,MAAA,CAAO,GAAG,CAAC,CAAA;AAAA,MACxE,WAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MACA,SAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAqB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBAC3C,IAAA,CAACC,MAAA,EAAA,EAAW,GAAA,EAAU,SAAA,EAAW,eAAO,OAAA,EACtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAACC,WAAA,EAAA,EAAgB,SAAA,EAAW,cAAA,CAAO,KAAA,EAAO,CAAA;AAAA,0BAC1C,GAAA,CAAC,QAAK,IAAA,EAAK,SAAA,EAAU,WAAW,cAAA,CAAO,OAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,EACf;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,wBAAsB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBACnC,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACvB,GAAA,CAACC,WAAY,SAAA,EAAW,cAAA,CAAO,SAAS,SAAA,EAAU,cAAA,EAChD,8BAACC,OAAA,EAAA,EAAY,SAAA,EAAW,UAAU,cAAA,CAAO,IAAI,GAAG,KAAA,EAAc,gBAAA,EAAkB,MAAM,WAAA,CAAY,YAAY,CAAA,EAC3G,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-WDWTQKIJ.js","sourcesContent":["/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer components {\n .root {\n --_height: var(--picker-height-md);\n --_font-size: var(--picker-font-size-md);\n --_border: var(--picker-border-default);\n\n font-family: var(--picker-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--picker-height-sm);\n --_font-size: var(--picker-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--picker-height-lg);\n --_font-size: var(--picker-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--picker-border-invalid); }\n }\n\n .trigger {\n display: flex;\n align-items: center;\n gap: var(--picker-gap);\n inline-size: 100%;\n min-block-size: var(--_height);\n padding-block: 0;\n padding-inline: var(--picker-padding-inline);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--picker-radius);\n background-color: var(--picker-bg);\n color: var(--picker-fg);\n font-family: inherit;\n font-size: var(--_font-size);\n text-align: start;\n cursor: pointer;\n transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n &[data-focus-visible] {\n border-color: var(--picker-border-focus);\n outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n outline-offset: var(--picker-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-hovered]:not([data-focus-visible], [data-disabled]) {\n border-color: var(--picker-border-hover);\n }\n }\n\n .value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-placeholder] {\n color: var(--picker-placeholder);\n }\n }\n\n .chevron {\n flex: none;\n color: var(--picker-icon);\n }\n\n .popover {\n inline-size: var(--trigger-width);\n padding-block-start: var(--picker-gap);\n animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n &[data-placement=\"top\"] {\n padding-block: 0 var(--picker-gap);\n }\n }\n\n .list {\n box-shadow: var(--picker-popover-shadow);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .popover {\n animation: none;\n }\n }\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Button as AriaButton, ListBox as AriaListBox, Popover as AriaPopover, Select as AriaSelect, SelectValue as AriaSelectValue } from 'react-aria-components';\nimport { ChevronDown } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { listClass, renderEmpty, renderOption, type ListboxItem } from '../listbox/ListboxOptions';\nimport styles from './Picker.module.css';\n\nexport type PickerItem = ListboxItem;\nexport type PickerSize = 'sm' | 'md' | 'lg';\n\nexport interface PickerProps {\n /** Visible label. Always rendered. */\n label: ReactNode;\n description?: ReactNode;\n /** Presence marks the control invalid and announces the message. */\n error?: ReactNode;\n /** The options. Ids are the values. */\n items: readonly PickerItem[];\n /** Selected id (controlled). `null` is \"nothing selected\". */\n value?: string | null;\n defaultValue?: string | null;\n onChange?: (value: string | null) => void;\n /** Shown in the control until a value is chosen. @default 'Select…' */\n placeholder?: string;\n /** Shown when `items` is empty. @default 'No options' */\n emptyMessage?: ReactNode;\n /** @default 'md' */\n size?: PickerSize;\n /** @default false */\n required?: boolean;\n /** @default false */\n disabled?: boolean;\n /** Submitted with a form through a hidden native select. */\n name?: string;\n autoFocus?: boolean;\n /** Applied to the field wrapper, not the button. */\n className?: string;\n /** The trigger `<button>`. */\n ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A single-choice select with rich options (a description line, consistent\n * styling in every browser), on React Aria's select (decision record 001):\n * a button opens a listbox, arrows and typing move, Enter chooses, Escape\n * closes, and a hidden native select carries the value in forms. For a\n * plain list of words, the native `Select` is the default; for several\n * choices at once, use Listbox.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `button` named by the label with `aria-haspopup=\"listbox\"` and `aria-expanded`; the popup is a `listbox` with selected and disabled options; a hidden native select carries `name` and value for forms. Arrows open and move, typing jumps, Enter chooses, Escape closes and returns focus.\n * @do Use a `description` line on options when the label alone is ambiguous.\n * Prefer the native Select for a plain list of words.\n * @dont Use `placeholder` as the only label.\n */\nexport function Picker({\n label,\n description,\n error,\n items,\n value,\n defaultValue,\n onChange,\n placeholder = 'Select…',\n emptyMessage = 'No options',\n size = 'md',\n required = false,\n disabled = false,\n name,\n autoFocus,\n className,\n ref,\n}: PickerProps) {\n const invalid = isPresent(error);\n return (\n <AriaSelect\n className={ariaFieldClass(styles.root, className)}\n data-size={size}\n selectedKey={value}\n defaultSelectedKey={defaultValue}\n onSelectionChange={(key) => onChange?.(key === null ? null : String(key))}\n placeholder={placeholder}\n isRequired={required}\n isDisabled={disabled}\n isInvalid={invalid}\n name={name}\n autoFocus={autoFocus}\n >\n <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n <AriaButton ref={ref} className={styles.trigger}>\n <AriaSelectValue className={styles.value} />\n <Icon size=\"inherit\" className={styles.chevron}>\n <ChevronDown />\n </Icon>\n </AriaButton>\n <AriaFieldDescription>{description}</AriaFieldDescription>\n <AriaFieldError>{error}</AriaFieldError>\n <AriaPopover className={styles.popover} placement=\"bottom start\">\n <AriaListBox className={listClass(styles.list)} items={items} renderEmptyState={() => renderEmpty(emptyMessage)}>\n {renderOption}\n </AriaListBox>\n </AriaPopover>\n </AriaSelect>\n );\n}\n\nPicker.displayName = 'Picker';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/radio/Radio.module.css","../src/radio/Radio.tsx"],"names":["group","items","radio","label","input"],"mappings":"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","file":"chunk-XDVS7HX7.js","sourcesContent":["/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer components {\n .group {\n --_size: var(--radio-size-md);\n --_border: var(--radio-border);\n\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n &[data-invalid] { --_border: var(--radio-border-invalid); }\n }\n\n .items {\n display: flex;\n flex-direction: column;\n gap: var(--radio-group-gap);\n\n &[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n gap: var(--radio-group-gap) var(--space-4);\n }\n }\n\n .radio {\n display: inline-flex;\n align-items: center;\n gap: var(--radio-gap);\n cursor: pointer;\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n }\n\n .label {\n font-size: var(--field-label-font-size);\n color: var(--field-label-fg);\n }\n\n .input {\n display: grid;\n flex: none;\n place-content: center;\n inline-size: var(--_size);\n block-size: var(--_size);\n margin: 0;\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--radio-radius);\n background-color: var(--radio-bg);\n appearance: none;\n cursor: inherit;\n transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n &::after {\n content: \"\";\n inline-size: calc(var(--_size) / 2);\n block-size: calc(var(--_size) / 2);\n border-radius: var(--radio-radius);\n background-color: var(--radio-dot);\n scale: 0;\n transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n }\n\n &:checked {\n border-color: var(--radio-border-checked);\n\n &::after {\n scale: 1;\n }\n }\n\n &:focus-visible {\n outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n outline-offset: var(--radio-focus-ring-offset);\n }\n\n &:disabled {\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :checked) {\n border-color: var(--radio-border-hover);\n }\n }\n}\n","import {\n createContext,\n useCallback,\n useContext,\n useId,\n useState,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { Field, useField } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Radio.module.css';\n\nexport type RadioSize = 'sm' | 'md' | 'lg';\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\ninterface RadioGroupContextValue {\n name: string;\n value: string | undefined;\n setValue: (value: string) => void;\n size: RadioSize;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n /** Visible group label. */\n label: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n /** Form field name shared by the radios. Generated when omitted. */\n name?: string;\n /** Controlled selected value. */\n value?: string;\n /** Initially selected value when uncontrolled. */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** @default 'vertical' */\n orientation?: RadioGroupOrientation;\n /** @default 'md' */\n size?: RadioSize;\n disabled?: boolean;\n required?: boolean;\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\n/**\n * A set of native radios under one label. The group is labelled by\n * reference (`aria-labelledby`) and described through Field, so description\n * and error apply to the whole set. Keyboard is the browser's own: arrows\n * move and select within the group. Controlled or uncontrolled by `value`.\n *\n * @status stable\n * @category Forms\n * @accessibility A `radiogroup` labelled by reference through Field and described by its description and error. Native radios: arrows move and select within the group, Tab leaves it.\n * @do Use it for two to five exclusive options that should all be visible.\n * @dont Preselect a consequential choice; leave the group empty and mark it required.\n */\nexport function RadioGroup({\n label,\n description,\n error,\n name,\n value,\n defaultValue,\n onValueChange,\n orientation = 'vertical',\n size = 'md',\n disabled = false,\n required = false,\n id,\n className,\n ref,\n children,\n ...rest\n}: RadioGroupProps) {\n const autoName = useId();\n const [uncontrolled, setUncontrolled] = useState(defaultValue);\n const controlled = value !== undefined;\n const current = controlled ? value : uncontrolled;\n const setValue = useCallback(\n (next: string) => {\n if (!controlled) setUncontrolled(next);\n onValueChange?.(next);\n },\n [controlled, onValueChange],\n );\n const invalid = error !== undefined && error !== null && error !== false && error !== '';\n\n return (\n <RadioGroupContext.Provider value={{ name: name ?? autoName, value: current, setValue, size }}>\n <Field id={id} invalid={invalid} disabled={disabled} required={required} className={classes(styles.group, className)} data-size={size}>\n <Field.Label as=\"span\">{label}</Field.Label>\n <RadioGroupItems {...rest} ref={ref} orientation={orientation}>\n {children}\n </RadioGroupItems>\n {description && <Field.Description>{description}</Field.Description>}\n {invalid && <Field.Error>{error}</Field.Error>}\n </Field>\n </RadioGroupContext.Provider>\n );\n}\n\ninterface RadioGroupItemsProps extends HTMLAttributes<HTMLDivElement> {\n orientation: RadioGroupOrientation;\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nfunction RadioGroupItems({ orientation, className, ref, children, ...rest }: RadioGroupItemsProps) {\n const field = useField();\n return (\n <div\n {...rest}\n ref={ref}\n id={field.id}\n role=\"radiogroup\"\n aria-labelledby={field.labelId}\n aria-describedby={field.describedBy}\n aria-invalid={field.invalid || undefined}\n aria-required={field.required || undefined}\n className={classes(styles.items, className)}\n data-orientation={orientation}\n >\n {children}\n </div>\n );\n}\n\nexport interface RadioProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'onChange'> {\n /** The value this radio contributes to the group. */\n value: string;\n /** Visible label beside the radio. */\n label: ReactNode;\n /** The `<input>` element. */\n ref?: Ref<HTMLInputElement>;\n /** Applied to the wrapping label, not the input. */\n className?: string;\n}\n\n/** One option of a RadioGroup. Must be rendered inside `RadioGroup`. */\n/**\n * One option of a RadioGroup: a native radio with its own visible label.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `input type=\"radio\"` labelled by its visible text; the group semantics, description and error come from RadioGroup.\n * @do Render it only inside RadioGroup.\n * @dont Disable a single radio without saying why in its label or the group description.\n */\nexport function Radio({ value, label, disabled, className, ref, ...rest }: RadioProps) {\n const group = useContext(RadioGroupContext);\n const field = useField();\n if (!group) throw new Error('Radio must be rendered inside <RadioGroup>');\n const checked = group.value === value;\n return (\n <label className={classes(styles.radio, className)} data-checked={checked ? '' : undefined} data-disabled={disabled || field.disabled ? '' : undefined}>\n <input\n {...rest}\n ref={ref}\n type=\"radio\"\n className={styles.input}\n name={group.name}\n value={value}\n checked={checked}\n onChange={() => group.setValue(value)}\n disabled={disabled || field.disabled}\n required={field.required}\n />\n <span className={styles.label}>{label}</span>\n </label>\n );\n}\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/sheet/Sheet.module.css","../src/sheet/Sheet.tsx"],"names":["content"],"mappings":";;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EASG,OAAA,EAAAA;AAAA,CAAA;AC8BI,SAAS,MAAM,KAAA,EAAmB;AACvC,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CAAA;AAC5B;AAMA,SAAS,aAAa,EAAE,SAAA,GAAY,OAAO,SAAA,EAAW,GAAG,MAAK,EAAsB;AAClF,EAAA,uBAAO,GAAA,CAAC,MAAA,CAAO,OAAA,EAAP,EAAgB,GAAG,IAAA,EAAM,SAAA,EAAsB,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,OAAA,EAAS,SAAS,CAAA,EAAG,CAAA;AACxG;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AACpB,YAAA,CAAa,WAAA,GAAc,eAAA;AAC3B,KAAA,CAAM,UAAU,MAAA,CAAO,OAAA;AACvB,KAAA,CAAM,OAAA,GAAU,YAAA;AAChB,KAAA,CAAM,SAAS,MAAA,CAAO,MAAA;AACtB,KAAA,CAAM,QAAQ,MAAA,CAAO,KAAA;AACrB,KAAA,CAAM,cAAc,MAAA,CAAO,WAAA;AAC3B,KAAA,CAAM,QAAQ,MAAA,CAAO,KAAA;AACrB,KAAA,CAAM,OAAO,MAAA,CAAO,IAAA;AACpB,KAAA,CAAM,SAAS,MAAA,CAAO,MAAA","file":"chunk-XUROYTJ7.js","sourcesContent":["/*\n * The vendor (@pearpages/modals) docks the dialog and sizes it from three variables it declares on\n * :root. This class sits on the dialog element itself, so its own declarations beat the inherited\n * :root defaults whatever the cascade layer or import order: no specificity fight with the\n * vendor's unlayered rules, which only *read* these. Colour, type and motion timing come from\n * Dialog's mapping on the portal root.\n */\n\n@layer components {\n .content {\n --modal-width-sheet: var(--sheet-width);\n --modal-height-sheet: var(--sheet-height);\n --modal-animation-translate-sheet: var(--sheet-motion-translate);\n }\n}\n","import type { ComponentProps } from 'react';\nimport { Dialog, type DialogProps } from '../dialog';\nimport { classes } from '../internal/classes';\nimport styles from './Sheet.module.css';\n\nexport type SheetProps = DialogProps;\n\n/** The edge a sheet docks to. `start` and `end` follow the writing direction. */\nexport type SheetPlacement = 'start' | 'end' | 'top' | 'bottom';\n\nexport interface SheetContentProps extends Omit<ComponentProps<typeof Dialog.Content>, 'placement'> {\n /**\n * The edge the sheet docks to. `start` and `end` take `--sheet-width` and the full height;\n * `top` and `bottom` take the full width and `--sheet-height`. There is no `center`: a centred\n * sheet is a Dialog.\n * @default 'end'\n */\n placement?: SheetPlacement;\n}\n\n/**\n * A dialog docked to an edge of the viewport: a side panel for detail or settings that keeps the\n * page in view, or a bottom sheet on a phone. It is Dialog with a `placement`: the same parts\n * (`Sheet.Trigger`, `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Description`,\n * `Sheet.Close`, `Sheet.Body`, `Sheet.Footer`), the same focus trap, stacking and dismissal, and\n * the same colours and type, from Dialog's tokens. Only the size is Sheet's: `--sheet-width`,\n * `--sheet-height` and `--sheet-motion-translate`, the distance it slides in from its edge.\n *\n * It needs what Dialog needs: `DialogSystem` mounted once near the app root, and\n * `@pearpages/modals/styles.css` imported into the `vendor` layer.\n *\n * @status experimental\n * @category Overlays\n * @accessibility Dialog's: `role=\"dialog\"` with `aria-modal`, named by `Sheet.Title` and described by `Sheet.Description`; focus moves in on open, is trapped, and returns to the trigger on close; Escape and the backdrop dismiss it; the page behind is inert. Docking changes the layout only, never the semantics.\n * @do Always render a `Sheet.Title`.\n * @do Dock to `end` for detail and settings beside the page, and to `bottom` for choices on a narrow screen.\n * @dont Use it for a short confirmation; a centred Dialog reads as more urgent and takes less room.\n * @dont Put the page's primary content in a sheet: it is modal, so everything behind it is out of reach.\n */\nexport function Sheet(props: SheetProps) {\n return <Dialog {...props} />;\n}\n\n/**\n * The docked dialog element. Dialog's `Content`, with `placement` and the class that maps pulp's\n * `--sheet-*` tokens onto the vendor's sheet variables.\n */\nfunction SheetContent({ placement = 'end', className, ...rest }: SheetContentProps) {\n return <Dialog.Content {...rest} placement={placement} className={classes(styles.content, className)} />;\n}\n\nSheet.displayName = 'Sheet';\nSheetContent.displayName = 'Sheet.Content';\nSheet.Trigger = Dialog.Trigger;\nSheet.Content = SheetContent;\nSheet.Header = Dialog.Header;\nSheet.Title = Dialog.Title;\nSheet.Description = Dialog.Description;\nSheet.Close = Dialog.Close;\nSheet.Body = Dialog.Body;\nSheet.Footer = Dialog.Footer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tooltip/Tooltip.module.css","../src/tooltip/Tooltip.tsx"],"names":["tooltip"],"mappings":";;;;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAGG,OAAA,EAAAA,iBAkBY,CAAA;ACUR,SAAS,OAAA,CAAQ,EAAE,OAAA,EAAS,SAAA,GAAY,OAAO,KAAA,GAAQ,GAAA,EAAK,UAAS,EAAiB;AAC3F,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,OAAsC,MAAS,CAAA;AAC7D,EAAA,MAAM,EAAE,IAAA,EAAM,aAAA,EAAe,SAAA,EAAW,QAAA,KAAa,mBAAA,CAAoB,EAAE,IAAA,EAAM,SAAA,EAAW,CAAA;AAE5F,EAAA,MAAM,IAAA,GAAO,WAAA;AAAA,IACX,CAAC,IAAA,KAAiB;AAChB,MAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,MAAA,IAAI,IAAA,KAAS,CAAA,EAAG,OAAA,CAAQ,IAAI,CAAA;AAAA,iBACjB,OAAA,GAAU,UAAA,CAAW,MAAM,OAAA,CAAQ,IAAI,GAAG,IAAI,CAAA;AAAA,IAC3D,CAAA;AAAA,IACA;AAAC,GACH;AACA,EAAA,MAAM,IAAA,GAAO,YAAY,MAAM;AAC7B,IAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM,MAAM,YAAA,CAAa,MAAM,OAAO,CAAA,EAAG,EAAE,CAAA;AACrD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,QAAA,EAAU,IAAA,EAAK;AAAA,IACnC,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,SAAS,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAIf,EAAA,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,QAAA,EAAU;AAAA,IACjD,KAAK,IAAA,CAAK,YAAA;AAAA,IACV,YAAA,EAAc,MAAM,IAAA,CAAK,KAAK,CAAA;AAAA,IAC9B,YAAA,EAAc,IAAA;AAAA,IACd,OAAA,EAAS,MAAM,IAAA,CAAK,CAAC,CAAA;AAAA,IACrB,MAAA,EAAQ,IAAA;AAAA,IACR,kBAAA,EAAoB,OAAO,EAAA,GAAK;AAAA,GACjC,CAAA;AAED,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA,IACC,YAAA;AAAA;AAAA,sBAEE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,IAAA,CAAK,aAAa,EAAA,EAAQ,IAAA,EAAK,SAAA,EAAU,SAAA,EAAW,gBAAO,OAAA,EAAS,gBAAA,EAAgB,QAAA,EAAU,KAAA,EAAO,eAC5G,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,MACA,QAAA,CAAS;AAAA;AACX,GAAA,EACJ,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-Y4TZA77G.js","sourcesContent":["/* Every value is a token (--tooltip-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n .tooltip {\n --_gap: var(--tooltip-gap);\n\n position: fixed;\n z-index: var(--tooltip-layer);\n inset-block-start: var(--_y);\n inset-inline-start: var(--_x);\n max-inline-size: var(--tooltip-max-width);\n padding-block: var(--tooltip-padding-block);\n padding-inline: var(--tooltip-padding-inline);\n border-radius: var(--tooltip-radius);\n background-color: var(--tooltip-bg);\n color: var(--tooltip-fg);\n font-family: var(--font-family-body);\n font-size: var(--tooltip-font-size);\n line-height: var(--font-line-height-normal);\n box-shadow: var(--tooltip-shadow);\n pointer-events: none;\n animation: fade var(--tooltip-duration) var(--motion-easing-standard);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .tooltip {\n animation: none;\n }\n }\n}\n","import { useCallback, useEffect, useId, useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderAsChild } from '../internal/asChild';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport styles from './Tooltip.module.css';\n\nexport type TooltipPlacement = FloatingPlacement;\n\nexport interface TooltipProps {\n /** The tooltip text. Supplementary only: it must not be the control's only name. */\n content: ReactNode;\n /** Preferred side; flips when there is no room. @default 'top' */\n placement?: TooltipPlacement;\n /** Hover delay in milliseconds. Focus shows immediately. @default 300 */\n delay?: number;\n /** The single element that owns the tooltip; it receives the hover, focus and `aria-describedby` wiring. */\n children: ReactElement;\n}\n\n/**\n * A short description shown on hover or focus and linked with\n * `aria-describedby` while visible. Never the only name of a control: use it\n * for extra detail, and give icon-only controls a real label. Escape hides it.\n *\n * @status stable\n * @category Overlays\n * @accessibility Shown on hover after a delay and on focus immediately; the trigger gets `aria-describedby` pointing at the `tooltip` while it is visible; Escape hides it. It is a description, never a name.\n * @do Use it for extra detail on controls that already have a name.\n * @dont Put interactive content in it.\n * Use it to name an icon-only control; use IconButton's `label`.\n */\nexport function Tooltip({ content, placement = 'top', delay = 300, children }: TooltipProps) {\n const id = useId();\n const [open, setOpen] = useState(false);\n const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n const { refs, positionStyle, placement: resolved } = useFloatingPosition({ open, placement });\n\n const show = useCallback(\n (wait: number) => {\n clearTimeout(timer.current);\n if (wait === 0) setOpen(true);\n else timer.current = setTimeout(() => setOpen(true), wait);\n },\n [],\n );\n const hide = useCallback(() => {\n clearTimeout(timer.current);\n setOpen(false);\n }, []);\n\n useEffect(() => () => clearTimeout(timer.current), []);\n useEffect(() => {\n if (!open) return;\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') hide();\n };\n document.addEventListener('keydown', onKeyDown);\n return () => document.removeEventListener('keydown', onKeyDown);\n }, [open, hide]);\n\n // The helper merges these handlers with the child's own and forwards the ref.\n // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n const trigger = renderAsChild('Tooltip', children, {\n ref: refs.setReference,\n onMouseEnter: () => show(delay),\n onMouseLeave: hide,\n onFocus: () => show(0),\n onBlur: hide,\n 'aria-describedby': open ? id : undefined,\n });\n\n return (\n <>\n {trigger}\n {open &&\n createPortal(\n // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n <div ref={refs.setFloating} id={id} role=\"tooltip\" className={styles.tooltip} data-placement={resolved} style={positionStyle}>\n {content}\n </div>,\n document.body,\n )}\n </>\n );\n}\n\nTooltip.displayName = 'Tooltip';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/internal/AriaField.module.css"],"names":["field","label","required","description","error"],"mappings":";AAAA,IAAA,iBAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,iBAAAA;AAAA,EAOA,KAAA,EAAAC,iBAAAA;AAAA,EAMA,QAAA,EAAAC,oBAAAA;AAAA,EAKA,WAAA,EAAAC,uBAAAA;AAAA,EAMA,KAAA,EAAAC;AAAA","file":"chunk-YUHS5S5Y.js","sourcesContent":["/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n font-family: var(--font-family-body);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/visually-hidden/VisuallyHidden.tsx"],"names":["root"],"mappings":";;;;AAAA,IAAA,sBAAA,GAAA;AAAA,EAGG,IAAA,EAAAA;AAAA,CAAA;;;ACoBI,SAAS,cAAA,CAAe,EAAE,EAAA,GAAK,MAAA,EAAQ,WAAW,GAAA,EAAK,QAAA,EAAU,GAAG,IAAA,EAAK,EAAwB;AACtG,EAAA,OAAO,aAAA,CAAc,EAAA,EAAI,EAAE,GAAG,IAAA,EAAM,GAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,sBAAA,CAAO,IAAA,EAAM,SAAS,CAAA,IAAK,QAAQ,CAAA;AACjG;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"chunk-Z4PN6B2C.js","sourcesContent":["/* 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","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './VisuallyHidden.module.css';\n\nexport interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {\n /** @default 'span' */\n as?: 'span' | 'div';\n ref?: Ref<HTMLElement>;\n children: ReactNode;\n}\n\n/**\n * Content for assistive technology only: read by screen readers, invisible\n * on screen, still in the accessibility tree (unlike `display: none`). Use\n * it to give icon-only controls a name or to add context a sighted user\n * gets from layout.\n *\n * @status stable\n * @category Utilities\n * @accessibility In the accessibility tree, out of the layout (clip-path, not `display: none`).\n * @do Use it for context a sighted user gets from layout (\"Sort by\", \"Step 2 of 4\").\n * @dont Hide instructions that sighted users also need.\n */\nexport function VisuallyHidden({ as = 'span', className, ref, children, ...rest }: VisuallyHiddenProps) {\n return createElement(as, { ...rest, ref, className: classes(styles.root, className) }, children);\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden';\n"]}
|