@mbao01/common 0.1.4 → 0.2.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.
- package/README.md +1 -9
- package/dist/types/components/AlertDialog/AlertDialog.d.ts +4 -0
- package/dist/types/components/Button/Button.d.ts +2 -0
- package/dist/types/components/Button/constants.d.ts +2 -0
- package/dist/types/components/Card/Card.d.ts +1 -1
- package/dist/types/components/Card/constants.d.ts +2 -2
- package/dist/types/components/Carousel/Carousel.d.ts +4 -0
- package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts +1 -0
- package/dist/types/components/Form/Select/Select.d.ts +0 -2
- package/dist/types/components/Form/Select/constants.d.ts +0 -1
- package/dist/types/components/Form/components/Fieldset/Fieldset.d.ts +7 -0
- package/dist/types/components/Form/components/Fieldset/constants.d.ts +3 -0
- package/dist/types/components/Form/components/Fieldset/index.d.ts +1 -0
- package/dist/types/components/Form/components/Fieldset/types.d.ts +10 -0
- package/dist/types/components/Form/components/Label/Label.d.ts +2 -4
- package/dist/types/components/Form/index.d.ts +1 -1
- package/dist/types/components/Loading/constants.d.ts +1 -1
- package/dist/types/components/Sidebar/Sidebar.d.ts +2 -0
- package/dist/types/components/Toggle/Toggle.d.ts +3 -0
- package/dist/types/components/Toggle/constants.d.ts +1 -0
- package/dist/types/components/ToggleGroup/ToggleGroup.d.ts +3 -0
- package/package.json +75 -79
- package/src/components/AlertDialog/constants.ts +1 -1
- package/src/components/Avatar/constants.ts +4 -4
- package/src/components/Button/Button.tsx +24 -3
- package/src/components/Button/constants.ts +19 -1
- package/src/components/Calendar/Calendar.tsx +9 -9
- package/src/components/Card/Card.tsx +2 -2
- package/src/components/Card/constants.ts +9 -8
- package/src/components/Chart/constants.ts +2 -2
- package/src/components/Chart/stories/examples/PieChart.tsx +1 -1
- package/src/components/Chart/stories/examples/RadarChart.tsx +2 -2
- package/src/components/Command/constants.ts +2 -2
- package/src/components/DatetimePicker/constants.ts +2 -2
- package/src/components/Description/Description.tsx +1 -1
- package/src/components/Dialog/constants.ts +1 -1
- package/src/components/DragAndDrop/Draggable/Draggable.example.tsx +1 -1
- package/src/components/DragAndDrop/Draggable/constants.ts +1 -1
- package/src/components/DragAndDrop/Droppable/Droppable.example.tsx +2 -2
- package/src/components/DragAndDrop/Sortable/Sortable.example.tsx +2 -2
- package/src/components/FileUploader/FileUploader.tsx +1 -1
- package/src/components/Form/Checkbox/constants.ts +1 -1
- package/src/components/Form/DatetimeInput/constants.ts +5 -5
- package/src/components/Form/MultiSelect/constants.ts +4 -4
- package/src/components/Form/OtpInput/OtpInput.tsx +1 -1
- package/src/components/Form/Phone/constants.ts +2 -2
- package/src/components/Form/Select/Select.tsx +2 -2
- package/src/components/Form/Select/constants.ts +7 -5
- package/src/components/Form/Slider/constants.ts +1 -1
- package/src/components/Form/TagsInput/constants.ts +3 -3
- package/src/components/Form/TextField/TextField.tsx +15 -12
- package/src/components/Form/Textarea/constants.ts +6 -1
- package/src/components/Form/components/Fieldset/Fieldset.tsx +42 -0
- package/src/components/Form/components/Fieldset/constants.ts +7 -0
- package/src/components/Form/components/Fieldset/index.ts +1 -0
- package/src/components/Form/components/Fieldset/types.ts +19 -0
- package/src/components/Form/components/Label/Label.tsx +2 -13
- package/src/components/Form/index.ts +1 -1
- package/src/components/HoverCard/constants.ts +1 -1
- package/src/components/Loading/constants.ts +1 -0
- package/src/components/Menu/Menubar/constants.ts +6 -6
- package/src/components/Menu/NavigationMenu/constants.ts +12 -12
- package/src/components/Popover/constants.ts +1 -1
- package/src/components/Sidebar/SidebarMenu.tsx +1 -1
- package/src/components/Sidebar/constants.ts +24 -24
- package/src/components/Sidebar/stories/examples/components/AppMain.tsx +1 -1
- package/src/components/Sidebar/stories/examples/components/VersionSwitcher.tsx +1 -1
- package/src/components/Sonner/constants.ts +18 -18
- package/src/components/Tabs/constants.ts +2 -2
- package/src/components/Timeline/constants.ts +1 -1
- package/src/components/Toggle/Toggle.tsx +1 -1
- package/src/components/Toggle/constants.ts +50 -0
- package/src/components/Widget/Widgets.example.tsx +2 -2
- package/src/stylesheets/index.css +2 -2
- package/dist/types/components/Form/components/FormControl/FormControl.d.ts +0 -2
- package/dist/types/components/Form/components/FormControl/constants.d.ts +0 -1
- package/dist/types/components/Form/components/FormControl/index.d.ts +0 -1
- package/dist/types/components/Form/components/FormControl/types.d.ts +0 -8
- package/plugin.d.ts +0 -4
- package/plugin.js +0 -5
- package/src/components/Form/components/FormControl/FormControl.tsx +0 -21
- package/src/components/Form/components/FormControl/constants.ts +0 -3
- package/src/components/Form/components/FormControl/index.ts +0 -1
- package/src/components/Form/components/FormControl/types.ts +0 -13
package/README.md
CHANGED
|
@@ -17,13 +17,5 @@ npm install @mbao01/common
|
|
|
17
17
|
3. Configure tailwind
|
|
18
18
|
|
|
19
19
|
```typescript
|
|
20
|
-
|
|
21
|
-
content: [
|
|
22
|
-
"node_modules/@mbao01/common/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
|
|
23
|
-
...
|
|
24
|
-
],
|
|
25
|
-
"plugins": [
|
|
26
|
-
...require("@mbao01/common/plugin"), // -> import the library plugin
|
|
27
|
-
]
|
|
28
|
-
}
|
|
20
|
+
import "@mbao01/common/styles";
|
|
29
21
|
```
|
|
@@ -24,15 +24,19 @@ declare const AlertDialog: {
|
|
|
24
24
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
25
25
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
26
26
|
outline?: boolean | undefined;
|
|
27
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
27
28
|
wide?: boolean | undefined;
|
|
28
29
|
isLoading?: boolean | undefined;
|
|
30
|
+
disabled?: boolean | undefined;
|
|
29
31
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
30
32
|
Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
31
33
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
32
34
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
33
35
|
outline?: boolean | undefined;
|
|
36
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
34
37
|
wide?: boolean | undefined;
|
|
35
38
|
isLoading?: boolean | undefined;
|
|
39
|
+
disabled?: boolean | undefined;
|
|
36
40
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
37
41
|
};
|
|
38
42
|
export { AlertDialog };
|
|
@@ -3,8 +3,10 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
|
|
|
3
3
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
4
4
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
5
5
|
outline?: boolean | undefined;
|
|
6
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
6
7
|
wide?: boolean | undefined;
|
|
7
8
|
isLoading?: boolean | undefined;
|
|
9
|
+
disabled?: boolean | undefined;
|
|
8
10
|
} & {
|
|
9
11
|
asChild?: boolean;
|
|
10
12
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export declare const getButtonClasses: (props?: ({
|
|
2
2
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
|
|
3
3
|
outline?: boolean | null | undefined;
|
|
4
|
+
rounded?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
4
5
|
wide?: boolean | null | undefined;
|
|
5
6
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
6
7
|
isLoading?: boolean | null | undefined;
|
|
8
|
+
disabled?: boolean | null | undefined;
|
|
7
9
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps, CardTitleProps } from './types';
|
|
2
2
|
declare const Card: {
|
|
3
|
-
({
|
|
3
|
+
({ size, border, horizontal, overlay, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Actions: ({ className, ...props }: CardActionsProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
Body: ({ className, ...props }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
Header: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const getCardClasses: (props?: ({
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
border?: "solid" | "dash" | null | undefined;
|
|
3
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
4
4
|
horizontal?: boolean | null | undefined;
|
|
5
5
|
overlay?: boolean | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -8,8 +8,10 @@ declare const Carousel: {
|
|
|
8
8
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
9
9
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
10
10
|
outline?: boolean | undefined;
|
|
11
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
11
12
|
wide?: boolean | undefined;
|
|
12
13
|
isLoading?: boolean | undefined;
|
|
14
|
+
disabled?: boolean | undefined;
|
|
13
15
|
} & {
|
|
14
16
|
asChild?: boolean;
|
|
15
17
|
} & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -17,8 +19,10 @@ declare const Carousel: {
|
|
|
17
19
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
18
20
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
19
21
|
outline?: boolean | undefined;
|
|
22
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
20
23
|
wide?: boolean | undefined;
|
|
21
24
|
isLoading?: boolean | undefined;
|
|
25
|
+
disabled?: boolean | undefined;
|
|
22
26
|
} & {
|
|
23
27
|
asChild?: boolean;
|
|
24
28
|
} & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -23,6 +23,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
|
|
|
23
23
|
role?: "application" | "dialog" | undefined | undefined;
|
|
24
24
|
"aria-label"?: string | undefined;
|
|
25
25
|
footer?: import('react').ReactNode;
|
|
26
|
+
animate?: boolean | undefined;
|
|
26
27
|
month?: Date | undefined;
|
|
27
28
|
classNames?: (Partial<import('react-day-picker').ClassNames> & Partial<import('react-day-picker').DeprecatedUI<string>>) | undefined;
|
|
28
29
|
showOutsideDays?: boolean | undefined;
|
|
@@ -8,7 +8,6 @@ declare const Select: {
|
|
|
8
8
|
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
|
|
9
9
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
10
10
|
outline?: boolean | undefined;
|
|
11
|
-
wide?: boolean | undefined;
|
|
12
11
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
13
12
|
Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
14
13
|
position?: "popper" | "item-aligned" | undefined;
|
|
@@ -18,7 +17,6 @@ declare const Select: {
|
|
|
18
17
|
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
|
|
19
18
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
20
19
|
outline?: boolean | undefined;
|
|
21
|
-
wide?: boolean | undefined;
|
|
22
20
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
23
21
|
Icon: React.ForwardRefExoticComponent<SelectPrimitive.SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
|
|
24
22
|
ItemText: React.ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export declare const getSelectTriggerClasses: (props?: ({
|
|
2
2
|
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
3
3
|
outline?: boolean | null | undefined;
|
|
4
|
-
wide?: boolean | null | undefined;
|
|
5
4
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
6
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
6
|
export declare const getSelectItemClasses: (props?: ({
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { As, FieldsetLabelProps, FieldsetLegendProps, FieldsetProps } from './types';
|
|
2
|
+
declare const Fieldset: {
|
|
3
|
+
({ children, className, ...props }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
Label: <T extends As>({ as, children, className, ...props }: FieldsetLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
Legend: ({ children, className, ...props }: FieldsetLegendProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export { Fieldset };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const getFieldsetClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
2
|
+
export declare const getFieldsetLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
3
|
+
export declare const getFieldsetLegendClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Fieldset } from './Fieldset';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { VariantProps } from '../../../../libs';
|
|
2
|
+
import { getFieldsetClasses, getFieldsetLabelClasses, getFieldsetLegendClasses } from './constants';
|
|
3
|
+
export type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement> & VariantProps<typeof getFieldsetClasses>;
|
|
4
|
+
export type As = "div" | "span" | "label" | "p";
|
|
5
|
+
type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
|
|
6
|
+
export type FieldsetLabelProps<T extends As> = (T extends "label" ? React.LabelHTMLAttributes<HTMLLabelElement> : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) & VariantProps<typeof getFieldsetLabelClasses> & {
|
|
7
|
+
as?: T;
|
|
8
|
+
};
|
|
9
|
+
export type FieldsetLegendProps = React.HTMLAttributes<HTMLLegendElement> & VariantProps<typeof getFieldsetLegendClasses>;
|
|
10
|
+
export {};
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { LabelProps
|
|
2
|
-
declare const Label: {
|
|
1
|
+
import { LabelProps } from './types';
|
|
2
|
+
export declare const Label: {
|
|
3
3
|
({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string | undefined;
|
|
5
|
-
Text: ({ className, children, ...props }: LabelTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
5
|
};
|
|
7
|
-
export { Label };
|
|
@@ -13,4 +13,4 @@ export { TagsInput } from './TagsInput';
|
|
|
13
13
|
export { Textarea } from './Textarea';
|
|
14
14
|
export { TextField } from './TextField';
|
|
15
15
|
export { Label } from './components/Label';
|
|
16
|
-
export {
|
|
16
|
+
export { Fieldset } from './components/Fieldset';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const getLoadingClasses: (props?: ({
|
|
2
2
|
variant?: "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity" | null | undefined;
|
|
3
|
-
intent?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
3
|
+
intent?: "accent" | "default" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
4
4
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
5
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -30,8 +30,10 @@ declare const Sidebar: {
|
|
|
30
30
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
31
31
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
32
32
|
outline?: boolean | undefined;
|
|
33
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
33
34
|
wide?: boolean | undefined;
|
|
34
35
|
isLoading?: boolean | undefined;
|
|
36
|
+
disabled?: boolean | undefined;
|
|
35
37
|
} & {
|
|
36
38
|
asChild?: boolean;
|
|
37
39
|
} & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -4,9 +4,12 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Toggl
|
|
|
4
4
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
5
5
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
6
6
|
outline?: boolean | undefined;
|
|
7
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
7
8
|
wide?: boolean | undefined;
|
|
8
9
|
isLoading?: boolean | undefined;
|
|
10
|
+
disabled?: boolean | undefined;
|
|
9
11
|
}, "variant" | "isLoading"> & {
|
|
10
12
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
|
|
13
|
+
outline?: boolean | undefined;
|
|
11
14
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
12
15
|
export { Toggle };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare const getToggleClasses: (props?: ({
|
|
2
2
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
3
|
+
outline?: boolean | null | undefined;
|
|
3
4
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -6,10 +6,13 @@ declare const ToggleGroup: {
|
|
|
6
6
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
outline?: boolean | undefined;
|
|
9
|
+
rounded?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
9
10
|
wide?: boolean | undefined;
|
|
10
11
|
isLoading?: boolean | undefined;
|
|
12
|
+
disabled?: boolean | undefined;
|
|
11
13
|
}, "variant" | "isLoading"> & {
|
|
12
14
|
variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
|
|
15
|
+
outline?: boolean | undefined;
|
|
13
16
|
} & import('react').RefAttributes<HTMLButtonElement>>;
|
|
14
17
|
};
|
|
15
18
|
export { ToggleGroup };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mbao01/common",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1
|
|
4
|
+
"version": "0.2.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Ayomide Bakare",
|
|
7
7
|
"license": "MIT",
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
"./libs": "./src/libs/index.ts",
|
|
24
|
-
"./plugin": "./plugin.js",
|
|
25
24
|
"./utilities": "./src/utilities/index.ts",
|
|
26
25
|
"./vitest/setup": "./vitest-setup.ts",
|
|
27
26
|
"./vitest/config": "./vitest.config.ts",
|
|
@@ -32,8 +31,6 @@
|
|
|
32
31
|
"files": [
|
|
33
32
|
"src",
|
|
34
33
|
"dist/types",
|
|
35
|
-
"plugin.js",
|
|
36
|
-
"plugin.d.ts",
|
|
37
34
|
"tsconfig.node.json",
|
|
38
35
|
"tsconfig.shared.json",
|
|
39
36
|
"vitest-setup.ts",
|
|
@@ -72,103 +69,102 @@
|
|
|
72
69
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
73
70
|
"@dnd-kit/sortable": "^10.0.0",
|
|
74
71
|
"@dnd-kit/utilities": "^3.2.2",
|
|
75
|
-
"@radix-ui/react-accordion": "^1.2.
|
|
76
|
-
"@radix-ui/react-alert-dialog": "^1.1.
|
|
77
|
-
"@radix-ui/react-avatar": "^1.1.
|
|
78
|
-
"@radix-ui/react-checkbox": "^1.1.
|
|
79
|
-
"@radix-ui/react-collapsible": "^1.1.
|
|
80
|
-
"@radix-ui/react-context-menu": "^2.2.
|
|
81
|
-
"@radix-ui/react-dialog": "^1.1.
|
|
82
|
-
"@radix-ui/react-dropdown-menu": "^2.1.
|
|
83
|
-
"@radix-ui/react-hover-card": "^1.1.
|
|
84
|
-
"@radix-ui/react-label": "^2.1.
|
|
85
|
-
"@radix-ui/react-menubar": "^1.1.
|
|
86
|
-
"@radix-ui/react-navigation-menu": "^1.2.
|
|
87
|
-
"@radix-ui/react-popover": "^1.1.
|
|
88
|
-
"@radix-ui/react-progress": "^1.1.
|
|
89
|
-
"@radix-ui/react-scroll-area": "^1.2.
|
|
90
|
-
"@radix-ui/react-select": "^2.1.
|
|
91
|
-
"@radix-ui/react-separator": "^1.1.
|
|
92
|
-
"@radix-ui/react-slider": "^1.2.
|
|
93
|
-
"@radix-ui/react-slot": "^1.1.
|
|
94
|
-
"@radix-ui/react-tabs": "^1.1.
|
|
95
|
-
"@radix-ui/react-toggle": "^1.1.
|
|
96
|
-
"@radix-ui/react-toggle-group": "^1.1.
|
|
97
|
-
"@radix-ui/react-tooltip": "^1.1.
|
|
72
|
+
"@radix-ui/react-accordion": "^1.2.3",
|
|
73
|
+
"@radix-ui/react-alert-dialog": "^1.1.6",
|
|
74
|
+
"@radix-ui/react-avatar": "^1.1.3",
|
|
75
|
+
"@radix-ui/react-checkbox": "^1.1.4",
|
|
76
|
+
"@radix-ui/react-collapsible": "^1.1.3",
|
|
77
|
+
"@radix-ui/react-context-menu": "^2.2.6",
|
|
78
|
+
"@radix-ui/react-dialog": "^1.1.6",
|
|
79
|
+
"@radix-ui/react-dropdown-menu": "^2.1.6",
|
|
80
|
+
"@radix-ui/react-hover-card": "^1.1.6",
|
|
81
|
+
"@radix-ui/react-label": "^2.1.2",
|
|
82
|
+
"@radix-ui/react-menubar": "^1.1.6",
|
|
83
|
+
"@radix-ui/react-navigation-menu": "^1.2.5",
|
|
84
|
+
"@radix-ui/react-popover": "^1.1.6",
|
|
85
|
+
"@radix-ui/react-progress": "^1.1.2",
|
|
86
|
+
"@radix-ui/react-scroll-area": "^1.2.3",
|
|
87
|
+
"@radix-ui/react-select": "^2.1.6",
|
|
88
|
+
"@radix-ui/react-separator": "^1.1.2",
|
|
89
|
+
"@radix-ui/react-slider": "^1.2.3",
|
|
90
|
+
"@radix-ui/react-slot": "^1.1.2",
|
|
91
|
+
"@radix-ui/react-tabs": "^1.1.3",
|
|
92
|
+
"@radix-ui/react-toggle": "^1.1.2",
|
|
93
|
+
"@radix-ui/react-toggle-group": "^1.1.2",
|
|
94
|
+
"@radix-ui/react-tooltip": "^1.1.8",
|
|
98
95
|
"@tailwindcss/typography": "^0.5.16",
|
|
99
|
-
"chrono-node": "^2.7.
|
|
96
|
+
"chrono-node": "^2.7.9",
|
|
100
97
|
"class-variance-authority": "^0.7.1",
|
|
101
98
|
"clsx": "^2.1.1",
|
|
102
|
-
"cmdk": "^1.
|
|
103
|
-
"daisyui": "^
|
|
99
|
+
"cmdk": "^1.1.1",
|
|
100
|
+
"daisyui": "^5.0.9",
|
|
104
101
|
"date-fns": "^4.1.0",
|
|
105
102
|
"embla-carousel-react": "^8.5.2",
|
|
106
|
-
"lucide-react": "^0.
|
|
107
|
-
"react-day-picker": "^9.
|
|
108
|
-
"react-dropzone": "^14.3.
|
|
103
|
+
"lucide-react": "^0.486.0",
|
|
104
|
+
"react-day-picker": "^9.6.4",
|
|
105
|
+
"react-dropzone": "^14.3.8",
|
|
109
106
|
"react-international-phone": "^4.5.0",
|
|
110
107
|
"react-otp-input": "^3.1.1",
|
|
111
|
-
"sonner": "^
|
|
112
|
-
"tailwind-merge": "^
|
|
113
|
-
"tailwindcss-animate": "^1.0.7",
|
|
108
|
+
"sonner": "^2.0.3",
|
|
109
|
+
"tailwind-merge": "^3.1.0",
|
|
114
110
|
"timescape": "^0.7.1",
|
|
115
|
-
"universal-cookie": "^
|
|
111
|
+
"universal-cookie": "^8.0.1",
|
|
116
112
|
"vaul": "^1.1.2"
|
|
117
113
|
},
|
|
118
114
|
"devDependencies": {
|
|
119
|
-
"@eslint/js": "^9.
|
|
115
|
+
"@eslint/js": "^9.23.0",
|
|
120
116
|
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
|
|
121
|
-
"@storybook/addon-a11y": "^8.
|
|
117
|
+
"@storybook/addon-a11y": "^8.6.11",
|
|
122
118
|
"@storybook/addon-coverage": "^1.0.5",
|
|
123
|
-
"@storybook/addon-essentials": "^8.
|
|
124
|
-
"@storybook/addon-interactions": "^8.
|
|
125
|
-
"@storybook/addon-links": "^8.
|
|
126
|
-
"@storybook/addon-onboarding": "^8.
|
|
127
|
-
"@storybook/addon-storysource": "^8.
|
|
128
|
-
"@storybook/addon-themes": "^8.
|
|
129
|
-
"@storybook/addon-viewport": "^8.
|
|
130
|
-
"@storybook/blocks": "^8.
|
|
131
|
-
"@storybook/react": "^8.
|
|
132
|
-
"@storybook/react-vite": "^8.
|
|
133
|
-
"@storybook/test": "^8.
|
|
134
|
-
"@storybook/test-runner": "^0.
|
|
119
|
+
"@storybook/addon-essentials": "^8.6.11",
|
|
120
|
+
"@storybook/addon-interactions": "^8.6.11",
|
|
121
|
+
"@storybook/addon-links": "^8.6.11",
|
|
122
|
+
"@storybook/addon-onboarding": "^8.6.11",
|
|
123
|
+
"@storybook/addon-storysource": "^8.6.11",
|
|
124
|
+
"@storybook/addon-themes": "^8.6.11",
|
|
125
|
+
"@storybook/addon-viewport": "^8.6.11",
|
|
126
|
+
"@storybook/blocks": "^8.6.11",
|
|
127
|
+
"@storybook/react": "^8.6.11",
|
|
128
|
+
"@storybook/react-vite": "^8.6.11",
|
|
129
|
+
"@storybook/test": "^8.6.11",
|
|
130
|
+
"@storybook/test-runner": "^0.22.0",
|
|
131
|
+
"@tailwindcss/postcss": "^4.0.17",
|
|
132
|
+
"@tailwindcss/vite": "^4.0.17",
|
|
135
133
|
"@testing-library/jest-dom": "^6.6.3",
|
|
136
134
|
"@testing-library/react": "^16.2.0",
|
|
137
135
|
"@testing-library/user-event": "^14.6.1",
|
|
138
|
-
"@types/eslint__js": "^8.42.3",
|
|
139
136
|
"@types/jest-image-snapshot": "^6.4.0",
|
|
140
|
-
"@types/node": "^22.13.
|
|
141
|
-
"@types/react": "^19.0.
|
|
142
|
-
"@types/react-dom": "^19.0.
|
|
143
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
144
|
-
"@typescript-eslint/parser": "^8.
|
|
137
|
+
"@types/node": "^22.13.16",
|
|
138
|
+
"@types/react": "^19.0.12",
|
|
139
|
+
"@types/react-dom": "^19.0.4",
|
|
140
|
+
"@typescript-eslint/eslint-plugin": "^8.29.0",
|
|
141
|
+
"@typescript-eslint/parser": "^8.29.0",
|
|
145
142
|
"@vitejs/plugin-react": "^4.3.4",
|
|
146
|
-
"@vitest/coverage-v8": "^3.
|
|
147
|
-
"@vitest/ui": "^3.
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
"eslint": "^9.19.0",
|
|
143
|
+
"@vitest/coverage-v8": "^3.1.1",
|
|
144
|
+
"@vitest/ui": "^3.1.1",
|
|
145
|
+
"axe-playwright": "^2.1.0",
|
|
146
|
+
"eslint": "^9.23.0",
|
|
151
147
|
"eslint-plugin-react": "^7.37.4",
|
|
152
|
-
"eslint-plugin-react-hooks": "^5.
|
|
153
|
-
"eslint-plugin-react-refresh": "^0.4.
|
|
154
|
-
"eslint-plugin-storybook": "^0.
|
|
155
|
-
"globals": "^
|
|
148
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
149
|
+
"eslint-plugin-react-refresh": "^0.4.19",
|
|
150
|
+
"eslint-plugin-storybook": "^0.12.0",
|
|
151
|
+
"globals": "^16.0.0",
|
|
156
152
|
"jest-image-snapshot": "^6.4.0",
|
|
157
153
|
"jsdom": "^26.0.0",
|
|
158
154
|
"path": "^0.12.7",
|
|
159
|
-
"postcss": "^8.5.
|
|
160
|
-
"prettier": "^3.
|
|
161
|
-
"react": "^19.
|
|
162
|
-
"react-dom": "^19.
|
|
163
|
-
"react-router-dom": "^7.1
|
|
155
|
+
"postcss": "^8.5.3",
|
|
156
|
+
"prettier": "^3.5.3",
|
|
157
|
+
"react": "^19.1.0",
|
|
158
|
+
"react-dom": "^19.1.0",
|
|
159
|
+
"react-router-dom": "^7.4.1",
|
|
164
160
|
"recharts": "^2.15.1",
|
|
165
|
-
"storybook": "^8.
|
|
166
|
-
"tailwindcss": "^
|
|
167
|
-
"typescript": "^5.
|
|
168
|
-
"typescript-eslint": "^8.
|
|
169
|
-
"vite": "^6.
|
|
170
|
-
"vite-plugin-dts": "^4.5.
|
|
171
|
-
"vitest": "^3.
|
|
161
|
+
"storybook": "^8.6.11",
|
|
162
|
+
"tailwindcss": "^4.0.17",
|
|
163
|
+
"typescript": "^5.8.2",
|
|
164
|
+
"typescript-eslint": "^8.29.0",
|
|
165
|
+
"vite": "^6.2.4",
|
|
166
|
+
"vite-plugin-dts": "^4.5.3",
|
|
167
|
+
"vitest": "^3.1.1"
|
|
172
168
|
},
|
|
173
169
|
"peerDependencies": {
|
|
174
170
|
"react": "^19.0.0",
|
|
@@ -176,5 +172,5 @@
|
|
|
176
172
|
"recharts": "^2.15.0",
|
|
177
173
|
"typescript": "^5.7.2"
|
|
178
174
|
},
|
|
179
|
-
"gitHead": "
|
|
175
|
+
"gitHead": "7cf9ad95dc302d8c411e92322edf894484c894d0"
|
|
180
176
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cva } from "../../libs";
|
|
2
2
|
|
|
3
3
|
export const getDialogCloseClasses = cva(
|
|
4
|
-
"absolute right-4 top-4 rounded-
|
|
4
|
+
"absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
|
5
5
|
);
|
|
@@ -13,8 +13,8 @@ export const getAvatarClasses = cva("avatar", {
|
|
|
13
13
|
64: "w-64 h-64",
|
|
14
14
|
},
|
|
15
15
|
status: {
|
|
16
|
-
online: "online",
|
|
17
|
-
offline: "offline",
|
|
16
|
+
online: "avatar-online",
|
|
17
|
+
offline: "avatar-offline",
|
|
18
18
|
},
|
|
19
19
|
},
|
|
20
20
|
});
|
|
@@ -34,14 +34,14 @@ const classesConfig = {
|
|
|
34
34
|
warning: "bg-warning text-warning-content ring-warning",
|
|
35
35
|
},
|
|
36
36
|
shape: {
|
|
37
|
-
round: "rounded",
|
|
37
|
+
round: "rounded-sm",
|
|
38
38
|
circle: "rounded-full",
|
|
39
39
|
hexagon: "mask mask-hexagon",
|
|
40
40
|
triangle: "mask mask-triangle",
|
|
41
41
|
television: "mask mask-squircle",
|
|
42
42
|
},
|
|
43
43
|
ring: {
|
|
44
|
-
true: "ring ring-offset-base-100 ring-offset-2",
|
|
44
|
+
true: "ring-3 ring-offset-base-100 ring-offset-2",
|
|
45
45
|
},
|
|
46
46
|
},
|
|
47
47
|
};
|
|
@@ -6,13 +6,32 @@ import { getButtonClasses } from "./constants";
|
|
|
6
6
|
import { type ButtonProps } from "./types";
|
|
7
7
|
|
|
8
8
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
9
|
-
(
|
|
9
|
+
(
|
|
10
|
+
{
|
|
11
|
+
asChild,
|
|
12
|
+
className,
|
|
13
|
+
outline,
|
|
14
|
+
children,
|
|
15
|
+
isLoading,
|
|
16
|
+
variant,
|
|
17
|
+
size,
|
|
18
|
+
wide,
|
|
19
|
+
rounded,
|
|
20
|
+
disabled,
|
|
21
|
+
...props
|
|
22
|
+
},
|
|
23
|
+
ref
|
|
24
|
+
) => {
|
|
10
25
|
const Comp = asChild ? Slot : "button";
|
|
11
26
|
|
|
12
27
|
return (
|
|
13
28
|
<Comp
|
|
14
29
|
ref={ref}
|
|
15
|
-
|
|
30
|
+
disabled={disabled}
|
|
31
|
+
className={cn(
|
|
32
|
+
getButtonClasses({ size, wide, outline, variant, rounded, disabled, isLoading }),
|
|
33
|
+
className
|
|
34
|
+
)}
|
|
16
35
|
{...props}
|
|
17
36
|
>
|
|
18
37
|
<Slottable>{children}</Slottable>
|
|
@@ -21,7 +40,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
21
40
|
className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
|
|
22
41
|
data-testid="loading"
|
|
23
42
|
>
|
|
24
|
-
<Loading
|
|
43
|
+
<Loading
|
|
44
|
+
intent={!variant || variant === "link" || variant === "ghost" ? "default" : variant}
|
|
45
|
+
/>
|
|
25
46
|
</span>
|
|
26
47
|
) : null}
|
|
27
48
|
</Comp>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cva } from "../../libs";
|
|
2
2
|
|
|
3
|
-
export const getButtonClasses = cva("btn
|
|
3
|
+
export const getButtonClasses = cva("btn", {
|
|
4
4
|
variants: {
|
|
5
5
|
variant: {
|
|
6
6
|
accent: "btn-accent",
|
|
@@ -18,6 +18,12 @@ export const getButtonClasses = cva("btn [&:disabled]:text-opacity-50", {
|
|
|
18
18
|
outline: {
|
|
19
19
|
true: "btn-outline",
|
|
20
20
|
},
|
|
21
|
+
rounded: {
|
|
22
|
+
xs: "rounded-xs",
|
|
23
|
+
sm: "rounded-sm",
|
|
24
|
+
md: "rounded-md",
|
|
25
|
+
lg: "rounded-lg",
|
|
26
|
+
},
|
|
21
27
|
wide: {
|
|
22
28
|
true: "btn-wide",
|
|
23
29
|
},
|
|
@@ -30,12 +36,24 @@ export const getButtonClasses = cva("btn [&:disabled]:text-opacity-50", {
|
|
|
30
36
|
isLoading: {
|
|
31
37
|
true: "relative overflow-hidden",
|
|
32
38
|
},
|
|
39
|
+
disabled: {
|
|
40
|
+
true: "",
|
|
41
|
+
},
|
|
33
42
|
},
|
|
34
43
|
compoundVariants: [
|
|
35
44
|
{
|
|
36
45
|
size: undefined,
|
|
37
46
|
className: "min-h-fit h-10",
|
|
38
47
|
},
|
|
48
|
+
{
|
|
49
|
+
rounded: undefined,
|
|
50
|
+
className: "rounded-md",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
disabled: true,
|
|
54
|
+
isLoading: true,
|
|
55
|
+
className: "text-transparent",
|
|
56
|
+
},
|
|
39
57
|
{
|
|
40
58
|
variant: undefined,
|
|
41
59
|
outline: true,
|
|
@@ -21,20 +21,20 @@ export const Calendar = ({
|
|
|
21
21
|
day: "h-9 w-9 text-center flex items-center justify-center text-sm p-0 relative focus-within:relative focus-within:z-20",
|
|
22
22
|
day_button: cn(
|
|
23
23
|
getButtonClasses({ variant: "ghost" }),
|
|
24
|
-
"h-8 w-8 p-0 font-normal group-has-[*]/today:bg-accent group-aria-[selected]/today:bg-primary group-[.day-in-range]/today
|
|
24
|
+
"h-8 w-8 p-0 font-normal group-has-[*]/today:bg-accent group-aria-[selected]/today:bg-primary group-[.day-in-range]/today:bg-primary/50! group-has-[*]/today:text-accent-content group-has-[*]/today:rounded-full"
|
|
25
25
|
),
|
|
26
|
-
disabled: "
|
|
26
|
+
disabled: "opacity-30!",
|
|
27
27
|
dropdown: "bg-transparent",
|
|
28
|
-
dropdown_root: "text-sm
|
|
28
|
+
dropdown_root: "text-sm *:aria-hidden:hidden",
|
|
29
29
|
dropdowns: "flex justify-center items-center",
|
|
30
30
|
hidden: "hidden",
|
|
31
31
|
button_previous: cn(
|
|
32
32
|
getButtonClasses({ outline: true }),
|
|
33
|
-
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100
|
|
33
|
+
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 disabled:text-opacity-50"
|
|
34
34
|
),
|
|
35
35
|
button_next: cn(
|
|
36
36
|
getButtonClasses({ outline: true }),
|
|
37
|
-
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100
|
|
37
|
+
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 disabled:text-opacity-50"
|
|
38
38
|
),
|
|
39
39
|
footer: "text-sm py-2",
|
|
40
40
|
month: "space-y-4",
|
|
@@ -43,11 +43,11 @@ export const Calendar = ({
|
|
|
43
43
|
months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 relative",
|
|
44
44
|
nav: "absolute flex gap-2 items-center rtl:left-0 rtl:right-auto right-0 z-10",
|
|
45
45
|
outside: "opacity-50",
|
|
46
|
-
range_end: "
|
|
47
|
-
range_start: "
|
|
48
|
-
range_middle: "day-in-range
|
|
46
|
+
range_end: "opacity-100!",
|
|
47
|
+
range_start: "opacity-100!",
|
|
48
|
+
range_middle: "day-in-range *:bg-primary/50 *:text-primary-content",
|
|
49
49
|
selected:
|
|
50
|
-
"
|
|
50
|
+
"*:bg-primary *:text-primary-content [&:disabled>*]:bg-primary [&:disabled>*]:text-primary-content [&:hover>*]:bg-primary [&:hover>*]:text-primary-content [&:focus>*]:bg-primary [&:focus>*]:text-primary-content",
|
|
51
51
|
today: "group/today [&:has(*)]:ring-0 ring-1 ring-accent ring-inset rounded-full",
|
|
52
52
|
weekdays: "flex",
|
|
53
53
|
weekday: "rounded-md w-9 font-normal text-[0.8rem]",
|