@evinvest/uikit 0.19.0 → 0.20.0

package/dist/components/kbd.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { KBD_BASE, KBD_GROUP_BASE } from "../generated/kbd.js";
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      className: cn(KBD_BASE, className),
+      ...props
+    }
+  );
+}
+function KbdGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      "data-slot": "kbd-group",
+      className: cn(KBD_GROUP_BASE, className),
+      ...props
+    }
+  );
+}
+export {
+  Kbd,
+  KbdGroup
+};
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { KBD_BASE, KBD_GROUP_BASE } from \"../generated/kbd\";\n\nexport function Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(KBD_BASE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(KBD_GROUP_BASE, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AAMI;AANJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,UAAU,sBAAsB;AAElC,SAAS,IAAI,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/label.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { LABEL_BASE } from "../generated/label.js";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx("label", { "data-slot": "label", className: cn(LABEL_BASE, className), ...props });
+}
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { LABEL_BASE } from \"../generated/label\";\n\nexport function Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return <label data-slot=\"label\" className={cn(LABEL_BASE, className)} {...props} />;\n}\n"],"mappings":"AAKS;AALT,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAEpB,SAAS,MAAM,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC5E,SAAO,oBAAC,WAAM,aAAU,SAAQ,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AACnF;","names":[]}

package/dist/components/logo.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+const maskStyle = {
+  backgroundColor: "currentColor",
+  maskImage: "var(--brand-mark)",
+  WebkitMaskImage: "var(--brand-mark)",
+  maskRepeat: "no-repeat",
+  WebkitMaskRepeat: "no-repeat",
+  maskPosition: "center",
+  WebkitMaskPosition: "center",
+  maskSize: "contain",
+  WebkitMaskSize: "contain",
+  // the ratio's fallback is what makes a missing mark *visible*: a masked span
+  // has no intrinsic size, so `h-N w-auto` without it is zero-width
+  aspectRatio: "var(--brand-aspect, 1)"
+};
+function Logo({ className, withBackground = false }) {
+  const mark = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "logo",
+      "aria-hidden": true,
+      style: maskStyle,
+      className: cn("inline-block", withBackground ? "w-3/5 h-3/5" : className)
+    }
+  );
+  if (!withBackground) return mark;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "logo-background",
+      className: cn("inline-flex items-center justify-center bg-brand", className),
+      children: mark
+    }
+  );
+}
+export {
+  Logo
+};
+//# sourceMappingURL=logo.js.map

package/dist/components/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The consumer's mark, painted as a CSS mask (`backgroundColor: currentColor` +\n * `maskImage`) so a monochrome lockup follows the surrounding text colour\n * instead of the artwork's baked-in fill. `withBackground` seats it on the brand\n * field, keeping a chip consistent with a favicon.\n *\n * The kit ships no artwork. The mark is a design token like every colour: the\n * consumer declares `--brand-mark` — a `url()` at its own asset — and\n * `--brand-aspect` in the same sheet it declares the palette in (see\n * `styles/tokens.css`). Undeclared, `maskImage` is invalid at computed-value time\n * and the span paints as a solid block: loud, and nobody else's logo.\n *\n * Decorative by design (`aria-hidden`): every real call site has the brand name\n * in adjacent text or on the wrapping link, and a mark announced twice is worse\n * than one announced once.\n */\nexport interface LogoProps {\n  className?: string;\n  withBackground?: boolean;\n}\n\nconst maskStyle: React.CSSProperties = {\n  backgroundColor: \"currentColor\",\n  maskImage: \"var(--brand-mark)\",\n  WebkitMaskImage: \"var(--brand-mark)\",\n  maskRepeat: \"no-repeat\",\n  WebkitMaskRepeat: \"no-repeat\",\n  maskPosition: \"center\",\n  WebkitMaskPosition: \"center\",\n  maskSize: \"contain\",\n  WebkitMaskSize: \"contain\",\n  // the ratio's fallback is what makes a missing mark *visible*: a masked span\n  // has no intrinsic size, so `h-N w-auto` without it is zero-width\n  aspectRatio: \"var(--brand-aspect, 1)\",\n};\n\nexport function Logo({ className, withBackground = false }: LogoProps) {\n  const mark = (\n    <span\n      data-slot=\"logo\"\n      aria-hidden\n      style={maskStyle}\n      className={cn(\"inline-block\", withBackground ? \"w-3/5 h-3/5\" : className)}\n    />\n  );\n\n  if (!withBackground) return mark;\n\n  return (\n    <span\n      data-slot=\"logo-background\"\n      className={cn(\"inline-flex items-center justify-center bg-brand\", className)}\n    >\n      {mark}\n    </span>\n  );\n}\n"],"mappings":"AAyCI;AAzCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAuBnB,MAAM,YAAiC;AAAA,EACrC,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,gBAAgB;AAAA;AAAA;AAAA,EAGhB,aAAa;AACf;AAEO,SAAS,KAAK,EAAE,WAAW,iBAAiB,MAAM,GAAc;AACrE,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW,GAAG,gBAAgB,iBAAiB,gBAAgB,SAAS;AAAA;AAAA,EAC1E;AAGF,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oDAAoD,SAAS;AAAA,MAE1E;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/menubar.js

