@keboola/design 11.0.0 → 11.2.0

package/dist/Modal-wqG8nJiK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-wqG8nJiK.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n  as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n  <div\n    data-slot=\"modal-body\"\n    className={cn(\n      // scrollable body - takes available space and scrolls when content overflows\n      'tw:flex-1',\n      'tw:overflow-y-auto',\n\n      // argo: soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n      'tw:group-data-[argo=true]/modal:scroll-fade-y',\n\n      // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n      'tw:group-data-[argo=false]/modal:px-7',\n      'tw:group-data-[argo=true]/modal:px-4',\n      'tw:py-1',\n\n      // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n      \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n      'tw:[&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport const ModalContent = ({\n  size = 'medium',\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const renderArgo = useArgoDesign();\n\n  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n    // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n    event.stopPropagation();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal>\n      <ModalOverlay>\n        <Content\n          // props first so callers can't override the computed data-argo / data-size\n          {...props}\n          data-argo={renderArgo}\n          data-size={size}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/modal',\n\n            // positioning - horizontally centered; vertical anchor depends on the design language\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-[1051]',\n\n            // legacy: anchored near the top; argo: centered in the viewport (like AlertModal)\n            'tw:data-[argo=false]:top-20',\n            'tw:data-[argo=true]:top-1/2',\n            'tw:data-[argo=true]:-translate-y-1/2',\n\n            // sizing - responsive max dimensions\n            'tw:w-full',\n            'tw:max-w-2xl',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n            // layout\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n            'tw:data-[argo=false]:rounded-lg',\n            'tw:data-[argo=true]:rounded-3xl',\n            'tw:bg-card',\n            'tw:text-card-foreground',\n\n            // Vertical (edge) padding lives here so it survives an omitted Header or Footer.\n            // Horizontal padding is owned by Header / Body / Footer, so the Body runs full-bleed and\n            // its scrollbar sits at the modal edge (see ModalBody).\n            'tw:data-[argo=false]:py-8',\n            'tw:data-[argo=true]:py-4',\n\n            // animation — shared\n            'tw:duration-200',\n            'tw:data-[state=open]:animate-in',\n            'tw:data-[state=open]:fade-in-0',\n            'tw:data-[state=closed]:animate-out',\n            'tw:data-[state=closed]:fade-out-0',\n\n            // NOTE: no `slide-*-left-1/2` (both) or argo `slide-*-top-1/2`. Those re-pinned the\n            // -50%/-50% centring during the animation under v3, where centring and the animation\n            // shared the `transform` property (the animation overrode it). Under v4 the centring\n            // uses the `translate` PROPERTY while tw-animate-css animates `transform` — they compose\n            // instead of overriding, so a -50% enter-translate stacks on the -50% centring (= -100%)\n            // and the modal flies in from the top-left. Centring now persists on its own, so we\n            // animate transform-only (zoom + fade) and the modal stays put.\n\n            // legacy: slide-down + zoom (top-anchored via `top-20`, so no `translate-y` to double)\n            'tw:data-[argo=false]:data-[state=open]:zoom-in-80',\n            'tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]',\n            'tw:data-[argo=false]:data-[state=closed]:zoom-out-80',\n            'tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]',\n\n            // argo: pop from the centre — zoom only\n            'tw:data-[argo=true]:data-[state=open]:zoom-in-95',\n            'tw:data-[argo=true]:data-[state=closed]:zoom-out-95',\n\n            {\n              'tw:max-w-[480px]': size === 'small',\n              'tw:max-w-4xl': size === 'large',\n            },\n\n            className,\n          )}\n          onEscapeKeyDown={handleEscapeKeyDown}\n        >\n          {children}\n        </Content>\n      </ModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const ModalFooter = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    className={cn(\n      // Own horizontal padding (ModalContent owns the vertical edge padding)\n      'tw:group-data-[argo=false]/modal:px-7',\n      'tw:group-data-[argo=true]/modal:px-4',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:col-start-3',\n      'tw:row-start-1',\n      'tw:self-start',\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-1',\n      // argo: gutter separating the actions/close from the title (carried here so the grid needs no\n      // column gap — see ModalHeader)\n      'tw:group-data-[argo=true]/modal:ml-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Separator } from '../Separator';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n  /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n  icon?: ReactNode;\n  /** Visible subtitle below the title (also fills `aria-describedby`). */\n  description?: ReactNode;\n  /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n  'aria-description'?: string;\n  /** Controls rendered top-right, before the close icon. */\n  actions?: ReactNode;\n  /** Hide the top-right close icon. */\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n  className,\n  icon,\n  description,\n  'aria-description': ariaDescription,\n  actions,\n  hideCloseIcon = false,\n  children,\n  ...props\n}: Props) => (\n  <div\n    {...props}\n    data-slot=\"modal-header\"\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:group-data-[argo=false]/modal:px-7',\n      'tw:group-data-[argo=true]/modal:px-4',\n      className,\n    )}\n  >\n    {icon}\n\n    {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n    {(actions || !hideCloseIcon) && (\n      <ModalActions>\n        {actions}\n        {!hideCloseIcon && (\n          <Close asChild>\n            <Button variant=\"invisible\" size=\"icon-sm\">\n              <X />\n              <span className=\"tw:sr-only\">Close</span>\n            </Button>\n          </Close>\n        )}\n      </ModalActions>\n    )}\n    {(description || ariaDescription) && (\n      <ModalDescription\n        className={cn(\n          'tw:col-start-1',\n          'tw:col-end-4',\n          'tw:row-start-2',\n          description ? 'tw:mt-1' : 'tw:sr-only',\n        )}\n      >\n        {description ?? ariaDescription}\n      </ModalDescription>\n    )}\n\n    {/* Legacy-only separator; shown when a Body follows, hidden when that body hosts Tabs. */}\n    <div\n      className={cn(\n        'tw:col-start-1',\n        'tw:col-end-4',\n        'tw:mt-5',\n        'tw:hidden',\n        'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block',\n        'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden',\n      )}\n    >\n      <Separator orientation=\"horizontal\" />\n    </div>\n  </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n  color: NamedColor | (string & {});\n  icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`. Authored inside `Modal.Header`. For a remote image badge (a\n * component or backend logo fetched by URL) use `Modal.Image` instead.\n *\n * - **Legacy anatomy:** a solid-filled circular badge docked to the top-left of `Modal.Content`\n *   (absolutely positioned, so it renders identically wherever it is authored).\n * - **Argo anatomy** (`data-argo` on `Modal.Content`): a small soft-tinted inline badge in the\n *   header grid, next to the title.\n *\n * Both variants are rendered and toggled purely via CSS (`group-data-[argo=true]/modal:`) — no\n * context. Use the categorical `color` (`red` destructive, `orange` warning, `green` success,\n * `blue` info, `gray` neutral, `violet` agent) to encode meaning; the palette stays fixed across\n * brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n  const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n  return (\n    <span\n      data-slot=\"modal-icon\"\n      className={cn(\n        'tw:flex',\n        'tw:shrink-0',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:[&_svg]:aspect-square',\n\n        // legacy: solid-filled circular badge floating at the modal's top-left\n        'tw:group-data-[argo=false]/modal:absolute',\n        'tw:group-data-[argo=false]/modal:top-0',\n        'tw:group-data-[argo=false]/modal:left-8',\n        'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n        'tw:group-data-[argo=false]/modal:size-12',\n        'tw:group-data-[argo=false]/modal:rounded-full',\n        'tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n\n        // argo: soft-tinted inline badge in the header grid's first column\n        'tw:group-data-[argo=true]/modal:col-start-1',\n        'tw:group-data-[argo=true]/modal:row-start-1',\n        'tw:group-data-[argo=true]/modal:self-start',\n        'tw:group-data-[argo=true]/modal:mr-3',\n        'tw:group-data-[argo=true]/modal:size-8',\n        'tw:group-data-[argo=true]/modal:rounded',\n        'tw:group-data-[argo=true]/modal:overflow-hidden',\n        'tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n        // legacy palette: solid fill + white glyph (violet is the exception — tinted)\n        {\n          'tw:group-data-[argo=false]/modal:bg-warning-500': color === 'orange',\n          'tw:group-data-[argo=false]/modal:bg-blue-500': color === 'blue',\n          'tw:group-data-[argo=false]/modal:bg-green-500': color === 'green',\n          'tw:group-data-[argo=false]/modal:bg-error-500': color === 'red',\n          'tw:group-data-[argo=false]/modal:bg-neutral-150': color === 'gray',\n          'tw:group-data-[argo=false]/modal:bg-purple-100': color === 'violet',\n          'tw:group-data-[argo=false]/modal:text-white': color !== 'violet',\n          'tw:group-data-[argo=false]/modal:text-purple-500': color === 'violet',\n        },\n\n        // argo palette: soft tint + matching glyph colour\n        {\n          'tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500':\n            color === 'orange',\n          'tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600':\n            color === 'blue',\n          'tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900':\n            color === 'green',\n          'tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500':\n            color === 'red',\n          'tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500':\n            color === 'gray',\n          'tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500':\n            color === 'violet',\n        },\n\n        // custom (non-named) colour: caller-provided fill + white glyph\n        { 'tw:text-white': !!customColor },\n      )}\n      style={customColor ? { backgroundColor: customColor } : undefined}\n    >\n      {icon}\n    </span>\n  );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n  src: string;\n  /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n  alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n  const [hasImageError, setHasImageError] = useState(false);\n\n  // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n  // transient failure) isn't permanently hidden by an earlier onError.\n  useEffect(() => setHasImageError(false), [src]);\n\n  if (hasImageError) return null;\n\n  return (\n    <span\n      data-slot=\"modal-image\"\n      className={cn(\n        'tw:shrink-0',\n        'tw:overflow-hidden',\n\n        // legacy: circular badge floating at the top-left of the modal\n        'tw:group-data-[argo=false]/modal:absolute',\n        'tw:group-data-[argo=false]/modal:top-0',\n        'tw:group-data-[argo=false]/modal:left-8',\n        'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n        'tw:group-data-[argo=false]/modal:size-12',\n        'tw:group-data-[argo=false]/modal:rounded-full',\n\n        // argo: inline badge in the header grid's first column\n        'tw:group-data-[argo=true]/modal:flex',\n        'tw:group-data-[argo=true]/modal:col-start-1',\n        'tw:group-data-[argo=true]/modal:row-start-1',\n        'tw:group-data-[argo=true]/modal:self-start',\n        'tw:group-data-[argo=true]/modal:mr-3',\n        'tw:group-data-[argo=true]/modal:items-center',\n        'tw:group-data-[argo=true]/modal:justify-center',\n        'tw:group-data-[argo=true]/modal:rounded',\n        'tw:group-data-[argo=true]/modal:size-8',\n      )}\n    >\n      <img\n        src={src}\n        alt={alt}\n        className=\"tw:size-full tw:object-contain\"\n        onError={() => setHasImageError(true)}\n      />\n    </span>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog for confirmations, forms, and detail views. Built on Radix Dialog.\n *\n * **When to use:** the user must act before continuing (confirm a destructive action, fill a short form,\n * view a focused detail panel). Use the compound parts `Modal.Trigger`, `Modal.Content`, `Modal.Header`,\n * `Modal.Body`, `Modal.Footer`, and optionally `Modal.Icon` for a status-coloured header glyph.\n * **When NOT to use:** for slide-in side editing use `Sheet`; for an inline destructive confirmation anchored\n * to its trigger use `Popconfirm`; for hover previews use `HoverCard`.\n * **Composition:** wrap `Modal.Content` around `Modal.Header` + `Modal.Body` + `Modal.Footer`. Put `useAppForm`\n * `FormBody` inside `Modal.Body` and the submit / cancel buttons inside `Modal.Footer`.\n *\n * @see RECIPES.md#modal-form — for the canonical form-in-modal composition\n * @see RECIPES.md#confirm-dialog — for destructive-confirm dialogs\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":"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"}

