@lctafrica/ui 0.0.6 → 0.1.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 (55) hide show
  1. package/dist/components/ui/ModalFooter.d.ts +7 -0
  2. package/dist/components/ui/autosuggest-input/AutoSuggestInput.d.ts +10 -0
  3. package/dist/components/ui/autosuggest-input/AutoSuggestInput.stories.d.ts +25 -0
  4. package/dist/components/ui/badge/Badge.stories.d.ts +10 -0
  5. package/dist/components/ui/button/Button.d.ts +4 -4
  6. package/dist/components/ui/button/Button.stories.d.ts +18 -0
  7. package/dist/components/ui/button-group/ButtonGroup.stories.d.ts +10 -0
  8. package/dist/components/ui/calendar.d.ts +10 -0
  9. package/dist/components/ui/checkbox/Checkbox.d.ts +2 -2
  10. package/dist/components/ui/checkbox/Checkbox.stories.d.ts +333 -0
  11. package/dist/components/ui/confirm-modal/ConfirmModal.d.ts +4 -0
  12. package/dist/components/ui/confirm-modal/ConfirmModal.stories.d.ts +25 -0
  13. package/dist/components/ui/data-state-renderer/DataStateRendere.stories.d.ts +102 -0
  14. package/dist/components/ui/data-state-renderer/DataStateRenderer.d.ts +19 -0
  15. package/dist/components/ui/date-picker/DatePicker.d.ts +7 -0
  16. package/dist/components/ui/date-picker/DatePicker.stories.d.ts +30 -0
  17. package/dist/components/ui/dialog.d.ts +17 -0
  18. package/dist/components/ui/field/Field.stories.d.ts +10 -0
  19. package/dist/components/ui/input/Input.d.ts +6 -3
  20. package/dist/components/ui/input/Input.stories.d.ts +13 -0
  21. package/dist/components/ui/input-group.d.ts +16 -0
  22. package/dist/components/ui/loading-state/LoadingIndicator.d.ts +6 -0
  23. package/dist/components/ui/loading-state/LoadingIndicator.stories.d.ts +6 -0
  24. package/dist/components/ui/loading-state/loading-animation/LoadingAnimation.d.ts +16 -0
  25. package/dist/components/ui/main-wrapper/MainWrapper.d.ts +2 -0
  26. package/dist/components/ui/main-wrapper/MainWrapper.stories.d.ts +19 -0
  27. package/dist/components/ui/modal/Modal.d.ts +11 -0
  28. package/dist/components/ui/modal/Modal.stories.d.ts +29 -0
  29. package/dist/components/ui/popover.d.ts +10 -0
  30. package/dist/components/ui/prompt-modal/PromptModal.d.ts +8 -0
  31. package/dist/components/ui/prompt-modal/PromptModal.stories.d.ts +29 -0
  32. package/dist/components/ui/radio-group/RadioGroup.d.ts +7 -0
  33. package/dist/components/ui/radio-group/RadioGroup.stories.d.ts +13 -0
  34. package/dist/components/ui/radio-group/RadioGroup.test.d.ts +1 -0
  35. package/dist/components/ui/search-input/SearchInput.d.ts +9 -0
  36. package/dist/components/ui/search-input/SearchInput.stories.d.ts +6 -0
  37. package/dist/components/ui/searchable-select/SearchableSelect.d.ts +16 -0
  38. package/dist/components/ui/searchable-select/SearchableSelect.stories.d.ts +25 -0
  39. package/dist/components/ui/select/Select.d.ts +15 -0
  40. package/dist/components/ui/select/Select.stories.d.ts +6 -0
  41. package/dist/components/ui/select/select-components.d.ts +17 -0
  42. package/dist/components/ui/state-indicator/StateIndicator.d.ts +22 -0
  43. package/dist/components/ui/state-indicator/StateIndicator.stories.d.ts +33 -0
  44. package/dist/components/ui/success-modal/SuccessAnimation.d.ts +1 -0
  45. package/dist/components/ui/success-modal/SuccessModal.d.ts +12 -0
  46. package/dist/components/ui/success-modal/SuccessModal.stories.d.ts +37 -0
  47. package/dist/components/ui/success-modal/SuccessTickIcon.d.ts +6 -0
  48. package/dist/components/ui/switch/Switch.d.ts +6 -0
  49. package/dist/components/ui/switch/Switch.stories.d.ts +37 -0
  50. package/dist/components/ui/text/Text.stories.d.ts +9 -0
  51. package/dist/components/ui/textarea/Textarea.d.ts +3 -0
  52. package/dist/components/ui/textarea/Textarea.stories.d.ts +29 -0
  53. package/dist/index.d.ts +9 -0
  54. package/dist/index.js +12482 -1590
  55. package/package.json +10 -3