@@ -0,0 +1,330 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { Portal } from "../primitives/portal.js";
+import { useFloating } from "../primitives/use-floating.js";
+import { useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { usePresence } from "../primitives/presence.js";
+import { useRovingFocus } from "../primitives/use-roving-focus.js";
+import { mergeRefs } from "../primitives/merge-refs.js";
+import {
+  MENUBAR_CHECKBOX_ITEM,
+  MENUBAR_CONTENT,
+  MENUBAR_ITEM,
+  MENUBAR_ITEM_INDICATOR,
+  MENUBAR_LABEL,
+  MENUBAR_RADIO_ITEM,
+  MENUBAR_ROOT,
+  MENUBAR_SEPARATOR,
+  MENUBAR_SHORTCUT,
+  MENUBAR_SUB_CONTENT,
+  MENUBAR_SUB_TRIGGER,
+  MENUBAR_TRIGGER
+} from "../generated/menubar.js";
+const MenubarMenuContext = React.createContext(null);
+function useMenu() {
+  const ctx = React.useContext(MenubarMenuContext);
+  if (!ctx) throw new Error("Menubar parts must be used within <MenubarMenu>");
+  return ctx;
+}
+const MenubarRadioGroupContext = React.createContext(null);
+function Menubar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "menubar",
+      role: "menubar",
+      className: cn(MENUBAR_ROOT, className),
+      ...props
+    }
+  );
+}
+function MenubarMenu({ open, defaultOpen = false, onOpenChange, children }) {
+  const [isOpen, setOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = React.useRef(null);
+  return /* @__PURE__ */ jsx(MenubarMenuContext.Provider, { value: { open: isOpen, setOpen, triggerRef }, children: /* @__PURE__ */ jsx("div", { "data-slot": "menubar-menu", className: "relative", children }) });
+}
+function MenubarTrigger({ className, onClick, ...props }) {
+  const { open, setOpen, triggerRef } = useMenu();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      "data-slot": "menubar-trigger",
+      "data-state": open ? "open" : "closed",
+      className: cn(MENUBAR_TRIGGER, className),
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(!open);
+      },
+      ...props
+    }
+  );
+}
+function MenubarContent({
+  className,
+  children,
+  align = "start",
+  ...props
+}) {
+  const { open, setOpen, triggerRef } = useMenu();
+  const { isPresent, ref: presenceRef } = usePresence(open);
+  const { floatingRef, style, side } = useFloating({
+    anchorRef: triggerRef,
+    open,
+    side: "bottom",
+    align,
+    offset: 8
+  });
+  const dismissRef = useDismissableLayer({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    exclude: [triggerRef]
+  });
+  const items = React.Children.toArray(children);
+  const { onKeyDown } = useRovingFocus({ count: items.length, orientation: "vertical" });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs(presenceRef, floatingRef, dismissRef),
+      "data-slot": "menubar-content",
+      "data-state": open ? "open" : "closed",
+      "data-side": side,
+      role: "menu",
+      style,
+      className: cn(MENUBAR_CONTENT, className),
+      onKeyDown,
+      ...props,
+      children
+    }
+  ) });
+}
+function MenubarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "menubar-group", role: "group", className, ...props });
+}
+function MenubarItem({
+  className,
+  inset,
+  variant = "neutral",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "menubar-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      role: "menuitem",
+      tabIndex: -1,
+      className: cn(MENUBAR_ITEM, className),
+      ...props
+    }
+  );
+}
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "menubar-checkbox-item",
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      tabIndex: -1,
+      className: cn(MENUBAR_CHECKBOX_ITEM, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: MENUBAR_ITEM_INDICATOR, children: checked && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "size-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+function MenubarRadioGroup({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className,
+  children
+}) {
+  const [current, setValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(MenubarRadioGroupContext.Provider, { value: { value: current, onValueChange: setValue }, children: /* @__PURE__ */ jsx("div", { "data-slot": "menubar-radio-group", role: "group", className, children }) });
+}
+function MenubarRadioItem({
+  className,
+  children,
+  value,
+  ...props
+}) {
+  const ctx = React.useContext(MenubarRadioGroupContext);
+  const checked = ctx?.value === value;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "menubar-radio-item",
+      role: "menuitemradio",
+      "aria-checked": checked,
+      tabIndex: -1,
+      className: cn(MENUBAR_RADIO_ITEM, className),
+      onClick: () => ctx?.onValueChange(value),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: MENUBAR_ITEM_INDICATOR, children: checked && /* @__PURE__ */ jsx("svg", { className: "size-2 fill-current", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "menubar-label",
+      "data-inset": inset,
+      className: cn(MENUBAR_LABEL, className),
+      ...props
+    }
+  );
+}
+function MenubarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "menubar-separator",
+      role: "separator",
+      className: cn(MENUBAR_SEPARATOR, className),
+      ...props
+    }
+  );
+}
+function MenubarShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "menubar-shortcut",
+      className: cn(MENUBAR_SHORTCUT, className),
+      ...props
+    }
+  );
+}
+const MenubarSubContext = React.createContext(null);
+function useSub() {
+  const ctx = React.useContext(MenubarSubContext);
+  if (!ctx) throw new Error("MenubarSub parts must be used within <MenubarSub>");
+  return ctx;
+}
+function MenubarSub({ open, defaultOpen = false, onOpenChange, children }) {
+  const [isOpen, setOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsx(MenubarSubContext.Provider, { value: { open: isOpen, setOpen }, children: /* @__PURE__ */ jsx("div", { "data-slot": "menubar-sub", className: "relative", children }) });
+}
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  onClick,
+  ...props
+}) {
+  const { open, setOpen } = useSub();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "menubar-sub-trigger",
+      "data-inset": inset,
+      "data-state": open ? "open" : "closed",
+      role: "menuitem",
+      tabIndex: -1,
+      className: cn(MENUBAR_SUB_TRIGGER, className),
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(!open);
+      },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "ml-auto h-4 w-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+          }
+        )
+      ]
+    }
+  );
+}
+function MenubarSubContent({ className, children, ...props }) {
+  const { open } = useSub();
+  const { isPresent, ref } = usePresence(open);
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "menubar-sub-content",
+      "data-state": open ? "open" : "closed",
+      role: "menu",
+      className: cn(MENUBAR_SUB_CONTENT, className),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+};
+//# sourceMappingURL=menubar.js.map

