@uisatin/ui 0.0.0-stage → 0.1.0

package/chunk-3DINAQLL.js

@@ -0,0 +1,153 @@
+import { KbdGroup } from './chunk-BKZBWPUH.js';
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var menuSurfaceClass = cn(
+  "rounded-xl border border-border-subtle bg-bg-popover",
+  "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
+);
+var menuGroupClass = "flex flex-col gap-1 not-last:after:block not-last:after:h-px not-last:after:bg-bg-muted";
+var menuGroupLabelClass = "flex h-6 items-center px-3 text-xs leading-3 tracking-normal text-text-subtle";
+function DropdownMenu({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  container,
+  onFocusOutside,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { container, children: /* @__PURE__ */ jsx(
+      DropdownMenu$1.Content,
+      {
+        "data-slot": "dropdown-menu",
+        "aria-label": props["aria-label"],
+        side,
+        align,
+        sideOffset,
+        collisionPadding: 8,
+        onFocusOutside,
+        className: cn(
+          "pointer-events-auto z-50 flex w-[255px] max-w-[520px] flex-col gap-1 overflow-x-clip overflow-y-auto p-1",
+          "max-h-(--radix-dropdown-menu-content-available-height)",
+          menuSurfaceClass,
+          "origin-(--radix-dropdown-menu-content-transform-origin) outline-none",
+          "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          className
+        ),
+        children
+      }
+    ) })
+  ] });
+}
+function DropdownMenuGroup({ label, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.Group,
+    {
+      "data-slot": "dropdown-group",
+      className: cn(menuGroupClass, className),
+      ...props,
+      children: [
+        label ? /* @__PURE__ */ jsx(DropdownMenu$1.Label, { className: menuGroupLabelClass, children: label }) : null,
+        children
+      ]
+    }
+  );
+}
+var menuItemClass = cn(
+  "flex min-h-menu-row w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-left outline-none select-none focus-visible:ring-0",
+  "transition-colors duration-(--duration-fast) ease-(--ease-out)",
+  "data-[highlighted]:bg-bg-selected data-[force=hover]:bg-bg-selected data-[selected]:bg-bg-selected",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+);
+function MenuItemContent({
+  label,
+  description,
+  icon,
+  iconSize = 16,
+  selected = false,
+  layout = "stacked",
+  shortcut,
+  renderLabel = (l) => l
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "grid shrink-0 place-items-center text-text-muted",
+          iconSize === 20 ? "size-5 [&_svg]:size-5 [&_svg]:[stroke-width:1.5]" : "size-4 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]"
+        ),
+        children: icon
+      }
+    ) : null,
+    layout === "stacked" ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-base leading-5 font-medium text-text-default", children: renderLabel(label) }),
+      description ? /* @__PURE__ */ jsx("span", { className: "text-sm leading-[18px] text-text-muted", children: description }) : null
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-base leading-5 font-medium whitespace-nowrap text-text-default", children: renderLabel(label) }),
+      description ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-text-muted", children: description }) : null
+    ] }),
+    shortcut && /* @__PURE__ */ jsx(KbdGroup, { keys: shortcut, "aria-hidden": true }),
+    selected && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(selected)" }),
+    selected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "text-status-green-fg", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667",
+        stroke: "currentColor",
+        strokeWidth: "1.25",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) })
+  ] });
+}
+function DropdownMenuItem({
+  label,
+  description,
+  icon,
+  iconSize = 16,
+  selected = false,
+  layout = "stacked",
+  shortcut,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-item",
+      "data-selected": selected || void 0,
+      textValue: label,
+      className: cn(menuItemClass, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MenuItemContent,
+        {
+          label,
+          description,
+          icon,
+          iconSize,
+          selected,
+          layout,
+          shortcut
+        }
+      )
+    }
+  );
+}
+
+export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass };
+//# sourceMappingURL=chunk-3DINAQLL.js.map
+//# sourceMappingURL=chunk-3DINAQLL.js.map

