@photon-ai/pho-ui 1.1.0 → 1.2.1

package/dist/components/select.js

@@ -1,69 +1,113 @@
 "use client";
 import { t as a } from "../chunks/cn-DTiB6ek_.js";
-import "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Select as r } from "@base-ui/react/select";
-var i = r.Root, s = r.Value, p = r.Portal, l = r.List, c = r.Group, u = r.ItemText;
-function d({ className: e, ...t }) {
-  return /* @__PURE__ */ o(r.Trigger, {
-    className: a("bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 transition select-none ring-inset", "data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:text-pho-secondary [&_svg]:size-4", e),
-    ...t
+import { r as p } from "../chunks/use-press-pulse-8iorQPsh.js";
+import { t as u } from "../chunks/IconCheck-D2WuculQ.js";
+import { createContext as m, useContext as g } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { motion as h } from "motion/react";
+import { Select as o } from "@base-ui/react/select";
+var c = m(!1), f = 0.99, y = {
+  type: "spring",
+  stiffness: 1100,
+  damping: 40,
+  mass: 0.04
+};
+function b({ multiple: e = !1, ...t }) {
+  return /* @__PURE__ */ r(c.Provider, {
+    value: !!e,
+    children: /* @__PURE__ */ r(o.Root, {
+      multiple: e,
+      ...t
+    })
   });
 }
-function m({ className: e, ...t }) {
-  return /* @__PURE__ */ o(r.Icon, {
+var x = o.Value, v = o.Portal, I = o.List, N = o.Group, P = a("flex cursor-pointer items-center justify-between gap-2 text-base select-none", "transition-[color,background-color,box-shadow,outline-color] duration-150 ease-out", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:text-pho-secondary [&_svg]:size-4");
+function w({ className: e, disabled: t, variant: n = "default", onPointerDown: s, ...i }) {
+  const l = n === "inline", { motionProps: d } = p({
+    scale: l ? f : 0.98,
+    transition: l ? y : void 0,
+    disabled: !!t
+  });
+  return /* @__PURE__ */ r(o.Trigger, {
+    disabled: t,
+    onPointerDown: s,
+    render: /* @__PURE__ */ r(h.button, { ...d }),
+    className: a(P, l ? "rounded-base min-w-0 bg-transparent focus-visible:outline-none" : a("bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base min-w-44 px-3 py-2 ring-1 ring-inset", "data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1"), e),
+    ...i
+  });
+}
+function S({ className: e, ...t }) {
+  return /* @__PURE__ */ r(o.Icon, {
     className: a("flex shrink-0 items-center", e),
     ...t
   });
 }
-function g({ className: e, sideOffset: t = 6, ...n }) {
-  return /* @__PURE__ */ o(r.Positioner, {
+function _({ className: e, sideOffset: t = 6, align: n = "start", alignItemWithTrigger: s = !1, ...i }) {
+  return /* @__PURE__ */ r(o.Positioner, {
     sideOffset: t,
+    align: n,
+    alignItemWithTrigger: s,
     className: a("z-50 outline-none", e),
-    ...n
+    ...i
   });
 }
-function h({ className: e, ...t }) {
-  return /* @__PURE__ */ o(r.Popup, {
-    className: a("bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", e),
+function z({ className: e, ...t }) {
+  return /* @__PURE__ */ r(o.Popup, {
+    className: a("bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto p-1 ring-1 outline-none ring-inset", "transition-[transform,opacity] duration-[140ms] ease-[cubic-bezier(0.34,1.3,0.64,1)]", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-100 data-[ending-style]:ease-out", e),
     ...t
   });
 }
-function y({ className: e, ...t }) {
-  return /* @__PURE__ */ o(r.Item, {
-    className: a("text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50", e),
+function E({ className: e, ...t }) {
+  return /* @__PURE__ */ r(o.Item, {
+    className: a("group/pho-item text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50", e),
     ...t
   });
 }
-function f({ className: e, ...t }) {
-  return /* @__PURE__ */ o(r.ItemIndicator, {
-    className: a("text-pho-brand col-start-1 flex items-center [&>svg]:size-4", e),
+function G({ className: e, ...t }) {
+  return /* @__PURE__ */ r(o.ItemText, {
+    className: a("col-start-2 min-w-0", e),
     ...t
   });
 }
-function x({ className: e, ...t }) {
-  return /* @__PURE__ */ o(r.GroupLabel, {
+function L({ className: e, children: t, ...n }) {
+  const s = g(c), i = t ?? /* @__PURE__ */ r(u, {});
+  return s ? /* @__PURE__ */ r("span", {
+    "aria-hidden": !0,
+    className: a("col-start-1 flex size-4 shrink-0 items-center justify-center rounded-sm ring-1 ring-inset", "bg-pho-primary ring-pho-primary text-pho-on-brand", "transition-[background-color,box-shadow,color] duration-150 ease-out", "group-data-[selected]/pho-item:bg-pho-brand-solid group-data-[selected]/pho-item:ring-transparent"),
+    children: /* @__PURE__ */ r(o.ItemIndicator, {
+      className: a("flex items-center justify-center [&>svg]:size-3", "transition-[transform,opacity] duration-150 ease-out", "data-[starting-style]:scale-50 data-[starting-style]:opacity-0", "data-[ending-style]:scale-50 data-[ending-style]:opacity-0", e),
+      ...n,
+      children: i
+    })
+  }) : /* @__PURE__ */ r(o.ItemIndicator, {
+    className: a("text-pho-brand col-start-1 flex size-4 items-center justify-center [&>svg]:size-4", e),
+    ...n,
+    children: i
+  });
+}
+function R({ className: e, ...t }) {
+  return /* @__PURE__ */ r(o.GroupLabel, {
     className: a("text-pho-secondary px-2.5 py-1.5 text-xs font-medium", e),
     ...t
   });
 }
-var N = {
-  Root: i,
-  Trigger: d,
-  Value: s,
-  Icon: m,
-  Portal: p,
-  Positioner: g,
-  Popup: h,
-  List: l,
-  Item: y,
-  ItemText: u,
-  ItemIndicator: f,
-  Group: c,
-  GroupLabel: x
+var M = {
+  Root: b,
+  Trigger: w,
+  Value: x,
+  Icon: S,
+  Portal: v,
+  Positioner: _,
+  Popup: z,
+  List: I,
+  Item: E,
+  ItemText: G,
+  ItemIndicator: L,
+  Group: N,
+  GroupLabel: R
 };
 export {
-  N as Select
+  M as Select
 };
 
 //# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Root = BaseSelect.Root;\nconst Value = BaseSelect.Value;\nconst Portal = BaseSelect.Portal;\nconst List = BaseSelect.List;\nconst Group = BaseSelect.Group;\nconst ItemText = BaseSelect.ItemText;\n\nfunction Trigger({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.Trigger>) {\n  return (\n    <BaseSelect.Trigger\n      className={cn(\n        // Flat field surface — shadows are reserved for floating layers;\n        // the 15% ring-pho-primary hairline is the input edge.\n        \"bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 transition select-none ring-inset\",\n        \"data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        \"[&_svg]:text-pho-secondary [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>) {\n  return (\n    <BaseSelect.Icon\n      className={cn(\"flex shrink-0 items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseSelect.Positioner>) {\n  return (\n    <BaseSelect.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>) {\n  return (\n    <BaseSelect.Popup\n      className={cn(\n        // Floating layer: keeps its elevation shadow, edged with the site\n        // hairline (ring-pho-secondary, #eee/#202020).\n        \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>) {\n  return (\n    <BaseSelect.Item\n      className={cn(\n        \"text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none\",\n        // Secondary at rest; highlight lifts to primary + ghost wash (Menu idiom).\n        \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemIndicator({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.ItemIndicator>) {\n  return (\n    <BaseSelect.ItemIndicator\n      className={cn(\n        \"text-pho-brand col-start-1 flex items-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GroupLabel({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.GroupLabel>) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn(\n        \"text-pho-secondary px-2.5 py-1.5 text-xs font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Select built on Base UI `Select` — pick one option (or several with\n * `multiple`) from a list that opens on click. Pass `items` to `Select.Root`,\n * render an `Item` per option, and show the selection with `Select.Value`. For\n * a short, always-visible set use `RadioGroup`; to filter a long list by typing\n * use `Combobox`.\n */\nexport const Select = {\n  Root,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Positioner,\n  Popup,\n  List,\n  Item,\n  ItemText,\n  ItemIndicator,\n  Group,\n  GroupLabel,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAS,EAAW,QACpB,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAW,EAAW;AAE5B,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAW,SAAZ;AAAA,IACE,WAAW,EAGT,gNACA,4FACA,iEACA,6CACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,qBAAqB,CAAS;AAAA,IAC5C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAGT,sRACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,+KAEA,wGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAc,EACrB,WAAA,GACA,GAAG,EAAA,GAC4C;AAC/C,SACE,gBAAA,EAAC,EAAW,eAAZ;AAAA,IACE,WAAW,EACT,+DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AACF"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select/select.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentProps,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { motion } from \"motion/react\";\nimport { IconCheck } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePressPulse } from \"../../utils/use-press-pulse\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\n/** Lets `ItemIndicator` know whether the Root is in `multiple` mode. */\nconst SelectMultipleContext = createContext(false);\n\nexport type SelectTriggerVariant = \"default\" | \"inline\";\n\n// Inline rides someone else's surface, so its pulse is shallower and snappier\n// than the default field's (0.98 / stiffness 700) — felt, not seen moving.\nconst INLINE_PRESS_SCALE = 0.99;\nconst INLINE_PRESS_SPRING = {\n  type: \"spring\",\n  stiffness: 1100,\n  damping: 40,\n  mass: 0.04,\n} as const;\n\nfunction Root({\n  multiple = false,\n  ...props\n}: ComponentProps<typeof BaseSelect.Root>) {\n  return (\n    <SelectMultipleContext.Provider value={Boolean(multiple)}>\n      <BaseSelect.Root multiple={multiple} {...props} />\n    </SelectMultipleContext.Provider>\n  );\n}\n\nconst Value = BaseSelect.Value;\nconst Portal = BaseSelect.Portal;\nconst List = BaseSelect.List;\nconst Group = BaseSelect.Group;\n\n// Shared by both Trigger variants — layout, easing, disabled, icon tone.\nconst TRIGGER_BASE = cn(\n  \"flex cursor-pointer items-center justify-between gap-2 text-base select-none\",\n  // Colors/stroke ease briefly; transform stays out (Motion owns it).\n  \"transition-[color,background-color,box-shadow,outline-color] duration-150 ease-out\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n  \"[&_svg]:text-pho-secondary [&_svg]:size-4\",\n);\n\nfunction Trigger({\n  className,\n  disabled,\n  variant = \"default\",\n  onPointerDown,\n  ...props\n}: StyledProps<typeof BaseSelect.Trigger> & {\n  /**\n   * `inline` drops the field chrome (ring, background, padding, min-width)\n   * to ride a host surface — an Input Group addon, a toolbar — which then\n   * carries the focus/open treatment. The press pulse moves to the arrow.\n   * @default \"default\"\n   */\n  variant?: SelectTriggerVariant;\n}) {\n  // One-shot press pulse (fires on pointer-down, always completes) — the\n  // Effect Button gesture family adapted for a field-sized control. Both\n  // variants pulse the whole trigger; inline is shallower and quicker.\n  const inline = variant === \"inline\";\n  const { motionProps } = usePressPulse({\n    scale: inline ? INLINE_PRESS_SCALE : 0.98,\n    transition: inline ? INLINE_PRESS_SPRING : undefined,\n    disabled: Boolean(disabled),\n  });\n\n  return (\n    <BaseSelect.Trigger\n      disabled={disabled}\n      onPointerDown={onPointerDown}\n      // Motion owns transform; a caller-supplied `render` in props still wins.\n      render={<motion.button {...motionProps} />}\n      className={cn(\n        TRIGGER_BASE,\n        inline\n          ? // Chrome-free: no surface of its own, text inherits the host\n            // tone, and the host shows focus (e.g. Input Group's shared ring).\n            \"rounded-base min-w-0 bg-transparent focus-visible:outline-none\"\n          : cn(\n              // Flat field surface — shadows are reserved for floating\n              // layers; the 15% ring-pho-primary hairline is the input edge.\n              \"bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base min-w-44 px-3 py-2 ring-1 ring-inset\",\n              \"data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1\",\n            ),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>) {\n  return (\n    <BaseSelect.Icon\n      className={cn(\"flex shrink-0 items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  align = \"start\",\n  alignItemWithTrigger = false,\n  ...props\n}: StyledProps<typeof BaseSelect.Positioner>) {\n  return (\n    <BaseSelect.Positioner\n      sideOffset={sideOffset}\n      align={align}\n      // Base UI defaults to the macOS-style overlap (popup covers the trigger\n      // so the selected item sits on the value text) — disorienting in a page\n      // flow, so Pho drops the list below the field like a menu instead.\n      alignItemWithTrigger={alignItemWithTrigger}\n      className={cn(\"z-50 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>) {\n  return (\n    <BaseSelect.Popup\n      className={cn(\n        // Floating layer: keeps its elevation shadow, edged with the site\n        // hairline (ring-pho-secondary, #eee/#202020).\n        \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto p-1 ring-1 outline-none ring-inset\",\n        // Effect-Button animation family, faster: the open springs from the\n        // trigger edge with a slight overshoot; close is a quick ease-out.\n        \"transition-[transform,opacity] duration-[140ms] ease-[cubic-bezier(0.34,1.3,0.64,1)]\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-100 data-[ending-style]:ease-out\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>) {\n  return (\n    <BaseSelect.Item\n      className={cn(\n        // Fixed 1rem leading column: the selection mark lives there, so every\n        // label starts at the same x whether or not it is selected.\n        // `group/pho-item` feeds the multiple-mode checkbox indicator.\n        \"group/pho-item text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none\",\n        // Secondary at rest; highlight lifts to primary + ghost wash (Menu idiom).\n        \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemText({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.ItemText>) {\n  return (\n    <BaseSelect.ItemText\n      // Pin to column 2: when the single-select indicator unmounts, grid\n      // auto-placement would otherwise pull the label into the mark column.\n      className={cn(\"col-start-2 min-w-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Leading selection mark, mode-aware. Single: a brand check that appears in\n * the reserved column. Multiple: an always-visible checkbox box that fills\n * with the same quiet fill/stroke ease as the standalone Checkbox.\n */\nfunction ItemIndicator({\n  className,\n  children,\n  ...props\n}: StyledProps<typeof BaseSelect.ItemIndicator> & { children?: ReactNode }) {\n  const multiple = useContext(SelectMultipleContext);\n  const mark = children ?? <IconCheck />;\n\n  if (multiple) {\n    return (\n      <span\n        aria-hidden\n        className={cn(\n          \"col-start-1 flex size-4 shrink-0 items-center justify-center rounded-sm ring-1 ring-inset\",\n          \"bg-pho-primary ring-pho-primary text-pho-on-brand\",\n          // Fill + stroke ease together on toggle — Checkbox's transition.\n          \"transition-[background-color,box-shadow,color] duration-150 ease-out\",\n          \"group-data-[selected]/pho-item:bg-pho-brand-solid group-data-[selected]/pho-item:ring-transparent\",\n        )}\n      >\n        <BaseSelect.ItemIndicator\n          className={cn(\n            \"flex items-center justify-center [&>svg]:size-3\",\n            // Glyph pops with the fill; exits on the same path.\n            \"transition-[transform,opacity] duration-150 ease-out\",\n            \"data-[starting-style]:scale-50 data-[starting-style]:opacity-0\",\n            \"data-[ending-style]:scale-50 data-[ending-style]:opacity-0\",\n            className,\n          )}\n          {...props}\n        >\n          {mark}\n        </BaseSelect.ItemIndicator>\n      </span>\n    );\n  }\n\n  return (\n    <BaseSelect.ItemIndicator\n      className={cn(\n        \"text-pho-brand col-start-1 flex size-4 items-center justify-center [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {mark}\n    </BaseSelect.ItemIndicator>\n  );\n}\n\nfunction GroupLabel({\n  className,\n  ...props\n}: StyledProps<typeof BaseSelect.GroupLabel>) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn(\n        \"text-pho-secondary px-2.5 py-1.5 text-xs font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Select built on Base UI `Select` — pick one option (or several with\n * `multiple`) from a list that opens below the trigger on click; the pattern\n * other design systems call a picker. Pass `items` to `Select.Root`, render an\n * `Item` per option, and show the selection with `Select.Value`. For a short,\n * always-visible set use `RadioGroup`; to filter a long list by typing use\n * `Combobox`.\n */\nexport const Select = {\n  Root,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Positioner,\n  Popup,\n  List,\n  Item,\n  ItemText,\n  ItemIndicator,\n  Group,\n  GroupLabel,\n};\n"],"mappings":"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"}

package/dist/index.js

@@ -1,40 +1,53 @@
 "use client";
-import { t as a } from "./chunks/cn-DTiB6ek_.js";
-import { n as o, r as n, t as r } from "./chunks/link-provider-9TFNyDqO.js";
-import { t as T } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { t } from "./chunks/cn-DTiB6ek_.js";
+import { n as o, r, t as S } from "./chunks/link-provider-9TFNyDqO.js";
+import { t as E } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as i, r as _, t as m } from "./chunks/use-press-pulse-8iorQPsh.js";
 import "./utils.js";
-import { a as E, c as S, d as I, f, i as B, l as _, n as p, o as u, r as A, s as O, t as R, u as N } from "./chunks/close-button-Bq9f-H15.js";
-import { a as c, i as D, n as l, r as V, t as L } from "./chunks/sidebar-C5cIhWs1.js";
-import { t as d } from "./chunks/input-BSJGBUbf.js";
-import { n as k, t as M } from "./chunks/dialog-DolPKFGS.js";
-import { n as b, r as v, t as F } from "./chunks/settings-B3ilbRcF.js";
+import { a as e, c as A, d as B, f as O, i as f, l as p, n as u, o as C, r as N, s as D, t as L, u as c } from "./chunks/close-button-Bq9f-H15.js";
+import { a as l, c as U, i as V, n as d, o as G, r as g, s as k, t as F } from "./chunks/sidebar-BCqq58hV.js";
+import { t as b } from "./chunks/input-CxS7ndpb.js";
+import { t as H } from "./chunks/input-group-D6dlma8k.js";
+import { n as x, t as W } from "./chunks/card-9cGnv-VD.js";
+import { n as j, t as q } from "./chunks/dialog-DolPKFGS.js";
+import { i as y, n as z, r as J, t as K } from "./chunks/settings-B0vhLoMi.js";
 export {
-  p as BUTTON_COLORS,
-  A as BUTTON_SHAPES,
-  B as BUTTON_SIZES,
-  E as BUTTON_VARIANTS,
-  u as Button,
-  O as ButtonLink,
-  R as CloseButton,
-  M as Dialog,
-  S as EFFECT_BUTTON_SIZES,
-  _ as EffectButton,
-  N as EffectButtonLink,
-  d as Input,
-  r as LinkProvider,
-  F as SETTINGS_CARD,
-  b as SETTINGS_ROW,
-  L as SIDEBAR_ITEM,
-  l as SIDEBAR_ITEM_ACTIVE,
+  u as BUTTON_COLORS,
+  N as BUTTON_SHAPES,
+  f as BUTTON_SIZES,
+  e as BUTTON_VARIANTS,
+  C as Button,
+  D as ButtonLink,
+  W as CARD_SURFACE,
+  m as CONTROL_PRESS_SCALE,
+  i as CONTROL_PRESS_SPRING,
+  x as Card,
+  L as CloseButton,
+  q as Dialog,
+  A as EFFECT_BUTTON_SIZES,
+  p as EffectButton,
+  c as EffectButtonLink,
+  b as Input,
+  H as InputGroup,
+  S as LinkProvider,
+  K as SETTINGS_CALLOUT,
+  z as SETTINGS_CARD,
+  J as SETTINGS_ROW,
+  F as SIDEBAR_HEADER_INSET,
+  d as SIDEBAR_ITEM,
+  g as SIDEBAR_ITEM_ACTIVE,
   V as SIDEBAR_ITEM_INACTIVE,
-  D as SIDEBAR_ROOT,
-  v as Settings,
-  c as Sidebar,
-  I as buttonVariants,
-  a as cn,
-  f as effectButtonVariants,
-  n as isReactComponent,
-  T as resolveVariant,
-  k as useDialogPending,
-  o as useLinkComponent
+  l as SIDEBAR_ROOT,
+  G as SIDEBAR_ROOT_BASE,
+  k as SIDEBAR_ROOT_INSET,
+  y as Settings,
+  U as Sidebar,
+  B as buttonVariants,
+  t as cn,
+  O as effectButtonVariants,
+  r as isReactComponent,
+  E as resolveVariant,
+  j as useDialogPending,
+  o as useLinkComponent,
+  _ as usePressPulse
 };

package/dist/primitives.js

@@ -41,6 +41,7 @@ import "./primitives/toggle-group.js";
 import "./primitives/toolbar.js";
 import "./primitives/tooltip.js";
 export * from "@base-ui/react/field";
+export * from "@base-ui/react/separator";
 export * from "@base-ui/react/dialog";
 export * from "@base-ui/react/avatar";
 export * from "@base-ui/react/accordion";
@@ -71,7 +72,6 @@ export * from "@base-ui/react/radio";
 export * from "@base-ui/react/radio-group";
 export * from "@base-ui/react/scroll-area";
 export * from "@base-ui/react/select";
-export * from "@base-ui/react/separator";
 export * from "@base-ui/react/slider";
 export * from "@base-ui/react/switch";
 export * from "@base-ui/react/tabs";

package/dist/sections/settings.js

@@ -1,7 +1,8 @@
 "use client";
-import { n as s, r as S, t as e } from "../chunks/settings-B3ilbRcF.js";
+import { i as T, n as s, r as t, t as a } from "../chunks/settings-B0vhLoMi.js";
 export {
-  e as SETTINGS_CARD,
-  s as SETTINGS_ROW,
-  S as Settings
+  a as SETTINGS_CALLOUT,
+  s as SETTINGS_CARD,
+  t as SETTINGS_ROW,
+  T as Settings
 };

package/dist/sections/sidebar.js

@@ -1,9 +1,12 @@
 "use client";
-import { a as E, i as a, n as s, r as A, t as T } from "../chunks/sidebar-C5cIhWs1.js";
+import { a as I, c as _, i as A, n as R, o as S, r as a, s, t as T } from "../chunks/sidebar-BCqq58hV.js";
 export {
-  T as SIDEBAR_ITEM,
-  s as SIDEBAR_ITEM_ACTIVE,
+  T as SIDEBAR_HEADER_INSET,
+  R as SIDEBAR_ITEM,
+  a as SIDEBAR_ITEM_ACTIVE,
   A as SIDEBAR_ITEM_INACTIVE,
-  a as SIDEBAR_ROOT,
-  E as Sidebar
+  I as SIDEBAR_ROOT,
+  S as SIDEBAR_ROOT_BASE,
+  s as SIDEBAR_ROOT_INSET,
+  _ as Sidebar
 };

package/dist/src/components/card/card.d.ts

@@ -0,0 +1,75 @@
+import { ComponentProps, Ref } from 'react';
+/**
+ * Design notes:
+ * - A card is a flat bordered panel on the page surface — hairline border,
+ *   primary background, no shadow. Elevation shadows stay on floating layers
+ *   (menus, dialogs); see the same rule on Input and Select.
+ * - Radius sits at the `lg` stop (16px) like Dialog — a standalone content
+ *   panel reads bigger than a control, so it takes the panel radius rather
+ *   than the control default (`base`).
+ * - Vertical rhythm: `pt-5` / `pb-4`, `gap-4` between parts. Parts carry
+ *   `px-5`, so a child without padding (an image, a table, a `Separator`)
+ *   runs edge-to-edge on its own.
+ * - No size or color axes. A card is chrome, not a signal — content sets the
+ *   tone. Sizing belongs to the layout that places the card.
+ */
+/** Surface chrome — exported for hosts that need the look on another element. */
+export declare const CARD_SURFACE = "border-pho-secondary bg-pho-primary rounded-lg border";
+/** The panel: bordered surface, vertical rhythm between parts. */
+declare function Root({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/** Title + optional description pair, kept tight (`gap-0.5`). */
+declare function Header({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * Card heading — an `<h3>` so it nests under page (`h1`) and section (`h2`)
+ * headings without skipping levels.
+ */
+declare function Title({ className, children, ...props }: ComponentProps<"h3"> & {
+    ref?: Ref<HTMLHeadingElement>;
+}): import("react").JSX.Element;
+/** Supporting copy under the title — same step, secondary tone. */
+declare function Description({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
+/** The card body. Carries the horizontal padding; bring your own layout. */
+declare function Content({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * Trailing row — actions, a status line. Unopinionated about justification;
+ * add `justify-end` for a dialog-style action bar.
+ */
+declare function Footer({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * Card — a bordered content panel: header (title + description), body,
+ * optional footer. It's static chrome with no interactivity of its own.
+ * For a settings label/control list use `Settings.Card`; for a featured
+ * block on the page surface use `Settings.Callout`.
+ *
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Usage</Card.Title>
+ *     <Card.Description>Since Aug 1.</Card.Description>
+ *   </Card.Header>
+ *   <Card.Content>…</Card.Content>
+ *   <Card.Footer className="justify-end">
+ *     <Button size="sm">Upgrade</Button>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+export declare const Card: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Title: typeof Title;
+    Description: typeof Description;
+    Content: typeof Content;
+    Footer: typeof Footer;
+};
+export {};

package/dist/src/components/card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CARD_SURFACE } from './card';

package/dist/src/components/checkbox/checkbox.d.ts

@@ -13,8 +13,12 @@ export interface CheckboxProps extends Omit<ComponentProps<typeof BaseCheckbox.R
  * `indeterminate` states; pass `label` for a clickable text row, or omit it
  * and provide an `aria-label`. For a set of related options that submit
  * together, wrap them in `CheckboxGroup`.
+ *
+ * Animation is the Effect Button family scaled to a toggle, kept restrained:
+ * a quick shallow press pulse on pointer-down (always plays out), the
+ * fill/stroke easing between states, and the glyph popping in.
  */
-export declare function Checkbox({ className, label, size, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ className, label, size, disabled, ...props }: CheckboxProps): import("react").JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }

package/dist/src/components/input-group/index.d.ts

@@ -0,0 +1 @@
+export { InputGroup, type InputGroupSize, type InputGroupRootProps, type InputGroupInputProps, } from './input-group';

package/dist/src/components/input-group/input-group.d.ts

@@ -0,0 +1,57 @@
+import { ComponentProps, ElementType, HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+/** Override Base UI's `string | (state) => string` className with plain string. */
+type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
+    className?: string;
+};
+export type InputGroupSize = "sm" | "md" | "lg";
+export interface InputGroupRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Size variant, matching Input's scale. @default "md" */
+    size?: InputGroupSize;
+    /** Render the invalid state (error ring; `aria-invalid` on the control). */
+    invalid?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The shared field surface: one hairline ring around the control and its
+ * addons, with the same focus / invalid / disabled treatment as `Input`.
+ * Clicking anywhere on the surface (addon text, icons, blank space) focuses
+ * the control, so the whole group reads as a single field.
+ */
+declare function Root({ size, invalid, className, onPointerDown, ref, ...props }: InputGroupRootProps): import("react").JSX.Element;
+export interface InputGroupInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * The text control. Rendered as Base UI `Field.Control`, so inside a
+ * `Field.Root` it picks up the label and description wiring automatically;
+ * standalone it behaves as a plain `<input>` (pass `aria-label` then).
+ */
+declare function GroupInput({ className, ref, ...props }: InputGroupInputProps): import("react").JSX.Element;
+/**
+ * Inline content beside the control — prefix/suffix text, an icon, a `Kbd`
+ * hint, or a small button. Text and icons render in the secondary tone so the
+ * value stays the loudest thing on the surface.
+ */
+declare function Addon({ className, ref, ...props }: HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/**
+ * A hairline between segments — turns an addon into a boxed section
+ * (`https:// │ workspace │ .photon.dev`).
+ */
+declare function GroupSeparator({ className, orientation, ...props }: StyledProps<typeof BaseSeparator>): import("react").JSX.Element;
+/**
+ * Input Group — one field surface shared by a text control and its addons:
+ * prefix/suffix text, icons, keyboard hints, or a trailing button. Same
+ * ring, sizes, and focus / invalid / disabled behavior as `Input`, so grouped
+ * and plain fields align in the same form. For a leading icon alone, plain
+ * `Input` with `icon` is enough.
+ */
+export declare const InputGroup: {
+    Root: typeof Root;
+    Input: typeof GroupInput;
+    Addon: typeof Addon;
+    Separator: typeof GroupSeparator;
+};
+export {};

package/dist/src/components/select/index.d.ts

@@ -1 +1 @@
-export { Select } from './select';
+export { Select, type SelectTriggerVariant } from './select';

package/dist/src/components/select/select.d.ts

@@ -1,25 +1,44 @@
-import { ComponentProps, ElementType } from 'react';
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { Select as BaseSelect } from '@base-ui/react/select';
 /** Override Base UI's `string | (state) => string` className with plain string. */
 type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
     className?: string;
 };
-declare function Trigger({ className, ...props }: StyledProps<typeof BaseSelect.Trigger>): import("react").JSX.Element;
+export type SelectTriggerVariant = "default" | "inline";
+declare function Root({ multiple, ...props }: ComponentProps<typeof BaseSelect.Root>): import("react").JSX.Element;
+declare function Trigger({ className, disabled, variant, onPointerDown, ...props }: StyledProps<typeof BaseSelect.Trigger> & {
+    /**
+     * `inline` drops the field chrome (ring, background, padding, min-width)
+     * to ride a host surface — an Input Group addon, a toolbar — which then
+     * carries the focus/open treatment. The press pulse moves to the arrow.
+     * @default "default"
+     */
+    variant?: SelectTriggerVariant;
+}): import("react").JSX.Element;
 declare function Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>): import("react").JSX.Element;
-declare function Positioner({ className, sideOffset, ...props }: StyledProps<typeof BaseSelect.Positioner>): import("react").JSX.Element;
+declare function Positioner({ className, sideOffset, align, alignItemWithTrigger, ...props }: StyledProps<typeof BaseSelect.Positioner>): import("react").JSX.Element;
 declare function Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>): import("react").JSX.Element;
 declare function Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>): import("react").JSX.Element;
-declare function ItemIndicator({ className, ...props }: StyledProps<typeof BaseSelect.ItemIndicator>): import("react").JSX.Element;
+declare function ItemText({ className, ...props }: StyledProps<typeof BaseSelect.ItemText>): import("react").JSX.Element;
+/**
+ * Leading selection mark, mode-aware. Single: a brand check that appears in
+ * the reserved column. Multiple: an always-visible checkbox box that fills
+ * with the same quiet fill/stroke ease as the standalone Checkbox.
+ */
+declare function ItemIndicator({ className, children, ...props }: StyledProps<typeof BaseSelect.ItemIndicator> & {
+    children?: ReactNode;
+}): import("react").JSX.Element;
 declare function GroupLabel({ className, ...props }: StyledProps<typeof BaseSelect.GroupLabel>): import("react").JSX.Element;
 /**
  * Select built on Base UI `Select` — pick one option (or several with
- * `multiple`) from a list that opens on click. Pass `items` to `Select.Root`,
- * render an `Item` per option, and show the selection with `Select.Value`. For
- * a short, always-visible set use `RadioGroup`; to filter a long list by typing
- * use `Combobox`.
+ * `multiple`) from a list that opens below the trigger on click; the pattern
+ * other design systems call a picker. Pass `items` to `Select.Root`, render an
+ * `Item` per option, and show the selection with `Select.Value`. For a short,
+ * always-visible set use `RadioGroup`; to filter a long list by typing use
+ * `Combobox`.
  */
 export declare const Select: {
-    Root: typeof BaseSelect.Root;
+    Root: typeof Root;
     Trigger: typeof Trigger;
     Value: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SelectValueProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
     Icon: typeof Icon;
@@ -28,7 +47,7 @@ export declare const Select: {
     Popup: typeof Popup;
     List: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SelectListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Item: typeof Item;
-    ItemText: import('react').NamedExoticComponent<Omit<import('@base-ui/react').SelectItemTextProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    ItemText: typeof ItemText;
     ItemIndicator: typeof ItemIndicator;
     Group: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SelectGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     GroupLabel: typeof GroupLabel;

package/dist/src/index.d.ts

@@ -8,6 +8,8 @@
 export * from './utils';
 export * from './components/button';
 export * from './components/input';
+export * from './components/input-group';
+export * from './components/card';
 export * from './components/dialog';
 export * from './sections/sidebar';
 export * from './sections/settings';

package/dist/src/sections/settings/index.d.ts

@@ -1 +1 @@
-export { Settings, SETTINGS_CARD, SETTINGS_ROW, type SettingsRowProps, } from './settings';
+export { Settings, SETTINGS_CARD, SETTINGS_CALLOUT, SETTINGS_ROW, type SettingsRowProps, } from './settings';