@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.
Files changed (98) hide show
  1. package/dist/icons.cjs +32 -0
  2. package/dist/icons.js +1 -1
  3. package/dist/index.cjs +507 -103
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +495 -106
  6. package/dist/index.js.map +1 -1
  7. package/dist/markdown-editor.cjs +78 -42
  8. package/dist/markdown-editor.cjs.map +1 -1
  9. package/dist/markdown-editor.js +78 -42
  10. package/dist/markdown-editor.js.map +1 -1
  11. package/dist/mermaid.cjs +32 -9
  12. package/dist/mermaid.cjs.map +1 -1
  13. package/dist/mermaid.js +32 -9
  14. package/dist/mermaid.js.map +1 -1
  15. package/dist/styles.css +1 -1
  16. package/package.json +8 -6
  17. package/src/blocks/AIKit/PlanApproval.tsx +29 -12
  18. package/src/blocks/AIKit/PromptInput.test.tsx +53 -0
  19. package/src/blocks/AIKit/PromptInput.tsx +1 -1
  20. package/src/blocks/AIKit/Question.tsx +39 -11
  21. package/src/blocks/AIKit/SuggestedPrompt.stories.tsx +2 -8
  22. package/src/blocks/EmptyState/EmptyState.stories.tsx +5 -5
  23. package/src/blocks/EmptyState/EmptyState.tsx +2 -2
  24. package/src/blocks/ErrorState/ErrorState.stories.tsx +6 -6
  25. package/src/blocks/ErrorState/ErrorState.tsx +18 -3
  26. package/src/blocks/InputOtp/InputOtp.stories.tsx +214 -0
  27. package/src/blocks/InputOtp/InputOtp.test.tsx +162 -0
  28. package/src/blocks/InputOtp/InputOtp.tsx +62 -0
  29. package/src/blocks/InputOtp/InputOtpGroup.tsx +13 -0
  30. package/src/blocks/InputOtp/InputOtpSeparator.tsx +23 -0
  31. package/src/blocks/InputOtp/InputOtpSlot.styles.ts +52 -0
  32. package/src/blocks/InputOtp/InputOtpSlot.tsx +44 -0
  33. package/src/blocks/InputOtp/context.ts +23 -0
  34. package/src/blocks/InputOtp/index.ts +23 -0
  35. package/src/blocks/PageHeader/AGENTS.md +1 -1
  36. package/src/blocks/PageHeader/PageHeader.stories.tsx +6 -3
  37. package/src/blocks/PageHeader/PageHeaderIndex.tsx +2 -2
  38. package/src/blocks/PageLayout/AGENTS.md +3 -3
  39. package/src/blocks/PageLayout/PageLayout.stories.tsx +7 -4
  40. package/src/blocks/PageLayout/PageLayout.tsx +1 -18
  41. package/src/blocks/PageToolbar/PageToolbar.stories.tsx +79 -74
  42. package/src/blocks/PageToolbar/PageToolbar.tsx +45 -4
  43. package/src/blocks/PageToolbar/PageToolbarToken.tsx +61 -0
  44. package/src/blocks/SearchInput/SearchInput.tsx +2 -2
  45. package/src/components/Alert/AlertDescription.tsx +5 -0
  46. package/src/components/Alert/AlertIcon.tsx +1 -1
  47. package/src/components/Badge/Badge.stories.tsx +3 -5
  48. package/src/components/Badge/BadgeAddon.tsx +1 -1
  49. package/src/components/Badge/BadgeButton.tsx +1 -1
  50. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +4 -4
  51. package/src/components/Breadcrumb/BreadcrumbLink.tsx +1 -1
  52. package/src/components/Breadcrumb/BreadcrumbSeparator.tsx +1 -1
  53. package/src/components/Button/ButtonInline.stories.tsx +3 -3
  54. package/src/components/Button/ButtonInline.tsx +4 -0
  55. package/src/components/Button/styles.ts +33 -10
  56. package/src/components/Card/Card.stories.tsx +2 -2
  57. package/src/components/Combobox/ComboboxItemIndicator.tsx +1 -1
  58. package/src/components/Command/CommandItem/CommandItem.tsx +1 -1
  59. package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx +4 -4
  60. package/src/components/DropdownMenu/ItemIcon.tsx +1 -1
  61. package/src/components/FormGroup/FormGroup.stories.tsx +2 -2
  62. package/src/components/HoverCard/HoverCardContent.tsx +5 -0
  63. package/src/components/Input/Input.stories.tsx +2 -2
  64. package/src/components/InputGroup/InputGroup.stories.tsx +4 -5
  65. package/src/components/InputGroup/InputGroup.tsx +1 -1
  66. package/src/components/InputGroup/InputGroupAddon.tsx +35 -24
  67. package/src/components/Kbd/Kbd.stories.tsx +2 -2
  68. package/src/components/Label/Label.stories.tsx +2 -2
  69. package/src/components/Modal/ModalBody.tsx +5 -0
  70. package/src/components/Modal/ModalIcon.tsx +1 -1
  71. package/src/components/Navbar/Navbar.stories.tsx +4 -5
  72. package/src/components/Navbar/NavbarMenuItemAdornment.tsx +2 -2
  73. package/src/components/Pagination/Pagination.stories.tsx +0 -1
  74. package/src/components/Pagination/PaginationEllipsis.tsx +1 -1
  75. package/src/components/Popover/PopoverContent.tsx +4 -0
  76. package/src/components/Select/SelectContent.tsx +1 -1
  77. package/src/components/Select/SelectTrigger.tsx +1 -1
  78. package/src/components/Separator/Separator.stories.tsx +19 -0
  79. package/src/components/Separator/Separator.test.tsx +39 -0
  80. package/src/components/Separator/Separator.tsx +42 -11
  81. package/src/components/Sidebar/Sidebar.stories.tsx +6 -5
  82. package/src/components/Sidebar/SidebarGroup/SidebarGroupAction.tsx +1 -1
  83. package/src/components/Sidebar/SidebarMenu/SidebarMenuAction.tsx +1 -1
  84. package/src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx +1 -1
  85. package/src/components/Table/Table.stories.tsx +16 -16
  86. package/src/components/Timeline/Timeline.stories.tsx +8 -8
  87. package/src/components/Timeline/TimelineConnector.tsx +5 -1
  88. package/src/components/Toast/ToastDismiss.tsx +1 -1
  89. package/src/components/Toast/ToastRoot.tsx +1 -1
  90. package/src/components/Toggle/Toggle.tsx +1 -1
  91. package/src/components/ToggleGroup/ToggleGroup.stories.tsx +60 -0
  92. package/src/components/ToggleGroup/ToggleGroup.tsx +99 -0
  93. package/src/components/ToggleGroup/index.ts +1 -0
  94. package/src/components/Tooltip/Tooltip.stories.tsx +2 -2
  95. package/src/hooks/useAutosizeInput.stories.tsx +2 -2
  96. package/src/icons/index.ts +8 -0
  97. package/src/index.ts +2 -0
  98. package/src/patterns/FilterToolbar.stories.tsx +248 -44
