@bloodhoundenterprise/doodleui 1.0.0-alpha.1 → 1.0.0-alpha.3
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 +29 -14
- package/dist/doodleui.js +3756 -796
- package/dist/index.d.ts +71 -38
- package/dist/style.css +1 -1
- package/package.json +13 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
|
+
import * as AccordionPrimitive_2 from '@radix-ui/react-accordion';
|
|
1
2
|
import { ClassProp } from 'class-variance-authority/types';
|
|
2
|
-
import { ClassValue } from 'clsx';
|
|
3
3
|
import { ForwardRefExoticComponent } from 'react';
|
|
4
4
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
6
|
import { RefAttributes } from 'react';
|
|
7
7
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
8
|
+
import * as TooltipPrimitive_2 from '@radix-ui/react-tooltip';
|
|
8
9
|
import { VariantProps } from 'class-variance-authority';
|
|
9
10
|
|
|
11
|
+
declare const Accordion: React_2.ForwardRefExoticComponent<(AccordionPrimitive_2.AccordionSingleProps | AccordionPrimitive_2.AccordionMultipleProps) & React_2.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
|
|
13
|
+
declare const AccordionContent: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive_2.AccordionContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
|
|
15
|
+
declare const AccordionHeader: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive_2.AccordionTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
16
|
+
|
|
17
|
+
declare const AccordionItem: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive_2.AccordionItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
|
|
19
|
+
declare namespace AccordionPrimitive {
|
|
20
|
+
export {
|
|
21
|
+
Accordion,
|
|
22
|
+
AccordionItem,
|
|
23
|
+
AccordionHeader,
|
|
24
|
+
AccordionContent
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export { AccordionPrimitive }
|
|
28
|
+
|
|
10
29
|
export declare function Badge(props: BadgeProps): JSX_2.Element;
|
|
11
30
|
|
|
12
31
|
declare interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof BadgePropVariants> {
|
|
@@ -30,40 +49,27 @@ declare const ButtonVariants: (props?: ({
|
|
|
30
49
|
size?: "medium" | "large" | "small" | null | undefined;
|
|
31
50
|
} & ClassProp) | undefined) => string;
|
|
32
51
|
|
|
33
|
-
declare function cn(...inputs: ClassValue[]): string;
|
|
34
|
-
|
|
35
52
|
declare type ColorOptions = ThemeOptions | CustomColorOptions;
|
|
36
53
|
|
|
37
|
-
declare
|
|
54
|
+
export declare const ComboBadge: (props: ComboBadgeProps) => JSX_2.Element;
|
|
55
|
+
|
|
56
|
+
declare interface ComboBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-label'> {
|
|
57
|
+
label: string | JSX.Element;
|
|
58
|
+
adornment?: string | JSX.Element;
|
|
59
|
+
/** An arial label is required because of the hidden adornment. Please provide context as to what this badge is conveying to a visual user */
|
|
60
|
+
ariaLabel: string;
|
|
61
|
+
/** slideLeft by default */
|
|
62
|
+
type?: 'slideLeft' | 'slideRight' | 'inlineSlideLeft' | 'inlineSlideRight';
|
|
63
|
+
/** false by default, displays the adornment without hovering over its peer */
|
|
64
|
+
displayAdornment?: boolean;
|
|
65
|
+
disableAdornment?: boolean;
|
|
66
|
+
}
|
|
38
67
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
* @param hedges [conditional, styles] - when conditional is true, styles will be applied in a cascading order. See example below.
|
|
42
|
-
* @returns React.CSSProperties
|
|
43
|
-
* @example ([truthy, {color: 'pink', fontSize: 12}],
|
|
44
|
-
* [truthy, {color: 'green'}],
|
|
45
|
-
* [falsy, {color: 'blue'}])
|
|
46
|
-
* // {color: 'green', fontSize: 12}
|
|
47
|
-
*/
|
|
48
|
-
declare function getConditionalStyles(...hedges: [boolean, React.CSSProperties][]): React.CSSProperties;
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
*
|
|
52
|
-
* @param color if using a theme color, use the css global var. Otherwise, just use the custom color value
|
|
53
|
-
* @returns string
|
|
54
|
-
*/
|
|
55
|
-
declare function getCssColor(color: ThemeOptions | CustomColorOptions): string;
|
|
56
|
-
|
|
57
|
-
export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => JSX_2.Element;
|
|
58
|
-
|
|
59
|
-
declare interface HeaderProps {
|
|
60
|
-
user?: User;
|
|
61
|
-
onLogin?: () => void;
|
|
62
|
-
onLogout?: () => void;
|
|
63
|
-
onCreateAccount?: () => void;
|
|
68
|
+
declare interface ContentProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive_2.Content> {
|
|
69
|
+
contentWidth?: 'default' | 'match_trigger' | 'lg' | 'md' | 'sm';
|
|
64
70
|
}
|
|
65
71
|
|
|
66
|
-
|
|
72
|
+
declare type CustomColorOptions = `#${string}` | `rgb(${string})` | `rgba(${string})` | `hsl(${string})` | `hsla(${string})`;
|
|
67
73
|
|
|
68
74
|
declare interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
|
69
75
|
value: number;
|
|
@@ -73,6 +79,8 @@ declare interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
73
79
|
|
|
74
80
|
export declare function RadialGauge(props: Props): JSX_2.Element;
|
|
75
81
|
|
|
82
|
+
declare type RootProps = React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive_2.Root>;
|
|
83
|
+
|
|
76
84
|
export declare const Switch: ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
77
85
|
size?: "medium" | "large" | "small" | null | undefined;
|
|
78
86
|
} & ClassProp) | undefined) => string> & {
|
|
@@ -84,17 +92,42 @@ declare type ThemeOptions = (typeof themeOptions)[number];
|
|
|
84
92
|
|
|
85
93
|
declare const themeOptions: readonly ["primary", "primary-variant", "primary", "primary-variant", "secondary", "secondary-variant", "tertiary", "tertiary-variant", "purple", "red", "orange", "yellow", "green", "blue"];
|
|
86
94
|
|
|
87
|
-
declare
|
|
88
|
-
|
|
89
|
-
|
|
95
|
+
declare const Tooltip: React_2.FC<TooltipProps>;
|
|
96
|
+
|
|
97
|
+
declare const TooltipContent: React_2.ForwardRefExoticComponent<ContentProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
98
|
+
|
|
99
|
+
declare const TooltipPortal: React_2.FC<TooltipPrimitive_2.TooltipPortalProps>;
|
|
90
100
|
|
|
91
|
-
declare namespace
|
|
101
|
+
declare namespace TooltipPrimitive {
|
|
92
102
|
export {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
103
|
+
Tooltip,
|
|
104
|
+
TooltipProvider,
|
|
105
|
+
TooltipRoot,
|
|
106
|
+
TooltipTrigger,
|
|
107
|
+
TooltipPortal,
|
|
108
|
+
TooltipContent
|
|
96
109
|
}
|
|
97
110
|
}
|
|
98
|
-
export {
|
|
111
|
+
export { TooltipPrimitive }
|
|
112
|
+
|
|
113
|
+
declare interface TooltipProps extends React_2.PropsWithChildren {
|
|
114
|
+
tooltip: string | React_2.ReactNode;
|
|
115
|
+
open?: RootProps['open'];
|
|
116
|
+
defaultOpen?: RootProps['defaultOpen'];
|
|
117
|
+
onOpenChange?: RootProps['onOpenChange'];
|
|
118
|
+
delayDuration?: RootProps['delayDuration'];
|
|
119
|
+
rootProps?: Omit<RootProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>;
|
|
120
|
+
triggerProps?: TriggerProps;
|
|
121
|
+
contentWidth?: ContentProps['contentWidth'];
|
|
122
|
+
contentProps?: Omit<ContentProps, 'contentWidth'>;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
declare const TooltipProvider: React_2.FC<TooltipPrimitive_2.TooltipProviderProps>;
|
|
126
|
+
|
|
127
|
+
declare const TooltipRoot: React_2.FC<TooltipPrimitive_2.TooltipProps>;
|
|
128
|
+
|
|
129
|
+
declare const TooltipTrigger: React_2.ForwardRefExoticComponent<Omit<TooltipPrimitive_2.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
130
|
+
|
|
131
|
+
declare type TriggerProps = React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive_2.Trigger>;
|
|
99
132
|
|
|
100
133
|
export { }
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Roboto,Helvetica,Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--primary: #33318f;--primary-variant: #261f7a;--secondary: #1a30ff;--secondary-variant: #0524f0;--secondary-variant-2: #99a3ff;--tertiary: #02c577;--tertiary-variant: #5cc791;--neutral-light-1: #ffffff;--neutral-light-2: #f9f9f9;--neutral-light-3: #eef0f2;--neutral-light-4: #e3e7ea;--neutral-light-5: #dadee1;--neutral-dark-0: #1d192b;--neutral-dark-1: #1d1b20;--neutral-dark-2: #211f26;--neutral-dark-3: #2b2930;--neutral-dark-4: #2b2930;--neutral-dark-5: #36343b;--purple: #b553ec;--red: #ff3838;--orange: #ffa86d;--yellow: #ffd64c;--green: #99fb98;--blue: #2dccff}body,.docs-story{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}body:is(.dark *),.docs-story:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.visible{visibility:visible}.relative{position:relative}.mb-\[3px\]{margin-bottom:3px}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-10{width:2.5rem;height:2.5rem}.size-4{width:1rem;height:1rem}.size-8{width:2rem;height:2rem}.size-full{width:100%;height:100%}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.w-2{width:.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.min-w-32{min-width:8rem}.origin-center{transform-origin:center}.-translate-x-1{--tw-translate-x: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-2{--tw-translate-x: -.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-solid{border-style:solid}.border-none{border-style:none}.border-neutral-light-5{border-color:var(--neutral-light-5)}.bg-neutral-dark-5{background-color:var(--neutral-dark-5)}.bg-neutral-light-2{background-color:var(--neutral-light-2)}.bg-neutral-light-3{background-color:var(--neutral-light-3)}.bg-neutral-light-5{background-color:var(--neutral-light-5)}.bg-primary{background-color:var(--primary)}.bg-transparent{background-color:transparent}.stroke-current{stroke:currentColor}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.leading-\[1\]{line-height:1}.text-neutral-dark-0{color:var(--neutral-dark-0)}.text-neutral-dark-1{color:var(--neutral-dark-1)}.text-neutral-dark-5{color:var(--neutral-dark-5)}.text-neutral-light-4{color:var(--neutral-light-4)}.text-primary{color:var(--primary)}.text-tertiary{color:var(--tertiary)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner1xl{--tw-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2) inset;--tw-shadow-colored: inset 0px 1px 2px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-outer-1{--tw-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);--tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-primary{--tw-ring-color: var(--primary)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-\[stroke-dashoffset\]{transition-property:stroke-dashoffset;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-2:hover{border-width:2px}.hover\:border-secondary:hover{border-color:var(--secondary)}.hover\:border-tertiary:hover{border-color:var(--tertiary)}.hover\:bg-secondary:hover{background-color:var(--secondary)}.hover\:bg-tertiary:hover{background-color:var(--tertiary)}.hover\:text-secondary:hover{color:var(--secondary)}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:ring-2:hover{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.active\:border-none:active{border-style:none}.active\:text-primary:active{color:var(--primary)}.active\:underline:active{text-decoration-line:underline}.active\:no-underline:active{text-decoration-line:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-neutral-light-5:disabled{background-color:var(--neutral-light-5)}.disabled\:opacity-50:disabled{opacity:.5}.group:focus .group-focus\:ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.group:focus-visible .group-focus-visible\:ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.group:disabled .group-disabled\:hover\:ring-0:hover{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.data-\[state\=checked\]\:translate-x-3[data-state=checked]{--tw-translate-x: .75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\[state\=checked\]\:shadow-outer-2[data-state=checked]{--tw-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .3);--tw-shadow-colored: 0px 2px 2px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.data-\[state\=checked\]\:ring-1[data-state=checked]{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.data-\[state\=checked\]\:hover\:ring-2:hover[data-state=checked]{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.dark\:bg-neutral-light-5:is(.dark *){background-color:var(--neutral-light-5)}.dark\:text-white:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:dark\:text-neutral-dark-0:is(.dark *):hover{color:var(--neutral-dark-0)}.hover\:dark\:text-secondary-variant-2:is(.dark *):hover{color:var(--secondary-variant-2)}.active\:dark\:text-neutral-light-5:is(.dark *):active{color:var(--neutral-light-5)}.dark\:data-\[state\=checked\]\:bg-primary[data-state=checked]:is(.dark *){background-color:var(--primary)}.storybook-header{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;border-bottom:1px solid rgba(0,0,0,.1);padding:15px 20px;display:flex;align-items:center;justify-content:space-between}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{font-weight:700;font-size:20px;line-height:1;margin:6px 0 6px 10px;display:inline-block;vertical-align:top}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{color:#333;font-size:14px;margin-right:10px}.storybook-page{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:24px;padding:48px 20px;margin:0 auto;max-width:600px;color:#333}.storybook-page h2{font-weight:700;font-size:32px;line-height:1;margin:0 0 4px;display:inline-block;vertical-align:top}.storybook-page p{margin:1em 0}.storybook-page a{text-decoration:none;color:#1ea7fd}.storybook-page ul{padding-left:30px;margin:1em 0}.storybook-page li{margin-bottom:8px}.storybook-page .tip{display:inline-block;border-radius:1em;font-size:11px;line-height:12px;font-weight:700;background:#e7fdd8;color:#66bf3c;padding:4px 12px;margin-right:10px;vertical-align:top}.storybook-page .tip-wrapper{font-size:13px;line-height:20px;margin-top:40px;margin-bottom:40px}.storybook-page .tip-wrapper svg{display:inline-block;height:12px;width:12px;margin-right:4px;vertical-align:top;margin-top:3px}.storybook-page .tip-wrapper svg path{fill:#1ea7fd}
|
|
1
|
+
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Roboto,Helvetica,Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--primary: #33318f;--primary-variant: #261f7a;--secondary: #1a30ff;--secondary-variant: #0524f0;--secondary-variant-2: #99a3ff;--tertiary: #02c577;--tertiary-variant: #5cc791;--neutral-light-1: #ffffff;--neutral-light-2: #f9f9f9;--neutral-light-3: #eef0f2;--neutral-light-4: #e3e7ea;--neutral-light-5: #dadee1;--neutral-dark-0: #1d192b;--neutral-dark-1: #1d1b20;--neutral-dark-2: #211f26;--neutral-dark-3: #2b2930;--neutral-dark-4: #2b2930;--neutral-dark-5: #36343b;--purple: #b553ec;--red: #ff3838;--orange: #ffa86d;--yellow: #ffd64c;--green: #99fb98;--blue: #2dccff}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.left-2{left:.5rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.col-start-4{grid-column-start:4}.row-start-2{grid-row-start:2}.row-start-4{grid-row-start:4}.row-end-7{grid-row-end:7}.-ml-2{margin-left:-.5rem}.-mr-2{margin-right:-.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-\[3px\]{margin-bottom:3px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.size-10{width:2.5rem;height:2.5rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-8{width:2rem;height:2rem}.size-\[32px\]{width:32px;height:32px}.size-full{width:100%;height:100%}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.w-2{width:.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-\[var\(--radix-tooltip-trigger-width\)\]{width:var(--radix-tooltip-trigger-width)}.w-auto{width:auto}.w-full{width:100%}.max-w-\[150px\]{max-width:150px}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.flex-1{flex:1 1 0%}.origin-center{transform-origin:center}.-translate-x-1{--tw-translate-x: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-2{--tw-translate-x: -.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-solid{border-style:solid}.border-none{border-style:none}.border-neutral-dark-1{border-color:var(--neutral-dark-1)}.border-neutral-light-5{border-color:var(--neutral-light-5)}.bg-neutral-dark-1{background-color:var(--neutral-dark-1)}.bg-neutral-dark-5{background-color:var(--neutral-dark-5)}.bg-neutral-light-2{background-color:var(--neutral-light-2)}.bg-neutral-light-3{background-color:var(--neutral-light-3)}.bg-neutral-light-5{background-color:var(--neutral-light-5)}.bg-primary{background-color:var(--primary)}.bg-transparent{background-color:transparent}.stroke-current{stroke:currentColor}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.leading-\[1\]{line-height:1}.text-neutral-dark-0{color:var(--neutral-dark-0)}.text-neutral-dark-1{color:var(--neutral-dark-1)}.text-neutral-dark-5{color:var(--neutral-dark-5)}.text-neutral-light-1{color:var(--neutral-light-1)}.text-neutral-light-4{color:var(--neutral-light-4)}.text-primary{color:var(--primary)}.text-tertiary{color:var(--tertiary)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner1xl{--tw-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2) inset;--tw-shadow-colored: inset 0px 1px 2px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-outer-1{--tw-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);--tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-primary{--tw-ring-color: var(--primary)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-\[stroke-dashoffset\]{transition-property:stroke-dashoffset;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\]{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.clip-right-rounded{clip-path:inset(0 .5px 0 -100vw round .25rem)}.clip-left-rounded{clip-path:inset(0 -100vw 0 0 round .25rem)}.TooltipContent[data-side=top]{animation-name:slideUp}.TooltipContent[data-side=bottom]{animation-name:slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}body,.docs-story{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}body:is(.dark *),.docs-story:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-2:hover{border-width:2px}.hover\:border-secondary:hover{border-color:var(--secondary)}.hover\:border-tertiary:hover{border-color:var(--tertiary)}.hover\:bg-secondary:hover{background-color:var(--secondary)}.hover\:bg-tertiary:hover{background-color:var(--tertiary)}.hover\:text-secondary:hover{color:var(--secondary)}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:ring-2:hover{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.active\:border-none:active{border-style:none}.active\:text-primary:active{color:var(--primary)}.active\:underline:active{text-decoration-line:underline}.active\:no-underline:active{text-decoration-line:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-neutral-light-5:disabled{background-color:var(--neutral-light-5)}.disabled\:opacity-50:disabled{opacity:.5}.group:focus .group-focus\:ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.group:focus-visible .group-focus-visible\:ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.group:disabled .group-disabled\:hover\:ring-0:hover{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.peer:hover~.peer-hover\:-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:hover~.peer-hover\:translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:hover~.peer-hover\:translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-3[data-state=checked]{--tw-translate-x: .75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up .2s ease-out}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down .2s ease-out}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\[state\=checked\]\:shadow-outer-2[data-state=checked]{--tw-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .3);--tw-shadow-colored: 0px 2px 2px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.data-\[state\=checked\]\:ring-1[data-state=checked]{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.data-\[state\=checked\]\:hover\:ring-2:hover[data-state=checked]{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.dark\:border-neutral-light-1:is(.dark *){border-color:var(--neutral-light-1)}.dark\:bg-neutral-dark-5:is(.dark *){background-color:var(--neutral-dark-5)}.dark\:bg-neutral-light-1:is(.dark *){background-color:var(--neutral-light-1)}.dark\:bg-neutral-light-5:is(.dark *){background-color:var(--neutral-light-5)}.dark\:text-neutral-light-1:is(.dark *){color:var(--neutral-light-1)}.dark\:text-white:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:dark\:text-neutral-dark-0:is(.dark *):hover{color:var(--neutral-dark-0)}.hover\:dark\:text-secondary-variant-2:is(.dark *):hover{color:var(--secondary-variant-2)}.active\:dark\:text-neutral-light-5:is(.dark *):active{color:var(--neutral-light-5)}.dark\:data-\[state\=checked\]\:bg-primary[data-state=checked]:is(.dark *){background-color:var(--primary)}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloodhoundenterprise/doodleui",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "SpecterOps",
|
|
6
6
|
"repository": {
|
|
@@ -18,23 +18,29 @@
|
|
|
18
18
|
"types": "./dist/index.d.ts",
|
|
19
19
|
"license": "Apache-2.0",
|
|
20
20
|
"scripts": {
|
|
21
|
-
"dev": "
|
|
21
|
+
"dev": "yarn run storybook",
|
|
22
22
|
"build": "tsc && vite build",
|
|
23
23
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
24
24
|
"test": "TZ=America/Los_Angeles vitest",
|
|
25
|
+
"prepack": "pinst --disable",
|
|
26
|
+
"postpack": "pinst --enable",
|
|
27
|
+
"_postinstall": "husky",
|
|
25
28
|
"preview": "vite preview",
|
|
26
29
|
"storybook": "storybook dev -p 6006",
|
|
27
30
|
"build:storybook": "storybook build",
|
|
28
31
|
"build:styles": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch",
|
|
29
32
|
"generate-index": "tsx ./scripts/generateIndex.ts",
|
|
30
33
|
"create-component": "tsx ./scripts/createComponent.ts",
|
|
31
|
-
"postcreate-component": "
|
|
34
|
+
"postcreate-component": "yarn run generate-index",
|
|
32
35
|
"format:check": "npx prettier . --check",
|
|
33
|
-
"format:write": "npx prettier . --write"
|
|
36
|
+
"format:write": "npx prettier . --write",
|
|
37
|
+
"update-badge": "tsx ./scripts/updateVersionBadge.ts $npm_package_version $PROJECT_CWD"
|
|
34
38
|
},
|
|
35
39
|
"dependencies": {
|
|
40
|
+
"@radix-ui/react-accordion": "^1.1.2",
|
|
36
41
|
"@radix-ui/react-slot": "^1.0.2",
|
|
37
42
|
"@radix-ui/react-switch": "^1.0.2",
|
|
43
|
+
"@radix-ui/react-tooltip": "^1.0.7",
|
|
38
44
|
"class-variance-authority": "^0.7.0",
|
|
39
45
|
"clsx": "^2.1.1",
|
|
40
46
|
"react": "^18.2.0",
|
|
@@ -42,6 +48,7 @@
|
|
|
42
48
|
},
|
|
43
49
|
"devDependencies": {
|
|
44
50
|
"@chromatic-com/storybook": "^1.3.3",
|
|
51
|
+
"@fontsource/roboto": "^5.0.13",
|
|
45
52
|
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
|
46
53
|
"@fortawesome/free-brands-svg-icons": "^6.5.2",
|
|
47
54
|
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
|
@@ -71,7 +78,9 @@
|
|
|
71
78
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
72
79
|
"eslint-plugin-react-refresh": "^0.4.6",
|
|
73
80
|
"eslint-plugin-storybook": "^0.8.0",
|
|
81
|
+
"husky": "^9.0.11",
|
|
74
82
|
"jsdom": "^24.1.0",
|
|
83
|
+
"pinst": "^3.0.0",
|
|
75
84
|
"prettier": "3.3.1",
|
|
76
85
|
"storybook": "^8.1.5",
|
|
77
86
|
"tailwind-merge": "^2.3.0",
|