@invergent/ui-sdk 2.19.0 → 2.19.2

package/dist/chunk-PH733KDD.js

@@ -0,0 +1,141 @@
+import { Textarea } from './chunk-5CRE35VX.js';
+import { Input } from './chunk-6JCVTRUK.js';
+import { Button } from './chunk-A44JJ6NH.js';
+import { cn } from './chunk-LZGII7SX.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-[10px] border border-foreground/10 bg-foreground/[0.04] transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-foreground/20 has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first",
+        "inline-end": "order-last",
+        "block-start": "order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end": "order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva(
+  "flex items-center gap-2 rounded-none text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 p-0 text-xs has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+//# sourceMappingURL=chunk-PH733KDD.js.map
+//# sourceMappingURL=chunk-PH733KDD.js.map

package/dist/chunk-PH733KDD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-group.tsx"],"names":[],"mappings":"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","file":"chunk-PH733KDD.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-[10px] border border-foreground/10 bg-foreground/[0.04] transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-foreground/20 has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"]}

package/dist/chunk-QEBQ5NUN.cjs

@@ -0,0 +1,148 @@
+'use strict';
+
+var chunkUOUXW63J_cjs = require('./chunk-UOUXW63J.cjs');
+var chunkRVX6SN4U_cjs = require('./chunk-RVX6SN4U.cjs');
+var chunkVBICNC43_cjs = require('./chunk-VBICNC43.cjs');
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: chunk6YHDDRIM_cjs.cn(
+        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-[10px] border border-foreground/10 bg-foreground/[0.04] transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-foreground/20 has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = classVarianceAuthority.cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first",
+        "inline-end": "order-last",
+        "block-start": "order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end": "order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: chunk6YHDDRIM_cjs.cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = classVarianceAuthority.cva(
+  "flex items-center gap-2 rounded-none text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 p-0 text-xs has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkVBICNC43_cjs.Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: chunk6YHDDRIM_cjs.cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkRVX6SN4U_cjs.Input,
+    {
+      "data-slot": "input-group-control",
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkUOUXW63J_cjs.Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
+//# sourceMappingURL=chunk-QEBQ5NUN.cjs.map
+//# sourceMappingURL=chunk-QEBQ5NUN.cjs.map

package/dist/chunk-QEBQ5NUN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-group.tsx"],"names":["jsx","cn","cva","Button","Input","Textarea"],"mappings":"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","file":"chunk-QEBQ5NUN.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-[10px] border border-foreground/10 bg-foreground/[0.04] transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-foreground/20 has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"]}

package/dist/chunk-UXSDDJXM.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Popover.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: chunk6YHDDRIM_cjs.cn(
+        // The surface of Work's menus, at panel padding.
+        "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-[12px] border border-foreground/10 bg-popover p-4 text-sm text-popover-foreground shadow-[0px_10px_24px_0px_rgba(0,0,0,0.12)] outline-hidden duration-100 dark:shadow-[0px_10px_24px_0px_rgba(0,0,0,0.5)] data-[side=bottom]:slide-in-from-top-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
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: chunk6YHDDRIM_cjs.cn("flex flex-col gap-1 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      className: chunk6YHDDRIM_cjs.cn("text-[13px] font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      className: chunk6YHDDRIM_cjs.cn(
+        "text-[12.5px] leading-relaxed text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverContent = PopoverContent;
+exports.PopoverDescription = PopoverDescription;
+exports.PopoverHeader = PopoverHeader;
+exports.PopoverTitle = PopoverTitle;
+exports.PopoverTrigger = PopoverTrigger;
+//# sourceMappingURL=chunk-UXSDDJXM.cjs.map
+//# sourceMappingURL=chunk-UXSDDJXM.cjs.map

package/dist/chunk-UXSDDJXM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popover.tsx"],"names":["PopoverPrimitive","jsx","cn"],"mappings":";;;;;;AAKA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,sCAAQA,eAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,sCAAQA,eAAA,CAAiB,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACEC,cAAA,CAACD,eAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAAC,cAAA;AAAA,IAACD,eAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAWE,oBAAA;AAAA;AAAA,QAET,okBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEA,SAAS,aAAA,CAAc;AAAA,EACrB,GAAG;AACL,CAAA,EAAyD;AACvD,EAAA,sCAAQF,eAAA,CAAiB,MAAA,EAAjB,EAAwB,WAAA,EAAU,gBAAA,EAAkB,GAAG,KAAA,EAAO,CAAA;AACxE;AAEA,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AAC3E,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAWC,oBAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,MACrD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzE,EAAA,uBACED,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAWC,oBAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8B;AAC5B,EAAA,uBACED,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACV,SAAA,EAAWC,oBAAA;AAAA,QACT,qDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-UXSDDJXM.cjs","sourcesContent":["import * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          // The surface of Work's menus, at panel padding.\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-[12px] border border-foreground/10 bg-popover p-4 text-sm text-popover-foreground shadow-[0px_10px_24px_0px_rgba(0,0,0,0.12)] outline-hidden duration-100 dark:shadow-[0px_10px_24px_0px_rgba(0,0,0,0.5)] data-[side=bottom]:slide-in-from-top-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    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-[13px] font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\n        \"text-[12.5px] leading-relaxed text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n"]}

package/dist/{chunk-CPAFEXKR.js → chunk-WO2SXSNH.js}

@@ -14,7 +14,10 @@ var toggleVariants = cva(
       size: {
         default: "min-h-10 px-3 text-[13px] pointer-fine:min-h-8",
         sm: "min-h-9 px-3 text-[12px] pointer-fine:min-h-7",
-        lg: "min-h-11 px-4 text-sm pointer-fine:min-h-9"
+        lg: "min-h-11 px-4 text-sm pointer-fine:min-h-9",
+        // Square, as the Button's icon sizes: 44px on touch.
+        icon: "size-9 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0",
+        "icon-xs": "size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0"
       }
     },
     defaultVariants: {
@@ -59,5 +62,5 @@ function FilterPill({
 }
 
 export { FilterPill, Toggle, toggleVariants };
-//# sourceMappingURL=chunk-CPAFEXKR.js.map
-//# sourceMappingURL=chunk-CPAFEXKR.js.map
+//# sourceMappingURL=chunk-WO2SXSNH.js.map
+//# sourceMappingURL=chunk-WO2SXSNH.js.map

package/dist/chunk-WO2SXSNH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle.tsx"],"names":["TogglePrimitive"],"mappings":";;;;;AAWA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,oVAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,6NAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gDAAA;AAAA,QACT,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI,4CAAA;AAAA;AAAA,QAEJ,IAAA,EAAM,yEAAA;AAAA,QACN,SAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,UAAA,CAAW;AAAA,EAClB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAQG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,EAAA;AAAA,MACT,eAAA,EAAiB,MAAM,OAAA,EAAQ;AAAA,MAC/B,WAAW,EAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-WO2SXSNH.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's pressed-state toggles. `default` is the 9px chip its\n// forms use for a choice that is on or off (Once / Repeating, the days of the\n// week): a faint box, amber-tinted once pressed. `outline` is its filter\n// pill: round, bordered, a neutral fill once on. Muted text brightens on\n// hover. Touch keeps 40px or more, a mouse the compact height.\nconst toggleVariants = cva(\n  \"group/toggle inline-flex shrink-0 items-center justify-center gap-1.5 border whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[9px] border-foreground/[0.08] bg-foreground/[0.04] font-medium text-muted-foreground hover:text-foreground data-[state=on]:border-amber-500/40 data-[state=on]:bg-amber-500/[0.12] data-[state=on]:text-foreground\",\n        outline:\n          \"rounded-full border-foreground/10 text-muted-foreground hover:text-foreground data-[state=on]:border-foreground/30 data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n      },\n      size: {\n        default: \"min-h-10 px-3 text-[13px] pointer-fine:min-h-8\",\n        sm: \"min-h-9 px-3 text-[12px] pointer-fine:min-h-7\",\n        lg: \"min-h-11 px-4 text-sm pointer-fine:min-h-9\",\n        // Square, as the Button's icon sizes: 44px on touch.\n        icon: \"size-9 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0\",\n        \"icon-xs\":\n          \"size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * The Work filter pill (a row of them filters a list: \"All channels\",\n * \"Slack 3\"…). An empty filter stays clickable, just quieter.\n */\nfunction FilterPill({\n  on,\n  onClick,\n  dim,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof TogglePrimitive.Root>,\n  \"pressed\" | \"onPressedChange\" | \"onClick\"\n> & {\n  on: boolean\n  onClick: () => void\n  /** Nothing behind it yet: still clickable, just quieter. */\n  dim?: boolean\n}) {\n  return (\n    <Toggle\n      variant=\"outline\"\n      size=\"sm\"\n      pressed={on}\n      onPressedChange={() => onClick()}\n      className={cn(dim && !on && \"opacity-55\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, FilterPill, toggleVariants }\n"]}

package/dist/collapsible-header.cjs

@@ -13,14 +13,22 @@ var collapsibleHeaderVariants = classVarianceAuthority.cva(
       variant: {
         nav: "gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]",
         section: "min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground"
+      },
+      size: {
+        default: "",
+        sm: ""
       }
     },
-    defaultVariants: { variant: "nav" }
+    compoundVariants: [
+      { variant: "section", size: "sm", className: "gap-1.5 px-2.5 pointer-fine:min-h-8" }
+    ],
+    defaultVariants: { variant: "nav", size: "default" }
   }
 );
 function CollapsibleHeader({
   icon: Icon,
   variant = "nav",
+  size = "default",
   className,
   children,
   ...props
@@ -30,7 +38,7 @@ function CollapsibleHeader({
     {
       "data-slot": "collapsible-header",
       "data-variant": variant,
-      className: chunk6YHDDRIM_cjs.cn(collapsibleHeaderVariants({ variant }), className),
+      className: chunk6YHDDRIM_cjs.cn(collapsibleHeaderVariants({ variant, size }), className),
       ...props,
       children: [
         Icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -52,7 +60,10 @@ function CollapsibleHeader({
           lucideReact.ChevronDown,
           {
             "aria-hidden": true,
-            className: "size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180"
+            className: chunk6YHDDRIM_cjs.cn(
+              "shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180",
+              size === "sm" ? "size-3.5" : "size-4"
+            )
           }
         )
       ]

package/dist/collapsible-header.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["cva","jsxs","CollapsiblePrimitive","cn","jsx","ChevronRight","ChevronDown"],"mappings":";;;;;;;;AAiBA,IAAM,yBAAA,GAA4BA,0BAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA;AAAM;AAEtC;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAWC,oBAAA,CAAG,yBAAA,CAA0B,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC9D,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACCC,cAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACXA,cAAA;AAAA,UAACC,wBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEAD,cAAA;AAAA,UAACE,uBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"nav\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\"\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}
+{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["cva","jsxs","CollapsiblePrimitive","cn","jsx","ChevronRight","ChevronDown"],"mappings":";;;;;;;;AAmBA,IAAM,yBAAA,GAA4BA,0BAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,EAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,IAAA,EAAM,WAAW,qCAAA;AAAsC,KACrF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,SAAA;AAAU;AAEvD;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAKG;AACD,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWC,qBAAG,yBAAA,CAA0B,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACCC,cAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACXA,cAAA;AAAA,UAACC,wBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEAD,cAAA;AAAA,UAACE,uBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAWH,oBAAA;AAAA,cACT,uGAAA;AAAA,cACA,IAAA,KAAS,OAAO,UAAA,GAAa;AAAA;AAC/B;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule. `sm`\n//             is the compact one a card in a thread or a strip above the\n//             composer takes: 32px with a mouse, still 44px on touch.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n      size: {\n        default: \"\",\n        sm: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"section\", size: \"sm\", className: \"gap-1.5 px-2.5 pointer-fine:min-h-8\" },\n    ],\n    defaultVariants: { variant: \"nav\", size: \"default\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n  /** `section` only: the compact header. */\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant, size }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className={cn(\n            \"shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\",\n            size === \"sm\" ? \"size-3.5\" : \"size-4\"\n          )}\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}

package/dist/collapsible-header.d.cts

@@ -6,10 +6,13 @@ import { LucideIcon } from 'lucide-react';
 
 declare const collapsibleHeaderVariants: (props?: ({
     variant?: "nav" | "section" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function CollapsibleHeader({ icon: Icon, variant, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
+declare function CollapsibleHeader({ icon: Icon, variant, size, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
     icon?: LucideIcon;
     variant?: "nav" | "section";
+    /** `section` only: the compact header. */
+    size?: "default" | "sm";
 }): react_jsx_runtime.JSX.Element;
 
 export { CollapsibleHeader, collapsibleHeaderVariants };

package/dist/collapsible-header.d.ts

@@ -6,10 +6,13 @@ import { LucideIcon } from 'lucide-react';
 
 declare const collapsibleHeaderVariants: (props?: ({
     variant?: "nav" | "section" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function CollapsibleHeader({ icon: Icon, variant, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
+declare function CollapsibleHeader({ icon: Icon, variant, size, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
     icon?: LucideIcon;
     variant?: "nav" | "section";
+    /** `section` only: the compact header. */
+    size?: "default" | "sm";
 }): react_jsx_runtime.JSX.Element;
 
 export { CollapsibleHeader, collapsibleHeaderVariants };

package/dist/collapsible-header.js

@@ -11,14 +11,22 @@ var collapsibleHeaderVariants = cva(
       variant: {
         nav: "gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]",
         section: "min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground"
+      },
+      size: {
+        default: "",
+        sm: ""
       }
     },
-    defaultVariants: { variant: "nav" }
+    compoundVariants: [
+      { variant: "section", size: "sm", className: "gap-1.5 px-2.5 pointer-fine:min-h-8" }
+    ],
+    defaultVariants: { variant: "nav", size: "default" }
   }
 );
 function CollapsibleHeader({
   icon: Icon,
   variant = "nav",
+  size = "default",
   className,
   children,
   ...props
@@ -28,7 +36,7 @@ function CollapsibleHeader({
     {
       "data-slot": "collapsible-header",
       "data-variant": variant,
-      className: cn(collapsibleHeaderVariants({ variant }), className),
+      className: cn(collapsibleHeaderVariants({ variant, size }), className),
       ...props,
       children: [
         Icon && /* @__PURE__ */ jsx(
@@ -50,7 +58,10 @@ function CollapsibleHeader({
           ChevronDown,
           {
             "aria-hidden": true,
-            className: "size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180"
+            className: cn(
+              "shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180",
+              size === "sm" ? "size-3.5" : "size-4"
+            )
           }
         )
       ]

package/dist/collapsible-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["CollapsiblePrimitive"],"mappings":";;;;;;AAiBA,IAAM,yBAAA,GAA4B,GAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA;AAAM;AAEtC;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACE,IAAA;AAAA,IAACA,WAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAW,EAAA,CAAG,yBAAA,CAA0B,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC9D,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACX,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"nav\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\"\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}
+{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["CollapsiblePrimitive"],"mappings":";;;;;;AAmBA,IAAM,yBAAA,GAA4B,GAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,EAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,IAAA,EAAM,WAAW,qCAAA;AAAsC,KACrF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,SAAA;AAAU;AAEvD;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAKG;AACD,EAAA,uBACE,IAAA;AAAA,IAACA,WAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,GAAG,yBAAA,CAA0B,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACX,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAW,EAAA;AAAA,cACT,uGAAA;AAAA,cACA,IAAA,KAAS,OAAO,UAAA,GAAa;AAAA;AAC/B;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule. `sm`\n//             is the compact one a card in a thread or a strip above the\n//             composer takes: 32px with a mouse, still 44px on touch.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n      size: {\n        default: \"\",\n        sm: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"section\", size: \"sm\", className: \"gap-1.5 px-2.5 pointer-fine:min-h-8\" },\n    ],\n    defaultVariants: { variant: \"nav\", size: \"default\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n  /** `section` only: the compact header. */\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant, size }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className={cn(\n            \"shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\",\n            size === \"sm\" ? \"size-3.5\" : \"size-4\"\n          )}\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}