package/dist/components/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/menubar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { Portal } from \"../primitives/portal\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useRovingFocus } from \"../primitives/use-roving-focus\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport {\n  MENUBAR_CHECKBOX_ITEM,\n  MENUBAR_CONTENT,\n  MENUBAR_ITEM,\n  MENUBAR_ITEM_INDICATOR,\n  MENUBAR_LABEL,\n  MENUBAR_RADIO_ITEM,\n  MENUBAR_ROOT,\n  MENUBAR_SEPARATOR,\n  MENUBAR_SHORTCUT,\n  MENUBAR_SUB_CONTENT,\n  MENUBAR_SUB_TRIGGER,\n  MENUBAR_TRIGGER,\n} from \"../generated/menubar\";\n\ninterface MenuCtx {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n}\nconst MenubarMenuContext = React.createContext<MenuCtx | null>(null);\nfunction useMenu(): MenuCtx {\n  const ctx = React.useContext(MenubarMenuContext);\n  if (!ctx) throw new Error(\"Menubar parts must be used within <MenubarMenu>\");\n  return ctx;\n}\n\nconst MenubarRadioGroupContext = React.createContext<{\n  value: string;\n  onValueChange: (value: string) => void;\n} | null>(null);\n\nexport function Menubar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"menubar\"\n      role=\"menubar\"\n      className={cn(MENUBAR_ROOT, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface MenubarMenuProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function MenubarMenu({ open, defaultOpen = false, onOpenChange, children }: MenubarMenuProps) {\n  const [isOpen, setOpen] = useControllableState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  return (\n    <MenubarMenuContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      <div data-slot=\"menubar-menu\" className=\"relative\">\n        {children}\n      </div>\n    </MenubarMenuContext.Provider>\n  );\n}\n\nexport function MenubarTrigger({ className, onClick, ...props }: React.ComponentProps<\"button\">) {\n  const { open, setOpen, triggerRef } = useMenu();\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      data-slot=\"menubar-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(MENUBAR_TRIGGER, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function MenubarContent({\n  className,\n  children,\n  align = \"start\",\n  ...props\n}: React.ComponentProps<\"div\"> & { align?: \"start\" | \"center\" | \"end\" }) {\n  const { open, setOpen, triggerRef } = useMenu();\n  const { isPresent, ref: presenceRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef: triggerRef,\n    open,\n    side: \"bottom\",\n    align,\n    offset: 8,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n  });\n\n  const items = React.Children.toArray(children);\n  const { onKeyDown } = useRovingFocus({ count: items.length, orientation: \"vertical\" });\n\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        ref={mergeRefs(presenceRef, floatingRef, dismissRef)}\n        data-slot=\"menubar-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        role=\"menu\"\n        style={style}\n        className={cn(MENUBAR_CONTENT, className)}\n        onKeyDown={onKeyDown}\n        {...props}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nexport function MenubarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"menubar-group\" role=\"group\" className={className} {...props} />;\n}\n\nexport function MenubarItem({\n  className,\n  inset,\n  variant = \"neutral\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  inset?: boolean;\n  variant?: \"neutral\" | \"destructive\";\n}) {\n  return (\n    <div\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      role=\"menuitem\"\n      tabIndex={-1}\n      className={cn(MENUBAR_ITEM, className)}\n      {...props}\n    />\n  );\n}\n\nexport function MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<\"div\"> & { checked?: boolean }) {\n  return (\n    <div\n      data-slot=\"menubar-checkbox-item\"\n      role=\"menuitemcheckbox\"\n      aria-checked={checked}\n      tabIndex={-1}\n      className={cn(MENUBAR_CHECKBOX_ITEM, className)}\n      {...props}\n    >\n      <span className={MENUBAR_ITEM_INDICATOR}>\n        {checked && (\n          <svg\n            className=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        )}\n      </span>\n      {children}\n    </div>\n  );\n}\n\nexport interface MenubarRadioGroupProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function MenubarRadioGroup({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  children,\n}: MenubarRadioGroupProps) {\n  const [current, setValue] = useControllableState({\n    value,\n    defaultValue,\n    onChange: onValueChange,\n  });\n  return (\n    <MenubarRadioGroupContext.Provider value={{ value: current, onValueChange: setValue }}>\n      <div data-slot=\"menubar-radio-group\" role=\"group\" className={className}>\n        {children}\n      </div>\n    </MenubarRadioGroupContext.Provider>\n  );\n}\n\nexport function MenubarRadioItem({\n  className,\n  children,\n  value,\n  ...props\n}: React.ComponentProps<\"div\"> & { value: string }) {\n  const ctx = React.useContext(MenubarRadioGroupContext);\n  const checked = ctx?.value === value;\n  return (\n    <div\n      data-slot=\"menubar-radio-item\"\n      role=\"menuitemradio\"\n      aria-checked={checked}\n      tabIndex={-1}\n      className={cn(MENUBAR_RADIO_ITEM, className)}\n      onClick={() => ctx?.onValueChange(value)}\n      {...props}\n    >\n      <span className={MENUBAR_ITEM_INDICATOR}>\n        {checked && (\n          <svg className=\"size-2 fill-current\" viewBox=\"0 0 24 24\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          </svg>\n        )}\n      </span>\n      {children}\n    </div>\n  );\n}\n\nexport function MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<\"div\"> & { inset?: boolean }) {\n  return (\n    <div\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(MENUBAR_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function MenubarSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"menubar-separator\"\n      role=\"separator\"\n      className={cn(MENUBAR_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(MENUBAR_SHORTCUT, className)}\n      {...props}\n    />\n  );\n}\n\ninterface SubCtx {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\nconst MenubarSubContext = React.createContext<SubCtx | null>(null);\nfunction useSub(): SubCtx {\n  const ctx = React.useContext(MenubarSubContext);\n  if (!ctx) throw new Error(\"MenubarSub parts must be used within <MenubarSub>\");\n  return ctx;\n}\n\nexport interface MenubarSubProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function MenubarSub({ open, defaultOpen = false, onOpenChange, children }: MenubarSubProps) {\n  const [isOpen, setOpen] = useControllableState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  return (\n    <MenubarSubContext.Provider value={{ open: isOpen, setOpen }}>\n      <div data-slot=\"menubar-sub\" className=\"relative\">\n        {children}\n      </div>\n    </MenubarSubContext.Provider>\n  );\n}\n\nexport function MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"div\"> & { inset?: boolean }) {\n  const { open, setOpen } = useSub();\n  return (\n    <div\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      data-state={open ? \"open\" : \"closed\"}\n      role=\"menuitem\"\n      tabIndex={-1}\n      className={cn(MENUBAR_SUB_TRIGGER, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...props}\n    >\n      {children}\n      <svg\n        className=\"ml-auto h-4 w-4\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </div>\n  );\n}\n\nexport function MenubarSubContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { open } = useSub();\n  const { isPresent, ref } = usePresence(open);\n  if (!isPresent) return null;\n  return (\n    <div\n      ref={ref as React.RefObject<HTMLDivElement>}\n      data-slot=\"menubar-sub-content\"\n      data-state={open ? \"open\" : \"closed\"}\n      role=\"menu\"\n      className={cn(MENUBAR_SUB_CONTENT, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/native-select.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { nativeSelectSizeClasses } from "../generated/select.js";
+import { useFieldControlId } from "./field-context.js";
+import { SelectChevron } from "./select-chevron.js";
+const NATIVE_SELECT = "border-input text-ink h-9 w-full min-w-0 appearance-none rounded-[var(--control-radius)] border bg-transparent py-1 pr-9 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error has-[option[value='']:checked]:text-ink-soft [&_option]:bg-popover [&_option]:text-ink [&_optgroup]:bg-popover [&_optgroup]:text-ink-soft [color-scheme:var(--scheme,normal)]";
+const NativeSelect = React.forwardRef(
+  function NativeSelect2({ className, wrapperClassName, size = "md", placeholder, id, children, value, defaultValue, ...props }, ref) {
+    const controlId = useFieldControlId(id);
+    const initial = value === void 0 && defaultValue === void 0 && placeholder !== void 0 ? "" : defaultValue;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-slot": "native-select-wrapper",
+        className: cn("relative inline-flex w-full has-[select:disabled]:opacity-50", wrapperClassName),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              ref,
+              id: controlId,
+              "data-slot": "native-select",
+              "data-size": size,
+              className: cn(NATIVE_SELECT, nativeSelectSizeClasses[size], className),
+              ...value !== void 0 ? { value } : {},
+              ...initial !== void 0 ? { defaultValue: initial } : {},
+              ...props,
+              children: [
+                placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+                children
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectChevron,
+            {
+              className: cn(
+                "text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2",
+                // keeps the arrow as far in from the edge as the large inset keeps the text
+                size === "lg" && "right-4"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function NativeSelectOption(props) {
+  return /* @__PURE__ */ jsx("option", { "data-slot": "native-select-option", ...props });
+}
+function NativeSelectGroup(props) {
+  return /* @__PURE__ */ jsx("optgroup", { "data-slot": "native-select-group", ...props });
+}
+export {
+  NativeSelect,
+  NativeSelectGroup,
+  NativeSelectOption
+};
+//# sourceMappingURL=native-select.js.map

package/dist/components/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/native-select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { nativeSelectSizeClasses, type NativeSelectSize } from \"../generated/select\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\n\nexport type { NativeSelectSize };\n\n/**\n * A real `<select>` wearing the kit's control: the form posts its `name` with no\n * script at all, and the popup is the platform's own (keyboard, type-ahead, the\n * mobile picker). `Select` is the scripted combobox for everything a native\n * popup cannot draw; this is for a form that has to submit before hydration.\n *\n * A component of its own rather than a `native` switch on `Select`: none of\n * `SelectTrigger` / `SelectValue` / `SelectContent` has a native counterpart, so\n * a flag would leave most of the compound API meaning nothing in one mode.\n *\n * `className` styles the `<select>`; `wrapperClassName` the box that holds it\n * and the arrow — that box is what a layout sizes. It is `w-full` like `Input`,\n * so the two line up in a form column; narrow it with `wrapperClassName`.\n */\nexport interface NativeSelectProps\n  extends Omit<React.ComponentPropsWithoutRef<\"select\">, \"size\" | \"multiple\"> {\n  size?: NativeSelectSize;\n  /** An empty, unpickable first option shown until a value is chosen. */\n  placeholder?: string;\n  wrapperClassName?: string;\n}\n\n// `appearance-none` drops the OS arrow. The popup is drawn by the platform:\n// the option colours reach it where the platform honours them, and `--scheme`\n// (a palette's polarity, `light` or `dark`) picks the platform's own dark\n// menu where it does not. The placeholder is the empty option being the\n// checked one — CSS can see that without script.\nconst NATIVE_SELECT =\n  \"border-input text-ink h-9 w-full min-w-0 appearance-none rounded-[var(--control-radius)] border bg-transparent py-1 pr-9 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error has-[option[value='']:checked]:text-ink-soft [&_option]:bg-popover [&_option]:text-ink [&_optgroup]:bg-popover [&_optgroup]:text-ink-soft [color-scheme:var(--scheme,normal)]\";\n\nexport const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(\n    { className, wrapperClassName, size = \"md\", placeholder, id, children, value, defaultValue, ...props },\n    ref,\n  ) {\n    const controlId = useFieldControlId(id);\n    // Without a checked option the browser picks the first enabled one, which\n    // would skip a disabled placeholder; start on it unless told otherwise.\n    const initial = value === undefined && defaultValue === undefined && placeholder !== undefined ? \"\" : defaultValue;\n    return (\n      <span\n        data-slot=\"native-select-wrapper\"\n        className={cn(\"relative inline-flex w-full has-[select:disabled]:opacity-50\", wrapperClassName)}\n      >\n        <select\n          ref={ref}\n          id={controlId}\n          data-slot=\"native-select\"\n          data-size={size}\n          className={cn(NATIVE_SELECT, nativeSelectSizeClasses[size], className)}\n          {...(value !== undefined ? { value } : {})}\n          {...(initial !== undefined ? { defaultValue: initial } : {})}\n          {...props}\n        >\n          {placeholder !== undefined && (\n            <option value=\"\" disabled hidden>\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </select>\n        <SelectChevron\n          className={cn(\n            \"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\",\n            // keeps the arrow as far in from the edge as the large inset keeps the text\n            size === \"lg\" && \"right-4\",\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nexport function NativeSelectOption(props: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />;\n}\n\nexport function NativeSelectGroup(props: React.ComponentProps<\"optgroup\">) {\n  return <optgroup data-slot=\"native-select-group\" {...props} />;\n}\n"],"mappings":";AAsDQ,SAWI,KAXJ;AApDR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,+BAAsD;AAC/D,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AA+B9B,MAAM,gBACJ;AAEK,MAAM,eAAe,MAAM;AAAA,EAChC,SAASA,cACP,EAAE,WAAW,kBAAkB,OAAO,MAAM,aAAa,IAAI,UAAU,OAAO,cAAc,GAAG,MAAM,GACrG,KACA;AACA,UAAM,YAAY,kBAAkB,EAAE;AAGtC,UAAM,UAAU,UAAU,UAAa,iBAAiB,UAAa,gBAAgB,SAAY,KAAK;AACtG,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,gEAAgE,gBAAgB;AAAA,QAE9F;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,IAAI;AAAA,cACJ,aAAU;AAAA,cACV,aAAW;AAAA,cACX,WAAW,GAAG,eAAe,wBAAwB,IAAI,GAAG,SAAS;AAAA,cACpE,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,CAAC;AAAA,cACvC,GAAI,YAAY,SAAY,EAAE,cAAc,QAAQ,IAAI,CAAC;AAAA,cACzD,GAAG;AAAA,cAEH;AAAA,gCAAgB,UACf,oBAAC,YAAO,OAAM,IAAG,UAAQ,MAAC,QAAM,MAC7B,uBACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA;AAAA,gBAEA,SAAS,QAAQ;AAAA,cACnB;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEO,SAAS,mBAAmB,OAAuC;AACxE,SAAO,oBAAC,YAAO,aAAU,wBAAwB,GAAG,OAAO;AAC7D;AAEO,SAAS,kBAAkB,OAAyC;AACzE,SAAO,oBAAC,cAAS,aAAU,uBAAuB,GAAG,OAAO;AAC9D;","names":["NativeSelect"]}