package/dist/ModalTitle-C76ke2eo.js

@@ -0,0 +1,28 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { jsx } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Overlay, Title } from "@radix-ui/react-dialog";
+//#region src/components/Modal/ModalOverlay.tsx
+const ModalOverlay = ({ ref, className, disableTransition = false, ...props }) => /* @__PURE__ */ jsx(Overlay, {
+	...props,
+	ref,
+	className: cn("tw:fixed", "tw:inset-0", "tw:z-[1051]", "tw:bg-black/50", "tw:data-[state=open]:duration-500", "tw:data-[state=open]:fade-in-0", "tw:data-[state=closed]:duration-500", "tw:data-[state=closed]:fade-out-0", { "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out": !disableTransition }, className),
+	onClick: (event) => event.stopPropagation()
+});
+//#endregion
+//#region src/components/Modal/ModalDescription.tsx
+const ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+	className: cn("tw:text-sm", "tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-neutral-400", className),
+	...props
+});
+//#endregion
+//#region src/components/Modal/ModalTitle.tsx
+const ModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Title, {
+	...props,
+	className: cn("tw:flex-1", "tw:break-anywhere", "tw:text-base", "tw:font-semibold", className),
+	children
+});
+//#endregion
+export { ModalDescription, ModalOverlay, ModalTitle };
+
+//# sourceMappingURL=ModalTitle-C76ke2eo.js.map

