@foresthubai/workflow-builder 0.4.2 → 0.4.4

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.
Files changed (123) hide show
  1. package/LICENSE +661 -661
  2. package/NOTICE +16 -16
  3. package/README.md +110 -110
  4. package/dist/components/ui/command.d.ts +2 -2
  5. package/dist/components/ui/input.d.ts +1 -1
  6. package/dist/components/ui/resizable.d.ts +1 -1
  7. package/dist/components/ui/textarea.d.ts +1 -1
  8. package/dist/graph/BaseNode.js +10 -10
  9. package/dist/graph/reactFlowRegistry.d.ts.map +1 -1
  10. package/dist/hooks/useWorkflowSerialization.d.ts.map +1 -1
  11. package/dist/hooks/useWorkflowSerialization.js +8 -11
  12. package/dist/hooks/useWorkflowSerialization.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/BuilderLayout.tsx +345 -345
  15. package/src/Canvas.tsx +261 -261
  16. package/src/CanvasEditor.tsx +142 -142
  17. package/src/CanvasTabsToolbar.tsx +176 -176
  18. package/src/RightConfigPanel.tsx +266 -266
  19. package/src/WorkflowBuilder.tsx +408 -408
  20. package/src/cn.ts +6 -6
  21. package/src/components/ui/add-button.tsx +39 -39
  22. package/src/components/ui/alert-dialog.tsx +141 -141
  23. package/src/components/ui/alert.tsx +59 -59
  24. package/src/components/ui/badge.tsx +36 -36
  25. package/src/components/ui/button.tsx +85 -85
  26. package/src/components/ui/card.tsx +79 -79
  27. package/src/components/ui/checkbox.tsx +28 -28
  28. package/src/components/ui/collapsible.tsx +9 -9
  29. package/src/components/ui/command.tsx +153 -153
  30. package/src/components/ui/delete-button.tsx +23 -23
  31. package/src/components/ui/dialog.tsx +125 -125
  32. package/src/components/ui/dropdown-menu.tsx +198 -198
  33. package/src/components/ui/input.tsx +55 -55
  34. package/src/components/ui/label.tsx +24 -24
  35. package/src/components/ui/readonly-banner.tsx +15 -15
  36. package/src/components/ui/resizable.tsx +43 -43
  37. package/src/components/ui/scroll-area.tsx +102 -102
  38. package/src/components/ui/select.tsx +160 -160
  39. package/src/components/ui/separator.tsx +29 -29
  40. package/src/components/ui/switch.tsx +27 -27
  41. package/src/components/ui/textarea.tsx +51 -51
  42. package/src/components/ui/toast.tsx +127 -127
  43. package/src/components/ui/toaster.tsx +33 -33
  44. package/src/components/ui/toggle-group.tsx +59 -59
  45. package/src/components/ui/toggle.tsx +43 -43
  46. package/src/components/ui/tooltip.tsx +32 -32
  47. package/src/dialogs/NodePickerDialog.tsx +84 -84
  48. package/src/dialogs/ValidationDialog.tsx +184 -184
  49. package/src/graph/BaseNode.tsx +557 -557
  50. package/src/graph/CustomEdge.tsx +185 -185
  51. package/src/graph/CustomNode.tsx +16 -16
  52. package/src/graph/FunctionCallNode.tsx +30 -30
  53. package/src/graph/PortHandle.tsx +189 -189
  54. package/src/graph/reactFlowRegistry.ts +26 -26
  55. package/src/hooks/use-toast.ts +125 -125
  56. package/src/hooks/useAvailableVariables.ts +20 -20
  57. package/src/hooks/useCanvasHistory.ts +22 -22
  58. package/src/hooks/useCanvasTabs.ts +168 -168
  59. package/src/hooks/useFunctionDiagnosticsSync.ts +40 -40
  60. package/src/hooks/useFunctionRegistry.ts +26 -26
  61. package/src/hooks/useFunctions.ts +44 -44
  62. package/src/hooks/useGraph.ts +161 -161
  63. package/src/hooks/useNodeDefinitions.ts +82 -82
  64. package/src/hooks/useParamErrors.ts +26 -26
  65. package/src/hooks/useResolvedTheme.ts +30 -30
  66. package/src/hooks/useResourceDiagnosticsSync.ts +58 -58
  67. package/src/hooks/useSuppressThemeTransition.ts +79 -79
  68. package/src/hooks/useWorkflowSerialization.ts +141 -144
  69. package/src/i18n/index.ts +53 -53
  70. package/src/i18n/locales/de.json +501 -501
  71. package/src/i18n/locales/en.json +557 -557
  72. package/src/index.ts +27 -27
  73. package/src/inputs/ExpressionInput.tsx +297 -297
  74. package/src/inputs/ParameterEditor.tsx +515 -515
  75. package/src/inputs/PortSection.tsx +144 -144
  76. package/src/panels/BuilderSidebar.tsx +301 -301
  77. package/src/panels/ChannelConfigPanel.tsx +49 -49
  78. package/src/panels/ChannelsPanel.tsx +28 -28
  79. package/src/panels/DebugConsolePanel.tsx +73 -73
  80. package/src/panels/DebugContextPanel.tsx +77 -77
  81. package/src/panels/DebugExternalIOPanel.tsx +180 -180
  82. package/src/panels/DiagnosticsPanel.tsx +170 -170
  83. package/src/panels/EdgeConfigPanel.tsx +104 -104
  84. package/src/panels/FunctionConfigPanel.tsx +179 -179
  85. package/src/panels/FunctionListPanel.tsx +45 -45
  86. package/src/panels/MemoryConfigPanel.tsx +55 -55
  87. package/src/panels/MemoryPanel.tsx +40 -40
  88. package/src/panels/ModelConfigPanel.tsx +41 -41
  89. package/src/panels/ModelsPanel.tsx +36 -36
  90. package/src/panels/NodeConfigPanel.tsx +630 -630
  91. package/src/panels/NodeLibrary.tsx +288 -288
  92. package/src/panels/ResourceConfigPanel.tsx +132 -132
  93. package/src/panels/ResourceListPanel.tsx +113 -113
  94. package/src/panels/VariableConfigPanel.tsx +161 -161
  95. package/src/panels/VariablesPanel.tsx +145 -145
  96. package/src/stores/canvasStore.test.ts +44 -44
  97. package/src/stores/canvasStore.ts +245 -245
  98. package/src/stores/debugStore.ts +74 -74
  99. package/src/stores/diagnosticsStore.ts +130 -130
  100. package/src/stores/editorStore.ts +190 -190
  101. package/src/styles/index.css +526 -526
  102. package/src/utils/categoryConstants.ts +26 -26
  103. package/src/utils/channelOperations.ts +86 -86
  104. package/src/utils/connectionRules.ts +137 -137
  105. package/src/utils/functionOperations.ts +179 -179
  106. package/src/utils/graphOperations.ts +550 -550
  107. package/src/utils/history.ts +207 -207
  108. package/src/utils/memoryOperations.ts +57 -57
  109. package/src/utils/migrateFunctionNodes.ts +107 -107
  110. package/src/utils/modelOperations.ts +55 -55
  111. package/src/utils/paramDisplay.ts +71 -71
  112. package/src/utils/resourceHelpers.ts +32 -32
  113. package/src/utils/translation.ts +28 -28
  114. package/src/utils/variableOperations.ts +75 -75
  115. package/tailwind-preset.ts +166 -166
  116. package/dist/lib/utils.d.ts +0 -3
  117. package/dist/lib/utils.d.ts.map +0 -1
  118. package/dist/lib/utils.js +0 -6
  119. package/dist/lib/utils.js.map +0 -1
  120. package/dist/toolbars/CanvasTabsToolbar.d.ts +0 -11
  121. package/dist/toolbars/CanvasTabsToolbar.d.ts.map +0 -1
  122. package/dist/toolbars/CanvasTabsToolbar.js +0 -101
  123. package/dist/toolbars/CanvasTabsToolbar.js.map +0 -1
