@exsto/ds 0.0.1-rc.18 → 0.0.1-rc.19

package/dist/ui/src/components/ui/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../ui/src/components/ui/button/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,gBACJ;AAEF,IAAa,iBAAiB,IAC5B,qoCACA;CACE,UAAU;EACR,SAAS;GACP,SAAS,0DAA0D;GACnE,SAAS,mLAAmL;GAC5L,WAAW,kLAAkL;GAC7L,OACE;GACF,aAAa,+NAA+N;GAC5O,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;AASA,IAAM,gBAAgB,WACpB,eAAe,MAAM,MAAM,OAAO,SAAS,OAAO,OAAQ,OAAO,MAA6B,SAAS;;;;;;;;;;;;;AAczG,IAAM,aAAa;CAAE,cAAc;CAAO,MAAM,KAAA;CAAW,UAAU,KAAA;AAAU;;;;;;;;;;AAW/E,IAAM,sBAAsB;CAAE,GAAG;CAAY,UAAU;CAAI,sBAAsB;AAAG;AAEpF,IAAa,YAAU,EACrB,WACA,UAAU,WACV,OAAO,WACP,GAAG,YAC8D;CACjE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,GAAK,aAAa,MAAM,MAAM,IAAK,MAAM,WAAW,sBAAsB,aAAc,CAAC;EACzF,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../ui/src/components/ui/button/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-control bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-control dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,gBACJ;AAEF,IAAa,iBAAiB,IAC5B,qoCACA;CACE,UAAU;EACR,SAAS;GACP,SAAS,0DAA0D;GACnE,SAAS,sLAAsL;GAC/L,WAAW,kLAAkL;GAC7L,OACE;GACF,aAAa,+NAA+N;GAC5O,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;AASA,IAAM,gBAAgB,WACpB,eAAe,MAAM,MAAM,OAAO,SAAS,OAAO,OAAQ,OAAO,MAA6B,SAAS;;;;;;;;;;;;;AAczG,IAAM,aAAa;CAAE,cAAc;CAAO,MAAM,KAAA;CAAW,UAAU,KAAA;AAAU;;;;;;;;;;AAW/E,IAAM,sBAAsB;CAAE,GAAG;CAAY,UAAU;CAAI,sBAAsB;AAAG;AAEpF,IAAa,YAAU,EACrB,WACA,UAAU,WACV,OAAO,WACP,GAAG,YAC8D;CACjE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,GAAK,aAAa,MAAM,MAAM,IAAK,MAAM,WAAW,sBAAsB,aAAc,CAAC;EACzF,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/card/card.js

@@ -19,7 +19,7 @@ var CardHeader = ({ className, ...props }) => {
 var CardTitle = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
-		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
+		className: cn("text-base leading-6 font-medium group-data-[size=sm]/card:text-sm group-data-[size=sm]/card:leading-5", className),
 		...props
 	});
 };

package/dist/ui/src/components/ui/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../../../../../ui/src/components/ui/card/card.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Card = ({ className, size = 'default', ...props }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) => {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CardHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CardTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-title\" className={cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm', className)} {...props} />;\n};\n\nexport const CardDescription = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n\nexport const CardAction = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-action\" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />;\n};\n\nexport const CardContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-content\" className={cn('px-4 group-data-[size=sm]/card:px-3', className)} {...props} />;\n};\n\nexport const CardFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,QAAQ,EAAE,WAAW,OAAO,WAAW,GAAG,YAAuE;CAC5H,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,wVACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,WAAW,GAAG,wEAAwE,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnJ;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,kEAAkE,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,uCAAuC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yFAAyF,SAAS;EAChH,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../../../../../ui/src/components/ui/card/card.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Card = ({ className, size = 'default', ...props }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) => {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CardHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CardTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('text-base leading-6 font-medium group-data-[size=sm]/card:text-sm group-data-[size=sm]/card:leading-5', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CardDescription = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n\nexport const CardAction = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-action\" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />;\n};\n\nexport const CardContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-content\" className={cn('px-4 group-data-[size=sm]/card:px-3', className)} {...props} />;\n};\n\nexport const CardFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,QAAQ,EAAE,WAAW,OAAO,WAAW,GAAG,YAAuE;CAC5H,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,wVACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yGAAyG,SAAS;EAChI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,kEAAkE,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,uCAAuC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yFAAyF,SAAS;EAChH,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/checkbox/checkbox.js

@@ -6,7 +6,7 @@ import { Checkbox } from "@base-ui/react/checkbox";
 var Checkbox$1 = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/ui/src/components/ui/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\n\nexport const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconCheck className=\"group-data-indeterminate/checkbox-indicator:hidden\" />\n        <IconMinus className=\"hidden group-data-indeterminate/checkbox-indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAY,EAAE,WAAW,GAAG,YAA0C;CACjF,OACE,oBAAC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,woBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,WAAD,EAAW,WAAU,qDAAsD,CAAA,GAC3E,oBAAC,WAAD,EAAW,WAAU,2DAA4D,CAAA,CACtD;;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\n\nexport const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconCheck className=\"group-data-indeterminate/checkbox-indicator:hidden\" />\n        <IconMinus className=\"hidden group-data-indeterminate/checkbox-indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAY,EAAE,WAAW,GAAG,YAA0C;CACjF,OACE,oBAAC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,0oBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,WAAD,EAAW,WAAU,qDAAsD,CAAA,GAC3E,oBAAC,WAAD,EAAW,WAAU,2DAA4D,CAAA,CACtD;;CACP,CAAA;AAE5B"}

package/dist/ui/src/components/ui/combobox/combobox.d.ts

@@ -1,7 +1,11 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 import { ReactNode } from 'react';
 export declare const Combobox: <TValue>({ ...props }: ComboboxPrimitive.Root.Props<TValue>) => import('react').JSX.Element;