@@ -586,15 +586,38 @@ var init_styles = __esm({
586
586
  ]
587
587
  },
588
588
  size: {
589
- medium: ["tw-max-h-10", "tw-min-h-10", "tw-px-4", "tw-py-2.5", "[&_svg]:tw-size-4"],
590
- small: ["tw-max-h-8", "tw-min-h-8", "tw-px-4", "tw-py-1.5", "[&_svg]:tw-size-4"],
591
- large: ["tw-max-h-12", "tw-min-h-12", "tw-px-4", "tw-py-3.5", "[&_svg]:tw-size-4"],
592
- "icon-lg": ["tw-size-12", "tw-p-0", "[&_svg]:tw-size-6"],
593
- icon: ["tw-size-10", "tw-p-0", "[&_svg]:tw-size-4"],
594
- "icon-sm": ["tw-size-8", "tw-p-0", "[&_svg]:tw-size-4"],
595
- "icon-xs": ["tw-size-6", "tw-p-0", "[&_svg]:tw-size-4"],
596
- "icon-2xs": ["!tw-inline-flex", "tw-size-5", "tw-max-h-5", "[&_svg]:tw-size-3"],
597
- "icon-3xs": ["tw-h-fit", "tw-w-fit", "[&_svg]:tw-size-4"]
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
- "[&_svg]:tw-size-4",
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
- "[&_svg]:tw-size-5",
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
- "[&_svg]:tw-size-2",
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: ["[&_svg]:tw-size-3.5", "[&_svg]:tw-text-primary"],
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
- "[&_svg]:tw-size-3",
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
- "[&_svg]:tw-size-5",
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
- "[&_svg]:tw-size-4",
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(["tw-flex", "tw-items-center", "tw-gap-1"], {
2993
- defaultVariants: {
2994
- align: "inline-start"
2995
- },
2996
- variants: {
2997
- align: {
2998
- "inline-start": ["tw-order-first", "[&:not(:empty)]:tw-pl-4"],
2999
- "inline-end": ["tw-order-last", "[&:not(:empty)]:tw-pr-4"],
3000
- "block-start": [
3001
- "tw-order-first",
3002
- // `tw-w-full` needs to be empty-conditional too — when the addon
3003
- // has no content the root stays in flex-row, and a 100%-wide
3004
- // empty addon would claim half of the input row beside the input.
3005
- "[&:not(:empty)]:tw-w-full",
3006
- "[&:not(:empty)]:tw-px-4",
3007
- "[&:not(:empty)]:tw-py-1.5"
3008
- ],
3009
- "block-end": [
3010
- "tw-order-last",
3011
- "[&:not(:empty)]:tw-w-full",
3012
- "[&:not(:empty)]:tw-px-4",
3013
- "[&:not(:empty)]:tw-py-1.5"
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: "default",
3225
+ sizing: "medium",
3190
3226
  focusVariant: "default"
3191
3227
  },
3192
3228
  compoundVariants: [