npm - @keboola/design - Versions diffs - 11.0.1 → 11.3.0 - Mend

@keboola/design 11.0.1 → 11.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/dist/{Alert-DfZq9kGe.js.map → Alert-CseY3yAj.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert-DfZq9kGe.js","names":[],"sources":["../src/components/Alert/AlertAction.tsx","../src/components/Alert/AlertCollapsibleIcon.tsx","../src/components/Alert/AlertDescription.tsx","../src/components/Alert/AlertIcon.tsx","../src/components/Alert/AlertRoot.tsx","../src/components/Alert/AlertTitle.tsx","../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport const AlertAction = ({ ref, className, asChild = false, ...props }: Props) => {\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp\n {...props}\n ref={ref}\n className={cn(\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:flex',\n 'tw:gap-2',\n className,\n )}\n />\n );\n};\n","import { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\ntype Props = {\n open: boolean;\n};\n\nexport const AlertCollapsibleIcon = ({ open }: Props) => (\n <Tooltip placement=\"top\" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>\n <ChevronDown\n className={cn(\n 'tw:mt-px',\n 'tw:size-5',\n 'tw:text-neutral-400',\n 'tw:group-data-[state=open]/alert:rotate-180',\n\n // Legacy uses the fixed categorical hover scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:group-hover:text-blue-600',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:group-hover:text-info',\n 'tw:group-data-[variant=warning]/alert:group-hover:text-warning-600',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:group-hover:text-warning',\n 'tw:group-data-[variant=error]/alert:group-hover:text-error-600',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:group-hover:text-destructive',\n 'tw:group-data-[variant=success]/alert:group-hover:text-green-600',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:group-hover:text-success',\n )}\n />\n </Tooltip>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertDescription = ({ ref, children, className, ...rest }: Props) => (\n <div\n {...rest}\n ref={ref}\n className={cn(\n 'tw:col-start-2',\n 'tw:group-has-[[data-slot=alert-title]]/alert:col-end-[-1]',\n\n // spacer before description when a title exists (pseudo-element so it animates with Collapsible)\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:block',\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:h-4',\n \"tw:group-has-[[data-slot=alert-title]]/alert:before:content-['']\",\n\n 'tw:break-anywhere',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n\n className,\n )}\n >\n {children}\n </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { Variant } from './AlertRoot';\n\nconst VARIANT_ICONS: Record<Variant, ReactNode> = {\n info: <Info />,\n warning: <AlertTriangle />,\n error: <AlertTriangle />,\n success: <CircleCheck />,\n};\n\ntype Props = {\n variant: Variant;\n icon?: ReactNode;\n} & Omit<ComponentProps<'span'>, 'children'>;\n\nexport const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (\n <span\n {...rest}\n data-slot=\"alert-icon\"\n className={cn(\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:self-start',\n 'tw:p-0.5',\n 'tw:[&_svg:not([class=\"tw:size-\"])]:size-4',\n // Legacy uses the fixed categorical icon scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:text-blue-500',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:text-info',\n 'tw:group-data-[variant=warning]/alert:text-warning-500',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:text-warning',\n 'tw:group-data-[variant=error]/alert:text-error-500',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:text-destructive',\n 'tw:group-data-[variant=success]/alert:text-green-500',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:text-success',\n className,\n )}\n >\n {icon ?? VARIANT_ICONS[variant]}\n </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nexport type Variant = 'info' \| 'warning' \| 'error' \| 'success';\n\ntype Props = {\n variant?: Variant;\n} & ComponentProps<'div'>;\n\nexport const AlertRoot = ({ ref, children, className, variant, ...rest }: Props) => {\n const renderArgo = useArgoDesign();\n return (\n <div\n {...rest}\n ref={ref}\n data-variant={variant}\n data-argo={renderArgo}\n className={cn(\n 'tw:group/alert',\n\n // layout\n 'tw:grid',\n 'tw:grid-cols-[0_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:gap-x-2',\n\n // fonts\n 'tw:text-sm',\n // Legacy keeps the fixed neutral text; argo uses the semantic foreground\n // so the alert flips with the brand's light/dark palette (the categorical\n // variant tint stays — only the text token becomes brand-aware).\n 'tw:text-neutral-800',\n 'tw:data-[argo=true]:text-foreground',\n 'tw:text-left',\n\n 'tw:p-4',\n\n // border — legacy keeps a fixed radius; argo follows the brand radius token.\n 'tw:rounded',\n 'tw:data-[argo=true]:rounded-[var(--radius-lg,0.25rem)]',\n 'tw:border',\n 'tw:border-solid',\n\n // Variant tint + border. Legacy keeps the fixed categorical scales (solid\n // pastel tint); argo uses the brand-overridable status tokens (bg at 10%,\n // border at 25%) so status re-skins with the brand. The argo tokens carry\n // AA-legible defaults, so the variant icon (AlertIcon, full-strength\n // `tw:text-<role>`) clears ≥4.5:1 on the tint in both light and dark.\n 'tw:data-[variant=info]:bg-blue-100',\n 'tw:data-[variant=info]:border-blue-200',\n 'tw:data-[variant=info]:data-[argo=true]:bg-info/10',\n 'tw:data-[variant=info]:data-[argo=true]:border-info/25',\n\n 'tw:data-[variant=warning]:bg-warning-100',\n 'tw:data-[variant=warning]:border-warning-300',\n 'tw:data-[variant=warning]:data-[argo=true]:bg-warning/10',\n 'tw:data-[variant=warning]:data-[argo=true]:border-warning/25',\n\n 'tw:data-[variant=error]:bg-error-100',\n 'tw:data-[variant=error]:border-error-200',\n 'tw:data-[variant=error]:data-[argo=true]:bg-destructive/10',\n 'tw:data-[variant=error]:data-[argo=true]:border-destructive/25',\n\n 'tw:data-[variant=success]:bg-green-100',\n 'tw:data-[variant=success]:border-green-200',\n 'tw:data-[variant=success]:data-[argo=true]:bg-success/10',\n 'tw:data-[variant=success]:data-[argo=true]:border-success/25',\n className,\n )}\n >\n {children}\n </div>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertTitle = ({ ref, className, ...props }: Props) => (\n <div\n {...props}\n ref={ref}\n data-slot=\"alert-title\"\n className={cn(\n 'tw:group/alert-title',\n 'tw:flex',\n 'tw:col-start-2',\n 'tw:font-medium',\n 'tw:items-center',\n className,\n )}\n />\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport { AlertAction } from './AlertAction';\nimport { AlertCollapsibleIcon } from './AlertCollapsibleIcon';\nimport { AlertDescription } from './AlertDescription';\nimport { AlertIcon } from './AlertIcon';\nimport { AlertRoot } from './AlertRoot';\nimport { AlertTitle } from './AlertTitle';\n\ntype CommonProps = {\n hideIcon?: boolean;\n icon?: ReactNode;\n} & Pick<ComponentProps<typeof Collapsible>, 'open' \| 'onOpenChange' \| 'defaultOpen'> &\n Omit<ComponentProps<typeof AlertRoot>, 'children'>;\n\ntype CollapsibleProps = {\n mode: 'collapsible';\n title: ReactNode;\n children: ReactNode;\n actions?: never;\n};\n\ntype DefaultProps = {\n mode?: 'default';\n title?: ReactNode;\n children?: ReactNode;\n actions?: ReactNode;\n};\n\n/*\n Props for `Alert`. Discriminated by `mode` — `\"default\"` renders `title` / `children` / `actions`,\n * `\"collapsible\"` requires `title` + `children` (no `actions`) and renders a collapsible disclosure.\n * `variant` (`info` \| `success` \| `warning` \| `error`) is a categorical colour contract.\n /\ntype Props = CommonProps & (CollapsibleProps \| DefaultProps);\n\n/\n Persistent inline banner for contextual messages tied to the page layout.\n \n When to use: a message that lives in the page (info banner, warning about a misconfiguration,\n * post-save validation summary). Use `variant` to encode meaning; pass `actions` for inline buttons.\n * `mode=\"collapsible\"` collapses long error details behind a toggle.\n * When NOT to use: for transient feedback (save succeeded, job started) use `toast()`; for\n * field-level validation errors use `FormGroup state=\"error\"`; for a confirmation popover use\n * `Popconfirm`.\n * Composition: typically rendered at the top of `PageLayout.Content` or above a form section.\n \n @see RECIPES.md#alert-with-action — for action-bearing alert composition\n */\nexport const Alert = ({\n title,\n variant = 'info',\n children,\n hideIcon = false,\n icon,\n className,\n actions,\n mode = 'default',\n\n // collapsible props\n defaultOpen = true,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n\n ...rest\n}: Props) => {\n const isControlled = openProp !== undefined;\n\n const [innerOpen, setInnerOpen] = useState(defaultOpen);\n const open = isControlled ? openProp : innerOpen;\n const handleOpenChange = (nextOpen: boolean) => {\n if (!isControlled) {\n setInnerOpen(nextOpen);\n }\n onOpenChangeProp?.(nextOpen);\n };\n\n const isCollapsible = mode === 'collapsible' && !!title && !!children && !actions;\n\n if (isCollapsible)\n return (\n <Collapsible open={open} onOpenChange={handleOpenChange} asChild>\n <AlertRoot {...rest} variant={variant} className={className}>\n <Collapsible.Trigger\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group',\n 'tw:col-span-full',\n 'tw:grid',\n 'tw:grid-cols-subgrid',\n 'tw:rounded-sm',\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-2',\n 'tw:focus-visible:outline-ring',\n )}\n >\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n <AlertTitle>{title}</AlertTitle>\n <AlertCollapsibleIcon open={open} />\n </Collapsible.Trigger>\n\n <Collapsible.Content asChild>\n <AlertDescription>{children}</AlertDescription>\n </Collapsible.Content>\n </AlertRoot>\n </Collapsible>\n );\n\n return (\n <AlertRoot {...rest} variant={variant} className={className}>\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n {title && <AlertTitle>{title}</AlertTitle>}\n {children && <AlertDescription>{children}</AlertDescription>}\n {actions && <AlertAction>{actions}</AlertAction>}\n </AlertRoot>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Alert-CseY3yAj.js","names":[],"sources":["../src/components/Alert/AlertAction.tsx","../src/components/Alert/AlertCollapsibleIcon.tsx","../src/components/Alert/AlertDescription.tsx","../src/components/Alert/AlertIcon.tsx","../src/components/Alert/AlertRoot.tsx","../src/components/Alert/AlertTitle.tsx","../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport const AlertAction = ({ ref, className, asChild = false, ...props }: Props) => {\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp\n {...props}\n ref={ref}\n className={cn(\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:flex',\n 'tw:gap-2',\n className,\n )}\n />\n );\n};\n","import { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\ntype Props = {\n open: boolean;\n};\n\nexport const AlertCollapsibleIcon = ({ open }: Props) => (\n <Tooltip placement=\"top\" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>\n <ChevronDown\n className={cn(\n 'tw:mt-px',\n 'tw:size-5',\n 'tw:text-neutral-400',\n 'tw:group-data-[state=open]/alert:rotate-180',\n\n // Legacy uses the fixed categorical hover scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:group-hover:text-blue-600',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:group-hover:text-info',\n 'tw:group-data-[variant=warning]/alert:group-hover:text-warning-600',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:group-hover:text-warning',\n 'tw:group-data-[variant=error]/alert:group-hover:text-error-600',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:group-hover:text-destructive',\n 'tw:group-data-[variant=success]/alert:group-hover:text-green-600',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:group-hover:text-success',\n )}\n />\n </Tooltip>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertDescription = ({ ref, children, className, ...rest }: Props) => (\n <div\n {...rest}\n ref={ref}\n className={cn(\n 'tw:col-start-2',\n 'tw:group-has-[[data-slot=alert-title]]/alert:col-end-[-1]',\n\n // spacer before description when a title exists (pseudo-element so it animates with Collapsible)\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:block',\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:h-4',\n \"tw:group-has-[[data-slot=alert-title]]/alert:before:content-['']\",\n\n 'tw:break-anywhere',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n\n className,\n )}\n >\n {children}\n </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { Variant } from './AlertRoot';\n\nconst VARIANT_ICONS: Record<Variant, ReactNode> = {\n info: <Info />,\n warning: <AlertTriangle />,\n error: <AlertTriangle />,\n success: <CircleCheck />,\n};\n\ntype Props = {\n variant: Variant;\n icon?: ReactNode;\n} & Omit<ComponentProps<'span'>, 'children'>;\n\nexport const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (\n <span\n {...rest}\n data-slot=\"alert-icon\"\n className={cn(\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:self-start',\n 'tw:p-0.5',\n 'tw:[&_svg:not([class=\"tw:size-\"])]:size-4',\n // Legacy uses the fixed categorical icon scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:text-blue-500',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:text-info',\n 'tw:group-data-[variant=warning]/alert:text-warning-500',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:text-warning',\n 'tw:group-data-[variant=error]/alert:text-error-500',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:text-destructive',\n 'tw:group-data-[variant=success]/alert:text-green-500',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:text-success',\n className,\n )}\n >\n {icon ?? VARIANT_ICONS[variant]}\n </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nexport type Variant = 'info' \| 'warning' \| 'error' \| 'success';\n\ntype Props = {\n variant?: Variant;\n} & ComponentProps<'div'>;\n\nexport const AlertRoot = ({ ref, children, className, variant, ...rest }: Props) => {\n const renderArgo = useArgoDesign();\n return (\n <div\n {...rest}\n ref={ref}\n data-variant={variant}\n data-argo={renderArgo}\n className={cn(\n 'tw:group/alert',\n\n // layout\n 'tw:grid',\n 'tw:grid-cols-[0_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:gap-x-2',\n\n // fonts\n 'tw:text-sm',\n // Legacy keeps the fixed neutral text; argo uses the semantic foreground\n // so the alert flips with the brand's light/dark palette (the categorical\n // variant tint stays — only the text token becomes brand-aware).\n 'tw:text-neutral-800',\n 'tw:data-[argo=true]:text-foreground',\n 'tw:text-left',\n\n 'tw:p-4',\n\n // border — legacy keeps a fixed radius; argo follows the brand radius token.\n 'tw:rounded',\n 'tw:data-[argo=true]:rounded-[var(--radius-lg,0.25rem)]',\n 'tw:border',\n 'tw:border-solid',\n\n // Variant tint + border. Legacy keeps the fixed categorical scales (solid\n // pastel tint); argo uses the brand-overridable status tokens (bg at 10%,\n // border at 25%) so status re-skins with the brand. The argo tokens carry\n // AA-legible defaults, so the variant icon (AlertIcon, full-strength\n // `tw:text-<role>`) clears ≥4.5:1 on the tint in both light and dark.\n 'tw:data-[variant=info]:bg-blue-100',\n 'tw:data-[variant=info]:border-blue-200',\n 'tw:data-[variant=info]:data-[argo=true]:bg-info/10',\n 'tw:data-[variant=info]:data-[argo=true]:border-info/25',\n\n 'tw:data-[variant=warning]:bg-warning-100',\n 'tw:data-[variant=warning]:border-warning-300',\n 'tw:data-[variant=warning]:data-[argo=true]:bg-warning/10',\n 'tw:data-[variant=warning]:data-[argo=true]:border-warning/25',\n\n 'tw:data-[variant=error]:bg-error-100',\n 'tw:data-[variant=error]:border-error-200',\n 'tw:data-[variant=error]:data-[argo=true]:bg-destructive/10',\n 'tw:data-[variant=error]:data-[argo=true]:border-destructive/25',\n\n 'tw:data-[variant=success]:bg-green-100',\n 'tw:data-[variant=success]:border-green-200',\n 'tw:data-[variant=success]:data-[argo=true]:bg-success/10',\n 'tw:data-[variant=success]:data-[argo=true]:border-success/25',\n className,\n )}\n >\n {children}\n </div>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertTitle = ({ ref, className, ...props }: Props) => (\n <div\n {...props}\n ref={ref}\n data-slot=\"alert-title\"\n className={cn(\n 'tw:group/alert-title',\n 'tw:flex',\n 'tw:col-start-2',\n 'tw:font-medium',\n 'tw:items-center',\n className,\n )}\n />\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport { AlertAction } from './AlertAction';\nimport { AlertCollapsibleIcon } from './AlertCollapsibleIcon';\nimport { AlertDescription } from './AlertDescription';\nimport { AlertIcon } from './AlertIcon';\nimport { AlertRoot } from './AlertRoot';\nimport { AlertTitle } from './AlertTitle';\n\ntype CommonProps = {\n hideIcon?: boolean;\n icon?: ReactNode;\n} & Pick<ComponentProps<typeof Collapsible>, 'open' \| 'onOpenChange' \| 'defaultOpen'> &\n Omit<ComponentProps<typeof AlertRoot>, 'children'>;\n\ntype CollapsibleProps = {\n mode: 'collapsible';\n title: ReactNode;\n children: ReactNode;\n actions?: never;\n};\n\ntype DefaultProps = {\n mode?: 'default';\n title?: ReactNode;\n children?: ReactNode;\n actions?: ReactNode;\n};\n\n/*\n Props for `Alert`. Discriminated by `mode` — `\"default\"` renders `title` / `children` / `actions`,\n * `\"collapsible\"` requires `title` + `children` (no `actions`) and renders a collapsible disclosure.\n * `variant` (`info` \| `success` \| `warning` \| `error`) is a categorical colour contract.\n /\ntype Props = CommonProps & (CollapsibleProps \| DefaultProps);\n\n/\n Persistent inline banner for contextual messages tied to the page layout.\n \n When to use: a message that lives in the page (info banner, warning about a misconfiguration,\n * post-save validation summary). Use `variant` to encode meaning; pass `actions` for inline buttons.\n * `mode=\"collapsible\"` collapses long error details behind a toggle.\n * When NOT to use: for transient feedback (save succeeded, job started) use `toast()`; for\n * field-level validation errors use `FormGroup state=\"error\"`; for a confirmation popover use\n * `Popconfirm`.\n * Composition: typically rendered at the top of `PageLayout.Content` or above a form section.\n \n @see RECIPES.md#alert-with-action — for action-bearing alert composition\n */\nexport const Alert = ({\n title,\n variant = 'info',\n children,\n hideIcon = false,\n icon,\n className,\n actions,\n mode = 'default',\n\n // collapsible props\n defaultOpen = true,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n\n ...rest\n}: Props) => {\n const isControlled = openProp !== undefined;\n\n const [innerOpen, setInnerOpen] = useState(defaultOpen);\n const open = isControlled ? openProp : innerOpen;\n const handleOpenChange = (nextOpen: boolean) => {\n if (!isControlled) {\n setInnerOpen(nextOpen);\n }\n onOpenChangeProp?.(nextOpen);\n };\n\n const isCollapsible = mode === 'collapsible' && !!title && !!children && !actions;\n\n if (isCollapsible)\n return (\n <Collapsible open={open} onOpenChange={handleOpenChange} asChild>\n <AlertRoot {...rest} variant={variant} className={className}>\n <Collapsible.Trigger\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group',\n 'tw:col-span-full',\n 'tw:grid',\n 'tw:grid-cols-subgrid',\n 'tw:rounded-sm',\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-2',\n 'tw:focus-visible:outline-ring',\n )}\n >\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n <AlertTitle>{title}</AlertTitle>\n <AlertCollapsibleIcon open={open} />\n </Collapsible.Trigger>\n\n <Collapsible.Content asChild>\n <AlertDescription>{children}</AlertDescription>\n </Collapsible.Content>\n </AlertRoot>\n </Collapsible>\n );\n\n return (\n <AlertRoot {...rest} variant={variant} className={className}>\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n {title && <AlertTitle>{title}</AlertTitle>}\n {children && <AlertDescription>{children}</AlertDescription>}\n {actions && <AlertAction>{actions}</AlertAction>}\n </AlertRoot>\n );\n};\n"],"mappings":"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"}

package/dist/{AlertModal-BUC4Es8o.js → AlertModal-DQAGpsEy.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { useArgoDesign } from "./context-BrNtMc1H.js";
 import { AlertTriangle, CircleCheck, Info } from "./icons-Cek151jC.js";
-import { Button } from "./Button-nzmDNS2q.js";
+import { Button } from "./Button-CPsEQuTN.js";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
@@ -190,10 +190,7 @@ const AlertModal = ({ children, onConfirm = noop, onCancel = noop, skipAsyncWait
 			if (!(result !== null && typeof result === "object" && typeof result.then === "function") || skipAsyncWait) return;
 			event.preventDefault();
 			setIsConfirming(true);
-			Promise.resolve(result).finally(() => {
-				setIsConfirming(false);
-				setOpen(false);
-			});
+			Promise.resolve(result).then(() => setOpen(false)).finally(() => setIsConfirming(false));
 		},
 		onCancel: (event) => {
 			cancelRef.current(event);
@@ -219,4 +216,4 @@ AlertModal.Content = AlertModalContent;
 //#endregion
 export { AlertModal };
-//# sourceMappingURL=AlertModal-BUC4Es8o.js.map
+//# sourceMappingURL=AlertModal-DQAGpsEy.js.map

package/dist/{AlertModal-BUC4Es8o.js.map → AlertModal-DQAGpsEy.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertModal-BUC4Es8o.js","names":[],"sources":["../src/components/AlertModal/AlertModalDescription.tsx","../src/components/AlertModal/AlertModalFooter.tsx","../src/components/AlertModal/AlertModalHeader.tsx","../src/components/AlertModal/AlertModalIcon.tsx","../src/components/AlertModal/AlertModalOverlay.tsx","../src/components/AlertModal/AlertModalTitle.tsx","../src/components/AlertModal/context.ts","../src/components/AlertModal/AlertModalContent.tsx","../src/components/AlertModal/AlertModalTrigger.tsx","../src/components/AlertModal/AlertModal.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>;\n\nexport const AlertModalDescription = ({ className, ...props }: Props) => (\n <AlertDialogPrimitive.Description\n className={cn(\n 'tw:font-sans',\n 'tw:tracking-normal',\n 'tw:font-normal',\n 'tw:text-muted-foreground',\n\n 'tw:group-data-[design=default]/alert-modal:text-foreground',\n 'tw:group-data-[design=default]/alert-modal:text-sm',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalFooter = ({ className, ...props }: Props) => (\n <div\n className={cn(\n 'tw:flex',\n 'tw:gap-2',\n\n 'tw:group-data-[design=default]/alert-modal:flex-col',\n 'tw:group-data-[design=default]/alert-modal:sm:flex-row',\n\n 'tw:group-data-[design=argo]/alert-modal:justify-end',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalHeader = ({ className, ...props }: Props) => (\n <div\n className={cn(\n 'tw:grid',\n 'tw:grid-cols-[auto_1fr]',\n 'tw:items-start',\n 'tw:gap-y-1',\n\n // default (legacy) needs more breathing room below the title's separator border\n 'tw:group-data-[design=default]/alert-modal:gap-y-4',\n 'tw:group-data-[design=argo]/alert-modal:gap-x-3',\n className,\n )}\n {...props}\n />\n);\n","import type { ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { AlertModalVariant } from './variant';\n\nconst VARIANT_ICONS: Record<AlertModalVariant, ReactNode> = {\n info: <Info />,\n warning: <AlertTriangle />,\n danger: <AlertTriangle />,\n success: <CircleCheck />,\n};\n\ntype Props = {\n variant: AlertModalVariant;\n icon?: ReactNode;\n};\n\nexport const AlertModalIcon = ({ variant, icon }: Props) => {\n const glyph = icon ?? VARIANT_ICONS[variant];\n\n return (\n <>\n {/* Default design language: floating circular badge (Modal-style). Hidden in argo. /}\n <div\n data-slot=\"alert-modal-icon\"\n className={cn(\n 'tw:group-data-[design=argo]/alert-modal:hidden',\n 'tw:absolute',\n 'tw:top-0',\n 'tw:left-8',\n 'tw:translate-y-[-50%]',\n 'tw:size-12',\n )}\n >\n <div\n className={cn('tw:relative', 'tw:rounded-full', 'tw:size-12', {\n 'tw:bg-blue-500': variant === 'info',\n 'tw:bg-warning-500': variant === 'warning',\n 'tw:bg-error-500': variant === 'danger',\n 'tw:bg-green-500': variant === 'success',\n })}\n >\n <span\n className={cn(\n 'tw:absolute',\n 'tw:inset-0',\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:text-white',\n 'tw:[&_svg:not([class=\"tw:size-\"])]:size-6',\n 'tw:[&_svg]:aspect-square',\n )}\n >\n {glyph}\n </span>\n </div>\n </div>\n\n {/* Argo design language: inline tinted badge (Badge \"-inverse\" pattern). Hidden in default. /}\n <span\n data-slot=\"alert-modal-icon\"\n className={cn(\n 'tw:hidden',\n 'tw:group-data-[design=argo]/alert-modal:inline-flex',\n // grid placement: column 1 of the first row, top-aligned with the first line of content\n 'tw:col-start-1',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:shrink-0',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:rounded',\n 'tw:size-8',\n 'tw:[&_svg:not([class=\"tw:size-\"])]:size-5',\n {\n 'tw:bg-blue-100 tw:text-blue-600': variant === 'info',\n 'tw:bg-warning-100 tw:text-warning-500': variant === 'warning',\n 'tw:bg-error-100 tw:text-error-500': variant === 'danger',\n 'tw:bg-green-100 tw:text-green-900': variant === 'success',\n },\n )}\n >\n {glyph}\n </span>\n </>\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Overlay } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Overlay>;\n\nexport const AlertModalOverlay = ({ ref, className, ...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 'tw:data-[state=open]:animate-in',\n\n // closing animation\n 'tw:data-[state=closed]:duration-500',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:animate-out',\n\n className,\n )}\n />\n);\n","import type { ComponentPropsWithRef } from 'react';\nimport { Title } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Title>;\n\nexport const AlertModalTitle = ({ children, className, ...props }: Props) => (\n <Title\n {...props}\n asChild\n className={cn(\n 'tw:font-medium',\n 'tw:text-foreground',\n 'tw:break-anywhere',\n\n // default (legacy) gets a Modal-style separator line under the title (Modal uses border-neutral-150)\n 'tw:group-data-[design=default]/alert-modal:border-b',\n 'tw:group-data-[design=default]/alert-modal:border-neutral-150',\n 'tw:group-data-[design=default]/alert-modal:pb-3',\n className,\n )}\n >\n <h3>{children}</h3>\n </Title>\n);\n","import { createContext, use } from 'react';\nimport type { MouseEvent } from 'react';\n\ntype AlertModalContextType = {\n isLoading: boolean;\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst AlertModalContext = createContext<AlertModalContextType \| null>(null);\n\nexport const AlertModalContextProvider = AlertModalContext.Provider;\n\nexport const useAlertModalContext = (): AlertModalContextType => {\n const context = use(AlertModalContext);\n if (context === null)\n throw new Error('AlertModal compound components must be rendered inside <AlertModal>.');\n return context;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Action, Cancel, Content, Portal } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { AlertModalDescription } from './AlertModalDescription';\nimport { AlertModalFooter } from './AlertModalFooter';\nimport { AlertModalHeader } from './AlertModalHeader';\nimport { AlertModalIcon } from './AlertModalIcon';\nimport { AlertModalOverlay } from './AlertModalOverlay';\nimport { AlertModalTitle } from './AlertModalTitle';\nimport { useAlertModalContext } from './context';\nimport type { AlertModalVariant } from './variant';\n\ntype Props = {\n variant?: AlertModalVariant;\n icon?: ReactNode;\n title?: ReactNode;\n cancelLabel?: ReactNode;\n confirmLabel?: ReactNode;\n /* Blocks the confirm action while a host-tracked precondition is unmet. Cancel stays available. /\n confirmDisabled?: boolean;\n container?: ComponentProps<typeof Portal>['container'];\n} & Omit<ComponentProps<typeof Content>, 'title'>;\n\nexport const AlertModalContent = ({\n variant = 'info',\n icon,\n title,\n cancelLabel = 'Cancel',\n confirmLabel: actionLabel = 'Confirm',\n confirmDisabled = false,\n container,\n className,\n children,\n onEscapeKeyDown,\n ...props\n}: Props) => {\n const { isLoading, onConfirm, onCancel } = useAlertModalContext();\n const designLanguage = useArgoDesign() ? 'argo' : 'default';\n\n const handleEscapeKeyDown: ComponentProps<typeof Content>['onEscapeKeyDown'] = (event) => {\n // Stop propagation so a parent Modal/Sheet doesn't also close when this is a nested confirmation.\n event.stopPropagation();\n // Lock dismissal while the action is running.\n if (isLoading) event.preventDefault();\n onEscapeKeyDown?.(event);\n };\n\n return (\n <Portal container={container}>\n <AlertModalOverlay\n // Stop propagation at the overlay (common ancestor of backdrop + content):\n // - without it, clicks/Enter inside the modal also fire handlers on the host that rendered\n // <AlertModal> (e.g. a clickable row, or an editor that opens a code block on Enter)\n // - portaling the content does not prevent this\n // - Escape is exempt so Radix can still close on Esc\n onClick={(event) => event.stopPropagation()}\n onKeyDown={(event) => {\n if (event.key !== 'Escape') event.stopPropagation();\n }}\n >\n <Content\n data-design={designLanguage}\n // Radix auto-links `aria-describedby` to `<AlertModalDescription>`. With no description\n // (no children) it warns about the missing link — suppress it like Modal/Sheet do.\n {...(children ? {} : { 'aria-describedby': undefined })}\n onEscapeKeyDown={handleEscapeKeyDown}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/alert-modal',\n 'tw:text-base',\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 'tw:data-[design=default]:top-20',\n 'tw:data-[design=argo]:top-1/2',\n 'tw:data-[design=argo]:-translate-y-1/2',\n\n // sizing - compact alert width\n 'tw:w-full',\n 'tw:max-w-[480px]',\n 'tw:max-h-[calc(100vh-2theme(spacing.20))]',\n 'tw:data-[design=argo]:overflow-y-auto',\n\n // layout: stack the header and footer (each owns its own internal layout)\n 'tw:flex',\n 'tw:flex-col',\n 'tw:gap-4',\n\n 'tw:data-[design=default]:rounded-lg',\n 'tw:data-[design=argo]:rounded-3xl',\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n 'tw:data-[design=default]:px-7',\n 'tw:data-[design=default]:py-8',\n 'tw:data-[design=argo]:p-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 // default design: Modal-style slide-down + zoom. No `slide--left-1/2`: under v4 the\n // x-centring lives on the `translate` PROPERTY (it persists through the transform-based\n // animation), so an enter `-50%` would stack on it (= -100%) and fly in from the left.\n 'tw:data-[design=default]:data-[state=open]:zoom-in-80',\n 'tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]',\n 'tw:data-[design=default]:data-[state=closed]:zoom-out-80',\n 'tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]',\n\n // argo design: pop from the centre — zoom only (centring persists on the translate property)\n 'tw:data-[design=argo]:data-[state=open]:zoom-in-95',\n 'tw:data-[design=argo]:data-[state=closed]:zoom-out-95',\n\n className,\n )}\n {...props}\n >\n <AlertModalHeader>\n <AlertModalIcon variant={variant} icon={icon} />\n\n {title && (\n <AlertModalTitle className=\"tw:col-start-2 tw:row-start-1 tw:self-center\">\n {title}\n </AlertModalTitle>\n )}\n\n {children && (\n <AlertModalDescription\n className={cn(\n 'tw:col-start-2',\n title ? 'tw:row-start-2' : 'tw:row-start-1 tw:self-center',\n )}\n >\n {children}\n </AlertModalDescription>\n )}\n </AlertModalHeader>\n\n <AlertModalFooter>\n <Cancel asChild>\n <Button\n type=\"button\"\n variant=\"outline\"\n disabled={isLoading}\n onClick={onCancel}\n className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n >\n {cancelLabel}\n </Button>\n </Cancel>\n\n <Action asChild>\n <Button\n type=\"button\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n isLoading={isLoading}\n disabled={isLoading \|\| confirmDisabled}\n onClick={onConfirm}\n className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n >\n {actionLabel}\n </Button>\n </Action>\n </AlertModalFooter>\n </Content>\n </AlertModalOverlay>\n </Portal>\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Trigger } from '@radix-ui/react-alert-dialog';\n\ntype Props = ComponentPropsWithRef<typeof Trigger>;\n\nexport const AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }: Props) => (\n <Trigger\n {...props}\n ref={ref}\n onClick={(event) => {\n // The trigger sits in the normal DOM tree, often inside a clickable row/card. Stop the\n // open-click from bubbling to that ancestor's onClick. (Radix still opens the modal —\n // stopPropagation only blocks ancestors, not the open handler on the same element.)\n event.stopPropagation();\n onClick?.(event);\n }}\n onKeyDown={(event) => {\n // Only the activation keys open the modal and would leak; stop just those so Tab/arrows/etc.\n // still reach ancestor keyboard handlers. The button still activates (stopPropagation only\n // blocks ancestors).\n if (event.key === 'Enter' \|\| event.key === ' ') event.stopPropagation();\n onKeyDown?.(event);\n }}\n />\n);\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, MouseEvent } from 'react';\nimport { Root } from '@radix-ui/react-alert-dialog';\n\nimport { AlertModalContent } from './AlertModalContent';\nimport { AlertModalTrigger } from './AlertModalTrigger';\nimport { AlertModalContextProvider } from './context';\n\nconst noop = () => undefined;\n\ntype ConfirmHandler = (event: MouseEvent<HTMLButtonElement>) => void \| Promise<unknown>;\ntype CancelHandler = (event: MouseEvent<HTMLButtonElement>) => void;\n\ntype Props = {\n onConfirm?: ConfirmHandler;\n onCancel?: CancelHandler;\n skipAsyncWait?: boolean;\n /* Marks the confirm action busy from the outside, on top of the state inferred from a thenable `onConfirm`. */\n isLoading?: boolean;\n} & ComponentProps<typeof Root>;\n\nexport const AlertModal = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n skipAsyncWait = false,\n isLoading = false,\n open,\n defaultOpen,\n onOpenChange,\n ...rest\n}: Props) => {\n const [isConfirming, setIsConfirming] = useState(false);\n\n // Controllable open state: when `open` is provided the parent owns it; otherwise we keep our own.\n const isControlled = open !== undefined;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n const isOpen = isControlled ? open : uncontrolledOpen;\n\n const confirmRef = useRef(onConfirm);\n const cancelRef = useRef(onCancel);\n const onOpenChangeRef = useRef(onOpenChange);\n\n // Latest-ref pattern: keep the handlers out of `context`'s deps so its identity stays stable,\n // without writing to refs during render (synced in an effect, before any handler can fire).\n useEffect(() => {\n confirmRef.current = onConfirm;\n cancelRef.current = onCancel;\n onOpenChangeRef.current = onOpenChange;\n }, [onConfirm, onCancel, onOpenChange]);\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolledOpen(next);\n onOpenChangeRef.current?.(next);\n },\n [isControlled],\n );\n\n const context = useMemo(\n () => ({\n // The two sources of \"the confirm action is running\" converge here, so every consumer\n // downstream reads one answer regardless of which way the host drives it.\n isLoading: isConfirming \|\| isLoading,\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => {\n const result = confirmRef.current(event);\n\n // Treat any thenable as async, not just native promises.\n const isThenable =\n result !== null && typeof result === 'object' && typeof result.then === 'function';\n if (!isThenable \|\| skipAsyncWait) return;\n\n // Keep the modal open while the async action runs, then close once it settles.\n event.preventDefault();\n setIsConfirming(true);\n Promise.resolve(result).finally(() => {\n setIsConfirming(false);\n setOpen(false);\n });\n },\n onCancel: (event: MouseEvent<HTMLButtonElement>) => {\n cancelRef.current(event);\n },\n }),\n [isConfirming, isLoading, skipAsyncWait, setOpen],\n );\n\n return (\n <Root {...rest} open={isOpen} onOpenChange={setOpen}>\n <AlertModalContextProvider value={context}>{children}</AlertModalContextProvider>\n </Root>\n );\n};\n\nAlertModal.Trigger = AlertModalTrigger;\nAlertModal.Content = AlertModalContent;\n"],"mappings":"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"}
1	+ {"version":3,"file":"AlertModal-DQAGpsEy.js","names":[],"sources":["../src/components/AlertModal/AlertModalDescription.tsx","../src/components/AlertModal/AlertModalFooter.tsx","../src/components/AlertModal/AlertModalHeader.tsx","../src/components/AlertModal/AlertModalIcon.tsx","../src/components/AlertModal/AlertModalOverlay.tsx","../src/components/AlertModal/AlertModalTitle.tsx","../src/components/AlertModal/context.ts","../src/components/AlertModal/AlertModalContent.tsx","../src/components/AlertModal/AlertModalTrigger.tsx","../src/components/AlertModal/AlertModal.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>;\n\nexport const AlertModalDescription = ({ className, ...props }: Props) => (\n <AlertDialogPrimitive.Description\n className={cn(\n 'tw:font-sans',\n 'tw:tracking-normal',\n 'tw:font-normal',\n 'tw:text-muted-foreground',\n\n 'tw:group-data-[design=default]/alert-modal:text-foreground',\n 'tw:group-data-[design=default]/alert-modal:text-sm',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalFooter = ({ className, ...props }: Props) => (\n <div\n className={cn(\n 'tw:flex',\n 'tw:gap-2',\n\n 'tw:group-data-[design=default]/alert-modal:flex-col',\n 'tw:group-data-[design=default]/alert-modal:sm:flex-row',\n\n 'tw:group-data-[design=argo]/alert-modal:justify-end',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalHeader = ({ className, ...props }: Props) => (\n <div\n className={cn(\n 'tw:grid',\n 'tw:grid-cols-[auto_1fr]',\n 'tw:items-start',\n 'tw:gap-y-1',\n\n // default (legacy) needs more breathing room below the title's separator border\n 'tw:group-data-[design=default]/alert-modal:gap-y-4',\n 'tw:group-data-[design=argo]/alert-modal:gap-x-3',\n className,\n )}\n {...props}\n />\n);\n","import type { ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { AlertModalVariant } from './variant';\n\nconst VARIANT_ICONS: Record<AlertModalVariant, ReactNode> = {\n info: <Info />,\n warning: <AlertTriangle />,\n danger: <AlertTriangle />,\n success: <CircleCheck />,\n};\n\ntype Props = {\n variant: AlertModalVariant;\n icon?: ReactNode;\n};\n\nexport const AlertModalIcon = ({ variant, icon }: Props) => {\n const glyph = icon ?? VARIANT_ICONS[variant];\n\n return (\n <>\n {/* Default design language: floating circular badge (Modal-style). Hidden in argo. /}\n <div\n data-slot=\"alert-modal-icon\"\n className={cn(\n 'tw:group-data-[design=argo]/alert-modal:hidden',\n 'tw:absolute',\n 'tw:top-0',\n 'tw:left-8',\n 'tw:translate-y-[-50%]',\n 'tw:size-12',\n )}\n >\n <div\n className={cn('tw:relative', 'tw:rounded-full', 'tw:size-12', {\n 'tw:bg-blue-500': variant === 'info',\n 'tw:bg-warning-500': variant === 'warning',\n 'tw:bg-error-500': variant === 'danger',\n 'tw:bg-green-500': variant === 'success',\n })}\n >\n <span\n className={cn(\n 'tw:absolute',\n 'tw:inset-0',\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:text-white',\n 'tw:[&_svg:not([class=\"tw:size-\"])]:size-6',\n 'tw:[&_svg]:aspect-square',\n )}\n >\n {glyph}\n </span>\n </div>\n </div>\n\n {/* Argo design language: inline tinted badge (Badge \"-inverse\" pattern). Hidden in default. /}\n <span\n data-slot=\"alert-modal-icon\"\n className={cn(\n 'tw:hidden',\n 'tw:group-data-[design=argo]/alert-modal:inline-flex',\n // grid placement: column 1 of the first row, top-aligned with the first line of content\n 'tw:col-start-1',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:shrink-0',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:rounded',\n 'tw:size-8',\n 'tw:[&_svg:not([class=\"tw:size-\"])]:size-5',\n {\n 'tw:bg-blue-100 tw:text-blue-600': variant === 'info',\n 'tw:bg-warning-100 tw:text-warning-500': variant === 'warning',\n 'tw:bg-error-100 tw:text-error-500': variant === 'danger',\n 'tw:bg-green-100 tw:text-green-900': variant === 'success',\n },\n )}\n >\n {glyph}\n </span>\n </>\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Overlay } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Overlay>;\n\nexport const AlertModalOverlay = ({ ref, className, ...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 'tw:data-[state=open]:animate-in',\n\n // closing animation\n 'tw:data-[state=closed]:duration-500',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:animate-out',\n\n className,\n )}\n />\n);\n","import type { ComponentPropsWithRef } from 'react';\nimport { Title } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Title>;\n\nexport const AlertModalTitle = ({ children, className, ...props }: Props) => (\n <Title\n {...props}\n asChild\n className={cn(\n 'tw:font-medium',\n 'tw:text-foreground',\n 'tw:break-anywhere',\n\n // default (legacy) gets a Modal-style separator line under the title (Modal uses border-neutral-150)\n 'tw:group-data-[design=default]/alert-modal:border-b',\n 'tw:group-data-[design=default]/alert-modal:border-neutral-150',\n 'tw:group-data-[design=default]/alert-modal:pb-3',\n className,\n )}\n >\n <h3>{children}</h3>\n </Title>\n);\n","import { createContext, use } from 'react';\nimport type { MouseEvent } from 'react';\n\ntype AlertModalContextType = {\n isLoading: boolean;\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst AlertModalContext = createContext<AlertModalContextType \| null>(null);\n\nexport const AlertModalContextProvider = AlertModalContext.Provider;\n\nexport const useAlertModalContext = (): AlertModalContextType => {\n const context = use(AlertModalContext);\n if (context === null)\n throw new Error('AlertModal compound components must be rendered inside <AlertModal>.');\n return context;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Action, Cancel, Content, Portal } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { AlertModalDescription } from './AlertModalDescription';\nimport { AlertModalFooter } from './AlertModalFooter';\nimport { AlertModalHeader } from './AlertModalHeader';\nimport { AlertModalIcon } from './AlertModalIcon';\nimport { AlertModalOverlay } from './AlertModalOverlay';\nimport { AlertModalTitle } from './AlertModalTitle';\nimport { useAlertModalContext } from './context';\nimport type { AlertModalVariant } from './variant';\n\ntype Props = {\n variant?: AlertModalVariant;\n icon?: ReactNode;\n title?: ReactNode;\n cancelLabel?: ReactNode;\n confirmLabel?: ReactNode;\n /* Blocks the confirm action while a host-tracked precondition is unmet. Cancel stays available. /\n confirmDisabled?: boolean;\n container?: ComponentProps<typeof Portal>['container'];\n} & Omit<ComponentProps<typeof Content>, 'title'>;\n\nexport const AlertModalContent = ({\n variant = 'info',\n icon,\n title,\n cancelLabel = 'Cancel',\n confirmLabel: actionLabel = 'Confirm',\n confirmDisabled = false,\n container,\n className,\n children,\n onEscapeKeyDown,\n ...props\n}: Props) => {\n const { isLoading, onConfirm, onCancel } = useAlertModalContext();\n const designLanguage = useArgoDesign() ? 'argo' : 'default';\n\n const handleEscapeKeyDown: ComponentProps<typeof Content>['onEscapeKeyDown'] = (event) => {\n // Stop propagation so a parent Modal/Sheet doesn't also close when this is a nested confirmation.\n event.stopPropagation();\n // Lock dismissal while the action is running.\n if (isLoading) event.preventDefault();\n onEscapeKeyDown?.(event);\n };\n\n return (\n <Portal container={container}>\n <AlertModalOverlay\n // Stop propagation at the overlay (common ancestor of backdrop + content):\n // - without it, clicks/Enter inside the modal also fire handlers on the host that rendered\n // <AlertModal> (e.g. a clickable row, or an editor that opens a code block on Enter)\n // - portaling the content does not prevent this\n // - Escape is exempt so Radix can still close on Esc\n onClick={(event) => event.stopPropagation()}\n onKeyDown={(event) => {\n if (event.key !== 'Escape') event.stopPropagation();\n }}\n >\n <Content\n data-design={designLanguage}\n // Radix auto-links `aria-describedby` to `<AlertModalDescription>`. With no description\n // (no children) it warns about the missing link — suppress it like Modal/Sheet do.\n {...(children ? {} : { 'aria-describedby': undefined })}\n onEscapeKeyDown={handleEscapeKeyDown}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/alert-modal',\n 'tw:text-base',\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 'tw:data-[design=default]:top-20',\n 'tw:data-[design=argo]:top-1/2',\n 'tw:data-[design=argo]:-translate-y-1/2',\n\n // sizing - compact alert width\n 'tw:w-full',\n 'tw:max-w-[480px]',\n 'tw:max-h-[calc(100vh-2theme(spacing.20))]',\n 'tw:data-[design=argo]:overflow-y-auto',\n\n // layout: stack the header and footer (each owns its own internal layout)\n 'tw:flex',\n 'tw:flex-col',\n 'tw:gap-4',\n\n 'tw:data-[design=default]:rounded-lg',\n 'tw:data-[design=argo]:rounded-3xl',\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n 'tw:data-[design=default]:px-7',\n 'tw:data-[design=default]:py-8',\n 'tw:data-[design=argo]:p-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 // default design: Modal-style slide-down + zoom. No `slide--left-1/2`: under v4 the\n // x-centring lives on the `translate` PROPERTY (it persists through the transform-based\n // animation), so an enter `-50%` would stack on it (= -100%) and fly in from the left.\n 'tw:data-[design=default]:data-[state=open]:zoom-in-80',\n 'tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]',\n 'tw:data-[design=default]:data-[state=closed]:zoom-out-80',\n 'tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]',\n\n // argo design: pop from the centre — zoom only (centring persists on the translate property)\n 'tw:data-[design=argo]:data-[state=open]:zoom-in-95',\n 'tw:data-[design=argo]:data-[state=closed]:zoom-out-95',\n\n className,\n )}\n {...props}\n >\n <AlertModalHeader>\n <AlertModalIcon variant={variant} icon={icon} />\n\n {title && (\n <AlertModalTitle className=\"tw:col-start-2 tw:row-start-1 tw:self-center\">\n {title}\n </AlertModalTitle>\n )}\n\n {children && (\n <AlertModalDescription\n className={cn(\n 'tw:col-start-2',\n title ? 'tw:row-start-2' : 'tw:row-start-1 tw:self-center',\n )}\n >\n {children}\n </AlertModalDescription>\n )}\n </AlertModalHeader>\n\n <AlertModalFooter>\n <Cancel asChild>\n <Button\n type=\"button\"\n variant=\"outline\"\n disabled={isLoading}\n onClick={onCancel}\n className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n >\n {cancelLabel}\n </Button>\n </Cancel>\n\n <Action asChild>\n <Button\n type=\"button\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n isLoading={isLoading}\n disabled={isLoading \|\| confirmDisabled}\n onClick={onConfirm}\n className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n >\n {actionLabel}\n </Button>\n </Action>\n </AlertModalFooter>\n </Content>\n </AlertModalOverlay>\n </Portal>\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Trigger } from '@radix-ui/react-alert-dialog';\n\ntype Props = ComponentPropsWithRef<typeof Trigger>;\n\nexport const AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }: Props) => (\n <Trigger\n {...props}\n ref={ref}\n onClick={(event) => {\n // The trigger sits in the normal DOM tree, often inside a clickable row/card. Stop the\n // open-click from bubbling to that ancestor's onClick. (Radix still opens the modal —\n // stopPropagation only blocks ancestors, not the open handler on the same element.)\n event.stopPropagation();\n onClick?.(event);\n }}\n onKeyDown={(event) => {\n // Only the activation keys open the modal and would leak; stop just those so Tab/arrows/etc.\n // still reach ancestor keyboard handlers. The button still activates (stopPropagation only\n // blocks ancestors).\n if (event.key === 'Enter' \|\| event.key === ' ') event.stopPropagation();\n onKeyDown?.(event);\n }}\n />\n);\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, MouseEvent } from 'react';\nimport { Root } from '@radix-ui/react-alert-dialog';\n\nimport { AlertModalContent } from './AlertModalContent';\nimport { AlertModalTrigger } from './AlertModalTrigger';\nimport { AlertModalContextProvider } from './context';\n\nconst noop = () => undefined;\n\ntype ConfirmHandler = (event: MouseEvent<HTMLButtonElement>) => void \| Promise<unknown>;\ntype CancelHandler = (event: MouseEvent<HTMLButtonElement>) => void;\n\ntype Props = {\n onConfirm?: ConfirmHandler;\n onCancel?: CancelHandler;\n skipAsyncWait?: boolean;\n /* Marks the confirm action busy from the outside, on top of the state inferred from a thenable `onConfirm`. */\n isLoading?: boolean;\n} & ComponentProps<typeof Root>;\n\nexport const AlertModal = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n skipAsyncWait = false,\n isLoading = false,\n open,\n defaultOpen,\n onOpenChange,\n ...rest\n}: Props) => {\n const [isConfirming, setIsConfirming] = useState(false);\n\n // Controllable open state: when `open` is provided the parent owns it; otherwise we keep our own.\n const isControlled = open !== undefined;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n const isOpen = isControlled ? open : uncontrolledOpen;\n\n const confirmRef = useRef(onConfirm);\n const cancelRef = useRef(onCancel);\n const onOpenChangeRef = useRef(onOpenChange);\n\n // Latest-ref pattern: keep the handlers out of `context`'s deps so its identity stays stable,\n // without writing to refs during render (synced in an effect, before any handler can fire).\n useEffect(() => {\n confirmRef.current = onConfirm;\n cancelRef.current = onCancel;\n onOpenChangeRef.current = onOpenChange;\n }, [onConfirm, onCancel, onOpenChange]);\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolledOpen(next);\n onOpenChangeRef.current?.(next);\n },\n [isControlled],\n );\n\n const context = useMemo(\n () => ({\n // The two sources of \"the confirm action is running\" converge here, so every consumer\n // downstream reads one answer regardless of which way the host drives it.\n isLoading: isConfirming \|\| isLoading,\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => {\n const result = confirmRef.current(event);\n\n // Treat any thenable as async, not just native promises.\n const isThenable =\n result !== null && typeof result === 'object' && typeof result.then === 'function';\n if (!isThenable \|\| skipAsyncWait) return;\n\n // The async confirm's outcome drives the modal.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsConfirming(true);\n Promise.resolve(result)\n .then(() => setOpen(false))\n .finally(() => setIsConfirming(false));\n },\n onCancel: (event: MouseEvent<HTMLButtonElement>) => {\n cancelRef.current(event);\n },\n }),\n [isConfirming, isLoading, skipAsyncWait, setOpen],\n );\n\n return (\n <Root {...rest} open={isOpen} onOpenChange={setOpen}>\n <AlertModalContextProvider value={context}>{children}</AlertModalContextProvider>\n </Root>\n );\n};\n\nAlertModal.Trigger = AlertModalTrigger;\nAlertModal.Content = AlertModalContent;\n"],"mappings":"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"}

package/dist/{AppShell-B5GQN6Zs.js → AppShell-BUoxM3fv.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useTheme } from "./context-KxxeMHbR.js";
-import { Slot } from "@radix-ui/react-slot";
+import { useTheme } from "./context-BrNtMc1H.js";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/blocks/AppShell/SidebarShell.tsx
 /**
@@ -42,6 +42,14 @@ const TopNavShell = ({ ref, className, children, ...props }) => /* @__PURE__ */
 });
 //#endregion
 //#region src/blocks/AppShell/AppShell.tsx
+/**
+* Targets a shell slot from outside the shell.
+*
+* - Each slot component stamps `data-app-shell-slot` with its own name.
+* - Exported so a consumer never hand-types the attribute: renaming it then breaks the
+*   build instead of silently matching nothing.
+*/
+const appShellSlotSelector = (slot) => `[data-app-shell-slot="${slot}"]`;
 const Root$1 = ({ ref, className, headerSpan = "content", children, ...props }) => {
 	const { currentTheme: brand } = useTheme();
 	if (brand.shell === "topnav") return /* @__PURE__ */ jsx(TopNavShell, {
@@ -77,13 +85,19 @@ const SidebarSlot = ({ ref, className, asChild, children, ...props }) => {
 		children
 	});
 };
-const Main = ({ ref, className, asChild, children, ...props }) => {
+const Main = ({ ref, className, contentClassName, clampContent = false, asChild, children, ...props }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "main", {
 		ref,
 		"data-app-shell-slot": "main",
-		className: cn("tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto", "tw:p-6", "tw:[grid-area:main]", className),
+		className: cn("tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto", "tw:[grid-area:main]", className),
 		...props,
-		children
+		children: /* @__PURE__ */ jsx(Slottable, {
+			child: children,
+			children: (content) => /* @__PURE__ */ jsx("div", {
+				className: cn("tw:flex tw:flex-col tw:p-6", clampContent ? "tw:min-h-0 tw:flex-1" : "tw:min-h-full tw:shrink-0", contentClassName),
+				children: content
+			})
+		})
 	});
 };
 const Aside = ({ ref, className, asChild, flush = false, children, ...props }) => {
@@ -129,15 +143,20 @@ const AppShell = Object.assign(Root$1, {
 	*/
 	Sidebar: SidebarSlot,
 	/**
-	* Main content outlet. Applies an opinionated default page gutter (`tw:p-6`)
-	* so content looks right out of the box; override the padding (e.g. `tw:p-0`)
-	* when the app owns its own gutter.
+	* Main content outlet. Scrolls its own content, and applies an opinionated
+	* default page gutter (`tw:p-6`) on a wrapper inside the scroll container.
+	*
+	* - Override the gutter through `contentClassName` (e.g. `tw:p-0`) when the
+	*   app owns its own.
+	* - `className` lands on the scroll container itself — a `p-*` there parks
+	*   every `position: sticky` descendant one gutter below the scrollport's
+	*   visible top edge.
 	*/
 	Main,
 	/** Optional right rail. Present in both shells. */
 	Aside
 });
 //#endregion
-export { AppShell };
+export { AppShell, appShellSlotSelector };
-//# sourceMappingURL=AppShell-B5GQN6Zs.js.map
+//# sourceMappingURL=AppShell-BUoxM3fv.js.map

package/dist/AppShell-BUoxM3fv.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AppShell-BUoxM3fv.js","names":["Root"],"sources":["../src/blocks/AppShell/SidebarShell.tsx","../src/blocks/AppShell/TopNavShell.tsx","../src/blocks/AppShell/AppShell.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { AppShellHeaderSpan } from './types';\n\n// Required, not defaulted: `AppShell` owns the default so the generated component\n// API reports it, and this shell is internal — nothing else constructs it.\ntype Props = ComponentProps<'div'> & { headerSpan: AppShellHeaderSpan };\n\n/**\n * Sidebar geometry: left-rail navigation + header row + main outlet, with an\n * optional right rail. The grid template names match the `[grid-area:*]`\n * utilities the `AppShell.*` slots write onto themselves, so slot placement\n * is independent of source order.\n *\n * `headerSpan` picks which of the two row templates applies — see\n * {@link AppShellHeaderSpan}. Both keep the same three columns, so the rails\n * line up either way.\n */\nexport const SidebarShell = ({ ref, className, headerSpan, children, ...props }: Props) => (\n <div\n ref={ref}\n data-app-shell-geometry=\"sidebar\"\n data-header-span={headerSpan}\n className={cn(\n 'tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background',\n 'tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]',\n headerSpan === 'full'\n ? cn(\n 'tw:[grid-template-areas:\"header_header_header\"_\"sidebar_main_aside\"]',\n // `Sidebar`'s inner wrapper is `fixed inset-y-0` — it owns that for its\n // collapse/resize animation — so it anchors to the viewport and paints\n // over a full-width header. Promoting the rail slots to containing\n // blocks re-anchors those fixed children to the slot's own grid box.\n // Beats overriding `top`: no `!important` to out-specify `inset-y-0`,\n // and the shell never needs to know the header's height.\n 'tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]',\n 'tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]',\n // A containing block is also a stacking context, so the promotion traps\n // the rail's own `z-50` inside the slot. The left rail sits before `main`\n // in source order, so without a slot-level z-index an expand-on-hover rail\n // paints *under* main's positioned content instead of over it. Restate it\n // here — grid items take `z-index` without `position`. The right rail needs\n // one too: source order only beats `z-index: auto` content, so main's\n // sticky elements (table headers at `z-10`, PageLayout's sticky header at\n // `z-20`) would paint over an aside left at `auto`. `z-30` clears them all\n // outright — no source-order tiebreak — while staying under the left\n // rail's `z-50`, keeping an expanding left rail above a filled right one.\n 'tw:[&>[data-app-shell-slot=sidebar]]:z-50',\n 'tw:[&>[data-app-shell-slot=aside]]:z-30',\n // The promotion is also what lets `styles.css` clip a parked off-canvas\n // rail: it makes the slot that panel's containing block.\n )\n : 'tw:[grid-template-areas:\"sidebar_header_aside\"_\"sidebar_main_aside\"]',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Top-nav geometry: header row spans the full width, main + aside live below.\n * The `sidebar` grid area is intentionally absent — the\n * `[grid-area:sidebar]` slot collapses to `display: none` so consumers can\n * pass the same composition under either brand. Primary navigation moves\n * into `<AppShell.Header>` for top-nav-first compositions.\n *\n * Takes no `headerSpan`: this header already spans the full width, so `AppShell`\n * keeps the prop away from this shell rather than having it accept and ignore it.\n */\nexport const TopNavShell = ({ ref, className, children, ...props }: Props) => (\n <div\n ref={ref}\n data-app-shell-geometry=\"topnav\"\n className={cn(\n 'tw:grid tw:h-svh tw:w-full tw:bg-background',\n 'tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]',\n 'tw:[grid-template-areas:\"header_header\"_\"main_aside\"]',\n // The sidebar slot has no place in this geometry — hide it without\n // forcing callers to conditionalise their JSX.\n 'tw:[&>[data-app-shell-slot=sidebar]]:hidden',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n);\n","import type { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\n\nimport { useTheme } from '../../components/ThemeProvider';\nimport { cn } from '../../utils';\n\nimport { SidebarShell } from './SidebarShell';\nimport { TopNavShell } from './TopNavShell';\nimport type { AppShellHeaderSpan, AppShellSlot } from './types';\n\n/**\n * Targets a shell slot from outside the shell.\n *\n * - Each slot component stamps `data-app-shell-slot` with its own name.\n * - Exported so a consumer never hand-types the attribute: renaming it then breaks the\n * build instead of silently matching nothing.\n */\nexport const appShellSlotSelector = (slot: AppShellSlot) => `[data-app-shell-slot=\"${slot}\"]`;\n\ntype RootProps = ComponentPropsWithoutRef<'div'> & {\n /**\n * How far the header row stretches. `content` (default) gives it the middle\n * column only, with both rails beside it; `full` spans all three columns and\n * drops the rails below it, so the brand mark aligns to the viewport edge.\n * No-op under the top-nav geometry, whose header is already full width.\n *\n * Reach for `full` when the header carries app-wide identity (brand mark,\n * project switcher, account menu) rather than page-level navigation.\n */\n headerSpan?: AppShellHeaderSpan;\n};\n\nconst Root = ({\n ref,\n className,\n // Defaulted here rather than in SidebarShell so the generated component API\n // records `content` instead of \"no default\".\n headerSpan = 'content',\n children,\n ...props\n}: RootProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n const { currentTheme: brand } = useTheme();\n\n // Branch rather than pick a component and spread: `headerSpan` is meaningless\n // to the top-nav geometry, and forwarding it there would land a stray\n // `headerspan` attribute on the DOM node.\n if (brand.shell === 'topnav') {\n return (\n <TopNavShell ref={ref} className={className} {...props}>\n {children}\n </TopNavShell>\n );\n }\n\n return (\n <SidebarShell ref={ref} className={className} headerSpan={headerSpan} {...props}>\n {children}\n </SidebarShell>\n );\n};\n\ntype SlotProps = ComponentPropsWithoutRef<'div'> & {\n /** Render as the child element (Radix-Slot pattern), forwarding props onto it. */\n asChild?: boolean;\n};\n\ntype MainProps = SlotProps & {\n /**\n * Classes for the padded content wrapper inside `Main`, where the page gutter lives.\n *\n * This is the one to reach for when overriding the gutter — `className` lands on the scroll\n * container, and a `p-*` there is what breaks every sticky header below it.\n */\n contentClassName?: string;\n /**\n * Bounds the content wrapper to `Main`'s height instead of letting it grow with the content.\n *\n * - For a page that owns its `overflow-auto` scroller: a bounded wrapper is what gives a\n * `flex-1` descendant a definite height, so that descendant is what scrolls.\n * - Gives up the bottom-gutter guarantee below, so pair it with a gutter-free\n * `contentClassName`.\n */\n clampContent?: boolean;\n};\n\ntype ChromeSlotProps = SlotProps & {\n /**\n * Drop the slot's own padding, background and border so a hosted chrome component\n * (`Navbar` in `Header`, `Sidebar side=\"right\"` in `Aside`) can render edge to edge.\n *\n * The slots paint themselves, which is right when you put content straight into them.\n * It is wrong when the child is already a full-bleed surface: the child ends up inset\n * inside the slot with the slot's background showing through as gutters at each end.\n * Use this instead of re-stating the overrides at the call site — hand-written\n * overrides also have to win a cascade fight, which is why they tend to grow an `!`.\n */\n flush?: boolean;\n};\n\nconst Header = ({\n ref,\n className,\n asChild,\n flush = false,\n children,\n ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'header'>> }) => {\n const Comp = asChild ? Slot : 'header';\n return (\n <Comp\n ref={ref}\n data-app-shell-slot=\"header\"\n data-flush={flush || undefined}\n className={cn(\n 'tw:flex',\n flush\n ? 'tw:items-stretch tw:gap-0'\n : 'tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4',\n 'tw:[grid-area:header]',\n className,\n )}\n {...props}\n >\n {children}\n </Comp>\n );\n};\n\nconst SidebarSlot = ({\n ref,\n className,\n asChild,\n children,\n ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp\n ref={ref}\n data-app-shell-slot=\"sidebar\"\n // In a sidebar shell the children render in place. In a top-nav shell\n // the slot is hidden — the shell defines `display: none` for the\n // `sidebar` grid area in that geometry, so consumers can pass the\n // same JSX and let the shell decide visibility.\n className={cn('tw:flex tw:min-h-0 tw:flex-col', 'tw:[grid-area:sidebar]', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n};\n\nconst Main = ({\n ref,\n className,\n contentClassName,\n clampContent = false,\n asChild,\n children,\n ...props\n}: MainProps & { ref?: Ref<ComponentRef<'main'>> }) => {\n const Comp = asChild ? Slot : 'main';\n return (\n <Comp\n ref={ref}\n data-app-shell-slot=\"main\"\n // The scroll container, and nothing else. `className` stays on this element because that is\n // what consumers reach for to reset the contained-scroll opinion (`overflow-visible`), and\n // because the grid placement belongs to the grid item.\n className={cn(\n 'tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto',\n 'tw:[grid-area:main]',\n className,\n )}\n {...props}\n >\n {/*\n The page gutter, on its own wrapper rather than on the scroll container above.\n ⚠️ Not cosmetic layering — it is what makes `position: sticky` work inside `Main`.\n\n - Sticky insets resolve against the nearest scrollport's **padding box**. A gutter on the\n scroll container parks a sticky element one gutter below the scrollport's visible top\n edge, and scrolled content shows through the strip above it. `Table.Header` is\n `sticky top-0`, so that reaches every table in every app on this shell.\n - `min-h-full` keeps the wrapper at least as tall as the scrollport, so a child using\n `flex-1` to fill the viewport still does.\n - `shrink-0` is load-bearing beside it: `min-h-full` replaces flexbox's automatic minimum\n size, which hands `flex-shrink: 1` back to the wrapper. Without it a page taller than\n the scrollport clamps the wrapper to the scrollport height, the content overflows it,\n and the wrapper's `padding-bottom` falls outside the scrollable area.\n - `min-h-full` is only a *minimum*, so the wrapper's used height is its content's and a\n `flex-1` descendant resolves against the content, not the scrollport. `clampContent`\n swaps in `flex-1 min-h-0` for the page that needs the opposite. The two are exclusive:\n no CSS is both content-sized and viewport-definite.\n - The `Slottable` render-prop form is what keeps `asChild` honest: it makes the caller's\n element the scroll container and nests this wrapper inside it. Handing the wrapper to\n `Slot` as its only child instead merges the scroll classes onto the wrapper — dropping\n the `<main>` landmark and putting the gutter back on the scrollport.\n\n Override the gutter through `contentClassName`, not `className`: a `p-*` on the scroll\n container reintroduces the sticky bug.\n */}\n <Slottable child={children}>\n {(content) => (\n <div\n className={cn(\n 'tw:flex tw:flex-col tw:p-6',\n clampContent ? 'tw:min-h-0 tw:flex-1' : 'tw:min-h-full tw:shrink-0',\n contentClassName,\n )}\n >\n {content}\n </div>\n )}\n </Slottable>\n </Comp>\n );\n};\n\nconst Aside = ({\n ref,\n className,\n asChild,\n flush = false,\n children,\n ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'aside'>> }) => {\n const Comp = asChild ? Slot : 'aside';\n return (\n <Comp\n ref={ref}\n data-app-shell-slot=\"aside\"\n data-flush={flush || undefined}\n className={cn(\n 'tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col',\n // A hosted `Sidebar side=\"right\"` owns its own width, border, background and\n // scrolling — so the slot must not also set them, or the rail renders inset\n // inside a second painted surface.\n flush\n ? 'tw:w-auto tw:overflow-visible'\n : 'tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background',\n 'tw:[grid-area:aside]',\n className,\n )}\n {...props}\n >\n {children}\n </Comp>\n );\n};\n\n/**\n * App-shell layout primitive. Reads `useTheme().brand.shell` and dispatches to\n * a sidebar (left rail) or top-nav geometry. Consumers compose the same\n * `<AppShell.Header>` / `<AppShell.Sidebar>` / `<AppShell.Main>` /\n * `<AppShell.Aside>` slots — the shell decides where each slot lives based on\n * the active brand.\n *\n * **When to use:** the root layout of any app that wants to follow the active\n * brand's shell geometry. Host a `PageLayout` inside `<AppShell.Main>` for\n * the per-page content column. Pass `headerSpan=\"full\"` for a full-bleed header\n * row above both rails.\n * **When NOT to use:** standalone screens that aren't part of a navigated app\n * (sign-in, error pages). Render those without `AppShell`.\n * **Composition:** must be rendered inside a `<ThemeProvider>` — the geometry\n * is brand-driven. Pass the same content across brands; the shell handles\n * placement and shows/hides the `Sidebar` slot accordingly.\n *\n * @see AppShell.stories.tsx — flip the Storybook brand toolbar to see the\n * sidebar / top-nav geometry swap from a single composition.\n */\nexport const AppShell = Object.assign(Root, {\n /**\n * Top header row. Renders above `Main` in the sidebar shell; renders as the\n * top bar (with full-width navigation room) in the top-nav shell.\n */\n Header,\n /**\n * Left navigation rail. Rendered in the sidebar shell; hidden by the\n * top-nav shell so the same composition works under either brand — move\n * primary navigation into `Header` for top-nav-first compositions.\n */\n Sidebar: SidebarSlot,\n /**\n * Main content outlet. Scrolls its own content, and applies an opinionated\n * default page gutter (`tw:p-6`) on a wrapper inside the scroll container.\n *\n * - Override the gutter through `contentClassName` (e.g. `tw:p-0`) when the\n * app owns its own.\n * - `className` lands on the scroll container itself — a `p-*` there parks\n * every `position: sticky` descendant one gutter below the scrollport's\n * visible top edge.\n */\n Main,\n /** Optional right rail. Present in both shells. */\n Aside,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAa,gBAAgB,EAAE,KAAK,WAAW,YAAY,UAAU,GAAG,YACtE,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,oBAAkB;CAClB,WAAW,GACT,2DACA,wDACA,eAAe,SACX,GACE,4EAOA,kEACA,gEAWA,6CACA,yCAGF,IACA,4EACJ,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;;;;;AC5CP,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,YACzD,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,WAAW,GACT,+CACA,mDACA,6DAGA,+CACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;;ACfP,MAAa,wBAAwB,SAAuB,yBAAyB,KAAK;AAe1F,MAAMA,UAAQ,EACZ,KACA,WAGA,aAAa,WACb,UACA,GAAG,YACiD;CACpD,MAAM,EAAE,cAAc,UAAU,SAAS;CAKzC,IAAI,MAAM,UAAU,UAClB,OACE,oBAAC,aAAD;EAAkB;EAAgB;EAAW,GAAI;EAC9C;CACU,CAAA;CAIjB,OACE,oBAAC,cAAD;EAAmB;EAAgB;EAAuB;EAAY,GAAI;EACvE;CACW,CAAA;AAElB;AAwCA,MAAM,UAAU,EACd,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YAC0D;CAE7D,OACE,oBAFW,UAAU,OAAO,UAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,WACA,QACI,8BACA,kFACJ,yBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,eAAe,EACnB,KACA,WACA,SACA,UACA,GAAG,YACiD;CAEpD,OACE,oBAFW,UAAU,OAAO,OAE5B;EACO;EACL,uBAAoB;EAKpB,WAAW,GAAG,kCAAkC,0BAA0B,SAAS;EACnF,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,QAAQ,EACZ,KACA,WACA,kBACA,eAAe,OACf,SACA,UACA,GAAG,YACkD;CAErD,OACE,oBAFW,UAAU,OAAO,QAE5B;EACO;EACL,uBAAoB;EAIpB,WAAW,GACT,wEACA,uBACA,SACF;EACA,GAAI;EA4BJ,UAAA,oBAAC,WAAD;GAAW,OAAO;GACd,WAAA,YACA,oBAAC,OAAD;IACE,WAAW,GACT,8BACA,eAAe,yBAAyB,6BACxC,gBACF;IAEC,UAAA;GACE,CAAA;EAEE,CAAA;CACP,CAAA;AAEV;AAEA,MAAM,SAAS,EACb,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YACyD;CAE5D,OACE,oBAFW,UAAU,OAAO,SAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,8CAIA,QACI,kCACA,0EACJ,wBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,WAAW,OAAO,OAAOA,QAAM;;;;;CAK1C;;;;;;CAMA,SAAS;;;;;;;;;;;CAWT;;CAEA;AACF,CAAC"}

package/dist/{BrandEditor-B8o9zdZO.js → BrandEditor-BnTLMRMp.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { Button } from "./Button-nzmDNS2q.js";
+import { Button } from "./Button-CPsEQuTN.js";
 import { ToggleGroup } from "./ToggleGroup-Cy_10Mvu.js";
 import { Label } from "./internal/components/Label.js";
-import { TextInput } from "./TextInput-BGed-V13.js";
-import { Slider } from "./Slider-Da_3mS5v.js";
-import { Select } from "./Select-4YX38G5h.js";
+import { TextInput } from "./TextInput-DhdRk8qm.js";
+import { Slider } from "./Slider-CjxyfEty.js";
+import { Select } from "./Select-D6IZVvwL.js";
 import { Badge } from "./Badge-Ch26CXoP.js";
+import { ColorInput } from "./ColorInput-Q1D9Vcc_.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { ColorInput } from "./ColorInput-Dx8Dsv7Y.js";
 import { Collapsible } from "./Collapsible-BQXWEOBC.js";
 import { useId, useMemo } from "react";
 import { keboola } from "@keboola/brand-registry";
@@ -900,4 +900,4 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 //#endregion
 export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
-//# sourceMappingURL=BrandEditor-B8o9zdZO.js.map
+//# sourceMappingURL=BrandEditor-BnTLMRMp.js.map