package/dist/ModalTitle-C76ke2eo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle-C76ke2eo.js","names":[],"sources":["../src/components/Modal/ModalOverlay.tsx","../src/components/Modal/ModalDescription.tsx","../src/components/Modal/ModalTitle.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Overlay } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Overlay> & {\n  disableTransition?: boolean;\n};\n\nexport const ModalOverlay = ({ ref, className, disableTransition = false, ...props }: Props) => (\n  <Overlay\n    {...props}\n    ref={ref}\n    className={cn(\n      // positioning\n      'tw:fixed',\n      'tw:inset-0',\n      'tw:z-[1051]',\n\n      // background\n      'tw:bg-black/50',\n\n      // opening animation\n      'tw:data-[state=open]:duration-500',\n      'tw:data-[state=open]:fade-in-0',\n\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      {\n        'tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out': !disableTransition,\n      },\n      className,\n    )}\n    onClick={(event) => event.stopPropagation()}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DialogPrimitive.Description>;\n\nexport const ModalDescription = ({ className, ...props }: Props) => (\n  <DialogPrimitive.Description\n    className={cn(\n      'tw:text-sm',\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-neutral-400',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Title } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Title>;\n\nexport const ModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    className={cn('tw:flex-1', 'tw:break-anywhere', 'tw:text-base', 'tw:font-semibold', className)}\n  >\n    {children}\n  </Title>\n);\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,EAAE,KAAK,WAAW,oBAAoB,OAAO,GAAG,YAC3E,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GAET,YACA,cACA,eAGA,kBAGA,qCACA,kCAGA,uCACA,qCACA,EACE,sEAAsE,CAAC,kBACzE,GACA,SACF;CACA,UAAU,UAAU,MAAM,gBAAgB;AAC3C,CAAA;;;AC5BH,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GACT,cACA,gBACA,sBACA,kBACA,uBACA,SACF;CACA,GAAI;AACL,CAAA;;;ACXH,MAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YACnD,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAAG,aAAa,qBAAqB,gBAAgB,oBAAoB,SAAS;CAE5F;AACI,CAAA"}

package/dist/MultiActionButtonGroup-BiIIubiL.js

@@ -0,0 +1,33 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { ButtonGroup } from "./internal/components/ButtonGroup.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/MultiActionButtonGroup/MultiActionButton.tsx
+const MultiActionButton = ({ disabled, icon, isLoading, label, onClick, tooltipContent, tooltipVariant, "data-testid": dataTestId }) => /* @__PURE__ */ jsx(Tooltip, {
+	placement: "top",
+	tooltip: tooltipContent,
+	triggerAsChild: true,
+	variant: tooltipVariant,
+	children: /* @__PURE__ */ jsx(Button, {
+		disabled,
+		isLoading,
+		"aria-label": label,
+		onClick,
+		variant: "invisible",
+		size: "icon",
+		"data-testid": dataTestId,
+		children: !isLoading && icon
+	})
+});
+//#endregion
+//#region src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx
+const MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(ButtonGroup, {
+	className: cn("tw:text-nowrap", className),
+	children
+});
+MultiActionButtonGroup.Button = MultiActionButton;
+//#endregion
+export { MultiActionButtonGroup };
+
+//# sourceMappingURL=MultiActionButtonGroup-BiIIubiL.js.map

package/dist/MultiActionButtonGroup-BiIIubiL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionButtonGroup-BiIIubiL.js","names":[],"sources":["../src/blocks/MultiActionButtonGroup/MultiActionButton.tsx","../src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\n\ntype Props = {\n  disabled?: boolean;\n  icon: ReactNode;\n  isLoading?: boolean;\n  label: string;\n  onClick: ComponentProps<typeof Button>['onClick'];\n  tooltipContent: ReactNode;\n  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];\n  'data-testid'?: string;\n};\n\nexport const MultiActionButton = ({\n  disabled,\n  icon,\n  isLoading,\n  label,\n  onClick,\n  tooltipContent,\n  tooltipVariant,\n  'data-testid': dataTestId,\n}: Props) => (\n  <Tooltip placement=\"top\" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>\n    <Button\n      disabled={disabled}\n      isLoading={isLoading}\n      aria-label={label}\n      onClick={onClick}\n      variant=\"invisible\"\n      size=\"icon\"\n      data-testid={dataTestId}\n    >\n      {!isLoading && icon}\n    </Button>\n  </Tooltip>\n);\n","import type { PropsWithChildren } from 'react';\n\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { cn } from '../../utils';\n\nimport { MultiActionButton } from './MultiActionButton';\n\ntype Props = {\n  className?: string;\n} & PropsWithChildren;\n\nexport const MultiActionButtonGroup = ({ children, className }: Props) => (\n  <ButtonGroup className={cn('tw:text-nowrap', className)}>{children}</ButtonGroup>\n);\n\nMultiActionButtonGroup.Button = MultiActionButton;\n"],"mappings":";;;;;;AAgBA,MAAa,qBAAqB,EAChC,UACA,MACA,WACA,OACA,SACA,gBACA,gBACA,eAAe,iBAEf,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS;CAAgB,gBAAA;CAAe,SAAS;CACxE,UAAA,oBAAC,QAAD;EACY;EACC;EACX,cAAY;EACH;EACT,SAAQ;EACR,MAAK;EACL,eAAa;EAEZ,UAAA,CAAC,aAAa;CACT,CAAA;AACD,CAAA;;;AC3BX,MAAa,0BAA0B,EAAE,UAAU,gBACjD,oBAAC,aAAD;CAAa,WAAW,GAAG,kBAAkB,SAAS;CAAI;AAAsB,CAAA;AAGlF,uBAAuB,SAAS"}

package/dist/Navbar-BfaPeLUL.js

@@ -0,0 +1,325 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Search } from "./icons-Cek151jC.js";
+import { ScrollArea } from "./internal/components/ScrollArea.js";
+import { BrandLogo } from "./BrandLogo-CJkRd0F8.js";
+import { Root, Slot, Slottable } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import BoringAvatar from "boring-avatars";
+import * as RadixAvatar from "@radix-ui/react-avatar";
+//#region src/components/Navbar/NavbarContent.tsx
+const NavbarContent = ({ children, className }) => /* @__PURE__ */ jsx(ScrollArea, {
+	type: "auto",
+	orientation: "horizontal",
+	className: "tw:flex-1",
+	scrollBarClassName: "tw:h-1.5",
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("tw:flex", "tw:py-1.5", className),
+		children
+	})
+});
+//#endregion
+//#region src/components/Navbar/NavbarFooter.tsx
+const NavbarFooter = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("tw:flex tw:items-center tw:gap-2 tw:py-1.5", className),
+	children
+});
+//#endregion
+//#region src/components/Navbar/NavbarHeader.tsx
+const NavbarHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("tw:overflow-hidden", "tw:py-1.5", className),
+	children: children ?? /* @__PURE__ */ jsx(BrandLogo, {
+		variant: "wordmark",
+		className: "tw:h-7"
+	})
+});
+//#endregion
+//#region src/components/Navbar/NavbarMenu.tsx
+const variants$2 = cva([
+	"tw:m-0",
+	"tw:p-0",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:gap-2"
+], {
+	variants: { marker: {
+		none: [],
+		"forward-slash": [
+			"tw:[&_li]:flex",
+			"tw:[&_li]:items-center",
+			"tw:[&_li]:before:content-[\"/\"]",
+			"tw:[&_li]:before:text-border",
+			"tw:[&_li]:before:text-sm",
+			"tw:[&_li]:before:mr-0.5",
+			"tw:[&_li:not(:first-child)]:before:ml-0.5"
+		]
+	} },
+	defaultVariants: { marker: "none" }
+});
+const NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsx("ul", {
+	...rest,
+	className: variants$2({
+		marker,
+		className
+	})
+});
+//#endregion
+//#region src/components/Navbar/NavbarMenuAvatar.tsx
+const NavbarMenuAvatar = ({ ref, className, type = "button", src, alt, ...rest }) => {
+	const altText = alt ?? "Avatar";
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		ref,
+		type,
+		className: cn("tw:flex", "tw:items-center", "tw:justify-center", "tw:size-8", "tw:aspect-square", "tw:overflow-hidden", "tw:shrink-0", "tw:rounded-lg", "tw:bg-transparent", "tw:cursor-pointer", "tw:disabled:opacity-50", "tw:disabled:cursor-not-allowed", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-sidebar-ring/50", className),
+		children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { children: [/* @__PURE__ */ jsx(RadixAvatar.Image, {
+			src,
+			alt: altText,
+			className: "tw:size-full tw:object-cover"
+		}), /* @__PURE__ */ jsx(RadixAvatar.Fallback, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(BoringAvatar, {
+				square: true,
+				name: altText,
+				variant: "beam",
+				colors: [
+					"#1F8FFF",
+					"#004787",
+					"#28D8FF",
+					"#925cff",
+					"#A8C2E6"
+				],
+				size: 32
+			})
+		})] })
+	});
+};
+//#endregion
+//#region src/components/Navbar/NavbarMenuItemAdornment.tsx
+const variants$1 = cva([
+	"tw:flex",
+	"tw:justify-center",
+	"tw:items-center",
+	"tw:[&_svg:not([class*=\"tw:size-\"])]:size-3",
+	"tw:[&:not(svg)]:h-5",
+	"tw:[&:not(svg)]:min-w-5",
+	"tw:p-1",
+	"tw:aspect-square",
+	"tw:rounded-md"
+], {
+	defaultVariants: { variant: "icon-accent" },
+	variants: { variant: {
+		icon: ["tw:text-sidebar-foreground", "tw:[&_svg]:text-sidebar-foreground"],
+		"icon-emphasized": ["tw:text-white", "tw:[&_svg]:text-white"],
+		"icon-accent": [
+			"tw:group-data-[accent=blue]/navbar:text-sidebar-primary",
+			"tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary",
+			"tw:group-data-[accent=purple]/navbar:text-purple-500",
+			"tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500",
+			"tw:group-data-[accent=orange]/navbar:text-warning-500",
+			"tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500",
+			"tw:group-data-[accent=green]/navbar:text-primary-500",
+			"tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500"
+		],
+		"icon-accent-emphasized": [
+			"tw:text-white",
+			"tw:[&_svg]:text-white",
+			"tw:group-data-[accent=blue]/navbar:bg-sidebar-primary",
+			"tw:group-data-[accent=purple]/navbar:bg-purple-500",
+			"tw:group-data-[accent=orange]/navbar:bg-warning-500",
+			"tw:group-data-[accent=green]/navbar:bg-primary-500"
+		],
+		"icon-button": [
+			"tw:size-4",
+			"tw:!p-0",
+			"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4"
+		],
+		shortcut: [
+			"tw:bg-muted",
+			"tw:text-sidebar-foreground",
+			"tw:ml-auto"
+		]
+	} }
+});
+const NavbarMenuItemAdornment = ({ ref, asChild = false, className, variant = "icon-accent", ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		...props,
+		ref,
+		className: variants$1({
+			variant,
+			className
+		})
+	});
+};
+//#endregion
+//#region src/components/Navbar/NavbarMenuButton.tsx
+const variants = cva([
+	"tw:group/navbar-menu-button",
+	"tw:box-border",
+	"tw:flex",
+	"tw:items-center",
+	"tw:gap-2",
+	"tw:bg-transparent",
+	"tw:leading-9",
+	"tw:border",
+	"tw:rounded-lg",
+	"tw:whitespace-nowrap",
+	"tw:select-none",
+	"tw:!outline-hidden",
+	"tw:focus-visible:ring-2",
+	"tw:focus-visible:ring-sidebar-ring/50",
+	"tw:disabled:opacity-50",
+	"tw:disabled:hover:bg-transparent",
+	"tw:disabled:cursor-not-allowed"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [
+			"tw:max-h-9",
+			"tw:border-transparent",
+			"tw:py-2",
+			"tw:px-1.5",
+			"tw:text-sidebar-foreground",
+			"tw:hover:bg-sidebar-accent",
+			"tw:aria-expanded:bg-sidebar-accent",
+			"tw:aria-[current=page]:bg-sidebar-accent",
+			"tw:aria-[current=page]:font-medium"
+		],
+		emphasized: [
+			"tw:max-h-9",
+			"tw:border-transparent",
+			"tw:py-2",
+			"tw:px-1.5",
+			"tw:text-sidebar-foreground",
+			"tw:hover:bg-sidebar-accent",
+			"tw:aria-expanded:bg-sidebar-accent",
+			"tw:aria-[current=page]:bg-sidebar-accent",
+			"tw:font-semibold"
+		],
+		icon: [
+			"tw:size-8",
+			"tw:aspect-square",
+			"tw:justify-center",
+			"tw:font-normal",
+			"tw:border-transparent",
+			"tw:text-primary",
+			"tw:[&_svg]:!text-primary",
+			"tw:hover:bg-sidebar-accent",
+			"tw:aria-expanded:bg-sidebar-accent"
+		],
+		search: [
+			"tw:max-h-8",
+			"tw:min-w-52",
+			"tw:px-3",
+			"tw:py-1",
+			"tw:font-normal",
+			"tw:border-input",
+			"tw:text-muted-foreground",
+			"tw:[&_svg]:!text-muted-foreground"
+		]
+	} }
+});
+const NavbarMenuButton = ({ ref, className, type = "button", children, icon, asChild = false, variant = "default", ...rest }) => {
+	const Comp = asChild ? Root : "button";
+	const isSearchVariant = variant === "search";
+	const isEmphasizedVariant = variant === "emphasized";
+	const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search, {}) : icon;
+	const adornmentVariant = (() => {
+		if (isSearchVariant || variant === "icon") return "icon-button";
+		if (isEmphasizedVariant) return "icon-accent-emphasized";
+		return "icon-accent";
+	})();
+	return /* @__PURE__ */ jsxs(Comp, {
+		...rest,
+		ref,
+		type,
+		"data-variant": variant,
+		className: cn(variants({
+			className,
+			variant
+		})),
+		children: [adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, {
+			variant: adornmentVariant,
+			children: adornment
+		}), /* @__PURE__ */ jsx(Slottable, { children })]
+	});
+};
+//#endregion
+//#region src/components/Navbar/NavbarMenuItem.tsx
+const NavbarMenuItem = ({ className, ...rest }) => /* @__PURE__ */ jsx("li", {
+	...rest,
+	className: cn("tw:flex", "tw:items-center", "tw:gap-2", className)
+});
+//#endregion
+//#region src/components/Navbar/Navbar.tsx
+const navbarClassnames = cva([
+	"tailwindcss-preflight",
+	"tw:group/navbar",
+	"tw:sticky",
+	"tw:top-0",
+	"tw:z-50",
+	"tw:flex",
+	"tw:gap-2",
+	"tw:items-center",
+	"tw:pl-2",
+	"tw:pr-3",
+	"tw:bg-sidebar",
+	"tw:text-sidebar-foreground",
+	"tw:text-xs",
+	"tw:leading-4"
+], {
+	defaultVariants: { bordered: false },
+	variants: { bordered: {
+		true: [
+			"tw:before:content",
+			"tw:before:h-0.5",
+			"tw:before:w-full",
+			"tw:before:absolute",
+			"tw:before:left-0",
+			"tw:before:top-0",
+			"tw:before:data-[accent=blue]:bg-sidebar-primary",
+			"tw:before:data-[accent=purple]:bg-purple-500",
+			"tw:before:data-[accent=green]:bg-primary-500",
+			"tw:before:data-[accent=orange]:bg-warning-500"
+		],
+		false: ""
+	} }
+});
+/**
+* Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a
+* top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,
+* and account/actions area.
+*
+* **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —
+* primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally
+* scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).
+* `bordered` renders a top accent hairline whose color follows `accent`. Renders a
+* `<nav>` landmark with a default `aria-label` — override it via `aria-label` /
+* `aria-labelledby` when a page has more than one nav.
+*
+* @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.
+*/
+const Navbar = ({ className, accent = "blue", bordered = false, ...rest }) => /* @__PURE__ */ jsx("nav", {
+	"aria-label": "Main navigation",
+	...rest,
+	"data-accent": accent,
+	className: navbarClassnames({
+		bordered,
+		className
+	})
+});
+Navbar.Header = NavbarHeader;
+Navbar.Footer = NavbarFooter;
+Navbar.Content = NavbarContent;
+Navbar.Menu = NavbarMenu;
+Navbar.MenuItem = NavbarMenuItem;
+Navbar.MenuButton = NavbarMenuButton;
+Navbar.MenuItemAdornment = NavbarMenuItemAdornment;
+Navbar.MenuAvatar = NavbarMenuAvatar;
+//#endregion
+export { Navbar };
+
+//# sourceMappingURL=Navbar-BfaPeLUL.js.map

