@invergent/ui-sdk 2.19.0 → 2.19.2

package/README.md

@@ -48,16 +48,25 @@ the kit carries Work's own components:
 | `sidebar` | `Sidebar`, `SidebarBrand`, `SidebarUserBar`, `SidebarAction`, `useSidebar` | The desktop sidebar: open, or an icon rail that opens on hover, with the pin toggle at its bottom. `ListRow` and `SectionLabel` inside it collapse with the rail; outside it (a phone drawer) the parts draw open. |
 | `list-row` | `ListRow`, `ListGroup` | A list entry (icon, label, description, count, chevron) in three densities; a button, or any link via `asChild`. |
 | `section-label` | `SectionLabel` | A rule and a quiet word starting a group of rows. |
-| `collapsible-header` | `CollapsibleHeader` | A styled `CollapsibleTrigger`: `nav` (a group in a list of rows) or `section` (a disclosure). |
-| `chip` | `Chip`, `TonePill`, `TagPill`, `TONE` | Round chips by tone (`ok`, `warn`, `bad`, `muted`), removable with `onRemove`. |
+| `collapsible-header` | `CollapsibleHeader` | A styled `CollapsibleTrigger`: `nav` (a group in a list of rows) or `section` (a disclosure; `size="sm"` for the compact one). |
+| `chip` | `Chip`, `TonePill`, `TagPill`, `TONE` | Round chips by tone (`ok`, `warn`, `bad`, `info`, `muted`), removable with `onRemove`. |
 | `choice-card` | `ChoiceCard` | A selectable option card (`aria-pressed`), amber when picked. |
 | `text-link` | `TextLink` | Amber or muted text link; `asChild` for router links. |
 | `segmented-control` | `SegmentedControl` | The Work / Dev mode switch, for any two or three peers. |
 | `toggle`, `toggle-group` | `FilterPill`, `ViewSwitch`, `useRememberedView` | A list filter pill; a tab's view switch. |