@@ -0,0 +1,7 @@
1
+ export type ModalFooter = {
2
+ onCancel?(): void;
3
+ onConfirm?(): void;
4
+ confirmButtonLabel?: string;
5
+ cancelButtonLabel?: string;
6
+ };
7
+ export declare function ModalFooter({ onCancel, cancelButtonLabel, onConfirm, confirmButtonLabel, }: ModalFooter): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,10 @@
1
+ type SearchableSelectProps = {
2
+ options?: string[];
3
+ value?: string | null;
4
+ placeholder?: string;
5
+ onChange?(value: string | null): void;
6
+ disabled?: boolean;
7
+ name?: string;
8
+ };
9
+ export declare function AutoSuggestInput({ options, placeholder, value, disabled, name, onChange, }: SearchableSelectProps): import("react/jsx-runtime").JSX.Element;
10
+ export {};
@@ -0,0 +1,25 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { AutoSuggestInput } from './AutoSuggestInput';
3
+ declare const meta: Meta<typeof AutoSuggestInput>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof AutoSuggestInput>;
6
+ /**
7
+ * Base controlled usage
8
+ */
9
+ export declare const Default: Story;
10
+ /**
11
+ * Shows filtering behavior while typing
12
+ */
13
+ export declare const TypingAndFiltering: Story;
14
+ /**
15
+ * Shows selecting a full option
16
+ */
17
+ export declare const WithSelectedValue: Story;
18
+ /**
19
+ * Demonstrates clear button behavior
20
+ */
21
+ export declare const WithClearableValue: Story;
22
+ /**
23
+ * Disabled state
24
+ */
25
+ export declare const Disabled: Story;
@@ -0,0 +1,10 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { default as Badge } from './Badge';
3
+ declare const meta: Meta<typeof Badge>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Badge>;
6
+ export declare const Default: Story;
7
+ export declare const Sizes: Story;
8
+ export declare const WithIcon: Story;
9
+ export declare const Statuses: Story;
10
+ export declare const Variants: Story;
@@ -1,11 +1,11 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
2
  import * as React from "react";
