@pittorica/dialog-react 0.22.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Davide Di Criscito
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# @pittorica/dialog-react
+
+A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+
+## Installation
+
+```bash
+npm install @pittorica/dialog-react
+```
+
+You will also need to install the core `pittorica` package which contains the CSS, and its dependencies.
+
+```bash
+npm install pittorica @pittorica/box-react @pittorica/heading-react @pittorica/button-react
+```
+
+## Usage
+
+```jsx
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogDescription,
+  DialogTitle,
+} from '@pittorica/dialog-react';
+import { Button } from '@pittorica/button-react';
+import 'pittorica/reset';
+import 'pittorica/tokens';
+
+function MyDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="elevated" onClick={() => setOpen(true)}>
+        Open Dialog
+      </Button>
+
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>
+          This is a description of the dialog content. It provides context for
+          the user regarding the action they are about to take.
+        </DialogDescription>
+        <DialogActions>
+          <Button variant="text" color="slate" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button variant="filled" onClick={() => setOpen(false)}>
+            Confirm
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+## API Reference
+
+### Dialog
+
+| Prop                  | Type                             | Description                                      | Default |
+| --------------------- | -------------------------------- | ------------------------------------------------ | ------- |
+| `open`                | `boolean`                        | If `true`, the dialog is open.                   |         |
+| `onClose`             | `() => void`                     | Callback fired when the dialog is closed.        |         |
+| `children`            | `React.ReactNode`                | The content of the dialog.                       |         |
+| `className`           | `string`                         | Optional class name for the dialog.              |         |
+| `appearance`          | `'light' \| 'dark' \| 'inherit'` | The appearance of the dialog.                    |         |
+| `closeOnOverlayClick` | `boolean`                        | If `true`, the dialog closes on overlay click.   | `true`  |
+| `closeOnEsc`          | `boolean`                        | If `true`, the dialog closes on `Esc` key press. | `true`  |
+
+### DialogTitle
+
+The `DialogTitle` component accepts all props of the `Heading` component.
+
+### DialogDescription
+
+The `DialogDescription` component accepts all props of the `Box` component.
+
+### DialogActions
+
+The `DialogActions` component accepts all props of the `Box` component.

package/dist/Dialog.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box } from '@pittorica/box-react';
+import { Heading } from '@pittorica/heading-react';
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    className?: string;
+    appearance?: 'light' | 'dark' | 'inherit';
+    /** @default true */
+    closeOnOverlayClick?: boolean;
+    /** @default true */
+    closeOnEsc?: boolean;
+}
+/**
+ * Dialog component.
+ * Provides a modal window with focus trap and scroll lock.
+ */
+export declare const Dialog: ({ open, onClose, children, className, appearance, closeOnOverlayClick, closeOnEsc, }: DialogProps) => React.ReactNode;
+/**
+ * Accessible title for the Dialog.
+ */
+export declare const DialogTitle: ({ children, id: _id, ...props }: React.ComponentProps<typeof Heading>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Accessible description for the Dialog.
+ */
+export declare const DialogDescription: ({ children, id: _id, ...props }: React.ComponentProps<typeof Box>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Container for Dialog actions (usually buttons).
+ */
+export declare const DialogActions: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAQN,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C,oBAAoB;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqBD;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,sFAQpB,WAAW,KAAG,KAAK,CAAC,SA+EtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,iCAIzB,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,4CAOtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,iCAI/B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAelC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAWxE,CAAC"}

package/dist/Dialog.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dialog } from './Dialog';
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+export declare const Basic: Story;
+export declare const Dark: Story;
+//# sourceMappingURL=Dialog.stories.d.ts.map

package/dist/Dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../src/Dialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EACL,MAAM,EAIP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,KAiCnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAsClB,CAAC"}

package/dist/Dialog.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @vitest-environment jsdom
+ */
+import '@testing-library/jest-dom';
+//# sourceMappingURL=Dialog.test.d.ts.map

package/dist/Dialog.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.test.d.ts","sourceRoot":"","sources":["../src/Dialog.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { DialogProps } from './Dialog.js';
+export { Dialog, DialogActions, DialogDescription, DialogTitle, } from './Dialog.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,WAAW,GACZ,MAAM,aAAa,CAAC"}