+| `tab-strip` | `TabStrip`, `TabStripTab` | A compact strip of tabs that close (a browser's open pages). |
 | `pill-tabs` | `PillTabs` | A page's section tabs as a bare strip (`tabs` draws the same over Radix). |
 | `empty-state` | `EmptyState`, `EmptyStateLogo` | The brand badge, a heading, copy and actions for an empty list. |
 | `stat-card` | `StatCard`, `InfoHint`, `ChannelChip` | A stat tile: label, value, hint, detail. |
 | `control-styles` | `CONTROL_*` | Class strings for native controls that cannot be a component. |
+| `command` | `Command`, `CommandList`, `CommandGroup`, `CommandItem`, … | A searchable list (cmdk) with Work's menu rows; `data-checked` on an item lights its amber check. |
+| `hover-card` | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` | A card shown on hover, on the popover surface. |
+| `item` | `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`, … | A content row (media, title, description, actions), plain, outlined or muted. |
+| `button-group` | `ButtonGroup`, `ButtonGroupText`, `ButtonGroupSeparator` | Buttons joined into one control, rounded only at its ends. |
+| `progress-bar` | `ProgressBar` | A 4px bar on the line colour, filled with `color` (amber by default). |
+| `responsive-panel` | `ResponsivePanel` | A popover with a cursor, a bottom sheet on a phone. |
+| `timeline` | `Timeline`, `TimelineItem`, `TimelineIndicator`, `TimelineSeparator`, … | A vertical run of steps, each a dot on a connecting line. |
+| `rabbit-mark` | `RabbitMark`, `RABBIT_MARK_PATH`, `RABBIT_MARK_BOX` | The rabbit silhouette as an icon in `currentColor`, and its path for a canvas. |
 
 Several rely on the `data-*` variants and the `no-scrollbar` utility from
 `shadcn/tailwind.css`; import it alongside the theme.

package/dist/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/button-group.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var chunk6ARYCL4L_cjs = require('./chunk-6ARYCL4L.cjs');
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var buttonGroupVariants = classVarianceAuthority.cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-foreground/20 has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-foreground/20 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-[10px] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-foreground/[0.12] has-[>[data-variant=outline]]:[&>input:focus-visible]:border-foreground/20",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: chunk6YHDDRIM_cjs.cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex items-center gap-2 rounded-[7px] border border-transparent bg-transparent px-2.5 text-[13px] font-medium text-muted-foreground group-has-[>[data-variant=outline]]/button-group:border-foreground/[0.12] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk6ARYCL4L_cjs.Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: chunk6YHDDRIM_cjs.cn(
+        "relative self-stretch bg-foreground/[0.12] data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupText = ButtonGroupText;
+exports.buttonGroupVariants = buttonGroupVariants;
+//# sourceMappingURL=button-group.cjs.map
+//# sourceMappingURL=button-group.cjs.map

package/dist/button-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button-group.tsx"],"names":["cva","jsx","cn","Slot","Separator"],"mappings":";;;;;;;;AASA,IAAM,mBAAA,GAAsBA,0BAAA;AAAA,EAC1B,s7BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,WAAA,EAAa;AAAA,QACX,UAAA,EACE,iHAAA;AAAA,QACF,QAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAA,EAAa;AAAA;AACf;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2E;AACzE,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,cAAA;AAAA,MACV,kBAAA,EAAkB,WAAA;AAAA,MAClB,WAAWC,oBAAA,CAAG,mBAAA,CAAoB,EAAE,WAAA,EAAa,GAAG,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;AAIA,SAAS,eAAA,CAAgB;AAAA,EACvB,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAEG;AACD,EAAA,MAAM,IAAA,GAAO,OAAA,GAAUC,YAAA,CAAK,IAAA,GAAO,KAAA;AAEnC,EAAA,uBACEF,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,oBAAA;AAAA,QACT,kRAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAA2C;AACzC,EAAA,uBACED,cAAA;AAAA,IAACG,2BAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,wBAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAWF,oBAAA;AAAA,QACT,kIAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button-group.cjs","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\n// Buttons joined into one control: the inner corners square off and the\n// shared borders collapse, so the group keeps the Work button's 7px corners\n// only at its two ends.\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-foreground/20 has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-foreground/20 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-[10px] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-foreground/[0.12] has-[>[data-variant=outline]]:[&>input:focus-visible]:border-foreground/20\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\n// A label inside the group (\"2 of 5\"): the button's 13px medium in muted\n// text, bordered like its outline neighbours.\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-[7px] border border-transparent bg-transparent px-2.5 text-[13px] font-medium text-muted-foreground group-has-[>[data-variant=outline]]/button-group:border-foreground/[0.12] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-foreground/[0.12] data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n"]}

package/dist/button-group.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.cjs';
+import 'react';
+import 'radix-ui';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/button-group.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.js';
+import 'react';
+import 'radix-ui';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/button-group.js

@@ -0,0 +1,75 @@
+import { Separator } from './chunk-CTIEUG5L.js';
+import { cn } from './chunk-LZGII7SX.js';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonGroupVariants = cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-foreground/20 has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-foreground/20 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-[10px] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-foreground/[0.12] has-[>[data-variant=outline]]:[&>input:focus-visible]:border-foreground/20",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "flex items-center gap-2 rounded-[7px] border border-transparent bg-transparent px-2.5 text-[13px] font-medium text-muted-foreground group-has-[>[data-variant=outline]]/button-group:border-foreground/[0.12] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "relative self-stretch bg-foreground/[0.12] data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+//# sourceMappingURL=button-group.js.map
+//# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button-group.tsx"],"names":[],"mappings":";;;;;;AASA,IAAM,mBAAA,GAAsB,GAAA;AAAA,EAC1B,s7BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,WAAA,EAAa;AAAA,QACX,UAAA,EACE,iHAAA;AAAA,QACF,QAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAA,EAAa;AAAA;AACf;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2E;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,cAAA;AAAA,MACV,kBAAA,EAAkB,WAAA;AAAA,MAClB,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,WAAA,EAAa,GAAG,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;AAIA,SAAS,eAAA,CAAgB;AAAA,EACvB,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAEG;AACD,EAAA,MAAM,IAAA,GAAO,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,KAAA;AAEnC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,kRAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAA2C;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,wBAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,kIAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button-group.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\n// Buttons joined into one control: the inner corners square off and the\n// shared borders collapse, so the group keeps the Work button's 7px corners\n// only at its two ends.\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-foreground/[0.12] has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-foreground/20 has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-foreground/20 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-[10px] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-foreground/[0.12] has-[>[data-variant=outline]]:[&>input:focus-visible]:border-foreground/20\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\n// A label inside the group (\"2 of 5\"): the button's 13px medium in muted\n// text, bordered like its outline neighbours.\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-[7px] border border-transparent bg-transparent px-2.5 text-[13px] font-medium text-muted-foreground group-has-[>[data-variant=outline]]/button-group:border-foreground/[0.12] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-foreground/[0.12] data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n"]}

package/dist/button.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/button.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/chip.cjs

@@ -9,6 +9,7 @@ var TONE = {
   ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
   warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
   bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  info: "bg-sky-500/12 text-sky-700 dark:text-sky-300",
   muted: "bg-foreground/[0.06] text-muted-foreground"
 };
 var chipVariants = classVarianceAuthority.cva(
@@ -60,10 +61,9 @@ function Chip({
 }
 function TonePill({
   tone,
-  className,
-  children
+  ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tone, size: "sm", className, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tone, size: "sm", ...props });
 }
 function TagPill({
   label,

package/dist/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip.tsx"],"names":["cva","jsxs","cn","jsx","XIcon"],"mappings":";;;;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAeA,0BAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,oBAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,sCACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAWD,oBAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}
+{"version":3,"sources":["../src/chip.tsx"],"names":["cva","jsxs","cn","jsx","XIcon"],"mappings":";;;;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,IAAA,EAAM,8CAAA;AAAA,EACN,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAeA,0BAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,oBAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqE;AACnE,EAAA,sCAAQ,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAM,GAAG,KAAA,EAAO,CAAA;AAChD;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAWD,oBAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"info\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  info: \"bg-sky-500/12 text-sky-700 dark:text-sky-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"onRemove\"> & { tone?: Tone }) {\n  return <Chip tone={tone} size=\"sm\" {...props} />\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/chip.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 
-type Tone = "ok" | "warn" | "bad" | "muted";
+type Tone = "ok" | "warn" | "bad" | "info" | "muted";
 declare const TONE: Record<Tone, string>;
 declare const chipVariants: (props?: ({
     tone?: Tone | null | undefined;
@@ -17,10 +17,8 @@ declare function Chip({ tone, size, onRemove, removeLabel, className, children,
     removeLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 /** A status chip ("Active", "Paused") in one of the tones. */
-declare function TonePill({ tone, className, children, }: {
+declare function TonePill({ tone, ...props }: Omit<React.ComponentProps<"span">, "onRemove"> & {
     tone?: Tone;
-    className?: string;
-    children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /** A tag, removable when `onRemove` is given. */
 declare function TagPill({ label, onRemove, size, className, }: {

package/dist/chip.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 
-type Tone = "ok" | "warn" | "bad" | "muted";
+type Tone = "ok" | "warn" | "bad" | "info" | "muted";
 declare const TONE: Record<Tone, string>;
 declare const chipVariants: (props?: ({
     tone?: Tone | null | undefined;
@@ -17,10 +17,8 @@ declare function Chip({ tone, size, onRemove, removeLabel, className, children,
     removeLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 /** A status chip ("Active", "Paused") in one of the tones. */
-declare function TonePill({ tone, className, children, }: {
+declare function TonePill({ tone, ...props }: Omit<React.ComponentProps<"span">, "onRemove"> & {
     tone?: Tone;
-    className?: string;
-    children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /** A tag, removable when `onRemove` is given. */
 declare function TagPill({ label, onRemove, size, className, }: {

package/dist/chip.js

@@ -7,6 +7,7 @@ var TONE = {
   ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
   warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
   bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  info: "bg-sky-500/12 text-sky-700 dark:text-sky-300",
   muted: "bg-foreground/[0.06] text-muted-foreground"
 };
 var chipVariants = cva(
@@ -58,10 +59,9 @@ function Chip({
 }
 function TonePill({
   tone,
-  className,
-  children
+  ...props
 }) {
-  return /* @__PURE__ */ jsx(Chip, { tone, size: "sm", className, children });
+  return /* @__PURE__ */ jsx(Chip, { tone, size: "sm", ...props });
 }
 function TagPill({
   label,

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}
+{"version":3,"sources":["../src/chip.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,IAAA,EAAM,8CAAA;AAAA,EACN,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqE;AACnE,EAAA,2BAAQ,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAM,GAAG,KAAA,EAAO,CAAA;AAChD;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"info\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  info: \"bg-sky-500/12 text-sky-700 dark:text-sky-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"onRemove\"> & { tone?: Tone }) {\n  return <Chip tone={tone} size=\"sm\" {...props} />\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/{chunk-IVMZANP7.cjs → chunk-ILCP5QXL.cjs}

@@ -16,7 +16,10 @@ var toggleVariants = classVarianceAuthority.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: {
@@ -63,5 +66,5 @@ function FilterPill({
 exports.FilterPill = FilterPill;
 exports.Toggle = Toggle;
 exports.toggleVariants = toggleVariants;
-//# sourceMappingURL=chunk-IVMZANP7.cjs.map
-//# sourceMappingURL=chunk-IVMZANP7.cjs.map
+//# sourceMappingURL=chunk-ILCP5QXL.cjs.map
+//# sourceMappingURL=chunk-ILCP5QXL.cjs.map

package/dist/chunk-ILCP5QXL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle.tsx"],"names":["cva","jsx","TogglePrimitive","cn"],"mappings":";;;;;;;AAWA,IAAM,cAAA,GAAiBA,0BAAA;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,uBACEC,cAAA;AAAA,IAACC,cAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAWC,qBAAG,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,uBACEF,cAAA;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,WAAWE,oBAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-ILCP5QXL.cjs","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/chunk-NSK344BJ.js

@@ -0,0 +1,80 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { Popover as Popover$1 } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: 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__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: cn("flex flex-col gap-1 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      className: cn("text-[13px] font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      className: cn(
+        "text-[12.5px] leading-relaxed text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+//# sourceMappingURL=chunk-NSK344BJ.js.map
+//# sourceMappingURL=chunk-NSK344BJ.js.map

package/dist/chunk-NSK344BJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popover.tsx"],"names":["PopoverPrimitive"],"mappings":";;;;AAKA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,2BAAQA,SAAA,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,2BAAQA,SAAA,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,uBACE,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;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,2BAAQA,SAAA,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,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAW,EAAA,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,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAW,EAAA,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,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-NSK344BJ.js","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"]}