-export declare const ComboboxInput: ({ className, ...props }: ComboboxPrimitive.Input.Props) => import('react').JSX.Element;
+export interface IComboboxInputProps extends ComboboxPrimitive.Input.Props {
+    /** The name of the chevron button that opens the list, for a screen reader and a voice command. Translate it with the rest of the page. */
+    triggerLabel?: string;
+}
+export declare const ComboboxInput: ({ className, triggerLabel, ...props }: IComboboxInputProps) => import('react').JSX.Element;
 export interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Props, 'children'> {
     /** Item nodes, or the Base UI function form `(item, index) => node` (requires `items` on the root). */
     children?: ComboboxPrimitive.List.Props['children'];

package/dist/ui/src/components/ui/combobox/combobox.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { ScrollArea } from "../scroll-area/scroll-area.js";
-import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { PopupListScroll } from "../scroll-area/popup-list-scroll.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconCheck, IconChevronDown } from "@tabler/icons-react";
 import { Combobox } from "@base-ui/react/combobox";
@@ -11,19 +11,19 @@ var Combobox$1 = ({ ...props }) => {
 		...props
 	});
 };
-var ComboboxInput = ({ className, ...props }) => {
+var ComboboxInput = ({ className, triggerLabel = "Show options", ...props }) => {
 	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-slot": "combobox-input-group",
 		className: "relative flex w-full items-center",
 		children: [/* @__PURE__ */ jsx(Combobox.Input, {
 			"data-slot": "combobox-input",
-			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			className: cn("h-8 w-full min-w-0 rounded-lg border border-control bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 			...props
 		}), /* @__PURE__ */ jsx(Combobox.Trigger, {
 			"data-slot": "combobox-trigger",
-			className: "absolute right-2 flex items-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50",
+			className: "absolute right-1.75 flex size-6 items-center justify-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50",
 			tabIndex: -1,
-			"aria-hidden": true,
+			"aria-label": triggerLabel,
 			children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-4" })
 		})]
 	});
@@ -36,22 +36,16 @@ var ComboboxContent = ({ className, children, empty, portalContainer, ...props }
 			"data-slot": "combobox-positioner",
 			sideOffset: 4,
 			align: "start",
-			className: "z-50",
+			className: POPUP_LAYER_CLASS,
 			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 				"data-slot": "combobox-content",
 				className: cn("flex max-h-(--available-height) flex-col overflow-hidden", POPUP_FRAME_CLASS, POPUP_LIST_WIDTH_CLASS, "motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 				...props,
-				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }), /* @__PURE__ */ jsx(ScrollArea, {
-					type: "always",
-					fade: true,
-					className: POPUP_LIST_HEIGHT_CLASS,
-					viewportClassName: "scroll-py-1",
-					children: /* @__PURE__ */ jsx(Combobox.List, {
-						"data-slot": "combobox-list",
-						className: "p-1",
-						children
-					})
-				})]
+				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }), /* @__PURE__ */ jsx(PopupListScroll, { children: /* @__PURE__ */ jsx(Combobox.List, {
+					"data-slot": "combobox-list",
+					className: "px-1",
+					children
+				}) })]
 			})
 		})
 	});