package/chunk-3DINAQLL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dropdown.tsx"],"names":["DropdownPrimitive"],"mappings":"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","file":"chunk-3DINAQLL.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { DropdownMenu as DropdownPrimitive } from 'radix-ui'\nimport { cn } from '../lib/utils'\nimport { KbdGroup } from './kbd'\n\n/**\n * DropdownMenu, 1:1 with the uiKit `DropdownMenu` (654:19150) and `DropdownMenu/Item`\n * (653:19165) sets. A 255px popover surface (max 520), 4px padding, radius-xl,\n * border/subtle, the shadcn `sm` shadow. Items are at least 32px high, 12px in, 6px top and\n * bottom, radius-lg, with an 8px gap between a 16px leading icon (text/muted), the content and\n * a trailing check (status green) when selected. An optional `shortcut` shows its keys (Kbd sm)\n * before the check. Hover, keyboard highlight and selected fill\n * bg/selected.\n *\n * Groups: `DropdownMenuGroup`. Content: a 14px medium label (20px line). `stacked` puts the\n * description under it, 2px apart, at 13px / 18px in text/muted; `inline` puts it on the same\n * baseline 12px after the label, at 13px, truncated. Groups have a 24px header in 12px\n * text/subtle and are 4px apart with a 1px bg/muted rule between them. Items are 4px apart.\n *\n * Built on the Radix DropdownMenu: arrow keys, typeahead, Escape, focus return.\n */\n/** The popover surface menus share: radius-xl, border/subtle, bg/popover, the shadcn `sm` shadow. */\nexport const menuSurfaceClass = cn(\n  'rounded-xl border border-border-subtle bg-bg-popover',\n  '[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]',\n)\n/** A group of rows, with a 1px bg/muted rule under every group but the last. */\nexport const menuGroupClass = 'flex flex-col gap-1 not-last:after:block not-last:after:h-px not-last:after:bg-bg-muted'\n/** The 24px group header in 12px text/subtle. */\nexport const menuGroupLabelClass = 'flex h-6 items-center px-3 text-xs leading-3 tracking-normal text-text-subtle'\n\nexport interface DropdownMenuProps {\n  /** The element that opens the menu. Rendered with `asChild`, so pass a Button. */\n  trigger: React.ReactNode\n  /** `DropdownMenuItem`s, optionally inside `DropdownMenuGroup`s. */\n  children: React.ReactNode\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Modal menus block the rest of the page while open. */\n  modal?: boolean\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  align?: 'start' | 'center' | 'end'\n  sideOffset?: number\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  /** Accessible name for the menu, when the trigger's text doesn't say enough. */\n  'aria-label'?: string\n  /** Focus moved outside a non-modal menu; call `preventDefault()` to keep it open. */\n  onFocusOutside?: (event: Event) => void\n  className?: string\n}\n\nexport function DropdownMenu({\n  trigger,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = true,\n  side = 'bottom',\n  align = 'start',\n  sideOffset = 8,\n  container,\n  onFocusOutside,\n  className,\n  ...props\n}: DropdownMenuProps) {\n  return (\n    <DropdownPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>\n      <DropdownPrimitive.Trigger asChild>{trigger}</DropdownPrimitive.Trigger>\n      <DropdownPrimitive.Portal container={container}>\n        <DropdownPrimitive.Content\n          data-slot=\"dropdown-menu\"\n          aria-label={props['aria-label']}\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          collisionPadding={8}\n          onFocusOutside={onFocusOutside}\n          className={cn(\n            'pointer-events-auto z-50 flex w-[255px] max-w-[520px] flex-col gap-1 overflow-x-clip overflow-y-auto p-1',\n            'max-h-(--radix-dropdown-menu-content-available-height)',\n            menuSurfaceClass,\n            'origin-(--radix-dropdown-menu-content-transform-origin) outline-none',\n            'data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]',\n            className,\n          )}\n        >\n          {children}\n        </DropdownPrimitive.Content>\n      </DropdownPrimitive.Portal>\n    </DropdownPrimitive.Root>\n  )\n}\n\n/* ------------------------------------------------------------------------------------------ */\n\nexport interface DropdownMenuGroupProps extends React.ComponentProps<typeof DropdownPrimitive.Group> {\n  /** The 24px group header. */\n  label?: React.ReactNode\n}\n\n/** A titled group of items (Figma `_dropdown/group`). Groups get a rule between them. */\nexport function DropdownMenuGroup({ label, children, className, ...props }: DropdownMenuGroupProps) {\n  return (\n    <DropdownPrimitive.Group\n      data-slot=\"dropdown-group\"\n      // Figma's divider lives inside the group, 8px under the last item; the last group has none.\n      className={cn(menuGroupClass, className)}\n      {...props}\n    >\n      {label ? (\n        <DropdownPrimitive.Label className={menuGroupLabelClass}>\n          {label}\n        </DropdownPrimitive.Label>\n      ) : null}\n      {children}\n    </DropdownPrimitive.Group>\n  )\n}\n\n/* ------------------------------------------------------------------------------------------ */\n\n/** The row skin every menu shares: Dropdown, Select, Combobox and the Command menu. */\nexport const menuItemClass = cn(\n  'flex min-h-menu-row w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-left outline-none select-none focus-visible:ring-0',\n  'transition-colors duration-(--duration-fast) ease-(--ease-out)',\n  'data-[highlighted]:bg-bg-selected data-[force=hover]:bg-bg-selected data-[selected]:bg-bg-selected',\n  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n)\n\nexport interface MenuItemContentProps {\n  label: React.ReactNode\n  description?: React.ReactNode\n  /** Leading icon. 16px by default; stacked two-line items may use 20px (`iconSize={20}`). */\n  icon?: React.ReactNode\n  iconSize?: 16 | 20\n  /** Marks the current value: a trailing check. */\n  selected?: boolean\n  layout?: 'stacked' | 'inline'\n  /** Keys that run the item, e.g. \"⌘N\", shown on the right (Figma's `showShortcut`). */\n  shortcut?: string\n  /** Wraps the label, e.g. in Radix Select's `ItemText`. */\n  renderLabel?: (label: React.ReactNode) => React.ReactNode\n}\n\n/** What sits inside a menu row: icon, label and description, then shortcut and check. */\nexport function MenuItemContent({\n  label,\n  description,\n  icon,\n  iconSize = 16,\n  selected = false,\n  layout = 'stacked',\n  shortcut,\n  renderLabel = (l) => l,\n}: MenuItemContentProps) {\n  return (\n    <>\n      {icon ? (\n        <span\n          className={cn(\n            'grid shrink-0 place-items-center text-text-muted',\n            iconSize === 20 ? 'size-5 [&_svg]:size-5 [&_svg]:[stroke-width:1.5]' : 'size-4 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]',\n          )}\n        >\n          {icon}\n        </span>\n      ) : null}\n\n      {layout === 'stacked' ? (\n        <span className=\"flex min-w-0 flex-1 flex-col justify-center gap-0.5\">\n          <span className=\"text-base leading-5 font-medium text-text-default\">{renderLabel(label)}</span>\n          {description ? <span className=\"text-sm leading-[18px] text-text-muted\">{description}</span> : null}\n        </span>\n      ) : (\n        <span className=\"flex min-w-0 flex-1 items-baseline gap-3\">\n          <span className=\"shrink-0 text-base leading-5 font-medium whitespace-nowrap text-text-default\">{renderLabel(label)}</span>\n          {description ? (\n            <span className=\"min-w-0 flex-1 truncate text-sm text-text-muted\">{description}</span>\n          ) : null}\n        </span>\n      )}\n\n      {shortcut && <KbdGroup keys={shortcut} aria-hidden />}\n      {selected && <span className=\"sr-only\">(selected)</span>}\n      {selected && (\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden className=\"text-status-green-fg\">\n          <path\n            d=\"M3.33333 8.66667L6 11.3333L12.6667 4.66667\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.25\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </>\n  )\n}\n\nexport interface DropdownMenuItemProps\n  extends Omit<React.ComponentProps<typeof DropdownPrimitive.Item>, 'children'>,\n    Omit<MenuItemContentProps, 'label' | 'renderLabel'> {\n  label: string\n}\n\nexport function DropdownMenuItem({\n  label,\n  description,\n  icon,\n  iconSize = 16,\n  selected = false,\n  layout = 'stacked',\n  shortcut,\n  className,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownPrimitive.Item\n      data-slot=\"dropdown-item\"\n      data-selected={selected || undefined}\n      textValue={label}\n      className={cn(menuItemClass, className)}\n      {...props}\n    >\n      <MenuItemContent\n        label={label}\n        description={description}\n        icon={icon}\n        iconSize={iconSize}\n        selected={selected}\n        layout={layout}\n        shortcut={shortcut}\n      />\n    </DropdownPrimitive.Item>\n  )\n}\n"]}

