@spear-ai/spectral 1.17.4 → 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.
@@ -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 const AlertDialog: typeof AlertDialog$1.Root;
23
- declare const AlertDialogPortal: typeof AlertDialog$1.Portal;
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
- continueLabel,
58
- primaryButtonVariant,
59
- variant,
57
+ children,
60
58
  ...props
61
- }: AlertDialogFooterProps) => ReactElement;
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":";;;;;;UAOiB,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,KAGhC,kBAAA;AAAA,cAEC,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,IAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAO3B,cAAA;EACD,IAAA,GAAO,SAAA;EACP,SAAA;EACA,OAAA,GAAU,kBAAA;AAAA,MACR,YAAA;AAAA,KAuDC,sBAAA,GAAyB,IAAA,CAAK,cAAA,uBAAqC,IAAA,CAAK,gBAAA;EAC3E,oBAAA,GAAuB,WAAA;EACvB,OAAA,GAAU,kBAAA;AAAA;AAAA,cAGC,iBAAA;EAAiB,WAAA;EAAA,SAAA;EAAA,aAAA;EAAA,oBAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAO3B,sBAAA,KAAyB,YAAA;AAAA,cAyBf,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"}
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"}
@@ -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 AlertDialogCreateHandle = AlertDialog$1.createHandle;
12
- const AlertDialog = AlertDialog$1.Root;
13
- const AlertDialogPortal = AlertDialog$1.Portal;
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 = ({ cancelLabel = "Cancel", className, continueLabel = "Continue", primaryButtonVariant = "primary", variant = "default", ...props }) => {
85
- const cancelVariant = variant === "success" ? "secondary" : "outline";
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: [/* @__PURE__ */ jsx(Button, {
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 }) => {
@@ -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 { Button, type ButtonProps } from '@components/Button/Button'\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 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 type AlertDialogVariant = 'default' | 'warning' | 'success' | 'custom'\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 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\ntype AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'children'> & Pick<AlertDialogProps, 'cancelLabel' | 'continueLabel'> & {\n primaryButtonVariant?: ButtonProps['variant']\n variant?: AlertDialogVariant\n}\n\nexport const AlertDialogFooter = ({\n cancelLabel = 'Cancel',\n className,\n continueLabel = 'Continue',\n primaryButtonVariant = 'primary',\n variant = 'default',\n ...props\n}: AlertDialogFooterProps): ReactElement => {\n const cancelVariant = variant === 'success' ? 'secondary' : 'outline'\n\n const continueVariant = variant === 'default'\n ? 'destructive'\n : variant === 'warning' || variant === 'success'\n ? 'primary'\n : primaryButtonVariant\n\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 <Button asChild variant={cancelVariant}>\n <AlertDialogClose>{cancelLabel}</AlertDialogClose>\n </Button>\n <Button asChild variant={continueVariant}>\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-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":"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"}
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/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";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spear-ai/spectral",
3
- "version": "1.17.4",
3
+ "version": "1.17.5",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "engines": {