@spear-ai/spectral 1.16.9 → 1.17.0
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/AlertDialog.d.ts +59 -0
- package/dist/AlertDialog.d.ts.map +1 -0
- package/dist/AlertDialog.js +97 -0
- package/dist/AlertDialog.js.map +1 -0
- package/dist/Button.d.ts +2 -2
- package/dist/Button.d.ts.map +1 -1
- package/dist/Button.js +20 -21
- package/dist/Button.js.map +1 -1
- package/dist/Icons/LoaderIcon.d.ts.map +1 -1
- package/dist/Icons/LoaderIcon.js +1 -1
- package/dist/Icons/LoaderIcon.js.map +1 -1
- package/dist/RadialMenu.d.ts +46 -0
- package/dist/RadialMenu.d.ts.map +1 -0
- package/dist/RadialMenu.js +331 -0
- package/dist/RadialMenu.js.map +1 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +5 -3
- package/dist/styles/horizon/colors.css +34 -26
- package/dist/styles/spectral.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { ComponentProps, ReactElement } from "react";
|
|
3
|
+
import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
|
|
4
|
+
|
|
5
|
+
//#region src/components/AlertDialog/AlertDialog.d.ts
|
|
6
|
+
interface AlertDialogProps<Payload = unknown> extends AlertDialog$1.Root.Props<Payload> {
|
|
7
|
+
open?: AlertDialog$1.Root.Props<Payload>['open'];
|
|
8
|
+
onOpenChange?: AlertDialog$1.Root.Props<Payload>['onOpenChange'];
|
|
9
|
+
handle?: AlertDialog$1.Root.Props<Payload>['handle'];
|
|
10
|
+
onOpenChangeComplete?: AlertDialog$1.Root.Props<Payload>['onOpenChangeComplete'];
|
|
11
|
+
triggerId?: AlertDialog$1.Root.Props<Payload>['triggerId'];
|
|
12
|
+
cancelLabel?: string;
|
|
13
|
+
continueLabel?: string;
|
|
14
|
+
}
|
|
15
|
+
interface AlertDialogTriggerProps extends AlertDialog$1.Trigger.Props {}
|
|
16
|
+
interface AlertDialogPopupProps extends AlertDialog$1.Popup.Props {
|
|
17
|
+
portalProps?: AlertDialog$1.Portal.Props;
|
|
18
|
+
}
|
|
19
|
+
declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
|
|
20
|
+
declare const AlertDialog: typeof AlertDialog$1.Root;
|
|
21
|
+
declare const AlertDialogPortal: typeof AlertDialog$1.Portal;
|
|
22
|
+
declare const AlertDialogTrigger: (props: AlertDialogTriggerProps) => ReactElement;
|
|
23
|
+
declare const AlertDialogBackdrop: ({
|
|
24
|
+
className,
|
|
25
|
+
...props
|
|
26
|
+
}: AlertDialog$1.Backdrop.Props) => ReactElement;
|
|
27
|
+
declare const AlertDialogViewport: ({
|
|
28
|
+
className,
|
|
29
|
+
...props
|
|
30
|
+
}: AlertDialog$1.Viewport.Props) => ReactElement;
|
|
31
|
+
declare const AlertDialogPopup: ({
|
|
32
|
+
className,
|
|
33
|
+
portalProps,
|
|
34
|
+
...props
|
|
35
|
+
}: AlertDialogPopupProps) => ReactElement;
|
|
36
|
+
declare const AlertDialogHeader: ({
|
|
37
|
+
className,
|
|
38
|
+
children,
|
|
39
|
+
...props
|
|
40
|
+
}: ComponentProps<'div'>) => ReactElement;
|
|
41
|
+
type AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'children'> & Pick<AlertDialogProps, 'cancelLabel' | 'continueLabel'>;
|
|
42
|
+
declare const AlertDialogFooter: ({
|
|
43
|
+
cancelLabel,
|
|
44
|
+
className,
|
|
45
|
+
continueLabel,
|
|
46
|
+
...props
|
|
47
|
+
}: AlertDialogFooterProps) => ReactElement;
|
|
48
|
+
declare const AlertDialogTitle: ({
|
|
49
|
+
className,
|
|
50
|
+
...props
|
|
51
|
+
}: AlertDialog$1.Title.Props) => ReactElement;
|
|
52
|
+
declare const AlertDialogDescription: ({
|
|
53
|
+
className,
|
|
54
|
+
...props
|
|
55
|
+
}: AlertDialog$1.Description.Props) => ReactElement;
|
|
56
|
+
declare const AlertDialogClose: (props: AlertDialog$1.Close.Props) => ReactElement;
|
|
57
|
+
//#endregion
|
|
58
|
+
export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPopupProps, AlertDialogPortal, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, AlertDialogTriggerProps, AlertDialogViewport };
|
|
59
|
+
//# sourceMappingURL=AlertDialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","names":[],"sources":["../src/components/AlertDialog/AlertDialog.tsx"],"mappings":";;;;;UAMiB,gBAAA,4BAA4C,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA;EAC3F,IAAA,GAAO,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA;EACvC,YAAA,GAAe,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA;EAC/C,MAAA,GAAS,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA;EACzC,oBAAA,GAAuB,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA;EACvD,SAAA,GAAY,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA;EAC5C,WAAA;EACA,aAAA;AAAA;AAAA,UAGe,uBAAA,SAAgC,aAAA,CAAqB,OAAA,CAAQ,KAAA;AAAA,UAG7D,qBAAA,SAA8B,aAAA,CAAqB,KAAA,CAAM,KAAA;EACxE,WAAA,GAAc,aAAA,CAAqB,MAAA,CAAO,KAAA;AAAA;AAAA,cAG/B,uBAAA,SAAgC,aAAA,CAAqB,YAAA;AAAA,cAGrD,WAAA,SAAoB,aAAA,CAAqB,IAAA;AAAA,cAGzC,iBAAA,SAA0B,aAAA,CAAqB,MAAA;AAAA,cAG/C,kBAAA,GAAkB,KAAA,EACtB,uBAAA,KACN,YAAA;AAAA,cAMU,mBAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAG7B,aAAA,CAAqB,QAAA,CAAS,KAAA,KAAQ,YAAA;AAAA,cAW5B,mBAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAG7B,aAAA,CAAqB,QAAA,CAAS,KAAA,KAAQ,YAAA;AAAA,cAU5B,gBAAA;EAAgB,SAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAI1B,qBAAA,KAAwB,YAAA;AAAA,cAoBd,iBAAA;EAAiB,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAI3B,cAAA,YAAwB,YAAA;AAAA,KAqBtB,sBAAA,GAAyB,IAAA,CAAK,cAAA,uBAAqC,IAAA,CAAK,gBAAA;AAAA,cAEhE,iBAAA;EAAiB,WAAA;EAAA,SAAA;EAAA,aAAA;EAAA,GAAA;AAAA,GAK3B,sBAAA,KAAyB,YAAA;AAAA,cAiBf,gBAAA;EAAgB,SAAA;EAAA,GAAA;AAAA,GAG1B,aAAA,CAAqB,KAAA,CAAM,KAAA,KAAQ,YAAA;AAAA,cAazB,sBAAA;EAAsB,SAAA;EAAA,GAAA;AAAA,GAGhC,aAAA,CAAqB,WAAA,CAAY,KAAA,KAAQ,YAAA;AAAA,cAU/B,gBAAA,GAAgB,KAAA,EACpB,aAAA,CAAqB,KAAA,CAAM,KAAA,KACjC,YAAA"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { WarningIcon } from "./Icons/WarningIcon.js";
|
|
3
|
+
import { cn } from "./utils/twUtils.js";
|
|
4
|
+
import { Button } from "./Button.js";
|
|
5
|
+
import "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
|
|
8
|
+
|
|
9
|
+
//#region src/components/AlertDialog/AlertDialog.tsx
|
|
10
|
+
const AlertDialogCreateHandle = AlertDialog$1.createHandle;
|
|
11
|
+
const AlertDialog = AlertDialog$1.Root;
|
|
12
|
+
const AlertDialogPortal = AlertDialog$1.Portal;
|
|
13
|
+
const AlertDialogTrigger = (props) => {
|
|
14
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
|
|
15
|
+
"data-slot": "alert-dialog-trigger",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
const AlertDialogBackdrop = ({ className, ...props }) => {
|
|
20
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
|
|
21
|
+
className: cn("inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:animate-out", "motion-safe:data-[state=closed]:fade-out-0", className),
|
|
22
|
+
"data-slot": "alert-dialog-backdrop",
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
const AlertDialogViewport = ({ className, ...props }) => {
|
|
27
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
|
|
28
|
+
className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", className),
|
|
29
|
+
"data-slot": "alert-dialog-viewport",
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
const AlertDialogPopup = ({ className, portalProps, ...props }) => {
|
|
34
|
+
return /* @__PURE__ */ jsxs(AlertDialogPortal, {
|
|
35
|
+
...portalProps,
|
|
36
|
+
children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
|
|
37
|
+
className: cn("relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-xl border border-black/40 bg-level-zero text-text-primary", "shadow-elevation-3 transition-[scale,opacity,translate] duration-200 ease-in-out before:pointer-events-none before:absolute before:inset-0", "before:rounded-[calc(var(--radius-2xl)-1px)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", className),
|
|
38
|
+
"data-slot": "alert-dialog-popup",
|
|
39
|
+
...props
|
|
40
|
+
}) })]
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
const AlertDialogHeader = ({ className, children, ...props }) => {
|
|
44
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
45
|
+
className: cn("flex flex-col gap-2 p-6 place-items-center! items-center", className),
|
|
46
|
+
"data-slot": "alert-dialog-header",
|
|
47
|
+
...props,
|
|
48
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
49
|
+
"aria-hidden": "true",
|
|
50
|
+
className: "bg-danger-400/20 rounded-full text-danger-400 mx-auto mb-2 flex items-center justify-center size-10",
|
|
51
|
+
children: /* @__PURE__ */ jsx(WarningIcon, {
|
|
52
|
+
className: "text-danger-400",
|
|
53
|
+
size: 28
|
|
54
|
+
})
|
|
55
|
+
}), children]
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
const AlertDialogFooter = ({ cancelLabel = "Cancel", className, continueLabel = "Continue", ...props }) => {
|
|
59
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
60
|
+
className: cn("flex gap-2 px-6 pb-6 flex-row justify-end rounded-b-[calc(var(--radius-2xl)-1px)]", className),
|
|
61
|
+
"data-slot": "alert-dialog-footer",
|
|
62
|
+
...props,
|
|
63
|
+
children: [/* @__PURE__ */ jsx(Button, {
|
|
64
|
+
asChild: true,
|
|
65
|
+
variant: "outline",
|
|
66
|
+
children: /* @__PURE__ */ jsx(AlertDialogClose, { children: cancelLabel })
|
|
67
|
+
}), /* @__PURE__ */ jsx(Button, {
|
|
68
|
+
asChild: true,
|
|
69
|
+
variant: "destructive",
|
|
70
|
+
children: /* @__PURE__ */ jsx(AlertDialogClose, { children: continueLabel })
|
|
71
|
+
})]
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
const AlertDialogTitle = ({ className, ...props }) => {
|
|
75
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
|
|
76
|
+
className: cn("font-heading font-medium text-xl leading-none", className),
|
|
77
|
+
"data-slot": "alert-dialog-title",
|
|
78
|
+
...props
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
const AlertDialogDescription = ({ className, ...props }) => {
|
|
82
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
|
|
83
|
+
className: cn("text-text-secondary! text-sm mt-4", className),
|
|
84
|
+
"data-slot": "alert-dialog-description",
|
|
85
|
+
...props
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
const AlertDialogClose = (props) => {
|
|
89
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
|
|
90
|
+
"data-slot": "alert-dialog-close",
|
|
91
|
+
...props
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
//#endregion
|
|
96
|
+
export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };
|
|
97
|
+
//# sourceMappingURL=AlertDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AlertDialog.js","names":["AlertDialogPrimitive"],"sources":["../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport { Button } from '@components/Button/Button'\nimport { WarningIcon } from '@components/Icons/WarningIcon'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentProps, type ReactElement } from 'react'\n\nexport interface AlertDialogProps<Payload = unknown> extends AlertDialogPrimitive.Root.Props<Payload> {\n open?: AlertDialogPrimitive.Root.Props<Payload>['open']\n onOpenChange?: AlertDialogPrimitive.Root.Props<Payload>['onOpenChange']\n handle?: AlertDialogPrimitive.Root.Props<Payload>['handle']\n onOpenChangeComplete?: AlertDialogPrimitive.Root.Props<Payload>['onOpenChangeComplete']\n triggerId?: AlertDialogPrimitive.Root.Props<Payload>['triggerId']\n cancelLabel?: string\n continueLabel?: string\n}\n\nexport interface AlertDialogTriggerProps extends AlertDialogPrimitive.Trigger.Props {\n}\n\nexport interface AlertDialogPopupProps extends AlertDialogPrimitive.Popup.Props {\n portalProps?: AlertDialogPrimitive.Portal.Props\n}\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n AlertDialogPrimitive.createHandle\n\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\n AlertDialogPrimitive.Root\n\nexport const AlertDialogPortal: typeof AlertDialogPrimitive.Portal =\n AlertDialogPrimitive.Portal\n\nexport const AlertDialogTrigger = (\n props: AlertDialogTriggerProps,\n): ReactElement => {\n return (\n <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />\n )\n}\n\nexport const AlertDialogBackdrop = ({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props): ReactElement => {\n return (\n <AlertDialogPrimitive.Backdrop\n className={cn('inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:animate-out',\n 'motion-safe:data-[state=closed]:fade-out-0', className)}\n data-slot='alert-dialog-backdrop'\n {...props}\n />\n )\n}\n\nexport const AlertDialogViewport = ({\n className,\n ...props\n}: AlertDialogPrimitive.Viewport.Props): ReactElement => {\n return (\n <AlertDialogPrimitive.Viewport\n className={cn('fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4', className)}\n data-slot='alert-dialog-viewport'\n {...props}\n />\n )\n}\n\nexport const AlertDialogPopup = ({\n className,\n portalProps,\n ...props\n}: AlertDialogPopupProps): ReactElement => {\n return (\n <AlertDialogPortal {...portalProps}>\n <AlertDialogBackdrop />\n <AlertDialogViewport>\n <AlertDialogPrimitive.Popup\n className={cn(\n 'relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-xl border border-black/40 bg-level-zero text-text-primary',\n 'shadow-elevation-3 transition-[scale,opacity,translate] duration-200 ease-in-out before:pointer-events-none before:absolute before:inset-0',\n 'before:rounded-[calc(var(--radius-2xl)-1px)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n className,\n )}\n data-slot='alert-dialog-popup'\n {...props}\n />\n </AlertDialogViewport>\n </AlertDialogPortal>\n )\n}\n\nexport const AlertDialogHeader = ({\n className,\n children,\n ...props\n}: ComponentProps<'div'>): ReactElement => {\n return (\n <div\n className={cn(\n 'flex flex-col gap-2 p-6 place-items-center! items-center',\n className,\n )}\n data-slot='alert-dialog-header'\n {...props}\n >\n <div\n aria-hidden='true'\n className='bg-danger-400/20 rounded-full text-danger-400 mx-auto mb-2 flex items-center justify-center size-10'\n >\n <WarningIcon className='text-danger-400' size={28} />\n </div>\n {children}\n </div>\n )\n}\n\ntype AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'children'> & Pick<AlertDialogProps, 'cancelLabel' | 'continueLabel'>\n\nexport const AlertDialogFooter = ({\n cancelLabel = 'Cancel',\n className,\n continueLabel = 'Continue',\n ...props\n}: AlertDialogFooterProps): ReactElement => {\n return (\n <div\n className={cn('flex gap-2 px-6 pb-6 flex-row justify-end rounded-b-[calc(var(--radius-2xl)-1px)]', className)}\n data-slot='alert-dialog-footer'\n {...props}\n >\n <Button asChild variant='outline'>\n <AlertDialogClose>{cancelLabel}</AlertDialogClose>\n </Button>\n <Button asChild variant='destructive'>\n <AlertDialogClose>{continueLabel}</AlertDialogClose>\n </Button>\n </div>\n )\n}\n\nexport const AlertDialogTitle = ({\n className,\n ...props\n}: AlertDialogPrimitive.Title.Props): ReactElement => {\n return (\n <AlertDialogPrimitive.Title\n className={cn(\n 'font-heading font-medium text-xl leading-none',\n className,\n )}\n data-slot='alert-dialog-title'\n {...props}\n />\n )\n}\n\nexport const AlertDialogDescription = ({\n className,\n ...props\n}: AlertDialogPrimitive.Description.Props): ReactElement => {\n return (\n <AlertDialogPrimitive.Description\n className={cn('text-text-secondary! text-sm mt-4', className)}\n data-slot='alert-dialog-description'\n {...props}\n />\n )\n}\n\nexport const AlertDialogClose = (\n props: AlertDialogPrimitive.Close.Props,\n): ReactElement => {\n return (\n <AlertDialogPrimitive.Close data-slot='alert-dialog-close' {...props} />\n )\n}\n"],"mappings":";;;;;;;;;AAuBA,MAAa,0BACXA,cAAqB;AAEvB,MAAa,cACXA,cAAqB;AAEvB,MAAa,oBACXA,cAAqB;AAEvB,MAAa,sBACX,UACiB;AACjB,QACE,oBAACA,cAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;EAAS;;AAIhF,MAAa,uBAAuB,EAClC,WACA,GAAG,YACoD;AACvD,QACE,oBAACA,cAAqB,UAAtB;EACE,WAAW,GAAG,gLACd,8CAA8C,UAAU;EACxD,aAAU;EACV,GAAI;EACJ;;AAIN,MAAa,uBAAuB,EAClC,WACA,GAAG,YACoD;AACvD,QACE,oBAACA,cAAqB,UAAtB;EACE,WAAW,GAAG,6EAA6E,UAAU;EACrG,aAAU;EACV,GAAI;EACJ;;AAIN,MAAa,oBAAoB,EAC/B,WACA,aACA,GAAG,YACsC;AACzC,QACE,qBAAC,mBAAD;EAAmB,GAAI;YAAvB,CACE,oBAAC,qBAAD,EAAuB,GACvB,oBAAC,qBAAD,YACE,oBAACA,cAAqB,OAAtB;GACE,WAAW,GACT,iKACA,8IACA,8GACA,UACD;GACD,aAAU;GACV,GAAI;GACJ,GACkB,EACJ;;;AAIxB,MAAa,qBAAqB,EAChC,WACA,UACA,GAAG,YACsC;AACzC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4DACA,UACD;EACD,aAAU;EACV,GAAI;YANN,CAQE,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAEV,oBAAC,aAAD;IAAa,WAAU;IAAkB,MAAM;IAAM;GACjD,GACL,SACG;;;AAMV,MAAa,qBAAqB,EAChC,cAAc,UACd,WACA,gBAAgB,YAChB,GAAG,YACuC;AAC1C,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,qFAAqF,UAAU;EAC7G,aAAU;EACV,GAAI;YAHN,CAKE,oBAAC,QAAD;GAAQ;GAAQ,SAAQ;aACtB,oBAAC,kBAAD,YAAmB,aAA+B;GAC3C,GACT,oBAAC,QAAD;GAAQ;GAAQ,SAAQ;aACtB,oBAAC,kBAAD,YAAmB,eAAiC;GAC7C,EACL;;;AAIV,MAAa,oBAAoB,EAC/B,WACA,GAAG,YACiD;AACpD,QACE,oBAACA,cAAqB,OAAtB;EACE,WAAW,GACT,iDACA,UACD;EACD,aAAU;EACV,GAAI;EACJ;;AAIN,MAAa,0BAA0B,EACrC,WACA,GAAG,YACuD;AAC1D,QACE,oBAACA,cAAqB,aAAtB;EACE,WAAW,GAAG,qCAAqC,UAAU;EAC7D,aAAU;EACV,GAAI;EACJ;;AAIN,MAAa,oBACX,UACiB;AACjB,QACE,oBAACA,cAAqB,OAAtB;EAA4B,aAAU;EAAqB,GAAI;EAAS"}
|
package/dist/Button.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/Button/Button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "ghost" | "outline" | "primary" | "secondary" | "unstyled" | null | undefined;
|
|
10
|
+
variant?: "destructive" | "ghost" | "outline" | "primary" | "secondary" | "unstyled" | null | undefined;
|
|
11
11
|
size?: "default" | "fullWidth" | "small" | null | undefined;
|
|
12
12
|
state?: "default" | "error" | "loading" | null | undefined;
|
|
13
13
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
@@ -21,7 +21,7 @@ interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonE
|
|
|
21
21
|
startIcon?: ReactNode;
|
|
22
22
|
state?: 'default' | 'error' | 'loading';
|
|
23
23
|
type?: 'button' | 'submit' | 'reset';
|
|
24
|
-
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled';
|
|
24
|
+
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'unstyled';
|
|
25
25
|
}
|
|
26
26
|
declare function Button({
|
|
27
27
|
asChild,
|
package/dist/Button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","names":[],"sources":["../src/components/Button/Button.tsx"],"mappings":";;;;;;;;cAMM,cAAA,GAAc,KAAA;;;;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","names":[],"sources":["../src/components/Button/Button.tsx"],"mappings":";;;;;;;;cAMM,cAAA,GAAc,KAAA;;;;IA6BnB,iCAAA,CAAA,SAAA;AAAA,UAEgB,WAAA,SAAoB,WAAA,EAAa,IAAA,CAAK,oBAAA,CAAqB,iBAAA,aAA8B,YAAA,QAAoB,cAAA;EAC5H,UAAA;EACA,QAAA;EACA,OAAA,GAAU,SAAA;EACV,KAAA;EACA,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,WAAA;EAC7B,IAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA;EAIA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,EAAA;EACA,KAAA;EACA,OAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
|
package/dist/Button.js
CHANGED
|
@@ -7,23 +7,24 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
|
7
7
|
import { cva } from "class-variance-authority";
|
|
8
8
|
|
|
9
9
|
//#region src/components/Button/Button.tsx
|
|
10
|
-
const buttonVariants = cva(`gap-2 rounded-
|
|
10
|
+
const buttonVariants = cva(`gap-2 rounded-md font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-[background-color,border-color,color,transform] duration-200 ease-out motion-reduce:transition-none disabled:active:scale-100 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
|
|
11
11
|
variants: {
|
|
12
12
|
variant: {
|
|
13
13
|
primary: `border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover active:scale-[0.97] focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled`,
|
|
14
|
-
secondary: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover active:scale-[0.97] focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:
|
|
15
|
-
outline: `border-button-
|
|
14
|
+
secondary: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:border-button-secondary-border--hover hover:text-button-secondary-text--hover active:scale-[0.97] focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:text-button-secondary-text--disabled`,
|
|
15
|
+
outline: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:border-button-secondary-border--hover hover:text-button-secondary-text--hover active:scale-[0.97] focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:text-button-secondary-text--disabled`,
|
|
16
16
|
ghost: "border-none bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover active:scale-[0.97] focus-visible:outline-button-outline-border disabled:text-button-ghost-text--disabled",
|
|
17
|
-
unstyled: "font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent active:scale-100 focus-visible:outline-button-outline-border disabled:opacity-50"
|
|
17
|
+
unstyled: "font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent active:scale-100 focus-visible:outline-button-outline-border disabled:opacity-50",
|
|
18
|
+
destructive: "border-button-destructive-border bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg--hover active:scale-[0.97] disabled:border-button-destructive-border--disabled disabled:bg-button-destructive-bg--disabled disabled:text-button-destructive-text--disabled focus-visible:outline-button-destructive-border"
|
|
18
19
|
},
|
|
19
20
|
size: {
|
|
20
|
-
small: "py-1 px-
|
|
21
|
-
default: "py-2 px-
|
|
22
|
-
fullWidth: "py-2 px-
|
|
21
|
+
small: "py-1.5 px-3 text-sm! w-fit",
|
|
22
|
+
default: "py-2 px-4 text-base! w-fit",
|
|
23
|
+
fullWidth: "py-2 px-4 text-base! w-full"
|
|
23
24
|
},
|
|
24
25
|
state: {
|
|
25
26
|
default: "",
|
|
26
|
-
error: "bg-button-danger text-text-primary transition focus-visible:outline-
|
|
27
|
+
error: "bg-button-danger text-text-primary transition focus-visible:outline-danger-400",
|
|
27
28
|
loading: "pointer-events-none cursor-wait"
|
|
28
29
|
}
|
|
29
30
|
},
|
|
@@ -36,17 +37,18 @@ const buttonVariants = cva(`gap-2 rounded-lg font-semibold [&_svg]:size-4 relati
|
|
|
36
37
|
const Button = ({ asChild = false, children, className, dataTestId, disabled, endIcon, id, label, onClick, ref, size, startIcon, state, type = "button", variant = "primary", ...props }) => {
|
|
37
38
|
const stateStyles = {
|
|
38
39
|
error: {
|
|
39
|
-
primary: "
|
|
40
|
-
secondary: "bg-
|
|
41
|
-
outline: "bg-transparent border-button-
|
|
42
|
-
ghost: "bg-transparent text-button-
|
|
43
|
-
unstyled: "bg-transparent text-button-
|
|
40
|
+
primary: "border-button-destructive-border bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg--hover hover:text-button-destructive-text--hover focus-visible:outline-button-destructive-border",
|
|
41
|
+
secondary: "bg-transparent border-button-destructive-border text-button-destructive-text hover:border-button-destructive-border--hover hover:text-button-destructive-text--hover hover:bg-button-destructive-bg--hover focus-visible:outline-button-destructive-border",
|
|
42
|
+
outline: "bg-transparent border-button-destructive-border text-button-destructive-text hover:border-button-destructive-border--hover hover:text-button-destructive-text--hover hover:bg-button-destructive-bg--hover focus-visible:outline-button-destructive-border",
|
|
43
|
+
ghost: "bg-transparent text-button-destructive-text hover:text-button-destructive-text--hover hover:bg-button-destructive-bg--hover",
|
|
44
|
+
unstyled: "bg-transparent text-button-destructive-text"
|
|
44
45
|
},
|
|
45
46
|
loading: {
|
|
46
|
-
primary: "bg-button-primary-bg--
|
|
47
|
-
secondary: "bg-button-secondary-bg--
|
|
48
|
-
outline: "bg-button-
|
|
49
|
-
|
|
47
|
+
primary: "bg-button-primary-bg--loading border-button-primary-border--loading text-button-primary-text--loading pointer-events-none",
|
|
48
|
+
secondary: "bg-button-secondary-bg--loading border-button-secondary-border--loading text-button-secondary-text--loading pointer-events-none",
|
|
49
|
+
outline: "bg-button-secondary-bg--loading border-button-secondary-border--loading text-button-secondary-text--loading pointer-events-none",
|
|
50
|
+
destructive: "bg-button-destructive-bg--loading border-button-destructive-border--loading text-button-destructive-text--loading pointer-events-none",
|
|
51
|
+
ghost: "bg-transparent text-button-ghost-text--loading pointer-events-none",
|
|
50
52
|
unstyled: "bg-transparent opacity-50 pointer-events-none"
|
|
51
53
|
}
|
|
52
54
|
};
|
|
@@ -85,10 +87,7 @@ const Button = ({ asChild = false, children, className, dataTestId, disabled, en
|
|
|
85
87
|
"data-testid": "spectral-button-start-icon",
|
|
86
88
|
children: startIcon
|
|
87
89
|
}),
|
|
88
|
-
state === "loading" && /* @__PURE__ */ jsx(LoaderIcon, {
|
|
89
|
-
className: "ml-2 motion-safe:animate-spin",
|
|
90
|
-
size: 16
|
|
91
|
-
}),
|
|
90
|
+
state === "loading" && /* @__PURE__ */ jsx(LoaderIcon, { className: "ml-2 size-5!" }),
|
|
92
91
|
content,
|
|
93
92
|
endIcon && state !== "loading" && /* @__PURE__ */ jsx("span", {
|
|
94
93
|
className: cn("flex", variant !== "unstyled" && "pl-2"),
|
package/dist/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nconst buttonVariants = cva(\n `gap-2 rounded-
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react'\n\nconst buttonVariants = cva(\n `gap-2 rounded-md font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-[background-color,border-color,color,transform] duration-200 ease-out motion-reduce:transition-none disabled:active:scale-100 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n {\n variants: {\n variant: {\n primary: `border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover active:scale-[0.97] focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled`,\n secondary: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:border-button-secondary-border--hover hover:text-button-secondary-text--hover active:scale-[0.97] focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:text-button-secondary-text--disabled`,\n outline: `border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:border-button-secondary-border--hover hover:text-button-secondary-text--hover active:scale-[0.97] focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:text-button-secondary-text--disabled`,\n ghost: 'border-none bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover active:scale-[0.97] focus-visible:outline-button-outline-border disabled:text-button-ghost-text--disabled',\n unstyled: 'font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent active:scale-100 focus-visible:outline-button-outline-border disabled:opacity-50',\n destructive: 'border-button-destructive-border bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg--hover active:scale-[0.97] disabled:border-button-destructive-border--disabled disabled:bg-button-destructive-bg--disabled disabled:text-button-destructive-text--disabled focus-visible:outline-button-destructive-border',\n },\n size: {\n small: 'py-1.5 px-3 text-sm! w-fit',\n default: 'py-2 px-4 text-base! w-fit',\n fullWidth: 'py-2 px-4 text-base! w-full',\n },\n state: {\n default: '',\n error: 'bg-button-danger text-text-primary transition focus-visible:outline-danger-400',\n loading: 'pointer-events-none cursor-wait',\n },\n },\n defaultVariants: {\n variant: 'primary',\n state: 'default',\n size: 'default',\n },\n },\n)\n\nexport interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {\n dataTestId?: string\n disabled?: boolean\n endIcon?: ReactNode\n label?: string\n onClick?: (event: MouseEvent<HTMLElement>) => void\n size?: 'small' | 'default' | 'fullWidth'\n startIcon?: ReactNode\n state?: 'default' | 'error' | 'loading'\n type?: 'button' | 'submit' | 'reset'\n variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'unstyled'\n}\n\nexport const Button = ({\n asChild = false,\n children,\n className,\n dataTestId,\n disabled,\n endIcon,\n id,\n label,\n onClick,\n ref,\n size,\n startIcon,\n state,\n type = 'button',\n variant = 'primary',\n ...props\n}: ButtonProps & {\n ref?: Ref<HTMLButtonElement>\n}) => {\n const stateStyles = {\n error: {\n primary: 'border-button-destructive-border bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg--hover hover:text-button-destructive-text--hover focus-visible:outline-button-destructive-border',\n secondary: 'bg-transparent border-button-destructive-border text-button-destructive-text hover:border-button-destructive-border--hover hover:text-button-destructive-text--hover hover:bg-button-destructive-bg--hover focus-visible:outline-button-destructive-border',\n outline: 'bg-transparent border-button-destructive-border text-button-destructive-text hover:border-button-destructive-border--hover hover:text-button-destructive-text--hover hover:bg-button-destructive-bg--hover focus-visible:outline-button-destructive-border',\n ghost: 'bg-transparent text-button-destructive-text hover:text-button-destructive-text--hover hover:bg-button-destructive-bg--hover',\n unstyled: 'bg-transparent text-button-destructive-text',\n },\n loading: {\n primary: 'bg-button-primary-bg--loading border-button-primary-border--loading text-button-primary-text--loading pointer-events-none',\n secondary: 'bg-button-secondary-bg--loading border-button-secondary-border--loading text-button-secondary-text--loading pointer-events-none',\n outline: 'bg-button-secondary-bg--loading border-button-secondary-border--loading text-button-secondary-text--loading pointer-events-none',\n destructive: 'bg-button-destructive-bg--loading border-button-destructive-border--loading text-button-destructive-text--loading pointer-events-none',\n ghost: 'bg-transparent text-button-ghost-text--loading pointer-events-none',\n unstyled: 'bg-transparent opacity-50 pointer-events-none',\n },\n }\n\n const classes = cn(buttonVariants({ variant, state, size }), state === 'error' && stateStyles.error[variant as keyof typeof stateStyles.error], state === 'loading' && stateStyles.loading[variant as keyof typeof stateStyles.loading], className)\n\n const canUseAsChild = asChild && isValidElement(children) && Children.count(children) === 1\n const content = canUseAsChild ? undefined : (children ?? label)\n\n if (!canUseAsChild && !content) {\n throw new Error('Button requires either `label` or `children`')\n }\n\n const handleDisabledClickCapture = (event: MouseEvent<HTMLElement>) => {\n if (!disabled) return\n event.preventDefault()\n event.stopPropagation()\n }\n\n const Comp = canUseAsChild ? Slot : 'button'\n\n return (\n <Comp\n aria-disabled={disabled}\n className={cn(classes, canUseAsChild && 'no-underline! before:content-none after:content-none', canUseAsChild && disabled && 'pointer-events-none opacity-50')}\n data-as-child={canUseAsChild ? 'true' : undefined}\n data-state={state}\n data-testid={dataTestId ?? `spectral-button-${variant}`}\n data-variant={variant}\n disabled={canUseAsChild ? undefined : disabled}\n id={id}\n onClick={onClick}\n onClickCapture={canUseAsChild ? handleDisabledClickCapture : undefined}\n ref={ref}\n tabIndex={canUseAsChild && disabled ? -1 : undefined}\n type={canUseAsChild ? undefined : type}\n {...props}\n >\n {canUseAsChild ? (\n children\n ) : (\n <>\n {startIcon && (\n <span className={cn('flex', variant !== 'unstyled' && 'pr-1')} aria-hidden data-testid='spectral-button-start-icon'>\n {startIcon}\n </span>\n )}\n {state === 'loading' && <LoaderIcon className='ml-2 size-5!' />}\n {content}\n {endIcon && state !== 'loading' && (\n <span className={cn('flex', variant !== 'unstyled' && 'pl-2')} aria-hidden data-testid='spectral-button-end-icon'>\n {endIcon}\n </span>\n )}\n </>\n )}\n </Comp>\n )\n}\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;;;AAMA,MAAM,iBAAiB,IACrB,2aACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACV,aAAa;GACd;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,WAAW;GACZ;EACD,OAAO;GACL,SAAS;GACT,OAAO;GACP,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;EACP;CACF,CACF;AAeD,MAAa,UAAU,EACrB,UAAU,OACV,UACA,WACA,YACA,UACA,SACA,IACA,OACA,SACA,KACA,MACA,WACA,OACA,OAAO,UACP,UAAU,WACV,GAAG,YAGC;CACJ,MAAM,cAAc;EAClB,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;GACb,OAAO;GACP,UAAU;GACX;EACF;CAED,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;EAAO;EAAM,CAAC,EAAE,UAAU,WAAW,YAAY,MAAM,UAA4C,UAAU,aAAa,YAAY,QAAQ,UAA8C,UAAU;CAEnP,MAAM,gBAAgB,WAAW,eAAe,SAAS,IAAI,SAAS,MAAM,SAAS,KAAK;CAC1F,MAAM,UAAU,gBAAgB,SAAa,YAAY;AAEzD,KAAI,CAAC,iBAAiB,CAAC,QACrB,OAAM,IAAI,MAAM,+CAA+C;CAGjE,MAAM,8BAA8B,UAAmC;AACrE,MAAI,CAAC,SAAU;AACf,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;AAKzB,QACE,oBAHW,gBAAgB,OAAO,UAGlC;EACE,iBAAe;EACf,WAAW,GAAG,SAAS,iBAAiB,wDAAwD,iBAAiB,YAAY,iCAAiC;EAC9J,iBAAe,gBAAgB,SAAS;EACxC,cAAY;EACZ,eAAa,cAAc,mBAAmB;EAC9C,gBAAc;EACd,UAAU,gBAAgB,SAAY;EAClC;EACK;EACT,gBAAgB,gBAAgB,6BAA6B;EACxD;EACL,UAAU,iBAAiB,WAAW,KAAK;EAC3C,MAAM,gBAAgB,SAAY;EAClC,GAAI;YAEH,gBACC,WAEA;GACG,aACC,oBAAC,QAAD;IAAM,WAAW,GAAG,QAAQ,YAAY,cAAc,OAAO;IAAE;IAAY,eAAY;cACpF;IACI;GAER,UAAU,aAAa,oBAAC,YAAD,EAAY,WAAU,gBAAiB;GAC9D;GACA,WAAW,UAAU,aACpB,oBAAC,QAAD;IAAM,WAAW,GAAG,QAAQ,YAAY,cAAc,OAAO;IAAE;IAAY,eAAY;cACpF;IACI;GAER;EAEA;;AAGX,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoaderIcon.d.ts","names":[],"sources":["../../src/components/Icons/LoaderIcon.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"LoaderIcon.d.ts","names":[],"sources":["../../src/components/Icons/LoaderIcon.tsx"],"mappings":";;;;;cA8Ba,UAAA;EAAU,GAAA;EAAA,SAAA;EAAA,KAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GA1ByD,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA"}
|
package/dist/Icons/LoaderIcon.js
CHANGED
|
@@ -46,7 +46,7 @@ const IconLoader = ({ ref, className, title, description, size = 24, ...rest })
|
|
|
46
46
|
attributeName: "transform",
|
|
47
47
|
type: "rotate",
|
|
48
48
|
repeatCount: "indefinite",
|
|
49
|
-
dur: "
|
|
49
|
+
dur: "1.2s"
|
|
50
50
|
}),
|
|
51
51
|
/* @__PURE__ */ jsx("path", {
|
|
52
52
|
stroke: `url(#${svgId}-spinner-secondHalf)`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoaderIcon.js","names":[],"sources":["../../src/components/Icons/LoaderIcon.tsx"],"sourcesContent":["import { useContext } from 'react'\nimport { IconBase, SvgIdContext } from './IconBase'\nimport { type IconProps } from './iconTypes'\n\nconst IconLoader = ({ ref, className, title, description, size = 24, ...rest }: IconProps) => {\n const svgId = useContext(SvgIdContext)\n\n return (\n <IconBase size={size} className={className} title={title} description={description} ref={ref} color='oklch(92.53% 0.1976 123.38)' viewBox='0 0 240 240' {...rest}>\n <defs>\n <linearGradient id={`${svgId}-spinner-secondHalf`}>\n <stop offset='0%' stopOpacity='0' stopColor='oklch(92.53% 0.1976 123.38)' />\n <stop offset='100%' stopOpacity='0.5' stopColor='oklch(95.78% 0.1105 120.84)' />\n </linearGradient>\n <linearGradient id={`${svgId}-spinner-firstHalf`}>\n <stop offset='0%' stopOpacity='1' stopColor='oklch(92.53% 0.1976 123.38)' />\n <stop offset='100%' stopOpacity='0.5' stopColor='oklch(95.78% 0.1105 120.84)' />\n </linearGradient>\n </defs>\n\n <g strokeWidth='24'>\n <animateTransform from='0 120 120' to='360 120 120' attributeName='transform' type='rotate' repeatCount='indefinite' dur='
|
|
1
|
+
{"version":3,"file":"LoaderIcon.js","names":[],"sources":["../../src/components/Icons/LoaderIcon.tsx"],"sourcesContent":["import { useContext } from 'react'\nimport { IconBase, SvgIdContext } from './IconBase'\nimport { type IconProps } from './iconTypes'\n\nconst IconLoader = ({ ref, className, title, description, size = 24, ...rest }: IconProps) => {\n const svgId = useContext(SvgIdContext)\n\n return (\n <IconBase size={size} className={className} title={title} description={description} ref={ref} color='oklch(92.53% 0.1976 123.38)' viewBox='0 0 240 240' {...rest}>\n <defs>\n <linearGradient id={`${svgId}-spinner-secondHalf`}>\n <stop offset='0%' stopOpacity='0' stopColor='oklch(92.53% 0.1976 123.38)' />\n <stop offset='100%' stopOpacity='0.5' stopColor='oklch(95.78% 0.1105 120.84)' />\n </linearGradient>\n <linearGradient id={`${svgId}-spinner-firstHalf`}>\n <stop offset='0%' stopOpacity='1' stopColor='oklch(92.53% 0.1976 123.38)' />\n <stop offset='100%' stopOpacity='0.5' stopColor='oklch(95.78% 0.1105 120.84)' />\n </linearGradient>\n </defs>\n\n <g strokeWidth='24'>\n <animateTransform from='0 120 120' to='360 120 120' attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.2s' />\n <path stroke={`url(#${svgId}-spinner-secondHalf)`} d='M 40 120 A 80 80 0 0 1 200 120' />\n <path stroke={`url(#${svgId}-spinner-firstHalf)`} d='M 200 120 A 80 80 0 0 1 40 120' />\n <path stroke='currentColor' strokeLinecap='round' d='M 40 120 A 100 100 0 0 1 40 118' />\n </g>\n </IconBase>\n )\n}\n\nexport const LoaderIcon = Object.assign(IconLoader, { displayName: 'LoaderIcon' })\n"],"mappings":";;;;;;AAIA,MAAM,cAAc,EAAE,KAAK,WAAW,OAAO,aAAa,OAAO,IAAI,GAAG,WAAsB;CAC5F,MAAM,QAAQ,WAAW,aAAa;AAEtC,QACE,qBAAC,UAAD;EAAgB;EAAiB;EAAkB;EAAoB;EAAkB;EAAK,OAAM;EAA8B,SAAQ;EAAc,GAAI;YAA5J,CACE,qBAAC,QAAD,aACE,qBAAC,kBAAD;GAAgB,IAAI,GAAG,MAAM;aAA7B,CACE,oBAAC,QAAD;IAAM,QAAO;IAAK,aAAY;IAAI,WAAU;IAAgC,GAC5E,oBAAC,QAAD;IAAM,QAAO;IAAO,aAAY;IAAM,WAAU;IAAgC,EACjE;MACjB,qBAAC,kBAAD;GAAgB,IAAI,GAAG,MAAM;aAA7B,CACE,oBAAC,QAAD;IAAM,QAAO;IAAK,aAAY;IAAI,WAAU;IAAgC,GAC5E,oBAAC,QAAD;IAAM,QAAO;IAAO,aAAY;IAAM,WAAU;IAAgC,EACjE;KACZ,KAEP,qBAAC,KAAD;GAAG,aAAY;aAAf;IACE,oBAAC,oBAAD;KAAkB,MAAK;KAAY,IAAG;KAAc,eAAc;KAAY,MAAK;KAAS,aAAY;KAAa,KAAI;KAAS;IAClI,oBAAC,QAAD;KAAM,QAAQ,QAAQ,MAAM;KAAuB,GAAE;KAAmC;IACxF,oBAAC,QAAD;KAAM,QAAQ,QAAQ,MAAM;KAAsB,GAAE;KAAmC;IACvF,oBAAC,QAAD;KAAM,QAAO;KAAe,eAAc;KAAQ,GAAE;KAAoC;IACtF;KACK;;;AAIf,MAAa,aAAa,OAAO,OAAO,YAAY,EAAE,aAAa,cAAc,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as _$react from "react";
|
|
3
|
+
import { ReactNode, Ref } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/RadialMenu/RadialMenu.d.ts
|
|
6
|
+
interface RadialMenuItem {
|
|
7
|
+
/** Optional longer description shown in a tooltip on hover, since labels are kept short. */
|
|
8
|
+
description?: string;
|
|
9
|
+
destructive?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
icon: ReactNode;
|
|
12
|
+
id: string;
|
|
13
|
+
items?: RadialMenuItem[];
|
|
14
|
+
label: string;
|
|
15
|
+
onSelect?: () => void;
|
|
16
|
+
}
|
|
17
|
+
interface RadialMenuProps {
|
|
18
|
+
ariaLabel: string;
|
|
19
|
+
backLabel?: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
dataTestId?: string;
|
|
22
|
+
items: RadialMenuItem[];
|
|
23
|
+
onClose: () => void;
|
|
24
|
+
position: {
|
|
25
|
+
x: number;
|
|
26
|
+
y: number;
|
|
27
|
+
} | null;
|
|
28
|
+
}
|
|
29
|
+
declare function RadialMenu({
|
|
30
|
+
ariaLabel,
|
|
31
|
+
backLabel,
|
|
32
|
+
className,
|
|
33
|
+
dataTestId,
|
|
34
|
+
items,
|
|
35
|
+
onClose,
|
|
36
|
+
position,
|
|
37
|
+
ref
|
|
38
|
+
}: RadialMenuProps & {
|
|
39
|
+
ref?: Ref<HTMLDivElement>;
|
|
40
|
+
}): _$react.ReactPortal | null;
|
|
41
|
+
declare namespace RadialMenu {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
44
|
+
//#endregion
|
|
45
|
+
export { RadialMenu, RadialMenuItem, RadialMenuProps };
|
|
46
|
+
//# sourceMappingURL=RadialMenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadialMenu.d.ts","names":[],"sources":["../src/components/RadialMenu/RadialMenu.tsx"],"mappings":";;;;;UAMiB,cAAA;;EAEf,WAAA;EACA,WAAA;EACA,QAAA;EACA,IAAA,EAAM,SAAA;EACN,EAAA;EACA,KAAA,GAAQ,cAAA;EACR,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,eAAA;EACf,SAAA;EACA,SAAA;EACA,SAAA;EACA,UAAA;EACA,KAAA,EAAO,cAAA;EACP,OAAA;EACA,QAAA;IAAY,CAAA;IAAW,CAAA;EAAA;AAAA;AAAA;EA2CI,SAAA;EAAW,SAAA;EAAoB,SAAA;EAAW,UAAA;EAAY,KAAA;EAAO,OAAA;EAAS,QAAA;EAAU;AAAA,GAAO,eAAA;EAAoB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IAAD,OAAA,CAAkB,WAAA;AAAA"}
|