@pearpages/pulp-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,20 +1,22 @@
-export { Dialog, DialogSystem } from './chunk-IDNGNQNV.js';
+export { Text } from './chunk-2ZP4ZBI5.js';
 export { Tabs } from './chunk-FH54XQ35.js';
 export { Card } from './chunk-MRQWUCBA.js';
 export { TextField } from './chunk-MXWXJZFS.js';
+export { Checkbox } from './chunk-DWE374JX.js';
 export { Inline } from './chunk-AWQHULJC.js';
 export { Stack } from './chunk-7DS4I7OJ.js';
 export { Heading } from './chunk-3GWESUGD.js';
-export { Text } from './chunk-2ZP4ZBI5.js';
+export { ToastProvider, useToast } from './chunk-DXOOW6Q6.js';
+export { Alert } from './chunk-PM4YO67Q.js';
 export { Badge } from './chunk-6I26MMQF.js';
 export { Select } from './chunk-OGIQRHNF.js';
 export { Textarea } from './chunk-TGMDOQCL.js';
 export { Radio, RadioGroup } from './chunk-XDVS7HX7.js';
 export { Switch } from './chunk-OUFAFINB.js';
-export { Checkbox } from './chunk-DWE374JX.js';
 import './chunk-BBV4L5WO.js';
 export { Field, useField } from './chunk-2PXTVZ7H.js';
-export { Combobox } from './chunk-Q6J6BMSB.js';
+export { Listbox } from './chunk-TVI5AXLE.js';
+export { Combobox } from './chunk-GUZMLYST.js';
 export { Menu } from './chunk-GTTXRDXV.js';
 export { Accordion } from './chunk-O6OBFL3Q.js';
 import './chunk-I5OZ63W7.js';
@@ -24,25 +26,24 @@ export { Tooltip } from './chunk-Y4TZA77G.js';
 import './chunk-U6QRAD73.js';
 export { Skeleton } from './chunk-ASOQ2MVR.js';
 export { Progress } from './chunk-75GTNRBH.js';
-export { ToastProvider, useToast } from './chunk-DXOOW6Q6.js';
-export { Alert } from './chunk-PM4YO67Q.js';
+export { Sheet } from './chunk-XUROYTJ7.js';
+export { Dialog, DialogSystem } from './chunk-IDNGNQNV.js';
 export { Pagination, paginationRange } from './chunk-K5QGGQOV.js';
 export { IconButton } from './chunk-FXRSZUDH.js';
 export { Button } from './chunk-KPQGS4PG.js';
 export { Spinner } from './chunk-I4KC4V6A.js';
 import './chunk-ZVDN3GRI.js';
-export { Table } from './chunk-F3OFZGGE.js';
+export { Table } from './chunk-7RQQASKS.js';
+import './chunk-CZBCGLEM.js';
 export { VisuallyHidden } from './chunk-Z4PN6B2C.js';
 export { Slider } from './chunk-P5C2U5ZF.js';
 export { DatePicker } from './chunk-UX42PQLT.js';
 export { Calendar } from './chunk-5SBKZS56.js';
 import './chunk-OXYP34CG.js';
-export { Picker } from './chunk-J5S2HVHO.js';
+export { Picker } from './chunk-WDWTQKIJ.js';
+import './chunk-T76YSNTZ.js';
 import './chunk-4HRNRTXI.js';
 import './chunk-YUHS5S5Y.js';
-export { Listbox } from './chunk-TVI5AXLE.js';
-import './chunk-CZBCGLEM.js';
-import './chunk-T76YSNTZ.js';
 export { Icon } from './chunk-ASNTNTJW.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=index.js.map

package/dist/picker.js

@@ -1,7 +1,7 @@
-export { Picker } from './chunk-J5S2HVHO.js';
+export { Picker } from './chunk-WDWTQKIJ.js';
+import './chunk-T76YSNTZ.js';
 import './chunk-4HRNRTXI.js';
 import './chunk-YUHS5S5Y.js';
-import './chunk-T76YSNTZ.js';
 import './chunk-ASNTNTJW.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=picker.js.map

