@cwncollab-org/mui-component-kit 0.0.1

package/README.md

@@ -0,0 +1,548 @@
+# Component Kit
+
+> **Note**: This documentation was generated with the assistance of AI. While we strive for accuracy, please verify any code examples or implementation details in your specific use case.
+
+A React component library built with TypeScript and Vite. This package provides a set of reusable components built on top of [Material-UI (MUI)](https://mui.com/) and [Tanstack Form](https://tanstack.com/form/latest) for form handling.
+
+
+## Features
+
+- Built on Material-UI 
+- Type-safe dialog management
+- Lazy loading support
+- Payload and result handling for dialogs
+- Form components with TanStack Form integration
+
+## Usage Examples
+
+### Basic Dialog Usage
+
+```tsx
+import { DialogsProvider, useDialogs } from '@cwncollab-org/component-kit'
+import ExampleDialog from './examples/ExampleDialog'
+
+function App() {
+  return (
+    <DialogsProvider>
+      <AppPage />
+    </DialogsProvider>
+  )
+}
+
+function AppPage() {
+  const { openDialog } = useDialogs()
+
+  return (
+    <Button
+      variant='contained'
+      onClick={() => openDialog('example-dialog', ExampleDialog)}
+    >
+      Open Basic Dialog
+    </Button>
+  )
+}
+```
+
+#### ExampleDialog Implementation
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContentText,
+  DialogContent,
+  DialogProps,
+} from '@mui/material'
+
+export default function ExampleDialog({ open, onClose, ...rest }: DialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose} {...rest}>
+      <DialogTitle>Example Dialog</DialogTitle>
+      <DialogContent>
+        <DialogContentText>This is an example dialog</DialogContentText>
+      </DialogContent>
+    </Dialog>
+  )
+}
+```
+
+### Dialog with Payload
+
+```tsx
+import { DialogsProvider, useDialogs } from '@cwncollab-org/component-kit'
+import ExampleDialogWithPayload from './examples/ExampleDialogWithPayload'
+
+function AppPage() {
+  const { openDialog } = useDialogs()
+  const [name, setName] = useState('')
+
+  return (
+    <>
+      <Input
+        value={name}
+        onChange={e => setName(e.target.value)}
+        placeholder='Enter your name'
+      />
+      <Button
+        variant='contained'
+        onClick={() => {
+          openDialog(
+            'example-dialog-with-payload',
+            ExampleDialogWithPayload,
+            { payload: { name } }
+          )
+        }}
+      >
+        Open Dialog with Payload
+      </Button>
+    </>
+  )
+}
+```
+
+#### ExampleDialogWithPayload Implementation
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContentText,
+  DialogContent,
+} from '@mui/material'
+import { DialogProps } from '../lib'
+
+type Payload = {
+  name: string
+}
+
+export default function ExampleDialogWithPayload({
+  open,
+  onClose,
+  payload,
+  ...rest
+}: DialogProps<Payload>) {
+  return (
+    <Dialog open={open} onClose={onClose} {...rest}>
+      <DialogTitle>Example Dialog</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          This is an example dialog with payload {JSON.stringify(payload)}
+        </DialogContentText>
+      </DialogContent>
+    </Dialog>
+  )
+}
+```
+
+### Dialog with Result
+
+```tsx
+import { DialogsProvider, useDialogs } from '@cwncollab-org/component-kit'
+import ExampleDialogWithResult from './examples/ExampleDialogWithResult'
+
+function AppPage() {
+  const { openDialog } = useDialogs()
+  const [result, setResult] = useState<{ name: string } | null>(null)
+
+  return (
+    <>
+      <Button
+        variant='contained'
+        onClick={async () => {
+          const result = await openDialog(
+            'example-dialog-with-result',
+            ExampleDialogWithResult,
+            { payload: { name: 'Initial Name' } }
+          )
+          if (result?.success) {
+            setResult(result.data)
+          }
+        }}
+      >
+        Open Dialog with Result
+      </Button>
+      {result && (
+        <Typography variant='body1'>
+          Result: {result.name}
+        </Typography>
+      )}
+    </>
+  )
+}
+```
+
+#### ExampleDialogWithResult Implementation
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Input,
+  DialogActions,
+  Button,
+} from '@mui/material'
+import { DialogProps } from '../lib'
+import { useState } from 'react'
+
+type Payload = {
+  name: string
+}
+
+type ResultData = {
+  name: string
+}
+
+export default function ExampleDialogWithResult({
+  open,
+  onClose,
+  payload,
+  ...rest
+}: DialogProps<Payload, ResultData>) {
+  const [name, setName] = useState(payload?.name || '')
+  return (
+    <Dialog open={open} onClose={onClose} {...rest}>
+      <DialogTitle>Example Dialog</DialogTitle>
+      <DialogContent>
+        <Input
+          value={name}
+          onChange={e => setName(e.target.value)}
+          placeholder='Name'
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={ev => onClose(ev, { success: true, data: { name } })}>
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+```
+
+### Lazy Loading Dialog
+
+```tsx
+import { DialogsProvider, useDialogs } from '@cwncollab-org/component-kit'
+import { lazy } from 'react'
+
+const ExampleDialog2 = lazy(() => import('./examples/ExampleDialog2'))
+
+function AppPage() {
+  const { openDialog } = useDialogs()
+
+  return (
+    <Button
+      variant='contained'
+      onClick={() => openDialog('example-dialog2', ExampleDialog2)}
+    >
+      Open Lazy Loaded Dialog
+    </Button>
+  )
+}
+```
+
+#### ExampleDialog2 Implementation
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContentText,
+  DialogContent,
+  DialogProps,
+} from '@mui/material'
+
+export default function ExampleDialog2({
+  open,
+  onClose,
+  ...rest
+}: DialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose} {...rest}>
+      <DialogTitle>Example Dialog</DialogTitle>
+      <DialogContent>
+        <DialogContentText>This is an example dialog 2</DialogContentText>
+      </DialogContent>
+    </Dialog>
+  )
+}
+```
+
+### Form Example with Zod Validation
+
+```tsx
+import { Box, Button, Paper, Stack, Typography } from '@mui/material'
+import { useAppForm } from '@cwncollab-org/component-kit'
+import { useState } from 'react'
+import { z } from 'zod'
+
+// Define your form schema with Zod
+const formSchema = z.object({
+  username: z.string()
+    .min(1, 'Username is required')
+    .max(20, 'Username must be less than 20 characters')
+    .regex(/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers, and underscores'),
+  email: z.string()
+    .email('Invalid email address')
+    .min(1, 'Email is required'),
+  age: z.number()
+    .min(18, 'You must be at least 18 years old')
+    .max(120, 'Please enter a valid age'),
+  subscribe: z.boolean()
+    .refine(val => val === true, 'You must subscribe to continue'),
+  role: z.string()
+    .min(1, 'Please select a role'),
+  birthDate: z.date()
+    .min(new Date('1900-01-01'), 'Please enter a valid birth date')
+    .max(new Date(), 'Birth date cannot be in the future'),
+})
+
+// Infer the form type from the schema
+type FormValues = z.infer<typeof formSchema>
+
+export function FormExample() {
+  const [value, setValue] = useState<FormValues>({
+    username: '',
+    email: '',
+    age: 18,
+    subscribe: false,
+    role: '',
+    birthDate: new Date(),
+  })
+
+  const form = useAppForm({
+    defaultValues: {
+      username: '',
+      email: '',
+      age: 18,
+      subscribe: false,
+      role: '',
+      birthDate: new Date(),
+    },
+    onSubmit: ({ value }) => {
+      setValue(value as FormValues)
+    },
+    // Add Zod validation
+    validators: { onChange: formSchema },
+  })
+
+  return (
+    <Paper sx={{ p: 2 }}>
+      <Box>
+        <Typography>Form Example with Zod Validation</Typography>
+      </Box>
+      <Box
+        component='form'
+        sx={{ py: 2 }}
+        onSubmit={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <Stack spacing={2}>
+          <form.AppField
+            name='username'
+            children={field => (
+              <field.TextField 
+                label='Username' 
+                fullWidth 
+              />
+            )}
+          />
+          <form.AppField
+            name='email'
+            children={field => (
+              <field.TextField 
+                label='Email' 
+                fullWidth
+              />
+            )}
+          />
+          <form.AppField
+            name='age'
+            children={field => (
+              <field.TextField 
+                label='Age' 
+                type='number'
+                fullWidth 
+              />
+            )}
+          />
+          <form.AppField
+            name='birthDate'
+            children={field => (
+              <field.DatePicker
+                label='Birth Date'
+              />
+            )}
+          />
+          <form.AppField
+            name='role'
+            children={field => (
+              <field.Select
+                label='Role'
+                fullWidth
+              >
+                <MenuItem value=''>
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value='admin'>Admin</MenuItem>
+                <MenuItem value='user'>User</MenuItem>
+              </field.Select>
+            )}
+          />
+          <form.AppField
+            name='subscribe'
+            children={field => (
+              <field.Checkbox 
+                label='Subscribe to newsletter'
+              />
+            )}
+          />
+          <form.AppForm>
+            <form.SubscribeButton type='submit' variant='contained'>
+              Submit
+            </form.SubscribeButton>
+            <form.SubscribeButton
+              type='reset'
+              variant='outlined'
+              onClick={() => form.reset()}
+            >
+              Reset
+            </form.SubscribeButton>
+          </form.AppForm>
+          <Typography variant='body1'>{JSON.stringify(value)}</Typography>
+        </Stack>
+      </Box>
+    </Paper>
+  )
+}
+```
+
+### MultiSelect Component
+
+The MultiSelect component provides a multiple selection dropdown with checkboxes, built on top of MUI's Select component and integrated with TanStack Form.
+
+```tsx
+import { useAppForm } from '@cwncollab-org/component-kit'
+import { z } from 'zod'
+
+// Define your form schema
+const formSchema = z.object({
+  categories: z.array(z.string()).min(1, 'Please select at least one category'),
+})
+
+// Define your options
+const categories = [
+  { value: 'tech', label: 'Technology' },
+  { value: 'sports', label: 'Sports' },
+  { value: 'news', label: 'News' },
+  { value: 'entertainment', label: 'Entertainment' },
+  { value: 'science', label: 'Science' },
+]
+
+function MyForm() {
+  const form = useAppForm({
+    defaultValues: {
+      categories: [],
+    },
+    validators: {
+      onSubmit: formSchema,
+    },
+    onSubmit: ({ value }) => {
+      console.log('Selected categories:', value.categories)
+    },
+  })
+
+  return (
+    <form.AppField
+      name="categories"
+      children={field => (
+        <field.MultiSelect
+          label="Categories"
+          required
+          options={categories}
+          labelShrink
+          size="small"
+          fullWidth
+          // Optional: Sort selected values by label or value
+          sortSelected="label"
+        />
+      )}
+    />
+  )
+}
+```
+
+#### MultiSelect Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | The label text for the select field |
+| `labelShrink` | `boolean` | `false` | Whether the label should shrink |
+| `size` | `'small' \| 'medium'` | `'medium'` | The size of the select field |
+| `fullWidth` | `boolean` | `false` | Whether the select should take full width |
+| `options` | `Array<{ value: string, label: string }> \| string[]` | `[]` | The options to display in the select |
+| `sortSelected` | `'label' \| 'value' \| false` | `false` | Sort selected values by label or value |
+| `slotProps` | `object` | - | Props for underlying MUI components |
+
+
+### Common Dialog Patterns
+
+Here are some common dialog patterns you can implement using the component kit:
+
+#### Confirmation Dialog
+
+```tsx
+import { useConfirmDialog } from '@cwncollab-org/component-kit'
+
+function MyComponent() {
+  const confirm = useConfirmDialog()
+
+  const handleClick = async () => {
+    const result = await confirm({
+      title: 'Confirm',
+      message: 'Are you sure you want to add this item to cart?',
+    })
+
+    if (result) {
+      // Proceed
+    }
+  }
+
+  return (
+    <Button onClick={handleClick}>
+      Click
+    </Button>
+  )
+}
+```
+
+#### Delete Confirmation Dialog
+
+```tsx
+import { useConfirmDeleteDialog } from '@cwncollab-org/component-kit'
+
+function MyComponent() {
+  const confirmDelete = useConfirmDeleteDialog()
+
+  const handleDelete = async () => {
+    const result = await confirmDelete({
+      title: 'Delete Item',
+      message: 'Are you sure you want to delete this item? This action cannot be undone.',
+    })
+
+    if (result) {
+      // Proceed with deletion
+    }
+  }
+
+  return (
+    <Button onClick={handleDelete}>
+      Delete Item
+    </Button>
+  )
+}
+```

package/dist/common-dialogs/ConfirmDialog.d.ts

@@ -0,0 +1,16 @@
+import { ButtonProps } from '@mui/material';
+import { DialogProps } from '../dialogs/types';
+export type ConfirmDialogOptions = {
+    title?: string;
+    message?: string | React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    slotProps?: {
+        confirm?: ButtonProps;
+        cancel?: ButtonProps;
+    };
+};
+type ConfirmDialogProps = DialogProps<ConfirmDialogOptions>;
+export declare function ConfirmDialog(props: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/common-dialogs/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/lib/common-dialogs/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAKZ,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,WAAW,CAAA;QACrB,MAAM,CAAC,EAAE,WAAW,CAAA;KACrB,CAAA;CACF,CAAA;AAED,KAAK,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAA;AAE3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA8BtD"}

package/dist/common-dialogs/ConfirmDialog.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent, DialogContentText, DialogTitle, } from '@mui/material';
+import { Dialog } from '@mui/material';
+export function ConfirmDialog(props) {
+    const { open, onClose, payload, ...rest } = props;
+    const title = payload?.title ?? '';
+    const message = payload?.message ?? '';
+    const confirmText = payload?.confirmText ?? 'Confirm';
+    const confirmProps = payload?.slotProps?.confirm ?? {
+        color: 'primary',
+        variant: 'contained',
+    };
+    confirmProps.onClick = () => onClose({}, { success: true });
+    const cancelText = payload?.cancelText ?? 'Cancel';
+    const cancelProps = payload?.slotProps?.cancel ?? {
+        color: 'primary',
+        variant: 'outlined',
+    };
+    cancelProps.onClick = () => onClose({}, { success: false });
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: 'sm', fullWidth: true, ...rest, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: message }) }), _jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [_jsx(Button, { ...cancelProps, children: cancelText }), _jsx(Button, { ...confirmProps, children: confirmText })] })] }));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/common-dialogs/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/lib/common-dialogs/ConfirmDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EAEN,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,WAAW,GACZ,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAgBtC,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,MAAM,KAAK,GAAG,OAAO,EAAE,KAAK,IAAI,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,EAAE,CAAA;IAEtC,MAAM,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,SAAS,CAAA;IACrD,MAAM,YAAY,GAAG,OAAO,EAAE,SAAS,EAAE,OAAO,IAAI;QAClD,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,WAAW;KACrB,CAAA;IACD,YAAY,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;IAC3D,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,IAAI,QAAQ,CAAA;IAClD,MAAM,WAAW,GAAG,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI;QAChD,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,UAAU;KACpB,CAAA;IACD,WAAW,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAA;IAE3D,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAC,IAAI,EAAC,SAAS,WAAK,IAAI,aACpE,KAAC,WAAW,cAAE,KAAK,GAAe,EAClC,KAAC,aAAa,cACZ,KAAC,iBAAiB,cAAE,OAAO,GAAqB,GAClC,EAChB,MAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,aACjC,KAAC,MAAM,OAAK,WAAW,YAAG,UAAU,GAAU,EAC9C,KAAC,MAAM,OAAK,YAAY,YAAG,WAAW,GAAU,IAClC,IACT,CACV,CAAA;AACH,CAAC"}

