@keboola/design 1.3.1 → 2.0.1
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 +32 -0
- package/dist/icons.js +1 -1
- package/dist/index.cjs +507 -103
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +495 -106
- package/dist/index.js.map +1 -1
- package/dist/markdown-editor.cjs +78 -42
- package/dist/markdown-editor.cjs.map +1 -1
- package/dist/markdown-editor.js +78 -42
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.cjs +32 -9
- package/dist/mermaid.cjs.map +1 -1
- package/dist/mermaid.js +32 -9
- package/dist/mermaid.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +8 -6
- 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 +18 -3
- package/src/blocks/InputOtp/InputOtp.stories.tsx +214 -0
- package/src/blocks/InputOtp/InputOtp.test.tsx +162 -0
- package/src/blocks/InputOtp/InputOtp.tsx +62 -0
- package/src/blocks/InputOtp/InputOtpGroup.tsx +13 -0
- package/src/blocks/InputOtp/InputOtpSeparator.tsx +23 -0
- package/src/blocks/InputOtp/InputOtpSlot.styles.ts +52 -0
- package/src/blocks/InputOtp/InputOtpSlot.tsx +44 -0
- package/src/blocks/InputOtp/context.ts +23 -0
- package/src/blocks/InputOtp/index.ts +23 -0
- 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/Alert/AlertIcon.tsx +1 -1
- package/src/components/Badge/Badge.stories.tsx +3 -5
- package/src/components/Badge/BadgeAddon.tsx +1 -1
- package/src/components/Badge/BadgeButton.tsx +1 -1
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +4 -4
- package/src/components/Breadcrumb/BreadcrumbLink.tsx +1 -1
- package/src/components/Breadcrumb/BreadcrumbSeparator.tsx +1 -1
- package/src/components/Button/ButtonInline.stories.tsx +3 -3
- package/src/components/Button/ButtonInline.tsx +4 -0
- package/src/components/Button/styles.ts +33 -10
- package/src/components/Card/Card.stories.tsx +2 -2
- package/src/components/Combobox/ComboboxItemIndicator.tsx +1 -1
- package/src/components/Command/CommandItem/CommandItem.tsx +1 -1
- package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx +4 -4
- package/src/components/DropdownMenu/ItemIcon.tsx +1 -1
- 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/Modal/ModalIcon.tsx +1 -1
- package/src/components/Navbar/Navbar.stories.tsx +4 -5
- package/src/components/Navbar/NavbarMenuItemAdornment.tsx +2 -2
- package/src/components/Pagination/Pagination.stories.tsx +0 -1
- package/src/components/Pagination/PaginationEllipsis.tsx +1 -1
- package/src/components/Popover/PopoverContent.tsx +4 -0
- package/src/components/Select/SelectContent.tsx +1 -1
- 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/Sidebar/SidebarGroup/SidebarGroupAction.tsx +1 -1
- package/src/components/Sidebar/SidebarMenu/SidebarMenuAction.tsx +1 -1
- package/src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx +1 -1
- package/src/components/Table/Table.stories.tsx +16 -16
- package/src/components/Timeline/Timeline.stories.tsx +8 -8
- package/src/components/Timeline/TimelineConnector.tsx +5 -1
- package/src/components/Toast/ToastDismiss.tsx +1 -1
- package/src/components/Toast/ToastRoot.tsx +1 -1
- package/src/components/Toggle/Toggle.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 +8 -0
- package/src/index.ts +2 -0
- package/src/patterns/FilterToolbar.stories.tsx +248 -44
package/dist/markdown-editor.js
CHANGED
|
@@ -586,15 +586,38 @@ var init_styles = __esm({
|
|
|
586
586
|
]
|
|
587
587
|
},
|
|
588
588
|
size: {
|
|
589
|
-
medium: [
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
589
|
+
medium: [
|
|
590
|
+
"tw-max-h-10",
|
|
591
|
+
"tw-min-h-10",
|
|
592
|
+
"tw-px-4",
|
|
593
|
+
"tw-py-2.5",
|
|
594
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-4'
|
|
595
|
+
],
|
|
596
|
+
small: [
|
|
597
|
+
"tw-max-h-8",
|
|
598
|
+
"tw-min-h-8",
|
|
599
|
+
"tw-px-4",
|
|
600
|
+
"tw-py-1.5",
|
|
601
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-4'
|
|
602
|
+
],
|
|
603
|
+
large: [
|
|
604
|
+
"tw-max-h-12",
|
|
605
|
+
"tw-min-h-12",
|
|
606
|
+
"tw-px-4",
|
|
607
|
+
"tw-py-3.5",
|
|
608
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-4'
|
|
609
|
+
],
|
|
610
|
+
"icon-lg": ["tw-size-12", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
|
|
611
|
+
icon: ["tw-size-10", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
|
|
612
|
+
"icon-sm": ["tw-size-8", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
|
|
613
|
+
"icon-xs": ["tw-size-6", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
|
|
614
|
+
"icon-2xs": [
|
|
615
|
+
"!tw-inline-flex",
|
|
616
|
+
"tw-size-5",
|
|
617
|
+
"tw-max-h-5",
|
|
618
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-3'
|
|
619
|
+
],
|
|
620
|
+
"icon-3xs": ["tw-h-fit", "tw-w-fit", '[&_svg:not([class*="tw-size-"])]:tw-size-4']
|
|
598
621
|
}
|
|
599
622
|
}
|
|
600
623
|
}
|
|
@@ -789,7 +812,10 @@ var init_ButtonInline = __esm({
|
|
|
789
812
|
"disabled:tw-cursor-not-allowed",
|
|
790
813
|
"disabled:tw-text-neutral-500",
|
|
791
814
|
"disabled:tw-no-underline",
|
|
792
|
-
"[&_svg]:disabled:tw-text-neutral-400"
|
|
815
|
+
"[&_svg]:disabled:tw-text-neutral-400",
|
|
816
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
817
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
818
|
+
"[&_svg]:tw-shrink-0"
|
|
793
819
|
],
|
|
794
820
|
{
|
|
795
821
|
defaultVariants: {
|
|
@@ -1615,7 +1641,7 @@ var ToastDismiss = ({
|
|
|
1615
1641
|
"tw-row-start-1",
|
|
1616
1642
|
"tailwindcss-preflight",
|
|
1617
1643
|
"[&_svg]:tw-aspect-square",
|
|
1618
|
-
|
|
1644
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-4',
|
|
1619
1645
|
"[&_svg]:tw-m-1",
|
|
1620
1646
|
"tw-text-white",
|
|
1621
1647
|
"group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
|
|
@@ -1772,7 +1798,7 @@ var ToastRoot = ({
|
|
|
1772
1798
|
"tw-aspect-square",
|
|
1773
1799
|
"tw-size-5",
|
|
1774
1800
|
"tw-shrink-0",
|
|
1775
|
-
|
|
1801
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-5',
|
|
1776
1802
|
"tw-text-white",
|
|
1777
1803
|
"group-data-[variant=default]/toast:tw-text-popover-foreground"
|
|
1778
1804
|
),
|
|
@@ -2204,7 +2230,7 @@ var variants3 = cva(
|
|
|
2204
2230
|
"tw-border-border",
|
|
2205
2231
|
"tw-rounded-full",
|
|
2206
2232
|
"tw-bg-white",
|
|
2207
|
-
|
|
2233
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-2',
|
|
2208
2234
|
"[&_svg]:data-[state=unchecked]:tw-hidden",
|
|
2209
2235
|
// Lucide Circle is stroke-only — force fill to match the stroke
|
|
2210
2236
|
// (currentColor) so the indicator reads as a solid dot.
|
|
@@ -2212,14 +2238,14 @@ var variants3 = cva(
|
|
|
2212
2238
|
"group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
|
|
2213
2239
|
"group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500"
|
|
2214
2240
|
],
|
|
2215
|
-
check: [
|
|
2241
|
+
check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', "[&_svg]:tw-text-primary"],
|
|
2216
2242
|
checkbox: [
|
|
2217
2243
|
"[&_svg]:tw-text-white",
|
|
2218
2244
|
"tw-border",
|
|
2219
2245
|
"tw-border-solid",
|
|
2220
2246
|
"tw-border-neutral-200",
|
|
2221
2247
|
"tw-rounded",
|
|
2222
|
-
|
|
2248
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-3',
|
|
2223
2249
|
"[&_svg]:data-[state=unchecked]:tw-hidden",
|
|
2224
2250
|
"group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
|
|
2225
2251
|
"group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary",
|
|
@@ -2230,7 +2256,7 @@ var variants3 = cva(
|
|
|
2230
2256
|
"tw-size-5",
|
|
2231
2257
|
// Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
|
|
2232
2258
|
// to the indicator slot so it doesn't overflow.
|
|
2233
|
-
|
|
2259
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-5',
|
|
2234
2260
|
"tw-text-neutral-400",
|
|
2235
2261
|
"data-[state=unchecked]:tw-rotate-180",
|
|
2236
2262
|
"group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500",
|
|
@@ -2281,7 +2307,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
|
|
|
2281
2307
|
// 20px container fits the 16px Lucide glyph plus 2px breathing room
|
|
2282
2308
|
// each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
|
|
2283
2309
|
"tw-size-5",
|
|
2284
|
-
|
|
2310
|
+
'[&_svg:not([class*="tw-size-"])]:tw-size-4',
|
|
2285
2311
|
"group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400",
|
|
2286
2312
|
"group-data-[variant=argo]/dropdown-menu-content:tw-text-primary",
|
|
2287
2313
|
"group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground",
|
|
@@ -2989,32 +3015,42 @@ init_utils();
|
|
|
2989
3015
|
|
|
2990
3016
|
// src/components/InputGroup/InputGroupAddon.tsx
|
|
2991
3017
|
init_utils();
|
|
2992
|
-
var addonVariants = cva(
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
"[&:not(:empty)]:tw-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3018
|
+
var addonVariants = cva(
|
|
3019
|
+
[
|
|
3020
|
+
"tw-flex",
|
|
3021
|
+
"tw-items-center",
|
|
3022
|
+
"tw-gap-1",
|
|
3023
|
+
// Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
|
|
3024
|
+
"[&_svg:not([class*='tw-size-'])]:tw-size-4",
|
|
3025
|
+
"[&_svg]:tw-shrink-0"
|
|
3026
|
+
],
|
|
3027
|
+
{
|
|
3028
|
+
defaultVariants: {
|
|
3029
|
+
align: "inline-start"
|
|
3030
|
+
},
|
|
3031
|
+
variants: {
|
|
3032
|
+
align: {
|
|
3033
|
+
"inline-start": ["tw-order-first", "[&:not(:empty)]:tw-pl-4"],
|
|
3034
|
+
"inline-end": ["tw-order-last", "[&:not(:empty)]:tw-pr-4"],
|
|
3035
|
+
"block-start": [
|
|
3036
|
+
"tw-order-first",
|
|
3037
|
+
// `tw-w-full` needs to be empty-conditional too — when the addon
|
|
3038
|
+
// has no content the root stays in flex-row, and a 100%-wide
|
|
3039
|
+
// empty addon would claim half of the input row beside the input.
|
|
3040
|
+
"[&:not(:empty)]:tw-w-full",
|
|
3041
|
+
"[&:not(:empty)]:tw-px-4",
|
|
3042
|
+
"[&:not(:empty)]:tw-py-1.5"
|
|
3043
|
+
],
|
|
3044
|
+
"block-end": [
|
|
3045
|
+
"tw-order-last",
|
|
3046
|
+
"[&:not(:empty)]:tw-w-full",
|
|
3047
|
+
"[&:not(:empty)]:tw-px-4",
|
|
3048
|
+
"[&:not(:empty)]:tw-py-1.5"
|
|
3049
|
+
]
|
|
3050
|
+
}
|
|
3015
3051
|
}
|
|
3016
3052
|
}
|
|
3017
|
-
|
|
3053
|
+
);
|
|
3018
3054
|
var InputGroupAddon = ({
|
|
3019
3055
|
children,
|
|
3020
3056
|
align = "inline-start",
|
|
@@ -3186,7 +3222,7 @@ var inputGroupVariants = cva(
|
|
|
3186
3222
|
defaultVariants: {
|
|
3187
3223
|
variant: "primary",
|
|
3188
3224
|
state: "default",
|
|
3189
|
-
sizing: "
|
|
3225
|
+
sizing: "medium",
|
|
3190
3226
|
focusVariant: "default"
|
|
3191
3227
|
},
|
|
3192
3228
|
compoundVariants: [
|