package/chunk-3ERGAHKA.js

@@ -0,0 +1,179 @@
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var chipVariants = cva(
+  [
+    "group/chip relative inline-flex shrink-0 items-center rounded-pill whitespace-nowrap select-none",
+    "text-sm leading-(--text-sm--line-height) font-medium",
+    "transition-[background-color,border-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+    "focus-visible:outline-none",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:[box-shadow:none]"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: "border",
+        subtle: ""
+      },
+      size: {
+        md: "h-control-height",
+        sm: "h-control-height-xs"
+      },
+      neutral: { true: "text-text-default", false: "text-tone-fg" }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        neutral: true,
+        className: [
+          "border-border-default bg-bg-popover [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "satin-hover:border-border-strong satin-hover:bg-bg-hover",
+          "satin-focus:border-border-strong satin-focus:bg-bg-popover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "has-[button:focus-visible]:border-border-strong has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "satin-pressed:border-border-strong satin-pressed:bg-border-input satin-pressed:[box-shadow:none]",
+          "data-[disabled]:border-border-strong"
+        ]
+      },
+      {
+        variant: "outline",
+        neutral: false,
+        className: [
+          "border-tone-border bg-tone-bg [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "satin-hover:bg-tone-border",
+          "satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "satin-pressed:bg-tone-border satin-pressed:[box-shadow:none]"
+        ]
+      },
+      {
+        variant: "subtle",
+        neutral: true,
+        className: [
+          "bg-action-secondary-bg",
+          "satin-hover:bg-border-input",
+          "satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "satin-pressed:bg-border-input satin-pressed:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
+        ]
+      },
+      {
+        variant: "subtle",
+        neutral: false,
+        className: [
+          "bg-tone-bg",
+          "satin-hover:bg-tone-border",
+          "satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "satin-pressed:bg-tone-border"
+        ]
+      }
+    ],
+    defaultVariants: { variant: "subtle", size: "md", neutral: true }
+  }
+);
+function CloseGlyph({ size }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.50551 11.4951L8.0006 8M8.0006 8L11.4957 4.50491M8.0006 8L4.50551 4.50491M8.0006 8L11.4957 11.4951",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function Chip({
+  className,
+  variant = "subtle",
+  size = "md",
+  tone = "neutral",
+  dot = false,
+  avatar,
+  onRemove,
+  removeLabel,
+  disabled = false,
+  children,
+  type,
+  ...props
+}) {
+  const neutral = tone === "neutral";
+  const iconSize = size === "sm" ? 14 : 16;
+  const classes = cn(chipVariants({ variant, size, neutral }), className);
+  const label = typeof children === "string" ? children : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot && // Dot slot: 4px in, a 16px box with an 8px status dot (status/green fg in Figma).
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-dot", className: "-mr-1 flex shrink-0 items-center pl-1", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "grid size-4 place-items-center", children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-status-green-fg" }) }) }),
+    avatar && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "chip-avatar",
+        className: "-mr-1 flex shrink-0 items-center pl-1 [&>*]:size-4 [&>*]:rounded-full",
+        children: avatar
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-label", className: cn("flex shrink-0 items-center px-2", onRemove && "-mr-1"), children }),
+    onRemove && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center pr-1", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "chip-remove",
+        disabled,
+        "aria-label": removeLabel ?? (label ? `Remove ${label}` : "Remove"),
+        onClick: onRemove,
+        className: cn(
+          "grid shrink-0 place-items-center rounded-pill focus-visible:outline-none",
+          neutral ? "text-text-muted" : "text-tone-fg"
+        ),
+        children: /* @__PURE__ */ jsx(CloseGlyph, { size: iconSize })
+      }
+    ) })
+  ] });
+  if (onRemove) {
+    const { "data-force": force } = props;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "chip",
+        "data-tone": tone,
+        "data-force": force,
+        "data-disabled": disabled || void 0,
+        className: classes,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-slot": "chip",
+      "data-tone": tone,
+      "data-disabled": disabled || void 0,
+      type: type ?? "button",
+      disabled,
+      className: classes,
+      ...props,
+      children: content
+    }
+  );
+}
+function ChipAvatar({ initials, tone, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-tone": tone,
+      "aria-hidden": true,
+      className: cn(
+        "grid size-4 shrink-0 place-items-center overflow-hidden rounded-full bg-tone-bg text-[7px] leading-2 font-semibold text-tone-fg",
+        className
+      ),
+      children: initials
+    }
+  );
+}
+
+export { Chip, ChipAvatar, chipVariants };
+//# sourceMappingURL=chunk-3ERGAHKA.js.map
+//# sourceMappingURL=chunk-3ERGAHKA.js.map

