@spear-ai/spectral 1.17.3 → 1.17.5
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 +12 -14
- package/dist/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog.js +13 -17
- package/dist/AlertDialog.js.map +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/Drawer.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/AlertDialog.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { ButtonProps } from "./Button.js";
|
|
3
2
|
import { ComponentProps, ReactElement, ReactNode } from "react";
|
|
4
3
|
import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
|
|
5
4
|
|
|
@@ -10,17 +9,23 @@ interface AlertDialogProps<Payload = unknown> extends AlertDialog$1.Root.Props<P
|
|
|
10
9
|
handle?: AlertDialog$1.Root.Props<Payload>['handle'];
|
|
11
10
|
onOpenChangeComplete?: AlertDialog$1.Root.Props<Payload>['onOpenChangeComplete'];
|
|
12
11
|
triggerId?: AlertDialog$1.Root.Props<Payload>['triggerId'];
|
|
13
|
-
cancelLabel?: string;
|
|
14
|
-
continueLabel?: string;
|
|
15
12
|
}
|
|
16
13
|
interface AlertDialogTriggerProps extends AlertDialog$1.Trigger.Props {}
|
|
17
14
|
interface AlertDialogPopupProps extends AlertDialog$1.Popup.Props {
|
|
18
15
|
portalProps?: AlertDialog$1.Portal.Props;
|
|
19
16
|
}
|
|
20
17
|
type AlertDialogVariant = 'default' | 'warning' | 'success' | 'custom';
|
|
18
|
+
interface AlertDialogRootComponent {
|
|
19
|
+
<Payload = unknown>(props: AlertDialog$1.Root.Props<Payload>): ReactElement;
|
|
20
|
+
createHandle: typeof AlertDialog$1.createHandle;
|
|
21
|
+
displayName?: string;
|
|
22
|
+
}
|
|
23
|
+
declare const AlertDialog: AlertDialogRootComponent;
|
|
21
24
|
declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
|
|
22
|
-
declare
|
|
23
|
-
declare
|
|
25
|
+
declare function AlertDialogPortal(props: AlertDialog$1.Portal.Props): ReactElement;
|
|
26
|
+
declare namespace AlertDialogPortal {
|
|
27
|
+
var displayName: string;
|
|
28
|
+
}
|
|
24
29
|
declare const AlertDialogTrigger: (props: AlertDialogTriggerProps) => ReactElement;
|
|
25
30
|
declare const AlertDialogBackdrop: ({
|
|
26
31
|
className,
|
|
@@ -47,18 +52,11 @@ declare const AlertDialogHeader: ({
|
|
|
47
52
|
iconColor?: string;
|
|
48
53
|
variant?: AlertDialogVariant;
|
|
49
54
|
}) => ReactElement;
|
|
50
|
-
type AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'children'> & Pick<AlertDialogProps, 'cancelLabel' | 'continueLabel'> & {
|
|
51
|
-
primaryButtonVariant?: ButtonProps['variant'];
|
|
52
|
-
variant?: AlertDialogVariant;
|
|
53
|
-
};
|
|
54
55
|
declare const AlertDialogFooter: ({
|
|
55
|
-
cancelLabel,
|
|
56
56
|
className,
|
|
57
|
-
|
|
58
|
-
primaryButtonVariant,
|
|
59
|
-
variant,
|
|
57
|
+
children,
|
|
60
58
|
...props
|
|
61
|
-
}:
|
|
59
|
+
}: ComponentProps<'div'>) => ReactElement;
|
|
62
60
|
declare const AlertDialogTitle: ({
|
|
63
61
|
className,
|
|
64
62
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","names":[],"sources":["../src/components/AlertDialog/AlertDialog.tsx"],"mappings":"
|
|
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;AAAA;AAAA,UAG7B,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,KAGhC,kBAAA;AAAA,UAEF,wBAAA;EAAA,oBACY,KAAA,EAAO,aAAA,CAAqB,IAAA,CAAK,KAAA,CAAM,OAAA,IAAW,YAAA;EACtE,YAAA,SAAqB,aAAA,CAAqB,YAAA;EAC1C,WAAA;AAAA;AAAA,cASW,WAAA,EAEP,wBAAA;AAAA,cAGO,uBAAA,SAAgC,aAAA,CAAqB,YAAA;AAAA,mCAIhE,KAAA,EAAO,aAAA,CAAqB,MAAA,CAAO,KAAA,GAClC,YAAA;AAAA;;;cAKU,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,IAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAO3B,cAAA;EACD,IAAA,GAAO,SAAA;EACP,SAAA;EACA,OAAA,GAAU,kBAAA;AAAA,MACR,YAAA;AAAA,cAuDS,iBAAA;EAAiB,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAI3B,cAAA,YAAwB,YAAA;AAAA,cAYd,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"}
|
package/dist/AlertDialog.js
CHANGED
|
@@ -2,15 +2,21 @@
|
|
|
2
2
|
import { CheckCircleIcon } from "./Icons/CheckCircleIcon.js";
|
|
3
3
|
import { WarningIcon } from "./Icons/WarningIcon.js";
|
|
4
4
|
import { cn } from "./utils/twUtils.js";
|
|
5
|
-
import { Button } from "./Button.js";
|
|
6
5
|
import { Children } from "react";
|
|
7
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
7
|
import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
|
|
9
8
|
|
|
10
9
|
//#region src/components/AlertDialog/AlertDialog.tsx
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
const AlertDialogRoot = (props) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Root, { ...props });
|
|
12
|
+
};
|
|
13
|
+
const AlertDialog = Object.assign(AlertDialogRoot, { createHandle: AlertDialog$1.createHandle });
|
|
14
|
+
AlertDialog.displayName = "AlertDialog";
|
|
15
|
+
const AlertDialogCreateHandle = AlertDialog.createHandle;
|
|
16
|
+
const AlertDialogPortal = (props) => {
|
|
17
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { ...props });
|
|
18
|
+
};
|
|
19
|
+
AlertDialogPortal.displayName = "AlertDialogPortal";
|
|
14
20
|
const AlertDialogTrigger = (props) => {
|
|
15
21
|
return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
|
|
16
22
|
"data-slot": "alert-dialog-trigger",
|
|
@@ -81,22 +87,12 @@ const AlertDialogHeader = ({ className, children, icon, iconColor, variant = "de
|
|
|
81
87
|
}), descriptionChildren.length > 0 && descriptionChildren]
|
|
82
88
|
});
|
|
83
89
|
};
|
|
84
|
-
const AlertDialogFooter = ({
|
|
85
|
-
|
|
86
|
-
const continueVariant = variant === "default" ? "destructive" : variant === "warning" || variant === "success" ? "primary" : primaryButtonVariant;
|
|
87
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
90
|
+
const AlertDialogFooter = ({ className, children, ...props }) => {
|
|
91
|
+
return /* @__PURE__ */ jsx("div", {
|
|
88
92
|
className: cn("flex gap-2 px-6 pb-6 pt-2 flex-row justify-end rounded-b-[calc(var(--radius-2xl)-1px)]", className),
|
|
89
93
|
"data-slot": "alert-dialog-footer",
|
|
90
94
|
...props,
|
|
91
|
-
children
|
|
92
|
-
asChild: true,
|
|
93
|
-
variant: cancelVariant,
|
|
94
|
-
children: /* @__PURE__ */ jsx(AlertDialogClose, { children: cancelLabel })
|
|
95
|
-
}), /* @__PURE__ */ jsx(Button, {
|
|
96
|
-
asChild: true,
|
|
97
|
-
variant: continueVariant,
|
|
98
|
-
children: /* @__PURE__ */ jsx(AlertDialogClose, { children: continueLabel })
|
|
99
|
-
})]
|
|
95
|
+
children
|
|
100
96
|
});
|
|
101
97
|
};
|
|
102
98
|
const AlertDialogTitle = ({ className, ...props }) => {
|
package/dist/AlertDialog.js.map
CHANGED
|
@@ -1 +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 {
|
|
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 { CheckCircleIcon } from '@components/Icons/CheckCircleIcon'\nimport { WarningIcon } from '@components/Icons/WarningIcon'\nimport { cn } from '@utils/twUtils'\nimport { Children, type ComponentProps, type CSSProperties, type ReactElement, type ReactNode } 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}\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 type AlertDialogVariant = 'default' | 'warning' | 'success' | 'custom'\n\ninterface AlertDialogRootComponent {\n <Payload = unknown>(props: AlertDialogPrimitive.Root.Props<Payload>): ReactElement\n createHandle: typeof AlertDialogPrimitive.createHandle\n displayName?: string\n}\n\nconst AlertDialogRoot = <Payload = unknown,>(\n props: AlertDialogPrimitive.Root.Props<Payload>,\n): ReactElement => {\n return <AlertDialogPrimitive.Root {...props} />\n}\n\nexport const AlertDialog = Object.assign(AlertDialogRoot, {\n createHandle: AlertDialogPrimitive.createHandle,\n}) as AlertDialogRootComponent\nAlertDialog.displayName = 'AlertDialog'\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n AlertDialog.createHandle\n\nexport const AlertDialogPortal = (\n props: AlertDialogPrimitive.Portal.Props,\n): ReactElement => {\n return <AlertDialogPrimitive.Portal {...props} />\n}\nAlertDialogPortal.displayName = 'AlertDialogPortal'\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 icon,\n iconColor,\n variant = 'default',\n ...props\n}: ComponentProps<'div'> & {\n icon?: ReactNode\n iconColor?: string\n variant?: AlertDialogVariant\n}): ReactElement => {\n const customIconColor = iconColor ?? 'var(--color-danger-400)'\n const builtInIconClasses = {\n default: 'bg-danger-400/20 text-danger-400',\n warning: 'bg-warning-400/20 text-warning-400',\n success: 'bg-success-400/20 text-success-400',\n } as const\n const builtInIconColorClass = {\n default: 'text-danger-400',\n warning: 'text-warning-400',\n success: 'text-success-400',\n } as const\n\n const headerIcon = variant === 'custom'\n ? (icon ?? <WarningIcon size={24} />)\n : variant === 'success'\n ? <CheckCircleIcon className={builtInIconColorClass[variant]} size={24} />\n : <WarningIcon className={builtInIconColorClass[variant]} size={24} />\n\n const customIconStyle: CSSProperties | undefined = variant === 'custom'\n ? {\n color: customIconColor,\n backgroundColor: `oklch(from ${customIconColor} l c h / 0.2)`,\n }\n : undefined\n const [titleChild, ...descriptionChildren] = Children.toArray(children)\n\n return (\n <div\n className={cn(\n 'flex flex-col gap-2 p-6',\n className,\n )}\n data-slot='alert-dialog-header'\n {...props}\n >\n <div className='flex items-center gap-3'>\n <div\n aria-hidden='true'\n className={cn(\n 'rounded-full flex items-center justify-center size-10 shrink-0 [&>svg]:size-6!',\n variant !== 'custom' && builtInIconClasses[variant],\n )}\n data-slot='alert-dialog-header-icon'\n style={customIconStyle}\n >\n {headerIcon}\n </div>\n {titleChild}\n </div>\n {descriptionChildren.length > 0 && descriptionChildren}\n </div>\n )\n}\n\nexport const AlertDialogFooter = ({\n className,\n children,\n ...props\n}: ComponentProps<'div'>): ReactElement => {\n return (\n <div\n className={cn('flex gap-2 px-6 pb-6 pt-2 flex-row justify-end rounded-b-[calc(var(--radius-2xl)-1px)]', className)}\n data-slot='alert-dialog-footer'\n {...props}\n >\n {children}\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-tight',\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-1', 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":";;;;;;;;;AA6BA,MAAM,mBACJ,UACiB;AACjB,QAAO,oBAACA,cAAqB,MAAtB,EAA2B,GAAI,OAAS;;AAGjD,MAAa,cAAc,OAAO,OAAO,iBAAiB,EACxD,cAAcA,cAAqB,cACpC,CAAC;AACF,YAAY,cAAc;AAE1B,MAAa,0BACX,YAAY;AAEd,MAAa,qBACX,UACiB;AACjB,QAAO,oBAACA,cAAqB,QAAtB,EAA6B,GAAI,OAAS;;AAEnD,kBAAkB,cAAc;AAEhC,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,MACA,WACA,UAAU,WACV,GAAG,YAKe;CAClB,MAAM,kBAAkB,aAAa;CACrC,MAAM,qBAAqB;EACzB,SAAS;EACT,SAAS;EACT,SAAS;EACV;CACD,MAAM,wBAAwB;EAC5B,SAAS;EACT,SAAS;EACT,SAAS;EACV;CAED,MAAM,aAAa,YAAY,WAC1B,QAAQ,oBAAC,aAAD,EAAa,MAAM,IAAM,IAClC,YAAY,YACV,oBAAC,iBAAD;EAAiB,WAAW,sBAAsB;EAAU,MAAM;EAAM,IACxE,oBAAC,aAAD;EAAa,WAAW,sBAAsB;EAAU,MAAM;EAAM;CAE1E,MAAM,kBAA6C,YAAY,WAC3D;EACA,OAAO;EACP,iBAAiB,cAAc,gBAAgB;EAChD,GACC;CACJ,MAAM,CAAC,YAAY,GAAG,uBAAuB,SAAS,QAAQ,SAAS;AAEvE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,2BACA,UACD;EACD,aAAU;EACV,GAAI;YANN,CAQE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,GACT,kFACA,YAAY,YAAY,mBAAmB,SAC5C;IACD,aAAU;IACV,OAAO;cAEN;IACG,GACL,WACG;MACL,oBAAoB,SAAS,KAAK,oBAC/B;;;AAIV,MAAa,qBAAqB,EAChC,WACA,UACA,GAAG,YACsC;AACzC,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,0FAA0F,UAAU;EAClH,aAAU;EACV,GAAI;EAEH;EACG;;AAIV,MAAa,oBAAoB,EAC/B,WACA,GAAG,YACiD;AACpD,QACE,oBAACA,cAAqB,OAAtB;EACE,WAAW,GACT,kDACA,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/Drawer.js
CHANGED
|
@@ -60,7 +60,7 @@ const Drawer = ({ children, className, defaultOpen = false, description, directi
|
|
|
60
60
|
}), /* @__PURE__ */ jsx(Drawer$1.Content, {
|
|
61
61
|
asChild: true,
|
|
62
62
|
"aria-label": !hasTitle && !hasDescription ? "Drawer" : void 0,
|
|
63
|
-
className: cn("z-
|
|
63
|
+
className: cn("z-50 flex flex-col overscroll-contain bg-drawer-bg focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent **:box-border", directionClassName, className),
|
|
64
64
|
style,
|
|
65
65
|
"data-testid": "spectral-drawer-content",
|
|
66
66
|
children: /* @__PURE__ */ jsxs("div", {
|
package/dist/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","names":["DrawerBase"],"sources":["../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { SpectralProvider } from '@components/SpectralProvider/SpectralProvider'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, isValidElement, type ReactNode } from 'react'\nimport { Drawer as DrawerBase } from 'vaul'\n\nexport interface DrawerProps {\n className?: string\n children?: ReactNode\n defaultOpen?: boolean\n description?: ReactNode\n direction?: 'left' | 'right' | 'top' | 'bottom'\n dismissible?: boolean\n dragBehavior?: 'surface' | 'handle' | 'none'\n modal?: boolean\n onOpenChange?: (open: boolean) => void\n open?: boolean\n size?: string\n title?: ReactNode\n trigger: ReactNode\n}\n\nconst hasRenderableText = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst hasRenderableContent = (value: ReactNode) => {\n if (hasRenderableText(value)) {\n return true\n }\n\n if (value === null || value === undefined || typeof value === 'boolean' || typeof value === 'string') {\n return false\n }\n\n return true\n}\n\nconst isElementAndNotFragment = (element: ReactNode) => isValidElement(element) && element.type !== Fragment\n\nexport const Drawer = ({\n children,\n className,\n defaultOpen = false,\n description, direction = 'right',\n dismissible = true,\n dragBehavior = 'surface',\n modal = true,\n onOpenChange,\n open,\n size = '380px',\n title,\n trigger,\n}: DrawerProps) => {\n const baseStyles = 'font-sans! fixed'\n const hasTitle = hasRenderableContent(title)\n const hasDescription = hasRenderableContent(description)\n const isTextTitle = hasRenderableText(title)\n const isTextDescription = hasRenderableText(description)\n const isCustomTitleElement = isElementAndNotFragment(title)\n const isCustomDescriptionElement = isElementAndNotFragment(description)\n const handleOnly = dragBehavior === 'handle' || dragBehavior === 'none'\n const shouldRenderHandle = dragBehavior === 'handle'\n\n const directionStyles = {\n left: {\n className: cn(baseStyles, 'top-0 bottom-0 left-0 shadow-[20px_0_20px_var(--color-black-40)]'),\n style: { width: size },\n },\n right: {\n className: cn(baseStyles, 'top-0 bottom-0 right-0 shadow-[-20px_0_20px_var(--color-black-40)]'),\n style: { width: size },\n },\n top: {\n className: cn(baseStyles, 'top-0 left-0 right-0 shadow-[0_20px_20px_var(--color-black-40)]'),\n style: { height: size },\n },\n bottom: {\n className: cn(baseStyles, 'bottom-0 left-0 right-0 shadow-[0_-20px_20px_var(--color-black-40)]'),\n style: { height: size },\n },\n }\n\n const { className: directionClassName, style } = directionStyles[direction]\n\n return (\n <SpectralProvider>\n <DrawerBase.Root data-testid='spectral-drawer' defaultOpen={defaultOpen} direction={direction} dismissible={dismissible} handleOnly={handleOnly} modal={modal} onOpenChange={onOpenChange} open={open}>\n <DrawerBase.Trigger asChild data-testid='spectral-drawer-trigger'>\n {trigger}\n </DrawerBase.Trigger>\n <DrawerBase.Portal>\n <DrawerBase.Overlay className='inset-0 fixed bg-transparent' data-testid='spectral-drawer-overlay' />\n <DrawerBase.Content\n asChild\n aria-label={!hasTitle && !hasDescription ? 'Drawer' : undefined}\n className={cn(\n 'z-
|
|
1
|
+
{"version":3,"file":"Drawer.js","names":["DrawerBase"],"sources":["../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { SpectralProvider } from '@components/SpectralProvider/SpectralProvider'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, isValidElement, type ReactNode } from 'react'\nimport { Drawer as DrawerBase } from 'vaul'\n\nexport interface DrawerProps {\n className?: string\n children?: ReactNode\n defaultOpen?: boolean\n description?: ReactNode\n direction?: 'left' | 'right' | 'top' | 'bottom'\n dismissible?: boolean\n dragBehavior?: 'surface' | 'handle' | 'none'\n modal?: boolean\n onOpenChange?: (open: boolean) => void\n open?: boolean\n size?: string\n title?: ReactNode\n trigger: ReactNode\n}\n\nconst hasRenderableText = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst hasRenderableContent = (value: ReactNode) => {\n if (hasRenderableText(value)) {\n return true\n }\n\n if (value === null || value === undefined || typeof value === 'boolean' || typeof value === 'string') {\n return false\n }\n\n return true\n}\n\nconst isElementAndNotFragment = (element: ReactNode) => isValidElement(element) && element.type !== Fragment\n\nexport const Drawer = ({\n children,\n className,\n defaultOpen = false,\n description, direction = 'right',\n dismissible = true,\n dragBehavior = 'surface',\n modal = true,\n onOpenChange,\n open,\n size = '380px',\n title,\n trigger,\n}: DrawerProps) => {\n const baseStyles = 'font-sans! fixed'\n const hasTitle = hasRenderableContent(title)\n const hasDescription = hasRenderableContent(description)\n const isTextTitle = hasRenderableText(title)\n const isTextDescription = hasRenderableText(description)\n const isCustomTitleElement = isElementAndNotFragment(title)\n const isCustomDescriptionElement = isElementAndNotFragment(description)\n const handleOnly = dragBehavior === 'handle' || dragBehavior === 'none'\n const shouldRenderHandle = dragBehavior === 'handle'\n\n const directionStyles = {\n left: {\n className: cn(baseStyles, 'top-0 bottom-0 left-0 shadow-[20px_0_20px_var(--color-black-40)]'),\n style: { width: size },\n },\n right: {\n className: cn(baseStyles, 'top-0 bottom-0 right-0 shadow-[-20px_0_20px_var(--color-black-40)]'),\n style: { width: size },\n },\n top: {\n className: cn(baseStyles, 'top-0 left-0 right-0 shadow-[0_20px_20px_var(--color-black-40)]'),\n style: { height: size },\n },\n bottom: {\n className: cn(baseStyles, 'bottom-0 left-0 right-0 shadow-[0_-20px_20px_var(--color-black-40)]'),\n style: { height: size },\n },\n }\n\n const { className: directionClassName, style } = directionStyles[direction]\n\n return (\n <SpectralProvider>\n <DrawerBase.Root data-testid='spectral-drawer' defaultOpen={defaultOpen} direction={direction} dismissible={dismissible} handleOnly={handleOnly} modal={modal} onOpenChange={onOpenChange} open={open}>\n <DrawerBase.Trigger asChild data-testid='spectral-drawer-trigger'>\n {trigger}\n </DrawerBase.Trigger>\n <DrawerBase.Portal>\n <DrawerBase.Overlay className='inset-0 fixed bg-transparent' data-testid='spectral-drawer-overlay' />\n <DrawerBase.Content\n asChild\n aria-label={!hasTitle && !hasDescription ? 'Drawer' : undefined}\n className={cn(\n 'z-50 flex flex-col overscroll-contain bg-drawer-bg focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent **:box-border',\n directionClassName,\n className,\n )}\n style={style}\n data-testid='spectral-drawer-content'\n >\n <div className='flex h-full min-h-0 flex-col'>\n <DrawerBase.Close />\n {shouldRenderHandle && <DrawerBase.Handle data-testid='spectral-drawer-handle' />}\n {hasTitle && (\n <>\n {isTextTitle && (\n <DrawerBase.Title className='px-3 pt-4 text-xl font-semibold text-text-primary' data-testid='spectral-drawer-title'>\n {title}\n </DrawerBase.Title>\n )}\n {!isTextTitle && isCustomTitleElement && (\n <DrawerBase.Title asChild data-testid='spectral-drawer-title'>\n {title}\n </DrawerBase.Title>\n )}\n {!isTextTitle && !isCustomTitleElement && (\n <DrawerBase.Title data-testid='spectral-drawer-title'>\n {title}\n </DrawerBase.Title>\n )}\n </>\n )}\n {hasDescription && (\n <>\n {isTextDescription && (\n <DrawerBase.Description className='mb-2 px-3 text-xs! text-text-secondary! uppercase' data-testid='spectral-drawer-description'>\n {description}\n </DrawerBase.Description>\n )}\n {!isTextDescription && isCustomDescriptionElement && (\n <DrawerBase.Description asChild data-testid='spectral-drawer-description'>\n {description}\n </DrawerBase.Description>\n )}\n {!isTextDescription && !isCustomDescriptionElement && (\n <DrawerBase.Description data-testid='spectral-drawer-description'>\n {description}\n </DrawerBase.Description>\n )}\n </>\n )}\n <div className='py-2 px-3 min-w-0 [&>*]:min-w-0 [&_*]:min-w-0 flex-1 min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain *:box-border' data-testid='spectral-drawer-body'>\n {children}\n </div>\n </div>\n </DrawerBase.Content>\n </DrawerBase.Portal>\n </DrawerBase.Root>\n </SpectralProvider>\n )\n}\n"],"mappings":";;;;;;;;AAqBA,MAAM,qBAAqB,UAAsB,OAAO,UAAU,WAAW,MAAM,MAAM,CAAC,SAAS,IAAI,OAAO,UAAU;AAExH,MAAM,wBAAwB,UAAqB;AACjD,KAAI,kBAAkB,MAAM,CAC1B,QAAO;AAGT,KAAI,UAAU,QAAQ,UAAU,UAAa,OAAO,UAAU,aAAa,OAAO,UAAU,SAC1F,QAAO;AAGT,QAAO;;AAGT,MAAM,2BAA2B,YAAuB,eAAe,QAAQ,IAAI,QAAQ,SAAS;AAEpG,MAAa,UAAU,EACrB,UACA,WACA,cAAc,OACd,aAAa,YAAY,SACzB,cAAc,MACd,eAAe,WACf,QAAQ,MACR,cACA,MACA,OAAO,SACP,OACA,cACiB;CACjB,MAAM,aAAa;CACnB,MAAM,WAAW,qBAAqB,MAAM;CAC5C,MAAM,iBAAiB,qBAAqB,YAAY;CACxD,MAAM,cAAc,kBAAkB,MAAM;CAC5C,MAAM,oBAAoB,kBAAkB,YAAY;CACxD,MAAM,uBAAuB,wBAAwB,MAAM;CAC3D,MAAM,6BAA6B,wBAAwB,YAAY;CACvE,MAAM,aAAa,iBAAiB,YAAY,iBAAiB;CACjE,MAAM,qBAAqB,iBAAiB;CAqB5C,MAAM,EAAE,WAAW,oBAAoB,UAAU;EAlB/C,MAAM;GACJ,WAAW,GAAG,YAAY,mEAAmE;GAC7F,OAAO,EAAE,OAAO,MAAM;GACvB;EACD,OAAO;GACL,WAAW,GAAG,YAAY,qEAAqE;GAC/F,OAAO,EAAE,OAAO,MAAM;GACvB;EACD,KAAK;GACH,WAAW,GAAG,YAAY,kEAAkE;GAC5F,OAAO,EAAE,QAAQ,MAAM;GACxB;EACD,QAAQ;GACN,WAAW,GAAG,YAAY,sEAAsE;GAChG,OAAO,EAAE,QAAQ,MAAM;GACxB;EAG6D,CAAC;AAEjE,QACE,oBAAC,kBAAD,YACE,qBAACA,SAAW,MAAZ;EAAiB,eAAY;EAA+B;EAAwB;EAAwB;EAAyB;EAAmB;EAAqB;EAAoB;YAAjM,CACE,oBAACA,SAAW,SAAZ;GAAoB;GAAQ,eAAY;aACrC;GACkB,GACrB,qBAACA,SAAW,QAAZ,aACE,oBAACA,SAAW,SAAZ;GAAoB,WAAU;GAA+B,eAAY;GAA4B,GACrG,oBAACA,SAAW,SAAZ;GACE;GACA,cAAY,CAAC,YAAY,CAAC,iBAAiB,WAAW;GACtD,WAAW,GACT,2KACA,oBACA,UACD;GACM;GACP,eAAY;aAEZ,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAACA,SAAW,OAAZ,EAAoB;KACnB,sBAAsB,oBAACA,SAAW,QAAZ,EAAmB,eAAY,0BAA2B;KAChF,YACC;MACG,eACC,oBAACA,SAAW,OAAZ;OAAkB,WAAU;OAAoD,eAAY;iBACzF;OACgB;MAEpB,CAAC,eAAe,wBACf,oBAACA,SAAW,OAAZ;OAAkB;OAAQ,eAAY;iBACnC;OACgB;MAEpB,CAAC,eAAe,CAAC,wBAChB,oBAACA,SAAW,OAAZ;OAAkB,eAAY;iBAC3B;OACgB;MAEpB;KAEJ,kBACC;MACG,qBACC,oBAACA,SAAW,aAAZ;OAAwB,WAAU;OAAoD,eAAY;iBAC/F;OACsB;MAE1B,CAAC,qBAAqB,8BACrB,oBAACA,SAAW,aAAZ;OAAwB;OAAQ,eAAY;iBACzC;OACsB;MAE1B,CAAC,qBAAqB,CAAC,8BACtB,oBAACA,SAAW,aAAZ;OAAwB,eAAY;iBACjC;OACsB;MAE1B;KAEL,oBAAC,OAAD;MAAK,WAAU;MAAiI,eAAY;MACzJ;MACG;KACF;;GACa,EACH,IACJ;KACD"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { Accordion, AccordionProps } from "./Accordion.js";
|
|
3
3
|
import { Alert, AlertProps } from "./Alert.js";
|
|
4
|
-
import { Button, ButtonProps } from "./Button.js";
|
|
5
4
|
import { AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPopupProps, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, AlertDialogTriggerProps } from "./AlertDialog.js";
|
|
6
5
|
import { Avatar, AvatarProps } from "./Avatar.js";
|
|
7
6
|
import { Badge, BadgeProps } from "./Badge.js";
|
|
7
|
+
import { Button, ButtonProps } from "./Button.js";
|
|
8
8
|
import { Separator, SeparatorProps } from "./Separator.js";
|
|
9
9
|
import { ButtonGroup, ButtonGroupItem, ButtonGroupProps, ButtonGroupSeparator } from "./ButtonGroup.js";
|
|
10
10
|
import { ButtonIcon, ButtonIconProps } from "./ButtonIcon.js";
|
package/dist/index.js
CHANGED
|
@@ -88,10 +88,10 @@ import { useAccordionAutoScroll } from "./hooks/useAccordionAutoScroll.js";
|
|
|
88
88
|
import { cn } from "./utils/twUtils.js";
|
|
89
89
|
import { Accordion } from "./Accordion.js";
|
|
90
90
|
import { Alert } from "./Alert.js";
|
|
91
|
-
import { Button } from "./Button.js";
|
|
92
91
|
import { AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.js";
|
|
93
92
|
import { Avatar } from "./Avatar.js";
|
|
94
93
|
import { Badge } from "./Badge.js";
|
|
94
|
+
import { Button } from "./Button.js";
|
|
95
95
|
import { Separator } from "./Separator.js";
|
|
96
96
|
import { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator } from "./ButtonGroup.js";
|
|
97
97
|
import { ButtonIcon } from "./ButtonIcon.js";
|