@a2v2ai/uikit 0.0.18 → 0.0.20
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/Badge/Badge.js +2 -2
- package/Button/Button.js +1 -1
- package/Calendar/Calendar.d.ts +5 -1
- package/Calendar/Calendar.js +55 -54
- package/Checkbox/Checkbox.js +1 -1
- package/Flex/Flex.d.ts +1 -1
- package/IconButton/IconButton.js +1 -1
- package/Input/Input.d.ts +1 -0
- package/Input/Input.js +7 -5
- package/Progress/Progress.js +1 -1
- package/Select/Select.d.ts +5 -1
- package/Select/Select.js +11 -2
- package/Switch/Switch.js +1 -1
- package/index.css +4 -4
- package/package.json +1 -1
package/Badge/Badge.js
CHANGED
|
@@ -5,10 +5,10 @@ exports.Badge = Badge;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
7
7
|
const utils_1 = require("../lib/utils");
|
|
8
|
-
const badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-
|
|
8
|
+
const badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-accent-600 focus:ring-offset-2", {
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
|
-
default: "border-transparent bg-
|
|
11
|
+
default: "border-transparent bg-accent-600 text-white",
|
|
12
12
|
secondary: "border-transparent bg-grey-100 text-main-950",
|
|
13
13
|
outline: "border-grey-300 text-main-950",
|
|
14
14
|
destructive: "border-transparent bg-error-600 text-white",
|
package/Button/Button.js
CHANGED
|
@@ -42,7 +42,7 @@ const utils_1 = require("../lib/utils");
|
|
|
42
42
|
const buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap font-normal font-sans cursor-pointer transition-colors focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
43
43
|
variants: {
|
|
44
44
|
variant: {
|
|
45
|
-
primary: "bg-
|
|
45
|
+
primary: "bg-accent-600 text-white hover:bg-accent-700",
|
|
46
46
|
secondary: "bg-main-100 text-main-950 hover:bg-main-200",
|
|
47
47
|
outline: "border border-main-300 bg-transparent text-main-950 hover:bg-main-100",
|
|
48
48
|
ghost: "bg-transparent text-main-600 hover:bg-main-100 hover:text-main-950",
|
package/Calendar/Calendar.d.ts
CHANGED
|
@@ -7,8 +7,12 @@ export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
|
|
|
7
7
|
* @default "ghost"
|
|
8
8
|
*/
|
|
9
9
|
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
10
|
+
/**
|
|
11
|
+
* Error message to display below the calendar
|
|
12
|
+
*/
|
|
13
|
+
error?: string;
|
|
10
14
|
};
|
|
11
|
-
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, error, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
12
16
|
declare namespace Calendar {
|
|
13
17
|
var displayName: string;
|
|
14
18
|
}
|
package/Calendar/Calendar.js
CHANGED
|
@@ -42,61 +42,62 @@ const lucide_react_1 = require("lucide-react");
|
|
|
42
42
|
const react_day_picker_1 = require("react-day-picker");
|
|
43
43
|
const utils_1 = require("../lib/utils");
|
|
44
44
|
const Button_1 = require("../Button/Button");
|
|
45
|
-
|
|
45
|
+
const Typography_1 = require("../Typography/Typography");
|
|
46
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, error, ...props }) {
|
|
46
47
|
const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
|
|
47
|
-
return ((0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { showOutsideDays: showOutsideDays, className: (0, utils_1.cn)("bg-white group/calendar p-3 rounded-lg border border-grey-200", className), captionLayout: captionLayout, formatters: {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
48
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { showOutsideDays: showOutsideDays, className: (0, utils_1.cn)("bg-white group/calendar p-3 rounded-lg border", error ? "border-error-500" : "border-grey-200", className), captionLayout: captionLayout, formatters: {
|
|
49
|
+
formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
|
|
50
|
+
...formatters,
|
|
51
|
+
}, classNames: {
|
|
52
|
+
root: (0, utils_1.cn)("w-fit", defaultClassNames.root),
|
|
53
|
+
months: (0, utils_1.cn)("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
|
|
54
|
+
month: (0, utils_1.cn)("flex flex-col w-full gap-4", defaultClassNames.month),
|
|
55
|
+
nav: (0, utils_1.cn)("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
|
|
56
|
+
button_previous: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: buttonVariant, size: "small" }), "size-8 aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
|
|
57
|
+
button_next: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: buttonVariant, size: "small" }), "size-8 aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
|
|
58
|
+
month_caption: (0, utils_1.cn)("flex items-center justify-center h-8 w-full px-8", defaultClassNames.month_caption),
|
|
59
|
+
dropdowns: (0, utils_1.cn)("w-full flex items-center text-sm font-medium justify-center h-8 gap-1.5", defaultClassNames.dropdowns),
|
|
60
|
+
dropdown_root: (0, utils_1.cn)("relative has-focus:border-grey-400 border border-grey-300 shadow-xs has-focus:ring-grey-300/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root),
|
|
61
|
+
dropdown: (0, utils_1.cn)("absolute bg-white inset-0 opacity-0", defaultClassNames.dropdown),
|
|
62
|
+
caption_label: (0, utils_1.cn)("select-none font-medium text-main-900", captionLayout === "label"
|
|
63
|
+
? "text-sm"
|
|
64
|
+
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-main-400 [&>svg]:size-3.5", defaultClassNames.caption_label),
|
|
65
|
+
table: "w-full border-collapse",
|
|
66
|
+
weekdays: (0, utils_1.cn)("flex", defaultClassNames.weekdays),
|
|
67
|
+
weekday: (0, utils_1.cn)("text-main-500 rounded-md flex-1 font-normal text-[0.8rem] select-none w-8 h-8 flex items-center justify-center", defaultClassNames.weekday),
|
|
68
|
+
week: (0, utils_1.cn)("flex w-full mt-2", defaultClassNames.week),
|
|
69
|
+
week_number_header: (0, utils_1.cn)("select-none w-8", defaultClassNames.week_number_header),
|
|
70
|
+
week_number: (0, utils_1.cn)("text-[0.8rem] select-none text-main-400", defaultClassNames.week_number),
|
|
71
|
+
day: (0, utils_1.cn)("relative w-8 h-8 p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none", props.showWeekNumber
|
|
72
|
+
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
|
|
73
|
+
: "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
|
|
74
|
+
range_start: (0, utils_1.cn)("rounded-l-md bg-main-100", defaultClassNames.range_start),
|
|
75
|
+
range_middle: (0, utils_1.cn)("rounded-none", defaultClassNames.range_middle),
|
|
76
|
+
range_end: (0, utils_1.cn)("rounded-r-md bg-main-100", defaultClassNames.range_end),
|
|
77
|
+
today: (0, utils_1.cn)("bg-main-100 text-main-900 rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
78
|
+
outside: (0, utils_1.cn)("text-main-300 aria-selected:text-main-400", defaultClassNames.outside),
|
|
79
|
+
disabled: (0, utils_1.cn)("text-main-300 opacity-50", defaultClassNames.disabled),
|
|
80
|
+
hidden: (0, utils_1.cn)("invisible", defaultClassNames.hidden),
|
|
81
|
+
...classNames,
|
|
82
|
+
}, components: {
|
|
83
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
84
|
+
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "calendar", ref: rootRef, className: (0, utils_1.cn)(className), ...props }));
|
|
85
|
+
},
|
|
86
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
87
|
+
if (orientation === "left") {
|
|
88
|
+
return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { className: (0, utils_1.cn)("size-4", className), ...props }));
|
|
89
|
+
}
|
|
90
|
+
if (orientation === "right") {
|
|
91
|
+
return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { className: (0, utils_1.cn)("size-4", className), ...props }));
|
|
92
|
+
}
|
|
93
|
+
return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: (0, utils_1.cn)("size-4", className), ...props }));
|
|
94
|
+
},
|
|
95
|
+
DayButton: CalendarDayButton,
|
|
96
|
+
WeekNumber: ({ children, ...props }) => {
|
|
97
|
+
return ((0, jsx_runtime_1.jsx)("td", { ...props, children: (0, jsx_runtime_1.jsx)("div", { className: "flex size-8 items-center justify-center text-center", children: children }) }));
|
|
98
|
+
},
|
|
99
|
+
...components,
|
|
100
|
+
}, ...props }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
|
|
100
101
|
}
|
|
101
102
|
function CalendarDayButton({ className, day, modifiers, ...props }) {
|
|
102
103
|
const defaultClassNames = (0, react_day_picker_1.getDefaultClassNames)();
|
package/Checkbox/Checkbox.js
CHANGED
|
@@ -40,7 +40,7 @@ const CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
|
|
|
40
40
|
const lucide_react_1 = require("lucide-react");
|
|
41
41
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
42
42
|
const utils_1 = require("../lib/utils");
|
|
43
|
-
const checkboxVariants = (0, class_variance_authority_1.cva)("peer shrink-0 border border-grey-300 bg-white ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
43
|
+
const checkboxVariants = (0, class_variance_authority_1.cva)("peer shrink-0 border border-grey-300 bg-white ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-600 data-[state=checked]:border-accent-600 data-[state=checked]:text-white data-[state=indeterminate]:bg-accent-600 data-[state=indeterminate]:border-accent-600 data-[state=indeterminate]:text-white", {
|
|
44
44
|
variants: {
|
|
45
45
|
size: {
|
|
46
46
|
small: "size-4 rounded-[4px]",
|
package/Flex/Flex.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
|
|
|
6
6
|
type FlexGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48;
|
|
7
7
|
declare const flexVariants: (props?: ({
|
|
8
8
|
direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
|
|
9
|
-
align?: "center" | "start" | "end" | "
|
|
9
|
+
align?: "center" | "start" | "end" | "baseline" | "stretch" | null | undefined;
|
|
10
10
|
justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
|
|
11
11
|
wrap?: "nowrap" | "wrap" | "wrap-reverse" | null | undefined;
|
|
12
12
|
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | null | undefined;
|
package/IconButton/IconButton.js
CHANGED
|
@@ -42,7 +42,7 @@ const utils_1 = require("../lib/utils");
|
|
|
42
42
|
const iconButtonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center shrink-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
43
43
|
variants: {
|
|
44
44
|
variant: {
|
|
45
|
-
primary: "bg-
|
|
45
|
+
primary: "bg-accent-600 text-white hover:bg-accent-700",
|
|
46
46
|
secondary: "bg-main-100 text-main-950 hover:bg-main-200",
|
|
47
47
|
outline: "border border-main-300 bg-transparent text-main-950 hover:bg-main-100",
|
|
48
48
|
ghost: "bg-transparent text-main-600 hover:bg-main-100 hover:text-main-950",
|
package/Input/Input.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
16
16
|
leftAddon?: React.ReactNode;
|
|
17
17
|
rightAddon?: React.ReactNode;
|
|
18
18
|
rightElement?: React.ReactNode;
|
|
19
|
+
error?: string;
|
|
19
20
|
}
|
|
20
21
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
21
22
|
export { Input, inputVariants };
|
package/Input/Input.js
CHANGED
|
@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
38
38
|
const React = __importStar(require("react"));
|
|
39
39
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
40
40
|
const utils_1 = require("../lib/utils");
|
|
41
|
+
const Typography_1 = require("../Typography/Typography");
|
|
41
42
|
const inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white border font-normal font-sans transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50", {
|
|
42
43
|
variants: {
|
|
43
44
|
size: {
|
|
@@ -62,14 +63,15 @@ const inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white
|
|
|
62
63
|
},
|
|
63
64
|
});
|
|
64
65
|
exports.inputVariants = inputVariants;
|
|
65
|
-
const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, leftIcon, rightIcon, leftAddon, rightAddon, rightElement, ...props }, ref) => {
|
|
66
|
+
const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, leftIcon, rightIcon, leftAddon, rightAddon, rightElement, error, ...props }, ref) => {
|
|
66
67
|
const hasAddons = leftIcon || rightIcon || leftAddon || rightAddon || rightElement;
|
|
68
|
+
const computedVariant = error ? "error" : variant;
|
|
67
69
|
if (hasAddons) {
|
|
68
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors", "focus-within:ring-[3px]",
|
|
69
|
-
|
|
70
|
-
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors", "focus-within:ring-[3px]", computedVariant === "error"
|
|
71
|
+
? "border-error-500 focus-within:border-error-500 focus-within:ring-error-200"
|
|
72
|
+
: "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50", size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md", size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md", size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg", size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg", !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg", !rightElement && "pr-3", roundness === "round" && "!rounded-full", props.disabled && "opacity-50 cursor-not-allowed bg-grey-50", className), children: [leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: leftIcon })), leftAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: leftAddon })), (0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)("flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400", "disabled:cursor-not-allowed"), ref: ref, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: rightAddon })), rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: rightIcon })), rightElement && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: rightElement }))] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
|
|
71
73
|
}
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant, className })), ref: ref, ...props }));
|
|
74
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant: computedVariant, className })), ref: ref, ...props }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
|
|
73
75
|
});
|
|
74
76
|
exports.Input = Input;
|
|
75
77
|
Input.displayName = "Input";
|
package/Progress/Progress.js
CHANGED
|
@@ -55,7 +55,7 @@ exports.progressVariants = progressVariants;
|
|
|
55
55
|
const progressIndicatorVariants = (0, class_variance_authority_1.cva)("h-full w-full flex-1 transition-all", {
|
|
56
56
|
variants: {
|
|
57
57
|
variant: {
|
|
58
|
-
default: "bg-
|
|
58
|
+
default: "bg-accent-600",
|
|
59
59
|
success: "bg-success-600",
|
|
60
60
|
warning: "bg-warning-500",
|
|
61
61
|
destructive: "bg-error-600",
|
package/Select/Select.d.ts
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
3
3
|
type SelectTriggerSize = "small" | "regular" | "large";
|
|
4
|
+
type SelectTriggerVariant = "default" | "error";
|
|
4
5
|
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
5
6
|
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
7
|
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
7
8
|
declare const selectTriggerVariants: (props?: ({
|
|
8
9
|
size?: "small" | "regular" | "large" | null | undefined;
|
|
10
|
+
variant?: "default" | "error" | null | undefined;
|
|
9
11
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
10
12
|
export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
|
|
11
13
|
size?: SelectTriggerSize;
|
|
14
|
+
variant?: SelectTriggerVariant;
|
|
15
|
+
error?: string;
|
|
12
16
|
}
|
|
13
17
|
declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
18
|
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -18,4 +22,4 @@ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.
|
|
|
18
22
|
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
23
|
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
24
|
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, selectTriggerVariants, };
|
|
21
|
-
export type { SelectTriggerSize };
|
|
25
|
+
export type { SelectTriggerSize, SelectTriggerVariant };
|
package/Select/Select.js
CHANGED
|
@@ -40,26 +40,35 @@ const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
|
|
|
40
40
|
const lucide_react_1 = require("lucide-react");
|
|
41
41
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
42
42
|
const utils_1 = require("../lib/utils");
|
|
43
|
+
const Typography_1 = require("../Typography/Typography");
|
|
43
44
|
const Select = SelectPrimitive.Root;
|
|
44
45
|
exports.Select = Select;
|
|
45
46
|
const SelectGroup = SelectPrimitive.Group;
|
|
46
47
|
exports.SelectGroup = SelectGroup;
|
|
47
48
|
const SelectValue = SelectPrimitive.Value;
|
|
48
49
|
exports.SelectValue = SelectValue;
|
|
49
|
-
const selectTriggerVariants = (0, class_variance_authority_1.cva)("flex w-full items-center justify-between whitespace-nowrap border
|
|
50
|
+
const selectTriggerVariants = (0, class_variance_authority_1.cva)("flex w-full items-center justify-between whitespace-nowrap border bg-white text-main-950 ring-offset-white placeholder:text-grey-400 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", {
|
|
50
51
|
variants: {
|
|
51
52
|
size: {
|
|
52
53
|
small: "h-8 px-3 text-sm rounded-md",
|
|
53
54
|
regular: "h-9 px-3 text-sm rounded-lg",
|
|
54
55
|
large: "h-10 px-3 text-base rounded-lg",
|
|
55
56
|
},
|
|
57
|
+
variant: {
|
|
58
|
+
default: "border-grey-300 focus:ring-main-950",
|
|
59
|
+
error: "border-error-500 focus:ring-error-200",
|
|
60
|
+
},
|
|
56
61
|
},
|
|
57
62
|
defaultVariants: {
|
|
58
63
|
size: "regular",
|
|
64
|
+
variant: "default",
|
|
59
65
|
},
|
|
60
66
|
});
|
|
61
67
|
exports.selectTriggerVariants = selectTriggerVariants;
|
|
62
|
-
const SelectTrigger = React.forwardRef(({ className, size, children, ...props }, ref) =>
|
|
68
|
+
const SelectTrigger = React.forwardRef(({ className, size, variant, error, children, ...props }, ref) => {
|
|
69
|
+
const computedVariant = error ? "error" : variant;
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)(selectTriggerVariants({ size, variant: computedVariant }), className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4 opacity-50" }) })] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
|
|
71
|
+
});
|
|
63
72
|
exports.SelectTrigger = SelectTrigger;
|
|
64
73
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
65
74
|
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { className: "size-4" }) })));
|
package/Switch/Switch.js
CHANGED
|
@@ -39,7 +39,7 @@ const React = __importStar(require("react"));
|
|
|
39
39
|
const SwitchPrimitive = __importStar(require("@radix-ui/react-switch"));
|
|
40
40
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
41
41
|
const utils_1 = require("../lib/utils");
|
|
42
|
-
const switchVariants = (0, class_variance_authority_1.cva)("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
42
|
+
const switchVariants = (0, class_variance_authority_1.cva)("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-600 data-[state=unchecked]:bg-grey-200", {
|
|
43
43
|
variants: {
|
|
44
44
|
size: {
|
|
45
45
|
small: "h-5 w-9",
|
package/index.css
CHANGED
|
@@ -88,10 +88,10 @@
|
|
|
88
88
|
|
|
89
89
|
/* Neutral colors */
|
|
90
90
|
--color-background-neutral-0: #ffffff;
|
|
91
|
-
--color-background-neutral-50: #
|
|
92
|
-
--color-background-neutral-100: #
|
|
93
|
-
--color-background-neutral-200: #
|
|
94
|
-
--color-background-neutral-300: #
|
|
91
|
+
--color-background-neutral-50: #FCFCFC;
|
|
92
|
+
--color-background-neutral-100: #F9F9F9;
|
|
93
|
+
--color-background-neutral-200: #F2F2F2;
|
|
94
|
+
--color-background-neutral-300: #EDEDED;
|
|
95
95
|
|
|
96
96
|
/* Border radius */
|
|
97
97
|
--radius-sm: 0.25rem;
|