@devalok/shilp-sutra 0.56.0 → 0.59.0

package/dist/composed/loading-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/composed/loading-skeleton.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\n// Non-negative integer count (guards Array.from against NaN / negatives → RangeError).\nconst clamp = (n: number | undefined, fallback: number) =>\n  Math.max(0, Math.floor(typeof n === 'number' && !Number.isNaN(n) ? n : fallback))\n\n// role=status + aria-busy so AT announces the loading region (child Skeletons are\n// aria-hidden). sr-only label gives the announcement text.\nfunction statusProps(label?: string) {\n  return { role: 'status' as const, 'aria-busy': true, 'aria-label': label ?? 'Loading' }\n}\nfunction SrLabel({ label }: { label?: string }) {\n  return <span className=\"sr-only\">{label ?? 'Loading'}…</span>\n}\n\nexport interface CardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {\n  className?: string\n  /** Accessible label for the loading region. @default 'Loading' */\n  label?: string\n}\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(\n  function CardSkeleton({ className, label, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...statusProps(label)}\n        {...props}\n        className={cn('rounded-surface border border-card bg-surface-raised p-ds-05b', className)}\n      >\n        <SrLabel label={label} />\n        <div className=\"flex items-center justify-between pb-ds-05\">\n          <Skeleton className=\"h-ds-05 w-ds-13\" />\n          <Skeleton className=\"h-ico-sm w-ico-sm rounded\" />\n        </div>\n        <div className=\"space-y-ds-04\">\n          <Skeleton className=\"h-ds-04 w-full\" />\n          <Skeleton className=\"h-ds-04 w-4/5\" />\n          <Skeleton className=\"h-ds-04 w-3/5\" />\n        </div>\n        <div className=\"flex items-center gap-ds-03 pt-ds-05\">\n          <Skeleton className=\"h-ds-xs w-ds-xs rounded-pill\" />\n          <Skeleton className=\"h-ds-04 w-ds-11\" />\n        </div>\n      </div>\n    )\n  },\n)\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport interface TableSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  columns?: number\n}\n\nconst TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(\n  function TableSkeleton({ rows = 5, columns = 4, className, label, ...props }, ref) {\n    const r = clamp(rows, 5)\n    const c = Math.max(1, clamp(columns, 4))\n    return (\n      <div\n        ref={ref}\n        {...statusProps(label)}\n        {...props}\n        className={cn('overflow-hidden rounded-surface border border-card', className)}\n      >\n        <SrLabel label={label} />\n        {/* Header */}\n        <div className=\"flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04\">\n          {Array.from({ length: c }).map((_, i) => (\n            <Skeleton key={`head-${i}`} className={cn('h-ds-04', i === 0 ? 'w-ds-13' : 'flex-1')} />\n          ))}\n        </div>\n        {/* Rows */}\n        {Array.from({ length: r }).map((_, rowIndex) => (\n          <div\n            key={`row-${rowIndex}`}\n            className={cn(\n              'flex items-center gap-ds-05 px-ds-05 py-ds-04',\n              rowIndex < r - 1 && 'border-b border-surface-border-strong',\n            )}\n          >\n            {Array.from({ length: c }).map((_, colIndex) => (\n              <Skeleton\n                key={`cell-${rowIndex}-${colIndex}`}\n                className={cn('h-ds-04', colIndex === 0 ? 'w-ds-13' : 'flex-1')}\n              />\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nTableSkeleton.displayName = 'TableSkeleton'\n\nexport interface BoardSkeletonProps extends CardSkeletonProps {\n  columns?: number\n  cardsPerColumn?: number\n}\n\nconst BoardSkeleton = React.forwardRef<HTMLDivElement, BoardSkeletonProps>(\n  function BoardSkeleton({ columns = 4, cardsPerColumn = 3, className, label, ...props }, ref) {\n    const c = clamp(columns, 4)\n    const cards = clamp(cardsPerColumn, 3)\n    return (\n      <div ref={ref} {...statusProps(label)} {...props} className={cn('flex gap-ds-05 overflow-x-auto', className)}>\n        <SrLabel label={label} />\n        {Array.from({ length: c }).map((_, colIndex) => (\n          <div key={`col-${colIndex}`} className=\"flex w-[272px] shrink-0 flex-col gap-ds-03\">\n            {/* Column header */}\n            <div className=\"flex items-center justify-between px-ds-02 py-ds-03\">\n              <div className=\"flex items-center gap-ds-03\">\n                <Skeleton className=\"h-ds-04 w-ds-04 rounded\" />\n                <Skeleton className=\"h-ds-04 w-ds-11\" />\n                <Skeleton className=\"h-ds-05 w-ds-05b rounded-pill\" />\n              </div>\n              <Skeleton className=\"h-ico-sm w-ico-sm rounded\" />\n            </div>\n            {/* Column cards */}\n            {Array.from({ length: cards }).map((_, cardIndex) => (\n              <div\n                key={`card-${colIndex}-${cardIndex}`}\n                className=\"rounded-surface border border-card bg-surface-raised p-ds-04\"\n              >\n                <div className=\"space-y-ds-03\">\n                  <Skeleton className=\"h-ds-04 w-4/5\" />\n                  <Skeleton className=\"h-ds-04 w-3/5\" />\n                </div>\n                <div className=\"flex items-center justify-between pt-ds-04\">\n                  <div className=\"flex items-center gap-ds-02b\">\n                    <Skeleton className=\"h-ico-md w-ico-md rounded-pill\" />\n                    <Skeleton className=\"h-ds-03 w-ds-10\" />\n                  </div>\n                  <Skeleton className=\"h-ds-05 w-ds-lg rounded-pill\" />\n                </div>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nBoardSkeleton.displayName = 'BoardSkeleton'\n\nexport interface ListSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  showAvatar?: boolean\n}\n\nconst ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(\n  function ListSkeleton({ rows = 6, showAvatar = true, className, label, ...props }, ref) {\n    const r = clamp(rows, 6)\n    return (\n      <div ref={ref} {...statusProps(label)} {...props} className={cn('flex flex-col', className)}>\n        <SrLabel label={label} />\n        {Array.from({ length: r }).map((_, i) => (\n          <div\n            key={`list-${i}`}\n            className={cn(\n              'flex items-center gap-ds-04 py-ds-04',\n              i < r - 1 && 'border-b border-surface-border-strong',\n            )}\n          >\n            {showAvatar && <Skeleton className=\"h-ds-sm w-ds-sm shrink-0 rounded-pill\" />}\n            <div className=\"flex flex-1 flex-col gap-ds-02b\">\n              <Skeleton className=\"h-ds-04 w-2/5\" />\n              <Skeleton className=\"h-ds-03 w-3/5\" />\n            </div>\n            <Skeleton className=\"h-ds-05b w-ds-09 rounded-pill\" />\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nListSkeleton.displayName = 'ListSkeleton'\n\nexport { BoardSkeleton, CardSkeleton, ListSkeleton, TableSkeleton }\n"],"mappings":"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"}
+{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/composed/loading-skeleton.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\n// Non-negative integer count (guards Array.from against NaN / negatives → RangeError).\nconst clamp = (n: number | undefined, fallback: number) =>\n  Math.max(0, Math.floor(typeof n === 'number' && !Number.isNaN(n) ? n : fallback))\n\n// role=status + aria-busy so AT announces the loading region (child Skeletons are\n// aria-hidden). sr-only label gives the announcement text.\nfunction statusProps(label?: string) {\n  return { role: 'status' as const, 'aria-busy': true, 'aria-label': label ?? 'Loading' }\n}\nfunction SrLabel({ label }: { label?: string }) {\n  return <span className=\"sr-only\">{label ?? 'Loading'}…</span>\n}\n\nexport interface CardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {\n  className?: string\n  /** Accessible label for the loading region. @default 'Loading' */\n  label?: string\n}\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(\n  function CardSkeleton({ className, label, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...statusProps(label)}\n        {...props}\n        className={cn('rounded-surface border border-card bg-surface-panel p-ds-05b', className)}\n      >\n        <SrLabel label={label} />\n        <div className=\"flex items-center justify-between pb-ds-05\">\n          <Skeleton className=\"h-ds-05 w-ds-13\" />\n          <Skeleton className=\"h-ico-sm w-ico-sm rounded\" />\n        </div>\n        <div className=\"space-y-ds-04\">\n          <Skeleton className=\"h-ds-04 w-full\" />\n          <Skeleton className=\"h-ds-04 w-4/5\" />\n          <Skeleton className=\"h-ds-04 w-3/5\" />\n        </div>\n        <div className=\"flex items-center gap-ds-03 pt-ds-05\">\n          <Skeleton className=\"h-ds-xs w-ds-xs rounded-pill\" />\n          <Skeleton className=\"h-ds-04 w-ds-11\" />\n        </div>\n      </div>\n    )\n  },\n)\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport interface TableSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  columns?: number\n}\n\nconst TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(\n  function TableSkeleton({ rows = 5, columns = 4, className, label, ...props }, ref) {\n    const r = clamp(rows, 5)\n    const c = Math.max(1, clamp(columns, 4))\n    return (\n      <div\n        ref={ref}\n        {...statusProps(label)}\n        {...props}\n        className={cn('overflow-hidden rounded-surface border border-card', className)}\n      >\n        <SrLabel label={label} />\n        {/* Header */}\n        <div className=\"flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-panel px-ds-05 py-ds-04\">\n          {Array.from({ length: c }).map((_, i) => (\n            <Skeleton key={`head-${i}`} className={cn('h-ds-04', i === 0 ? 'w-ds-13' : 'flex-1')} />\n          ))}\n        </div>\n        {/* Rows */}\n        {Array.from({ length: r }).map((_, rowIndex) => (\n          <div\n            key={`row-${rowIndex}`}\n            className={cn(\n              'flex items-center gap-ds-05 px-ds-05 py-ds-04',\n              rowIndex < r - 1 && 'border-b border-surface-border-strong',\n            )}\n          >\n            {Array.from({ length: c }).map((_, colIndex) => (\n              <Skeleton\n                key={`cell-${rowIndex}-${colIndex}`}\n                className={cn('h-ds-04', colIndex === 0 ? 'w-ds-13' : 'flex-1')}\n              />\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nTableSkeleton.displayName = 'TableSkeleton'\n\nexport interface BoardSkeletonProps extends CardSkeletonProps {\n  columns?: number\n  cardsPerColumn?: number\n}\n\nconst BoardSkeleton = React.forwardRef<HTMLDivElement, BoardSkeletonProps>(\n  function BoardSkeleton({ columns = 4, cardsPerColumn = 3, className, label, ...props }, ref) {\n    const c = clamp(columns, 4)\n    const cards = clamp(cardsPerColumn, 3)\n    return (\n      <div ref={ref} {...statusProps(label)} {...props} className={cn('flex gap-ds-05 overflow-x-auto', className)}>\n        <SrLabel label={label} />\n        {Array.from({ length: c }).map((_, colIndex) => (\n          <div key={`col-${colIndex}`} className=\"flex w-[272px] shrink-0 flex-col gap-ds-03\">\n            {/* Column header */}\n            <div className=\"flex items-center justify-between px-ds-02 py-ds-03\">\n              <div className=\"flex items-center gap-ds-03\">\n                <Skeleton className=\"h-ds-04 w-ds-04 rounded\" />\n                <Skeleton className=\"h-ds-04 w-ds-11\" />\n                <Skeleton className=\"h-ds-05 w-ds-05b rounded-pill\" />\n              </div>\n              <Skeleton className=\"h-ico-sm w-ico-sm rounded\" />\n            </div>\n            {/* Column cards */}\n            {Array.from({ length: cards }).map((_, cardIndex) => (\n              <div\n                key={`card-${colIndex}-${cardIndex}`}\n                className=\"rounded-surface border border-card bg-surface-panel p-ds-04\"\n              >\n                <div className=\"space-y-ds-03\">\n                  <Skeleton className=\"h-ds-04 w-4/5\" />\n                  <Skeleton className=\"h-ds-04 w-3/5\" />\n                </div>\n                <div className=\"flex items-center justify-between pt-ds-04\">\n                  <div className=\"flex items-center gap-ds-02b\">\n                    <Skeleton className=\"h-ico-md w-ico-md rounded-pill\" />\n                    <Skeleton className=\"h-ds-03 w-ds-10\" />\n                  </div>\n                  <Skeleton className=\"h-ds-05 w-ds-lg rounded-pill\" />\n                </div>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nBoardSkeleton.displayName = 'BoardSkeleton'\n\nexport interface ListSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  showAvatar?: boolean\n}\n\nconst ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(\n  function ListSkeleton({ rows = 6, showAvatar = true, className, label, ...props }, ref) {\n    const r = clamp(rows, 6)\n    return (\n      <div ref={ref} {...statusProps(label)} {...props} className={cn('flex flex-col', className)}>\n        <SrLabel label={label} />\n        {Array.from({ length: r }).map((_, i) => (\n          <div\n            key={`list-${i}`}\n            className={cn(\n              'flex items-center gap-ds-04 py-ds-04',\n              i < r - 1 && 'border-b border-surface-border-strong',\n            )}\n          >\n            {showAvatar && <Skeleton className=\"h-ds-sm w-ds-sm shrink-0 rounded-pill\" />}\n            <div className=\"flex flex-1 flex-col gap-ds-02b\">\n              <Skeleton className=\"h-ds-04 w-2/5\" />\n              <Skeleton className=\"h-ds-03 w-3/5\" />\n            </div>\n            <Skeleton className=\"h-ds-05b w-ds-09 rounded-pill\" />\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\nListSkeleton.displayName = 'ListSkeleton'\n\nexport { BoardSkeleton, CardSkeleton, ListSkeleton, TableSkeleton }\n"],"mappings":"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"}

package/dist/composed/master-detail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"master-detail.d.ts","sourceRoot":"","sources":["../../src/composed/master-detail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAEf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC/B,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAChD;AAED,UAAU,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAC/E,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACjF,UAAU,yBAA0B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA6CD,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,4BA2D1G;AAED,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,4BA4BrF;AA4CD,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,eAAsB,EACtB,QAAQ,EACR,KAAe,EACf,MAAM,EACN,WAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAmCnB;AAED,QAAA,MAAM,YAAY;;;;CAIhB,CAAA;AAEF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,yBAAyB,EAAE,CAAA"}
+{"version":3,"file":"master-detail.d.ts","sourceRoot":"","sources":["../../src/composed/master-detail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAEf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC/B,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAChD;AAED,UAAU,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAC/E,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACjF,UAAU,yBAA0B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA6CD,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,4BA2D1G;AAED,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,4BA4BrF;AAgDD,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,eAAsB,EACtB,QAAQ,EACR,KAAe,EACf,MAAM,EACN,WAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAmCnB;AAED,QAAA,MAAM,YAAY;;;;CAIhB,CAAA;AAEF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/composed/master-detail.js

@@ -134,7 +134,7 @@ var _ = i.forwardRef(function({ active: e, value: n, children: r, className: o,
 		"data-active": m || void 0,
 		onKeyDown: h,
 		onClick: g,
-		className: t("flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg", "transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset", m && "bg-accent-2 text-accent-11 font-medium", o),
+		className: t("flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg", "transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-panel-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset", m && "bg-accent-4 text-accent-11 font-medium", o),
 		...l,
 		children: r
 	});

package/dist/composed/master-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"master-detail.js","names":[],"sources":["../../src/composed/master-detail.tsx"],"sourcesContent":["'use client'\n\nimport { IconArrowLeft } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n/**\n * A responsive master-detail layout. Desktop: fixed-width list panel + detail\n * panel. Below the breakpoint: stacked view with a back button. The list is an\n * ARIA `listbox` with roving keyboard nav (Arrow/Home/End + Enter/Space).\n *\n * Selection can be **controlled** (`selected`) or **owned** by the component\n * (`defaultSelected` + `onSelect`, deriving each row's active state from its\n * `value` — no hand-wiring `active` + `onClick` per row).\n */\nexport interface MasterDetailProps\n  // Replaces the rarely-used native text-selection `onSelect` with our row-select callback.\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Controlled selected item id. `null` = no selection. Omit for uncontrolled. */\n  selected?: string | null\n  /** Uncontrolled initial selection. */\n  defaultSelected?: string | null\n  /** Called with a row's `value` when it's chosen (click or Enter/Space). */\n  onSelect?: (value: string) => void\n  /** Accessible name for the list (the `listbox`). @default 'Items' */\n  label?: string\n  /** Called when mobile back button is pressed. */\n  onBack?: () => void\n  /** Master panel width on desktop. @default '280px' */\n  masterWidth?: string\n  /** Breakpoint below which stacked mode activates. @default 'md' */\n  breakpoint?: 'sm' | 'md' | 'lg'\n  /** Content to show in the detail pane when nothing is selected. */\n  emptyState?: React.ReactNode\n  /** Called when the user presses ArrowUp/ArrowDown while the list has focus. */\n  onNavigate?: (direction: 'up' | 'down') => void\n}\n\ninterface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {}\ninterface MasterDetailDetailProps extends React.HTMLAttributes<HTMLDivElement> {}\ninterface MasterDetailListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Explicit active state. Omit to derive from `value` === the selected id. */\n  active?: boolean\n  /** Row id — enables derived selection + auto-fires `onSelect` on activate. */\n  value?: string\n}\n\nconst breakpoints: Record<string, string> = { sm: '640px', md: '768px', lg: '1024px' }\n\nfunction useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false)\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mql = window.matchMedia(query)\n    setMatches(mql.matches)\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [query])\n  return matches\n}\n\ninterface MasterDetailContextValue {\n  selected: string | null\n  onSelect?: (value: string) => void\n  label: string\n  isMobile: boolean\n  onBack?: () => void\n  emptyState?: React.ReactNode\n  onNavigate?: (direction: 'up' | 'down') => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n  registerItemRef: (index: number, el: HTMLButtonElement | null) => void\n}\n\nconst MasterDetailContext = React.createContext<MasterDetailContextValue>({\n  selected: null,\n  label: 'Items',\n  isMobile: false,\n  activeIndex: 0,\n  setActiveIndex: () => {},\n  registerItemRef: () => {},\n})\n\nfunction itemIsActive(child: React.ReactNode, selected: string | null): boolean {\n  if (!React.isValidElement(child)) return false\n  const p = child.props as { active?: boolean; value?: string }\n  return p.active ?? (p.value != null && p.value === selected)\n}\n\nfunction MasterDetailList({ children, className, 'aria-label': ariaLabel, ...props }: MasterDetailListProps) {\n  const { selected, label, isMobile, onNavigate, activeIndex, setActiveIndex, registerItemRef } =\n    React.useContext(MasterDetailContext)\n  const itemRefsLocal = React.useRef<(HTMLButtonElement | null)[]>([])\n  const childCount = React.Children.count(children)\n\n  // Roving focus starts on the active/selected row (derived from `active` or `value`).\n  const activeChildIndex = React.useMemo(() => {\n    let idx = -1\n    React.Children.forEach(children, (child, i) => {\n      if (itemIsActive(child, selected)) idx = i\n    })\n    return idx\n  }, [children, selected])\n  React.useEffect(() => {\n    if (activeChildIndex >= 0) setActiveIndex(activeChildIndex)\n  }, [activeChildIndex, setActiveIndex])\n\n  if (isMobile && selected) return null\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = Math.min(activeIndex + 1, childCount - 1)\n      setActiveIndex(next); itemRefsLocal.current[next]?.focus(); onNavigate?.('down')\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const prev = Math.max(activeIndex - 1, 0)\n      setActiveIndex(prev); itemRefsLocal.current[prev]?.focus(); onNavigate?.('up')\n    } else if (e.key === 'Home') {\n      e.preventDefault(); setActiveIndex(0); itemRefsLocal.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = childCount - 1\n      setActiveIndex(last); itemRefsLocal.current[last]?.focus()\n    }\n  }\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={ariaLabel ?? label}\n      tabIndex={-1}\n      className={cn('overflow-y-auto focus-visible:outline-hidden', !isMobile && 'border-e border-surface-border', className)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {React.Children.map(children, (child, i) => {\n        if (!React.isValidElement(child)) return child\n        return React.cloneElement(child as React.ReactElement<any>, {\n          ref: (el: HTMLButtonElement | null) => {\n            itemRefsLocal.current[i] = el\n            registerItemRef(i, el)\n          },\n          tabIndex: i === activeIndex ? 0 : -1,\n        })\n      })}\n    </div>\n  )\n}\n\nfunction MasterDetailDetail({ children, className, ...props }: MasterDetailDetailProps) {\n  const { selected, isMobile, onBack, emptyState } = React.useContext(MasterDetailContext)\n  const reduced = useReducedMotion()\n  if (isMobile && !selected) return null\n\n  return (\n    // aria-live so AT users are told the detail changed when the selection swaps.\n    <div role=\"region\" aria-label=\"Detail\" aria-live=\"polite\" className={cn('flex-1 overflow-y-auto', className)} {...props}>\n      {isMobile && onBack && (\n        <div className=\"border-b border-surface-border px-ds-04 py-ds-03\">\n          <Button variant=\"ghost\" size=\"xs\" onClick={onBack} startIcon={<Icon icon={IconArrowLeft} className=\"rtl:-scale-x-100\" />}>\n            Back\n          </Button>\n        </div>\n      )}\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={selected ?? 'empty'}\n          initial={isMobile && !reduced ? { x: 20, opacity: 0 } : false}\n          animate={{ x: 0, opacity: 1 }}\n          exit={isMobile && !reduced ? { x: -20, opacity: 0 } : undefined}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {selected ? children : (emptyState ?? children)}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nconst MasterDetailListItem = React.forwardRef<HTMLButtonElement, MasterDetailListItemProps>(\n  function MasterDetailListItem({ active, value, children, className, onKeyDown, onClick, ...props }, ref) {\n    const { selected, onSelect } = React.useContext(MasterDetailContext)\n    const isActive = active ?? (value != null && value === selected)\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ;(e.currentTarget as HTMLButtonElement).click()\n      }\n      onKeyDown?.(e)\n    }\n    function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n      if (value != null) onSelect?.(value)\n      onClick?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={isActive}\n        data-active={isActive || undefined}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        className={cn(\n          'flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg',\n          'transition-colors duration-fast-01 ease-productive-standard',\n          'hover:bg-surface-raised-hover',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset',\n          isActive && 'bg-accent-2 text-accent-11 font-medium',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\nfunction MasterDetailRoot({\n  selected,\n  defaultSelected = null,\n  onSelect,\n  label = 'Items',\n  onBack,\n  masterWidth = '280px',\n  breakpoint = 'md',\n  emptyState,\n  onNavigate,\n  children,\n  className,\n  style,\n  ...props\n}: MasterDetailProps) {\n  const isMobile = useMediaQuery(`(max-width: ${breakpoints[breakpoint]})`)\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  // Controlled when `selected` is provided; otherwise own the selection.\n  const isControlled = selected !== undefined\n  const [internalSelected, setInternalSelected] = React.useState<string | null>(defaultSelected)\n  const resolvedSelected = isControlled ? selected ?? null : internalSelected\n\n  const handleSelect = React.useCallback(\n    (value: string) => {\n      if (!isControlled) setInternalSelected(value)\n      onSelect?.(value)\n    },\n    [isControlled, onSelect],\n  )\n\n  const registerItemRef = React.useCallback((index: number, el: HTMLButtonElement | null) => {\n    itemRefs.current[index] = el\n  }, [])\n\n  return (\n    <MasterDetailContext.Provider\n      value={{ selected: resolvedSelected, onSelect: handleSelect, label, isMobile, onBack, emptyState, onNavigate, activeIndex, setActiveIndex, registerItemRef }}\n    >\n      <div\n        className={cn('flex h-full', !isMobile && 'grid', className)}\n        style={{ ...style, ...(isMobile ? {} : { gridTemplateColumns: `${masterWidth} 1fr` }) }}\n        {...props}\n      >\n        {children}\n      </div>\n    </MasterDetailContext.Provider>\n  )\n}\n\nconst MasterDetail = Object.assign(MasterDetailRoot, {\n  List: MasterDetailList,\n  Detail: MasterDetailDetail,\n  ListItem: MasterDetailListItem,\n})\n\nexport { MasterDetail }\nexport type { MasterDetailListItemProps }\n"],"mappings":"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"}
+{"version":3,"file":"master-detail.js","names":[],"sources":["../../src/composed/master-detail.tsx"],"sourcesContent":["'use client'\n\nimport { IconArrowLeft } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n/**\n * A responsive master-detail layout. Desktop: fixed-width list panel + detail\n * panel. Below the breakpoint: stacked view with a back button. The list is an\n * ARIA `listbox` with roving keyboard nav (Arrow/Home/End + Enter/Space).\n *\n * Selection can be **controlled** (`selected`) or **owned** by the component\n * (`defaultSelected` + `onSelect`, deriving each row's active state from its\n * `value` — no hand-wiring `active` + `onClick` per row).\n */\nexport interface MasterDetailProps\n  // Replaces the rarely-used native text-selection `onSelect` with our row-select callback.\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Controlled selected item id. `null` = no selection. Omit for uncontrolled. */\n  selected?: string | null\n  /** Uncontrolled initial selection. */\n  defaultSelected?: string | null\n  /** Called with a row's `value` when it's chosen (click or Enter/Space). */\n  onSelect?: (value: string) => void\n  /** Accessible name for the list (the `listbox`). @default 'Items' */\n  label?: string\n  /** Called when mobile back button is pressed. */\n  onBack?: () => void\n  /** Master panel width on desktop. @default '280px' */\n  masterWidth?: string\n  /** Breakpoint below which stacked mode activates. @default 'md' */\n  breakpoint?: 'sm' | 'md' | 'lg'\n  /** Content to show in the detail pane when nothing is selected. */\n  emptyState?: React.ReactNode\n  /** Called when the user presses ArrowUp/ArrowDown while the list has focus. */\n  onNavigate?: (direction: 'up' | 'down') => void\n}\n\ninterface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {}\ninterface MasterDetailDetailProps extends React.HTMLAttributes<HTMLDivElement> {}\ninterface MasterDetailListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Explicit active state. Omit to derive from `value` === the selected id. */\n  active?: boolean\n  /** Row id — enables derived selection + auto-fires `onSelect` on activate. */\n  value?: string\n}\n\nconst breakpoints: Record<string, string> = { sm: '640px', md: '768px', lg: '1024px' }\n\nfunction useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false)\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mql = window.matchMedia(query)\n    setMatches(mql.matches)\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [query])\n  return matches\n}\n\ninterface MasterDetailContextValue {\n  selected: string | null\n  onSelect?: (value: string) => void\n  label: string\n  isMobile: boolean\n  onBack?: () => void\n  emptyState?: React.ReactNode\n  onNavigate?: (direction: 'up' | 'down') => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n  registerItemRef: (index: number, el: HTMLButtonElement | null) => void\n}\n\nconst MasterDetailContext = React.createContext<MasterDetailContextValue>({\n  selected: null,\n  label: 'Items',\n  isMobile: false,\n  activeIndex: 0,\n  setActiveIndex: () => {},\n  registerItemRef: () => {},\n})\n\nfunction itemIsActive(child: React.ReactNode, selected: string | null): boolean {\n  if (!React.isValidElement(child)) return false\n  const p = child.props as { active?: boolean; value?: string }\n  return p.active ?? (p.value != null && p.value === selected)\n}\n\nfunction MasterDetailList({ children, className, 'aria-label': ariaLabel, ...props }: MasterDetailListProps) {\n  const { selected, label, isMobile, onNavigate, activeIndex, setActiveIndex, registerItemRef } =\n    React.useContext(MasterDetailContext)\n  const itemRefsLocal = React.useRef<(HTMLButtonElement | null)[]>([])\n  const childCount = React.Children.count(children)\n\n  // Roving focus starts on the active/selected row (derived from `active` or `value`).\n  const activeChildIndex = React.useMemo(() => {\n    let idx = -1\n    React.Children.forEach(children, (child, i) => {\n      if (itemIsActive(child, selected)) idx = i\n    })\n    return idx\n  }, [children, selected])\n  React.useEffect(() => {\n    if (activeChildIndex >= 0) setActiveIndex(activeChildIndex)\n  }, [activeChildIndex, setActiveIndex])\n\n  if (isMobile && selected) return null\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = Math.min(activeIndex + 1, childCount - 1)\n      setActiveIndex(next); itemRefsLocal.current[next]?.focus(); onNavigate?.('down')\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const prev = Math.max(activeIndex - 1, 0)\n      setActiveIndex(prev); itemRefsLocal.current[prev]?.focus(); onNavigate?.('up')\n    } else if (e.key === 'Home') {\n      e.preventDefault(); setActiveIndex(0); itemRefsLocal.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = childCount - 1\n      setActiveIndex(last); itemRefsLocal.current[last]?.focus()\n    }\n  }\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label={ariaLabel ?? label}\n      tabIndex={-1}\n      className={cn('overflow-y-auto focus-visible:outline-hidden', !isMobile && 'border-e border-surface-border', className)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {React.Children.map(children, (child, i) => {\n        if (!React.isValidElement(child)) return child\n        return React.cloneElement(child as React.ReactElement<any>, {\n          ref: (el: HTMLButtonElement | null) => {\n            itemRefsLocal.current[i] = el\n            registerItemRef(i, el)\n          },\n          tabIndex: i === activeIndex ? 0 : -1,\n        })\n      })}\n    </div>\n  )\n}\n\nfunction MasterDetailDetail({ children, className, ...props }: MasterDetailDetailProps) {\n  const { selected, isMobile, onBack, emptyState } = React.useContext(MasterDetailContext)\n  const reduced = useReducedMotion()\n  if (isMobile && !selected) return null\n\n  return (\n    // aria-live so AT users are told the detail changed when the selection swaps.\n    <div role=\"region\" aria-label=\"Detail\" aria-live=\"polite\" className={cn('flex-1 overflow-y-auto', className)} {...props}>\n      {isMobile && onBack && (\n        <div className=\"border-b border-surface-border px-ds-04 py-ds-03\">\n          <Button variant=\"ghost\" size=\"xs\" onClick={onBack} startIcon={<Icon icon={IconArrowLeft} className=\"rtl:-scale-x-100\" />}>\n            Back\n          </Button>\n        </div>\n      )}\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={selected ?? 'empty'}\n          initial={isMobile && !reduced ? { x: 20, opacity: 0 } : false}\n          animate={{ x: 0, opacity: 1 }}\n          exit={isMobile && !reduced ? { x: -20, opacity: 0 } : undefined}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {selected ? children : (emptyState ?? children)}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nconst MasterDetailListItem = React.forwardRef<HTMLButtonElement, MasterDetailListItemProps>(\n  function MasterDetailListItem({ active, value, children, className, onKeyDown, onClick, ...props }, ref) {\n    const { selected, onSelect } = React.useContext(MasterDetailContext)\n    const isActive = active ?? (value != null && value === selected)\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ;(e.currentTarget as HTMLButtonElement).click()\n      }\n      onKeyDown?.(e)\n    }\n    function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n      if (value != null) onSelect?.(value)\n      onClick?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={isActive}\n        data-active={isActive || undefined}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        className={cn(\n          'flex w-full items-center px-ds-04 py-ds-03 text-left text-body-md font-sans text-surface-fg',\n          'transition-colors duration-fast-01 ease-productive-standard',\n          'hover:bg-surface-panel-hover',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset',\n          // accent-4, not accent-2: in dark the pale steps sit BELOW the panel\n          // while the grey hover sits above it, so a merely hovered row read\n          // stronger than the selected one (1.03:1 vs 1.30:1) and in the\n          // opposite direction.\n          isActive && 'bg-accent-4 text-accent-11 font-medium',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\nfunction MasterDetailRoot({\n  selected,\n  defaultSelected = null,\n  onSelect,\n  label = 'Items',\n  onBack,\n  masterWidth = '280px',\n  breakpoint = 'md',\n  emptyState,\n  onNavigate,\n  children,\n  className,\n  style,\n  ...props\n}: MasterDetailProps) {\n  const isMobile = useMediaQuery(`(max-width: ${breakpoints[breakpoint]})`)\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  // Controlled when `selected` is provided; otherwise own the selection.\n  const isControlled = selected !== undefined\n  const [internalSelected, setInternalSelected] = React.useState<string | null>(defaultSelected)\n  const resolvedSelected = isControlled ? selected ?? null : internalSelected\n\n  const handleSelect = React.useCallback(\n    (value: string) => {\n      if (!isControlled) setInternalSelected(value)\n      onSelect?.(value)\n    },\n    [isControlled, onSelect],\n  )\n\n  const registerItemRef = React.useCallback((index: number, el: HTMLButtonElement | null) => {\n    itemRefs.current[index] = el\n  }, [])\n\n  return (\n    <MasterDetailContext.Provider\n      value={{ selected: resolvedSelected, onSelect: handleSelect, label, isMobile, onBack, emptyState, onNavigate, activeIndex, setActiveIndex, registerItemRef }}\n    >\n      <div\n        className={cn('flex h-full', !isMobile && 'grid', className)}\n        style={{ ...style, ...(isMobile ? {} : { gridTemplateColumns: `${masterWidth} 1fr` }) }}\n        {...props}\n      >\n        {children}\n      </div>\n    </MasterDetailContext.Provider>\n  )\n}\n\nconst MasterDetail = Object.assign(MasterDetailRoot, {\n  List: MasterDetailList,\n  Detail: MasterDetailDetail,\n  ListItem: MasterDetailListItem,\n})\n\nexport { MasterDetail }\nexport type { MasterDetailListItemProps }\n"],"mappings":"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"}

package/dist/composed/member-picker.js

@@ -30,7 +30,7 @@ var c = a.forwardRef(({ members: c, selectedIds: l, onSelect: u, children: d, mu
 					src: i.image,
 					alt: i.label
 				}), /* @__PURE__ */ o(t, {
-					className: "bg-surface-raised-hover text-body-xs font-semibold text-surface-fg",
+					className: "bg-surface-panel-hover text-body-xs font-semibold text-surface-fg",
 					children: r(i.label)
 				})]
 			}), /* @__PURE__ */ o("span", {

package/dist/composed/member-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"member-picker.js","names":[],"sources":["../../src/composed/member-picker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { getInitials } from './lib/string-utils'\nimport { type MultiSelectItem,MultiSelectPopover } from './multi-select-popover'\n\n// ============================================================\n// Types — backward-compatible with original MemberPicker\n// ============================================================\n\nexport interface MemberPickerMember {\n  id: string\n  name: string\n  avatar?: string\n}\n\nexport interface MemberPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  members: MemberPickerMember[]\n  selectedIds: string[]\n  onSelect: (memberId: string) => void\n  multiple?: boolean\n  placeholder?: string\n  children: React.ReactNode\n}\n\n// ============================================================\n// MemberPicker — thin wrapper around MultiSelectPopover\n// ============================================================\n\nconst MemberPicker = React.forwardRef<HTMLDivElement, MemberPickerProps>(\n  (\n    {\n      members,\n      selectedIds,\n      onSelect,\n      children,\n      multiple = false,\n      placeholder = 'Search members...',\n      ...props\n    },\n    ref,\n  ) => {\n    const items: MultiSelectItem[] = React.useMemo(\n      () => members.map((m) => ({ id: m.id, label: m.name, image: m.avatar })),\n      [members],\n    )\n\n    function handleChange(ids: string[]) {\n      // Find the toggled id\n      const added = ids.find((id) => !selectedIds.includes(id))\n      const removed = selectedIds.find((id) => !ids.includes(id))\n      const toggled = added ?? removed\n      if (toggled) onSelect(toggled)\n    }\n\n    return (\n      <MultiSelectPopover\n        ref={ref}\n        items={items}\n        value={selectedIds}\n        onValueChange={handleChange}\n        searchPlaceholder={placeholder}\n        maxSelections={multiple ? undefined : 1}\n        renderItem={(item) => (\n          <div className=\"flex items-center gap-ds-03\">\n            <Avatar className=\"h-ico-md w-ico-md\">\n              {item.image && <AvatarImage src={item.image} alt={item.label} />}\n              <AvatarFallback className=\"bg-surface-raised-hover text-body-xs font-semibold text-surface-fg\">\n                {getInitials(item.label)}\n              </AvatarFallback>\n            </Avatar>\n            <span className=\"flex-1 truncate text-body-md font-body text-surface-fg\">\n              {item.label}\n            </span>\n          </div>\n        )}\n        {...props}\n      >\n        {children}\n      </MultiSelectPopover>\n    )\n  },\n)\n\nMemberPicker.displayName = 'MemberPicker'\n\nexport { MemberPicker }\n"],"mappings":";;;;;;;AAmCA,IAAM,IAAe,EAAM,YAEvB,EACE,YACA,gBACA,aACA,aACA,cAAW,IACX,iBAAc,qBACd,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,EAAM,cAC/B,EAAQ,KAAK,OAAO;EAAE,IAAI,EAAE;EAAI,OAAO,EAAE;EAAM,OAAO,EAAE;CAAO,EAAE,GACvE,CAAC,CAAO,CACV;CAEA,SAAS,EAAa,GAAe;EAEnC,IAAM,IAAQ,EAAI,MAAM,MAAO,CAAC,EAAY,SAAS,CAAE,CAAC,GAClD,IAAU,EAAY,MAAM,MAAO,CAAC,EAAI,SAAS,CAAE,CAAC,GACpD,IAAU,KAAS;EACzB,AAAI,KAAS,EAAS,CAAO;CAC/B;CAEA,OACE,kBAAC,GAAD;EACO;EACE;EACP,OAAO;EACP,eAAe;EACf,mBAAmB;EACnB,eAAe,IAAW,KAAA,IAAY;EACtC,aAAa,MACX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAQ,WAAU;cAAlB,CACG,EAAK,SAAS,kBAAC,GAAD;KAAa,KAAK,EAAK;KAAO,KAAK,EAAK;IAAQ,CAAA,GAC/D,kBAAC,GAAD;KAAgB,WAAU;eACvB,EAAY,EAAK,KAAK;IACT,CAAA,CACV;OACR,kBAAC,QAAD;IAAM,WAAU;cACb,EAAK;GACF,CAAA,CACH;;EAEP,GAAI;EAEH;CACiB,CAAA;AAExB,CACF;AAEA,EAAa,cAAc"}
+{"version":3,"file":"member-picker.js","names":[],"sources":["../../src/composed/member-picker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { getInitials } from './lib/string-utils'\nimport { type MultiSelectItem,MultiSelectPopover } from './multi-select-popover'\n\n// ============================================================\n// Types — backward-compatible with original MemberPicker\n// ============================================================\n\nexport interface MemberPickerMember {\n  id: string\n  name: string\n  avatar?: string\n}\n\nexport interface MemberPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  members: MemberPickerMember[]\n  selectedIds: string[]\n  onSelect: (memberId: string) => void\n  multiple?: boolean\n  placeholder?: string\n  children: React.ReactNode\n}\n\n// ============================================================\n// MemberPicker — thin wrapper around MultiSelectPopover\n// ============================================================\n\nconst MemberPicker = React.forwardRef<HTMLDivElement, MemberPickerProps>(\n  (\n    {\n      members,\n      selectedIds,\n      onSelect,\n      children,\n      multiple = false,\n      placeholder = 'Search members...',\n      ...props\n    },\n    ref,\n  ) => {\n    const items: MultiSelectItem[] = React.useMemo(\n      () => members.map((m) => ({ id: m.id, label: m.name, image: m.avatar })),\n      [members],\n    )\n\n    function handleChange(ids: string[]) {\n      // Find the toggled id\n      const added = ids.find((id) => !selectedIds.includes(id))\n      const removed = selectedIds.find((id) => !ids.includes(id))\n      const toggled = added ?? removed\n      if (toggled) onSelect(toggled)\n    }\n\n    return (\n      <MultiSelectPopover\n        ref={ref}\n        items={items}\n        value={selectedIds}\n        onValueChange={handleChange}\n        searchPlaceholder={placeholder}\n        maxSelections={multiple ? undefined : 1}\n        renderItem={(item) => (\n          <div className=\"flex items-center gap-ds-03\">\n            <Avatar className=\"h-ico-md w-ico-md\">\n              {item.image && <AvatarImage src={item.image} alt={item.label} />}\n              <AvatarFallback className=\"bg-surface-panel-hover text-body-xs font-semibold text-surface-fg\">\n                {getInitials(item.label)}\n              </AvatarFallback>\n            </Avatar>\n            <span className=\"flex-1 truncate text-body-md font-body text-surface-fg\">\n              {item.label}\n            </span>\n          </div>\n        )}\n        {...props}\n      >\n        {children}\n      </MultiSelectPopover>\n    )\n  },\n)\n\nMemberPicker.displayName = 'MemberPicker'\n\nexport { MemberPicker }\n"],"mappings":";;;;;;;AAmCA,IAAM,IAAe,EAAM,YAEvB,EACE,YACA,gBACA,aACA,aACA,cAAW,IACX,iBAAc,qBACd,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,EAAM,cAC/B,EAAQ,KAAK,OAAO;EAAE,IAAI,EAAE;EAAI,OAAO,EAAE;EAAM,OAAO,EAAE;CAAO,EAAE,GACvE,CAAC,CAAO,CACV;CAEA,SAAS,EAAa,GAAe;EAEnC,IAAM,IAAQ,EAAI,MAAM,MAAO,CAAC,EAAY,SAAS,CAAE,CAAC,GAClD,IAAU,EAAY,MAAM,MAAO,CAAC,EAAI,SAAS,CAAE,CAAC,GACpD,IAAU,KAAS;EACzB,AAAI,KAAS,EAAS,CAAO;CAC/B;CAEA,OACE,kBAAC,GAAD;EACO;EACE;EACP,OAAO;EACP,eAAe;EACf,mBAAmB;EACnB,eAAe,IAAW,KAAA,IAAY;EACtC,aAAa,MACX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAQ,WAAU;cAAlB,CACG,EAAK,SAAS,kBAAC,GAAD;KAAa,KAAK,EAAK;KAAO,KAAK,EAAK;IAAQ,CAAA,GAC/D,kBAAC,GAAD;KAAgB,WAAU;eACvB,EAAY,EAAK,KAAK;IACT,CAAA,CACV;OACR,kBAAC,QAAD;IAAM,WAAU;cACb,EAAK;GACF,CAAA,CACH;;EAEP,GAAI;EAEH;CACiB,CAAA;AAExB,CACF;AAEA,EAAa,cAAc"}

package/dist/composed/multi-select-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-popover.d.ts","sourceRoot":"","sources":["../../src/composed/multi-select-popover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACtG,8DAA8D;IAC9D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC3B,kCAAkC;IAClC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,oCAAoC;IACpC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,2BAA2B;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,eAAe,EAAE,CAAC,CAAA;IACxD,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1E,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAMD,QAAA,MAAM,kBAAkB,gGA+OvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"multi-select-popover.d.ts","sourceRoot":"","sources":["../../src/composed/multi-select-popover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACtG,8DAA8D;IAC9D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC3B,kCAAkC;IAClC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,oCAAoC;IACpC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,2BAA2B;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,eAAe,EAAE,CAAC,CAAA;IACxD,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1E,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAMD,QAAA,MAAM,kBAAkB,gGAmPvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/composed/multi-select-popover.js

@@ -1,92 +1,93 @@
 "use client";
 import { springs as e } from "../ui/lib/motion.js";
-import { cn as t } from "../ui/lib/utils.js";
-import { Spinner as n } from "../ui/spinner.js";
-import { Icon as r } from "../ui/icon.js";
-import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "../_chunks/popover.js";
-import * as s from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { IconCheck as d, IconSearch as f } from "@tabler/icons-react";
-import { motion as p } from "framer-motion";
+import { MotionPreference as t } from "../_chunks/motion-preference.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Spinner as r } from "../ui/spinner.js";
+import { Icon as i } from "../ui/icon.js";
+import { Popover as a, PopoverContent as o, PopoverTrigger as s } from "../_chunks/popover.js";
+import * as c from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { IconCheck as f, IconSearch as p } from "@tabler/icons-react";
+import { motion as m } from "framer-motion";
 //#region src/composed/multi-select-popover.tsx
-var m = s.forwardRef(({ items: m, groups: h, value: g, onValueChange: _, searchPlaceholder: v = "Search...", onSearch: y, searchDebounce: b = 300, renderItem: x, emptyMessage: S = "No results found", maxSelections: C, align: w = "start", width: T, children: E, className: D, ...O }, k) => {
-	let [A, j] = s.useState(!1), [M, N] = s.useState(""), [P, F] = s.useState(null), [I, L] = s.useState(!1), [R, z] = s.useState(-1), B = s.useRef(void 0), V = s.useRef(null);
-	s.useEffect(() => {
-		A || (N(""), F(null), z(-1));
-	}, [A]), s.useEffect(() => {
-		if (!(!y || !A)) {
-			if (!M.trim()) {
-				F(null), L(!1);
+var h = c.forwardRef(({ items: h, groups: g, value: _, onValueChange: v, searchPlaceholder: y = "Search...", onSearch: b, searchDebounce: x = 300, renderItem: S, emptyMessage: C = "No results found", maxSelections: w, align: T = "start", width: E, children: D, className: O, ...k }, A) => {
+	let [j, M] = c.useState(!1), [N, P] = c.useState(""), [F, I] = c.useState(null), [L, R] = c.useState(!1), [z, B] = c.useState(-1), V = c.useRef(void 0), H = c.useRef(null);
+	c.useEffect(() => {
+		j || (P(""), I(null), B(-1));
+	}, [j]), c.useEffect(() => {
+		if (!(!b || !j)) {
+			if (!N.trim()) {
+				I(null), R(!1);
 				return;
 			}
-			return L(!0), clearTimeout(B.current), B.current = setTimeout(() => {
-				y(M).then((e) => F(e)).catch(() => F([])).finally(() => L(!1));
-			}, b), () => clearTimeout(B.current);
+			return R(!0), clearTimeout(V.current), V.current = setTimeout(() => {
+				b(N).then((e) => I(e)).catch(() => I([])).finally(() => R(!1));
+			}, x), () => clearTimeout(V.current);
 		}
 	}, [
-		M,
-		y,
+		N,
 		b,
-		A
+		x,
+		j
 	]);
-	let H = s.useMemo(() => P || (h ? h.flatMap((e) => e.items) : m ?? []), [
-		m,
+	let U = c.useMemo(() => F || (g ? g.flatMap((e) => e.items) : h ?? []), [
 		h,
-		P
-	]), U = s.useMemo(() => {
-		if (y) return H;
-		let e = M.toLowerCase();
-		return e ? H.filter((t) => t.label.toLowerCase().includes(e)) : H;
+		g,
+		F
+	]), W = c.useMemo(() => {
+		if (b) return U;
+		let e = N.toLowerCase();
+		return e ? U.filter((t) => t.label.toLowerCase().includes(e)) : U;
 	}, [
-		H,
-		M,
-		y
-	]), W = s.useMemo(() => {
-		if (!h || y || P) return null;
-		let e = M.toLowerCase();
-		return h.map((t) => ({
+		U,
+		N,
+		b
+	]), G = c.useMemo(() => {
+		if (!g || b || F) return null;
+		let e = N.toLowerCase();
+		return g.map((t) => ({
 			...t,
 			items: e ? t.items.filter((t) => t.label.toLowerCase().includes(e)) : t.items
 		})).filter((e) => e.items.length > 0);
 	}, [
-		h,
-		M,
-		y,
-		P
+		g,
+		N,
+		b,
+		F
 	]);
-	function G(e) {
-		g.includes(e) ? _(g.filter((t) => t !== e)) : C && g.length >= C ? _([...g.slice(1), e]) : _([...g, e]);
-	}
-	s.useEffect(() => {
-		z(-1);
-	}, [M]), s.useEffect(() => {
-		if (R < 0) return;
-		let e = V.current;
-		e && e.querySelectorAll("[data-multiselect-item]")[R]?.scrollIntoView({ block: "nearest" });
-	}, [R]);
 	function K(e) {
-		let t = U.length;
+		_.includes(e) ? v(_.filter((t) => t !== e)) : w && _.length >= w ? v([..._.slice(1), e]) : v([..._, e]);
+	}
+	c.useEffect(() => {
+		B(-1);
+	}, [N]), c.useEffect(() => {
+		if (z < 0) return;
+		let e = H.current;
+		e && e.querySelectorAll("[data-multiselect-item]")[z]?.scrollIntoView({ block: "nearest" });
+	}, [z]);
+	function q(e) {
+		let t = W.length;
 		if (t !== 0) {
-			if (e.key === "ArrowDown") e.preventDefault(), z((e) => e < t - 1 ? e + 1 : 0);
-			else if (e.key === "ArrowUp") e.preventDefault(), z((e) => e <= 0 ? t - 1 : e - 1);
-			else if (e.key === "Enter" && R >= 0) {
+			if (e.key === "ArrowDown") e.preventDefault(), B((e) => e < t - 1 ? e + 1 : 0);
+			else if (e.key === "ArrowUp") e.preventDefault(), B((e) => e <= 0 ? t - 1 : e - 1);
+			else if (e.key === "Enter" && z >= 0) {
 				e.preventDefault();
-				let t = U[R];
-				t && !t.disabled && G(t.id);
+				let t = W[z];
+				t && !t.disabled && K(t.id);
 			}
 		}
 	}
-	let q = 0;
-	function J(n) {
-		let i = g.includes(n.id), a = q++, o = a === R;
-		return /* @__PURE__ */ u(p.button, {
-			id: `msp-item-${a}`,
+	let J = 0;
+	function Y(r) {
+		let a = _.includes(r.id), o = J++, s = o === z;
+		return /* @__PURE__ */ u(t, { children: /* @__PURE__ */ d(m.button, {
+			id: `msp-item-${o}`,
 			type: "button",
 			role: "option",
-			"aria-selected": i,
-			disabled: n.disabled,
+			"aria-selected": a,
+			disabled: r.disabled,
 			"data-multiselect-item": "",
-			"data-focused": o ? "" : void 0,
+			"data-focused": s ? "" : void 0,
 			initial: {
 				opacity: 0,
 				x: -8
@@ -97,90 +98,90 @@ var m = s.forwardRef(({ items: m, groups: h, value: g, onValueChange: _, searchP
 			},
 			transition: {
 				...e.snappy,
-				delay: a * .02
+				delay: o * .02
 			},
-			onClick: () => G(n.id),
-			className: t("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "disabled:opacity-action-disabled disabled:cursor-not-allowed", i && "bg-accent-2 text-accent-11", o && "bg-surface-raised-hover"),
-			children: [x ? /* @__PURE__ */ l("span", {
+			onClick: () => K(r.id),
+			className: n("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-panel-hover", "disabled:opacity-action-disabled disabled:cursor-not-allowed", a && "bg-accent-4 text-accent-11", s && "bg-surface-panel-hover"),
+			children: [S ? /* @__PURE__ */ u("span", {
 				className: "flex-1 min-w-0",
-				children: x(n, i)
-			}) : /* @__PURE__ */ u(c, { children: [n.image && /* @__PURE__ */ l("img", {
-				src: n.image,
+				children: S(r, a)
+			}) : /* @__PURE__ */ d(l, { children: [r.image && /* @__PURE__ */ u("img", {
+				src: r.image,
 				alt: "",
 				className: "h-ico-md w-ico-md rounded-pill object-cover shrink-0"
-			}), /* @__PURE__ */ u("span", {
+			}), /* @__PURE__ */ d("span", {
 				className: "flex-1 min-w-0",
-				children: [/* @__PURE__ */ l("span", {
+				children: [/* @__PURE__ */ u("span", {
 					className: "block truncate text-body-md font-body text-surface-fg",
-					children: n.label
-				}), n.description && /* @__PURE__ */ l("span", {
+					children: r.label
+				}), r.description && /* @__PURE__ */ u("span", {
 					className: "block truncate text-caption text-surface-fg-subtle",
-					children: n.description
+					children: r.description
 				})]
-			})] }), i && /* @__PURE__ */ l(p.span, {
+			})] }), a && /* @__PURE__ */ u(m.span, {
 				initial: { scale: 0 },
 				animate: { scale: 1 },
 				transition: e.snappy,
 				className: "inline-flex shrink-0",
-				children: /* @__PURE__ */ l(r, {
-					icon: d,
+				children: /* @__PURE__ */ u(i, {
+					icon: f,
 					size: "sm",
 					className: "text-accent-11"
 				})
 			})]
-		}, n.id);
+		}, r.id) });
 	}
-	return /* @__PURE__ */ u(i, {
-		open: A,
-		onOpenChange: j,
+	return /* @__PURE__ */ d(a, {
+		open: j,
+		onOpenChange: M,
 		modal: !1,
-		children: [/* @__PURE__ */ l(o, {
+		children: [/* @__PURE__ */ u(s, {
 			asChild: !0,
-			children: E
-		}), /* @__PURE__ */ u(a, {
-			ref: k,
-			...O,
-			className: t("border-surface-border-strong bg-surface-overlay p-0", D),
-			style: { width: T ?? 240 },
-			align: w,
+			children: D
+		}), /* @__PURE__ */ d(o, {
+			ref: A,
+			...k,
+			className: n("border-surface-border-strong bg-surface-overlay p-0", O),
+			style: { width: E ?? 240 },
+			align: T,
 			sideOffset: 4,
-			children: [/* @__PURE__ */ u("div", {
+			children: [/* @__PURE__ */ d("div", {
 				className: "flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03",
 				children: [
-					/* @__PURE__ */ l(r, {
-						icon: f,
+					/* @__PURE__ */ u(i, {
+						icon: p,
 						size: "sm",
 						stroke: "light",
 						className: "shrink-0 text-surface-fg-subtle"
 					}),
-					/* @__PURE__ */ l("input", {
+					/* @__PURE__ */ u("input", {
 						type: "text",
-						placeholder: v,
-						value: M,
-						onChange: (e) => N(e.target.value),
-						onKeyDown: K,
+						placeholder: y,
+						value: N,
+						onChange: (e) => P(e.target.value),
+						onKeyDown: q,
 						"aria-label": "Search",
-						"aria-activedescendant": R >= 0 ? `msp-item-${R}` : void 0,
+						"aria-activedescendant": z >= 0 ? `msp-item-${z}` : void 0,
 						className: "w-full bg-transparent text-body-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden"
 					}),
-					I && /* @__PURE__ */ l(n, { size: "sm" })
+					L && /* @__PURE__ */ u(r, { size: "sm" })
 				]
-			}), /* @__PURE__ */ u("div", {
-				ref: V,
+			}), /* @__PURE__ */ d("div", {
+				ref: H,
 				role: "listbox",
 				"aria-multiselectable": "true",
 				className: "max-h-[240px] overflow-y-auto py-ds-02",
-				children: [W ? W.map((e) => /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+				children: [G ? G.map((e) => /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
 					className: "px-ds-04 py-ds-02 text-label-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
 					children: e.label
-				}), e.items.map(J)] }, e.label)) : U.map(J), !I && U.length === 0 && /* @__PURE__ */ l("p", {
+				}), e.items.map(Y)] }, e.label)) : W.map(Y), !L && W.length === 0 && /* @__PURE__ */ u("p", {
 					className: "px-ds-04 py-ds-05 text-center text-body-sm font-body text-surface-fg-subtle",
-					children: S
+					children: C
 				})]
 			})]
 		})]
 	});
 });
-m.displayName = "MultiSelectPopover";
+h.displayName = "MultiSelectPopover";
 //#endregion
-export { m as MultiSelectPopover };
+export { h as MultiSelectPopover };

package/dist/composed/multi-select-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n     \n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <motion.button\n          key={item.id}\n          id={`msp-item-${index}`}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          disabled={item.disabled}\n          data-multiselect-item=\"\"\n          data-focused={isFocused ? '' : undefined}\n          initial={{ opacity: 0, x: -8 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ ...springs.snappy, delay: index * 0.02 }}\n          onClick={() => toggle(item.id)}\n          className={cn(\n            'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:bg-surface-raised-hover',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            isSelected && 'bg-accent-2 text-accent-11',\n            isFocused && 'bg-surface-raised-hover',\n          )}\n        >\n          {renderItem ? (\n            <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n          ) : (\n            <>\n              {item.image && (\n                <img\n                  src={item.image}\n                  alt=\"\"\n                  className=\"h-ico-md w-ico-md rounded-pill object-cover shrink-0\"\n                />\n              )}\n              <span className=\"flex-1 min-w-0\">\n                <span className=\"block truncate text-body-md font-body text-surface-fg\">{item.label}</span>\n                {item.description && (\n                  <span className=\"block truncate text-caption text-surface-fg-subtle\">{item.description}</span>\n                )}\n              </span>\n            </>\n          )}\n          {isSelected && (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.snappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n            </motion.span>\n          )}\n        </motion.button>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-body-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-label-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-body-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}
+{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n     \n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <MotionPreference>\n          <motion.button\n            key={item.id}\n            id={`msp-item-${index}`}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={isSelected}\n            disabled={item.disabled}\n            data-multiselect-item=\"\"\n            data-focused={isFocused ? '' : undefined}\n            initial={{ opacity: 0, x: -8 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{ ...springs.snappy, delay: index * 0.02 }}\n            onClick={() => toggle(item.id)}\n            className={cn(\n              'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n              'hover:bg-surface-panel-hover',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              // accent-4 so the selection stays above the focus ring's\n              // panel-hover fill in dark; accent-2 sat below the panel.\n              isSelected && 'bg-accent-4 text-accent-11',\n              isFocused && 'bg-surface-panel-hover',\n            )}\n          >\n            {renderItem ? (\n              <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n            ) : (\n              <>\n                {item.image && (\n                  <img\n                    src={item.image}\n                    alt=\"\"\n                    className=\"h-ico-md w-ico-md rounded-pill object-cover shrink-0\"\n                  />\n                )}\n                <span className=\"flex-1 min-w-0\">\n                  <span className=\"block truncate text-body-md font-body text-surface-fg\">{item.label}</span>\n                  {item.description && (\n                    <span className=\"block truncate text-caption text-surface-fg-subtle\">{item.description}</span>\n                  )}\n                </span>\n              </>\n            )}\n            {isSelected && (\n              <motion.span\n                initial={{ scale: 0 }}\n                animate={{ scale: 1 }}\n                transition={springs.snappy}\n                className=\"inline-flex shrink-0\"\n              >\n                <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n              </motion.span>\n            )}\n          </motion.button>\n        </MotionPreference>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-body-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-label-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-body-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}

package/dist/composed/page-skeletons.js

@@ -27,7 +27,7 @@ var s = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 			/* @__PURE__ */ r("div", {
 				className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4",
 				children: Array.from({ length: 4 }).map((e, n) => /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-ds-04 rounded-surface border border-card bg-surface-raised p-ds-05b",
+					className: "flex flex-col gap-ds-04 rounded-surface border border-card bg-surface-panel p-ds-05b",
 					children: [
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between",
@@ -39,7 +39,7 @@ var s = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 				}, `stat-${n}`))
 			}),
 			/* @__PURE__ */ i("div", {
-				className: "rounded-surface border border-card bg-surface-raised p-ds-06",
+				className: "rounded-surface border border-card bg-surface-panel p-ds-06",
 				children: [
 					/* @__PURE__ */ i("div", {
 						className: "mb-ds-06 flex items-center justify-between",
@@ -91,7 +91,7 @@ var c = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 			/* @__PURE__ */ r("div", {
 				className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3",
 				children: Array.from({ length: 6 }).map((e, n) => /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-ds-05 rounded-surface border border-card bg-surface-raised p-ds-05b",
+					className: "flex flex-col gap-ds-05 rounded-surface border border-card bg-surface-panel p-ds-05b",
 					children: [
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between",
@@ -124,7 +124,7 @@ var l = n.forwardRef(function({ className: n, label: s, ...c }, l) {
 		ref: l,
 		...a(s),
 		...c,
-		className: e("flex h-full flex-col gap-0 rounded-surface border border-card bg-surface-raised", n),
+		className: e("flex h-full flex-col gap-0 rounded-surface border border-card bg-surface-panel", n),
 		children: [
 			/* @__PURE__ */ r(o, { label: s }),
 			/* @__PURE__ */ i("div", {