@taiv/ui 1.10.0 → 1.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Info/Modals/FormModal/FormModal.d.ts +2 -1
  2. package/dist/components/Info/Modals/FormModal/FormModal.d.ts.map +1 -1
  3. package/dist/components/Info/Modals/FormModal/FormModal.js +2 -2
  4. package/dist/components/Info/Modals/FormModal/FormModal.stories.d.ts +1 -0
  5. package/dist/components/Info/Modals/FormModal/FormModal.stories.d.ts.map +1 -1
  6. package/dist/components/Info/Modals/FormModal/FormModal.stories.js +14 -0
  7. package/package.json +1 -1
package/dist/components/Info/Modals/FormModal/FormModal.d.ts CHANGED
@@ -7,10 +7,11 @@ export interface FormModalProps {
7
7
  children?: React.ReactNode;
8
8
  size?: string | number;
9
9
  modalVariant?: keyof typeof modalVariants;
10
+ confirmButtonDisabled?: boolean;
10
11
  onCancel?: () => void;
11
12
  onConfirm?: () => void;
12
13
  cancelLabel?: string;
13
14
  confirmLabel?: string;
14
15
  }
15
- export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, onCancel, onConfirm, cancelLabel, confirmLabel, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, onCancel, onConfirm, cancelLabel, confirmLabel, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
16
17
  //# sourceMappingURL=FormModal.d.ts.map
package/dist/components/Info/Modals/FormModal/FormModal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,0GAWvB,cAAc,4CA+FhB,CAAC"}
1
+ {"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,iIAYvB,cAAc,4CAgGhB,CAAC"}
package/dist/components/Info/Modals/FormModal/FormModal.js CHANGED
@@ -7,7 +7,7 @@ import { Center } from "../../../Layout/Center/Center";
7
7
  import { modalVariants } from "../variants";
8
8
  import { Group } from "../../../Layout/Group/Group";
9
9
  import { Button } from "../../../Inputs/Buttons/Button/Button";
10
- export const FormModal = ({ opened, onClose, icon, children, size = "40rem", modalVariant = "info", onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
10
+ export const FormModal = ({ opened, onClose, icon, children, size = "40rem", modalVariant = "info", confirmButtonDisabled = false, onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
11
11
  const selectedVariant = modalVariants[modalVariant];
12
12
  const iconContainer = {
13
13
  width: "4.2rem",
@@ -55,5 +55,5 @@ export const FormModal = ({ opened, onClose, icon, children, size = "40rem", mod
55
55
  body: {
56
56
  padding: "0 3.2rem 1.6rem 3.2rem",
57
57
  },
58
- }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), children && (_jsx(Stack, { gap: "0.25rem", align: "center", children: children }))] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: onConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
58
+ }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), children && (_jsx(Stack, { gap: "0.25rem", align: "center", children: children }))] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: onConfirm, variant: selectedVariant.buttonVariant, disabled: confirmButtonDisabled, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
59
59
  };
package/dist/components/Info/Modals/FormModal/FormModal.stories.d.ts CHANGED
@@ -10,5 +10,6 @@ export declare const WithTextInput: Story;
10
10
  export declare const Variants: Story;
11
11
  export declare const Sizes: Story;
12
12
  export declare const CustomLabels: Story;
13
+ export declare const ConfirmButtonDisabled: Story;
13
14
  export declare const CompleteExample: Story;
14
15
  //# sourceMappingURL=FormModal.stories.d.ts.map
package/dist/components/Info/Modals/FormModal/FormModal.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormModal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAyDrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyCnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC"}
1
+ {"version":3,"file":"FormModal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAwFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAyDrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyCnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAgCnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC"}
package/dist/components/Info/Modals/FormModal/FormModal.stories.js CHANGED
@@ -62,6 +62,13 @@ const meta = {
62
62
  defaultValue: { summary: "'info'" },
63
63
  },
64
64
  },
65
+ confirmButtonDisabled: {
66
+ control: false,
67
+ description: "Whether the modal confirm button is disabled.",
68
+ table: {
69
+ type: { summary: "boolean" },
70
+ },
71
+ },
65
72
  onCancel: {
66
73
  control: false,
67
74
  description: "Handler for the cancel button click.",
@@ -178,6 +185,13 @@ export const CustomLabels = {
178
185
  return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), cancelLabel: "No, go back", confirmLabel: "Yes, continue", children: _jsx(Title, { variant: "cardSubheader", align: "center", children: "Custom cancel and confirm button labels." }) })] }));
179
186
  },
180
187
  };
188
+ export const ConfirmButtonDisabled = {
189
+ render: () => {
190
+ const [opened, setOpened] = useState(false);
191
+ const [name, setName] = useState("");
192
+ return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Enter your name to enable the confirm button." }), _jsx(TextInput, { label: "Name", placeholder: "Enter your name", value: name, onChange: (e) => setName(e.target.value) })] }) })] }));
193
+ },
194
+ };
181
195
  export const CompleteExample = {
182
196
  render: () => {
183
197
  const [opened, setOpened] = useState(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiv/ui",
3
- "version": "1.10.0",
3
+ "version": "1.10.1",
4
4
  "author": "Taiv",
5
5
  "description": "Taiv's web UI Toolkit built on Mantine v6",
6
6
  "main": "dist/index.js",