package/dist/common-dialogs/index.d.ts

@@ -0,0 +1,4 @@
+export { type ConfirmDialogOptions } from './ConfirmDialog';
+export { useConfirmDialog } from './useConfirmDialog';
+export { useConfirmDeleteDialog } from './useConfirmDeleteDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/common-dialogs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/common-dialogs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/common-dialogs/index.js

@@ -0,0 +1,3 @@
+export { useConfirmDialog } from './useConfirmDialog';
+export { useConfirmDeleteDialog } from './useConfirmDeleteDialog';
+//# sourceMappingURL=index.js.map

package/dist/common-dialogs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/common-dialogs/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/common-dialogs/useConfirmDeleteDialog.d.ts

@@ -0,0 +1,3 @@
+import { ConfirmDialogOptions } from './ConfirmDialog';
+export declare function useConfirmDeleteDialog(): (options?: ConfirmDialogOptions) => Promise<import("..").DialogResult<undefined>>;
+//# sourceMappingURL=useConfirmDeleteDialog.d.ts.map

package/dist/common-dialogs/useConfirmDeleteDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmDeleteDialog.d.ts","sourceRoot":"","sources":["../../src/lib/common-dialogs/useConfirmDeleteDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAGtD,wBAAgB,sBAAsB,eAEG,oBAAoB,mDAc5D"}

