@keboola/design 1.3.1 → 2.0.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/icons.cjs +24 -0
- package/dist/icons.js +1 -1
- package/dist/index.cjs +274 -72
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +274 -74
- package/dist/index.js.map +1 -1
- package/dist/markdown-editor.cjs +39 -26
- package/dist/markdown-editor.cjs.map +1 -1
- package/dist/markdown-editor.js +39 -26
- package/dist/markdown-editor.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +4 -3
- package/src/blocks/AIKit/PlanApproval.tsx +29 -12
- package/src/blocks/AIKit/PromptInput.test.tsx +53 -0
- package/src/blocks/AIKit/PromptInput.tsx +1 -1
- package/src/blocks/AIKit/Question.tsx +39 -11
- package/src/blocks/AIKit/SuggestedPrompt.stories.tsx +2 -8
- package/src/blocks/EmptyState/EmptyState.stories.tsx +5 -5
- package/src/blocks/EmptyState/EmptyState.tsx +2 -2
- package/src/blocks/ErrorState/ErrorState.stories.tsx +6 -6
- package/src/blocks/ErrorState/ErrorState.tsx +3 -3
- package/src/blocks/PageHeader/AGENTS.md +1 -1
- package/src/blocks/PageHeader/PageHeader.stories.tsx +6 -3
- package/src/blocks/PageHeader/PageHeaderIndex.tsx +2 -2
- package/src/blocks/PageLayout/AGENTS.md +3 -3
- package/src/blocks/PageLayout/PageLayout.stories.tsx +7 -4
- package/src/blocks/PageLayout/PageLayout.tsx +1 -18
- package/src/blocks/PageToolbar/PageToolbar.stories.tsx +79 -74
- package/src/blocks/PageToolbar/PageToolbar.tsx +45 -4
- package/src/blocks/PageToolbar/PageToolbarToken.tsx +61 -0
- package/src/blocks/SearchInput/SearchInput.tsx +2 -2
- package/src/components/Alert/AlertDescription.tsx +5 -0
- package/src/components/Badge/Badge.stories.tsx +3 -5
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +4 -4
- package/src/components/Breadcrumb/BreadcrumbLink.tsx +1 -1
- package/src/components/Button/ButtonInline.stories.tsx +3 -3
- package/src/components/Button/ButtonInline.tsx +4 -0
- package/src/components/Card/Card.stories.tsx +2 -2
- package/src/components/FormGroup/FormGroup.stories.tsx +2 -2
- package/src/components/HoverCard/HoverCardContent.tsx +5 -0
- package/src/components/Input/Input.stories.tsx +2 -2
- package/src/components/InputGroup/InputGroup.stories.tsx +4 -5
- package/src/components/InputGroup/InputGroup.tsx +1 -1
- package/src/components/InputGroup/InputGroupAddon.tsx +35 -24
- package/src/components/Kbd/Kbd.stories.tsx +2 -2
- package/src/components/Label/Label.stories.tsx +2 -2
- package/src/components/Modal/ModalBody.tsx +5 -0
- package/src/components/Navbar/Navbar.stories.tsx +4 -5
- package/src/components/Pagination/Pagination.stories.tsx +0 -1
- package/src/components/Popover/PopoverContent.tsx +4 -0
- package/src/components/Select/SelectTrigger.tsx +1 -1
- package/src/components/Separator/Separator.stories.tsx +19 -0
- package/src/components/Separator/Separator.test.tsx +39 -0
- package/src/components/Separator/Separator.tsx +42 -11
- package/src/components/Sidebar/Sidebar.stories.tsx +6 -5
- package/src/components/Table/Table.stories.tsx +16 -16
- package/src/components/Timeline/Timeline.stories.tsx +8 -8
- package/src/components/Timeline/TimelineConnector.tsx +1 -1
- package/src/components/ToggleGroup/ToggleGroup.stories.tsx +60 -0
- package/src/components/ToggleGroup/ToggleGroup.tsx +99 -0
- package/src/components/ToggleGroup/index.ts +1 -0
- package/src/components/Tooltip/Tooltip.stories.tsx +2 -2
- package/src/hooks/useAutosizeInput.stories.tsx +2 -2
- package/src/icons/index.ts +6 -0
- package/src/index.ts +1 -0
- package/src/patterns/FilterToolbar.stories.tsx +248 -44
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Slot, Root as Root$1, Slottable } from '@radix-ui/react-slot';
|
|
2
2
|
export { Slot } from '@radix-ui/react-slot';
|
|
3
|
-
import { ChevronLeft, Loader2, Calendar, Clock, Sparkles, Search, Check, Minus,
|
|
3
|
+
import { ChevronLeft, Plus, ChevronDown as ChevronDown$1, X, Loader2, Calendar, Clock, Sparkles, Search, Check, Minus, Copy, CircleCheck, AlertTriangle, ChevronUp, Send, ChevronRight, FileText, ArrowBigUpDash, EyeOff, Eye, Minimize2, Maximize2, Circle, Ellipsis, XCircle, Info, ChevronsRight, ChevronsLeft, CirclePause, Play, AlertCircle, ToggleRight } from 'lucide-react';
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import { extendTailwindMerge } from 'tailwind-merge';
|
|
6
6
|
import { createContext, useRef, useEffect, useMemo, useState, useId, use, useCallback, Fragment as Fragment$1, useLayoutEffect, useReducer, Children } from 'react';
|
|
@@ -39,6 +39,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
|
|
|
39
39
|
import BoringAvatar from 'boring-avatars';
|
|
40
40
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
41
41
|
import { Root as Root$9 } from '@radix-ui/react-toggle';
|
|
42
|
+
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
42
43
|
import { Root as Root$a, Indicator as Indicator$1 } from '@radix-ui/react-progress';
|
|
43
44
|
import { diffLines, diffWords } from 'diff';
|
|
44
45
|
import * as RadixTabs from '@radix-ui/react-tabs';
|
|
@@ -668,7 +669,10 @@ var buttonInlineVariants = cva(
|
|
|
668
669
|
"disabled:tw-cursor-not-allowed",
|
|
669
670
|
"disabled:tw-text-neutral-500",
|
|
670
671
|
"disabled:tw-no-underline",
|
|
671
|
-
"[&_svg]:disabled:tw-text-neutral-400"
|
|
672
|
+
"[&_svg]:disabled:tw-text-neutral-400",
|
|
673
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
674
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
675
|
+
"[&_svg]:tw-shrink-0"
|
|
672
676
|
],
|
|
673
677
|
{
|
|
674
678
|
defaultVariants: {
|
|
@@ -849,7 +853,10 @@ var variants2 = cva(
|
|
|
849
853
|
"data-[side=bottom]:tw-slide-in-from-top-2",
|
|
850
854
|
"data-[side=left]:tw-slide-in-from-right-2",
|
|
851
855
|
"data-[side=right]:tw-slide-in-from-left-2",
|
|
852
|
-
"data-[side=top]:tw-slide-in-from-bottom-2"
|
|
856
|
+
"data-[side=top]:tw-slide-in-from-bottom-2",
|
|
857
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
858
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
859
|
+
"[&_svg]:tw-shrink-0"
|
|
853
860
|
],
|
|
854
861
|
{
|
|
855
862
|
defaultVariants: {
|
|
@@ -1103,32 +1110,42 @@ var TimePicker = ({
|
|
|
1103
1110
|
)
|
|
1104
1111
|
] });
|
|
1105
1112
|
};
|
|
1106
|
-
var addonVariants = cva(
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
"[&:not(:empty)]:tw-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1113
|
+
var addonVariants = cva(
|
|
1114
|
+
[
|
|
1115
|
+
"tw-flex",
|
|
1116
|
+
"tw-items-center",
|
|
1117
|
+
"tw-gap-1",
|
|
1118
|
+
// Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
|
|
1119
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
1120
|
+
"[&_svg]:tw-shrink-0"
|
|
1121
|
+
],
|
|
1122
|
+
{
|
|
1123
|
+
defaultVariants: {
|
|
1124
|
+
align: "inline-start"
|
|
1125
|
+
},
|
|
1126
|
+
variants: {
|
|
1127
|
+
align: {
|
|
1128
|
+
"inline-start": ["tw-order-first", "[&:not(:empty)]:tw-pl-4"],
|
|
1129
|
+
"inline-end": ["tw-order-last", "[&:not(:empty)]:tw-pr-4"],
|
|
1130
|
+
"block-start": [
|
|
1131
|
+
"tw-order-first",
|
|
1132
|
+
// `tw-w-full` needs to be empty-conditional too — when the addon
|
|
1133
|
+
// has no content the root stays in flex-row, and a 100%-wide
|
|
1134
|
+
// empty addon would claim half of the input row beside the input.
|
|
1135
|
+
"[&:not(:empty)]:tw-w-full",
|
|
1136
|
+
"[&:not(:empty)]:tw-px-4",
|
|
1137
|
+
"[&:not(:empty)]:tw-py-1.5"
|
|
1138
|
+
],
|
|
1139
|
+
"block-end": [
|
|
1140
|
+
"tw-order-last",
|
|
1141
|
+
"[&:not(:empty)]:tw-w-full",
|
|
1142
|
+
"[&:not(:empty)]:tw-px-4",
|
|
1143
|
+
"[&:not(:empty)]:tw-py-1.5"
|
|
1144
|
+
]
|
|
1145
|
+
}
|
|
1129
1146
|
}
|
|
1130
1147
|
}
|
|
1131
|
-
|
|
1148
|
+
);
|
|
1132
1149
|
var InputGroupAddon = ({
|
|
1133
1150
|
children,
|
|
1134
1151
|
align = "inline-start",
|
|
@@ -1287,7 +1304,7 @@ var inputGroupVariants = cva(
|
|
|
1287
1304
|
defaultVariants: {
|
|
1288
1305
|
variant: "primary",
|
|
1289
1306
|
state: "default",
|
|
1290
|
-
sizing: "
|
|
1307
|
+
sizing: "medium",
|
|
1291
1308
|
focusVariant: "default"
|
|
1292
1309
|
},
|
|
1293
1310
|
compoundVariants: [
|
|
@@ -2398,6 +2415,9 @@ var HoverCardContent = ({
|
|
|
2398
2415
|
"data-[state=closed]:tw-animate-out",
|
|
2399
2416
|
"data-[state=closed]:tw-fade-out-0",
|
|
2400
2417
|
"data-[state=closed]:tw-zoom-out-95",
|
|
2418
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
2419
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
2420
|
+
"[&_svg]:tw-shrink-0",
|
|
2401
2421
|
className
|
|
2402
2422
|
),
|
|
2403
2423
|
...props,
|
|
@@ -2416,7 +2436,7 @@ var separatorVariants = cva(
|
|
|
2416
2436
|
"tw-self-stretch",
|
|
2417
2437
|
// before
|
|
2418
2438
|
"before:tw-content-['']",
|
|
2419
|
-
"before:tw-bg-
|
|
2439
|
+
"before:tw-bg-border"
|
|
2420
2440
|
],
|
|
2421
2441
|
{
|
|
2422
2442
|
defaultVariants: {
|
|
@@ -2472,16 +2492,37 @@ var Separator = ({
|
|
|
2472
2492
|
className,
|
|
2473
2493
|
orientation = "vertical",
|
|
2474
2494
|
size = "full",
|
|
2495
|
+
label,
|
|
2475
2496
|
...props
|
|
2476
|
-
}) =>
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2497
|
+
}) => {
|
|
2498
|
+
if (label != null && label !== false) {
|
|
2499
|
+
return /* @__PURE__ */ jsx(
|
|
2500
|
+
RSeparator.Root,
|
|
2501
|
+
{
|
|
2502
|
+
...props,
|
|
2503
|
+
decorative: true,
|
|
2504
|
+
orientation: "horizontal",
|
|
2505
|
+
className: cn(
|
|
2506
|
+
"tw-flex tw-w-full tw-items-center tw-gap-3 tw-self-stretch",
|
|
2507
|
+
"tw-text-xs tw-font-medium tw-text-muted-foreground",
|
|
2508
|
+
"before:tw-content-[''] before:tw-h-px before:tw-flex-1 before:tw-bg-border",
|
|
2509
|
+
"after:tw-content-[''] after:tw-h-px after:tw-flex-1 after:tw-bg-border",
|
|
2510
|
+
className
|
|
2511
|
+
),
|
|
2512
|
+
children: label
|
|
2513
|
+
}
|
|
2514
|
+
);
|
|
2483
2515
|
}
|
|
2484
|
-
|
|
2516
|
+
return /* @__PURE__ */ jsx(
|
|
2517
|
+
RSeparator.Root,
|
|
2518
|
+
{
|
|
2519
|
+
...props,
|
|
2520
|
+
decorative: true,
|
|
2521
|
+
orientation,
|
|
2522
|
+
className: separatorVariants({ size, orientation, className })
|
|
2523
|
+
}
|
|
2524
|
+
);
|
|
2525
|
+
};
|
|
2485
2526
|
var RadioGroupContext = createContext({
|
|
2486
2527
|
variant: "radio",
|
|
2487
2528
|
orientation: "horizontal"
|
|
@@ -3285,7 +3326,7 @@ var variants3 = cva(
|
|
|
3285
3326
|
defaultVariants: {
|
|
3286
3327
|
variant: "primary",
|
|
3287
3328
|
state: "default",
|
|
3288
|
-
sizing: "
|
|
3329
|
+
sizing: "medium"
|
|
3289
3330
|
},
|
|
3290
3331
|
compoundVariants: [
|
|
3291
3332
|
{
|
|
@@ -4040,6 +4081,9 @@ var ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsx(
|
|
|
4040
4081
|
"tw-px-1",
|
|
4041
4082
|
// 4 px to complement ModalContent and still keep input focus outline visible
|
|
4042
4083
|
"tw-py-1",
|
|
4084
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
4085
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
4086
|
+
"[&_svg]:tw-shrink-0",
|
|
4043
4087
|
className
|
|
4044
4088
|
),
|
|
4045
4089
|
...props
|
|
@@ -7389,7 +7433,7 @@ var BreadcrumbLink = ({
|
|
|
7389
7433
|
"focus-visible:tw-ring-secondary-500/50",
|
|
7390
7434
|
"focus-visible:tw-rounded-sm",
|
|
7391
7435
|
// Icon
|
|
7392
|
-
"[&_svg]:tw-size-
|
|
7436
|
+
"[&_svg]:tw-size-3.5",
|
|
7393
7437
|
// transition
|
|
7394
7438
|
"tw-transition-colors",
|
|
7395
7439
|
className
|
|
@@ -8131,6 +8175,77 @@ var Toggle = ({
|
|
|
8131
8175
|
}
|
|
8132
8176
|
);
|
|
8133
8177
|
};
|
|
8178
|
+
var rootVariants2 = cva(
|
|
8179
|
+
[
|
|
8180
|
+
"tailwindcss-preflight",
|
|
8181
|
+
"tw-inline-flex",
|
|
8182
|
+
"tw-items-center",
|
|
8183
|
+
"tw-shrink-0",
|
|
8184
|
+
"tw-bg-muted",
|
|
8185
|
+
"tw-rounded-lg",
|
|
8186
|
+
"tw-p-[3px]",
|
|
8187
|
+
"tw-gap-0"
|
|
8188
|
+
],
|
|
8189
|
+
{
|
|
8190
|
+
defaultVariants: { size: "medium" },
|
|
8191
|
+
variants: {
|
|
8192
|
+
size: {
|
|
8193
|
+
small: ["tw-h-8"],
|
|
8194
|
+
medium: ["tw-h-9"],
|
|
8195
|
+
large: ["tw-h-10"]
|
|
8196
|
+
}
|
|
8197
|
+
}
|
|
8198
|
+
}
|
|
8199
|
+
);
|
|
8200
|
+
var itemClasses = cn(
|
|
8201
|
+
"tailwindcss-preflight",
|
|
8202
|
+
"tw-inline-flex",
|
|
8203
|
+
"tw-items-center",
|
|
8204
|
+
"tw-justify-center",
|
|
8205
|
+
"tw-gap-2",
|
|
8206
|
+
"tw-shrink-0",
|
|
8207
|
+
"tw-whitespace-nowrap",
|
|
8208
|
+
"tw-h-full",
|
|
8209
|
+
"tw-rounded-md",
|
|
8210
|
+
"tw-px-2",
|
|
8211
|
+
"tw-py-1",
|
|
8212
|
+
"tw-bg-transparent",
|
|
8213
|
+
"tw-text-foreground",
|
|
8214
|
+
"tw-text-sm",
|
|
8215
|
+
"tw-font-medium",
|
|
8216
|
+
"tw-transition-colors",
|
|
8217
|
+
"disabled:tw-cursor-not-allowed",
|
|
8218
|
+
"disabled:tw-opacity-50",
|
|
8219
|
+
"!tw-outline-none",
|
|
8220
|
+
"focus-visible:tw-ring-2",
|
|
8221
|
+
"focus-visible:tw-ring-primary/50",
|
|
8222
|
+
// hover on non-pressed
|
|
8223
|
+
"not-disabled:[&[data-state=off]]:hover:tw-bg-background/60",
|
|
8224
|
+
// pressed
|
|
8225
|
+
"data-[state=on]:tw-bg-background",
|
|
8226
|
+
"data-[state=on]:tw-shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]",
|
|
8227
|
+
"[&_svg]:tw-shrink-0",
|
|
8228
|
+
"[&_svg]:tw-pointer-events-none",
|
|
8229
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4"
|
|
8230
|
+
);
|
|
8231
|
+
var Root25 = ({
|
|
8232
|
+
ref,
|
|
8233
|
+
className,
|
|
8234
|
+
size = "medium",
|
|
8235
|
+
...props
|
|
8236
|
+
}) => /* @__PURE__ */ jsx(
|
|
8237
|
+
ToggleGroupPrimitive.Root,
|
|
8238
|
+
{
|
|
8239
|
+
ref,
|
|
8240
|
+
...props,
|
|
8241
|
+
className: cn(rootVariants2({ size, className }))
|
|
8242
|
+
}
|
|
8243
|
+
);
|
|
8244
|
+
var Item6 = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { ref, ...props, className: cn(itemClasses, className) });
|
|
8245
|
+
var ToggleGroup = Object.assign(Root25, {
|
|
8246
|
+
/** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */
|
|
8247
|
+
Item: Item6
|
|
8248
|
+
});
|
|
8134
8249
|
var CONNECTOR_MARGIN_TOP = 8;
|
|
8135
8250
|
var useLastLineHeight = () => {
|
|
8136
8251
|
const [wrapper, setWrapper] = useElement();
|
|
@@ -8219,7 +8334,7 @@ var connector = cva(
|
|
|
8219
8334
|
"tw-text-nowrap",
|
|
8220
8335
|
"tw-text-xs"
|
|
8221
8336
|
],
|
|
8222
|
-
icon: ["tw-bg-white", "[&_svg]:tw-text-neutral-300"],
|
|
8337
|
+
icon: ["tw-bg-white", "[&_svg]:tw-size-4", "[&_svg]:tw-text-neutral-300"],
|
|
8223
8338
|
line: [
|
|
8224
8339
|
"tw-min-w-8",
|
|
8225
8340
|
"tw-overflow-hidden",
|
|
@@ -9455,6 +9570,9 @@ var AlertDescription = ({
|
|
|
9455
9570
|
"group-has-[[data-slot=alert-title]]/alert:before:tw-h-4",
|
|
9456
9571
|
"group-has-[[data-slot=alert-title]]/alert:before:tw-content-['']",
|
|
9457
9572
|
"tw-break-anywhere",
|
|
9573
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
9574
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
9575
|
+
"[&_svg]:tw-shrink-0",
|
|
9458
9576
|
className
|
|
9459
9577
|
),
|
|
9460
9578
|
children
|
|
@@ -11541,7 +11659,7 @@ var Skeleton = ({ height = "md", className, count = 1 }) => {
|
|
|
11541
11659
|
var duplicateArray = (arr, times) => {
|
|
11542
11660
|
return Array(times).fill(arr).flat();
|
|
11543
11661
|
};
|
|
11544
|
-
var
|
|
11662
|
+
var Item7 = ({
|
|
11545
11663
|
className,
|
|
11546
11664
|
iconHeight = "md",
|
|
11547
11665
|
rowHeight = "sm",
|
|
@@ -11568,7 +11686,7 @@ var SkeletonList = ({
|
|
|
11568
11686
|
),
|
|
11569
11687
|
children: duplicateArray(["tw-w-5/6", "tw-w-3/4", "tw-w-4/5", "tw-w-2/3"], groups).map(
|
|
11570
11688
|
(className2, index) => /* @__PURE__ */ jsx(
|
|
11571
|
-
|
|
11689
|
+
Item7,
|
|
11572
11690
|
{
|
|
11573
11691
|
iconHeight,
|
|
11574
11692
|
rowHeight,
|
|
@@ -12117,8 +12235,8 @@ var emptyStateIconClassnames = cva(
|
|
|
12117
12235
|
{
|
|
12118
12236
|
variants: {
|
|
12119
12237
|
variant: {
|
|
12120
|
-
default: ["tw-size-16", "tw-text-4xl"],
|
|
12121
|
-
compact: ["tw-size-10", "tw-text-2xl"]
|
|
12238
|
+
default: ["tw-size-16", "tw-text-4xl", "[&_svg]:tw-size-10"],
|
|
12239
|
+
compact: ["tw-size-10", "tw-text-2xl", "[&_svg]:tw-size-6"]
|
|
12122
12240
|
}
|
|
12123
12241
|
},
|
|
12124
12242
|
defaultVariants: {
|
|
@@ -12189,9 +12307,9 @@ var errorStateClassnames = cva(["tw-flex", "tw-flex-col", "tw-items-center", "tw
|
|
|
12189
12307
|
var errorStateIconClassnames = cva(["tw-flex", "tw-items-center", "tw-justify-center"], {
|
|
12190
12308
|
variants: {
|
|
12191
12309
|
variant: {
|
|
12192
|
-
default: ["tw-size-16", "tw-text-4xl", "tw-text-warning-500"],
|
|
12193
|
-
compact: ["tw-size-10", "tw-text-2xl", "tw-text-warning-500"],
|
|
12194
|
-
destructive: ["tw-size-16", "tw-text-4xl", "tw-text-error-500"]
|
|
12310
|
+
default: ["tw-size-16", "tw-text-4xl", "[&_svg]:tw-size-10", "tw-text-warning-500"],
|
|
12311
|
+
compact: ["tw-size-10", "tw-text-2xl", "[&_svg]:tw-size-6", "tw-text-warning-500"],
|
|
12312
|
+
destructive: ["tw-size-16", "tw-text-4xl", "[&_svg]:tw-size-10", "tw-text-error-500"]
|
|
12195
12313
|
}
|
|
12196
12314
|
},
|
|
12197
12315
|
defaultVariants: {
|
|
@@ -12255,7 +12373,7 @@ var maxWidthClass = {
|
|
|
12255
12373
|
wide: "tw-max-w-[1600px]",
|
|
12256
12374
|
full: "tw-max-w-full"
|
|
12257
12375
|
};
|
|
12258
|
-
var
|
|
12376
|
+
var Root29 = ({
|
|
12259
12377
|
ref,
|
|
12260
12378
|
className,
|
|
12261
12379
|
maxWidth = "full",
|
|
@@ -12300,20 +12418,6 @@ var Tabs2 = ({
|
|
|
12300
12418
|
children
|
|
12301
12419
|
}
|
|
12302
12420
|
);
|
|
12303
|
-
var Toolbar = ({
|
|
12304
|
-
ref,
|
|
12305
|
-
className,
|
|
12306
|
-
children,
|
|
12307
|
-
...props
|
|
12308
|
-
}) => /* @__PURE__ */ jsx(
|
|
12309
|
-
"div",
|
|
12310
|
-
{
|
|
12311
|
-
ref,
|
|
12312
|
-
className: cn("tw-flex tw-w-full tw-flex-wrap tw-items-center tw-gap-3", className),
|
|
12313
|
-
...props,
|
|
12314
|
-
children
|
|
12315
|
-
}
|
|
12316
|
-
);
|
|
12317
12421
|
var Content11 = ({
|
|
12318
12422
|
ref,
|
|
12319
12423
|
className,
|
|
@@ -12339,15 +12443,13 @@ var Footer = ({
|
|
|
12339
12443
|
children
|
|
12340
12444
|
}
|
|
12341
12445
|
);
|
|
12342
|
-
var PageLayout = Object.assign(
|
|
12446
|
+
var PageLayout = Object.assign(Root29, {
|
|
12343
12447
|
/** Detail-pattern breadcrumb row. Usually composed automatically by `PageHeader.Detail` — slot exists for layouts that don't fit either `PageHeader` variant. */
|
|
12344
12448
|
Breadcrumbs,
|
|
12345
12449
|
/** Host slot for `PageHeader.Index` / `PageHeader.Detail`, or custom header JSX when neither variant fits. */
|
|
12346
12450
|
Header,
|
|
12347
12451
|
/** Escape hatch for routing-based tab rows. Use `Tabs` / `TabsContent` core components inside, never a raw `<button>`. */
|
|
12348
12452
|
Tabs: Tabs2,
|
|
12349
|
-
/** Search / filter pill row. Belongs here, NOT in the header per the page-header patterns. */
|
|
12350
|
-
Toolbar,
|
|
12351
12453
|
/** Main content slot. Lists, cards, tables. */
|
|
12352
12454
|
Content: Content11,
|
|
12353
12455
|
/** Bottom action bar — form submit + cancel. Pass `sticky` for a footer that pins to the viewport. */
|
|
@@ -12433,7 +12535,47 @@ var PageHeader = {
|
|
|
12433
12535
|
/** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
|
|
12434
12536
|
Detail: PageHeaderDetail
|
|
12435
12537
|
};
|
|
12436
|
-
var
|
|
12538
|
+
var PageToolbarToken = ({
|
|
12539
|
+
children,
|
|
12540
|
+
popover,
|
|
12541
|
+
onRemove,
|
|
12542
|
+
removeAriaLabel,
|
|
12543
|
+
...props
|
|
12544
|
+
}) => /* @__PURE__ */ jsxs(Popover, { children: [
|
|
12545
|
+
/* @__PURE__ */ jsx(
|
|
12546
|
+
Badge,
|
|
12547
|
+
{
|
|
12548
|
+
...props,
|
|
12549
|
+
asChild: true,
|
|
12550
|
+
variant: "pill",
|
|
12551
|
+
color: "blue-inverse",
|
|
12552
|
+
suffix: /* @__PURE__ */ jsx(
|
|
12553
|
+
Button,
|
|
12554
|
+
{
|
|
12555
|
+
type: "button",
|
|
12556
|
+
variant: "inline",
|
|
12557
|
+
size: "icon-2xs",
|
|
12558
|
+
"aria-label": removeAriaLabel,
|
|
12559
|
+
onClick: onRemove,
|
|
12560
|
+
children: /* @__PURE__ */ jsx(X, { className: "tw-size-3" })
|
|
12561
|
+
}
|
|
12562
|
+
),
|
|
12563
|
+
children: /* @__PURE__ */ jsxs(
|
|
12564
|
+
Popover.Trigger,
|
|
12565
|
+
{
|
|
12566
|
+
type: "button",
|
|
12567
|
+
className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-inherit tw-text-inherit",
|
|
12568
|
+
children: [
|
|
12569
|
+
children,
|
|
12570
|
+
/* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-3" })
|
|
12571
|
+
]
|
|
12572
|
+
}
|
|
12573
|
+
)
|
|
12574
|
+
}
|
|
12575
|
+
),
|
|
12576
|
+
/* @__PURE__ */ jsx(Popover.Content, { variant: "argo", align: "start", children: popover })
|
|
12577
|
+
] });
|
|
12578
|
+
var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
|
|
12437
12579
|
"div",
|
|
12438
12580
|
{
|
|
12439
12581
|
ref,
|
|
@@ -12473,12 +12615,32 @@ var ActiveFilters = ({ ref, className, children, ...props }) => /* @__PURE__ */
|
|
|
12473
12615
|
children
|
|
12474
12616
|
}
|
|
12475
12617
|
);
|
|
12618
|
+
var Chip = ({ children, onRemove, removeAriaLabel, ...props }) => /* @__PURE__ */ jsx(
|
|
12619
|
+
Badge,
|
|
12620
|
+
{
|
|
12621
|
+
...props,
|
|
12622
|
+
variant: "pill",
|
|
12623
|
+
color: "blue-inverse",
|
|
12624
|
+
suffix: /* @__PURE__ */ jsx(
|
|
12625
|
+
Button,
|
|
12626
|
+
{
|
|
12627
|
+
type: "button",
|
|
12628
|
+
variant: "inline",
|
|
12629
|
+
size: "icon-2xs",
|
|
12630
|
+
"aria-label": removeAriaLabel,
|
|
12631
|
+
onClick: onRemove,
|
|
12632
|
+
children: /* @__PURE__ */ jsx(X, { className: "tw-size-3" })
|
|
12633
|
+
}
|
|
12634
|
+
),
|
|
12635
|
+
children
|
|
12636
|
+
}
|
|
12637
|
+
);
|
|
12476
12638
|
var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-gap-1.5", className), ...props, children: [
|
|
12477
|
-
/* @__PURE__ */ jsx(
|
|
12639
|
+
/* @__PURE__ */ jsx(Plus, { className: "tw-size-4" }),
|
|
12478
12640
|
children ?? "Add filter"
|
|
12479
12641
|
] });
|
|
12480
12642
|
var Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-ml-auto", className), ...props, children: children ?? "Clear all" });
|
|
12481
|
-
var PageToolbar = Object.assign(
|
|
12643
|
+
var PageToolbar = Object.assign(Root30, {
|
|
12482
12644
|
/** Left slot — typically a `SearchInput`. */
|
|
12483
12645
|
Search: Search4,
|
|
12484
12646
|
/** Right cluster — host the four control groups below in the recommended order. */
|
|
@@ -12497,6 +12659,14 @@ var PageToolbar = Object.assign(Root28, {
|
|
|
12497
12659
|
* by `AddFilter` / `Clear`.
|
|
12498
12660
|
*/
|
|
12499
12661
|
ActiveFilters,
|
|
12662
|
+
/** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */
|
|
12663
|
+
Chip,
|
|
12664
|
+
/**
|
|
12665
|
+
* Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
|
|
12666
|
+
* popover trigger for editing values and an `×` dismiss button. The popover content
|
|
12667
|
+
* is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
|
|
12668
|
+
*/
|
|
12669
|
+
Token: PageToolbarToken,
|
|
12500
12670
|
/** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
|
|
12501
12671
|
AddFilter,
|
|
12502
12672
|
/** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */
|
|
@@ -13104,6 +13274,7 @@ var PlanApproval = ({
|
|
|
13104
13274
|
onRequestChanges,
|
|
13105
13275
|
onClose,
|
|
13106
13276
|
isSubmitting = false,
|
|
13277
|
+
approveTooltip,
|
|
13107
13278
|
pendingPillLabel = "Ready for approval",
|
|
13108
13279
|
approvedPillLabel = "Approved",
|
|
13109
13280
|
dismissedPillLabel = "Dismissed",
|
|
@@ -13290,7 +13461,7 @@ var PlanApproval = ({
|
|
|
13290
13461
|
children: requestChangesLabel
|
|
13291
13462
|
}
|
|
13292
13463
|
),
|
|
13293
|
-
onApprove && /* @__PURE__ */ jsx(
|
|
13464
|
+
onApprove && (approveTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: approveTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
|
|
13294
13465
|
Button,
|
|
13295
13466
|
{
|
|
13296
13467
|
argo: true,
|
|
@@ -13301,7 +13472,18 @@ var PlanApproval = ({
|
|
|
13301
13472
|
"data-testid": "plan-approve-button",
|
|
13302
13473
|
children: approveLabel
|
|
13303
13474
|
}
|
|
13304
|
-
)
|
|
13475
|
+
) }) : /* @__PURE__ */ jsx(
|
|
13476
|
+
Button,
|
|
13477
|
+
{
|
|
13478
|
+
argo: true,
|
|
13479
|
+
variant: "primary",
|
|
13480
|
+
size: "small",
|
|
13481
|
+
onClick: onApprove,
|
|
13482
|
+
disabled: isSubmitting || isRequestingChanges,
|
|
13483
|
+
"data-testid": "plan-approve-button",
|
|
13484
|
+
children: approveLabel
|
|
13485
|
+
}
|
|
13486
|
+
))
|
|
13305
13487
|
] })
|
|
13306
13488
|
]
|
|
13307
13489
|
}
|
|
@@ -13452,7 +13634,7 @@ var PromptInput = ({
|
|
|
13452
13634
|
const handleOnKeyDown = (event) => {
|
|
13453
13635
|
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
|
|
13454
13636
|
event.preventDefault();
|
|
13455
|
-
handleSubmit();
|
|
13637
|
+
if (status !== "streaming") handleSubmit();
|
|
13456
13638
|
}
|
|
13457
13639
|
};
|
|
13458
13640
|
const handleOnMouseDown = (event) => {
|
|
@@ -13536,12 +13718,14 @@ var Question = ({
|
|
|
13536
13718
|
onSelectionChange,
|
|
13537
13719
|
customAnswer = "",
|
|
13538
13720
|
onCustomAnswerChange,
|
|
13721
|
+
onCustomAnswerConfirm,
|
|
13539
13722
|
showCustomAnswer = true,
|
|
13540
13723
|
customAnswerPlaceholder = "Type your answer\u2026",
|
|
13541
13724
|
showSkip = true,
|
|
13542
13725
|
onSkip,
|
|
13543
13726
|
onClose,
|
|
13544
13727
|
onNext,
|
|
13728
|
+
submitTooltip,
|
|
13545
13729
|
onPrevious,
|
|
13546
13730
|
currentStep,
|
|
13547
13731
|
totalSteps,
|
|
@@ -13696,6 +13880,12 @@ var Question = ({
|
|
|
13696
13880
|
value: customAnswer,
|
|
13697
13881
|
onValueChange: (value) => onCustomAnswerChange?.(value),
|
|
13698
13882
|
onFocus: handleCustomFocus,
|
|
13883
|
+
onKeyDown: onCustomAnswerConfirm ? (e) => {
|
|
13884
|
+
if (e.key === "Enter" && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {
|
|
13885
|
+
e.preventDefault();
|
|
13886
|
+
onCustomAnswerConfirm();
|
|
13887
|
+
}
|
|
13888
|
+
} : void 0,
|
|
13699
13889
|
placeholder: customAnswerPlaceholder,
|
|
13700
13890
|
sizing: "small",
|
|
13701
13891
|
testId: "question-custom"
|
|
@@ -13769,7 +13959,7 @@ var Question = ({
|
|
|
13769
13959
|
children: "Skip"
|
|
13770
13960
|
}
|
|
13771
13961
|
),
|
|
13772
|
-
(multiSelect || isCustomSelected) && /* @__PURE__ */ jsx(
|
|
13962
|
+
(multiSelect || isCustomSelected) && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: submitTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
|
|
13773
13963
|
Button,
|
|
13774
13964
|
{
|
|
13775
13965
|
argo: true,
|
|
@@ -13779,7 +13969,17 @@ var Question = ({
|
|
|
13779
13969
|
"data-testid": "question-next-button",
|
|
13780
13970
|
children: isLastStep ? "Submit" : "Next"
|
|
13781
13971
|
}
|
|
13782
|
-
)
|
|
13972
|
+
) }) : /* @__PURE__ */ jsx(
|
|
13973
|
+
Button,
|
|
13974
|
+
{
|
|
13975
|
+
argo: true,
|
|
13976
|
+
variant: "primary",
|
|
13977
|
+
size: "small",
|
|
13978
|
+
onClick: onNext,
|
|
13979
|
+
"data-testid": "question-next-button",
|
|
13980
|
+
children: isLastStep ? "Submit" : "Next"
|
|
13981
|
+
}
|
|
13982
|
+
))
|
|
13783
13983
|
]
|
|
13784
13984
|
}
|
|
13785
13985
|
)
|
|
@@ -14548,6 +14748,6 @@ function useAutosizeInput({
|
|
|
14548
14748
|
return { inputRef, inputStyle, sizerElement };
|
|
14549
14749
|
}
|
|
14550
14750
|
|
|
14551
|
-
export { Alert, AnswerSummary, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar2 as Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, Icon, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label, Link2 as Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, SuggestedPrompt, Switch, Table2 as Table, Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isIconName, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, withForm };
|
|
14751
|
+
export { Alert, AnswerSummary, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar2 as Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, Icon, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label, Link2 as Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, SuggestedPrompt, Switch, Table2 as Table, Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isIconName, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, withForm };
|
|
14552
14752
|
//# sourceMappingURL=index.js.map
|
|
14553
14753
|
//# sourceMappingURL=index.js.map
|