package/chunk-3ERGAHKA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chip.tsx"],"names":[],"mappings":"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","file":"chunk-3ERGAHKA.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../lib/utils'\nimport type { BadgeTone } from './badge'\n\n/**\n * Chip, 1:1 with the uiKit `Chip` set (3206:79959): Subtle or Outline, md (28, control-height)\n * or sm (24, control-height-xs), eight tones like Badge, an optional dot, avatar and remove\n * button. Label medium 13/19.5, 8px side padding; the dot, avatar and close slots overlap\n * the label padding by 4px, as in Figma.\n *\n * Neutral is its own look: Outline is a popover surface with a border-default edge and an\n * xs drop shadow, Subtle is the secondary action fill. Every other tone uses the `tone/*`\n * tokens (repointed by `data-tone`): tone-bg fill, tone-border edge, tone-fg text; hover and\n * pressed fill with tone-border.\n *\n * States (satin-hover / satin-focus / satin-pressed, or `data-force`):\n * - hover: neutral outline bg-hover + border-strong; neutral subtle border-input fill.\n * - pressed: neutral border-input fill with a border-strong edge, no drop shadow.\n * - focus: the 2px action/focus-ring spread, border-strong edge, no drop shadow.\n * - disabled: 50% opacity, no drop shadow.\n * Subtle pressed's 1px edge is an inset shadow so the chip doesn't grow by 2px.\n *\n * With `onRemove` the chip is a `span` holding a real remove button (a button can't hold\n * a button); without it, the chip itself is the button.\n */\nconst chipVariants = cva(\n  [\n    'group/chip relative inline-flex shrink-0 items-center rounded-pill whitespace-nowrap select-none',\n    'text-sm leading-(--text-sm--line-height) font-medium',\n    'transition-[background-color,border-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n    'focus-visible:outline-none',\n    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:[box-shadow:none]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: 'border',\n        subtle: '',\n      },\n      size: {\n        md: 'h-control-height',\n        sm: 'h-control-height-xs',\n      },\n      neutral: { true: 'text-text-default', false: 'text-tone-fg' },\n    },\n    compoundVariants: [\n      {\n        variant: 'outline',\n        neutral: true,\n        className: [\n          'border-border-default bg-bg-popover [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]',\n          'satin-hover:border-border-strong satin-hover:bg-bg-hover',\n          'satin-focus:border-border-strong satin-focus:bg-bg-popover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'has-[button:focus-visible]:border-border-strong has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'satin-pressed:border-border-strong satin-pressed:bg-border-input satin-pressed:[box-shadow:none]',\n          'data-[disabled]:border-border-strong',\n        ],\n      },\n      {\n        variant: 'outline',\n        neutral: false,\n        className: [\n          'border-tone-border bg-tone-bg [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]',\n          'satin-hover:bg-tone-border',\n          'satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'satin-pressed:bg-tone-border satin-pressed:[box-shadow:none]',\n        ],\n      },\n      {\n        variant: 'subtle',\n        neutral: true,\n        className: [\n          'bg-action-secondary-bg',\n          'satin-hover:bg-border-input',\n          'satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'satin-pressed:bg-border-input satin-pressed:[box-shadow:inset_0_0_0_1px_var(--border-strong)]',\n        ],\n      },\n      {\n        variant: 'subtle',\n        neutral: false,\n        className: [\n          'bg-tone-bg',\n          'satin-hover:bg-tone-border',\n          'satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'satin-pressed:bg-tone-border',\n        ],\n      },\n    ],\n    defaultVariants: { variant: 'subtle', size: 'md', neutral: true },\n  },\n)\n\ntype ChipBaseProps = Omit<VariantProps<typeof chipVariants>, 'neutral'> & {\n  tone?: BadgeTone\n  /** A status dot before the label. */\n  dot?: boolean\n  /** A 16px avatar before the label (an initials avatar or an image). */\n  avatar?: React.ReactNode\n  /** Shows the close button; called when it's clicked. */\n  onRemove?: () => void\n  /** Accessible name of the remove button. Defaults to \"Remove <label>\". */\n  removeLabel?: string\n  disabled?: boolean\n  children?: React.ReactNode\n  className?: string\n}\n\nexport type ChipProps = ChipBaseProps &\n  Omit<React.ComponentProps<'button'>, keyof ChipBaseProps> & {\n    'data-force'?: 'hover' | 'focus' | 'pressed'\n  }\n\n/** The Figma close glyph, 16 at 1.25 (14 at 1.09 on sm). */\nfunction CloseGlyph({ size }: { size: 14 | 16 }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden>\n      <path\n        d=\"M4.50551 11.4951L8.0006 8M8.0006 8L11.4957 4.50491M8.0006 8L4.50551 4.50491M8.0006 8L11.4957 11.4951\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function Chip({\n  className,\n  variant = 'subtle',\n  size = 'md',\n  tone = 'neutral',\n  dot = false,\n  avatar,\n  onRemove,\n  removeLabel,\n  disabled = false,\n  children,\n  type,\n  ...props\n}: ChipProps) {\n  const neutral = tone === 'neutral'\n  const iconSize = size === 'sm' ? 14 : 16\n  const classes = cn(chipVariants({ variant, size, neutral }), className)\n  const label = typeof children === 'string' ? children : undefined\n\n  const content = (\n    <>\n      {dot && (\n        // Dot slot: 4px in, a 16px box with an 8px status dot (status/green fg in Figma).\n        <span data-slot=\"chip-dot\" className=\"-mr-1 flex shrink-0 items-center pl-1\" aria-hidden>\n          <span className=\"grid size-4 place-items-center\">\n            <span className=\"size-2 rounded-full bg-status-green-fg\" />\n          </span>\n        </span>\n      )}\n      {avatar && (\n        <span\n          data-slot=\"chip-avatar\"\n          className=\"-mr-1 flex shrink-0 items-center pl-1 [&>*]:size-4 [&>*]:rounded-full\"\n        >\n          {avatar}\n        </span>\n      )}\n      <span data-slot=\"chip-label\" className={cn('flex shrink-0 items-center px-2', onRemove && '-mr-1')}>\n        {children}\n      </span>\n      {onRemove && (\n        <span className=\"flex shrink-0 items-center pr-1\">\n          <button\n            type=\"button\"\n            data-slot=\"chip-remove\"\n            disabled={disabled}\n            aria-label={removeLabel ?? (label ? `Remove ${label}` : 'Remove')}\n            onClick={onRemove}\n            className={cn(\n              'grid shrink-0 place-items-center rounded-pill focus-visible:outline-none',\n              neutral ? 'text-text-muted' : 'text-tone-fg',\n            )}\n          >\n            <CloseGlyph size={iconSize} />\n          </button>\n        </span>\n      )}\n    </>\n  )\n\n  if (onRemove) {\n    const { 'data-force': force } = props\n    return (\n      <span\n        data-slot=\"chip\"\n        data-tone={tone}\n        data-force={force}\n        data-disabled={disabled || undefined}\n        className={classes}\n      >\n        {content}\n      </span>\n    )\n  }\n\n  return (\n    <button\n      data-slot=\"chip\"\n      data-tone={tone}\n      data-disabled={disabled || undefined}\n      type={type ?? 'button'}\n      disabled={disabled}\n      className={classes}\n      {...props}\n    >\n      {content}\n    </button>\n  )\n}\n\n/** The 16px initials avatar from Figma (Avatar 992:20199 at size 16): tone-bg, 7px semibold tone-fg. */\nexport function ChipAvatar({ initials, tone, className }: { initials: string; tone?: BadgeTone; className?: string }) {\n  return (\n    <span\n      data-tone={tone}\n      aria-hidden\n      className={cn(\n        'grid size-4 shrink-0 place-items-center overflow-hidden rounded-full bg-tone-bg text-[7px] leading-2 font-semibold text-tone-fg',\n        className,\n      )}\n    >\n      {initials}\n    </span>\n  )\n}\n\nexport { chipVariants }\n"]}