package/dist/sheet.css

@@ -0,0 +1,71 @@
+/* src/dialog/Dialog.module.css */
+@layer components {
+  .Dialog_root {
+    --modal-bg: var(--dialog-surface);
+    --modal-surface-elevated: var(--dialog-surface);
+    --modal-surface-subtle: var(--dialog-surface-subtle);
+    --modal-color: var(--dialog-fg);
+    --modal-text-secondary: var(--dialog-fg-muted);
+    --modal-text-muted: var(--dialog-fg-muted);
+    --modal-backdrop-bg: var(--dialog-backdrop);
+    --modal-border-primary-color: var(--dialog-border);
+    --modal-border-hover-color: var(--dialog-border-hover);
+    --modal-border-focus-color: var(--dialog-focus);
+    --modal-border-accent-color: var(--dialog-border);
+    --modal-radius: var(--dialog-radius);
+    --modal-radius-md: var(--dialog-radius);
+    --modal-radius-sm: var(--radius-control);
+    --modal-button-radius: var(--radius-control);
+    --modal-shadow: var(--dialog-shadow);
+    --modal-padding: var(--dialog-padding);
+    --modal-spacing-xs: var(--space-1);
+    --modal-spacing-sm: var(--space-2);
+    --modal-spacing-md: var(--dialog-gap);
+    --modal-spacing-lg: var(--space-4);
+    --modal-spacing-xl: var(--space-5);
+    --modal-font-family: var(--dialog-font-family);
+    --modal-font-family-mono: var(--font-family-mono);
+    --modal-font-size-title: var(--dialog-title-font-size);
+    --modal-font-size-title-mobile: var(--dialog-title-font-size);
+    --modal-font-weight-title: var(--dialog-title-font-weight);
+    --modal-font-size-description: var(--dialog-description-font-size);
+    --modal-font-size-description-mobile: var(--dialog-description-font-size);
+    --modal-font-size-button: var(--font-size-sm);
+    --modal-close-bg: var(--dialog-close-bg);
+    --modal-close-hover-bg: var(--dialog-close-bg-hover);
+    --modal-close-text: var(--dialog-close-fg);
+    --modal-close-hover-text: var(--dialog-close-fg-hover);
+    --modal-interactive-hover: var(--color-action-secondary-hover);
+    --modal-interactive-active: var(--color-action-secondary-hover);
+    --modal-interactive-focus: var(--color-action-primary-quiet);
+    --modal-transition-duration: var(--dialog-motion-duration);
+    --modal-transition-easing: var(--dialog-motion-easing);
+    --modal-outline-width: var(--focus-ring-width);
+    --modal-outline-offset: var(--focus-ring-offset);
+    --modal-button-focus-color: var(--dialog-focus);
+    --modal-button-primary-bg: var(--color-action-primary);
+    --modal-button-primary-border: var(--color-action-primary);
+    --modal-button-primary-color: var(--color-text-on-action);
+    --modal-button-primary-hover-bg: var(--color-action-primary-hover);
+    --modal-button-primary-hover-border: var(--color-action-primary-hover);
+    --modal-button-primary-active-bg: var(--color-action-primary-active);
+    --modal-button-primary-active-border: var(--color-action-primary-active);
+    --modal-button-secondary-bg: var(--color-action-secondary);
+    --modal-button-secondary-border: var(--color-border-default);
+    --modal-button-secondary-color: var(--color-text-default);
+    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);
+    --modal-button-secondary-hover-border: var(--color-border-strong);
+    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);
+    --modal-button-secondary-active-border: var(--color-border-strong);
+  }
+}
+
+/* src/sheet/Sheet.module.css */
+@layer components {
+  .Sheet_content {
+    --modal-width-sheet: var(--sheet-width);
+    --modal-height-sheet: var(--sheet-height);
+    --modal-animation-translate-sheet: var(--sheet-motion-translate);
+  }
+}
+/*# sourceMappingURL=sheet.css.map */

