@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/dist/multi-combobox-DkFLK64B.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-combobox-DkFLK64B.cjs","sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/multi-combobox.tsx"],"sourcesContent":["import { buttonVariants } from '../Button/Button';\nimport type { TextButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the same button looks as everywhere,\n * mirroring `SelectTrigger`: `default` (the Button's filled default surface —\n * the default here too), `outline` (bordered, transparent) and `ghost`\n * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  error,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: TextButtonSize;\n  error?: boolean;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`).\n    'w-full min-w-32 justify-between',\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-neutral3',\n    error && 'border-error hover:border-error focus-visible:border-error',\n    className,\n  );\n}\n\nexport const comboboxStyles = {\n  /** Root wrapper */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 opacity-60',\n\n  /** Placeholder text color */\n  placeholder: 'text-neutral3',\n\n  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */\n  popup: cn(\n    'min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4',\n    'shadow-dialog',\n    'origin-(--transform-origin)',\n    'transition-[transform,scale,opacity] duration-150 ease-out',\n    'data-starting-style:scale-95 data-starting-style:opacity-0',\n    'data-ending-style:scale-95 data-ending-style:opacity-0',\n  ),\n\n  /** Positioner */\n  positioner: 'z-50 pointer-events-auto',\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: cn('flex items-center border-b border-border1 px-2.5 py-1.5', transitions.colors),\n\n  /** Search icon */\n  searchIcon: cn('mr-2 h-3.5 w-3.5 shrink-0 text-neutral3', transitions.colors),\n\n  /** Search input */\n  searchInput: cn(\n    'flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6',\n    'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n  ),\n\n  /** Empty state */\n  empty: 'not-empty:block hidden py-4 text-center text-ui-smd text-neutral3',\n\n  /** Options list */\n  list: 'max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1',\n\n  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */\n  item: cn(\n    'group/item relative flex cursor-pointer select-none items-center gap-2 rounded-md',\n    'pl-2.5 pr-2 py-1.5 min-h-8',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n\n  /** Multi-select item — keeps the left checkbox slot, no right indicator. */\n  itemMulti: cn(\n    'relative flex cursor-pointer select-none items-center gap-2.5 rounded-md',\n    'pl-2 pr-2.5 py-1.5 min-h-8',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */\n  checkContainer: 'flex h-4 w-4 shrink-0 items-center justify-center text-accent1',\n\n  /** Check icon (single select) */\n  checkIcon: 'h-3.5 w-3.5',\n\n  /** Checkbox container (multi select) */\n  checkbox: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border',\n\n  /** Checkbox selected state */\n  checkboxSelected: 'bg-accent1 border-accent1',\n\n  /** Checkbox unselected state */\n  checkboxUnselected: 'border-border2',\n\n  /** Check icon for checkbox (multi select) */\n  checkboxIcon: 'h-3 w-3 text-surface1',\n\n  /** Option content wrapper */\n  optionContent: 'flex items-center gap-2 w-full min-w-0',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-ui-sm text-neutral3 truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** Error message */\n  error: 'text-ui-sm text-accent2',\n} as const;\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport * as React from 'react';\nimport type { ComboboxOption } from './combobox';\nimport { comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxOption };\n\nexport type MultiComboboxProps = {\n  options: ComboboxOption[];\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  size?: TextButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n};\n\nexport function MultiCombobox({\n  options,\n  value = [],\n  onValueChange,\n  placeholder = 'Select options...',\n  searchPlaceholder = 'Search...',\n  emptyText = 'No option found.',\n  className,\n  disabled = false,\n  variant = 'default',\n  size = 'md',\n  open,\n  onOpenChange,\n  container,\n  error,\n}: MultiComboboxProps) {\n  const selectedOptions = options.filter(option => value.includes(option.value));\n\n  const handleSelect = (items: ComboboxOption[] | null) => {\n    if (items) {\n      onValueChange?.(items.map(item => item.value));\n    }\n  };\n\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        multiple\n        items={options}\n        value={selectedOptions}\n        onValueChange={handleSelect}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        <BaseCombobox.Trigger className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}>\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n          {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n              escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n          <span className=\"flex shrink-0 items-center\">\n            <ChevronsUpDown className={comboboxStyles.chevron} />\n          </span>\n        </BaseCombobox.Trigger>\n\n        <BaseCombobox.Portal container={container}>\n          <BaseCombobox.Positioner align=\"start\" sideOffset={4} className={comboboxStyles.positioner}>\n            <BaseCombobox.Popup className={comboboxStyles.popup}>\n              <div className={comboboxStyles.searchContainer}>\n                <Search className={comboboxStyles.searchIcon} />\n                <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n              </div>\n              <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n              <BaseCombobox.List className={comboboxStyles.list}>\n                {(option: ComboboxOption) => {\n                  const isSelected = value.includes(option.value);\n                  return (\n                    <BaseCombobox.Item key={option.value} value={option} className={comboboxStyles.itemMulti}>\n                      <span\n                        className={cn(\n                          comboboxStyles.checkbox,\n                          isSelected ? comboboxStyles.checkboxSelected : comboboxStyles.checkboxUnselected,\n                        )}\n                      >\n                        {isSelected && <Check className={comboboxStyles.checkboxIcon} />}\n                      </span>\n                      <span className={comboboxStyles.optionContent}>\n                        {option.start}\n                        <span className={comboboxStyles.optionText}>\n                          <span className={comboboxStyles.optionLabel}>{option.label}</span>\n                          {option.description && (\n                            <span className={comboboxStyles.optionDescription}>{option.description}</span>\n                          )}\n                        </span>\n                        {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                      </span>\n                    </BaseCombobox.Item>\n                  );\n                }}\n              </BaseCombobox.List>\n            </BaseCombobox.Popup>\n          </BaseCombobox.Positioner>\n        </BaseCombobox.Portal>\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["cn","buttonVariants","controlTriggerOpenState","transitions","jsxs","BaseCombobox","jsx","ChevronsUpDown","Search","Check"],"mappings":"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"}

package/dist/multi-combobox-Y3gT0MqV.js

@@ -0,0 +1,189 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Combobox } from '@base-ui/react/combobox';
+import { ChevronsUpDown, Search, Check } from 'lucide-react';
+import { b as buttonVariants } from './Button-DoOEJwa_.js';
+import { b as controlTriggerOpenState } from './control-size-BdDLgGX4.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function normalizeComboboxVariant(variant) {
+  return variant === "link" ? "ghost" : variant;
+}
+function comboboxTriggerClass({
+  variant,
+  size,
+  error,
+  className
+}) {
+  const visualVariant = normalizeComboboxVariant(variant);
+  return cn(
+    buttonVariants({ variant: visualVariant, size }),
+    // Fill the field and push the value left / chevron right (Button's base
+    // centers its content with `justify-center`).
+    "w-full min-w-32 justify-between",
+    // Read as "active" while the popup is open, per variant (see map above).
+    controlTriggerOpenState[visualVariant],
+    "data-[placeholder]:text-neutral3",
+    error && "border-error hover:border-error focus-visible:border-error",
+    className
+  );
+}
+const comboboxStyles = {
+  /** Root wrapper */
+  root: "flex flex-col gap-1.5",
+  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */
+  chevron: "ml-2 h-4 w-4 shrink-0 opacity-60",
+  /** Placeholder text color */
+  placeholder: "text-neutral3",
+  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */
+  popup: cn(
+    "min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4",
+    "shadow-dialog",
+    "origin-(--transform-origin)",
+    "transition-[transform,scale,opacity] duration-150 ease-out",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0"
+  ),
+  /** Positioner */
+  positioner: "z-50 pointer-events-auto",
+  /** Search input container — borderless top section, hairline divider below. */
+  searchContainer: cn("flex items-center border-b border-border1 px-2.5 py-1.5", transitions.colors),
+  /** Search icon */
+  searchIcon: cn("mr-2 h-3.5 w-3.5 shrink-0 text-neutral3", transitions.colors),
+  /** Search input */
+  searchInput: cn(
+    "flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6",
+    "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors
+  ),
+  /** Empty state */
+  empty: "not-empty:block hidden py-4 text-center text-ui-smd text-neutral3",
+  /** Options list */
+  list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
+  item: cn(
+    "group/item relative flex cursor-pointer select-none items-center gap-2 rounded-md",
+    "pl-2.5 pr-2 py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  /** Multi-select item — keeps the left checkbox slot, no right indicator. */
+  itemMulti: cn(
+    "relative flex cursor-pointer select-none items-center gap-2.5 rounded-md",
+    "pl-2 pr-2.5 py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  /** Right-aligned slot grouping end content + selection check. */
+  itemRightSlot: "ml-auto flex items-center gap-2 shrink-0",
+  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
+  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-accent1",
+  /** Check icon (single select) */
+  checkIcon: "h-3.5 w-3.5",
+  /** Checkbox container (multi select) */
+  checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border",
+  /** Checkbox selected state */
+  checkboxSelected: "bg-accent1 border-accent1",
+  /** Checkbox unselected state */
+  checkboxUnselected: "border-border2",
+  /** Check icon for checkbox (multi select) */
+  checkboxIcon: "h-3 w-3 text-surface1",
+  /** Option content wrapper */
+  optionContent: "flex items-center gap-2 w-full min-w-0",
+  /** Option label/description wrapper */
+  optionText: "flex flex-col gap-0.5 min-w-0",
+  /** Option label */
+  optionLabel: "truncate",
+  /** Option description */
+  optionDescription: "text-ui-sm text-neutral3 truncate",
+  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
+  optionEnd: "ml-auto flex items-center shrink-0",
+  /** Error message */
+  error: "text-ui-sm text-accent2"
+};
+
+function MultiCombobox({
+  options,
+  value = [],
+  onValueChange,
+  placeholder = "Select options...",
+  searchPlaceholder = "Search...",
+  emptyText = "No option found.",
+  className,
+  disabled = false,
+  variant = "default",
+  size = "md",
+  open,
+  onOpenChange,
+  container,
+  error
+}) {
+  const selectedOptions = options.filter((option) => value.includes(option.value));
+  const handleSelect = (items) => {
+    if (items) {
+      onValueChange?.(items.map((item) => item.value));
+    }
+  };
+  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;
+  return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.root, children: [
+    /* @__PURE__ */ jsxs(
+      Combobox.Root,
+      {
+        multiple: true,
+        items: options,
+        value: selectedOptions,
+        onValueChange: handleSelect,
+        disabled,
+        open,
+        onOpenChange,
+        children: [
+          /* @__PURE__ */ jsxs(Combobox.Trigger, { className: comboboxTriggerClass({ variant, size, error: Boolean(error), className }), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("truncate", selectedOptions.length === 0 && comboboxStyles.placeholder), children: triggerText }),
+            /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: comboboxStyles.chevron }) })
+          ] }),
+          /* @__PURE__ */ jsx(Combobox.Portal, { container, children: /* @__PURE__ */ jsx(Combobox.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxs(Combobox.Popup, { className: comboboxStyles.popup, children: [
+            /* @__PURE__ */ jsxs("div", { className: comboboxStyles.searchContainer, children: [
+              /* @__PURE__ */ jsx(Search, { className: comboboxStyles.searchIcon }),
+              /* @__PURE__ */ jsx(Combobox.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
+            ] }),
+            /* @__PURE__ */ jsx(Combobox.Empty, { className: comboboxStyles.empty, children: emptyText }),
+            /* @__PURE__ */ jsx(Combobox.List, { className: comboboxStyles.list, children: (option) => {
+              const isSelected = value.includes(option.value);
+              return /* @__PURE__ */ jsxs(Combobox.Item, { value: option, className: comboboxStyles.itemMulti, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      comboboxStyles.checkbox,
+                      isSelected ? comboboxStyles.checkboxSelected : comboboxStyles.checkboxUnselected
+                    ),
+                    children: isSelected && /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkboxIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionContent, children: [
+                  option.start,
+                  /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionText, children: [
+                    /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
+                    option.description && /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
+                  ] }),
+                  option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null
+                ] })
+              ] }, option.value);
+            } })
+          ] }) }) })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { className: comboboxStyles.error, children: error })
+  ] });
+}
+
+export { MultiCombobox as M, comboboxTriggerClass as a, comboboxStyles as c };
+//# sourceMappingURL=multi-combobox-Y3gT0MqV.js.map