package/dist/Navbar-BfaPeLUL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar-BfaPeLUL.js","names":["variants","variants"],"sources":["../src/components/Navbar/NavbarContent.tsx","../src/components/Navbar/NavbarFooter.tsx","../src/components/Navbar/NavbarHeader.tsx","../src/components/Navbar/NavbarMenu.tsx","../src/components/Navbar/NavbarMenuAvatar.tsx","../src/components/Navbar/NavbarMenuItemAdornment.tsx","../src/components/Navbar/NavbarMenuButton.tsx","../src/components/Navbar/NavbarMenuItem.tsx","../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const NavbarContent = ({ children, className }: Props) => (\n  <ScrollArea\n    type=\"auto\"\n    orientation=\"horizontal\"\n    className=\"tw:flex-1\"\n    scrollBarClassName=\"tw:h-1.5\"\n  >\n    <div className={cn('tw:flex', 'tw:py-1.5', className)}>{children}</div>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n// `flex items-center`, not a bare block: this slot is documented to hold several\n// items (search, notifications, avatar). As a block they are inline-level boxes\n// aligned on a text baseline, so a button carrying an icon and a text-only button\n// sit at different heights — visibly off-centre against the bar. Centring them is\n// a no-op for the common single-`Navbar.Menu` child, and `gap` only applies\n// between siblings, so existing compositions keep their spacing.\nexport const NavbarFooter = ({ children, className, ...rest }: Props) => (\n  <div {...rest} className={cn('tw:flex tw:items-center tw:gap-2 tw:py-1.5', className)}>\n    {children}\n  </div>\n);\n","import { type ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\ntype Props = ComponentProps<'div'>;\n\nexport const NavbarHeader = ({ children, className, ...rest }: Props) => (\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and\n  // renders null when the active brand ships no logo, so no provider gate needed.\n  <div {...rest} className={cn('tw:overflow-hidden', 'tw:py-1.5', className)}>\n    {children ?? <BrandLogo variant=\"wordmark\" className=\"tw:h-7\" />}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n// `tw:m-0` alongside `tw:p-0`: browsers give `<ul>` a default block margin. In a plain\n// app the scoped preflight resets it, but in kbc-ui the legacy Bootstrap layer (which sits\n// above the preflight so Bootstrap padding survives on its own elements) re-applies\n// `ul { margin-bottom: 10px }`, which then inflates this menu's height and pushes the whole\n// navbar row off-center. Resetting the margin explicitly (utilities beat the legacy layer)\n// keeps the row centered everywhere.\nconst variants = cva(\n  ['tw:m-0', 'tw:p-0', 'tw:flex', 'tw:items-center', 'tw:justify-center', 'tw:gap-2'],\n  {\n    variants: {\n      marker: {\n        none: [],\n        'forward-slash': [\n          // Style all li children with pseudo-element marker\n          'tw:[&_li]:flex',\n          'tw:[&_li]:items-center',\n          'tw:[&_li]:before:content-[\"/\"]',\n          'tw:[&_li]:before:text-border',\n          'tw:[&_li]:before:text-sm',\n          'tw:[&_li]:before:mr-0.5',\n          'tw:[&_li:not(:first-child)]:before:ml-0.5',\n        ],\n      },\n    },\n    defaultVariants: {\n      marker: 'none',\n    },\n  },\n);\n\ntype Props = ComponentProps<'ul'> & VariantProps<typeof variants>;\n\nexport const NavbarMenu = ({ className, marker, ...rest }: Props) => (\n  <ul {...rest} className={variants({ marker, className })} />\n);\n","import type { ComponentProps } from 'react';\nimport * as RadixAvatar from '@radix-ui/react-avatar';\nimport BoringAvatar from 'boring-avatars';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  src?: string;\n  alt?: string;\n};\n\nexport const NavbarMenuAvatar = ({ ref, className, type = 'button', src, alt, ...rest }: Props) => {\n  const altText = alt ?? 'Avatar';\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type={type}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:size-8',\n\n        'tw:aspect-square',\n        'tw:overflow-hidden',\n        'tw:shrink-0',\n\n        'tw:rounded-lg',\n        'tw:bg-transparent',\n        'tw:cursor-pointer',\n\n        // Disabled state\n        'tw:disabled:opacity-50',\n        'tw:disabled:cursor-not-allowed',\n\n        // Focus-visible (matches SidebarMenuButton exactly)\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        className,\n      )}\n    >\n      <RadixAvatar.Root>\n        <RadixAvatar.Image src={src} alt={altText} className=\"tw:size-full tw:object-cover\" />\n\n        <RadixAvatar.Fallback asChild>\n          <BoringAvatar\n            square\n            name={altText}\n            variant=\"beam\"\n            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}\n            size={32}\n          />\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst variants = cva(\n  [\n    'tw:flex',\n    'tw:justify-center',\n    'tw:items-center',\n\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n    'tw:[&:not(svg)]:h-5',\n    'tw:[&:not(svg)]:min-w-5',\n\n    'tw:p-1',\n    'tw:aspect-square',\n    'tw:rounded-md',\n  ],\n  {\n    defaultVariants: { variant: 'icon-accent' },\n    variants: {\n      variant: {\n        icon: ['tw:text-sidebar-foreground', 'tw:[&_svg]:text-sidebar-foreground'],\n        'icon-emphasized': ['tw:text-white', 'tw:[&_svg]:text-white'],\n        'icon-accent': [\n          // color-aware accent styling\n          'tw:group-data-[accent=blue]/navbar:text-sidebar-primary',\n          'tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:text-purple-500',\n          'tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500',\n          'tw:group-data-[accent=orange]/navbar:text-warning-500',\n          'tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500',\n          'tw:group-data-[accent=green]/navbar:text-primary-500',\n          'tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500',\n        ],\n        'icon-accent-emphasized': [\n          'tw:text-white',\n          'tw:[&_svg]:text-white',\n\n          'tw:group-data-[accent=blue]/navbar:bg-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:bg-purple-500',\n          'tw:group-data-[accent=orange]/navbar:bg-warning-500',\n          'tw:group-data-[accent=green]/navbar:bg-primary-500',\n        ],\n        'icon-button': ['tw:size-4', 'tw:!p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        shortcut: ['tw:bg-muted', 'tw:text-sidebar-foreground', 'tw:ml-auto'],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;\n\nexport const NavbarMenuItemAdornment = ({\n  ref,\n  asChild = false,\n  className,\n  variant = 'icon-accent',\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Search } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst variants = cva(\n  [\n    'tw:group/navbar-menu-button',\n    'tw:box-border',\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2',\n    'tw:bg-transparent',\n\n    'tw:leading-9',\n\n    'tw:border',\n    'tw:rounded-lg',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n\n    // focus-visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-sidebar-ring/50',\n\n    // disabled\n    'tw:disabled:opacity-50',\n    'tw:disabled:hover:bg-transparent',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          // Active page. Mirrors `Sidebar.MenuButton`, which styles `aria-current=\"page\"` — a top nav\n          // needs the same affordance, and without it a Navbar-shelled app cannot show where you are.\n          // `aria-current` rather than a prop: with `asChild` the slot is an <a>, and that is the\n          // attribute a router sets on an active link (TanStack's `Link` does it for free).\n          'tw:aria-[current=page]:bg-sidebar-accent',\n          'tw:aria-[current=page]:font-medium',\n        ],\n        emphasized: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          'tw:aria-[current=page]:bg-sidebar-accent',\n\n          'tw:font-semibold',\n        ],\n        icon: [\n          'tw:size-8',\n          'tw:aspect-square',\n          'tw:justify-center',\n          'tw:font-normal',\n          'tw:border-transparent',\n          'tw:text-primary',\n          'tw:[&_svg]:!text-primary',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n        ],\n        search: [\n          'tw:max-h-8',\n          'tw:min-w-52',\n          'tw:px-3',\n          'tw:py-1',\n          'tw:font-normal',\n          'tw:border-input',\n          'tw:text-muted-foreground',\n          'tw:[&_svg]:!text-muted-foreground',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> & {\n  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */\n  icon?: ReactNode;\n  asChild?: boolean;\n} & VariantProps<typeof variants>;\n\nexport const NavbarMenuButton = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  icon,\n  asChild = false,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n  const isSearchVariant = variant === 'search';\n  const isEmphasizedVariant = variant === 'emphasized';\n  const adornment = isSearchVariant ? <Search /> : icon;\n\n  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {\n    if (isSearchVariant || variant === 'icon') return 'icon-button';\n    if (isEmphasizedVariant) return 'icon-accent-emphasized';\n    return 'icon-accent';\n  })();\n\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      type={type}\n      data-variant={variant}\n      className={cn(variants({ className, variant }))}\n    >\n      {adornment && (\n        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>\n      )}\n\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const NavbarMenuItem = ({ className, ...rest }: Props) => (\n  <li {...rest} className={cn('tw:flex', 'tw:items-center', 'tw:gap-2', className)} />\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { NavbarContent } from './NavbarContent';\nimport { NavbarFooter } from './NavbarFooter';\nimport { NavbarHeader } from './NavbarHeader';\nimport { NavbarMenu } from './NavbarMenu';\nimport { NavbarMenuAvatar } from './NavbarMenuAvatar';\nimport { NavbarMenuButton } from './NavbarMenuButton';\nimport { NavbarMenuItem } from './NavbarMenuItem';\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst navbarClassnames = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/navbar',\n    'tw:sticky',\n    'tw:top-0',\n    'tw:z-50',\n    'tw:flex',\n    'tw:gap-2',\n    'tw:items-center',\n\n    // The left side is intentionally smaller to align the logo with the sidebar icons.\n    'tw:pl-2',\n    'tw:pr-3',\n\n    'tw:bg-sidebar',\n    // Pairs with `bg-sidebar` — required, not cosmetic.\n    // - Without it `currentColor` inside the bar resolves to the UA's black, invisible\n    //   on the dark scheme's sidebar surface.\n    // - Content inheriting it: plain text, and a `BrandLogo` whose SVG fills with\n    //   `currentColor`.\n    'tw:text-sidebar-foreground',\n    'tw:text-xs',\n    'tw:leading-4',\n  ],\n  {\n    defaultVariants: {\n      bordered: false,\n    },\n    variants: {\n      bordered: {\n        true: [\n          'tw:before:content',\n          'tw:before:h-0.5',\n          'tw:before:w-full',\n          'tw:before:absolute',\n          'tw:before:left-0',\n          'tw:before:top-0',\n          'tw:before:data-[accent=blue]:bg-sidebar-primary',\n          'tw:before:data-[accent=purple]:bg-purple-500',\n          'tw:before:data-[accent=green]:bg-primary-500',\n          'tw:before:data-[accent=orange]:bg-warning-500',\n        ],\n        false: '',\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'nav'> &\n  VariantProps<typeof navbarClassnames> & {\n    accent?: 'blue' | 'purple' | 'green' | 'orange';\n  };\n\n/**\n * Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a\n * top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,\n * and account/actions area.\n *\n * **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —\n * primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally\n * scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).\n * `bordered` renders a top accent hairline whose color follows `accent`. Renders a\n * `<nav>` landmark with a default `aria-label` — override it via `aria-label` /\n * `aria-labelledby` when a page has more than one nav.\n *\n * @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.\n */\nexport const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (\n  // A `<nav>` (not `<header>`): it's hosted inside `AppShell.Header`, which is\n  // already the `<header>` landmark — nesting a second `<header>` is invalid and\n  // muddies landmark navigation. `aria-label` comes first so a caller-supplied\n  // label in `...rest` overrides the default.\n  <nav\n    aria-label=\"Main navigation\"\n    {...rest}\n    data-accent={accent}\n    className={navbarClassnames({ bordered, className })}\n  />\n);\n\nNavbar.Header = NavbarHeader;\nNavbar.Footer = NavbarFooter;\nNavbar.Content = NavbarContent;\n\nNavbar.Menu = NavbarMenu;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuButton = NavbarMenuButton;\nNavbar.MenuItemAdornment = NavbarMenuItemAdornment;\nNavbar.MenuAvatar = NavbarMenuAvatar;\n"],"mappings":";;;;;;;;;;AAUA,MAAa,iBAAiB,EAAE,UAAU,gBACxC,oBAAC,YAAD;CACE,MAAK;CACL,aAAY;CACZ,WAAU;CACV,oBAAmB;CAEnB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,aAAa,SAAS;EAAI;CAAc,CAAA;AAC5D,CAAA;;;ACNd,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,8CAA8C,SAAS;CACjF;AACE,CAAA;;;ACRP,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WAGrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,sBAAsB,aAAa,SAAS;CACtE,UAAA,YAAY,oBAAC,WAAD;EAAW,SAAQ;EAAW,WAAU;CAAU,CAAA;AAC5D,CAAA;;;ACFP,MAAMA,aAAW,IACf;CAAC;CAAU;CAAU;CAAW;CAAmB;CAAqB;AAAU,GAClF;CACE,UAAU,EACR,QAAQ;EACN,MAAM,CAAC;EACP,iBAAiB;GAEf;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CACF;AAIA,MAAa,cAAc,EAAE,WAAW,QAAQ,GAAG,WACjD,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAWA,WAAS;EAAE;EAAQ;CAAU,CAAC;AAAI,CAAA;;;AC1B7D,MAAa,oBAAoB,EAAE,KAAK,WAAW,OAAO,UAAU,KAAK,KAAK,GAAG,WAAkB;CACjG,MAAM,UAAU,OAAO;CAEvB,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,WACA,mBACA,qBACA,aAEA,oBACA,sBACA,eAEA,iBACA,qBACA,qBAGA,0BACA,kCAGA,mCACA,2BACA,yCACA,SACF;EAEA,UAAA,qBAAC,YAAY,MAAb,EAAA,UAAA,CACE,oBAAC,YAAY,OAAb;GAAwB;GAAK,KAAK;GAAS,WAAU;EAAgC,CAAA,GAErF,oBAAC,YAAY,UAAb;GAAsB,SAAA;GACpB,UAAA,oBAAC,cAAD;IACE,QAAA;IACA,MAAM;IACN,SAAQ;IACR,QAAQ;KAAC;KAAW;KAAW;KAAW;KAAW;IAAS;IAC9D,MAAM;GACP,CAAA;EACmB,CAAA,CACN,EAAA,CAAA;CACZ,CAAA;AAEZ;;;ACtDA,MAAMC,aAAW,IACf;CACE;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,SAAS,cAAc;CAC1C,UAAU,EACR,SAAS;EACP,MAAM,CAAC,8BAA8B,oCAAoC;EACzE,mBAAmB,CAAC,iBAAiB,uBAAuB;EAC5D,eAAe;GAEb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,0BAA0B;GACxB;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,eAAe;GAAC;GAAa;GAAW;EAA4C;EACpF,UAAU;GAAC;GAAe;GAA8B;EAAY;CACtE,EACF;AACF,CACF;AAIA,MAAa,2BAA2B,EACtC,KACA,UAAU,OACV,WACA,UAAU,eACV,GAAG,YACQ;CAGX,OAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAS;GAAE;GAAS;EAAU,CAAC;CAAI,CAAA;AAClF;;;ACtDA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,OAAO,UACP,UACA,MACA,UAAU,OACV,UAAU,WACV,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,kBAAkB,YAAY;CACpC,MAAM,sBAAsB,YAAY;CACxC,MAAM,YAAY,kBAAkB,oBAAC,QAAD,CAAS,CAAA,IAAI;CAEjD,MAAM,0BAAqF;EACzF,IAAI,mBAAmB,YAAY,QAAQ,OAAO;EAClD,IAAI,qBAAqB,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACC;EACN,gBAAc;EACd,WAAW,GAAG,SAAS;GAAE;GAAW;EAAQ,CAAC,CAAC;EALhD,UAAA,CAOG,aACC,oBAAC,yBAAD;GAAyB,SAAS;GAAmB,UAAA;EAAmC,CAAA,GAG1F,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B;;AAEV;;;ACtIA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAW,GAAG,WAAW,mBAAmB,YAAY,SAAS;AAAI,CAAA;;;ACMrF,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAMA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,UAAU,MACZ;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT,EACF;AACF,CACF;;;;;;;;;;;;;;;AAqBA,MAAa,UAAU,EAAE,WAAW,SAAS,QAAQ,WAAW,OAAO,GAAG,WAKxE,oBAAC,OAAD;CACE,cAAW;CACX,GAAI;CACJ,eAAa;CACb,WAAW,iBAAiB;EAAE;EAAU;CAAU,CAAC;AACpD,CAAA;AAGH,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,UAAU;AAEjB,OAAO,OAAO;AACd,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,aAAa"}