3
- declare const buttonVariants: (props?: ({
3
+ export declare const buttonVariants: (props?: ({
4
4
  variant?: "link" | "primary" | "primary-destructive" | "secondary" | "secondary-destructive" | "outline" | "outline-destructive" | "ghost" | "ghost-destructive" | "link-destructive" | null | undefined;
5
5
  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | "icon-2xl" | null | undefined;
6
6
  defaultVariants?: "size" | "variant" | null | undefined;
7
7
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
- export declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
8
+ export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
9
9
  asChild?: boolean;
10
- }): import("react/jsx-runtime").JSX.Element;
11
- export {};
10
+ };
11
+ export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,18 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { Button } from './Button';
3
+ declare const meta: Meta<typeof Button>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Button>;
6
+ export declare const Primary: Story;
7
+ export declare const Secondary: Story;
8
+ export declare const Outline: Story;
9
+ export declare const Ghost: Story;
10
+ export declare const Link: Story;
11
+ export declare const PrimaryDestructive: Story;
12
+ export declare const SecondaryDestructive: Story;
13
+ export declare const OutlineDestructive: Story;
14
+ export declare const GhostDestructive: Story;
15
+ export declare const LinkDestructive: Story;
16
+ export declare const AllSizes: Story;
17
+ export declare const AsChild: Story;
18
+ export declare const Disabled: Story;
@@ -0,0 +1,10 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { ButtonGroup } from './ButtonGroup';
3
+ type Option = string;
4
+ declare const meta: Meta<typeof ButtonGroup<Option>>;
5
+ export default meta;
6
+ type Story = StoryObj<typeof ButtonGroup<Option>>;
7
+ export declare const Default: Story;
8
+ export declare const Selected: Story;
9
+ export declare const TextOnly: Story;
10
+ export declare const ManyOptions: Story;
@@ -0,0 +1,10 @@
1
+ import { DayPicker, DayButton, Locale } from 'react-day-picker';
2
+ import { Button } from './button/Button';
3
+ import * as React from "react";
4
+ declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
5
+ buttonVariant?: React.ComponentProps<typeof Button>["variant"];
6
+ }): import("react/jsx-runtime").JSX.Element;
7
+ declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
8
+ locale?: Partial<Locale>;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ export { Calendar, CalendarDayButton };
@@ -1,9 +1,9 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- import * as React from "react";
3
2
  import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
3
+ import * as React from "react";
4
4
  declare const checkboxVariants: (props?: ({
5
5
  size?: "sm" | "md" | null | undefined;
6
- variant?: "default" | "circle" | null | undefined;
6
+ variant?: "circle" | "default" | null | undefined;
7
7
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
8
  declare const iconVariants: (props?: ({
9
9
  size?: "sm" | "md" | null | undefined;
@@ -0,0 +1,333 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ declare const meta: {
3
+ title: string;
4
+ component: import('react').ForwardRefExoticComponent<import('./Checkbox').CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>;
5
+ decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
6
+ form?: string | undefined | undefined;
7
+ slot?: string | undefined | undefined;
8
+ style?: import('react').CSSProperties | undefined;
9
+ title?: string | undefined | undefined;
10
+ className?: string | undefined | undefined;
11
+ type?: "submit" | "reset" | "button" | undefined | undefined;
12
+ color?: string | undefined | undefined;
13
+ hidden?: boolean | undefined | undefined;
14
+ key?: import('react').Key | null | undefined;
15
+ checked?: import('@radix-ui/react-checkbox').CheckedState | undefined;
16
+ disabled?: boolean | undefined | undefined;
17
+ formAction?: string | undefined;
18
+ formEncType?: string | undefined | undefined;
19
+ formMethod?: string | undefined | undefined;
20
+ formNoValidate?: boolean | undefined | undefined;
21
+ formTarget?: string | undefined | undefined;
22
+ name?: string | undefined | undefined;
23
+ required?: boolean | undefined;
24
+ value?: string | number | readonly string[] | undefined;
25
+ onChange?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
26
+ defaultChecked?: import('@radix-ui/react-checkbox').CheckedState | undefined;
27
+ defaultValue?: string | number | readonly string[] | undefined;
28
+ suppressContentEditableWarning?: boolean | undefined | undefined;
29
+ suppressHydrationWarning?: boolean | undefined | undefined;
30
+ accessKey?: string | undefined | undefined;
31
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
32
+ autoFocus?: boolean | undefined | undefined;
33
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
34
+ contextMenu?: string | undefined | undefined;
35
+ dir?: string | undefined | undefined;
36
+ draggable?: (boolean | "true" | "false") | undefined;
37
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
38
+ id?: string | undefined | undefined;
39
+ lang?: string | undefined | undefined;
40
+ nonce?: string | undefined | undefined;
41
+ spellCheck?: (boolean | "true" | "false") | undefined;
42
+ tabIndex?: number | undefined | undefined;
43
+ translate?: "yes" | "no" | undefined | undefined;
44
+ radioGroup?: string | undefined | undefined;
45
+ role?: import('react').AriaRole | undefined;
46
+ about?: string | undefined | undefined;
47
+ content?: string | undefined | undefined;
48
+ datatype?: string | undefined | undefined;
49
+ inlist?: any;
50
+ prefix?: string | undefined | undefined;
51
+ property?: string | undefined | undefined;
52
+ rel?: string | undefined | undefined;
53
+ resource?: string | undefined | undefined;
54
+ rev?: string | undefined | undefined;
55
+ typeof?: string | undefined | undefined;
56
+ vocab?: string | undefined | undefined;
57
+ autoCorrect?: string | undefined | undefined;
58
+ autoSave?: string | undefined | undefined;
59
+ itemProp?: string | undefined | undefined;
60
+ itemScope?: boolean | undefined | undefined;
61
+ itemType?: string | undefined | undefined;
62
+ itemID?: string | undefined | undefined;
63
+ itemRef?: string | undefined | undefined;
64
+ results?: number | undefined | undefined;
65
+ security?: string | undefined | undefined;
66
+ unselectable?: "on" | "off" | undefined | undefined;
67
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
68
+ is?: string | undefined | undefined;
69
+ exportparts?: string | undefined | undefined;
70
+ part?: string | undefined | undefined;
71
+ "aria-activedescendant"?: string | undefined | undefined;
72
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
73
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
74
+ "aria-braillelabel"?: string | undefined | undefined;
75
+ "aria-brailleroledescription"?: string | undefined | undefined;
76
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
77
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
78
+ "aria-colcount"?: number | undefined | undefined;
79
+ "aria-colindex"?: number | undefined | undefined;
80
+ "aria-colindextext"?: string | undefined | undefined;
81
+ "aria-colspan"?: number | undefined | undefined;
82
+ "aria-controls"?: string | undefined | undefined;
83
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
84
+ "aria-describedby"?: string | undefined | undefined;
85
+ "aria-description"?: string | undefined | undefined;
86
+ "aria-details"?: string | undefined | undefined;
87
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
88
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
89
+ "aria-errormessage"?: string | undefined | undefined;
90
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
91
+ "aria-flowto"?: string | undefined | undefined;
92
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
93
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
94
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
95
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
96
+ "aria-keyshortcuts"?: string | undefined | undefined;
97
+ "aria-label"?: string | undefined | undefined;
98
+ "aria-labelledby"?: string | undefined | undefined;
99
+ "aria-level"?: number | undefined | undefined;
100
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
101
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
102
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
103
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
104
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
105
+ "aria-owns"?: string | undefined | undefined;
106
+ "aria-placeholder"?: string | undefined | undefined;
107
+ "aria-posinset"?: number | undefined | undefined;
108
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
109
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
110
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
111
+ "aria-required"?: (boolean | "true" | "false") | undefined;
112
+ "aria-roledescription"?: string | undefined | undefined;
113
+ "aria-rowcount"?: number | undefined | undefined;
114
+ "aria-rowindex"?: number | undefined | undefined;
115
+ "aria-rowindextext"?: string | undefined | undefined;
116
+ "aria-rowspan"?: number | undefined | undefined;
117
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
118
+ "aria-setsize"?: number | undefined | undefined;
119
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
120
+ "aria-valuemax"?: number | undefined | undefined;
121
+ "aria-valuemin"?: number | undefined | undefined;
122
+ "aria-valuenow"?: number | undefined | undefined;
123
+ "aria-valuetext"?: string | undefined | undefined;
124
+ children?: import('react').ReactNode;
125
+ dangerouslySetInnerHTML?: {
126
+ __html: string | TrustedHTML;
127
+ } | undefined | undefined;
128
+ onCopy?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
129
+ onCopyCapture?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
130
+ onCut?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
131
+ onCutCapture?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
132
+ onPaste?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
133
+ onPasteCapture?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
134
+ onCompositionEnd?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
135
+ onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
136
+ onCompositionStart?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
137
+ onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
138
+ onCompositionUpdate?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
139
+ onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
140
+ onFocus?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
141
+ onFocusCapture?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
142
+ onBlur?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
143
+ onBlurCapture?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
144
+ onChangeCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
145
+ onBeforeInput?: import('react').InputEventHandler<HTMLButtonElement> | undefined;
146
+ onBeforeInputCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
147
+ onInput?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
148
+ onInputCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
149
+ onReset?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
150
+ onResetCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
151
+ onSubmit?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
152
+ onSubmitCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
153
+ onInvalid?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
154
+ onInvalidCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
155
+ onLoad?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
156
+ onLoadCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
157
+ onError?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
158
+ onErrorCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
159
+ onKeyDown?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
160
+ onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
161
+ onKeyPress?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
162
+ onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
163
+ onKeyUp?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
164
+ onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
165
+ onAbort?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
166
+ onAbortCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
167
+ onCanPlay?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
168
+ onCanPlayCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
169
+ onCanPlayThrough?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
170
+ onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
171
+ onDurationChange?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
172
+ onDurationChangeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
173
+ onEmptied?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
174
+ onEmptiedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
175
+ onEncrypted?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
176
+ onEncryptedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
177
+ onEnded?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
178
+ onEndedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
179
+ onLoadedData?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
180
+ onLoadedDataCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
181
+ onLoadedMetadata?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
182
+ onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
183
+ onLoadStart?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
184
+ onLoadStartCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
185
+ onPause?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
186
+ onPauseCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
187
+ onPlay?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
188
+ onPlayCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
189
+ onPlaying?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
190
+ onPlayingCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
191
+ onProgress?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
192
+ onProgressCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
193
+ onRateChange?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
194
+ onRateChangeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
195
+ onSeeked?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
196
+ onSeekedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
197
+ onSeeking?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
198
+ onSeekingCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
199
+ onStalled?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
200
+ onStalledCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
201
+ onSuspend?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
202
+ onSuspendCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
203
+ onTimeUpdate?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
204
+ onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
205
+ onVolumeChange?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
206
+ onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
207
+ onWaiting?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
208
+ onWaitingCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
209
+ onAuxClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
210
+ onAuxClickCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
211
+ onClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
212
+ onClickCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
213
+ onContextMenu?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
214
+ onContextMenuCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
215
+ onDoubleClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
216
+ onDoubleClickCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
217
+ onDrag?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
218
+ onDragCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
219
+ onDragEnd?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
220
+ onDragEndCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
221
+ onDragEnter?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
222
+ onDragEnterCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
223
+ onDragExit?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
224
+ onDragExitCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
225
+ onDragLeave?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
226
+ onDragLeaveCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
227
+ onDragOver?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
228
+ onDragOverCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
229
+ onDragStart?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
230
+ onDragStartCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
231
+ onDrop?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
232
+ onDropCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
233
+ onMouseDown?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
234
+ onMouseDownCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
235
+ onMouseEnter?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
236
+ onMouseLeave?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
237
+ onMouseMove?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
238
+ onMouseMoveCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
239
+ onMouseOut?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
240
+ onMouseOutCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
241
+ onMouseOver?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
242
+ onMouseOverCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
243
+ onMouseUp?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
244
+ onMouseUpCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
245
+ onSelect?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
246
+ onSelectCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
247
+ onTouchCancel?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
248
+ onTouchCancelCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
249
+ onTouchEnd?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
250
+ onTouchEndCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
251
+ onTouchMove?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
252
+ onTouchMoveCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
253
+ onTouchStart?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
254
+ onTouchStartCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
255
+ onPointerDown?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
256
+ onPointerDownCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
257
+ onPointerMove?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
258
+ onPointerMoveCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
259
+ onPointerUp?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
260
+ onPointerUpCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
261
+ onPointerCancel?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
262
+ onPointerCancelCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
263
+ onPointerEnter?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
264
+ onPointerLeave?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
265
+ onPointerOver?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
266
+ onPointerOverCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
267
+ onPointerOut?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
268
+ onPointerOutCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
269
+ onGotPointerCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
270
+ onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
271
+ onLostPointerCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
272
+ onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
273
+ onScroll?: import('react').UIEventHandler<HTMLButtonElement> | undefined;
274
+ onScrollCapture?: import('react').UIEventHandler<HTMLButtonElement> | undefined;
275
+ onWheel?: import('react').WheelEventHandler<HTMLButtonElement> | undefined;
276
+ onWheelCapture?: import('react').WheelEventHandler<HTMLButtonElement> | undefined;
277
+ onAnimationStart?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
278
+ onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
279
+ onAnimationEnd?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
280
+ onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
281
+ onAnimationIteration?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
282
+ onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
283
+ onTransitionEnd?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
284
+ onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
285
+ asChild?: boolean | undefined;
286
+ onCheckedChange?: ((checked: import('@radix-ui/react-checkbox').CheckedState) => void) | undefined;
287
+ size?: "sm" | "md" | null | undefined;
288
+ variant?: "circle" | "default" | null | undefined;
289
+ ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
290
+ }>) => import("react/jsx-runtime").JSX.Element)[];
291
+ parameters: {
292
+ layout: string;
293
+ };
294
+ tags: string[];
295
+ argTypes: {
296
+ size: {
297
+ control: "radio";
298
+ options: string[];
299
+ description: string;
300
+ table: {
301
+ defaultValue: {
302
+ summary: string;
303
+ };
304
+ };
305
+ };
306
+ variant: {
307
+ control: "radio";
308
+ options: string[];
309
+ description: string;
310
+ table: {
311
+ defaultValue: {
312
+ summary: string;
313
+ };
314
+ };
315
+ };
316
+ disabled: {
317
+ control: "boolean";
318
+ description: string;
319
+ };
320
+ defaultChecked: {
321
+ control: "boolean";
322
+ description: string;
323
+ };
324
+ };
325
+ };
326
+ export default meta;
327
+ type Story = StoryObj<typeof meta>;
328
+ export declare const Default: Story;
329
+ export declare const Circle: Story;
330
+ export declare const WithText: Story;
331
+ export declare const Table: Story;
332
+ export declare const Disabled: Story;
333
+ export declare const AllCombinations: Story;
@@ -0,0 +1,4 @@
1
+ import { ModalProps } from '../modal/Modal';
2
+ import { ModalFooter } from '../ModalFooter';
3
+ export type ConfirmModalProps = ModalProps & ModalFooter;
4
+ export default function ConfirmModal({ onCancel, onConfirm, confirmButtonLabel, cancelButtonLabel, children, ...rest }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,25 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { default as ConfirmModal } from './ConfirmModal';
3
+ declare const meta: Meta<typeof ConfirmModal>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof ConfirmModal>;
6
+ /**
7
+ * Default confirm modal
8
+ */
9
+ export declare const Default: Story;
10
+ /**
11
+ * Custom button labels
12
+ */
13
+ export declare const CustomLabels: Story;
14
+ /**
15
+ * Title only
16
+ */
17
+ export declare const TitleOnly: Story;
18
+ /**
19
+ * Description only
20
+ */
21
+ export declare const DescriptionOnly: Story;
22
+ /**
23
+ * Long content inside modal
24
+ */
25
+ export declare const WithContent: Story;
@@ -0,0 +1,102 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { default as DataStateRenderer } from './DataStateRenderer';
3
+ /**
4
+ * DataStateRenderer is a utility component that conditionally renders UI
5
+ * based on common data-fetching states:
6
+ *
7
+ * - Loading → displays a loading indicator
8
+ * - Error → displays an error state
9
+ * - Empty → displays an empty state
10
+ * - Success → renders children
11
+ *
12
+ * This helps standardize how async states are handled across the application.
13
+ *
14
+ * ---
15
+ *
16
+ * State Priority
17
+ *
18
+ * When multiple states are true, the following priority is applied:
19
+ *
20
+ * 1. `isLoading`
21
+ * 2. `hasError`
22
+ * 3. `isEmpty`
23
+ * 4. `children` (default/content)
24
+ *
25
+ * Example:
26
+ * If `isLoading` and `hasError` are both true → loading state is shown.
27
+ *
28
+ * ---
29
+ *
30
+ * Customization
31
+ *
32
+ * Each state can be customized via props:
33
+ *
34
+ * - `loadingState` → controls loading container styling
35
+ * - `errorState` → controls error title, description, and styling
36
+ * - `emptyState` → controls empty state title, description, and styling
37
+ *
38
+ * ---
39
+ *
40
+ * Usage
41
+ *
42
+ * ```tsx
43
+ * <DataStateRenderer
44
+ * isLoading={isLoading}
45
+ * hasError={error}
46
+ * isEmpty={!data.length}
47
+ * errorState={{
48
+ * title: "Failed to load data",
49
+ * description: "Please try again later",
50
+ * }}
51
+ * >
52
+ * <DataList data={data} />
53
+ * </DataStateRenderer>
54
+ * ```
55
+ *
56
+ * ---
57
+ *
58
+ * Notes
59
+ *
60
+ * - Designed to reduce repetitive conditional rendering in components
61
+ * - Encourages consistent UX for async states
62
+ * - Works well with data-fetching libraries (e.g. React Query, SWR)
63
+ */
64
+ declare const meta: Meta<typeof DataStateRenderer>;
65
+ export default meta;
66
+ type Story = StoryObj<typeof DataStateRenderer>;
67
+ /**
68
+ * Default (data available)
69
+ */
70
+ export declare const Default: Story;
71
+ /**
72
+ * Loading state
73
+ */
74
+ export declare const Loading: Story;
75
+ /**
76
+ * Error state
77
+ */
78
+ export declare const Error: Story;
79
+ /**
80
+ * Empty state
81
+ */
82
+ export declare const Empty: Story;
83
+ /**
84
+ * Priority: Loading overrides everything
85
+ */
86
+ export declare const LoadingTakesPriority: Story;
87
+ /**
88
+ * Error overrides empty
89
+ */
90
+ export declare const ErrorOverridesEmpty: Story;
91
+ /**
92
+ * Custom empty state with action
93
+ */
94
+ export declare const EmptyWithAction: Story;
95
+ /**
96
+ * Custom error styling
97
+ */
98
+ export declare const CustomErrorStyling: Story;
99
+ /**
100
+ * With real content
101
+ */
102
+ export declare const WithContent: Story;
@@ -0,0 +1,19 @@
1
+ import { ReactNode } from 'react';
2
+ import { ActionButton } from '../state-indicator/StateIndicator';
3
+ type StateProps = {
4
+ className?: string;
5
+ title?: string;
6
+ description?: string;
7
+ actionButton?: ActionButton;
8
+ };
9
+ type DataStateRendererProps = {
10
+ children?: ReactNode;
11
+ isLoading?: boolean;
12
+ isEmpty?: boolean;
13
+ hasError?: boolean;
14
+ loadingState?: Omit<StateProps, "title" | "description" | "actionButton">;
15
+ emptyState?: StateProps;
16
+ errorState?: StateProps;
17
+ };
18
+ export default function DataStateRenderer({ isLoading, isEmpty, children, emptyState, errorState, hasError, loadingState, }: DataStateRendererProps): import("react/jsx-runtime").JSX.Element;
19
+ export {};
@@ -0,0 +1,7 @@
1
+ type DatePickerProps = {
2
+ value?: Date | undefined;
3
+ onChange?(date: Date | undefined): void;
4
+ placeholder?: string;
5
+ };
6
+ export declare function DatePicker({ value, onChange, placeholder, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};