package/dist/common-dialogs/useConfirmDeleteDialog.js

@@ -0,0 +1,19 @@
+import { useConfirmDialog } from './useConfirmDialog';
+export function useConfirmDeleteDialog() {
+    const confirm = useConfirmDialog();
+    const confirmDelete = async (options) => {
+        return await confirm({
+            ...options,
+            slotProps: {
+                ...options?.slotProps,
+                confirm: {
+                    color: 'error',
+                    variant: 'contained',
+                    ...options?.slotProps?.confirm,
+                },
+            },
+        });
+    };
+    return confirmDelete;
+}
+//# sourceMappingURL=useConfirmDeleteDialog.js.map

package/dist/common-dialogs/useConfirmDeleteDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmDeleteDialog.js","sourceRoot":"","sources":["../../src/lib/common-dialogs/useConfirmDeleteDialog.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,UAAU,sBAAsB;IACpC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAA;IAClC,MAAM,aAAa,GAAG,KAAK,EAAE,OAA8B,EAAE,EAAE;QAC7D,OAAO,MAAM,OAAO,CAAC;YACnB,GAAG,OAAO;YACV,SAAS,EAAE;gBACT,GAAG,OAAO,EAAE,SAAS;gBACrB,OAAO,EAAE;oBACP,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,WAAW;oBACpB,GAAG,OAAO,EAAE,SAAS,EAAE,OAAO;iBAC/B;aACF;SACF,CAAC,CAAA;IACJ,CAAC,CAAA;IACD,OAAO,aAAa,CAAA;AACtB,CAAC"}