package/chunk-6C7CGJX2.js

@@ -0,0 +1,86 @@
+import { HoverCard } from './chunk-HRKPV66B.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SourceIcon({ source }) {
+  if (source.icon) return /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center overflow-clip rounded-xs [&>*]:size-4", children: source.icon });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "grid size-4 shrink-0 place-items-center rounded-xs bg-bg-muted text-[10px] leading-none font-semibold text-text-muted", children: source.title.charAt(0).toUpperCase() });
+}
+function Citation({ index, source, className }) {
+  const chip = /* @__PURE__ */ jsx(
+    "a",
+    {
+      "data-slot": "citation",
+      href: source.href,
+      target: source.href ? "_blank" : void 0,
+      rel: source.href ? "noreferrer" : void 0,
+      "aria-label": `Source ${index}: ${source.title}`,
+      className: cn(
+        "mx-0.5 inline-grid h-4 min-w-4 translate-y-[-1px] place-items-center rounded-sm bg-bg-muted px-1 align-middle text-xs leading-none font-medium text-text-default no-underline tabular-nums outline-none",
+        "transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+        "hover:bg-bg-hover hover:[box-shadow:inset_0_0_0_1px_var(--border-strong)] focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className
+      ),
+      children: index
+    }
+  );
+  return /* @__PURE__ */ jsxs(HoverCard, { trigger: chip, side: "top", align: "center", className: "w-[300px] gap-2 p-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs text-text-muted", children: [
+      /* @__PURE__ */ jsx(SourceIcon, { source }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: source.origin })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-default", children: source.title }),
+    source.quote && /* @__PURE__ */ jsxs("span", { className: "text-body text-text-muted", children: [
+      "\u201C",
+      source.quote,
+      "\u201D"
+    ] })
+  ] });
+}
+function Sources({ sources, defaultOpen = false, className }) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const listId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sources", className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen(!open),
+        className: cn(
+          "inline-flex h-8 w-fit items-center gap-2 rounded-pill border border-border-default py-1 pr-3 pl-1.5 text-sm font-medium text-text-default outline-none",
+          "transition-[border-color,background-color] duration-(--duration-fast) ease-(--ease-out)",
+          "hover:border-border-strong focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          open && "bg-bg-hover"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex items-center gap-0.5", children: sources.slice(0, 3).map((s, i) => /* @__PURE__ */ jsx(SourceIcon, { source: s }, i)) }),
+          sources.length,
+          " ",
+          sources.length === 1 ? "source" : "sources"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: listId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-0.5", children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: s.href,
+        target: s.href ? "_blank" : void 0,
+        rel: s.href ? "noreferrer" : void 0,
+        className: "flex items-center gap-3 rounded-lg p-2 text-sm no-underline outline-none transition-colors duration-(--duration-fast) ease-(--ease-out) hover:bg-bg-hover focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid h-4 min-w-4 place-items-center rounded-sm bg-bg-muted px-1 text-xs leading-none font-medium text-text-default tabular-nums", children: i + 1 }),
+          /* @__PURE__ */ jsx(SourceIcon, { source: s }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-default", children: s.title }),
+          s.origin && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-muted", children: s.origin })
+        ]
+      }
+    ) }, i)) }) }) })
+  ] });
+}
+
+export { Citation, Sources };
+//# sourceMappingURL=chunk-6C7CGJX2.js.map
+//# sourceMappingURL=chunk-6C7CGJX2.js.map