package/dist/multi-combobox-Y3gT0MqV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-combobox-Y3gT0MqV.js","sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/multi-combobox.tsx"],"sourcesContent":["import { buttonVariants } from '../Button/Button';\nimport type { TextButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the same button looks as everywhere,\n * mirroring `SelectTrigger`: `default` (the Button's filled default surface —\n * the default here too), `outline` (bordered, transparent) and `ghost`\n * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  error,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: TextButtonSize;\n  error?: boolean;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`).\n    'w-full min-w-32 justify-between',\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-neutral3',\n    error && 'border-error hover:border-error focus-visible:border-error',\n    className,\n  );\n}\n\nexport const comboboxStyles = {\n  /** Root wrapper */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 opacity-60',\n\n  /** Placeholder text color */\n  placeholder: 'text-neutral3',\n\n  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */\n  popup: cn(\n    'min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4',\n    'shadow-dialog',\n    'origin-(--transform-origin)',\n    'transition-[transform,scale,opacity] duration-150 ease-out',\n    'data-starting-style:scale-95 data-starting-style:opacity-0',\n    'data-ending-style:scale-95 data-ending-style:opacity-0',\n  ),\n\n  /** Positioner */\n  positioner: 'z-50 pointer-events-auto',\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: cn('flex items-center border-b border-border1 px-2.5 py-1.5', transitions.colors),\n\n  /** Search icon */\n  searchIcon: cn('mr-2 h-3.5 w-3.5 shrink-0 text-neutral3', transitions.colors),\n\n  /** Search input */\n  searchInput: cn(\n    'flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6',\n    'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n  ),\n\n  /** Empty state */\n  empty: 'not-empty:block hidden py-4 text-center text-ui-smd text-neutral3',\n\n  /** Options list */\n  list: 'max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1',\n\n  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */\n  item: cn(\n    'group/item relative flex cursor-pointer select-none items-center gap-2 rounded-md',\n    'pl-2.5 pr-2 py-1.5 min-h-8',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n\n  /** Multi-select item — keeps the left checkbox slot, no right indicator. */\n  itemMulti: cn(\n    'relative flex cursor-pointer select-none items-center gap-2.5 rounded-md',\n    'pl-2 pr-2.5 py-1.5 min-h-8',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */\n  checkContainer: 'flex h-4 w-4 shrink-0 items-center justify-center text-accent1',\n\n  /** Check icon (single select) */\n  checkIcon: 'h-3.5 w-3.5',\n\n  /** Checkbox container (multi select) */\n  checkbox: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border',\n\n  /** Checkbox selected state */\n  checkboxSelected: 'bg-accent1 border-accent1',\n\n  /** Checkbox unselected state */\n  checkboxUnselected: 'border-border2',\n\n  /** Check icon for checkbox (multi select) */\n  checkboxIcon: 'h-3 w-3 text-surface1',\n\n  /** Option content wrapper */\n  optionContent: 'flex items-center gap-2 w-full min-w-0',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-ui-sm text-neutral3 truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** Error message */\n  error: 'text-ui-sm text-accent2',\n} as const;\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport * as React from 'react';\nimport type { ComboboxOption } from './combobox';\nimport { comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxOption };\n\nexport type MultiComboboxProps = {\n  options: ComboboxOption[];\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  size?: TextButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n};\n\nexport function MultiCombobox({\n  options,\n  value = [],\n  onValueChange,\n  placeholder = 'Select options...',\n  searchPlaceholder = 'Search...',\n  emptyText = 'No option found.',\n  className,\n  disabled = false,\n  variant = 'default',\n  size = 'md',\n  open,\n  onOpenChange,\n  container,\n  error,\n}: MultiComboboxProps) {\n  const selectedOptions = options.filter(option => value.includes(option.value));\n\n  const handleSelect = (items: ComboboxOption[] | null) => {\n    if (items) {\n      onValueChange?.(items.map(item => item.value));\n    }\n  };\n\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        multiple\n        items={options}\n        value={selectedOptions}\n        onValueChange={handleSelect}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        <BaseCombobox.Trigger className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}>\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n          {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n              escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n          <span className=\"flex shrink-0 items-center\">\n            <ChevronsUpDown className={comboboxStyles.chevron} />\n          </span>\n        </BaseCombobox.Trigger>\n\n        <BaseCombobox.Portal container={container}>\n          <BaseCombobox.Positioner align=\"start\" sideOffset={4} className={comboboxStyles.positioner}>\n            <BaseCombobox.Popup className={comboboxStyles.popup}>\n              <div className={comboboxStyles.searchContainer}>\n                <Search className={comboboxStyles.searchIcon} />\n                <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n              </div>\n              <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n              <BaseCombobox.List className={comboboxStyles.list}>\n                {(option: ComboboxOption) => {\n                  const isSelected = value.includes(option.value);\n                  return (\n                    <BaseCombobox.Item key={option.value} value={option} className={comboboxStyles.itemMulti}>\n                      <span\n                        className={cn(\n                          comboboxStyles.checkbox,\n                          isSelected ? comboboxStyles.checkboxSelected : comboboxStyles.checkboxUnselected,\n                        )}\n                      >\n                        {isSelected && <Check className={comboboxStyles.checkboxIcon} />}\n                      </span>\n                      <span className={comboboxStyles.optionContent}>\n                        {option.start}\n                        <span className={comboboxStyles.optionText}>\n                          <span className={comboboxStyles.optionLabel}>{option.label}</span>\n                          {option.description && (\n                            <span className={comboboxStyles.optionDescription}>{option.description}</span>\n                          )}\n                        </span>\n                        {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                      </span>\n                    </BaseCombobox.Item>\n                  );\n                }}\n              </BaseCombobox.List>\n            </BaseCombobox.Popup>\n          </BaseCombobox.Positioner>\n        </BaseCombobox.Portal>\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["BaseCombobox"],"mappings":"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"}

package/dist/no-data-page-layout-CZzEj0NE.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { u as usePageHeading } from './page-heading-context-D3yjYoJE.js';
+import { c as cva } from './index-CsyK0ihk.js';
+
+function PageLayoutColumn({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid content-start", className), children });
+}
+
+function PageLayoutMainArea({ children, className, isCentered = false }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-auto",
+        {
+          "flex items-center justify-center": isCentered
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+function PageLayoutRoot({
+  children,
+  className,
+  width = "default",
+  height = "default"
+}) {
+  const pageHeading = usePageHeading();
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: cn(
+        "w-full grid grid-rows-[auto_auto] p-6 content-start",
+        {
+          "max-w-screen-lg mx-auto pt-8": width === "narrow",
+          "h-full grid-rows-[auto_1fr] overflow-y-auto": height === "full"
+        },
+        className
+        //   'LAYOUT_ROOT border border-dashed border-orange-400',
+      ),
+      children: [
+        pageHeading && /* @__PURE__ */ jsx("h1", { className: "sr-only", children: pageHeading }),
+        children
+      ]
+    }
+  );
+}
+
+const pageLayoutRowVariants = cva("flex justify-between gap-3", {
+  variants: {
+    align: {
+      start: "items-start",
+      center: "items-center"
+    },
+    stack: {
+      horizontal: "flex-row",
+      responsive: "flex-col items-stretch sm:flex-row"
+    }
+  },
+  compoundVariants: [
+    {
+      stack: "responsive",
+      align: "start",
+      class: "sm:items-start"
+    },
+    {
+      stack: "responsive",
+      align: "center",
+      class: "sm:items-center"
+    }
+  ],
+  defaultVariants: {
+    align: "start",
+    stack: "horizontal"
+  }
+});
+function PageLayoutRow({ children, className, align, stack }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(pageLayoutRowVariants({ align, stack }), className), children });
+}
+
+function PageLayoutTopArea({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4 pb-4", className), children });
+}
+
+const PageLayout = Object.assign(PageLayoutRoot, {
+  TopArea: PageLayoutTopArea,
+  MainArea: PageLayoutMainArea,
+  Column: PageLayoutColumn,
+  Row: PageLayoutRow
+});
+
+function NoDataPageLayout({ children }) {
+  return /* @__PURE__ */ jsx(PageLayout, { width: "wide", height: "full", className: "grid-rows-[1fr]", children: /* @__PURE__ */ jsx(PageLayout.MainArea, { isCentered: true, children }) });
+}
+
+export { NoDataPageLayout as N, PageLayout as P };
+//# sourceMappingURL=no-data-page-layout-CZzEj0NE.js.map

package/dist/no-data-page-layout-CZzEj0NE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-data-page-layout-CZzEj0NE.js","sources":["../src/ds/components/PageLayout/page-layout-column.tsx","../src/ds/components/PageLayout/page-layout-main-area.tsx","../src/ds/components/PageLayout/page-layout-root.tsx","../src/ds/components/PageLayout/page-layout-row.tsx","../src/ds/components/PageLayout/page-layout-top-area.tsx","../src/ds/components/PageLayout/page-layout.tsx","../src/ds/components/PageLayout/no-data-page-layout.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageLayoutColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function PageLayoutColumn({ children, className }: PageLayoutColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type PageLayoutMainAreaProps = {\n  children: ReactNode;\n  className?: string;\n  isCentered?: boolean;\n};\n\nexport function PageLayoutMainArea({ children, className, isCentered = false }: PageLayoutMainAreaProps) {\n  return (\n    <div\n      className={cn(\n        'overflow-auto',\n        {\n          'flex items-center justify-center': isCentered,\n        },\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { usePageHeading } from './page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutRoot({\n  children,\n  className,\n  width = 'default',\n  height = 'default',\n}: {\n  children: ReactNode;\n  className?: string;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n}) {\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(\n        'w-full grid grid-rows-[auto_auto] p-6 content-start',\n        {\n          'max-w-screen-lg mx-auto pt-8': width === 'narrow',\n          'h-full grid-rows-[auto_1fr] overflow-y-auto': height === 'full',\n        },\n        className,\n        //   'LAYOUT_ROOT border border-dashed border-orange-400',\n      )}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n","import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst pageLayoutRowVariants = cva('flex justify-between gap-3', {\n  variants: {\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n    },\n    stack: {\n      horizontal: 'flex-row',\n      responsive: 'flex-col items-stretch sm:flex-row',\n    },\n  },\n  compoundVariants: [\n    {\n      stack: 'responsive',\n      align: 'start',\n      class: 'sm:items-start',\n    },\n    {\n      stack: 'responsive',\n      align: 'center',\n      class: 'sm:items-center',\n    },\n  ],\n  defaultVariants: {\n    align: 'start',\n    stack: 'horizontal',\n  },\n});\n\nexport type PageLayoutRowProps = {\n  children?: React.ReactNode;\n  className?: string;\n} & VariantProps<typeof pageLayoutRowVariants>;\n\nexport function PageLayoutRow({ children, className, align, stack }: PageLayoutRowProps) {\n  return <div className={cn(pageLayoutRowVariants({ align, stack }), className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutTopArea({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('grid gap-4 pb-4', className)}>{children}</div>;\n}\n","import { PageLayoutColumn } from './page-layout-column';\nimport { PageLayoutMainArea } from './page-layout-main-area';\nimport { PageLayoutRoot } from './page-layout-root';\nimport { PageLayoutRow } from './page-layout-row';\nimport { PageLayoutTopArea } from './page-layout-top-area';\n\nexport const PageLayout = Object.assign(PageLayoutRoot, {\n  TopArea: PageLayoutTopArea,\n  MainArea: PageLayoutMainArea,\n  Column: PageLayoutColumn,\n  Row: PageLayoutRow,\n});\n","import type { ReactNode } from 'react';\nimport { PageLayout } from './page-layout';\n\nexport function NoDataPageLayout({ children }: { title?: string; icon?: ReactNode; children: ReactNode }) {\n  return (\n    <PageLayout width=\"wide\" height=\"full\" className=\"grid-rows-[1fr]\">\n      <PageLayout.MainArea isCentered>{children}</PageLayout.MainArea>\n    </PageLayout>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/no-data-page-layout-CiNBx-vK.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+const pageHeadingContext = require('./page-heading-context-Du-CpxAx.cjs');
+const index = require('./index-DPkWrpVb.cjs');
+
+function PageLayoutColumn({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid content-start", className), children });
+}
+
+function PageLayoutMainArea({ children, className, isCentered = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "overflow-auto",
+        {
+          "flex items-center justify-center": isCentered
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+function PageLayoutRoot({
+  children,
+  className,
+  width = "default",
+  height = "default"
+}) {
+  const pageHeading = pageHeadingContext.usePageHeading();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      className: utils.cn(
+        "w-full grid grid-rows-[auto_auto] p-6 content-start",
+        {
+          "max-w-screen-lg mx-auto pt-8": width === "narrow",
+          "h-full grid-rows-[auto_1fr] overflow-y-auto": height === "full"
+        },
+        className
+        //   'LAYOUT_ROOT border border-dashed border-orange-400',
+      ),
+      children: [
+        pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
+        children
+      ]
+    }
+  );
+}
+
+const pageLayoutRowVariants = index.cva("flex justify-between gap-3", {
+  variants: {
+    align: {
+      start: "items-start",
+      center: "items-center"
+    },
+    stack: {
+      horizontal: "flex-row",
+      responsive: "flex-col items-stretch sm:flex-row"
+    }
+  },
+  compoundVariants: [
+    {
+      stack: "responsive",
+      align: "start",
+      class: "sm:items-start"
+    },
+    {
+      stack: "responsive",
+      align: "center",
+      class: "sm:items-center"
+    }
+  ],
+  defaultVariants: {
+    align: "start",
+    stack: "horizontal"
+  }
+});
+function PageLayoutRow({ children, className, align, stack }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(pageLayoutRowVariants({ align, stack }), className), children });
+}
+
+function PageLayoutTopArea({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid gap-4 pb-4", className), children });
+}
+
+const PageLayout = Object.assign(PageLayoutRoot, {
+  TopArea: PageLayoutTopArea,
+  MainArea: PageLayoutMainArea,
+  Column: PageLayoutColumn,
+  Row: PageLayoutRow
+});
+
+function NoDataPageLayout({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { width: "wide", height: "full", className: "grid-rows-[1fr]", children: /* @__PURE__ */ jsxRuntime.jsx(PageLayout.MainArea, { isCentered: true, children }) });
+}
+
+exports.NoDataPageLayout = NoDataPageLayout;
+exports.PageLayout = PageLayout;
+//# sourceMappingURL=no-data-page-layout-CiNBx-vK.cjs.map

package/dist/no-data-page-layout-CiNBx-vK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-data-page-layout-CiNBx-vK.cjs","sources":["../src/ds/components/PageLayout/page-layout-column.tsx","../src/ds/components/PageLayout/page-layout-main-area.tsx","../src/ds/components/PageLayout/page-layout-root.tsx","../src/ds/components/PageLayout/page-layout-row.tsx","../src/ds/components/PageLayout/page-layout-top-area.tsx","../src/ds/components/PageLayout/page-layout.tsx","../src/ds/components/PageLayout/no-data-page-layout.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageLayoutColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function PageLayoutColumn({ children, className }: PageLayoutColumnProps) {\n  return <div className={cn('grid content-start', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type PageLayoutMainAreaProps = {\n  children: ReactNode;\n  className?: string;\n  isCentered?: boolean;\n};\n\nexport function PageLayoutMainArea({ children, className, isCentered = false }: PageLayoutMainAreaProps) {\n  return (\n    <div\n      className={cn(\n        'overflow-auto',\n        {\n          'flex items-center justify-center': isCentered,\n        },\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { usePageHeading } from './page-heading-context';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutRoot({\n  children,\n  className,\n  width = 'default',\n  height = 'default',\n}: {\n  children: ReactNode;\n  className?: string;\n  width?: 'default' | 'narrow' | 'wide';\n  height?: 'default' | 'full';\n}) {\n  const pageHeading = usePageHeading();\n\n  return (\n    <main\n      className={cn(\n        'w-full grid grid-rows-[auto_auto] p-6 content-start',\n        {\n          'max-w-screen-lg mx-auto pt-8': width === 'narrow',\n          'h-full grid-rows-[auto_1fr] overflow-y-auto': height === 'full',\n        },\n        className,\n        //   'LAYOUT_ROOT border border-dashed border-orange-400',\n      )}\n    >\n      {pageHeading && <h1 className=\"sr-only\">{pageHeading}</h1>}\n      {children}\n    </main>\n  );\n}\n","import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst pageLayoutRowVariants = cva('flex justify-between gap-3', {\n  variants: {\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n    },\n    stack: {\n      horizontal: 'flex-row',\n      responsive: 'flex-col items-stretch sm:flex-row',\n    },\n  },\n  compoundVariants: [\n    {\n      stack: 'responsive',\n      align: 'start',\n      class: 'sm:items-start',\n    },\n    {\n      stack: 'responsive',\n      align: 'center',\n      class: 'sm:items-center',\n    },\n  ],\n  defaultVariants: {\n    align: 'start',\n    stack: 'horizontal',\n  },\n});\n\nexport type PageLayoutRowProps = {\n  children?: React.ReactNode;\n  className?: string;\n} & VariantProps<typeof pageLayoutRowVariants>;\n\nexport function PageLayoutRow({ children, className, align, stack }: PageLayoutRowProps) {\n  return <div className={cn(pageLayoutRowVariants({ align, stack }), className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function PageLayoutTopArea({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('grid gap-4 pb-4', className)}>{children}</div>;\n}\n","import { PageLayoutColumn } from './page-layout-column';\nimport { PageLayoutMainArea } from './page-layout-main-area';\nimport { PageLayoutRoot } from './page-layout-root';\nimport { PageLayoutRow } from './page-layout-row';\nimport { PageLayoutTopArea } from './page-layout-top-area';\n\nexport const PageLayout = Object.assign(PageLayoutRoot, {\n  TopArea: PageLayoutTopArea,\n  MainArea: PageLayoutMainArea,\n  Column: PageLayoutColumn,\n  Row: PageLayoutRow,\n});\n","import type { ReactNode } from 'react';\nimport { PageLayout } from './page-layout';\n\nexport function NoDataPageLayout({ children }: { title?: string; icon?: ReactNode; children: ReactNode }) {\n  return (\n    <PageLayout width=\"wide\" height=\"full\" className=\"grid-rows-[1fr]\">\n      <PageLayout.MainArea isCentered>{children}</PageLayout.MainArea>\n    </PageLayout>\n  );\n}\n"],"names":["cn","jsx","usePageHeading","jsxs","cva"],"mappings":"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"}

package/dist/page-header-BS_LNnKw.js

@@ -0,0 +1,51 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function PageHeaderDescription({ children, isLoading }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("text-neutral2 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1", {
+        "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": isLoading
+      }),
+      children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : /* @__PURE__ */ jsx(Fragment, { children })
+    }
+  );
+}
+
+function PageHeaderTitle({ children, isLoading, size = "default" }) {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: cn(
+        "text-neutral5 text-xl font-normal gap-2 flex items-center",
+        "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50",
+        {
+          "bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse": isLoading,
+          "text-md": size === "smaller"
+        }
+      ),
+      children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : /* @__PURE__ */ jsx(Fragment, { children })
+    }
+  );
+}
+
+function PageHeaderRoot({ children, className, title, description, icon, isLoading }) {
+  const useLegacyApi = children === void 0 && title !== void 0;
+  return /* @__PURE__ */ jsx("header", { className: cn("w-full grid", className), children: useLegacyApi ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(PageHeaderTitle, { isLoading, children: [
+      icon,
+      " ",
+      title
+    ] }),
+    description !== void 0 && /* @__PURE__ */ jsx(PageHeaderDescription, { isLoading, children: description })
+  ] }) : children });
+}
+
+const PageHeader = Object.assign(PageHeaderRoot, {
+  Title: PageHeaderTitle,
+  Description: PageHeaderDescription
+});
+
+export { PageHeader as P };
+//# sourceMappingURL=page-header-BS_LNnKw.js.map

package/dist/page-header-BS_LNnKw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-BS_LNnKw.js","sources":["../src/ds/components/PageHeader/page-header-description.tsx","../src/ds/components/PageHeader/page-header-title.tsx","../src/ds/components/PageHeader/page-header-root.tsx","../src/ds/components/PageHeader/page-header.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageHeaderDescriptionProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n};\n\nexport function PageHeaderDescription({ children, isLoading }: PageHeaderDescriptionProps) {\n  return (\n    <p\n      className={cn('text-neutral2 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1', {\n        'bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse': isLoading,\n      })}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </p>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type PageHeaderTitleProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n  size?: 'default' | 'smaller';\n};\n\nexport function PageHeaderTitle({ children, isLoading, size = 'default' }: PageHeaderTitleProps) {\n  return (\n    <h1\n      className={cn(\n        'text-neutral5 text-xl font-normal gap-2 flex items-center',\n        '[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50',\n        {\n          'bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse': isLoading,\n          'text-md': size === 'smaller',\n        },\n      )}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </h1>\n  );\n}\n","import React from 'react';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderRootProps {\n  children?: React.ReactNode;\n  className?: string;\n  /**\n   * @deprecated Use the compound API with `<PageHeader.Title>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  title?: React.ReactNode;\n  /**\n   * @deprecated Use the compound API with `<PageHeader.Description>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  description?: React.ReactNode;\n  /**\n   * @deprecated Use the compound API and place the icon inside `<PageHeader.Title>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  icon?: React.ReactNode;\n  /**\n   * @deprecated Use the compound API and pass `isLoading` to `<PageHeader.Title>` / `<PageHeader.Description>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  isLoading?: boolean;\n}\n\nexport function PageHeaderRoot({ children, className, title, description, icon, isLoading }: PageHeaderRootProps) {\n  const useLegacyApi = children === undefined && title !== undefined;\n\n  return (\n    <header className={cn('w-full grid', className)}>\n      {useLegacyApi ? (\n        <>\n          <PageHeaderTitle isLoading={isLoading}>\n            {icon} {title}\n          </PageHeaderTitle>\n          {description !== undefined && (\n            <PageHeaderDescription isLoading={isLoading}>{description}</PageHeaderDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </header>\n  );\n}\n","import { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport { type PageHeaderRootProps } from './page-header-root';\nexport { type PageHeaderTitleProps } from './page-header-title';\nexport { type PageHeaderDescriptionProps } from './page-header-description';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Title: PageHeaderTitle,\n  Description: PageHeaderDescription,\n});\n"],"names":[],"mappings":";;;AAOO,SAAS,qBAAA,CAAsB,EAAE,QAAA,EAAU,SAAA,EAAU,EAA+B;AACzF,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,yEAAA,EAA2E;AAAA,QACvF,4DAAA,EAA8D;AAAA,OAC/D,CAAA;AAAA,MAEA,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA,GAAA,EAAM,CAAA,mCAAS,QAAA,EAAS;AAAA;AAAA,GACzC;AAEJ;;ACTO,SAAS,gBAAgB,EAAE,QAAA,EAAU,SAAA,EAAW,IAAA,GAAO,WAAU,EAAyB;AAC/F,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,2DAAA;AAAA,QACA,0DAAA;AAAA,QACA;AAAA,UACE,uDAAA,EAAyD,SAAA;AAAA,UACzD,WAAW,IAAA,KAAS;AAAA;AACtB,OACF;AAAA,MAEC,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA,GAAA,EAAM,CAAA,mCAAS,QAAA,EAAS;AAAA;AAAA,GACzC;AAEJ;;ACGO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,WAAA,EAAa,IAAA,EAAM,WAAU,EAAwB;AAChH,EAAA,MAAM,YAAA,GAAe,QAAA,KAAa,MAAA,IAAa,KAAA,KAAU,MAAA;AAEzD,EAAA,uBACE,GAAA,CAAC,YAAO,SAAA,EAAW,EAAA,CAAG,eAAe,SAAS,CAAA,EAC3C,yCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,mBAAgB,SAAA,EACd,QAAA,EAAA;AAAA,MAAA,IAAA;AAAA,MAAK,GAAA;AAAA,MAAE;AAAA,KAAA,EACV,CAAA;AAAA,IACC,WAAA,KAAgB,MAAA,oBACf,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAuB,QAAA,EAAA,WAAA,EAAY;AAAA,GAAA,EAE9D,IAEA,QAAA,EAEJ,CAAA;AAEJ;;ACrCO,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,cAAA,EAAgB;AAAA,EACtD,KAAA,EAAO,eAAA;AAAA,EACP,WAAA,EAAa;AACf,CAAC;;;;"}

package/dist/page-header-C1ZlL4Ua.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function PageHeaderDescription({ children, isLoading }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: utils.cn("text-neutral2 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1", {
+        "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": isLoading
+      }),
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+    }
+  );
+}
+
+function PageHeaderTitle({ children, isLoading, size = "default" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h1",
+    {
+      className: utils.cn(
+        "text-neutral5 text-xl font-normal gap-2 flex items-center",
+        "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50",
+        {
+          "bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse": isLoading,
+          "text-md": size === "smaller"
+        }
+      ),
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+    }
+  );
+}
+
+function PageHeaderRoot({ children, className, title, description, icon, isLoading }) {
+  const useLegacyApi = children === void 0 && title !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: utils.cn("w-full grid", className), children: useLegacyApi ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(PageHeaderTitle, { isLoading, children: [
+      icon,
+      " ",
+      title
+    ] }),
+    description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PageHeaderDescription, { isLoading, children: description })
+  ] }) : children });
+}
+
+const PageHeader = Object.assign(PageHeaderRoot, {
+  Title: PageHeaderTitle,
+  Description: PageHeaderDescription
+});
+
+exports.PageHeader = PageHeader;
+//# sourceMappingURL=page-header-C1ZlL4Ua.cjs.map