@duro-app/ui 0.18.0 → 0.20.0
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/dist/components/Checkbox/Checkbox.meta.d.ts.map +1 -1
- package/dist/components/Cluster/Cluster.meta.d.ts.map +1 -1
- package/dist/components/DetailPanel/DetailPanel.d.ts +53 -0
- package/dist/components/DetailPanel/DetailPanel.d.ts.map +1 -0
- package/dist/components/DetailPanel/DetailPanel.meta.d.ts +3 -0
- package/dist/components/DetailPanel/DetailPanel.meta.d.ts.map +1 -0
- package/dist/components/DetailPanel/DetailPanel.stories.d.ts +9 -0
- package/dist/components/DetailPanel/DetailPanel.stories.d.ts.map +1 -0
- package/dist/components/DetailPanel/styles.css.d.ts +126 -0
- package/dist/components/DetailPanel/styles.css.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.d.ts +58 -0
- package/dist/components/Dialog/Dialog.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.meta.d.ts +3 -0
- package/dist/components/Dialog/Dialog.meta.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.stories.d.ts +13 -0
- package/dist/components/Dialog/Dialog.stories.d.ts.map +1 -0
- package/dist/components/Dialog/styles.css.d.ts +140 -0
- package/dist/components/Dialog/styles.css.d.ts.map +1 -0
- package/dist/components/Drawer/Drawer.d.ts +62 -0
- package/dist/components/Drawer/Drawer.d.ts.map +1 -0
- package/dist/components/Drawer/Drawer.meta.d.ts +3 -0
- package/dist/components/Drawer/Drawer.meta.d.ts.map +1 -0
- package/dist/components/Drawer/Drawer.stories.d.ts +15 -0
- package/dist/components/Drawer/Drawer.stories.d.ts.map +1 -0
- package/dist/components/Drawer/styles.css.d.ts +184 -0
- package/dist/components/Drawer/styles.css.d.ts.map +1 -0
- package/dist/components/Drawer/useSwipeDismiss.d.ts +17 -0
- package/dist/components/Drawer/useSwipeDismiss.d.ts.map +1 -0
- package/dist/components/Field/Field.meta.d.ts.map +1 -1
- package/dist/components/Fieldset/Fieldset.meta.d.ts.map +1 -1
- package/dist/components/Form/Form.meta.d.ts.map +1 -1
- package/dist/components/Grid/Grid.meta.d.ts.map +1 -1
- package/dist/components/Inline/Inline.meta.d.ts.map +1 -1
- package/dist/components/Input/Input.meta.d.ts.map +1 -1
- package/dist/components/LinkButton/LinkButton.meta.d.ts.map +1 -1
- package/dist/components/Menu/Menu.meta.d.ts.map +1 -1
- package/dist/components/Panel/Panel.d.ts +27 -0
- package/dist/components/Panel/Panel.d.ts.map +1 -0
- package/dist/components/Panel/Panel.meta.d.ts +3 -0
- package/dist/components/Panel/Panel.meta.d.ts.map +1 -0
- package/dist/components/Panel/Panel.stories.d.ts +10 -0
- package/dist/components/Panel/Panel.stories.d.ts.map +1 -0
- package/dist/components/Panel/styles.css.d.ts +50 -0
- package/dist/components/Panel/styles.css.d.ts.map +1 -0
- package/dist/components/SideNav/SideNav.meta.d.ts.map +1 -1
- package/dist/components/Stack/Stack.meta.d.ts.map +1 -1
- package/dist/components/Switch/Switch.meta.d.ts.map +1 -1
- package/dist/components/Table/Table.d.ts.map +1 -1
- package/dist/components/Table/Table.stories.d.ts +1 -0
- package/dist/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.meta.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3286 -2007
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Checkbox/Checkbox.meta.ts +4 -1
- package/src/components/Cluster/Cluster.meta.ts +2 -6
- package/src/components/DetailPanel/DetailPanel.meta.ts +41 -0
- package/src/components/DetailPanel/DetailPanel.stories.tsx +270 -0
- package/src/components/DetailPanel/DetailPanel.tsx +312 -0
- package/src/components/DetailPanel/styles.css.ts +187 -0
- package/src/components/Dialog/Dialog.meta.ts +44 -0
- package/src/components/Dialog/Dialog.stories.tsx +325 -0
- package/src/components/Dialog/Dialog.tsx +310 -0
- package/src/components/Dialog/styles.css.ts +197 -0
- package/src/components/Drawer/Drawer.meta.ts +45 -0
- package/src/components/Drawer/Drawer.stories.tsx +364 -0
- package/src/components/Drawer/Drawer.tsx +370 -0
- package/src/components/Drawer/styles.css.ts +242 -0
- package/src/components/Drawer/useSwipeDismiss.ts +295 -0
- package/src/components/Field/Field.meta.ts +1 -3
- package/src/components/Fieldset/Fieldset.meta.ts +1 -3
- package/src/components/Form/Form.meta.ts +1 -4
- package/src/components/Grid/Grid.meta.ts +1 -3
- package/src/components/Inline/Inline.meta.ts +1 -2
- package/src/components/Input/Input.meta.ts +2 -7
- package/src/components/LinkButton/LinkButton.meta.ts +1 -3
- package/src/components/Menu/Menu.meta.ts +1 -4
- package/src/components/Panel/Panel.meta.ts +37 -0
- package/src/components/Panel/Panel.stories.tsx +124 -0
- package/src/components/Panel/Panel.tsx +56 -0
- package/src/components/Panel/styles.css.ts +55 -0
- package/src/components/SideNav/SideNav.meta.ts +1 -4
- package/src/components/Stack/Stack.meta.ts +1 -2
- package/src/components/Switch/Switch.meta.ts +4 -1
- package/src/components/Table/Table.stories.tsx +107 -0
- package/src/components/Table/Table.tsx +0 -1
- package/src/components/Textarea/Textarea.meta.ts +2 -6
- package/src/index.ts +4 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAqBlB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cluster.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Cluster/Cluster.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"Cluster.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Cluster/Cluster.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAkBlB,CAAA"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type DetailPanelSize = 'sm' | 'md';
|
|
3
|
+
interface RootProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Controlled open state */
|
|
6
|
+
open?: boolean;
|
|
7
|
+
/** Default open state (uncontrolled) */
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
/** Called when open state changes */
|
|
10
|
+
onOpenChange?: (open: boolean) => void;
|
|
11
|
+
/** Duration of the close animation in ms. Default: 220 */
|
|
12
|
+
closeAnimationDuration?: number;
|
|
13
|
+
}
|
|
14
|
+
declare function Root({ children, open: controlledOpen, defaultOpen, onOpenChange, closeAnimationDuration, }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
interface ContentProps {
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
/** Width of the panel. Default: 'sm' (360px) */
|
|
18
|
+
size?: DetailPanelSize;
|
|
19
|
+
/** Accessible name for the complementary landmark */
|
|
20
|
+
label: string;
|
|
21
|
+
}
|
|
22
|
+
declare function Content({ children, size, label }: ContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
23
|
+
declare function Header({ children }: {
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare function Title({ children }: {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
interface BodyProps {
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
/** Adds inner padding. Default: true */
|
|
32
|
+
padded?: boolean;
|
|
33
|
+
}
|
|
34
|
+
declare function Body({ children, padded }: BodyProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare function Footer({ children }: {
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
interface CloseProps {
|
|
39
|
+
children?: ReactNode;
|
|
40
|
+
'aria-label'?: string;
|
|
41
|
+
}
|
|
42
|
+
declare function Close({ children, 'aria-label': ariaLabel }: CloseProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare const DetailPanel: {
|
|
44
|
+
Root: typeof Root;
|
|
45
|
+
Content: typeof Content;
|
|
46
|
+
Header: typeof Header;
|
|
47
|
+
Title: typeof Title;
|
|
48
|
+
Body: typeof Body;
|
|
49
|
+
Footer: typeof Footer;
|
|
50
|
+
Close: typeof Close;
|
|
51
|
+
};
|
|
52
|
+
export {};
|
|
53
|
+
//# sourceMappingURL=DetailPanel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailPanel.d.ts","sourceRoot":"","sources":["../../../src/components/DetailPanel/DetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EASf,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAA;AA0BzC,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,0DAA0D;IAC1D,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,sBAA4B,GAC7B,EAAE,SAAS,2CA4GX;AAID,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,gDAAgD;IAChD,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAA;CACd;AAYD,iBAAS,OAAO,CAAC,EAAC,QAAQ,EAAE,IAAW,EAAE,KAAK,EAAC,EAAE,YAAY,kDA4B5D;AAID,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAEhD;AAID,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAa/C;AAID,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAE,MAAa,EAAC,EAAE,SAAS,2CAMjD;AAID,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAEhD;AAID,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,YAAY,EAAE,SAAmB,EAAC,EAAE,UAAU,2CA2BvE;AAID,eAAO,MAAM,WAAW;;;;;;;;CAQvB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailPanel.meta.d.ts","sourceRoot":"","sources":["../../../src/components/DetailPanel/DetailPanel.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAsClB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
export declare const TableSelection: Story;
|
|
7
|
+
export declare const MediumSize: Story;
|
|
8
|
+
export declare const Uncontrolled: Story;
|
|
9
|
+
//# sourceMappingURL=DetailPanel.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DetailPanel/DetailPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAapD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAwDrB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AA4HD,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAA;AAmCD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AA4BD,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAA"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { css } from 'react-strict-dom';
|
|
2
|
+
export declare const styles: Readonly<{
|
|
3
|
+
readonly wrapper: Readonly<{
|
|
4
|
+
readonly overflow: css.StyleXClassNameFor<"overflow", "hidden">;
|
|
5
|
+
readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
|
|
6
|
+
readonly position: css.StyleXClassNameFor<"position", "relative">;
|
|
7
|
+
}>;
|
|
8
|
+
readonly wrapperOpenSm: Readonly<{
|
|
9
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
10
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "280ms">;
|
|
11
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.32, 0.72, 0, 1)">;
|
|
12
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
13
|
+
}>;
|
|
14
|
+
readonly wrapperCloseSm: Readonly<{
|
|
15
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
16
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "220ms">;
|
|
17
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.72, 0, 0.68, 0.28)">;
|
|
18
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
19
|
+
}>;
|
|
20
|
+
readonly wrapperOpenMd: Readonly<{
|
|
21
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
22
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "280ms">;
|
|
23
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.32, 0.72, 0, 1)">;
|
|
24
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
25
|
+
}>;
|
|
26
|
+
readonly wrapperCloseMd: Readonly<{
|
|
27
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
28
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "220ms">;
|
|
29
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.72, 0, 0.68, 0.28)">;
|
|
30
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
31
|
+
}>;
|
|
32
|
+
readonly content: Readonly<{
|
|
33
|
+
readonly height: css.StyleXClassNameFor<"height", "100%">;
|
|
34
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
35
|
+
readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
|
|
36
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
37
|
+
readonly borderLeftWidth: css.StyleXClassNameFor<"borderLeftWidth", 1>;
|
|
38
|
+
readonly borderLeftStyle: css.StyleXClassNameFor<"borderLeftStyle", "solid">;
|
|
39
|
+
readonly borderLeftColor: css.StyleXClassNameFor<"borderLeftColor", string>;
|
|
40
|
+
readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
|
|
41
|
+
readonly position: css.StyleXClassNameFor<"position", "relative">;
|
|
42
|
+
}>;
|
|
43
|
+
readonly contentSm: Readonly<{
|
|
44
|
+
readonly width: css.StyleXClassNameFor<"width", 360>;
|
|
45
|
+
}>;
|
|
46
|
+
readonly contentMd: Readonly<{
|
|
47
|
+
readonly width: css.StyleXClassNameFor<"width", 480>;
|
|
48
|
+
}>;
|
|
49
|
+
readonly slideIn: Readonly<{
|
|
50
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
51
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "280ms">;
|
|
52
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.32, 0.72, 0, 1)">;
|
|
53
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
54
|
+
}>;
|
|
55
|
+
readonly slideOut: Readonly<{
|
|
56
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
57
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "220ms">;
|
|
58
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.72, 0, 0.68, 0.28)">;
|
|
59
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
60
|
+
}>;
|
|
61
|
+
readonly header: Readonly<{
|
|
62
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
63
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
64
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "space-between">;
|
|
65
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
66
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
67
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
68
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
69
|
+
readonly gap: css.StyleXClassNameFor<"gap", string>;
|
|
70
|
+
readonly borderBottomWidth: css.StyleXClassNameFor<"borderBottomWidth", 1>;
|
|
71
|
+
readonly borderBottomStyle: css.StyleXClassNameFor<"borderBottomStyle", "solid">;
|
|
72
|
+
readonly borderBottomColor: css.StyleXClassNameFor<"borderBottomColor", string>;
|
|
73
|
+
}>;
|
|
74
|
+
readonly title: Readonly<{
|
|
75
|
+
readonly fontSize: css.StyleXClassNameFor<"fontSize", 18>;
|
|
76
|
+
readonly fontWeight: css.StyleXClassNameFor<"fontWeight", 600>;
|
|
77
|
+
readonly lineHeight: css.StyleXClassNameFor<"lineHeight", 1.4>;
|
|
78
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
79
|
+
readonly margin: css.StyleXClassNameFor<"margin", 0>;
|
|
80
|
+
readonly flex: css.StyleXClassNameFor<"flex", 1>;
|
|
81
|
+
readonly minWidth: css.StyleXClassNameFor<"minWidth", 0>;
|
|
82
|
+
}>;
|
|
83
|
+
readonly body: Readonly<{
|
|
84
|
+
readonly flex: css.StyleXClassNameFor<"flex", 1>;
|
|
85
|
+
readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
|
|
86
|
+
}>;
|
|
87
|
+
readonly bodyPadded: Readonly<{
|
|
88
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
89
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
90
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
91
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
92
|
+
}>;
|
|
93
|
+
readonly footer: Readonly<{
|
|
94
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
95
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
96
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "flex-end">;
|
|
97
|
+
readonly gap: css.StyleXClassNameFor<"gap", string>;
|
|
98
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
99
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
100
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
101
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
102
|
+
readonly borderTopWidth: css.StyleXClassNameFor<"borderTopWidth", 1>;
|
|
103
|
+
readonly borderTopStyle: css.StyleXClassNameFor<"borderTopStyle", "solid">;
|
|
104
|
+
readonly borderTopColor: css.StyleXClassNameFor<"borderTopColor", string>;
|
|
105
|
+
}>;
|
|
106
|
+
readonly closeButton: Readonly<{
|
|
107
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
108
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
109
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "center">;
|
|
110
|
+
readonly width: css.StyleXClassNameFor<"width", 32>;
|
|
111
|
+
readonly height: css.StyleXClassNameFor<"height", 32>;
|
|
112
|
+
readonly borderRadius: css.StyleXClassNameFor<"borderRadius", 8>;
|
|
113
|
+
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 0>;
|
|
114
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
115
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
116
|
+
readonly cursor: css.StyleXClassNameFor<"cursor", "pointer">;
|
|
117
|
+
readonly padding: css.StyleXClassNameFor<"padding", 0>;
|
|
118
|
+
readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
|
|
119
|
+
readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "background-color">;
|
|
120
|
+
readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", "150ms">;
|
|
121
|
+
}>;
|
|
122
|
+
readonly inlineWrapper: Readonly<{
|
|
123
|
+
readonly display: css.StyleXClassNameFor<"display", "inline-flex">;
|
|
124
|
+
}>;
|
|
125
|
+
}>;
|
|
126
|
+
//# sourceMappingURL=styles.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DetailPanel/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAYpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8KjB,CAAA"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type DialogSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
interface RootProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Controlled open state */
|
|
6
|
+
open?: boolean;
|
|
7
|
+
/** Default open state (uncontrolled) */
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
/** Called when dialog open state changes */
|
|
10
|
+
onOpenChange?: (open: boolean) => void;
|
|
11
|
+
/** Whether clicking backdrop closes the dialog. Default: true */
|
|
12
|
+
dismissable?: boolean;
|
|
13
|
+
/** Duration of the close animation in ms. Default: 140 */
|
|
14
|
+
closeAnimationDuration?: number;
|
|
15
|
+
}
|
|
16
|
+
declare function Root({ children, open: controlledOpen, defaultOpen, onOpenChange, dismissable, closeAnimationDuration, }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
interface TriggerProps {
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
declare function Trigger({ children }: TriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
interface PortalProps {
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
size?: DialogSize;
|
|
24
|
+
}
|
|
25
|
+
declare function Portal({ children, size }: PortalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
26
|
+
declare function Header({ children }: {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function Title({ children }: {
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
declare function Description({ children }: {
|
|
33
|
+
children: ReactNode;
|
|
34
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare function Body({ children }: {
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
declare function Footer({ children }: {
|
|
39
|
+
children: ReactNode;
|
|
40
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
interface CloseProps {
|
|
42
|
+
children?: ReactNode;
|
|
43
|
+
'aria-label'?: string;
|
|
44
|
+
}
|
|
45
|
+
declare function Close({ children, 'aria-label': ariaLabel }: CloseProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare const Dialog: {
|
|
47
|
+
Root: typeof Root;
|
|
48
|
+
Trigger: typeof Trigger;
|
|
49
|
+
Portal: typeof Portal;
|
|
50
|
+
Header: typeof Header;
|
|
51
|
+
Title: typeof Title;
|
|
52
|
+
Description: typeof Description;
|
|
53
|
+
Body: typeof Body;
|
|
54
|
+
Footer: typeof Footer;
|
|
55
|
+
Close: typeof Close;
|
|
56
|
+
};
|
|
57
|
+
export {};
|
|
58
|
+
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EASf,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAyB3C,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0DAA0D;IAC1D,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,WAAkB,EAClB,sBAA4B,GAC7B,EAAE,SAAS,2CAwFX;AAID,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,iBAAS,OAAO,CAAC,EAAC,QAAQ,EAAC,EAAE,YAAY,2CAQxC;AAID,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAE,IAAW,EAAC,EAAE,WAAW,kDA4CnD;AAID,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAEhD;AAID,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAO/C;AAID,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAOrD;AAID,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAE9C;AAID,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAEhD;AAID,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,YAAY,EAAE,SAAmB,EAAC,EAAE,UAAU,2CA2BvE;AAID,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aAyClB,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
export declare const WithDescription: Story;
|
|
7
|
+
export declare const Sizes: Story;
|
|
8
|
+
export declare const Controlled: Story;
|
|
9
|
+
export declare const WithForm: Story;
|
|
10
|
+
export declare const DangerConfirmation: Story;
|
|
11
|
+
export declare const NonDismissable: Story;
|
|
12
|
+
export declare const BackdropDismiss: Story;
|
|
13
|
+
//# sourceMappingURL=Dialog.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAapD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAIrB,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAA;AAID,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAA;AAoCD,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAiCD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AA2CD,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AA8CD,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,KAgC5B,CAAA;AA+BD,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAA"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { css } from 'react-strict-dom';
|
|
2
|
+
export declare const styles: Readonly<{
|
|
3
|
+
readonly backdrop: Readonly<{
|
|
4
|
+
readonly position: css.StyleXClassNameFor<"position", "fixed">;
|
|
5
|
+
readonly inset: css.StyleXClassNameFor<"inset", 0>;
|
|
6
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", "rgba(0, 0, 0, 0.4)">;
|
|
7
|
+
readonly zIndex: css.StyleXClassNameFor<"zIndex", 1000>;
|
|
8
|
+
}>;
|
|
9
|
+
readonly backdropOpen: Readonly<{
|
|
10
|
+
readonly opacity: css.StyleXClassNameFor<"opacity", unknown>;
|
|
11
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
12
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "180ms">;
|
|
13
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "ease-out">;
|
|
14
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
15
|
+
}>;
|
|
16
|
+
readonly backdropClosing: Readonly<{
|
|
17
|
+
readonly opacity: css.StyleXClassNameFor<"opacity", unknown>;
|
|
18
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
19
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "140ms">;
|
|
20
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "ease-in">;
|
|
21
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
22
|
+
}>;
|
|
23
|
+
readonly viewport: Readonly<{
|
|
24
|
+
readonly position: css.StyleXClassNameFor<"position", "fixed">;
|
|
25
|
+
readonly inset: css.StyleXClassNameFor<"inset", 0>;
|
|
26
|
+
readonly zIndex: css.StyleXClassNameFor<"zIndex", 1001>;
|
|
27
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
28
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
29
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "center">;
|
|
30
|
+
readonly padding: css.StyleXClassNameFor<"padding", string>;
|
|
31
|
+
readonly pointerEvents: css.StyleXClassNameFor<"pointerEvents", "none">;
|
|
32
|
+
}>;
|
|
33
|
+
readonly popup: Readonly<{
|
|
34
|
+
readonly position: css.StyleXClassNameFor<"position", "relative">;
|
|
35
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
36
|
+
readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
|
|
37
|
+
readonly boxShadow: css.StyleXClassNameFor<"boxShadow", string>;
|
|
38
|
+
readonly width: css.StyleXClassNameFor<"width", "100%">;
|
|
39
|
+
readonly maxHeight: css.StyleXClassNameFor<"maxHeight", "85vh">;
|
|
40
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
41
|
+
readonly flexDirection: css.StyleXClassNameFor<"flexDirection", "column">;
|
|
42
|
+
readonly overflow: css.StyleXClassNameFor<"overflow", "hidden">;
|
|
43
|
+
readonly pointerEvents: css.StyleXClassNameFor<"pointerEvents", "auto">;
|
|
44
|
+
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 1>;
|
|
45
|
+
readonly borderStyle: css.StyleXClassNameFor<"borderStyle", "solid">;
|
|
46
|
+
readonly borderColor: css.StyleXClassNameFor<"borderColor", string>;
|
|
47
|
+
}>;
|
|
48
|
+
readonly popupOpen: Readonly<{
|
|
49
|
+
readonly opacity: css.StyleXClassNameFor<"opacity", unknown>;
|
|
50
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
51
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "180ms">;
|
|
52
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "ease-out">;
|
|
53
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
54
|
+
}>;
|
|
55
|
+
readonly popupClosing: Readonly<{
|
|
56
|
+
readonly opacity: css.StyleXClassNameFor<"opacity", unknown>;
|
|
57
|
+
readonly animationName: css.StyleXClassNameFor<"animationName", string>;
|
|
58
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "140ms">;
|
|
59
|
+
readonly animationTimingFunction: css.StyleXClassNameFor<"animationTimingFunction", "ease-in">;
|
|
60
|
+
readonly animationFillMode: css.StyleXClassNameFor<"animationFillMode", "both">;
|
|
61
|
+
}>;
|
|
62
|
+
readonly sm: Readonly<{
|
|
63
|
+
readonly maxWidth: css.StyleXClassNameFor<"maxWidth", 400>;
|
|
64
|
+
}>;
|
|
65
|
+
readonly md: Readonly<{
|
|
66
|
+
readonly maxWidth: css.StyleXClassNameFor<"maxWidth", 520>;
|
|
67
|
+
}>;
|
|
68
|
+
readonly lg: Readonly<{
|
|
69
|
+
readonly maxWidth: css.StyleXClassNameFor<"maxWidth", 680>;
|
|
70
|
+
}>;
|
|
71
|
+
readonly header: Readonly<{
|
|
72
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
73
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "flex-start">;
|
|
74
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "space-between">;
|
|
75
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
76
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
77
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
78
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
79
|
+
readonly gap: css.StyleXClassNameFor<"gap", string>;
|
|
80
|
+
}>;
|
|
81
|
+
readonly title: Readonly<{
|
|
82
|
+
readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
|
|
83
|
+
readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
|
|
84
|
+
readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
|
|
85
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
86
|
+
readonly margin: css.StyleXClassNameFor<"margin", 0>;
|
|
87
|
+
}>;
|
|
88
|
+
readonly description: Readonly<{
|
|
89
|
+
readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
|
|
90
|
+
readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
|
|
91
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
92
|
+
readonly margin: css.StyleXClassNameFor<"margin", 0>;
|
|
93
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
94
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
95
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
96
|
+
}>;
|
|
97
|
+
readonly body: Readonly<{
|
|
98
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
99
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
100
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
101
|
+
readonly overflowY: css.StyleXClassNameFor<"overflowY", "auto">;
|
|
102
|
+
readonly flex: css.StyleXClassNameFor<"flex", 1>;
|
|
103
|
+
}>;
|
|
104
|
+
readonly footer: Readonly<{
|
|
105
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
106
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
107
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "flex-end">;
|
|
108
|
+
readonly gap: css.StyleXClassNameFor<"gap", string>;
|
|
109
|
+
readonly paddingTop: css.StyleXClassNameFor<"paddingTop", string>;
|
|
110
|
+
readonly paddingLeft: css.StyleXClassNameFor<"paddingLeft", string>;
|
|
111
|
+
readonly paddingRight: css.StyleXClassNameFor<"paddingRight", string>;
|
|
112
|
+
readonly paddingBottom: css.StyleXClassNameFor<"paddingBottom", string>;
|
|
113
|
+
readonly borderTopWidth: css.StyleXClassNameFor<"borderTopWidth", 1>;
|
|
114
|
+
readonly borderTopStyle: css.StyleXClassNameFor<"borderTopStyle", "solid">;
|
|
115
|
+
readonly borderTopColor: css.StyleXClassNameFor<"borderTopColor", string>;
|
|
116
|
+
}>;
|
|
117
|
+
readonly closeButton: Readonly<{
|
|
118
|
+
readonly display: css.StyleXClassNameFor<"display", "flex">;
|
|
119
|
+
readonly alignItems: css.StyleXClassNameFor<"alignItems", "center">;
|
|
120
|
+
readonly justifyContent: css.StyleXClassNameFor<"justifyContent", "center">;
|
|
121
|
+
readonly width: css.StyleXClassNameFor<"width", 32>;
|
|
122
|
+
readonly height: css.StyleXClassNameFor<"height", 32>;
|
|
123
|
+
readonly borderRadius: css.StyleXClassNameFor<"borderRadius", string>;
|
|
124
|
+
readonly borderWidth: css.StyleXClassNameFor<"borderWidth", 0>;
|
|
125
|
+
readonly backgroundColor: css.StyleXClassNameFor<"backgroundColor", string>;
|
|
126
|
+
readonly color: css.StyleXClassNameFor<"color", string>;
|
|
127
|
+
readonly cursor: css.StyleXClassNameFor<"cursor", "pointer">;
|
|
128
|
+
readonly padding: css.StyleXClassNameFor<"padding", 0>;
|
|
129
|
+
readonly flexShrink: css.StyleXClassNameFor<"flexShrink", 0>;
|
|
130
|
+
readonly transitionProperty: css.StyleXClassNameFor<"transitionProperty", "background-color">;
|
|
131
|
+
readonly transitionDuration: css.StyleXClassNameFor<"transitionDuration", "150ms">;
|
|
132
|
+
}>;
|
|
133
|
+
readonly inlineWrapper: Readonly<{
|
|
134
|
+
readonly display: css.StyleXClassNameFor<"display", "inline-flex">;
|
|
135
|
+
}>;
|
|
136
|
+
readonly reducedMotion: Readonly<{
|
|
137
|
+
readonly animationDuration: css.StyleXClassNameFor<"animationDuration", "1ms">;
|
|
138
|
+
}>;
|
|
139
|
+
}>;
|
|
140
|
+
//# sourceMappingURL=styles.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/styles.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAMpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8LjB,CAAA"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type DrawerAnchor = 'right' | 'left' | 'bottom';
|
|
3
|
+
export type DrawerSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
interface RootProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** Controlled open state */
|
|
7
|
+
open?: boolean;
|
|
8
|
+
/** Default open state (uncontrolled) */
|
|
9
|
+
defaultOpen?: boolean;
|
|
10
|
+
/** Called when drawer open state changes */
|
|
11
|
+
onOpenChange?: (open: boolean) => void;
|
|
12
|
+
/** Which edge the drawer slides from. Default: 'right' */
|
|
13
|
+
anchor?: DrawerAnchor;
|
|
14
|
+
/** Whether clicking backdrop or pressing Escape closes the drawer. Default: true */
|
|
15
|
+
dismissable?: boolean;
|
|
16
|
+
/** Whether swipe gesture dismisses the drawer. Default: true */
|
|
17
|
+
swipeDismiss?: boolean;
|
|
18
|
+
/** Duration of the close animation in ms. Default: 160 */
|
|
19
|
+
closeAnimationDuration?: number;
|
|
20
|
+
}
|
|
21
|
+
declare function Root({ children, open: controlledOpen, defaultOpen, onOpenChange, anchor, dismissable, swipeDismiss, closeAnimationDuration, }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function Trigger({ children }: {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
interface PortalProps {
|
|
26
|
+
children: ReactNode;
|
|
27
|
+
size?: DrawerSize;
|
|
28
|
+
}
|
|
29
|
+
declare function Portal({ children, size }: PortalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
30
|
+
declare function Header({ children }: {
|
|
31
|
+
children: ReactNode;
|
|
32
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
declare function Title({ children }: {
|
|
34
|
+
children: ReactNode;
|
|
35
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
declare function Description({ children }: {
|
|
37
|
+
children: ReactNode;
|
|
38
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
declare function Body({ children }: {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
declare function Footer({ children }: {
|
|
43
|
+
children: ReactNode;
|
|
44
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
interface CloseProps {
|
|
46
|
+
children?: ReactNode;
|
|
47
|
+
'aria-label'?: string;
|
|
48
|
+
}
|
|
49
|
+
declare function Close({ children, 'aria-label': ariaLabel }: CloseProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
export declare const Drawer: {
|
|
51
|
+
Root: typeof Root;
|
|
52
|
+
Trigger: typeof Trigger;
|
|
53
|
+
Portal: typeof Portal;
|
|
54
|
+
Header: typeof Header;
|
|
55
|
+
Title: typeof Title;
|
|
56
|
+
Description: typeof Description;
|
|
57
|
+
Body: typeof Body;
|
|
58
|
+
Footer: typeof Footer;
|
|
59
|
+
Close: typeof Close;
|
|
60
|
+
};
|
|
61
|
+
export {};
|
|
62
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EASf,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AACtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA6B3C,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,0DAA0D;IAC1D,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,MAAgB,EAChB,WAAkB,EAClB,YAAmB,EACnB,sBAA4B,GAC7B,EAAE,SAAS,2CA8FX;AAID,iBAAS,OAAO,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAQjD;AAID,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAqBD,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAE,IAAW,EAAC,EAAE,WAAW,kDAuEnD;AAID,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAEhD;AAID,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAO/C;AAID,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAOrD;AAID,iBAAS,IAAI,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAE9C;AAID,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,2CAEhD;AAID,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,KAAK,CAAC,EAAC,QAAQ,EAAE,YAAY,EAAE,SAAmB,EAAC,EAAE,UAAU,2CA2BvE;AAID,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAEpD,eAAO,MAAM,IAAI,EAAE,aA0ClB,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
export declare const LeftAnchor: Story;
|
|
7
|
+
export declare const BottomAnchor: Story;
|
|
8
|
+
export declare const Sizes: Story;
|
|
9
|
+
export declare const WithForm: Story;
|
|
10
|
+
export declare const RightAnchor: Story;
|
|
11
|
+
export declare const NonDismissable: Story;
|
|
12
|
+
export declare const NoSwipeDismiss: Story;
|
|
13
|
+
export declare const SwipeDismiss: Story;
|
|
14
|
+
export declare const SwipeDismissRight: Story;
|
|
15
|
+
//# sourceMappingURL=Drawer.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAWpD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAIrB,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAA;AAID,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAA;AAsCD,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AA+CD,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AAsDD,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAA;AAID,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAA"}
|