package/dist/ui/src/components/ui/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LIST_HEIGHT_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Combobox = <TValue,>({ ...props }: ComboboxPrimitive.Root.Props<TValue>) => {\n  return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />;\n};\n\nexport const ComboboxInput = ({ className, ...props }: ComboboxPrimitive.Input.Props) => {\n  return (\n    <ComboboxPrimitive.InputGroup data-slot=\"combobox-input-group\" className=\"relative flex w-full items-center\">\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(\n          'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          className,\n        )}\n        {...props}\n      />\n      <ComboboxPrimitive.Trigger\n        data-slot=\"combobox-trigger\"\n        className=\"absolute right-2 flex items-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50\"\n        tabIndex={-1}\n        aria-hidden\n      >\n        <IconChevronDown className=\"size-4\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n};\n\nexport interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Props, 'children'> {\n  /** Item nodes, or the Base UI function form `(item, index) => node` (requires `items` on the root). */\n  children?: ComboboxPrimitive.List.Props['children'];\n  /** Empty-state content; rendered (with the default text) only when the filtered list is empty. */\n  empty?: ReactNode;\n  /** Optional portal destination, used by shadow-DOM element wrappers. */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nexport const ComboboxContent = ({ className, children, empty, portalContainer, ...props }: IComboboxContentProps) => {\n  return (\n    <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" container={portalContainer}>\n      <ComboboxPrimitive.Positioner data-slot=\"combobox-positioner\" sideOffset={4} align=\"start\" className=\"z-50\">\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            'flex max-h-(--available-height) flex-col overflow-hidden',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        >\n          <ComboboxEmpty>{empty}</ComboboxEmpty>\n          {/* The ScrollArea, not the List, is the scroll container: a filtered list\n              that runs past the fold needs a bar and a fade to say so. Base UI\n              keeps the highlighted item in view through the nearest scrollable\n              ancestor, which is now the viewport. POPUP_LIST_HEIGHT_CLASS ends\n              the list on a whole row. */}\n          <ScrollArea type=\"always\" fade className={POPUP_LIST_HEIGHT_CLASS} viewportClassName=\"scroll-py-1\">\n            <ComboboxPrimitive.List data-slot=\"combobox-list\" className=\"p-1\">\n              {children}\n            </ComboboxPrimitive.List>\n          </ScrollArea>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n};\n\nexport const ComboboxItem = ({ className, children, ...props }: ComboboxPrimitive.Item.Props) => {\n  return (\n    <ComboboxPrimitive.Item data-slot=\"combobox-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <span className=\"flex-1\">{children}</span>\n      <ComboboxPrimitive.ItemIndicator data-slot=\"combobox-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n};\n\nexport const ComboboxEmpty = ({ className, children, ...props }: ComboboxPrimitive.Empty.Props) => {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      // empty:py-0 collapses the padding while the list has results: Base UI\n      // keeps this status element mounted and only fills it when the list is\n      // empty (and only when the root has `items` to derive emptiness from).\n      className={cn('py-4 text-center text-sm text-muted-foreground empty:py-0', className)}\n      {...props}\n    >\n      {children ?? 'No results found.'}\n    </ComboboxPrimitive.Empty>\n  );\n};\n\n/**\n * A titled run of items. Put a `ComboboxLabel` first in it; with grouped `items` on the root, render the group's own items\n * through `ComboboxCollection` (Base UI's grouped-items pattern), so a filter hides a group whose items all drop out.\n */\nexport const ComboboxGroup = ({ ...props }: ComboboxPrimitive.Group.Props) => {\n  return <ComboboxPrimitive.Group data-slot=\"combobox-group\" {...props} />;\n};\n\n/** A group's heading, the same one Select and the menus draw. */\nexport const ComboboxLabel = ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) => {\n  return <ComboboxPrimitive.GroupLabel data-slot=\"combobox-label\" className={cn(POPUP_GROUP_LABEL_CLASS, className)} {...props} />;\n};\n\n/** The items of one group, for grouped `items` on the root. */\nexport const ComboboxCollection = ({ ...props }: ComboboxPrimitive.Collection.Props) => {\n  return <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />;\n};\n\nexport const ComboboxSeparator = ({ className, ...props }: ComboboxPrimitive.Separator.Props) => {\n  return <ComboboxPrimitive.Separator data-slot=\"combobox-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,cAAqB,EAAE,GAAG,YAAkD;CACvF,OAAO,oBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAW,GAAI;CAAQ,CAAA;AAClE;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA2C;CACvF,OACE,qBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAuB,WAAU;EAAzE,UAAA,CACE,oBAAC,SAAkB,OAAnB;GACE,aAAU;GACV,WAAW,GACT,qiBACA,SACF;GACA,GAAI;EACL,CAAA,GACD,oBAAC,SAAkB,SAAnB;GACE,aAAU;GACV,WAAU;GACV,UAAU;GACV,eAAA;GAEA,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACZ,CAAA,CACC;;AAElC;AAWA,IAAa,mBAAmB,EAAE,WAAW,UAAU,OAAO,iBAAiB,GAAG,YAAmC;CACnH,OACE,oBAAC,SAAkB,QAAnB;EAA0B,aAAU;EAAkB,WAAW;EAC/D,UAAA,oBAAC,SAAkB,YAAnB;GAA8B,aAAU;GAAsB,YAAY;GAAG,OAAM;GAAQ,WAAU;GACnG,UAAA,qBAAC,SAAkB,OAAnB;IACE,aAAU;IACV,WAAW,GACT,4DACA,mBACA,wBACA,mKACA,SACF;IACA,GAAI;IATN,UAAA,CAWE,oBAAC,eAAD,EAAA,UAAgB,MAAqB,CAAA,GAMrC,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,WAAW;KAAyB,mBAAkB;KACnF,UAAA,oBAAC,SAAkB,MAAnB;MAAwB,aAAU;MAAgB,WAAU;MACzD;KACqB,CAAA;IACd,CAAA,CACW;;EACG,CAAA;CACN,CAAA;AAE9B;AAEA,IAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,YAA0C;CAC/F,OACE,qBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAAjH,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAU;EAAe,CAAA,GACzC,oBAAC,SAAkB,eAAnB;GAAiC,aAAU;GAA0B,WAAW;GAC9E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACF,CAAA,CACX;;AAE5B;AAEA,IAAa,iBAAiB,EAAE,WAAW,UAAU,GAAG,YAA2C;CACjG,OACE,oBAAC,SAAkB,OAAnB;EACE,aAAU;EAIV,WAAW,GAAG,6DAA6D,SAAS;EACpF,GAAI;EAEH,UAAA,YAAY;CACU,CAAA;AAE7B;;;;;AAMA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,SAAkB,OAAnB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAgD;CAC5F,OAAO,oBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAiB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;;AAGA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AACnF;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OAAO,oBAAC,SAAkB,WAAnB;EAA6B,aAAU;EAAqB,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxI"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LAYER_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport { PopupListScroll } from '../scroll-area';\n\nexport const Combobox = <TValue,>({ ...props }: ComboboxPrimitive.Root.Props<TValue>) => {\n  return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />;\n};\n\nexport interface IComboboxInputProps extends ComboboxPrimitive.Input.Props {\n  /** The name of the chevron button that opens the list, for a screen reader and a voice command. Translate it with the rest of the page. */\n  triggerLabel?: string;\n}\n\nexport const ComboboxInput = ({ className, triggerLabel = 'Show options', ...props }: IComboboxInputProps) => {\n  return (\n    <ComboboxPrimitive.InputGroup data-slot=\"combobox-input-group\" className=\"relative flex w-full items-center\">\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(\n          'h-8 w-full min-w-0 rounded-lg border border-control bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          className,\n        )}\n        {...props}\n      />\n      <ComboboxPrimitive.Trigger\n        data-slot=\"combobox-trigger\"\n        // A 24px target (WCAG 2.5.8) around the 16px chevron, which stays 11px from the end of the field: 7px and the 4px each side.\n        className=\"absolute right-1.75 flex size-6 items-center justify-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50\"\n        tabIndex={-1}\n        aria-label={triggerLabel}\n      >\n        <IconChevronDown className=\"size-4\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n};\n\nexport interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Props, 'children'> {\n  /** Item nodes, or the Base UI function form `(item, index) => node` (requires `items` on the root). */\n  children?: ComboboxPrimitive.List.Props['children'];\n  /** Empty-state content; rendered (with the default text) only when the filtered list is empty. */\n  empty?: ReactNode;\n  /** Optional portal destination, used by shadow-DOM element wrappers. */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nexport const ComboboxContent = ({ className, children, empty, portalContainer, ...props }: IComboboxContentProps) => {\n  return (\n    <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" container={portalContainer}>\n      <ComboboxPrimitive.Positioner data-slot=\"combobox-positioner\" sideOffset={4} align=\"start\" className={POPUP_LAYER_CLASS}>\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            'flex max-h-(--available-height) flex-col overflow-hidden',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        >\n          <ComboboxEmpty>{empty}</ComboboxEmpty>\n          {/* The ScrollArea, not the List, is the scroll container: a filtered list\n              that runs past the fold needs a bar and a fade to say so. Base UI\n              keeps the highlighted item in view through the nearest scrollable\n              ancestor, which is now the viewport. POPUP_LIST_HEIGHT_CLASS ends\n              the list on a whole row. */}\n          <PopupListScroll>\n            <ComboboxPrimitive.List data-slot=\"combobox-list\" className=\"px-1\">\n              {children}\n            </ComboboxPrimitive.List>\n          </PopupListScroll>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n};\n\nexport const ComboboxItem = ({ className, children, ...props }: ComboboxPrimitive.Item.Props) => {\n  return (\n    <ComboboxPrimitive.Item data-slot=\"combobox-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <span className=\"flex-1\">{children}</span>\n      <ComboboxPrimitive.ItemIndicator data-slot=\"combobox-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n};\n\nexport const ComboboxEmpty = ({ className, children, ...props }: ComboboxPrimitive.Empty.Props) => {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      // empty:py-0 collapses the padding while the list has results: Base UI\n      // keeps this status element mounted and only fills it when the list is\n      // empty (and only when the root has `items` to derive emptiness from).\n      className={cn('py-4 text-center text-sm text-muted-foreground empty:py-0', className)}\n      {...props}\n    >\n      {children ?? 'No results found.'}\n    </ComboboxPrimitive.Empty>\n  );\n};\n\n/**\n * A titled run of items. Put a `ComboboxLabel` first in it; with grouped `items` on the root, render the group's own items\n * through `ComboboxCollection` (Base UI's grouped-items pattern), so a filter hides a group whose items all drop out.\n */\nexport const ComboboxGroup = ({ ...props }: ComboboxPrimitive.Group.Props) => {\n  return <ComboboxPrimitive.Group data-slot=\"combobox-group\" {...props} />;\n};\n\n/** A group's heading, the same one Select and the menus draw. */\nexport const ComboboxLabel = ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) => {\n  return <ComboboxPrimitive.GroupLabel data-slot=\"combobox-label\" className={cn(POPUP_GROUP_LABEL_CLASS, className)} {...props} />;\n};\n\n/** The items of one group, for grouped `items` on the root. */\nexport const ComboboxCollection = ({ ...props }: ComboboxPrimitive.Collection.Props) => {\n  return <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />;\n};\n\nexport const ComboboxSeparator = ({ className, ...props }: ComboboxPrimitive.Separator.Props) => {\n  return <ComboboxPrimitive.Separator data-slot=\"combobox-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,cAAqB,EAAE,GAAG,YAAkD;CACvF,OAAO,oBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAW,GAAI;CAAQ,CAAA;AAClE;AAOA,IAAa,iBAAiB,EAAE,WAAW,eAAe,gBAAgB,GAAG,YAAiC;CAC5G,OACE,qBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAuB,WAAU;EAAzE,UAAA,CACE,oBAAC,SAAkB,OAAnB;GACE,aAAU;GACV,WAAW,GACT,6dACA,SACF;GACA,GAAI;EACL,CAAA,GACD,oBAAC,SAAkB,SAAnB;GACE,aAAU;GAEV,WAAU;GACV,UAAU;GACV,cAAY;GAEZ,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACZ,CAAA,CACC;;AAElC;AAWA,IAAa,mBAAmB,EAAE,WAAW,UAAU,OAAO,iBAAiB,GAAG,YAAmC;CACnH,OACE,oBAAC,SAAkB,QAAnB;EAA0B,aAAU;EAAkB,WAAW;EAC/D,UAAA,oBAAC,SAAkB,YAAnB;GAA8B,aAAU;GAAsB,YAAY;GAAG,OAAM;GAAQ,WAAW;GACpG,UAAA,qBAAC,SAAkB,OAAnB;IACE,aAAU;IACV,WAAW,GACT,4DACA,mBACA,wBACA,mKACA,SACF;IACA,GAAI;IATN,UAAA,CAWE,oBAAC,eAAD,EAAA,UAAgB,MAAqB,CAAA,GAMrC,oBAAC,iBAAD,EAAA,UACE,oBAAC,SAAkB,MAAnB;KAAwB,aAAU;KAAgB,WAAU;KACzD;IACqB,CAAA,EACT,CAAA,CACM;;EACG,CAAA;CACN,CAAA;AAE9B;AAEA,IAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,YAA0C;CAC/F,OACE,qBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAAjH,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAU;EAAe,CAAA,GACzC,oBAAC,SAAkB,eAAnB;GAAiC,aAAU;GAA0B,WAAW;GAC9E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACF,CAAA,CACX;;AAE5B;AAEA,IAAa,iBAAiB,EAAE,WAAW,UAAU,GAAG,YAA2C;CACjG,OACE,oBAAC,SAAkB,OAAnB;EACE,aAAU;EAIV,WAAW,GAAG,6DAA6D,SAAS;EACpF,GAAI;EAEH,UAAA,YAAY;CACU,CAAA;AAE7B;;;;;AAMA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,SAAkB,OAAnB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAgD;CAC5F,OAAO,oBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAiB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;;AAGA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AACnF;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OAAO,oBAAC,SAAkB,WAAnB;EAA6B,aAAU;EAAqB,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxI"}

package/dist/ui/src/components/ui/command/command.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../lib/utils.js";
-import { ScrollArea } from "../scroll-area/scroll-area.js";
 import { popupItemClass } from "../../../lib/popup-list.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
 import { InputGroup, InputGroupAddon } from "../input-group/input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -101,7 +101,7 @@ var CommandItem = ({ className, children, ...props }) => {
 		...props,
 		children: [children, /* @__PURE__ */ jsx(IconCheck, {
 			"data-slot": "command-item-indicator",
-			className: "ml-auto size-4 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+			className: "mr-px ml-auto size-3.5 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
 		})]
 	});
 };