package/src/cn.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { clsx, type ClassValue } from "clsx"
2
- import { twMerge } from "tailwind-merge"
3
-
4
- export function cn(...inputs: ClassValue[]) {
5
- return twMerge(clsx(inputs))
6
- }
1
+ import { clsx, type ClassValue } from "clsx"
2
+ import { twMerge } from "tailwind-merge"
3
+
4
+ export function cn(...inputs: ClassValue[]) {
5
+ return twMerge(clsx(inputs))
6
+ }
@@ -1,39 +1,39 @@
1
- import * as React from "react";
2
- import { Plus, type LucideIcon } from "lucide-react";
3
- import { Button, type ButtonProps } from "./button";
4
- import { cn } from "../../cn";
5
-
6
- interface AddButtonProps extends Omit<ButtonProps, "variant" | "size"> {
7
- /** Leading icon. Defaults to a plus sign. */
8
- icon?: LucideIcon;
9
- }
10
-
11
- /**
12
- * The canonical "add / create" action button: a full-width dashed outline row.
13
- * Used uniformly across the sidebar resource lists and the config panels so every
14
- * add affordance reads the same. Spreads props (and forwards its ref) so it can
15
- * also be used as a dialog trigger via `asChild`.
16
- */
17
- const AddButton = React.forwardRef<HTMLButtonElement, AddButtonProps>(
18
- ({ icon: Icon = Plus, className, children, onClick, ...props }, ref) => (
19
- <Button
20
- ref={ref}
21
- variant="outline"
22
- size="sm"
23
- className={cn("w-full text-xs border-dashed", className)}
24
- onClick={(e) => {
25
- // Drop focus after a mouse click so a follow-up Enter doesn't re-fire the
26
- // add action. Keyboard activation (detail 0) keeps focus.
27
- if (e.detail !== 0) e.currentTarget.blur();
28
- onClick?.(e);
29
- }}
30
- {...props}
31
- >
32
- <Icon className="w-3.5 h-3.5 mr-1" />
33
- {children}
34
- </Button>
35
- ),
36
- );
37
- AddButton.displayName = "AddButton";
38
-
39
- export { AddButton };
1
+ import * as React from "react";
2
+ import { Plus, type LucideIcon } from "lucide-react";
3
+ import { Button, type ButtonProps } from "./button";
4
+ import { cn } from "../../cn";
5
+
6
+ interface AddButtonProps extends Omit<ButtonProps, "variant" | "size"> {
7
+ /** Leading icon. Defaults to a plus sign. */
8
+ icon?: LucideIcon;
9
+ }
10
+
11
+ /**
12
+ * The canonical "add / create" action button: a full-width dashed outline row.
13
+ * Used uniformly across the sidebar resource lists and the config panels so every
14
+ * add affordance reads the same. Spreads props (and forwards its ref) so it can
15
+ * also be used as a dialog trigger via `asChild`.
16
+ */
17
+ const AddButton = React.forwardRef<HTMLButtonElement, AddButtonProps>(
18
+ ({ icon: Icon = Plus, className, children, onClick, ...props }, ref) => (
19
+ <Button
20
+ ref={ref}
21
+ variant="outline"
22
+ size="sm"
23
+ className={cn("w-full text-xs border-dashed", className)}
24
+ onClick={(e) => {
25
+ // Drop focus after a mouse click so a follow-up Enter doesn't re-fire the
26
+ // add action. Keyboard activation (detail 0) keeps focus.
27
+ if (e.detail !== 0) e.currentTarget.blur();
28
+ onClick?.(e);
29
+ }}
30
+ {...props}
31
+ >
32
+ <Icon className="w-3.5 h-3.5 mr-1" />
33
+ {children}
34
+ </Button>
35
+ ),
36
+ );
37
+ AddButton.displayName = "AddButton";
38
+
39
+ export { AddButton };
@@ -1,141 +1,141 @@
1
- import * as React from "react"
2
- import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
3
-
4
- import { cn } from "../../cn"
5
- import { buttonVariants } from "./button"
6
-
7
- const AlertDialog = AlertDialogPrimitive.Root
8
-
9
- const AlertDialogTrigger = AlertDialogPrimitive.Trigger
10
-
11
- const AlertDialogPortal = AlertDialogPrimitive.Portal
12
-
13
- const AlertDialogOverlay = React.forwardRef<
14
- React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16
- >(({ className, ...props }, ref) => (
17
- <AlertDialogPrimitive.Overlay
18
- className={cn(
19
- "fixed inset-0 z-50 bg-[hsl(var(--overlay))] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
20
- className
21
- )}
22
- {...props}
23
- ref={ref}
24
- />
25
- ))
26
- AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
27
-
28
- const AlertDialogContent = React.forwardRef<
29
- React.ElementRef<typeof AlertDialogPrimitive.Content>,
30
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31
- >(({ className, ...props }, ref) => (
32
- <AlertDialogPortal>
33
- <AlertDialogOverlay />
34
- <AlertDialogPrimitive.Content
35
- ref={ref}
36
- className={cn(
37
- // font-sans + fh-builder-portal: portaled to <body>, outside the builder
38
- // root — pin the font and opt into the themed scrollbar explicitly.
39
- "fh-builder-portal font-sans fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
40
- className
41
- )}
42
- {...props}
43
- />
44
- </AlertDialogPortal>
45
- ))
46
- AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
47
-
48
- const AlertDialogHeader = ({
49
- className,
50
- ...props
51
- }: React.HTMLAttributes<HTMLDivElement>) => (
52
- <div
53
- className={cn(
54
- "flex flex-col space-y-2 text-center sm:text-left",
55
- className
56
- )}
57
- {...props}
58
- />
59
- )
60
- AlertDialogHeader.displayName = "AlertDialogHeader"
61
-
62
- const AlertDialogFooter = ({
63
- className,
64
- ...props
65
- }: React.HTMLAttributes<HTMLDivElement>) => (
66
- <div
67
- className={cn(
68
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
69
- className
70
- )}
71
- {...props}
72
- />
73
- )
74
- AlertDialogFooter.displayName = "AlertDialogFooter"
75
-
76
- const AlertDialogTitle = React.forwardRef<
77
- React.ElementRef<typeof AlertDialogPrimitive.Title>,
78
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
79
- >(({ className, ...props }, ref) => (
80
- <AlertDialogPrimitive.Title
81
- ref={ref}
82
- className={cn("font-heading text-lg font-semibold", className)}
83
- {...props}
84
- />
85
- ))
86
- AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
87
-
88
- const AlertDialogDescription = React.forwardRef<
89
- React.ElementRef<typeof AlertDialogPrimitive.Description>,
90
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
91
- >(({ className, ...props }, ref) => (
92
- <AlertDialogPrimitive.Description
93
- ref={ref}
94
- className={cn("text-sm text-muted-foreground", className)}
95
- {...props}
96
- />
97
- ))
98
- AlertDialogDescription.displayName =
99
- AlertDialogPrimitive.Description.displayName
100
-
101
- const AlertDialogAction = React.forwardRef<
102
- React.ElementRef<typeof AlertDialogPrimitive.Action>,
103
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104
- >(({ className, ...props }, ref) => (
105
- <AlertDialogPrimitive.Action
106
- ref={ref}
107
- className={cn(buttonVariants(), className)}
108
- {...props}
109
- />
110
- ))
111
- AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112
-
113
- const AlertDialogCancel = React.forwardRef<
114
- React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116
- >(({ className, ...props }, ref) => (
117
- <AlertDialogPrimitive.Cancel
118
- ref={ref}
119
- className={cn(
120
- buttonVariants({ variant: "outline" }),
121
- "mt-2 sm:mt-0",
122
- className
123
- )}
124
- {...props}
125
- />
126
- ))
127
- AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128
-
129
- export {
130
- AlertDialog,
131
- AlertDialogPortal,
132
- AlertDialogOverlay,
133
- AlertDialogTrigger,
134
- AlertDialogContent,
135
- AlertDialogHeader,
136
- AlertDialogFooter,
137
- AlertDialogTitle,
138
- AlertDialogDescription,
139
- AlertDialogAction,
140
- AlertDialogCancel,
141
- }
1
+ import * as React from "react"
2
+ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
3
+
4
+ import { cn } from "../../cn"
5
+ import { buttonVariants } from "./button"
6
+
7
+ const AlertDialog = AlertDialogPrimitive.Root
8
+
9
+ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
10
+
11
+ const AlertDialogPortal = AlertDialogPrimitive.Portal
12
+
13
+ const AlertDialogOverlay = React.forwardRef<
14
+ React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16
+ >(({ className, ...props }, ref) => (
17
+ <AlertDialogPrimitive.Overlay
18
+ className={cn(
19
+ "fixed inset-0 z-50 bg-[hsl(var(--overlay))] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
20
+ className
21
+ )}
22
+ {...props}
23
+ ref={ref}
24
+ />
25
+ ))
26
+ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
27
+
28
+ const AlertDialogContent = React.forwardRef<
29
+ React.ElementRef<typeof AlertDialogPrimitive.Content>,
30
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31
+ >(({ className, ...props }, ref) => (
32
+ <AlertDialogPortal>
33
+ <AlertDialogOverlay />
34
+ <AlertDialogPrimitive.Content
35
+ ref={ref}
36
+ className={cn(
37
+ // font-sans + fh-builder-portal: portaled to <body>, outside the builder
38
+ // root — pin the font and opt into the themed scrollbar explicitly.
39
+ "fh-builder-portal font-sans fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
40
+ className
41
+ )}
42
+ {...props}
43
+ />
44
+ </AlertDialogPortal>
45
+ ))
46
+ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
47
+
48
+ const AlertDialogHeader = ({
49
+ className,
50
+ ...props
51
+ }: React.HTMLAttributes<HTMLDivElement>) => (
52
+ <div
53
+ className={cn(
54
+ "flex flex-col space-y-2 text-center sm:text-left",
55
+ className
56
+ )}
57
+ {...props}
58
+ />
59
+ )
60
+ AlertDialogHeader.displayName = "AlertDialogHeader"
61
+
62
+ const AlertDialogFooter = ({
63
+ className,
64
+ ...props
65
+ }: React.HTMLAttributes<HTMLDivElement>) => (
66
+ <div
67
+ className={cn(
68
+ "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
69
+ className
70
+ )}
71
+ {...props}
72
+ />
73
+ )
74
+ AlertDialogFooter.displayName = "AlertDialogFooter"
75
+
76
+ const AlertDialogTitle = React.forwardRef<
77
+ React.ElementRef<typeof AlertDialogPrimitive.Title>,
78
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
79
+ >(({ className, ...props }, ref) => (
80
+ <AlertDialogPrimitive.Title
81
+ ref={ref}
82
+ className={cn("font-heading text-lg font-semibold", className)}
83
+ {...props}
84
+ />
85
+ ))
86
+ AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
87
+
88
+ const AlertDialogDescription = React.forwardRef<
89
+ React.ElementRef<typeof AlertDialogPrimitive.Description>,
90
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
91
+ >(({ className, ...props }, ref) => (
92
+ <AlertDialogPrimitive.Description
93
+ ref={ref}
94
+ className={cn("text-sm text-muted-foreground", className)}
95
+ {...props}
96
+ />
97
+ ))
98
+ AlertDialogDescription.displayName =
99
+ AlertDialogPrimitive.Description.displayName
100
+
101
+ const AlertDialogAction = React.forwardRef<
102
+ React.ElementRef<typeof AlertDialogPrimitive.Action>,
103
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104
+ >(({ className, ...props }, ref) => (
105
+ <AlertDialogPrimitive.Action
106
+ ref={ref}
107
+ className={cn(buttonVariants(), className)}
108
+ {...props}
109
+ />
110
+ ))
111
+ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112
+
113
+ const AlertDialogCancel = React.forwardRef<
114
+ React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116
+ >(({ className, ...props }, ref) => (
117
+ <AlertDialogPrimitive.Cancel
118
+ ref={ref}
119
+ className={cn(
120
+ buttonVariants({ variant: "outline" }),
121
+ "mt-2 sm:mt-0",
122
+ className
123
+ )}
124
+ {...props}
125
+ />
126
+ ))
127
+ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128
+
129
+ export {
130
+ AlertDialog,
131
+ AlertDialogPortal,
132
+ AlertDialogOverlay,
133
+ AlertDialogTrigger,
134
+ AlertDialogContent,
135
+ AlertDialogHeader,
136
+ AlertDialogFooter,
137
+ AlertDialogTitle,
138
+ AlertDialogDescription,
139
+ AlertDialogAction,
140
+ AlertDialogCancel,
141
+ }
@@ -1,59 +1,59 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "../../cn"
5
-
6
- const alertVariants = cva(
7
- "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8
- {
9
- variants: {
10
- variant: {
11
- default: "bg-background text-foreground",
12
- destructive:
13
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
- },
15
- },
16
- defaultVariants: {
17
- variant: "default",
18
- },
19
- }
20
- )
21
-
22
- const Alert = React.forwardRef<
23
- HTMLDivElement,
24
- React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
- >(({ className, variant, ...props }, ref) => (
26
- <div
27
- ref={ref}
28
- role="alert"
29
- className={cn(alertVariants({ variant }), className)}
30
- {...props}
31
- />
32
- ))
33
- Alert.displayName = "Alert"
34
-
35
- const AlertTitle = React.forwardRef<
36
- HTMLParagraphElement,
37
- React.HTMLAttributes<HTMLHeadingElement>
38
- >(({ className, ...props }, ref) => (
39
- <h5
40
- ref={ref}
41
- className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
- {...props}
43
- />
44
- ))
45
- AlertTitle.displayName = "AlertTitle"
46
-
47
- const AlertDescription = React.forwardRef<
48
- HTMLParagraphElement,
49
- React.HTMLAttributes<HTMLParagraphElement>
50
- >(({ className, ...props }, ref) => (
51
- <div
52
- ref={ref}
53
- className={cn("text-sm [&_p]:leading-relaxed", className)}
54
- {...props}
55
- />
56
- ))
57
- AlertDescription.displayName = "AlertDescription"
58
-
59
- export { Alert, AlertTitle, AlertDescription }
1
+ import * as React from "react"
2
+ import { cva, type VariantProps } from "class-variance-authority"
3
+
4
+ import { cn } from "../../cn"
5
+
6
+ const alertVariants = cva(
7
+ "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default: "bg-background text-foreground",
12
+ destructive:
13
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
+ },
15
+ },
16
+ defaultVariants: {
17
+ variant: "default",
18
+ },
19
+ }
20
+ )
21
+
22
+ const Alert = React.forwardRef<
23
+ HTMLDivElement,
24
+ React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
+ >(({ className, variant, ...props }, ref) => (
26
+ <div
27
+ ref={ref}
28
+ role="alert"
29
+ className={cn(alertVariants({ variant }), className)}
30
+ {...props}
31
+ />
32
+ ))
33
+ Alert.displayName = "Alert"
34
+
35
+ const AlertTitle = React.forwardRef<
36
+ HTMLParagraphElement,
37
+ React.HTMLAttributes<HTMLHeadingElement>
38
+ >(({ className, ...props }, ref) => (
39
+ <h5
40
+ ref={ref}
41
+ className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
+ {...props}
43
+ />
44
+ ))
45
+ AlertTitle.displayName = "AlertTitle"
46
+
47
+ const AlertDescription = React.forwardRef<
48
+ HTMLParagraphElement,
49
+ React.HTMLAttributes<HTMLParagraphElement>
50
+ >(({ className, ...props }, ref) => (
51
+ <div
52
+ ref={ref}
53
+ className={cn("text-sm [&_p]:leading-relaxed", className)}
54
+ {...props}
55
+ />
56
+ ))
57
+ AlertDescription.displayName = "AlertDescription"
58
+
59
+ export { Alert, AlertTitle, AlertDescription }
@@ -1,36 +1,36 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "../../cn"
5
-
6
- const badgeVariants = cva(
7
- "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8
- {
9
- variants: {
10
- variant: {
11
- default:
12
- "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13
- secondary:
14
- "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15
- destructive:
16
- "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17
- outline: "text-foreground",
18
- },
19
- },
20
- defaultVariants: {
21
- variant: "default",
22
- },
23
- }
24
- )
25
-
26
- export interface BadgeProps
27
- extends React.HTMLAttributes<HTMLDivElement>,
28
- VariantProps<typeof badgeVariants> {}
29
-
30
- function Badge({ className, variant, ...props }: BadgeProps) {
31
- return (
32
- <div className={cn(badgeVariants({ variant }), className)} {...props} />
33
- )
34
- }
35
-
36
- export { Badge, badgeVariants }
1
+ import * as React from "react"
2
+ import { cva, type VariantProps } from "class-variance-authority"
3
+
4
+ import { cn } from "../../cn"
5
+
6
+ const badgeVariants = cva(
7
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default:
12
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13
+ secondary:
14
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15
+ destructive:
16
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17
+ outline: "text-foreground",
18
+ },
19
+ },
20
+ defaultVariants: {
21
+ variant: "default",
22
+ },
23
+ }
24
+ )
25
+
26
+ export interface BadgeProps
27
+ extends React.HTMLAttributes<HTMLDivElement>,
28
+ VariantProps<typeof badgeVariants> {}
29
+
30
+ function Badge({ className, variant, ...props }: BadgeProps) {
31
+ return (
32
+ <div className={cn(badgeVariants({ variant }), className)} {...props} />
33
+ )
34
+ }
35
+
36
+ export { Badge, badgeVariants }