@mbao01/common 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types/components/Form/DatetimeInput/constants.d.ts +0 -7
- package/dist/types/components/Form/DatetimeInput/types.d.ts +2 -2
- package/dist/types/components/Form/Input/constants.d.ts +7 -0
- package/dist/types/components/Form/MultiSelect/constants.d.ts +1 -7
- package/dist/types/components/Form/MultiSelect/types.d.ts +3 -2
- package/dist/types/components/Form/Select/Select.d.ts +2 -2
- package/dist/types/components/Form/Select/constants.d.ts +2 -2
- package/dist/types/components/Form/TagsInput/TagsInput.d.ts +2 -0
- package/dist/types/components/Form/TagsInput/constants.d.ts +0 -4
- package/dist/types/components/Form/TagsInput/types.d.ts +2 -1
- package/package.json +35 -35
- package/src/components/Form/Checkbox/constants.ts +9 -8
- package/src/components/Form/DatetimeInput/DatetimeInput.tsx +2 -2
- package/src/components/Form/DatetimeInput/constants.ts +0 -53
- package/src/components/Form/DatetimeInput/types.ts +2 -2
- package/src/components/Form/Input/constants.ts +61 -0
- package/src/components/Form/MultiSelect/MultiSelect.tsx +3 -1
- package/src/components/Form/MultiSelect/constants.ts +8 -49
- package/src/components/Form/MultiSelect/types.ts +2 -2
- package/src/components/Form/Select/constants.ts +5 -12
- package/src/components/Form/TagsInput/TagsInput.tsx +7 -2
- package/src/components/Form/TagsInput/constants.ts +15 -48
- package/src/components/Form/TagsInput/types.ts +3 -1
- package/src/components/Form/Textarea/constants.ts +0 -15
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
export declare const DEFAULT_SIZE = 96;
|
|
2
|
-
export declare const getDatetimeInputContainerClasses: (props?: ({
|
|
3
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
|
|
4
|
-
outline?: boolean | null | undefined;
|
|
5
|
-
disabled?: boolean | null | undefined;
|
|
6
|
-
wide?: boolean | null | undefined;
|
|
7
|
-
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
8
|
-
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
2
|
export declare const getDatetimeCalendarTriggerClasses: (props?: ({
|
|
10
3
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
11
4
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { VariantProps } from '../../../libs';
|
|
2
2
|
import { CalendarProps } from '../../Calendar/types';
|
|
3
|
+
import { getInputCommonClasses } from '../Input/constants';
|
|
3
4
|
import { InputProps } from '../Input/types';
|
|
4
|
-
import { getDatetimeInputContainerClasses } from './constants';
|
|
5
5
|
type DisabledType = {
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
};
|
|
8
|
-
type VariantType = VariantProps<typeof
|
|
8
|
+
type VariantType = VariantProps<typeof getInputCommonClasses>;
|
|
9
9
|
type NaturalLanguageInputType = DisabledType & {
|
|
10
10
|
locale?: Intl.LocalesArgument;
|
|
11
11
|
} & Omit<InputProps, "type" | "ref" | "value" | "defaultValue" | "onBlur" | "disabled">;
|
|
@@ -9,3 +9,10 @@ export declare const getFloatingLabelClasses: (props?: import('class-variance-au
|
|
|
9
9
|
export declare const getInputLabelClasses: (props?: ({
|
|
10
10
|
floating?: boolean | null | undefined;
|
|
11
11
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
12
|
+
export declare const getInputCommonClasses: (props?: ({
|
|
13
|
+
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
|
|
14
|
+
outline?: boolean | null | undefined;
|
|
15
|
+
disabled?: boolean | null | undefined;
|
|
16
|
+
wide?: boolean | null | undefined;
|
|
17
|
+
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
18
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
export declare const getMultiSelectClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
2
|
-
export declare const getMultiSelectTriggerClasses: (props?: (
|
|
3
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
4
|
-
outline?: boolean | null | undefined;
|
|
5
|
-
disabled?: boolean | null | undefined;
|
|
6
|
-
wide?: boolean | null | undefined;
|
|
7
|
-
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
8
|
-
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
2
|
+
export declare const getMultiSelectTriggerClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
9
3
|
export declare const getMultiSelectItemClasses: (props?: ({
|
|
10
4
|
included?: boolean | null | undefined;
|
|
11
5
|
disabled?: boolean | null | undefined;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
|
|
2
2
|
import { VariantProps } from '../../../libs';
|
|
3
3
|
import { Command } from '../../Command';
|
|
4
|
-
import {
|
|
4
|
+
import { getInputCommonClasses } from '../Input/constants';
|
|
5
|
+
import { getMultiSelectInputClasses, getMultiSelectItemClasses, getMultiSelectListClasses } from './constants';
|
|
5
6
|
export type Item = {
|
|
6
7
|
value: string;
|
|
7
8
|
label?: string;
|
|
@@ -24,7 +25,7 @@ export type MultiSelectContextProps = {
|
|
|
24
25
|
ref: React.RefObject<HTMLInputElement | null>;
|
|
25
26
|
handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
26
27
|
};
|
|
27
|
-
export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof
|
|
28
|
+
export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getInputCommonClasses>;
|
|
28
29
|
export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> & VariantProps<typeof getMultiSelectInputClasses>;
|
|
29
30
|
export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
|
|
30
31
|
export type MultiSelectListProps = ComponentPropsWithoutRef<typeof Command.List> & VariantProps<typeof getMultiSelectListClasses>;
|
|
@@ -5,7 +5,7 @@ declare const Select: {
|
|
|
5
5
|
Group: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
6
|
Value: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
7
7
|
Trigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
8
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
|
|
8
|
+
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
9
9
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
10
10
|
outline?: boolean | undefined;
|
|
11
11
|
} & {
|
|
@@ -17,7 +17,7 @@ declare const Select: {
|
|
|
17
17
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
18
18
|
Label: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
19
|
Item: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
20
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
|
|
20
|
+
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
21
21
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
22
22
|
outline?: boolean | undefined;
|
|
23
23
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export declare const getSelectTriggerClasses: (props?: ({
|
|
2
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
2
|
+
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
|
|
3
3
|
outline?: boolean | null | undefined;
|
|
4
4
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
5
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
6
|
export declare const getSelectItemClasses: (props?: ({
|
|
7
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
|
|
7
|
+
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
|
|
8
8
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
9
|
export declare const getSelectLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
10
10
|
export declare const getSelectValueClasses: (props?: ({
|
|
@@ -4,6 +4,8 @@ export declare const TagsInput: import('react').ForwardRefExoticComponent<import
|
|
|
4
4
|
placeholder?: string;
|
|
5
5
|
maxItems?: number;
|
|
6
6
|
minItems?: number;
|
|
7
|
+
} & {
|
|
8
|
+
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
7
9
|
} & {
|
|
8
10
|
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
|
|
9
11
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
export declare const SPLITTER_REGEX: RegExp;
|
|
2
2
|
export declare const FORMATTING_REGEX: RegExp;
|
|
3
3
|
export declare const getTagsClasses: (props?: ({
|
|
4
|
-
variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
|
|
5
|
-
outline?: boolean | null | undefined;
|
|
6
|
-
disabled?: boolean | null | undefined;
|
|
7
|
-
wide?: boolean | null | undefined;
|
|
8
4
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
9
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
10
6
|
export declare const getTagClasses: (props?: ({
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from '../../../libs';
|
|
2
|
+
import { getInputCommonClasses } from '../Input/constants';
|
|
2
3
|
import { getTagsClasses } from './constants';
|
|
3
4
|
export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
4
5
|
defaultTags?: string[];
|
|
@@ -6,4 +7,4 @@ export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
6
7
|
placeholder?: string;
|
|
7
8
|
maxItems?: number;
|
|
8
9
|
minItems?: number;
|
|
9
|
-
} & VariantProps<typeof getTagsClasses>;
|
|
10
|
+
} & VariantProps<typeof getTagsClasses> & VariantProps<typeof getInputCommonClasses>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mbao01/common",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Ayomide Bakare",
|
|
7
7
|
"license": "MIT",
|
|
@@ -93,59 +93,59 @@
|
|
|
93
93
|
"@radix-ui/react-toggle-group": "^1.1.2",
|
|
94
94
|
"@radix-ui/react-tooltip": "^1.1.8",
|
|
95
95
|
"@tailwindcss/typography": "^0.5.16",
|
|
96
|
-
"chrono-node": "^2.
|
|
96
|
+
"chrono-node": "^2.8.0",
|
|
97
97
|
"class-variance-authority": "^0.7.1",
|
|
98
98
|
"clsx": "^2.1.1",
|
|
99
99
|
"cmdk": "^1.1.1",
|
|
100
100
|
"date-fns": "^4.1.0",
|
|
101
|
-
"embla-carousel-react": "^8.
|
|
101
|
+
"embla-carousel-react": "^8.6.0",
|
|
102
102
|
"lucide-react": "^0.487.0",
|
|
103
|
-
"react-day-picker": "^9.6.
|
|
103
|
+
"react-day-picker": "^9.6.5",
|
|
104
104
|
"react-dropzone": "^14.3.8",
|
|
105
105
|
"react-international-phone": "^4.5.0",
|
|
106
106
|
"react-otp-input": "^3.1.1",
|
|
107
107
|
"react-resizable-panels": "^2.1.7",
|
|
108
108
|
"sonner": "^2.0.3",
|
|
109
|
-
"tailwind-merge": "^3.
|
|
109
|
+
"tailwind-merge": "^3.2.0",
|
|
110
110
|
"timescape": "^0.7.1",
|
|
111
111
|
"universal-cookie": "^8.0.1",
|
|
112
112
|
"vaul": "^1.1.2"
|
|
113
113
|
},
|
|
114
114
|
"devDependencies": {
|
|
115
|
-
"@eslint/js": "^9.
|
|
115
|
+
"@eslint/js": "^9.24.0",
|
|
116
116
|
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
|
|
117
|
-
"@storybook/addon-a11y": "^8.6.
|
|
117
|
+
"@storybook/addon-a11y": "^8.6.12",
|
|
118
118
|
"@storybook/addon-coverage": "^1.0.5",
|
|
119
|
-
"@storybook/addon-essentials": "^8.6.
|
|
120
|
-
"@storybook/addon-interactions": "^8.6.
|
|
121
|
-
"@storybook/addon-links": "^8.6.
|
|
122
|
-
"@storybook/addon-onboarding": "^8.6.
|
|
123
|
-
"@storybook/addon-storysource": "^8.6.
|
|
124
|
-
"@storybook/addon-themes": "^8.6.
|
|
125
|
-
"@storybook/addon-viewport": "^8.6.
|
|
126
|
-
"@storybook/blocks": "^8.6.
|
|
127
|
-
"@storybook/react": "^8.6.
|
|
128
|
-
"@storybook/react-vite": "^8.6.
|
|
129
|
-
"@storybook/test": "^8.6.
|
|
119
|
+
"@storybook/addon-essentials": "^8.6.12",
|
|
120
|
+
"@storybook/addon-interactions": "^8.6.12",
|
|
121
|
+
"@storybook/addon-links": "^8.6.12",
|
|
122
|
+
"@storybook/addon-onboarding": "^8.6.12",
|
|
123
|
+
"@storybook/addon-storysource": "^8.6.12",
|
|
124
|
+
"@storybook/addon-themes": "^8.6.12",
|
|
125
|
+
"@storybook/addon-viewport": "^8.6.12",
|
|
126
|
+
"@storybook/blocks": "^8.6.12",
|
|
127
|
+
"@storybook/react": "^8.6.12",
|
|
128
|
+
"@storybook/react-vite": "^8.6.12",
|
|
129
|
+
"@storybook/test": "^8.6.12",
|
|
130
130
|
"@storybook/test-runner": "^0.22.0",
|
|
131
|
-
"@tailwindcss/postcss": "^4.1.
|
|
132
|
-
"@tailwindcss/vite": "^4.1.
|
|
131
|
+
"@tailwindcss/postcss": "^4.1.3",
|
|
132
|
+
"@tailwindcss/vite": "^4.1.3",
|
|
133
133
|
"@testing-library/jest-dom": "^6.6.3",
|
|
134
|
-
"@testing-library/react": "^16.
|
|
134
|
+
"@testing-library/react": "^16.3.0",
|
|
135
135
|
"@testing-library/user-event": "^14.6.1",
|
|
136
136
|
"@types/jest-image-snapshot": "^6.4.0",
|
|
137
|
-
"@types/node": "^22.
|
|
137
|
+
"@types/node": "^22.14.0",
|
|
138
138
|
"@types/react": "^19.1.0",
|
|
139
139
|
"@types/react-dom": "^19.1.1",
|
|
140
|
-
"@typescript-eslint/eslint-plugin": "^8.29.
|
|
141
|
-
"@typescript-eslint/parser": "^8.29.
|
|
140
|
+
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
|
141
|
+
"@typescript-eslint/parser": "^8.29.1",
|
|
142
142
|
"@vitejs/plugin-react": "^4.3.4",
|
|
143
143
|
"@vitest/coverage-v8": "^3.1.1",
|
|
144
144
|
"@vitest/ui": "^3.1.1",
|
|
145
145
|
"axe-playwright": "^2.1.0",
|
|
146
|
-
"daisyui": "^5.0.
|
|
147
|
-
"eslint": "^9.
|
|
148
|
-
"eslint-plugin-react": "^7.37.
|
|
146
|
+
"daisyui": "^5.0.16",
|
|
147
|
+
"eslint": "^9.24.0",
|
|
148
|
+
"eslint-plugin-react": "^7.37.5",
|
|
149
149
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
150
150
|
"eslint-plugin-react-refresh": "^0.4.19",
|
|
151
151
|
"eslint-plugin-storybook": "^0.12.0",
|
|
@@ -157,13 +157,13 @@
|
|
|
157
157
|
"prettier": "^3.5.3",
|
|
158
158
|
"react": "^19.1.0",
|
|
159
159
|
"react-dom": "^19.1.0",
|
|
160
|
-
"react-router-dom": "^7.
|
|
161
|
-
"recharts": "^2.15.
|
|
162
|
-
"storybook": "^8.6.
|
|
163
|
-
"tailwindcss": "^4.1.
|
|
164
|
-
"typescript": "^5.8.
|
|
165
|
-
"typescript-eslint": "^8.29.
|
|
166
|
-
"vite": "^6.2.
|
|
160
|
+
"react-router-dom": "^7.5.0",
|
|
161
|
+
"recharts": "^2.15.2",
|
|
162
|
+
"storybook": "^8.6.12",
|
|
163
|
+
"tailwindcss": "^4.1.3",
|
|
164
|
+
"typescript": "^5.8.3",
|
|
165
|
+
"typescript-eslint": "^8.29.1",
|
|
166
|
+
"vite": "^6.2.5",
|
|
167
167
|
"vite-plugin-dts": "^4.5.3",
|
|
168
168
|
"vitest": "^3.1.1"
|
|
169
169
|
},
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"recharts": "2",
|
|
175
175
|
"typescript": "5"
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "4e8242f09ad1b2aef4f84ee05573df8b875ab015"
|
|
178
178
|
}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { cva } from "../../../libs";
|
|
2
2
|
|
|
3
3
|
export const getCheckboxClasses = cva(
|
|
4
|
-
"peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
|
|
4
|
+
"peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:border-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
|
|
5
5
|
{
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
primary:
|
|
9
|
-
"border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content",
|
|
9
|
+
"border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content focus-visible:ring-primary",
|
|
10
10
|
secondary:
|
|
11
|
-
"border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-content",
|
|
11
|
+
"border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-content focus-visible:ring-secondary",
|
|
12
12
|
accent:
|
|
13
|
-
"border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-content",
|
|
13
|
+
"border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-content focus-visible:ring-accent",
|
|
14
14
|
success:
|
|
15
|
-
"border-success data-[state=checked]:bg-success data-[state=checked]:text-success-content",
|
|
15
|
+
"border-success data-[state=checked]:bg-success data-[state=checked]:text-success-content focus-visible:ring-success",
|
|
16
16
|
warning:
|
|
17
|
-
"border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-content",
|
|
18
|
-
info: "border-info data-[state=checked]:bg-info data-[state=checked]:text-info-content",
|
|
19
|
-
error:
|
|
17
|
+
"border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-content focus-visible:ring-warning",
|
|
18
|
+
info: "border-info data-[state=checked]:bg-info data-[state=checked]:text-info-content focus-visible:ring-info",
|
|
19
|
+
error:
|
|
20
|
+
"border-error data-[state=checked]:bg-error data-[state=checked]:text-error-content focus-visible:ring-error",
|
|
20
21
|
},
|
|
21
22
|
size: {
|
|
22
23
|
xs: "h-3 w-3",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { forwardRef, useCallback, useEffect, useState } from "react";
|
|
4
4
|
import type { DatetimeInputProps, TimeString } from "./types";
|
|
5
5
|
import { cn } from "../../../utilities";
|
|
6
|
-
import {
|
|
6
|
+
import { getInputCommonClasses } from "../Input/constants";
|
|
7
7
|
import { DatetimeCalendar } from "./DatetimeCalendar";
|
|
8
8
|
import { DatetimeInputContext } from "./DatetimeInputContext";
|
|
9
9
|
import { getParsedTime, parseDateTime } from "./helpers";
|
|
@@ -67,7 +67,7 @@ export const DatetimeInput = forwardRef<HTMLInputElement, DatetimeInputProps>(
|
|
|
67
67
|
<div className="flex items-center justify-center flex-nowrap">
|
|
68
68
|
<div
|
|
69
69
|
className={cn(
|
|
70
|
-
|
|
70
|
+
getInputCommonClasses({ outline, disabled, size, variant, wide }),
|
|
71
71
|
className
|
|
72
72
|
)}
|
|
73
73
|
>
|
|
@@ -2,59 +2,6 @@ import { cva } from "../../../libs";
|
|
|
2
2
|
|
|
3
3
|
export const DEFAULT_SIZE = 96;
|
|
4
4
|
|
|
5
|
-
export const getDatetimeInputContainerClasses = cva(
|
|
6
|
-
`h-10 flex items-center justify-between w-fit px-2 rounded-md transition-all gap-1
|
|
7
|
-
[&:has(input:focus)]:duration-100 [&:has(input:focus)]:outline [&:has(input:focus)]:outline-2 [&:has(input:focus)]:outline-offset-2 [&:has(input:focus)]:outline-base-content/20
|
|
8
|
-
[&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2 [&:has(input:focus-within)]:outline-base-content/20
|
|
9
|
-
`,
|
|
10
|
-
{
|
|
11
|
-
variants: {
|
|
12
|
-
variant: {
|
|
13
|
-
default: "border-0",
|
|
14
|
-
accent: "border border-accent",
|
|
15
|
-
error: "border border-error",
|
|
16
|
-
ghost: "border border-ghost",
|
|
17
|
-
info: "border border-info",
|
|
18
|
-
primary: "border border-primary",
|
|
19
|
-
secondary: "border border-secondary",
|
|
20
|
-
success: "border border-success",
|
|
21
|
-
warning: "border border-warning",
|
|
22
|
-
},
|
|
23
|
-
outline: {
|
|
24
|
-
true: "border",
|
|
25
|
-
},
|
|
26
|
-
disabled: {
|
|
27
|
-
true: "border-base-300",
|
|
28
|
-
},
|
|
29
|
-
wide: {
|
|
30
|
-
true: "w-full",
|
|
31
|
-
},
|
|
32
|
-
size: {
|
|
33
|
-
xs: "h-6 leading-relaxed text-xs px-1",
|
|
34
|
-
sm: "h-8 leading-8 text-sm px-1",
|
|
35
|
-
md: "h-12 leading-loose text-sm px-2",
|
|
36
|
-
lg: "h-16 leading-loose text-lg px-3",
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
compoundVariants: [
|
|
40
|
-
{
|
|
41
|
-
size: undefined,
|
|
42
|
-
className: "min-h-fit h-10",
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
variant: undefined,
|
|
46
|
-
outline: true,
|
|
47
|
-
className: "border-neutral-content",
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
variant: "default",
|
|
51
|
-
outline: true,
|
|
52
|
-
className: "border-base-content",
|
|
53
|
-
},
|
|
54
|
-
],
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
|
|
58
5
|
export const getDatetimeCalendarTriggerClasses = cva(
|
|
59
6
|
`size-8 rounded-md p-1 flex items-center justify-center font-normal
|
|
60
7
|
outline-hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type VariantProps } from "../../../libs";
|
|
2
2
|
import { type CalendarProps } from "../../Calendar/types";
|
|
3
|
+
import { getInputCommonClasses } from "../Input/constants";
|
|
3
4
|
import { type InputProps } from "../Input/types";
|
|
4
|
-
import { getDatetimeInputContainerClasses } from "./constants";
|
|
5
5
|
|
|
6
6
|
type DisabledType = { disabled?: boolean };
|
|
7
|
-
type VariantType = VariantProps<typeof
|
|
7
|
+
type VariantType = VariantProps<typeof getInputCommonClasses>;
|
|
8
8
|
type NaturalLanguageInputType = DisabledType & {
|
|
9
9
|
locale?: Intl.LocalesArgument;
|
|
10
10
|
} & Omit<InputProps, "type" | "ref" | "value" | "defaultValue" | "onBlur" | "disabled">;
|
|
@@ -59,3 +59,64 @@ export const getInputLabelClasses = cva("", {
|
|
|
59
59
|
},
|
|
60
60
|
],
|
|
61
61
|
});
|
|
62
|
+
|
|
63
|
+
export const getInputCommonClasses = cva(
|
|
64
|
+
`border border-base-content/20 shadow-2xs shadow-base-content/20 h-10 flex items-center justify-between w-fit px-2 rounded-md transition-all gap-1
|
|
65
|
+
[&:has(input:focus)]:duration-100 [&:has(input:focus)]:outline [&:has(input:focus)]:outline-2 [&:has(input:focus)]:outline-offset-2
|
|
66
|
+
[&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2
|
|
67
|
+
`,
|
|
68
|
+
{
|
|
69
|
+
variants: {
|
|
70
|
+
variant: {
|
|
71
|
+
default:
|
|
72
|
+
"[&:has(input:focus)]:border-[currentColor] [&:has(input:focus-within)]:border-[currentColor] [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
|
|
73
|
+
accent:
|
|
74
|
+
"border border-accent shadow-accent [&:has(input:focus)]:outline-accent [&:has(input:focus-within)]:outline-accent",
|
|
75
|
+
error:
|
|
76
|
+
"border border-error shadow-error [&:has(input:focus)]:outline-error [&:has(input:focus-within)]:outline-error",
|
|
77
|
+
ghost:
|
|
78
|
+
"border-0 shadow-none [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
|
|
79
|
+
info: "border border-info shadow-info [&:has(input:focus)]:outline-info [&:has(input:focus-within)]:outline-info",
|
|
80
|
+
primary:
|
|
81
|
+
"border border-primary shadow-primary [&:has(input:focus)]:outline-primary [&:has(input:focus-within)]:outline-primary",
|
|
82
|
+
secondary:
|
|
83
|
+
"border border-secondary shadow-secondary [&:has(input:focus)]:outline-secondary [&:has(input:focus-within)]:outline-secondary",
|
|
84
|
+
success:
|
|
85
|
+
"border border-success shadow-success [&:has(input:focus)]:outline-success [&:has(input:focus-within)]:outline-success",
|
|
86
|
+
warning:
|
|
87
|
+
"border border-warning shadow-warning [&:has(input:focus)]:outline-warning [&:has(input:focus-within)]:outline-warning",
|
|
88
|
+
},
|
|
89
|
+
outline: {
|
|
90
|
+
true: "border",
|
|
91
|
+
},
|
|
92
|
+
disabled: {
|
|
93
|
+
true: "border border-base-200 shadow-none bg-base-200",
|
|
94
|
+
},
|
|
95
|
+
wide: {
|
|
96
|
+
true: "w-full",
|
|
97
|
+
},
|
|
98
|
+
size: {
|
|
99
|
+
xs: "h-6 leading-relaxed text-xs px-2",
|
|
100
|
+
sm: "h-8 leading-8 text-sm px-2",
|
|
101
|
+
md: "h-12 leading-loose text-sm px-2",
|
|
102
|
+
lg: "h-16 leading-loose text-lg px-3",
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
compoundVariants: [
|
|
106
|
+
{
|
|
107
|
+
size: undefined,
|
|
108
|
+
className: "min-h-fit h-10 text-sm",
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
variant: undefined,
|
|
112
|
+
outline: true,
|
|
113
|
+
className: "border-base-content/20",
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
variant: undefined,
|
|
117
|
+
className:
|
|
118
|
+
"[&:has(input:focus)]:border-base-content [&:has(input:focus-within)]:border-base-content",
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
}
|
|
122
|
+
);
|
|
@@ -16,6 +16,7 @@ import type {
|
|
|
16
16
|
import { cn } from "../../../utilities";
|
|
17
17
|
import { Badge } from "../../Badge";
|
|
18
18
|
import { Command } from "../../Command";
|
|
19
|
+
import { getInputCommonClasses } from "../Input/constants";
|
|
19
20
|
import {
|
|
20
21
|
getMultiSelectClasses,
|
|
21
22
|
getMultiSelectInputClasses,
|
|
@@ -207,7 +208,8 @@ export const MultiSelectTrigger = ({
|
|
|
207
208
|
return (
|
|
208
209
|
<div
|
|
209
210
|
className={cn(
|
|
210
|
-
|
|
211
|
+
getInputCommonClasses({ outline, disabled, size, variant, wide }),
|
|
212
|
+
getMultiSelectTriggerClasses(),
|
|
211
213
|
className
|
|
212
214
|
)}
|
|
213
215
|
{...props}
|
|
@@ -2,54 +2,7 @@ import { cva } from "../../../libs";
|
|
|
2
2
|
|
|
3
3
|
export const getMultiSelectClasses = cva("overflow-visible bg-transparent flex flex-col h-fit");
|
|
4
4
|
|
|
5
|
-
export const getMultiSelectTriggerClasses = cva(
|
|
6
|
-
"flex items-center flex-wrap gap-1 h-fit w-fit px-1 py-2 rounded-md transition-all overflow-hidden",
|
|
7
|
-
{
|
|
8
|
-
variants: {
|
|
9
|
-
variant: {
|
|
10
|
-
default: "border-0",
|
|
11
|
-
accent: "border border-accent",
|
|
12
|
-
error: "border border-error",
|
|
13
|
-
info: "border border-info",
|
|
14
|
-
primary: "border border-primary",
|
|
15
|
-
secondary: "border border-secondary",
|
|
16
|
-
success: "border border-success",
|
|
17
|
-
warning: "border border-warning",
|
|
18
|
-
},
|
|
19
|
-
outline: {
|
|
20
|
-
true: "border",
|
|
21
|
-
},
|
|
22
|
-
disabled: {
|
|
23
|
-
true: "border-base-300",
|
|
24
|
-
},
|
|
25
|
-
wide: {
|
|
26
|
-
true: "w-full",
|
|
27
|
-
},
|
|
28
|
-
size: {
|
|
29
|
-
xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
|
|
30
|
-
sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
|
|
31
|
-
md: "min-h-12 leading-loose px-4 text-sm",
|
|
32
|
-
lg: "min-h-16 leading-loose px-6 text-lg",
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
compoundVariants: [
|
|
36
|
-
{
|
|
37
|
-
size: undefined,
|
|
38
|
-
className: "min-h-10 px-4",
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
variant: undefined,
|
|
42
|
-
outline: true,
|
|
43
|
-
className: "border-neutral-content",
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
variant: "default",
|
|
47
|
-
outline: true,
|
|
48
|
-
className: "border-base-content",
|
|
49
|
-
},
|
|
50
|
-
],
|
|
51
|
-
}
|
|
52
|
-
);
|
|
5
|
+
export const getMultiSelectTriggerClasses = cva("flex-wrap h-fit w-fit py-2 overflow-hidden");
|
|
53
6
|
|
|
54
7
|
export const getMultiSelectItemClasses = cva(
|
|
55
8
|
"cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-xs py-1.5 px-2 text-sm outline-hidden",
|
|
@@ -106,10 +59,16 @@ export const getMultiSelectTagClasses = cva(
|
|
|
106
59
|
lg: "px-2 [&>span]:max-w-32",
|
|
107
60
|
},
|
|
108
61
|
},
|
|
62
|
+
compoundVariants: [
|
|
63
|
+
{
|
|
64
|
+
size: undefined,
|
|
65
|
+
className: "max-h-5",
|
|
66
|
+
},
|
|
67
|
+
],
|
|
109
68
|
}
|
|
110
69
|
);
|
|
111
70
|
|
|
112
|
-
export const getMultiSelectInputClasses = cva("bg-transparent outline-hidden flex-1", {
|
|
71
|
+
export const getMultiSelectInputClasses = cva("bg-transparent outline-hidden flex-1 my-px", {
|
|
113
72
|
variants: {
|
|
114
73
|
size: {
|
|
115
74
|
xs: "text-xs",
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
|
|
2
2
|
import { VariantProps } from "../../../libs";
|
|
3
3
|
import { Command } from "../../Command";
|
|
4
|
+
import { getInputCommonClasses } from "../Input/constants";
|
|
4
5
|
import {
|
|
5
6
|
getMultiSelectInputClasses,
|
|
6
7
|
getMultiSelectItemClasses,
|
|
7
8
|
getMultiSelectListClasses,
|
|
8
|
-
getMultiSelectTriggerClasses,
|
|
9
9
|
} from "./constants";
|
|
10
10
|
|
|
11
11
|
export type Item = {
|
|
@@ -34,7 +34,7 @@ export type MultiSelectContextProps = {
|
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> &
|
|
37
|
-
VariantProps<typeof
|
|
37
|
+
VariantProps<typeof getInputCommonClasses>;
|
|
38
38
|
|
|
39
39
|
export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> &
|
|
40
40
|
VariantProps<typeof getMultiSelectInputClasses>;
|
|
@@ -5,7 +5,8 @@ export const getSelectTriggerClasses = cva(
|
|
|
5
5
|
{
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
default:
|
|
8
|
+
default:
|
|
9
|
+
"border border-base-content/20 [&:has(input:focus)]:border-[currentColor] [&:has(input:focus-within)]:border-[currentColor] [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
|
|
9
10
|
primary: "select-primary",
|
|
10
11
|
secondary: "select-secondary",
|
|
11
12
|
accent: "select-accent",
|
|
@@ -13,10 +14,10 @@ export const getSelectTriggerClasses = cva(
|
|
|
13
14
|
warning: "select-warning",
|
|
14
15
|
info: "select-info",
|
|
15
16
|
error: "select-error",
|
|
17
|
+
ghost: "select-ghost bg-transparent",
|
|
16
18
|
},
|
|
17
19
|
outline: {
|
|
18
20
|
true: "border border-input",
|
|
19
|
-
false: "select-ghost",
|
|
20
21
|
},
|
|
21
22
|
size: {
|
|
22
23
|
xs: "select-xs",
|
|
@@ -30,19 +31,10 @@ export const getSelectTriggerClasses = cva(
|
|
|
30
31
|
size: undefined,
|
|
31
32
|
className: "min-h-fit h-10",
|
|
32
33
|
},
|
|
33
|
-
{
|
|
34
|
-
outline: undefined,
|
|
35
|
-
className: "select-ghost",
|
|
36
|
-
},
|
|
37
34
|
{
|
|
38
35
|
variant: undefined,
|
|
39
36
|
outline: true,
|
|
40
|
-
className: "border-
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
variant: "default",
|
|
44
|
-
outline: true,
|
|
45
|
-
className: "border-base-content",
|
|
37
|
+
className: "border-base-content/20",
|
|
46
38
|
},
|
|
47
39
|
],
|
|
48
40
|
}
|
|
@@ -61,6 +53,7 @@ export const getSelectItemClasses = cva(
|
|
|
61
53
|
warning: "focus:bg-warning focus:text-warning-content",
|
|
62
54
|
info: "focus:bg-info focus:text-info-content",
|
|
63
55
|
error: "focus:bg-error focus:text-error-content",
|
|
56
|
+
ghost: "",
|
|
64
57
|
},
|
|
65
58
|
},
|
|
66
59
|
}
|
|
@@ -7,6 +7,7 @@ import type { TagsInputProps } from "./types";
|
|
|
7
7
|
import { cn } from "../../../utilities";
|
|
8
8
|
import { Badge } from "../../Badge";
|
|
9
9
|
import { Input } from "../Input";
|
|
10
|
+
import { getInputCommonClasses } from "../Input/constants";
|
|
10
11
|
import {
|
|
11
12
|
FORMATTING_REGEX,
|
|
12
13
|
getTagClasses,
|
|
@@ -225,7 +226,11 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>(
|
|
|
225
226
|
{...props}
|
|
226
227
|
ref={ref}
|
|
227
228
|
dir={dir}
|
|
228
|
-
className={cn(
|
|
229
|
+
className={cn(
|
|
230
|
+
getInputCommonClasses({ outline, disabled, variant, wide }),
|
|
231
|
+
getTagsClasses({ size }),
|
|
232
|
+
className
|
|
233
|
+
)}
|
|
229
234
|
>
|
|
230
235
|
{tags.map((tag, index) => (
|
|
231
236
|
<Badge
|
|
@@ -259,7 +264,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>(
|
|
|
259
264
|
tabIndex={0}
|
|
260
265
|
onSelect={handleSelect}
|
|
261
266
|
aria-label={ariaLabel}
|
|
262
|
-
disabled={disableInput}
|
|
267
|
+
disabled={disabled || disableInput}
|
|
263
268
|
onKeyDown={handleKeyDown}
|
|
264
269
|
onPaste={handlePaste}
|
|
265
270
|
value={inputValue}
|
|
@@ -4,55 +4,22 @@ export const SPLITTER_REGEX = /[\n#?=&\t,./-]+/; // used for identifying the spl
|
|
|
4
4
|
|
|
5
5
|
export const FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g; // used for formatting the pasted element for the correct value format to be added
|
|
6
6
|
|
|
7
|
-
export const getTagsClasses = cva(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
error: "border border-error",
|
|
15
|
-
ghost: "border border-ghost",
|
|
16
|
-
info: "border border-info",
|
|
17
|
-
primary: "border border-primary",
|
|
18
|
-
secondary: "border border-secondary",
|
|
19
|
-
success: "border border-success",
|
|
20
|
-
warning: "border border-warning",
|
|
21
|
-
},
|
|
22
|
-
outline: {
|
|
23
|
-
true: "border",
|
|
24
|
-
},
|
|
25
|
-
disabled: {
|
|
26
|
-
true: "border-base-300",
|
|
27
|
-
},
|
|
28
|
-
wide: {
|
|
29
|
-
true: "w-full",
|
|
30
|
-
},
|
|
31
|
-
size: {
|
|
32
|
-
xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
|
|
33
|
-
sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
|
|
34
|
-
md: "min-h-12 leading-loose px-4 text-sm",
|
|
35
|
-
lg: "min-h-16 leading-loose px-5 text-lg",
|
|
36
|
-
},
|
|
7
|
+
export const getTagsClasses = cva("flex-wrap h-fit py-2 overflow-hidden", {
|
|
8
|
+
variants: {
|
|
9
|
+
size: {
|
|
10
|
+
xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
|
|
11
|
+
sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
|
|
12
|
+
md: "min-h-12 leading-loose px-4 text-sm",
|
|
13
|
+
lg: "min-h-16 leading-loose px-5 text-lg",
|
|
37
14
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
className: "border-neutral-content",
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
variant: "default",
|
|
50
|
-
outline: true,
|
|
51
|
-
className: "border-base-content",
|
|
52
|
-
},
|
|
53
|
-
],
|
|
54
|
-
}
|
|
55
|
-
);
|
|
15
|
+
},
|
|
16
|
+
compoundVariants: [
|
|
17
|
+
{
|
|
18
|
+
size: undefined,
|
|
19
|
+
className: "min-h-10 px-4",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
});
|
|
56
23
|
|
|
57
24
|
export const getTagClasses = cva(
|
|
58
25
|
"relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-hidden",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type VariantProps } from "../../../libs";
|
|
2
|
+
import { getInputCommonClasses } from "../Input/constants";
|
|
2
3
|
import { getTagsClasses } from "./constants";
|
|
3
4
|
|
|
4
5
|
export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -7,4 +8,5 @@ export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
7
8
|
placeholder?: string;
|
|
8
9
|
maxItems?: number;
|
|
9
10
|
minItems?: number;
|
|
10
|
-
} & VariantProps<typeof getTagsClasses
|
|
11
|
+
} & VariantProps<typeof getTagsClasses> &
|
|
12
|
+
VariantProps<typeof getInputCommonClasses>;
|
|
@@ -31,21 +31,6 @@ export const getTextareaClasses = cva("textarea rounded-md transition-all durati
|
|
|
31
31
|
size: undefined,
|
|
32
32
|
className: "min-h-fit h-10",
|
|
33
33
|
},
|
|
34
|
-
{
|
|
35
|
-
variant: undefined,
|
|
36
|
-
outline: undefined,
|
|
37
|
-
className: "textarea-ghost",
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
variant: undefined,
|
|
41
|
-
outline: true,
|
|
42
|
-
className: "border-neutral-content",
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
variant: "default",
|
|
46
|
-
outline: true,
|
|
47
|
-
className: "border-base-content",
|
|
48
|
-
},
|
|
49
34
|
],
|
|
50
35
|
});
|
|
51
36
|
|