package/dist/sheet.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog/Dialog.module.css","../src/sheet/Sheet.module.css"],"sourcesContent":["/*\n * The vendor (@pearpages/modals) reads --modal-* custom properties. This class\n * goes on the portal element pulp owns, so every dialog inherits pulp's\n * --dialog-* tokens and the vendor's :root defaults never apply.\n */\n\n@layer components {\n  .root {\n    --modal-bg: var(--dialog-surface);\n    --modal-surface-elevated: var(--dialog-surface);\n    --modal-surface-subtle: var(--dialog-surface-subtle);\n    --modal-color: var(--dialog-fg);\n    --modal-text-secondary: var(--dialog-fg-muted);\n    --modal-text-muted: var(--dialog-fg-muted);\n    --modal-backdrop-bg: var(--dialog-backdrop);\n    --modal-border-primary-color: var(--dialog-border);\n    --modal-border-hover-color: var(--dialog-border-hover);\n    --modal-border-focus-color: var(--dialog-focus);\n    --modal-border-accent-color: var(--dialog-border);\n    --modal-radius: var(--dialog-radius);\n    --modal-radius-md: var(--dialog-radius);\n    --modal-radius-sm: var(--radius-control);\n    --modal-button-radius: var(--radius-control);\n    --modal-shadow: var(--dialog-shadow);\n    --modal-padding: var(--dialog-padding);\n    --modal-spacing-xs: var(--space-1);\n    --modal-spacing-sm: var(--space-2);\n    --modal-spacing-md: var(--dialog-gap);\n    --modal-spacing-lg: var(--space-4);\n    --modal-spacing-xl: var(--space-5);\n    --modal-font-family: var(--dialog-font-family);\n    --modal-font-family-mono: var(--font-family-mono);\n    --modal-font-size-title: var(--dialog-title-font-size);\n    --modal-font-size-title-mobile: var(--dialog-title-font-size);\n    --modal-font-weight-title: var(--dialog-title-font-weight);\n    --modal-font-size-description: var(--dialog-description-font-size);\n    --modal-font-size-description-mobile: var(--dialog-description-font-size);\n    --modal-font-size-button: var(--font-size-sm);\n    --modal-close-bg: var(--dialog-close-bg);\n    --modal-close-hover-bg: var(--dialog-close-bg-hover);\n    --modal-close-text: var(--dialog-close-fg);\n    --modal-close-hover-text: var(--dialog-close-fg-hover);\n    --modal-interactive-hover: var(--color-action-secondary-hover);\n    --modal-interactive-active: var(--color-action-secondary-hover);\n    --modal-interactive-focus: var(--color-action-primary-quiet);\n    --modal-transition-duration: var(--dialog-motion-duration);\n    --modal-transition-easing: var(--dialog-motion-easing);\n    --modal-outline-width: var(--focus-ring-width);\n    --modal-outline-offset: var(--focus-ring-offset);\n    --modal-button-focus-color: var(--dialog-focus);\n    --modal-button-primary-bg: var(--color-action-primary);\n    --modal-button-primary-border: var(--color-action-primary);\n    --modal-button-primary-color: var(--color-text-on-action);\n    --modal-button-primary-hover-bg: var(--color-action-primary-hover);\n    --modal-button-primary-hover-border: var(--color-action-primary-hover);\n    --modal-button-primary-active-bg: var(--color-action-primary-active);\n    --modal-button-primary-active-border: var(--color-action-primary-active);\n    --modal-button-secondary-bg: var(--color-action-secondary);\n    --modal-button-secondary-border: var(--color-border-default);\n    --modal-button-secondary-color: var(--color-text-default);\n    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-hover-border: var(--color-border-strong);\n    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-active-border: var(--color-border-strong);\n  }\n}\n","/*\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"],"mappings":";AAMA;AACE,GAACA;AACC,gBAAY,IAAI;AAChB,8BAA0B,IAAI;AAC9B,4BAAwB,IAAI;AAC5B,mBAAe,IAAI;AACnB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,kCAA8B,IAAI;AAClC,gCAA4B,IAAI;AAChC,gCAA4B,IAAI;AAChC,iCAA6B,IAAI;AACjC,oBAAgB,IAAI;AACpB,uBAAmB,IAAI;AACvB,uBAAmB,IAAI;AACvB,2BAAuB,IAAI;AAC3B,oBAAgB,IAAI;AACpB,qBAAiB,IAAI;AACrB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,8BAA0B,IAAI;AAC9B,6BAAyB,IAAI;AAC7B,oCAAgC,IAAI;AACpC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,0CAAsC,IAAI;AAC1C,8BAA0B,IAAI;AAC9B,sBAAkB,IAAI;AACtB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,8BAA0B,IAAI;AAC9B,+BAA2B,IAAI;AAC/B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,iCAA6B,IAAI;AACjC,+BAA2B,IAAI;AAC/B,2BAAuB,IAAI;AAC3B,4BAAwB,IAAI;AAC5B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,kCAA8B,IAAI;AAClC,qCAAiC,IAAI;AACrC,yCAAqC,IAAI;AACzC,sCAAkC,IAAI;AACtC,0CAAsC,IAAI;AAC1C,iCAA6B,IAAI;AACjC,qCAAiC,IAAI;AACrC,oCAAgC,IAAI;AACpC,uCAAmC,IAAI;AACvC,2CAAuC,IAAI;AAC3C,wCAAoC,IAAI;AACxC,4CAAwC,IAAI;AAC9C;AACF;;;ACzDA;AACE,GAACC;AACC,yBAAqB,IAAI;AACzB,0BAAsB,IAAI;AAC1B,uCAAmC,IAAI;AACzC;AACF;","names":["root","content"]}

package/dist/sheet.d.ts

@@ -0,0 +1,58 @@
+import * as _pearpages_modals from '@pearpages/modals';
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { DialogProps, Dialog } from './dialog.js';
+
+type SheetProps = DialogProps;
+/** The edge a sheet docks to. `start` and `end` follow the writing direction. */
+type SheetPlacement = 'start' | 'end' | 'top' | 'bottom';
+interface SheetContentProps extends Omit<ComponentProps<typeof Dialog.Content>, 'placement'> {
+    /**
+     * The edge the sheet docks to. `start` and `end` take `--sheet-width` and the full height;
+     * `top` and `bottom` take the full width and `--sheet-height`. There is no `center`: a centred
+     * sheet is a Dialog.
+     * @default 'end'
+     */
+    placement?: SheetPlacement;
+}
+/**
+ * A dialog docked to an edge of the viewport: a side panel for detail or settings that keeps the
+ * page in view, or a bottom sheet on a phone. It is Dialog with a `placement`: the same parts
+ * (`Sheet.Trigger`, `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Description`,
+ * `Sheet.Close`, `Sheet.Body`, `Sheet.Footer`), the same focus trap, stacking and dismissal, and
+ * the same colours and type, from Dialog's tokens. Only the size is Sheet's: `--sheet-width`,
+ * `--sheet-height` and `--sheet-motion-translate`, the distance it slides in from its edge.
+ *
+ * It needs what Dialog needs: `DialogSystem` mounted once near the app root, and
+ * `@pearpages/modals/styles.css` imported into the `vendor` layer.
+ *
+ * @status experimental
+ * @category Overlays
+ * @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.
+ * @do Always render a `Sheet.Title`.
+ * @do Dock to `end` for detail and settings beside the page, and to `bottom` for choices on a narrow screen.
+ * @dont Use it for a short confirmation; a centred Dialog reads as more urgent and takes less room.
+ * @dont Put the page's primary content in a sheet: it is modal, so everything behind it is out of reach.
+ */
+declare function Sheet(props: SheetProps): react.JSX.Element;
+declare namespace Sheet {
+    var displayName: string;
+    var Trigger: react.FC<_pearpages_modals.ModalTriggerProps>;
+    var Content: typeof SheetContent;
+    var Header: react.FC<_pearpages_modals.ModalHeaderProps>;
+    var Title: react.FC<_pearpages_modals.ModalTitleProps>;
+    var Description: react.FC<_pearpages_modals.ModalDescriptionProps>;
+    var Close: react.FC<_pearpages_modals.ModalCloseProps>;
+    var Body: react.FC<_pearpages_modals.ModalBodyProps>;
+    var Footer: react.FC<_pearpages_modals.ModalFooterProps>;
+}
+/**
+ * The docked dialog element. Dialog's `Content`, with `placement` and the class that maps pulp's
+ * `--sheet-*` tokens onto the vendor's sheet variables.
+ */
+declare function SheetContent({ placement, className, ...rest }: SheetContentProps): react.JSX.Element;
+declare namespace SheetContent {
+    var displayName: string;
+}
+
+export { Sheet, type SheetContentProps, type SheetPlacement, type SheetProps };