package/dist/common-dialogs/useConfirmDialog.d.ts

@@ -0,0 +1,3 @@
+import { ConfirmDialogOptions } from './ConfirmDialog';
+export declare function useConfirmDialog(): (options?: ConfirmDialogOptions) => Promise<import("..").DialogResult<undefined>>;
+//# sourceMappingURL=useConfirmDialog.d.ts.map

package/dist/common-dialogs/useConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/lib/common-dialogs/useConfirmDialog.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAErE,wBAAgB,gBAAgB,eAEH,oBAAoB,mDAKhD"}

package/dist/common-dialogs/useConfirmDialog.js

@@ -0,0 +1,10 @@
+import { useDialogs } from '../dialogs/dialogsHooks';
+import { ConfirmDialog } from './ConfirmDialog';
+export function useConfirmDialog() {
+    const { openDialog } = useDialogs();
+    const confirm = (options) => openDialog('confirm-dialog', ConfirmDialog, {
+        payload: options,
+    });
+    return confirm;
+}
+//# sourceMappingURL=useConfirmDialog.js.map

package/dist/common-dialogs/useConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmDialog.js","sourceRoot":"","sources":["../../src/lib/common-dialogs/useConfirmDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAwB,MAAM,iBAAiB,CAAA;AAErE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IACnC,MAAM,OAAO,GAAG,CAAC,OAA8B,EAAE,EAAE,CACjD,UAAU,CAAC,gBAAgB,EAAE,aAAa,EAAE;QAC1C,OAAO,EAAE,OAAO;KACjB,CAAC,CAAA;IACJ,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/dist/dialogs/DialogCloseButton.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onClick: () => void;
+};
+export declare function DialogCloseButton(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DialogCloseButton.d.ts.map

package/dist/dialogs/DialogCloseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../src/lib/dialogs/DialogCloseButton.tsx"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,2CAW7C"}

package/dist/dialogs/DialogCloseButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+export function DialogCloseButton(props) {
+    const { onClick } = props;
+    return (_jsx(IconButton, { sx: { position: 'absolute', right: 12, top: 12 }, onClick: onClick, children: _jsx(CloseIcon, {}) }));
+}
+//# sourceMappingURL=DialogCloseButton.js.map