@keboola/design 2.0.0 → 2.0.1

package/src/blocks/InputOtp/index.ts

@@ -0,0 +1,23 @@
+import { use } from 'react';
+import { OTPInputContext, type RenderProps } from 'input-otp';
+
+export {
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+  type SlotProps as InputOtpRenderSlotProps,
+} from 'input-otp';
+
+/**
+ * Access the `input-otp` render context (slots, focus, hover) — use this inside a custom
+ * child of `<InputOtp>` to render slots yourself. Throws if called outside `<InputOtp>`.
+ */
+export const useInputOtpContext = (): RenderProps => {
+  const ctx = use(OTPInputContext);
+  if (!ctx.slots) {
+    throw new Error('useInputOtpContext must be used inside <InputOtp>.');
+  }
+  return ctx;
+};
+
+export * from './InputOtp';

package/src/components/Alert/AlertIcon.tsx

@@ -27,7 +27,7 @@ export const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (
       'tw-justify-center',
       'tw-self-start',
       'tw-p-0.5',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       'group-data-[variant=info]/alert:tw-text-secondary-500',
       'group-data-[variant=warning]/alert:tw-text-warning-500',
       'group-data-[variant=error]/alert:tw-text-error-500',

package/src/components/Badge/BadgeAddon.tsx

@@ -12,7 +12,7 @@ const addonVariants = cva(
     'tw-self-stretch',
     'tw-px-1',
     'has-[button]:tw-px-0',
-    '[&_svg]:tw-size-3',
+    '[&_svg:not([class*="tw-size-"])]:tw-size-3',
   ],
   {
     defaultVariants: {

package/src/components/Badge/BadgeButton.tsx

@@ -31,7 +31,7 @@ export const BadgeButton = ({
       // Default sizing for Lucide-icon children (which ship at 24×24); keeps
       // the visual baseline aligned with the previous FA-icon API and other
       // icon-wrapper components (ItemIcon, SidebarMenuIcon).
-      '[&_svg]:tw-size-3',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-3',
       className,
     )}
   >

package/src/components/Breadcrumb/BreadcrumbLink.tsx

@@ -36,7 +36,7 @@ export const BreadcrumbLink = ({
         'focus-visible:tw-rounded-sm',
 
         // Icon
-        '[&_svg]:tw-size-3.5',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
 
         // transition
         'tw-transition-colors',

package/src/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -17,7 +17,7 @@ export const BreadcrumbSeparator = ({ children, className, ...props }: Props) =>
 
       'tw-aspect-square',
       'tw-size-[15px]',
-      '[&_svg]:tw-size-2.5',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-2.5',
       'tw-text-muted-foreground',
       className,
     )}

package/src/components/Button/styles.ts

@@ -143,16 +143,39 @@ export const variants = cva(
         ],
       },
       size: {
-        medium: ['tw-max-h-10', 'tw-min-h-10', 'tw-px-4', 'tw-py-2.5', '[&_svg]:tw-size-4'],
-        small: ['tw-max-h-8', 'tw-min-h-8', 'tw-px-4', 'tw-py-1.5', '[&_svg]:tw-size-4'],
-        large: ['tw-max-h-12', 'tw-min-h-12', 'tw-px-4', 'tw-py-3.5', '[&_svg]:tw-size-4'],
-
-        'icon-lg': ['tw-size-12', 'tw-p-0', '[&_svg]:tw-size-6'],
-        icon: ['tw-size-10', 'tw-p-0', '[&_svg]:tw-size-4'],
-        'icon-sm': ['tw-size-8', 'tw-p-0', '[&_svg]:tw-size-4'],
-        'icon-xs': ['tw-size-6', 'tw-p-0', '[&_svg]:tw-size-4'],
-        'icon-2xs': ['!tw-inline-flex', 'tw-size-5', 'tw-max-h-5', '[&_svg]:tw-size-3'],
-        'icon-3xs': ['tw-h-fit', 'tw-w-fit', '[&_svg]:tw-size-4'],
+        medium: [
+          'tw-max-h-10',
+          'tw-min-h-10',
+          'tw-px-4',
+          'tw-py-2.5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+        ],
+        small: [
+          'tw-max-h-8',
+          'tw-min-h-8',
+          'tw-px-4',
+          'tw-py-1.5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+        ],
+        large: [
+          'tw-max-h-12',
+          'tw-min-h-12',
+          'tw-px-4',
+          'tw-py-3.5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+        ],
+
+        'icon-lg': ['tw-size-12', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
+        icon: ['tw-size-10', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        'icon-sm': ['tw-size-8', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        'icon-xs': ['tw-size-6', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        'icon-2xs': [
+          '!tw-inline-flex',
+          'tw-size-5',
+          'tw-max-h-5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
+        ],
+        'icon-3xs': ['tw-h-fit', 'tw-w-fit', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
       },
     },
   },

package/src/components/Combobox/ComboboxItemIndicator.tsx

@@ -67,7 +67,7 @@ export const ComboboxItemIndicator = ({
         'group-data-[variant=default]/combobox-content:tw-right-4',
         // Lucide SVGs default to 24×24 — constrain the rendered child so the
         // 16px indicator slot owns the actual size.
-        '[&_svg]:tw-size-4',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-4',
         'group-data-[highlighted]/combobox-item:tw-text-accent-foreground',
         'group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:tw-text-foreground',
         className,

package/src/components/Command/CommandItem/CommandItem.tsx

@@ -69,7 +69,7 @@ export const CommandItem = ({
     >
       <CheckIndicator variant={variant} />
       {icon && (
-        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg]:tw-size-4">
+        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg:not([class*='tw-size-'])]:tw-size-4">
           {icon}
         </span>
       )}

package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx

@@ -31,7 +31,7 @@ const variants = cva(
           'tw-rounded-full',
           'tw-bg-white',
 
-          '[&_svg]:tw-size-2',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-2',
           '[&_svg]:data-[state=unchecked]:tw-hidden',
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
@@ -39,7 +39,7 @@ const variants = cva(
           'group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary',
           'group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500',
         ],
-        check: ['[&_svg]:tw-size-3.5', '[&_svg]:tw-text-primary'],
+        check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', '[&_svg]:tw-text-primary'],
         checkbox: [
           '[&_svg]:tw-text-white',
           'tw-border',
@@ -47,7 +47,7 @@ const variants = cva(
           'tw-border-neutral-200',
           'tw-rounded',
 
-          '[&_svg]:tw-size-3',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
           '[&_svg]:data-[state=unchecked]:tw-hidden',
           'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary',
           'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary',
@@ -58,7 +58,7 @@ const variants = cva(
           'tw-size-5',
           // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
           // to the indicator slot so it doesn't overflow.
-          '[&_svg]:tw-size-5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           'tw-text-neutral-400',
           'data-[state=unchecked]:tw-rotate-180',
           'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500',

package/src/components/DropdownMenu/ItemIcon.tsx

@@ -17,7 +17,7 @@ export const ItemIcon = ({ className, children, ...props }: Props) => (
       // 20px container fits the 16px Lucide glyph plus 2px breathing room
       // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
       'tw-size-5',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       'group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400',
       'group-data-[variant=argo]/dropdown-menu-content:tw-text-primary',
       'group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground',

package/src/components/Modal/ModalIcon.tsx

@@ -96,7 +96,7 @@ export const ModalIcon = (props: Props) => {
                 'tw-text-white': props.color !== 'violet',
                 'tw-text-purple-500': props.color === 'violet',
               },
-              '[&_svg]:tw-size-6',
+              '[&_svg:not([class*="tw-size-"])]:tw-size-6',
               '[&_svg]:tw-aspect-square',
             )}
           >

package/src/components/Navbar/NavbarMenuItemAdornment.tsx

@@ -9,7 +9,7 @@ const variants = cva(
     'tw-justify-center',
     'tw-items-center',
 
-    '[&_svg]:tw-size-3',
+    '[&_svg:not([class*="tw-size-"])]:tw-size-3',
     '[&:not(svg)]:tw-h-5',
     '[&:not(svg)]:tw-min-w-5',
 
@@ -43,7 +43,7 @@ const variants = cva(
           'group-data-[accent=orange]/navbar:tw-bg-warning-500',
           'group-data-[accent=green]/navbar:tw-bg-primary-500',
         ],
-        'icon-button': ['tw-size-4', 'tw-max-h-9', 'tw-leading-9', 'tw-p-0'],
+        'icon-button': ['tw-size-4', '!tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
         shortcut: ['tw-bg-muted', 'tw-text-sidebar-foreground', 'tw-ml-auto'],
       },
     },

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -16,7 +16,7 @@ export const PaginationEllipsis = ({ className, ...props }: Props) => (
       'tw-justify-center',
 
       'tw-text-foreground',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className,
     )}
     {...props}

package/src/components/Select/SelectContent.tsx

@@ -10,7 +10,7 @@ const scrollButtonStyles = cn(
   'tw-justify-center',
   'tw-rounded-sm',
   'tw-p-1',
-  '[&_svg]:tw-size-5',
+  '[&_svg:not([class*="tw-size-"])]:tw-size-5',
 );
 
 type Variant = 'default' | 'argo';

package/src/components/Sidebar/SidebarGroup/SidebarGroupAction.tsx

@@ -34,7 +34,7 @@ export const SidebarGroupAction = ({
       'tw-rounded-full',
 
       // svg defaults: size + colour
-      '[&_svg]:tw-size-3',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-3',
       '[&_svg]:tw-text-neutral-400',
       'hover:[&_svg]:tw-text-secondary-600',
 

package/src/components/Sidebar/SidebarMenu/SidebarMenuAction.tsx

@@ -51,7 +51,7 @@ export const SidebarMenuAction = ({
 
         // icon styling
         '[&_svg]:tw-shrink-0',
-        '[&_svg]:tw-size-3.5',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
         '[&_svg]:tw-text-sidebar-accent-foreground',
 
         // focus visible

package/src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx

@@ -21,7 +21,7 @@ export const SidebarMenuIcon = ({
       'tw-shrink-0',
       'tw-p-0.5',
       'tw-text-sidebar-primary',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className,
     )}
   >

package/src/components/Timeline/TimelineConnector.tsx

@@ -74,7 +74,11 @@ const connector = cva(
           'tw-text-nowrap',
           'tw-text-xs',
         ],
-        icon: ['tw-bg-white', '[&_svg]:tw-size-4', '[&_svg]:tw-text-neutral-300'],
+        icon: [
+          'tw-bg-white',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+          '[&_svg]:tw-text-neutral-300',
+        ],
         line: [
           'tw-min-w-8',
           'tw-overflow-hidden',

package/src/components/Toast/ToastDismiss.tsx

@@ -20,7 +20,7 @@ export const ToastDismiss = ({
       'tw-row-start-1',
       'tailwindcss-preflight',
       '[&_svg]:tw-aspect-square',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       '[&_svg]:tw-m-1',
 
       'tw-text-white',

package/src/components/Toast/ToastRoot.tsx

@@ -112,7 +112,7 @@ export const ToastRoot = ({
             'tw-aspect-square',
             'tw-size-5',
             'tw-shrink-0',
-            '[&_svg]:tw-size-5',
+            '[&_svg:not([class*="tw-size-"])]:tw-size-5',
             'tw-text-white',
             'group-data-[variant=default]/toast:tw-text-popover-foreground',
           )}

package/src/components/Toggle/Toggle.tsx

@@ -185,7 +185,7 @@ export const Toggle = ({
         </span>
       )}
       {icon && (
-        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg]:tw-size-4">
+        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg:not([class*='tw-size-'])]:tw-size-4">
           {renderLegacyIcon(icon)}
         </span>
       )}

package/src/icons/index.ts

@@ -21,6 +21,7 @@ export {
   BellRing,
   Bold,
   BookOpen,
+  Box,
   Braces,
   Bug,
   Calendar,
@@ -161,6 +162,7 @@ export {
   StickyNote,
   Strikethrough,
   Table,
+  TableProperties,
   ThumbsDown,
   ThumbsUp,
   ToggleRight,

package/src/index.ts

@@ -81,6 +81,7 @@ export * from './blocks/AutoSaveTextarea';
 export * from './blocks/ColorInput';
 export * from './blocks/NumberInput';
 export * from './blocks/PasswordInput';
+export * from './blocks/InputOtp';
 export * from './blocks/Form';
 export { Truncated } from './components/Truncated';
 export * from './components/ZoomableSvg';