package/chunk-6C7CGJX2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/citations.tsx"],"names":[],"mappings":"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","file":"chunk-6C7CGJX2.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\nimport { HoverCard } from './hover-card'\n\n/**\n * Citations and sources, 1:1 with the uiKit design (🆕 citations): where an answer comes from.\n *\n * - `Citation`: a numbered chip right after the claim — 16 high, text/xs medium on bg/muted,\n *   radius-sm; hover bg/hover with a border/strong ring. Resting on it (or focusing it) opens a\n *   HoverCard with the source: logo and where it lives, the title, and the quoted passage.\n * - `Sources`: under the message, a pill with the sources' logos stacked and \"3 sources\"; it\n *   opens into the list — number, logo, title, where it lives — each row a link.\n *\n * A source's `icon` is its logo (an app's or a site's favicon); without one it gets a tile with\n * its first letter, so a missing favicon never leaves a hole.\n */\nexport interface CitationSource {\n  title: string\n  /** Where it comes from: the app or site, \"Notion\" or \"freshfarm.pl\". */\n  origin?: string\n  href?: string\n  /** A 16px logo or favicon. */\n  icon?: React.ReactNode\n  /** The passage the answer relies on, shown in the preview. */\n  quote?: string\n}\n\nfunction SourceIcon({ source }: { source: CitationSource }) {\n  if (source.icon) return <span className=\"grid size-4 shrink-0 place-items-center overflow-clip rounded-xs [&>*]:size-4\">{source.icon}</span>\n  return (\n    <span aria-hidden className=\"grid size-4 shrink-0 place-items-center rounded-xs bg-bg-muted text-[10px] leading-none font-semibold text-text-muted\">\n      {source.title.charAt(0).toUpperCase()}\n    </span>\n  )\n}\n\nexport interface CitationProps {\n  /** 1-based, as in the Sources list. */\n  index: number\n  source: CitationSource\n  className?: string\n}\n\nexport function Citation({ index, source, className }: CitationProps) {\n  const chip = (\n    <a\n      data-slot=\"citation\"\n      href={source.href}\n      target={source.href ? '_blank' : undefined}\n      rel={source.href ? 'noreferrer' : undefined}\n      aria-label={`Source ${index}: ${source.title}`}\n      className={cn(\n        'mx-0.5 inline-grid h-4 min-w-4 translate-y-[-1px] place-items-center rounded-sm bg-bg-muted px-1 align-middle text-xs leading-none font-medium text-text-default no-underline tabular-nums outline-none',\n        'transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n        'hover:bg-bg-hover hover:[box-shadow:inset_0_0_0_1px_var(--border-strong)] focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n        className,\n      )}\n    >\n      {index}\n    </a>\n  )\n  return (\n    <HoverCard trigger={chip} side=\"top\" align=\"center\" className=\"w-[300px] gap-2 p-3\">\n      <span className=\"flex items-center gap-2 text-xs text-text-muted\">\n        <SourceIcon source={source} />\n        <span className=\"truncate\">{source.origin}</span>\n      </span>\n      <span className=\"text-sm font-medium text-text-default\">{source.title}</span>\n      {source.quote && <span className=\"text-body text-text-muted\">“{source.quote}”</span>}\n    </HoverCard>\n  )\n}\n\nexport interface SourcesProps {\n  sources: CitationSource[]\n  /** Start with the list open. */\n  defaultOpen?: boolean\n  className?: string\n}\n\nexport function Sources({ sources, defaultOpen = false, className }: SourcesProps) {\n  const [open, setOpen] = React.useState(defaultOpen)\n  const listId = React.useId()\n  return (\n    <div data-slot=\"sources\" className={cn('flex flex-col gap-2', className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        aria-controls={listId}\n        onClick={() => setOpen(!open)}\n        className={cn(\n          'inline-flex h-8 w-fit items-center gap-2 rounded-pill border border-border-default py-1 pr-3 pl-1.5 text-sm font-medium text-text-default outline-none',\n          'transition-[border-color,background-color] duration-(--duration-fast) ease-(--ease-out)',\n          'hover:border-border-strong focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          open && 'bg-bg-hover',\n        )}\n      >\n        <span className=\"flex items-center gap-0.5\">\n          {sources.slice(0, 3).map((s, i) => (\n            <SourceIcon key={i} source={s} />\n          ))}\n        </span>\n        {sources.length} {sources.length === 1 ? 'source' : 'sources'}\n      </button>\n      <div id={listId} data-state={open ? 'open' : 'closed'} className=\"satin-expand\">\n        <div>\n          <ol className=\"flex flex-col gap-0.5\">\n            {sources.map((s, i) => (\n              <li key={i}>\n                <a\n                  href={s.href}\n                  target={s.href ? '_blank' : undefined}\n                  rel={s.href ? 'noreferrer' : undefined}\n                  className=\"flex items-center gap-3 rounded-lg p-2 text-sm no-underline outline-none transition-colors duration-(--duration-fast) ease-(--ease-out) hover:bg-bg-hover focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]\"\n                >\n                  <span className=\"grid h-4 min-w-4 place-items-center rounded-sm bg-bg-muted px-1 text-xs leading-none font-medium text-text-default tabular-nums\">{i + 1}</span>\n                  <SourceIcon source={s} />\n                  <span className=\"min-w-0 flex-1 truncate text-text-default\">{s.title}</span>\n                  {s.origin && <span className=\"shrink-0 text-text-muted\">{s.origin}</span>}\n                </a>\n              </li>\n            ))}\n          </ol>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}