package/dist/sheet.js

@@ -0,0 +1,5 @@
+export { Sheet } from './chunk-XUROYTJ7.js';
+import './chunk-IDNGNQNV.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=sheet.js.map
+//# sourceMappingURL=sheet.js.map

package/dist/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"sheet.js"}

package/dist/table.js

@@ -1,6 +1,6 @@
-export { Table } from './chunk-F3OFZGGE.js';
-import './chunk-Z4PN6B2C.js';
+export { Table } from './chunk-7RQQASKS.js';
 import './chunk-CZBCGLEM.js';
+import './chunk-Z4PN6B2C.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=table.js.map
 //# sourceMappingURL=table.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pearpages/pulp-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "pulp React components. Accessible, token-driven, CSS modules, one entry per component.",
   "license": "MIT",
   "author": "Pere Pages <hello@pearpages.com> (https://pearpages.com)",
@@ -23,6 +23,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./sheet": {
+      "types": "./dist/sheet.d.ts",
+      "import": "./dist/sheet.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "import": "./dist/pagination.js"
@@ -168,6 +172,7 @@
       "import": "./dist/button.js"
     },
     "./styles.css": "./dist/index.css",
+    "./sheet.css": "./dist/sheet.css",
     "./pagination.css": "./dist/pagination.css",
     "./table.css": "./dist/table.css",
     "./slider.css": "./dist/slider.css",