package/dist/OtpInput-CbbymqYs.js

@@ -0,0 +1,93 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Minus } from "./icons-Cek151jC.js";
+import { use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS as REGEXP_ONLY_DIGITS$1, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+//#region src/blocks/OtpInput/OtpInputGroup.tsx
+const OtpInputGroup = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:items-center tw:gap-2", className),
+	...props
+});
+//#endregion
+//#region src/blocks/OtpInput/OtpInputSeparator.tsx
+const OtpInputSeparator = ({ ref, children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role: "separator",
+	"aria-orientation": "vertical",
+	className: cn("tw:flex tw:items-center tw:text-muted-foreground", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(Minus, { className: "tw:size-4" })
+});
+//#endregion
+//#region src/blocks/OtpInput/OtpInputSlot.tsx
+const slotClassName = [
+	"tw:relative",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:font-medium",
+	"tw:tabular-nums",
+	"tw:outline-hidden",
+	"tw:transition",
+	"tw:border",
+	"tw:border-solid",
+	"tw:border-input",
+	"tw:bg-muted",
+	"tw:text-foreground",
+	"tw:rounded-[var(--radius-lg,0.25rem)]",
+	"tw:data-[active=true]:z-10",
+	"tw:data-[active=true]:border-primary",
+	"tw:data-[active=true]:ring-4",
+	"tw:data-[active=true]:ring-ring/50",
+	"tw:group-data-[size=sm]/otp:h-8 tw:group-data-[size=sm]/otp:w-8 tw:group-data-[size=sm]/otp:text-sm",
+	"tw:group-data-[size=md]/otp:h-9 tw:group-data-[size=md]/otp:w-9 tw:group-data-[size=md]/otp:text-base",
+	"tw:group-data-[size=lg]/otp:h-10 tw:group-data-[size=lg]/otp:w-10 tw:group-data-[size=lg]/otp:text-lg",
+	"tw:group-has-[input[aria-invalid=true]]/otp:!border-destructive",
+	"tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!border-destructive",
+	"tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:ring-destructive/20"
+];
+const OtpInputSlot = ({ ref, index, className, ...props }) => {
+	const { slots } = use(OTPInputContext);
+	if (!slots) throw new Error("<OtpInput.Slot> must be rendered inside <OtpInput>.");
+	const slot = slots[index];
+	const char = slot?.char ?? null;
+	const isActive = slot?.isActive ?? false;
+	const hasFakeCaret = slot?.hasFakeCaret ?? false;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-active": isActive || void 0,
+		"data-slot-index": index,
+		className: cn(slotClassName, className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "tw:h-1/2 tw:w-px tw:animate-caret-blink tw:bg-foreground" })
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/OtpInput/OtpInput.tsx
+const Root = ({ ref, sizing = "md", pattern = REGEXP_ONLY_DIGITS, containerClassName, className, children, "aria-invalid": ariaInvalid, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: "tw:group/otp tw:w-fit",
+	"data-size": sizing,
+	children: /* @__PURE__ */ jsx(OTPInput, {
+		...rest,
+		ref,
+		pattern,
+		"aria-invalid": ariaInvalid,
+		containerClassName: cn("tw:flex tw:items-center tw:gap-2 tw:has-[:disabled]:opacity-50", containerClassName),
+		className: cn("tw:disabled:cursor-not-allowed", className),
+		children
+	})
+});
+const OtpInput = Object.assign(Root, {
+	Group: OtpInputGroup,
+	Slot: OtpInputSlot,
+	Separator: OtpInputSeparator
+});
+//#endregion
+export { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS$1 as REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
+
+//# sourceMappingURL=OtpInput-CbbymqYs.js.map

package/dist/OtpInput-CbbymqYs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput-CbbymqYs.js","names":[],"sources":["../src/blocks/OtpInput/OtpInputGroup.tsx","../src/blocks/OtpInput/OtpInputSeparator.tsx","../src/blocks/OtpInput/OtpInputSlot.tsx","../src/blocks/OtpInput/OtpInput.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype GroupProps = ComponentProps<'div'>;\n\nexport const OtpInputGroup = ({\n  ref,\n  className,\n  ...props\n}: GroupProps & { ref?: Ref<HTMLDivElement> }) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props} />\n);\n","import type { ComponentProps, Ref } from 'react';\n\nimport { Minus } from '../../icons';\nimport { cn } from '../../utils';\n\ntype SeparatorProps = ComponentProps<'div'>;\n\nexport const OtpInputSeparator = ({\n  ref,\n  children,\n  className,\n  ...props\n}: SeparatorProps & { ref?: Ref<HTMLDivElement> }) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    className={cn('tw:flex tw:items-center tw:text-muted-foreground', className)}\n    {...props}\n  >\n    {children ?? <Minus className=\"tw:size-4\" />}\n  </div>\n);\n","import { type ComponentProps, type Ref, use } from 'react';\nimport { OTPInputContext } from 'input-otp';\n\nimport { cn } from '../../utils';\n\nconst slotClassName = [\n  // layout\n  'tw:relative',\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:font-medium',\n  'tw:tabular-nums',\n  'tw:outline-hidden',\n  'tw:transition',\n  // resting chrome — always-visible input border on a muted fill (matches InputGroup)\n  'tw:border',\n  'tw:border-solid',\n  'tw:border-input',\n  'tw:bg-muted',\n  'tw:text-foreground',\n  'tw:rounded-[var(--radius-lg,0.25rem)]',\n  // focus — the active slot mirrors InputGroup's argo focus ring; z-10 so the ring isn't clipped\n  'tw:data-[active=true]:z-10',\n  'tw:data-[active=true]:border-primary',\n  'tw:data-[active=true]:ring-4',\n  'tw:data-[active=true]:ring-ring/50',\n  // size — from `data-size` on the group/otp container\n  'tw:group-data-[size=sm]/otp:h-8 tw:group-data-[size=sm]/otp:w-8 tw:group-data-[size=sm]/otp:text-sm',\n  'tw:group-data-[size=md]/otp:h-9 tw:group-data-[size=md]/otp:w-9 tw:group-data-[size=md]/otp:text-base',\n  'tw:group-data-[size=lg]/otp:h-10 tw:group-data-[size=lg]/otp:w-10 tw:group-data-[size=lg]/otp:text-lg',\n  // error — from `aria-invalid` on the OTP input (mirrors InputGroup argo error chrome). `!` beats\n  // the base/active border once tailwind-merge dedupes.\n  'tw:group-has-[input[aria-invalid=true]]/otp:!border-destructive',\n  'tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!border-destructive',\n  'tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:ring-destructive/20',\n];\n\ntype SlotProps = Omit<ComponentProps<'div'>, 'children'> & {\n  index: number;\n};\n\nexport const OtpInputSlot = ({\n  ref,\n  index,\n  className,\n  ...props\n}: SlotProps & { ref?: Ref<HTMLDivElement> }) => {\n  // `input-otp` exposes per-slot char / active / caret state through its render context.\n  const { slots } = use(OTPInputContext);\n  // The context default has no `slots` — a slot rendered outside `<OtpInput>` would otherwise throw\n  // a cryptic \"cannot read properties of undefined\". Fail with an actionable message instead.\n  if (!slots) throw new Error('<OtpInput.Slot> must be rendered inside <OtpInput>.');\n  const slot = slots[index];\n  const char = slot?.char ?? null;\n  const isActive = slot?.isActive ?? false;\n  const hasFakeCaret = slot?.hasFakeCaret ?? false;\n\n  return (\n    <div\n      ref={ref}\n      data-active={isActive || undefined}\n      data-slot-index={index}\n      className={cn(slotClassName, className)}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div\n          aria-hidden=\"true\"\n          className=\"tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center\"\n        >\n          <div className=\"tw:h-1/2 tw:w-px tw:animate-caret-blink tw:bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n};\n","import type { ComponentProps, ReactNode, Ref } from 'react';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\n\nimport { cn } from '../../utils';\n\nimport { OtpInputGroup } from './OtpInputGroup';\nimport { OtpInputSeparator } from './OtpInputSeparator';\nimport { OtpInputSlot } from './OtpInputSlot';\n\ntype OtpInputSizing = 'sm' | 'md' | 'lg';\n\ntype OtpElementProps = ComponentProps<typeof OTPInput>;\ntype OtpElementChildrenProps = Omit<\n  Extract<OtpElementProps, { children: ReactNode }>,\n  'containerClassName'\n>;\n\ntype RootOwnProps = {\n  sizing?: OtpInputSizing;\n  containerClassName?: string;\n};\n\ntype RootProps = OtpElementChildrenProps & RootOwnProps;\n\nconst Root = ({\n  ref,\n  sizing = 'md',\n  pattern = REGEXP_ONLY_DIGITS,\n  containerClassName,\n  className,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: RootProps & { ref?: Ref<HTMLInputElement> }) => (\n  <div className=\"tw:group/otp tw:w-fit\" data-size={sizing}>\n    <OTPInput\n      {...rest}\n      ref={ref}\n      pattern={pattern}\n      aria-invalid={ariaInvalid}\n      containerClassName={cn(\n        'tw:flex tw:items-center tw:gap-2 tw:has-[:disabled]:opacity-50',\n        containerClassName,\n      )}\n      className={cn('tw:disabled:cursor-not-allowed', className)}\n    >\n      {children}\n    </OTPInput>\n  </div>\n);\n\nexport const OtpInput = Object.assign(Root, {\n  Group: OtpInputGroup,\n  Slot: OtpInputSlot,\n  Separator: OtpInputSeparator,\n});\nexport type { RootProps as OtpInputProps };\n"],"mappings":";;;;;;AAMA,MAAa,iBAAiB,EAC5B,KACA,WACA,GAAG,YAEH,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACJ3F,MAAa,qBAAqB,EAChC,KACA,UACA,WACA,GAAG,YAEH,oBAAC,OAAD;CACO;CACL,MAAK;CACL,oBAAiB;CACjB,WAAW,GAAG,oDAAoD,SAAS;CAC3E,GAAI;CAEH,UAAA,YAAY,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA;AACxC,CAAA;;;AChBP,MAAM,gBAAgB;CAEpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAGA;CACA;CACA;AACF;AAMA,MAAa,gBAAgB,EAC3B,KACA,OACA,WACA,GAAG,YAC4C;CAE/C,MAAM,EAAE,UAAU,IAAI,eAAe;CAGrC,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,qDAAqD;CACjF,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,eAAe,MAAM,gBAAgB;CAE3C,OACE,qBAAC,OAAD;EACO;EACL,eAAa,YAAY,KAAA;EACzB,mBAAiB;EACjB,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;EALN,UAAA,CAOG,MACA,gBACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GAEV,UAAA,oBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;EACxE,CAAA,CAEJ;;AAET;;;ACrDA,MAAM,QAAQ,EACZ,KACA,SAAS,MACT,UAAU,oBACV,oBACA,WACA,UACA,gBAAgB,aAChB,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAU;CAAwB,aAAW;CAChD,UAAA,oBAAC,UAAD;EACE,GAAI;EACC;EACI;EACT,gBAAc;EACd,oBAAoB,GAClB,kEACA,kBACF;EACA,WAAW,GAAG,kCAAkC,SAAS;EAExD;CACO,CAAA;AACP,CAAA;AAGP,MAAa,WAAW,OAAO,OAAO,MAAM;CAC1C,OAAO;CACP,MAAM;CACN,WAAW;AACb,CAAC"}