package/dist/ui/src/components/ui/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":[],"sources":["../../../../../../../ui/src/components/ui/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconSearch } from '@tabler/icons-react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport type * as React from 'react';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog';\nimport { InputGroup, InputGroupAddon } from '../input-group';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Command = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn('flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CommandDialog = ({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) => {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)} showCloseButton={showCloseButton}>\n        {children}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport const CommandInput = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    // Borderless, with a hairline under it: a grey block around the search field\n    // reads as a second surface inside the popup, and the caret already says\n    // where typing goes.\n    <div data-slot=\"command-input-wrapper\" className=\"border-b border-border p-1\">\n      <InputGroup className=\"h-8 border-transparent bg-transparent shadow-none *:data-[slot=input-group-addon]:pl-2 dark:bg-transparent\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconSearch className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n\n/**\n * The palette's results list. The scroll container is the DS ScrollArea rather\n * than the primitive's own `overflow-y-auto`, because a list of results that\n * continues past the fold with no bar and no fade reads as a complete list. The\n * cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.\n *\n * The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list\n * carries `role=\"listbox\"`, and a listbox may not contain presentation wrappers\n * (axe flags that as a critical aria-required-children violation). The options\n * have to stay direct children of the element that holds the role.\n *\n * cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`\n * on the item, which acts on the nearest scrollable ancestor, so that keeps\n * working now that the viewport is the one that scrolls. `scroll-py-1` goes on\n * the viewport for the same reason: it is what pads that scroll.\n */\nexport const CommandList = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className={cn('max-h-72', className)} viewPortClassName=\"scroll-py-1\">\n      <CommandPrimitive.List data-slot=\"command-list\" className=\"outline-none\" {...props}>\n        {children}\n      </CommandPrimitive.List>\n    </ScrollArea>\n  );\n};\n\nexport const CommandEmpty = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className={cn('py-6 text-center text-sm', className)} {...props} />;\n};\n\nexport const CommandGroup = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return <CommandPrimitive.Separator data-slot=\"command-separator\" className={cn('-mx-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const CommandItem = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item data-slot=\"command-item\" className={cn('group/command-item', popupItemClass('cmdk'), className)} {...props}>\n      {children}\n      {/* The check keeps the end of the item whether it is shown or not, except\n          where a shortcut has it, so the list does not shift as the choice moves. */}\n      <IconCheck\n        data-slot=\"command-item-indicator\"\n        className=\"ml-auto size-4 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  );\n};\n\nexport const CommandShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,aAAW,EAAE,WAAW,GAAG,YAA2D;CACjG,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8FAA8F,SAAS;EACrH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,OAClB,GAAG,YAOC;CACJ,OACE,qBAAC,QAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,qBAAC,cAAD;GAAc,WAAU;GAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;EACd,CAAA,GAAA,oBAAC,eAAD;GAAe,WAAW,GAAG,yDAAyD,SAAS;GAAoB;GAChH;EACY,CAAA,CACT;;AAEZ;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAIE,oBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,qBAAC,YAAD;GAAY,WAAU;GAAtB,UAAA,CACE,oBAAC,QAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GAAG,iFAAiF,SAAS;IACxG,GAAI;GACL,CAAA,GACD,oBAAC,iBAAD,EAAA,UACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,EACrC,CAAA,CACP;;CACT,CAAA;AAET;;;;;;;;;;;;;;;;;AAkBA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,oBAAC,YAAD;EAAY,MAAK;EAAS,MAAA;EAAK,UAAS;EAAU,WAAW,GAAG,YAAY,SAAS;EAAG,mBAAkB;EACxG,UAAA,oBAAC,QAAiB,MAAlB;GAAuB,aAAU;GAAe,WAAU;GAAe,GAAI;GAC1E;EACoB,CAAA;CACb,CAAA;AAEhB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OACE,oBAAC,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,+NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAqE;CACpH,OAAO,oBAAC,QAAiB,WAAlB;EAA4B,aAAU;EAAoB,WAAW,GAAG,wBAAwB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;AAEA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,qBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAe,WAAW,GAAG,sBAAsB,eAAe,MAAM,GAAG,SAAS;EAAG,GAAI;EAA5H,UAAA,CACG,UAGD,oBAAC,WAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA,CACoB;;AAE3B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAA0C;CACxF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,0GAA0G,SAAS;EACjI,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"command.js","names":[],"sources":["../../../../../../../ui/src/components/ui/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconSearch } from '@tabler/icons-react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport type * as React from 'react';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog';\nimport { InputGroup, InputGroupAddon } from '../input-group';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Command = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn('flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CommandDialog = ({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) => {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)} showCloseButton={showCloseButton}>\n        {children}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport const CommandInput = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    // Borderless, with a hairline under it: a grey block around the search field\n    // reads as a second surface inside the popup, and the caret already says\n    // where typing goes.\n    <div data-slot=\"command-input-wrapper\" className=\"border-b border-border p-1\">\n      <InputGroup className=\"h-8 border-transparent bg-transparent shadow-none *:data-[slot=input-group-addon]:pl-2 dark:bg-transparent\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconSearch className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n\n/**\n * The palette's results list. The scroll container is the DS ScrollArea rather\n * than the primitive's own `overflow-y-auto`, because a list of results that\n * continues past the fold with no bar and no fade reads as a complete list. The\n * cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.\n *\n * The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list\n * carries `role=\"listbox\"`, and a listbox may not contain presentation wrappers\n * (axe flags that as a critical aria-required-children violation). The options\n * have to stay direct children of the element that holds the role.\n *\n * cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`\n * on the item, which acts on the nearest scrollable ancestor, so that keeps\n * working now that the viewport is the one that scrolls. `scroll-py-1` goes on\n * the viewport for the same reason: it is what pads that scroll.\n */\nexport const CommandList = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className={cn('max-h-72', className)} viewPortClassName=\"scroll-py-1\">\n      <CommandPrimitive.List data-slot=\"command-list\" className=\"outline-none\" {...props}>\n        {children}\n      </CommandPrimitive.List>\n    </ScrollArea>\n  );\n};\n\nexport const CommandEmpty = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className={cn('py-6 text-center text-sm', className)} {...props} />;\n};\n\nexport const CommandGroup = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return <CommandPrimitive.Separator data-slot=\"command-separator\" className={cn('-mx-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const CommandItem = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item data-slot=\"command-item\" className={cn('group/command-item', popupItemClass('cmdk'), className)} {...props}>\n      {children}\n      {/* The check keeps the end of the item whether it is shown or not, except\n          where a shortcut has it, so the list does not shift as the choice moves. */}\n      <IconCheck\n        data-slot=\"command-item-indicator\"\n        className=\"mr-px ml-auto size-3.5 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  );\n};\n\nexport const CommandShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,aAAW,EAAE,WAAW,GAAG,YAA2D;CACjG,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8FAA8F,SAAS;EACrH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,OAClB,GAAG,YAOC;CACJ,OACE,qBAAC,QAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,qBAAC,cAAD;GAAc,WAAU;GAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;EACd,CAAA,GAAA,oBAAC,eAAD;GAAe,WAAW,GAAG,yDAAyD,SAAS;GAAoB;GAChH;EACY,CAAA,CACT;;AAEZ;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAIE,oBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,qBAAC,YAAD;GAAY,WAAU;GAAtB,UAAA,CACE,oBAAC,QAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GAAG,iFAAiF,SAAS;IACxG,GAAI;GACL,CAAA,GACD,oBAAC,iBAAD,EAAA,UACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,EACrC,CAAA,CACP;;CACT,CAAA;AAET;;;;;;;;;;;;;;;;;AAkBA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,oBAAC,YAAD;EAAY,MAAK;EAAS,MAAA;EAAK,UAAS;EAAU,WAAW,GAAG,YAAY,SAAS;EAAG,mBAAkB;EACxG,UAAA,oBAAC,QAAiB,MAAlB;GAAuB,aAAU;GAAe,WAAU;GAAe,GAAI;GAC1E;EACoB,CAAA;CACb,CAAA;AAEhB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OACE,oBAAC,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,+NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAqE;CACpH,OAAO,oBAAC,QAAiB,WAAlB;EAA4B,aAAU;EAAoB,WAAW,GAAG,wBAAwB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;AAEA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,qBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAe,WAAW,GAAG,sBAAsB,eAAe,MAAM,GAAG,SAAS;EAAG,GAAI;EAA5H,UAAA,CACG,UAGD,oBAAC,WAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA,CACoB;;AAE3B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAA0C;CACxF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,0GAA0G,SAAS;EACjI,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/context-menu/context-menu.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../lib/utils.js";
 import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
-import { ScrollArea } from "../scroll-area/scroll-area.js";
-import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { PopupListScroll } from "../scroll-area/popup-list-scroll.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
 import { ContextMenu } from "@base-ui/react/context-menu";
@@ -29,7 +29,7 @@ var ContextMenuTrigger = ({ className, ...props }) => {
 var ContextMenuContent = ({ className, children, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) => {
 	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
-		className: "isolate z-50 outline-none",
+		className: cn(POPUP_LAYER_CLASS, "isolate outline-none"),
 		align,
 		alignOffset,
 		side,
@@ -38,14 +38,10 @@ var ContextMenuContent = ({ className, children, align = "start", alignOffset =
 			"data-slot": "context-menu-content",
 			className: cn("z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100", POPUP_FRAME_CLASS, POPUP_LIST_WIDTH_CLASS, "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
 			...props,
-			children: /* @__PURE__ */ jsx(ScrollArea, {
-				type: "always",
-				fade: true,
+			children: /* @__PURE__ */ jsx(PopupListScroll, {
 				focusable: false,
-				className: POPUP_LIST_HEIGHT_CLASS,
-				viewportClassName: "scroll-py-1",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "p-1",
+					className: "px-1",
 					children
 				})
 			})

package/dist/ui/src/components/ui/context-menu/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LIST_HEIGHT_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n};\n\nexport const ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" className={cn('select-none', className)} {...props} />;\n};\n\nexport const ContextMenuContent = ({\n  className,\n  children,\n  align = 'start',\n  alignOffset = 4,\n  side = 'right',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* A menu that outgrows the window scrolls in a ScrollArea like every other popup list, not in a native\n              scroll box; the padding sits on the content so the cap counts it. */}\n          <ScrollArea type=\"always\" fade focusable={false} className={POPUP_LIST_HEIGHT_CLASS} viewportClassName=\"scroll-py-1\">\n            <div className=\"p-1\">{children}</div>\n          </ScrollArea>\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\nexport const ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/context-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it, as in DropdownMenu.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSub = ({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) => {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\n};\n\nexport const ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({ ...props }: React.ComponentProps<typeof ContextMenuContent>) => {\n  return <ContextMenuContent data-slot=\"context-menu-sub-content\" className=\"shadow-lg\" side=\"right\" {...props} />;\n};\n\nexport const ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS}>\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const ContextMenuRadioGroup = ({ ...props }: ContextMenuPrimitive.RadioGroup.Props) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS}>\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuSeparator = ({ className, ...props }: ContextMenuPrimitive.Separator.Props) => {\n  return <ContextMenuPrimitive.Separator data-slot=\"context-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const ContextMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LAYER_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { PopupListScroll } from '../scroll-area';\n\nexport const ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n};\n\nexport const ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" className={cn('select-none', className)} {...props} />;\n};\n\nexport const ContextMenuContent = ({\n  className,\n  children,\n  align = 'start',\n  alignOffset = 4,\n  side = 'right',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className={cn(POPUP_LAYER_CLASS, 'isolate outline-none')}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* A menu that outgrows the window scrolls in a ScrollArea like every other popup list, not in a native\n              scroll box; the air above and below the rows is POPUP_LIST_HEIGHT_CLASS's margin, so the content takes no vertical\n              padding. */}\n          <PopupListScroll focusable={false}>\n            <div className=\"px-1\">{children}</div>\n          </PopupListScroll>\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\nexport const ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/context-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it, as in DropdownMenu.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSub = ({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) => {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\n};\n\nexport const ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({ ...props }: React.ComponentProps<typeof ContextMenuContent>) => {\n  return <ContextMenuContent data-slot=\"context-menu-sub-content\" className=\"shadow-lg\" side=\"right\" {...props} />;\n};\n\nexport const ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS}>\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const ContextMenuRadioGroup = ({ ...props }: ContextMenuPrimitive.RadioGroup.Props) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS}>\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuSeparator = ({ className, ...props }: ContextMenuPrimitive.Separator.Props) => {\n  return <ContextMenuPrimitive.Separator data-slot=\"context-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const ContextMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js

@@ -1,7 +1,7 @@
 import { cn } from "../../../lib/utils.js";
 import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
-import { ScrollArea } from "../scroll-area/scroll-area.js";
-import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { PopupListScroll } from "../scroll-area/popup-list-scroll.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
 import { Menu } from "@base-ui/react/menu";
@@ -38,7 +38,7 @@ var DropdownMenuTrigger = ({ ...props }) => {
 var DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, children, ...props }) => {
 	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		className: "isolate z-50 outline-none",
+		className: cn(POPUP_LAYER_CLASS, "isolate outline-none"),
 		align,
 		alignOffset,
 		side,
@@ -47,14 +47,10 @@ var DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom",
 			"data-slot": "dropdown-menu-content",
 			className: cn("z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100", POPUP_FRAME_CLASS, POPUP_LIST_WIDTH_CLASS, "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
 			...props,
-			children: /* @__PURE__ */ jsx(ScrollArea, {
-				type: "always",
-				fade: true,
+			children: /* @__PURE__ */ jsx(PopupListScroll, {
 				focusable: false,
-				className: POPUP_LIST_HEIGHT_CLASS,
-				viewportClassName: "scroll-py-1",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "p-1",
+					className: "px-1",
 					children
 				})
 			})

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LIST_HEIGHT_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const DropdownMenu = ({ ...props }: MenuPrimitive.Root.Props) => {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n};\n\nexport const DropdownMenuPortal = ({ ...props }: MenuPrimitive.Portal.Props) => {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n};\n\nexport const DropdownMenuTrigger = ({ ...props }: MenuPrimitive.Trigger.Props) => {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n};\n\n/**\n * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown\n * for as long as the menu overflows and a fade on whichever end is cut off.\n *\n * Base UI puts `role=\"menu\"` on this popup itself and offers no inner list part\n * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal\n * because ScrollArea drops the `role=\"presentation\"` Base UI gives its root,\n * viewport and content: a menu may not own presentation wrappers (axe reports\n * a critical aria-required-children violation), but it may own plain divs.\n * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.\n */\nexport const DropdownMenuContent = ({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner className=\"isolate z-50 outline-none\" align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset}>\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* POPUP_LIST_HEIGHT_CLASS caps the element that scrolls at eight rows, or at the whole rows the\n              positioner's measured height allows; the padding sits on the content so the cap counts it. */}\n          <ScrollArea type=\"always\" fade focusable={false} className={POPUP_LIST_HEIGHT_CLASS} viewportClassName=\"scroll-py-1\">\n            <div className=\"p-1\">{children}</div>\n          </ScrollArea>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n};\n\nexport const DropdownMenuGroup = ({ ...props }: MenuPrimitive.Group.Props) => {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n};\n\nexport const DropdownMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it:\n        // the shared translucent one would make it read like any other item.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuSub = ({ ...props }: MenuPrimitive.SubmenuRoot.Props) => {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n};\n\nexport const DropdownMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is\n        // down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const DropdownMenuSubContent = ({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) => {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn('shadow-lg', className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-checkbox-item-indicator\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const DropdownMenuRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n};\n\nexport const DropdownMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-radio-item-indicator\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n};\n\nexport const DropdownMenuSeparator = ({ className, ...props }: MenuPrimitive.Separator.Props) => {\n  return <MenuPrimitive.Separator data-slot=\"dropdown-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const DropdownMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LAYER_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { PopupListScroll } from '../scroll-area';\n\nexport const DropdownMenu = ({ ...props }: MenuPrimitive.Root.Props) => {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n};\n\nexport const DropdownMenuPortal = ({ ...props }: MenuPrimitive.Portal.Props) => {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n};\n\nexport const DropdownMenuTrigger = ({ ...props }: MenuPrimitive.Trigger.Props) => {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n};\n\n/**\n * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown\n * for as long as the menu overflows and a fade on whichever end is cut off.\n *\n * Base UI puts `role=\"menu\"` on this popup itself and offers no inner list part\n * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal\n * because ScrollArea drops the `role=\"presentation\"` Base UI gives its root,\n * viewport and content: a menu may not own presentation wrappers (axe reports\n * a critical aria-required-children violation), but it may own plain divs.\n * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.\n */\nexport const DropdownMenuContent = ({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className={cn(POPUP_LAYER_CLASS, 'isolate outline-none')}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* POPUP_LIST_HEIGHT_CLASS caps the element that scrolls at eight rows, or at the whole rows the\n              positioner's measured height allows; the air above and below the rows is that class's margin, so the content takes\n              no vertical padding. */}\n          <PopupListScroll focusable={false}>\n            <div className=\"px-1\">{children}</div>\n          </PopupListScroll>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n};\n\nexport const DropdownMenuGroup = ({ ...props }: MenuPrimitive.Group.Props) => {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n};\n\nexport const DropdownMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it:\n        // the shared translucent one would make it read like any other item.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuSub = ({ ...props }: MenuPrimitive.SubmenuRoot.Props) => {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n};\n\nexport const DropdownMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is\n        // down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const DropdownMenuSubContent = ({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) => {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn('shadow-lg', className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-checkbox-item-indicator\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const DropdownMenuRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n};\n\nexport const DropdownMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-radio-item-indicator\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n};\n\nexport const DropdownMenuSeparator = ({ className, ...props }: MenuPrimitive.Separator.Props) => {\n  return <MenuPrimitive.Separator data-slot=\"dropdown-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const DropdownMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/empty/empty.js

@@ -44,7 +44,7 @@ var EmptyTitle = ({ className, ...props }) => {
 var EmptyDescription = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty-description",
-		className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: cn("text-sm/6 text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
 		...props
 	});
 };

package/dist/ui/src/components/ui/empty/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","names":[],"sources":["../../../../../../../ui/src/components/ui/empty/empty.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nexport const Empty = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const EmptyHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"empty-header\" className={cn('flex max-w-sm flex-col items-center gap-2', className)} {...props} />;\n};\n\nconst emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const EmptyMedia = ({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) => {\n  return <div data-slot=\"empty-icon\" data-variant={variant} className={cn(emptyMediaVariants({ variant, className }))} {...props} />;\n};\n\nexport const EmptyTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"empty-title\" className={cn('font-heading text-sm font-medium tracking-tight', className)} {...props} />;\n};\n\nexport const EmptyDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn('text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', className)}\n      {...props}\n    />\n  );\n};\n\nexport const EmptyContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,IAAa,SAAS,EAAE,WAAW,GAAG,YAAyC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6CAA6C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1H;AAEA,IAAM,qBAAqB,IAAI,+FAA+F;CAC5H,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAED,IAAa,cAAc,EAAE,WAAW,UAAU,WAAW,GAAG,YAAmF;CACjJ,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,gBAAc;EAAS,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AACnI;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/H;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAuC;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2GAA2G,SAAS;EAClI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mFAAmF,SAAS;EAC1G,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"empty.js","names":[],"sources":["../../../../../../../ui/src/components/ui/empty/empty.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nexport const Empty = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const EmptyHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"empty-header\" className={cn('flex max-w-sm flex-col items-center gap-2', className)} {...props} />;\n};\n\nconst emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const EmptyMedia = ({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) => {\n  return <div data-slot=\"empty-icon\" data-variant={variant} className={cn(emptyMediaVariants({ variant, className }))} {...props} />;\n};\n\nexport const EmptyTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"empty-title\" className={cn('font-heading text-sm font-medium tracking-tight', className)} {...props} />;\n};\n\nexport const EmptyDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn('text-sm/6 text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', className)}\n      {...props}\n    />\n  );\n};\n\nexport const EmptyContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,IAAa,SAAS,EAAE,WAAW,GAAG,YAAyC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6CAA6C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1H;AAEA,IAAM,qBAAqB,IAAI,+FAA+F;CAC5H,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAED,IAAa,cAAc,EAAE,WAAW,UAAU,WAAW,GAAG,YAAmF;CACjJ,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,gBAAc;EAAS,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AACnI;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/H;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAuC;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qGAAqG,SAAS;EAC5H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mFAAmF,SAAS;EAC1G,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/field/field.js

@@ -5,14 +5,14 @@ import { Field } from "@base-ui/react/field";
 var Field$1 = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Field.Root, {
 		"data-slot": "field",
-		className: cn("group/field flex flex-col gap-1.5", className),
+		className: cn("group/field flex flex-col gap-2", className),
 		...props
 	});
 };
 var FieldLabel = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Field.Label, {
 		"data-slot": "field-label",
-		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground", className),
+		className: cn("flex items-center gap-2 text-sm leading-5 font-medium select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground", className),
 		...props
 	});
 };

package/dist/ui/src/components/ui/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../../../../../../ui/src/components/ui/field/field.tsx"],"sourcesContent":["import { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const Field = ({ className, ...props }: FieldPrimitive.Root.Props) => {\n  return <FieldPrimitive.Root data-slot=\"field\" className={cn('group/field flex flex-col gap-1.5', className)} {...props} />;\n};\n\nexport const FieldLabel = ({ className, ...props }: FieldPrimitive.Label.Props) => {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        // Dimmed only when the Field itself is disabled (data-disabled), and in the muted text colour, not at half opacity, so it still reads at 4.5:1.\n        'flex items-center gap-2 text-sm leading-none font-medium select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const FieldDescription = ({ className, ...props }: FieldPrimitive.Description.Props) => {\n  return <FieldPrimitive.Description data-slot=\"field-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n\nexport const FieldError = ({ className, ...props }: FieldPrimitive.Error.Props) => {\n  return <FieldPrimitive.Error data-slot=\"field-error\" className={cn('text-sm text-destructive', className)} {...props} />;\n};\n"],"mappings":";;;;AAGA,IAAa,WAAS,EAAE,WAAW,GAAG,YAAuC;CAC3E,OAAO,oBAAC,MAAe,MAAhB;EAAqB,aAAU;EAAQ,WAAW,GAAG,qCAAqC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC3H;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OACE,oBAAC,MAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAET,8IACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,MAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,MAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH"}
+{"version":3,"file":"field.js","names":[],"sources":["../../../../../../../ui/src/components/ui/field/field.tsx"],"sourcesContent":["import { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const Field = ({ className, ...props }: FieldPrimitive.Root.Props) => {\n  return <FieldPrimitive.Root data-slot=\"field\" className={cn('group/field flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const FieldLabel = ({ className, ...props }: FieldPrimitive.Label.Props) => {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        // Dimmed only when the Field itself is disabled (data-disabled), and in the muted text colour, not at half opacity, so it still reads at 4.5:1.\n        'flex items-center gap-2 text-sm leading-5 font-medium select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const FieldDescription = ({ className, ...props }: FieldPrimitive.Description.Props) => {\n  return <FieldPrimitive.Description data-slot=\"field-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n\nexport const FieldError = ({ className, ...props }: FieldPrimitive.Error.Props) => {\n  return <FieldPrimitive.Error data-slot=\"field-error\" className={cn('text-sm text-destructive', className)} {...props} />;\n};\n"],"mappings":";;;;AAGA,IAAa,WAAS,EAAE,WAAW,GAAG,YAAuC;CAC3E,OAAO,oBAAC,MAAe,MAAhB;EAAqB,aAAU;EAAQ,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OACE,oBAAC,MAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAET,2IACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,MAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,MAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH"}

package/dist/ui/src/components/ui/hover-card/hover-card.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../../lib/utils.js";
+import { POPUP_LAYER_CLASS } from "../../../lib/popup-list.js";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region ../ui/src/components/ui/hover-card/hover-card.tsx
@@ -23,7 +24,7 @@ var HoverCardContent = ({ className, side = "bottom", sideOffset = 4, align = "c
 			alignOffset,
 			side,
 			sideOffset,
-			className: "isolate z-50",
+			className: cn(POPUP_LAYER_CLASS, "isolate"),
 			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 				"data-slot": "hover-card-content",
 				className: cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),

package/dist/ui/src/components/ui/hover-card/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":[],"sources":["../../../../../../../ui/src/components/ui/hover-card/hover-card.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const HoverCard = ({ ...props }: PreviewCardPrimitive.Root.Props) => {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n};\n\nexport const HoverCardTrigger = ({ ...props }: PreviewCardPrimitive.Trigger.Props) => {\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n};\n\nexport const HoverCardContent = ({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className=\"isolate z-50\">\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            'z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,aAAa,EAAE,GAAG,YAA6C;CAC1E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,oBAAoB,EAAE,GAAG,YAAgD;CACpF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAClF;AAEA,IAAa,oBAAoB,EAC/B,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,GAAG,YACkI;CACrI,OACE,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;EACrC,UAAA,oBAAC,YAAqB,YAAtB;GAAwC;GAAoB;GAAmB;GAAkB;GAAY,WAAU;GACrH,UAAA,oBAAC,YAAqB,OAAtB;IACE,aAAU;IACV,WAAW,GACT,4jBACA,SACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../../../../../../ui/src/components/ui/hover-card/hover-card.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport { POPUP_LAYER_CLASS } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const HoverCard = ({ ...props }: PreviewCardPrimitive.Root.Props) => {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n};\n\nexport const HoverCardTrigger = ({ ...props }: PreviewCardPrimitive.Trigger.Props) => {\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n};\n\nexport const HoverCardContent = ({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(POPUP_LAYER_CLASS, 'isolate')}\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            'z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,aAAa,EAAE,GAAG,YAA6C;CAC1E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,oBAAoB,EAAE,GAAG,YAAgD;CACpF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAClF;AAEA,IAAa,oBAAoB,EAC/B,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,GAAG,YACkI;CACrI,OACE,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;EACrC,UAAA,oBAAC,YAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAW,GAAG,mBAAmB,SAAS;GAE1C,UAAA,oBAAC,YAAqB,OAAtB;IACE,aAAU;IACV,WAAW,GACT,4jBACA,SACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}