@@ -210,7 +215,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@pearpages/pulp-tokens": "^0.1.0"
+    "@pearpages/pulp-tokens": "^0.2.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
@@ -232,7 +237,7 @@
     "typescript": "^5.9.3",
     "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
-    "@pearpages/pulp-tokens": "0.1.0"
+    "@pearpages/pulp-tokens": "0.2.0"
   },
   "peerDependenciesMeta": {
     "@pearpages/pulp-tokens": {
@@ -242,7 +247,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
     "@internationalized/date": "^3.12.4",
-    "@pearpages/modals": "^0.2.0",
+    "@pearpages/modals": "^0.3.0",
     "react-aria-components": "^1.21.1",
     "@pearpages/pulp-icons": "^0.1.0"
   },
@@ -255,7 +260,7 @@
     "test:dist": "vitest run --config vitest.dist.config.ts",
     "manifest": "node scripts/manifest.mjs",
     "scaffold": "node scripts/scaffold-component.mjs",
-    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints styles.css button.css text-field.css card.css tabs.css dialog.css text.css heading.css icon.css visually-hidden.css stack.css inline.css field.css icon-button.css checkbox.css switch.css radio.css textarea.css select.css spinner.css badge.css alert.css toast.css progress.css skeleton.css tooltip.css popover.css accordion.css menu.css combobox.css listbox.css picker.css calendar.css date-picker.css slider.css table.css pagination.css component-manifest.json",
+    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints styles.css button.css text-field.css card.css tabs.css dialog.css text.css heading.css icon.css visually-hidden.css stack.css inline.css field.css icon-button.css checkbox.css switch.css radio.css textarea.css select.css spinner.css badge.css alert.css toast.css progress.css skeleton.css tooltip.css popover.css accordion.css menu.css combobox.css listbox.css picker.css calendar.css date-picker.css slider.css table.css pagination.css sheet.css component-manifest.json",
     "check:size": "size-limit"
   }
 }