@arobo/styles 1.0.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 +3 -0
- package/dist/aroboui.min.css +2 -0
- package/dist/base/base.css +8 -0
- package/dist/components/button/button.styles.d.ts +70 -0
- package/dist/components/button/button.styles.d.ts.map +1 -0
- package/dist/components/button/button.styles.js +36 -0
- package/dist/components/button/index.d.ts +2 -0
- package/dist/components/button/index.d.ts.map +1 -0
- package/dist/components/button/index.js +1 -0
- package/dist/components/button-group/button-group.styles.d.ts +19 -0
- package/dist/components/button-group/button-group.styles.d.ts.map +1 -0
- package/dist/components/button-group/button-group.styles.js +16 -0
- package/dist/components/button-group/index.d.ts +2 -0
- package/dist/components/button-group/index.d.ts.map +1 -0
- package/dist/components/button-group/index.js +1 -0
- package/dist/components/button-group.css +78 -0
- package/dist/components/button.css +158 -0
- package/dist/components/calendar/calendar.styles.d.ts +40 -0
- package/dist/components/calendar/calendar.styles.d.ts.map +1 -0
- package/dist/components/calendar/calendar.styles.js +25 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/calendar/index.d.ts.map +1 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/calendar.css +35 -0
- package/dist/components/card/card.styles.d.ts +71 -0
- package/dist/components/card/card.styles.d.ts.map +1 -0
- package/dist/components/card/card.styles.js +33 -0
- package/dist/components/card/index.d.ts +2 -0
- package/dist/components/card/index.d.ts.map +1 -0
- package/dist/components/card/index.js +1 -0
- package/dist/components/card.css +50 -0
- package/dist/components/checkbox/checkbox.styles.d.ts +46 -0
- package/dist/components/checkbox/checkbox.styles.d.ts.map +1 -0
- package/dist/components/checkbox/checkbox.styles.js +25 -0
- package/dist/components/checkbox/index.d.ts +2 -0
- package/dist/components/checkbox/index.d.ts.map +1 -0
- package/dist/components/checkbox/index.js +1 -0
- package/dist/components/checkbox-group/checkbox-group.styles.d.ts +34 -0
- package/dist/components/checkbox-group/checkbox-group.styles.d.ts.map +1 -0
- package/dist/components/checkbox-group/checkbox-group.styles.js +22 -0
- package/dist/components/checkbox-group/index.d.ts +2 -0
- package/dist/components/checkbox-group/index.d.ts.map +1 -0
- package/dist/components/checkbox-group/index.js +1 -0
- package/dist/components/checkbox-group.css +7 -0
- package/dist/components/checkbox.css +269 -0
- package/dist/components/close-button/close-button.styles.d.ts +16 -0
- package/dist/components/close-button/close-button.styles.d.ts.map +1 -0
- package/dist/components/close-button/close-button.styles.js +15 -0
- package/dist/components/close-button/index.d.ts +2 -0
- package/dist/components/close-button/index.d.ts.map +1 -0
- package/dist/components/close-button/index.js +1 -0
- package/dist/components/close-button.css +65 -0
- package/dist/components/combobox/combobox.styles.d.ts +43 -0
- package/dist/components/combobox/combobox.styles.d.ts.map +1 -0
- package/dist/components/combobox/combobox.styles.js +24 -0
- package/dist/components/combobox/index.d.ts +2 -0
- package/dist/components/combobox/index.d.ts.map +1 -0
- package/dist/components/combobox/index.js +1 -0
- package/dist/components/combobox.css +169 -0
- package/dist/components/date-field/date-field.styles.d.ts +19 -0
- package/dist/components/date-field/date-field.styles.d.ts.map +1 -0
- package/dist/components/date-field/date-field.styles.js +16 -0
- package/dist/components/date-field/index.d.ts +2 -0
- package/dist/components/date-field/index.d.ts.map +1 -0
- package/dist/components/date-field/index.js +1 -0
- package/dist/components/date-field.css +24 -0
- package/dist/components/date-input-group/date-input-group.styles.d.ts +43 -0
- package/dist/components/date-input-group/date-input-group.styles.d.ts.map +1 -0
- package/dist/components/date-input-group/date-input-group.styles.js +24 -0
- package/dist/components/date-input-group/index.d.ts +2 -0
- package/dist/components/date-input-group/index.d.ts.map +1 -0
- package/dist/components/date-input-group/index.js +1 -0
- package/dist/components/date-input-group.css +116 -0
- package/dist/components/date-picker/date-picker.styles.d.ts +37 -0
- package/dist/components/date-picker/date-picker.styles.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.styles.js +11 -0
- package/dist/components/date-picker/index.d.ts +2 -0
- package/dist/components/date-picker/index.d.ts.map +1 -0
- package/dist/components/date-picker/index.js +1 -0
- package/dist/components/date-picker.css +32 -0
- package/dist/components/date-range-picker/date-range-picker.styles.d.ts +49 -0
- package/dist/components/date-range-picker/date-range-picker.styles.d.ts.map +1 -0
- package/dist/components/date-range-picker/date-range-picker.styles.js +28 -0
- package/dist/components/date-range-picker/index.d.ts +2 -0
- package/dist/components/date-range-picker/index.d.ts.map +1 -0
- package/dist/components/date-range-picker/index.js +1 -0
- package/dist/components/date-range-picker.css +28 -0
- package/dist/components/description/description.styles.d.ts +4 -0
- package/dist/components/description/description.styles.d.ts.map +1 -0
- package/dist/components/description/description.styles.js +7 -0
- package/dist/components/description/index.d.ts +2 -0
- package/dist/components/description/index.d.ts.map +1 -0
- package/dist/components/description/index.js +1 -0
- package/dist/components/description.css +4 -0
- package/dist/components/error-message/error-message.styles.d.ts +4 -0
- package/dist/components/error-message/error-message.styles.d.ts.map +1 -0
- package/dist/components/error-message/error-message.styles.js +7 -0
- package/dist/components/error-message/index.d.ts +2 -0
- package/dist/components/error-message/index.d.ts.map +1 -0
- package/dist/components/error-message/index.js +1 -0
- package/dist/components/error-message.css +13 -0
- package/dist/components/field-error/field-error.styles.d.ts +4 -0
- package/dist/components/field-error/field-error.styles.d.ts.map +1 -0
- package/dist/components/field-error/field-error.styles.js +7 -0
- package/dist/components/field-error/index.d.ts +2 -0
- package/dist/components/field-error/index.d.ts.map +1 -0
- package/dist/components/field-error/index.js +1 -0
- package/dist/components/field-error.css +13 -0
- package/dist/components/field-group/field-group.styles.d.ts +69 -0
- package/dist/components/field-group/field-group.styles.d.ts.map +1 -0
- package/dist/components/field-group/field-group.styles.js +25 -0
- package/dist/components/field-group/index.d.ts +2 -0
- package/dist/components/field-group/index.d.ts.map +1 -0
- package/dist/components/field-group/index.js +1 -0
- package/dist/components/field-group.css +7 -0
- package/dist/components/index.css +23 -0
- package/dist/components/index.d.ts +23 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/input/index.d.ts +2 -0
- package/dist/components/input/index.d.ts.map +1 -0
- package/dist/components/input/index.js +1 -0
- package/dist/components/input/input.styles.d.ts +31 -0
- package/dist/components/input/input.styles.d.ts.map +1 -0
- package/dist/components/input/input.styles.js +21 -0
- package/dist/components/input.css +72 -0
- package/dist/components/label/index.d.ts +2 -0
- package/dist/components/label/index.d.ts.map +1 -0
- package/dist/components/label/index.js +1 -0
- package/dist/components/label/label.styles.d.ts +34 -0
- package/dist/components/label/label.styles.d.ts.map +1 -0
- package/dist/components/label/label.styles.js +23 -0
- package/dist/components/label.css +31 -0
- package/dist/components/popover/index.d.ts +2 -0
- package/dist/components/popover/index.d.ts.map +1 -0
- package/dist/components/popover/index.js +1 -0
- package/dist/components/popover/popover.styles.d.ts +46 -0
- package/dist/components/popover/popover.styles.d.ts.map +1 -0
- package/dist/components/popover/popover.styles.js +12 -0
- package/dist/components/popover.css +91 -0
- package/dist/components/range-calendar/index.d.ts +2 -0
- package/dist/components/range-calendar/index.d.ts.map +1 -0
- package/dist/components/range-calendar/index.js +1 -0
- package/dist/components/range-calendar/range-calendar.styles.d.ts +43 -0
- package/dist/components/range-calendar/range-calendar.styles.d.ts.map +1 -0
- package/dist/components/range-calendar/range-calendar.styles.js +26 -0
- package/dist/components/range-calendar.css +83 -0
- package/dist/components/surface/index.d.ts +2 -0
- package/dist/components/surface/index.d.ts.map +1 -0
- package/dist/components/surface/index.js +1 -0
- package/dist/components/surface/surface.styles.d.ts +37 -0
- package/dist/components/surface/surface.styles.d.ts.map +1 -0
- package/dist/components/surface/surface.styles.js +35 -0
- package/dist/components/surface.css +36 -0
- package/dist/components/text-field/index.d.ts +2 -0
- package/dist/components/text-field/index.d.ts.map +1 -0
- package/dist/components/text-field/index.js +1 -0
- package/dist/components/text-field/text-field.styles.d.ts +19 -0
- package/dist/components/text-field/text-field.styles.d.ts.map +1 -0
- package/dist/components/text-field/text-field.styles.js +16 -0
- package/dist/components/text-field.css +26 -0
- package/dist/index.css +17 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +24 -0
- package/dist/themes/default/index.css +4 -0
- package/dist/themes/default/variables.css +157 -0
- package/dist/themes/shared/theme.css +338 -0
- package/dist/utilities/index.css +45 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/state.d.ts +17 -0
- package/dist/utils/state.d.ts.map +1 -0
- package/dist/utils/state.js +13 -0
- package/package.json +53 -0
- package/src/components/button/button.styles.ts +38 -0
- package/src/components/button/index.ts +1 -0
- package/src/components/button-group/button-group.styles.ts +18 -0
- package/src/components/button-group/index.ts +1 -0
- package/src/components/calendar/calendar.styles.ts +27 -0
- package/src/components/calendar/index.ts +1 -0
- package/src/components/card/card.styles.ts +36 -0
- package/src/components/card/index.ts +1 -0
- package/src/components/checkbox/checkbox.styles.ts +27 -0
- package/src/components/checkbox/index.ts +1 -0
- package/src/components/checkbox-group/checkbox-group.styles.ts +24 -0
- package/src/components/checkbox-group/index.ts +1 -0
- package/src/components/close-button/close-button.styles.ts +17 -0
- package/src/components/close-button/index.ts +1 -0
- package/src/components/combobox/combobox.styles.ts +26 -0
- package/src/components/combobox/index.ts +1 -0
- package/src/components/date-field/date-field.styles.ts +18 -0
- package/src/components/date-field/index.ts +1 -0
- package/src/components/date-input-group/date-input-group.styles.ts +28 -0
- package/src/components/date-input-group/index.ts +1 -0
- package/src/components/date-picker/date-picker.styles.ts +13 -0
- package/src/components/date-picker/index.ts +1 -0
- package/src/components/date-range-picker/date-range-picker.styles.ts +32 -0
- package/src/components/date-range-picker/index.ts +1 -0
- package/src/components/description/description.styles.ts +9 -0
- package/src/components/description/index.ts +1 -0
- package/src/components/error-message/error-message.styles.ts +9 -0
- package/src/components/error-message/index.ts +1 -0
- package/src/components/field-error/field-error.styles.ts +9 -0
- package/src/components/field-error/index.ts +1 -0
- package/src/components/field-group/field-group.styles.ts +29 -0
- package/src/components/field-group/index.ts +1 -0
- package/src/components/index.ts +23 -0
- package/src/components/input/index.ts +1 -0
- package/src/components/input/input.styles.ts +23 -0
- package/src/components/label/index.ts +1 -0
- package/src/components/label/label.styles.ts +25 -0
- package/src/components/popover/index.ts +1 -0
- package/src/components/popover/popover.styles.ts +14 -0
- package/src/components/range-calendar/index.ts +1 -0
- package/src/components/range-calendar/range-calendar.styles.ts +28 -0
- package/src/components/surface/index.ts +1 -0
- package/src/components/surface/surface.styles.ts +37 -0
- package/src/components/text-field/index.ts +1 -0
- package/src/components/text-field/text-field.styles.ts +18 -0
- package/src/index.ts +4 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/state.ts +11 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.date-picker {
|
|
2
|
+
@apply flex flex-col gap-1 font-sans;
|
|
3
|
+
|
|
4
|
+
&:has([data-open="true"]) [data-slot="trigger"] {
|
|
5
|
+
&[data-pressed] {
|
|
6
|
+
background-color: var(--button-bg-pressed);
|
|
7
|
+
transform: scale(0.97);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&:not([data-open="true"]) [data-slot="trigger"] {
|
|
12
|
+
&[data-pressed][data-hovered="true"] {
|
|
13
|
+
background-color: var(--button-bg-hover);
|
|
14
|
+
}
|
|
15
|
+
&[data-pressed] {
|
|
16
|
+
transform: none;
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.date-picker__trigger {
|
|
23
|
+
@apply size-6 mr-1 outline-offset-0 rounded-sm;
|
|
24
|
+
|
|
25
|
+
[data-slot="icon"] {
|
|
26
|
+
@apply w-4 h-4 text-fgColor-muted;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.date-picker__input {
|
|
31
|
+
@apply flex-1 min-w-37.5 px-3 text-sm text-fgColor-default;
|
|
32
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const dateRangePickerVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
variant: {
|
|
4
|
+
primary: string;
|
|
5
|
+
secondary: string;
|
|
6
|
+
};
|
|
7
|
+
size: {
|
|
8
|
+
sm: string;
|
|
9
|
+
md: string;
|
|
10
|
+
lg: string;
|
|
11
|
+
};
|
|
12
|
+
}, {
|
|
13
|
+
trigger: string;
|
|
14
|
+
inputGroup: string;
|
|
15
|
+
input: string;
|
|
16
|
+
separator: string;
|
|
17
|
+
}, "date-range-picker", {
|
|
18
|
+
variant: {
|
|
19
|
+
primary: string;
|
|
20
|
+
secondary: string;
|
|
21
|
+
};
|
|
22
|
+
size: {
|
|
23
|
+
sm: string;
|
|
24
|
+
md: string;
|
|
25
|
+
lg: string;
|
|
26
|
+
};
|
|
27
|
+
}, {
|
|
28
|
+
trigger: string;
|
|
29
|
+
inputGroup: string;
|
|
30
|
+
input: string;
|
|
31
|
+
separator: string;
|
|
32
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
33
|
+
variant: {
|
|
34
|
+
primary: string;
|
|
35
|
+
secondary: string;
|
|
36
|
+
};
|
|
37
|
+
size: {
|
|
38
|
+
sm: string;
|
|
39
|
+
md: string;
|
|
40
|
+
lg: string;
|
|
41
|
+
};
|
|
42
|
+
}, {
|
|
43
|
+
trigger: string;
|
|
44
|
+
inputGroup: string;
|
|
45
|
+
input: string;
|
|
46
|
+
separator: string;
|
|
47
|
+
}, "date-range-picker", unknown, unknown, undefined>>;
|
|
48
|
+
export type DateRangePickerVariants = VariantProps<typeof dateRangePickerVariants>;
|
|
49
|
+
//# sourceMappingURL=date-range-picker.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-range-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAuBlC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAChD,OAAO,uBAAuB,CAC/B,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
const dateRangePickerVariants = tv({
|
|
4
|
+
base: "date-range-picker",
|
|
5
|
+
slots: {
|
|
6
|
+
trigger: "date-range-picker__trigger",
|
|
7
|
+
inputGroup: "date-range-picker__input-group",
|
|
8
|
+
input: "date-range-picker__input",
|
|
9
|
+
separator: "date-range-picker__separator",
|
|
10
|
+
},
|
|
11
|
+
defaultVariants: {
|
|
12
|
+
variant: "primary",
|
|
13
|
+
size: "md",
|
|
14
|
+
},
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
primary: "date-range-picker--primary",
|
|
18
|
+
secondary: "date-range-picker--secondary",
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
sm: "date-range-picker--sm",
|
|
22
|
+
md: "date-range-picker--md",
|
|
23
|
+
lg: "date-range-picker--lg",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export { dateRangePickerVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { dateRangePickerVariants } from './date-range-picker.styles.js';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.date-range-picker__trigger {
|
|
2
|
+
@apply size-6 mr-1 outline-offset-0 rounded-sm;
|
|
3
|
+
|
|
4
|
+
[data-slot="icon"] {
|
|
5
|
+
@apply w-4 h-4 text-fgColor-muted;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.date-range-picker__input-group {
|
|
10
|
+
@apply flex-1 w-fit flex items-center overflow-x-auto overflow-y-clip [scrollbar-width:none];
|
|
11
|
+
|
|
12
|
+
&[data-disabled="true"] .date-range-picker__separator {
|
|
13
|
+
@apply text-fgColor-disabled;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&[data-invalid="true"] .date-range-picker__separator,
|
|
17
|
+
&[data-invalid="true"] [data-slot="icon"] {
|
|
18
|
+
@apply text-fgColor-danger;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.date-range-picker__input {
|
|
23
|
+
@apply flex-1 ps-2 pe-3 text-sm text-fgColor-default;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.date-range-picker__separator {
|
|
27
|
+
@apply text-fgColor-default;
|
|
28
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const descriptionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "description", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "description", unknown, unknown, undefined>>;
|
|
3
|
+
export type DescriptionVariants = VariantProps<typeof descriptionVariants>;
|
|
4
|
+
//# sourceMappingURL=description.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"description.styles.d.ts","sourceRoot":"","sources":["../../../src/components/description/description.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB,gNAE9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/description/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { descriptionVariants } from './description.styles.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const errorMessageVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "error-message", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "error-message", unknown, unknown, undefined>>;
|
|
3
|
+
export type ErrorMessageVariants = VariantProps<typeof errorMessageVariants>;
|
|
4
|
+
//# sourceMappingURL=error-message.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"error-message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/error-message.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB,oNAE/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { errorMessageVariants } from './error-message.styles.js';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* Base error message styles */
|
|
2
|
+
.error-message {
|
|
3
|
+
@apply h-auto text-xs wrap-break-word text-danger;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Transitions
|
|
7
|
+
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
8
|
+
*/
|
|
9
|
+
transition:
|
|
10
|
+
opacity 150ms var(--ease-out),
|
|
11
|
+
height 350ms var(--ease-smooth);
|
|
12
|
+
@apply motion-reduce:transition-none;
|
|
13
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const fieldErrorVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "field-error", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "field-error", unknown, unknown, undefined>>;
|
|
3
|
+
export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;
|
|
4
|
+
//# sourceMappingURL=field-error.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field-error.styles.d.ts","sourceRoot":"","sources":["../../../src/components/field-error/field-error.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB,gNAE7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field-error/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { fieldErrorVariants } from './field-error.styles.js';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* Field error styles */
|
|
2
|
+
.field-error {
|
|
3
|
+
@apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-[visible=true]:h-auto data-[visible=true]:opacity-100;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Transitions
|
|
7
|
+
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
8
|
+
*/
|
|
9
|
+
transition:
|
|
10
|
+
opacity 150ms var(--ease-out),
|
|
11
|
+
height 350ms var(--ease-smooth);
|
|
12
|
+
@apply motion-reduce:transition-none;
|
|
13
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const fieldBorderStyles: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
isFocusWithin: {
|
|
4
|
+
false: string;
|
|
5
|
+
true: string;
|
|
6
|
+
};
|
|
7
|
+
isInvalid: {
|
|
8
|
+
true: string;
|
|
9
|
+
};
|
|
10
|
+
isDisabled: {
|
|
11
|
+
true: string;
|
|
12
|
+
};
|
|
13
|
+
}, undefined, "transition", {
|
|
14
|
+
isFocusWithin: {
|
|
15
|
+
false: string;
|
|
16
|
+
true: string;
|
|
17
|
+
};
|
|
18
|
+
isInvalid: {
|
|
19
|
+
true: string;
|
|
20
|
+
};
|
|
21
|
+
isDisabled: {
|
|
22
|
+
true: string;
|
|
23
|
+
};
|
|
24
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
25
|
+
isFocusWithin: {
|
|
26
|
+
false: string;
|
|
27
|
+
true: string;
|
|
28
|
+
};
|
|
29
|
+
isInvalid: {
|
|
30
|
+
true: string;
|
|
31
|
+
};
|
|
32
|
+
isDisabled: {
|
|
33
|
+
true: string;
|
|
34
|
+
};
|
|
35
|
+
}, undefined, "transition", unknown, unknown, undefined>>;
|
|
36
|
+
export declare const fieldGroupVariants: import("tailwind-variants").TVReturnType<{
|
|
37
|
+
isFocusWithin: {
|
|
38
|
+
false: string;
|
|
39
|
+
true: string;
|
|
40
|
+
};
|
|
41
|
+
isInvalid: {
|
|
42
|
+
true: string;
|
|
43
|
+
};
|
|
44
|
+
isDisabled: {
|
|
45
|
+
true: string;
|
|
46
|
+
};
|
|
47
|
+
}, undefined, "field-group", {
|
|
48
|
+
isFocusVisible: {
|
|
49
|
+
false: string;
|
|
50
|
+
true: string;
|
|
51
|
+
};
|
|
52
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
53
|
+
isFocusVisible: {
|
|
54
|
+
false: string;
|
|
55
|
+
true: string;
|
|
56
|
+
};
|
|
57
|
+
}, undefined, "focus-ring", {
|
|
58
|
+
isFocusVisible: {
|
|
59
|
+
false: string;
|
|
60
|
+
true: string;
|
|
61
|
+
};
|
|
62
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
63
|
+
isFocusVisible: {
|
|
64
|
+
false: string;
|
|
65
|
+
true: string;
|
|
66
|
+
};
|
|
67
|
+
}, undefined, "focus-ring", unknown, unknown, undefined>>>;
|
|
68
|
+
export type FieldGroupVariants = VariantProps<typeof fieldGroupVariants>;
|
|
69
|
+
//# sourceMappingURL=field-group.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/field-group/field-group.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDAe5B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0DAI7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { focusRing } from '../../utils/state.js';
|
|
2
|
+
import { tv } from 'tailwind-variants';
|
|
3
|
+
|
|
4
|
+
const fieldBorderStyles = tv({
|
|
5
|
+
base: "transition",
|
|
6
|
+
variants: {
|
|
7
|
+
isFocusWithin: {
|
|
8
|
+
false: "border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]",
|
|
9
|
+
true: "border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]",
|
|
10
|
+
},
|
|
11
|
+
isInvalid: {
|
|
12
|
+
true: "border-red-600 dark:border-red-600 forced-colors:border-[Mark]",
|
|
13
|
+
},
|
|
14
|
+
isDisabled: {
|
|
15
|
+
true: "border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
const fieldGroupVariants = tv({
|
|
20
|
+
extend: focusRing,
|
|
21
|
+
base: "field-group",
|
|
22
|
+
variants: fieldBorderStyles.variants,
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
export { fieldBorderStyles, fieldGroupVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { fieldBorderStyles, fieldGroupVariants } from './field-group.styles.js';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@import "./button.css";
|
|
2
|
+
@import "./button-group.css";
|
|
3
|
+
@import "./calendar.css";
|
|
4
|
+
@import "./card.css";
|
|
5
|
+
@import "./checkbox-group.css";
|
|
6
|
+
@import "./checkbox.css";
|
|
7
|
+
@import "./close-button.css";
|
|
8
|
+
@import "./combobox.css";
|
|
9
|
+
@import "./date-field.css";
|
|
10
|
+
@import "./date-input-group.css";
|
|
11
|
+
@import "./date-picker.css";
|
|
12
|
+
@import "./date-range-picker.css";
|
|
13
|
+
@import "./description.css";
|
|
14
|
+
@import "./error-message.css";
|
|
15
|
+
@import "./field-error.css";
|
|
16
|
+
@import "./field-group.css";
|
|
17
|
+
@import "./input.css";
|
|
18
|
+
@import "./label.css";
|
|
19
|
+
@import "./popover.css";
|
|
20
|
+
@import "./range-calendar.css";
|
|
21
|
+
@import "./surface.css";
|
|
22
|
+
|
|
23
|
+
@import "./text-field.css";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export * from "./button";
|
|
2
|
+
export * from "./button-group";
|
|
3
|
+
export * from "./calendar";
|
|
4
|
+
export * from "./card";
|
|
5
|
+
export * from "./checkbox";
|
|
6
|
+
export * from "./checkbox-group";
|
|
7
|
+
export * from "./close-button";
|
|
8
|
+
export * from "./combobox";
|
|
9
|
+
export * from "./date-field";
|
|
10
|
+
export * from "./date-input-group";
|
|
11
|
+
export * from "./date-picker";
|
|
12
|
+
export * from "./date-range-picker";
|
|
13
|
+
export * from "./description";
|
|
14
|
+
export * from "./error-message";
|
|
15
|
+
export * from "./field-error";
|
|
16
|
+
export * from "./field-group";
|
|
17
|
+
export * from "./input";
|
|
18
|
+
export * from "./label";
|
|
19
|
+
export * from "./popover";
|
|
20
|
+
export * from "./range-calendar";
|
|
21
|
+
export * from "./surface";
|
|
22
|
+
export * from "./text-field";
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAE1B,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { inputVariants } from './input.styles.js';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const inputVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
fullWidth: {
|
|
4
|
+
false: string;
|
|
5
|
+
true: string;
|
|
6
|
+
};
|
|
7
|
+
variant: {
|
|
8
|
+
primary: string;
|
|
9
|
+
secondary: string;
|
|
10
|
+
};
|
|
11
|
+
}, undefined, "input", {
|
|
12
|
+
fullWidth: {
|
|
13
|
+
false: string;
|
|
14
|
+
true: string;
|
|
15
|
+
};
|
|
16
|
+
variant: {
|
|
17
|
+
primary: string;
|
|
18
|
+
secondary: string;
|
|
19
|
+
};
|
|
20
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
21
|
+
fullWidth: {
|
|
22
|
+
false: string;
|
|
23
|
+
true: string;
|
|
24
|
+
};
|
|
25
|
+
variant: {
|
|
26
|
+
primary: string;
|
|
27
|
+
secondary: string;
|
|
28
|
+
};
|
|
29
|
+
}, undefined, "input", unknown, unknown, undefined>>;
|
|
30
|
+
export type InputVariants = VariantProps<typeof inputVariants>;
|
|
31
|
+
//# sourceMappingURL=input.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAgBxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
const inputVariants = tv({
|
|
4
|
+
base: "input",
|
|
5
|
+
defaultVariants: {
|
|
6
|
+
fullWidth: false,
|
|
7
|
+
variant: "primary",
|
|
8
|
+
},
|
|
9
|
+
variants: {
|
|
10
|
+
fullWidth: {
|
|
11
|
+
false: "",
|
|
12
|
+
true: "input--full-width",
|
|
13
|
+
},
|
|
14
|
+
variant: {
|
|
15
|
+
primary: "input--primary",
|
|
16
|
+
secondary: "input--secondary",
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export { inputVariants };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
.input {
|
|
2
|
+
@apply rounded-field ring ring-borderColor-default border bg-field px-3 py-2 text-base text-field-foreground outline-none placeholder:text-field-placeholder sm:text-sm;
|
|
3
|
+
|
|
4
|
+
border-width: var(--border-width-field);
|
|
5
|
+
border-color: var(--color-field-border);
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Transitions
|
|
9
|
+
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
10
|
+
*/
|
|
11
|
+
transition:
|
|
12
|
+
background-color 150ms var(--ease-smooth),
|
|
13
|
+
border-color 150ms var(--ease-smooth),
|
|
14
|
+
box-shadow 150ms var(--ease-out);
|
|
15
|
+
@apply motion-reduce:transition-none;
|
|
16
|
+
|
|
17
|
+
@media (hover: hover) {
|
|
18
|
+
&:hover:not(:focus):not(:focus-visible),
|
|
19
|
+
&[data-hovered="true"]:not([data-focused="true"]):not(
|
|
20
|
+
[data-focus-visible="true"]
|
|
21
|
+
) {
|
|
22
|
+
@apply bg-field-hover;
|
|
23
|
+
border-color: var(--color-field-border-hover);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Focus state */
|
|
28
|
+
&:focus,
|
|
29
|
+
&[data-focused="true"]:not([data-invalid="true"]) {
|
|
30
|
+
@apply status-focused-field;
|
|
31
|
+
background-color: var(--color-field-focus);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Focus visible state */
|
|
35
|
+
&:focus-visible:not(:focus),
|
|
36
|
+
&[data-focus-visible="true"] {
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Disabled state */
|
|
40
|
+
&[data-disabled="true"],
|
|
41
|
+
&[aria-disabled="true"] {
|
|
42
|
+
@apply status-disabled;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[data-invalid="true"] {
|
|
46
|
+
@apply status-invalid-field!;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Variant property definitions */
|
|
51
|
+
.input--primary {
|
|
52
|
+
/* Default styles */
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.input--secondary {
|
|
56
|
+
background-color: var(--input-bg);
|
|
57
|
+
|
|
58
|
+
--input-bg-hover: var(--color-default-hover);
|
|
59
|
+
--input-bg-focus: var(--color-default);
|
|
60
|
+
|
|
61
|
+
&:focus,
|
|
62
|
+
&[data-focused="true"]:not([data-invalid="true"]) {
|
|
63
|
+
@apply ring-2 ring-input-secondary-ring ring-offset-0 outline-none;
|
|
64
|
+
/* No separation - ring sits directly against the element */
|
|
65
|
+
--tw-ring-offset-width: 0px;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Full width modifier */
|
|
70
|
+
.input--full-width {
|
|
71
|
+
@apply w-full;
|
|
72
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/label/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { labelVariants } from './label.styles.js';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const labelVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
isDisabled: {
|
|
4
|
+
true: string;
|
|
5
|
+
};
|
|
6
|
+
isInvalid: {
|
|
7
|
+
true: string;
|
|
8
|
+
};
|
|
9
|
+
isRequired: {
|
|
10
|
+
true: string;
|
|
11
|
+
};
|
|
12
|
+
}, undefined, "label", {
|
|
13
|
+
isDisabled: {
|
|
14
|
+
true: string;
|
|
15
|
+
};
|
|
16
|
+
isInvalid: {
|
|
17
|
+
true: string;
|
|
18
|
+
};
|
|
19
|
+
isRequired: {
|
|
20
|
+
true: string;
|
|
21
|
+
};
|
|
22
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
23
|
+
isDisabled: {
|
|
24
|
+
true: string;
|
|
25
|
+
};
|
|
26
|
+
isInvalid: {
|
|
27
|
+
true: string;
|
|
28
|
+
};
|
|
29
|
+
isRequired: {
|
|
30
|
+
true: string;
|
|
31
|
+
};
|
|
32
|
+
}, undefined, "label", unknown, unknown, undefined>>;
|
|
33
|
+
export type LabelVariants = VariantProps<typeof labelVariants>;
|
|
34
|
+
//# sourceMappingURL=label.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.styles.d.ts","sourceRoot":"","sources":["../../../src/components/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAkBxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
|