@px-ui/ui 0.1.4 → 1.0.0

package/dist/avatar-BAkmIOVe.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Avatar } from "@base-ui/react/avatar";
+
+//#region src/components/avatar.d.ts
+declare function getInitialsFromName(name: string | null | undefined): string;
+declare function getAvatarColorByName(name: string | null | undefined): React$1.CSSProperties;
+type AvatarSize = "default" | "sm" | "lg";
+type AvatarProps = Avatar.Root.Props & {
+  size?: AvatarSize;
+  tooltip?: React$1.ReactNode | false;
+};
+declare function getAvatarLabelFromChildren(children: React$1.ReactNode): React$1.ReactNode | undefined;
+declare function Avatar$1({
+  className,
+  size,
+  tooltip,
+  children,
+  ...props
+}: AvatarProps): react_jsx_runtime5.JSX.Element;
+declare function AvatarImage({
+  className,
+  ...props
+}: Avatar.Image.Props): react_jsx_runtime5.JSX.Element;
+type AvatarFallbackProps = Avatar.Fallback.Props & {
+  name?: string | null;
+};
+declare function AvatarFallback({
+  className,
+  name,
+  children,
+  style,
+  ...props
+}: AvatarFallbackProps): react_jsx_runtime5.JSX.Element;
+declare function AvatarBadge({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime5.JSX.Element;
+//#endregion
+export { AvatarImage as a, getAvatarLabelFromChildren as c, AvatarFallbackProps as i, getInitialsFromName as l, AvatarBadge as n, AvatarProps as o, AvatarFallback as r, getAvatarColorByName as s, Avatar$1 as t };
+//# sourceMappingURL=avatar-BAkmIOVe.d.ts.map

package/dist/avatar-BAkmIOVe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-BAkmIOVe.d.ts","names":[],"sources":["../src/components/avatar.tsx"],"sourcesContent":[],"mappings":";;;;;iBAmCS,mBAAA;iBAQA,oBAAA,mCAEN,OAAA,CAAM;KAwBJ,UAAA;AApE4D,KAsE5D,WAAA,GAAc,MAAA,CAAgB,IAAA,CAAK,KApCZ,GAAA;EAQnB,IAAA,CAAA,EA6BA,UA7BA;EA0BJ,OAAA,CAAA,EAIO,OAAA,CAAM,SAJH,GAAA,KAAA;AAAA,CAAA;iBAON,0BAAA,CAL+B,QAAA,EAM5B,OAAA,CAAM,SANsB,CAAA,EAOrC,OAAA,CAAM,SAP+B,GAAA,SAAA;iBAuB/B,QAAA,CAtBA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EA4BN,WA5BM,CAAA,EA4BK,kBAAA,CAAA,GAAA,CAAA,OA5BL;iBAuDA,WAAA,CAtDS;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAsD4B,MAAA,CAAgB,KAAA,CAAM,KAtDlD,CAAA,EAsDuD,kBAAA,CAAA,GAAA,CAAA,OAtDvD;KAmEb,mBAAA,GAAsB,MAAA,CAAgB,QAAA,CAAS,KAnEzB,GAAA;EAGlB,IAAA,CAAA,EAAA,MAAA,GAAA,IAAA;AAES,CAAA;iBAkET,cAAA,CAjDP;EAAA,SAAA;EAAA,IAAA;EAAA,QAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAuDC,mBAvDD,CAAA,EAuDoB,kBAAA,CAAA,GAAA,CAAA,OAvDpB;iBAgFO,WAAA,CA/EP;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA+E4C,OAAA,CAAM,cA/ElD,CAAA,MAAA,CAAA,CAAA,EA+EwE,kBAAA,CAAA,GAAA,CAAA,OA/ExE"}

package/dist/avatar-DDdL9xDH.js

@@ -0,0 +1,119 @@
+import { t as cn } from "./utils-mWJR2N24.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "./tooltip-DkPxCJIL.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Avatar } from "@base-ui/react/avatar";
+
+//#region src/components/avatar.tsx
+const AVATAR_NAME_PALETTE = [
+	"#bdc3c7",
+	"#6f7b87",
+	"#2c3e50",
+	"#2f3193",
+	"#662d91",
+	"#922790",
+	"#ec2176",
+	"#ed1c24",
+	"#f36622",
+	"#f8941e",
+	"#fab70f",
+	"#fdde00",
+	"#d1d219",
+	"#8ec73f",
+	"#00a650",
+	"#00aa9c",
+	"#00adef",
+	"#0081cd",
+	"#005bab",
+	"#012a4a",
+	"#013a63",
+	"#06d6a0",
+	"#ef476f",
+	"#ff5d8f",
+	"#0496ff",
+	"#c879ff"
+];
+function getInitialsFromName(name) {
+	if (!name) return "";
+	const matches = [...name.matchAll(/(\b\w)/g)];
+	return ((matches.shift()?.[1] ?? "") + (matches.pop()?.[1] ?? "")).toUpperCase();
+}
+function getAvatarColorByName(name) {
+	const seed = name && name.length ? name : "?";
+	let index = seed[0].toUpperCase().charCodeAt(0);
+	const lastName = seed.split(" ")[1];
+	if (lastName) index = Math.floor((index + lastName[0].toUpperCase().charCodeAt(0)) / 2);
+	index = Math.abs(index - 65) % AVATAR_NAME_PALETTE.length;
+	return {
+		backgroundColor: AVATAR_NAME_PALETTE[index],
+		color: "#fff"
+	};
+}
+function getStringFromChildren(children) {
+	let out = "";
+	React$1.Children.forEach(children, (child) => {
+		if (typeof child === "string" || typeof child === "number") out += child;
+	});
+	return out;
+}
+function getAvatarLabelFromChildren(children) {
+	let alt;
+	let name;
+	React$1.Children.forEach(children, (child) => {
+		if (!React$1.isValidElement(child)) return;
+		if (child.type === AvatarFallback) {
+			const props = child.props;
+			if (props.name) name = props.name;
+		} else if (child.type === AvatarImage) {
+			const props = child.props;
+			if (props.alt) alt = props.alt;
+		}
+	});
+	return name ?? alt;
+}
+function Avatar$1({ className, size = "default", tooltip, children, ...props }) {
+	const root = /* @__PURE__ */ jsx(Avatar.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		...props,
+		children
+	});
+	const resolved = tooltip === void 0 ? getAvatarLabelFromChildren(children) : tooltip;
+	if (resolved === false || resolved == null || resolved === "") return root;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: root }), /* @__PURE__ */ jsx(TooltipContent, { children: resolved })] });
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, name, children, style, ...props }) {
+	const colorStyle = React$1.useMemo(() => {
+		return getAvatarColorByName(name ?? getStringFromChildren(children));
+	}, [name, children]);
+	const initials = React$1.useMemo(() => name && children == null ? getInitialsFromName(name) : void 0, [name, children]);
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full font-medium text-sm group-data-[size=sm]/avatar:text-xs", className),
+		style: {
+			...colorStyle,
+			...style
+		},
+		...props,
+		children: children ?? initials
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+}
+
+//#endregion
+export { getAvatarColorByName as a, AvatarImage as i, AvatarBadge as n, getAvatarLabelFromChildren as o, AvatarFallback as r, getInitialsFromName as s, Avatar$1 as t };
+//# sourceMappingURL=avatar-DDdL9xDH.js.map

package/dist/avatar-DDdL9xDH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-DDdL9xDH.js","names":["alt: string | undefined","name: string | undefined","React","Avatar","AvatarPrimitive"],"sources":["../src/components/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@px-ui/ui/lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@px-ui/ui/components/tooltip\"\n\nconst AVATAR_NAME_PALETTE = [\n  \"#bdc3c7\",\n  \"#6f7b87\",\n  \"#2c3e50\",\n  \"#2f3193\",\n  \"#662d91\",\n  \"#922790\",\n  \"#ec2176\",\n  \"#ed1c24\",\n  \"#f36622\",\n  \"#f8941e\",\n  \"#fab70f\",\n  \"#fdde00\",\n  \"#d1d219\",\n  \"#8ec73f\",\n  \"#00a650\",\n  \"#00aa9c\",\n  \"#00adef\",\n  \"#0081cd\",\n  \"#005bab\",\n  \"#012a4a\",\n  \"#013a63\",\n  \"#06d6a0\",\n  \"#ef476f\",\n  \"#ff5d8f\",\n  \"#0496ff\",\n  \"#c879ff\",\n]\n\nfunction getInitialsFromName(name: string | null | undefined): string {\n  if (!name) return \"\"\n  const matches = [...name.matchAll(/(\\b\\w)/g)]\n  return (\n    (matches.shift()?.[1] ?? \"\") + (matches.pop()?.[1] ?? \"\")\n  ).toUpperCase()\n}\n\nfunction getAvatarColorByName(\n  name: string | null | undefined\n): React.CSSProperties {\n  const seed = name && name.length ? name : \"?\"\n  let index = seed[0].toUpperCase().charCodeAt(0)\n  const lastName = seed.split(\" \")[1]\n  if (lastName) {\n    index = Math.floor((index + lastName[0].toUpperCase().charCodeAt(0)) / 2)\n  }\n  index = Math.abs(index - 65) % AVATAR_NAME_PALETTE.length\n  return {\n    backgroundColor: AVATAR_NAME_PALETTE[index],\n    color: \"#fff\",\n  }\n}\n\nfunction getStringFromChildren(children: React.ReactNode): string {\n  let out = \"\"\n  React.Children.forEach(children, (child) => {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      out += child\n    }\n  })\n  return out\n}\n\ntype AvatarSize = \"default\" | \"sm\" | \"lg\"\n\ntype AvatarProps = AvatarPrimitive.Root.Props & {\n  size?: AvatarSize\n  tooltip?: React.ReactNode | false\n}\n\nfunction getAvatarLabelFromChildren(\n  children: React.ReactNode\n): React.ReactNode | undefined {\n  let alt: string | undefined\n  let name: string | undefined\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return\n    if (child.type === AvatarFallback) {\n      const props = child.props as AvatarFallbackProps\n      if (props.name) name = props.name\n    } else if (child.type === AvatarImage) {\n      const props = child.props as AvatarPrimitive.Image.Props\n      if (props.alt) alt = props.alt\n    }\n  })\n  return name ?? alt\n}\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  tooltip,\n  children,\n  ...props\n}: AvatarProps) {\n  const root = (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Root>\n  )\n\n  const resolved =\n    tooltip === undefined ? getAvatarLabelFromChildren(children) : tooltip\n  if (resolved === false || resolved == null || resolved === \"\") return root\n\n  return (\n    <Tooltip>\n      <TooltipTrigger render={root} />\n      <TooltipContent>{resolved}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AvatarFallbackProps = AvatarPrimitive.Fallback.Props & {\n  name?: string | null\n}\n\nfunction AvatarFallback({\n  className,\n  name,\n  children,\n  style,\n  ...props\n}: AvatarFallbackProps) {\n  const colorStyle = React.useMemo(() => {\n    const seed = name ?? getStringFromChildren(children)\n    return getAvatarColorByName(seed)\n  }, [name, children])\n  const initials = React.useMemo(\n    () => (name && children == null ? getInitialsFromName(name) : undefined),\n    [name, children]\n  )\n\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full font-medium text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      style={{ ...colorStyle, ...style }}\n      {...props}\n    >\n      {children ?? initials}\n    </AvatarPrimitive.Fallback>\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarBadge,\n  getAvatarLabelFromChildren,\n  getInitialsFromName,\n  getAvatarColorByName,\n}\nexport type { AvatarProps, AvatarFallbackProps }\n"],"mappings":";;;;;;;AAMA,MAAM,sBAAsB;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,MAAyC;AACpE,KAAI,CAAC,KAAM,QAAO;CAClB,MAAM,UAAU,CAAC,GAAG,KAAK,SAAS,UAAU,CAAC;AAC7C,UACG,QAAQ,OAAO,GAAG,MAAM,OAAO,QAAQ,KAAK,GAAG,MAAM,KACtD,aAAa;;AAGjB,SAAS,qBACP,MACqB;CACrB,MAAM,OAAO,QAAQ,KAAK,SAAS,OAAO;CAC1C,IAAI,QAAQ,KAAK,GAAG,aAAa,CAAC,WAAW,EAAE;CAC/C,MAAM,WAAW,KAAK,MAAM,IAAI,CAAC;AACjC,KAAI,SACF,SAAQ,KAAK,OAAO,QAAQ,SAAS,GAAG,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;AAE3E,SAAQ,KAAK,IAAI,QAAQ,GAAG,GAAG,oBAAoB;AACnD,QAAO;EACL,iBAAiB,oBAAoB;EACrC,OAAO;EACR;;AAGH,SAAS,sBAAsB,UAAmC;CAChE,IAAI,MAAM;AACV,SAAM,SAAS,QAAQ,WAAW,UAAU;AAC1C,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO;GAET;AACF,QAAO;;AAUT,SAAS,2BACP,UAC6B;CAC7B,IAAIA;CACJ,IAAIC;AACJ,SAAM,SAAS,QAAQ,WAAW,UAAU;AAC1C,MAAI,CAACC,QAAM,eAAe,MAAM,CAAE;AAClC,MAAI,MAAM,SAAS,gBAAgB;GACjC,MAAM,QAAQ,MAAM;AACpB,OAAI,MAAM,KAAM,QAAO,MAAM;aACpB,MAAM,SAAS,aAAa;GACrC,MAAM,QAAQ,MAAM;AACpB,OAAI,MAAM,IAAK,OAAM,MAAM;;GAE7B;AACF,QAAO,QAAQ;;AAGjB,SAASC,SAAO,EACd,WACA,OAAO,WACP,SACA,UACA,GAAG,SACW;CACd,MAAM,OACJ,oBAACC,OAAgB;EACf,aAAU;EACV,aAAW;EACX,WAAW,GACT,yPACA,UACD;EACD,GAAI;EAEH;GACoB;CAGzB,MAAM,WACJ,YAAY,SAAY,2BAA2B,SAAS,GAAG;AACjE,KAAI,aAAa,SAAS,YAAY,QAAQ,aAAa,GAAI,QAAO;AAEtE,QACE,qBAAC,sBACC,oBAAC,kBAAe,QAAQ,OAAQ,EAChC,oBAAC,4BAAgB,WAA0B,IACnC;;AAId,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;GACJ;;AAQN,SAAS,eAAe,EACtB,WACA,MACA,UACA,OACA,GAAG,SACmB;CACtB,MAAM,aAAaF,QAAM,cAAc;AAErC,SAAO,qBADM,QAAQ,sBAAsB,SAAS,CACnB;IAChC,CAAC,MAAM,SAAS,CAAC;CACpB,MAAM,WAAWA,QAAM,cACd,QAAQ,YAAY,OAAO,oBAAoB,KAAK,GAAG,QAC9D,CAAC,MAAM,SAAS,CACjB;AAED,QACE,oBAACE,OAAgB;EACf,aAAU;EACV,WAAW,GACT,mHACA,UACD;EACD,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;EAClC,GAAI;YAEH,YAAY;GACY;;AAI/B,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,0KACA,iFACA,6FACA,iFACA,UACD;EACD,GAAI;GACJ"}

package/dist/button-BiiFfKiR.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types2 from "class-variance-authority/types";
+
+//#region src/components/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types2.ClassProp) | undefined) => string;
+declare function Button$1({
+  className,
+  variant,
+  size,
+  ...props
+}: Button.Props & VariantProps<typeof buttonVariants>): react_jsx_runtime19.JSX.Element;
+//#endregion
+export { buttonVariants as n, Button$1 as t };
+//# sourceMappingURL=button-BiiFfKiR.d.ts.map

package/dist/button-BiiFfKiR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-BiiFfKiR.d.ts","names":[],"sources":["../src/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKM;;;IAmCL,+BAAA,CAAA;AAvCgE,iBAyCxD,QAAA,CAFR;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAOE,MAAA,CAAgB,KAPlB,GAO0B,YAP1B,CAAA,OAO8C,cAP9C,CAAA,CAAA,EAO6D,mBAAA,CAAA,GAAA,CAAA,OAP7D"}

package/dist/button-hBUFMmsZ.js

@@ -0,0 +1,47 @@
+import { t as cn } from "./utils-mWJR2N24.js";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+
+//#region src/components/button.tsx
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
+			lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			icon: "size-9",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button$1({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+
+//#endregion
+export { buttonVariants as n, Button$1 as t };
+//# sourceMappingURL=button-hBUFMmsZ.js.map

package/dist/button-hBUFMmsZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-hBUFMmsZ.js","names":["Button","ButtonPrimitive"],"sources":["../src/components/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@px-ui/ui/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,IACrB,8lBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,MAAM;GACP;EACD,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WACE;GACF,WACE;GACF,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,SAASA,SAAO,EACd,WACA,UAAU,WACV,OAAO,WACP,GAAG,SAC2D;AAC9D,QACE,oBAACC;EACC,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,GAAI;GACJ"}

package/dist/combobox-CnpyzZ7B.js

@@ -0,0 +1,334 @@
+import { t as cn } from "./utils-mWJR2N24.js";
+import { t as Button } from "./button-hBUFMmsZ.js";
+import { i as InputGroupInput, n as InputGroupAddon, r as InputGroupButton, t as InputGroup } from "./input-group-DqEkmpXW.js";
+import { t as Spinner } from "./spinner-Bo0sUZEg.js";
+import { n as useAsyncOptions } from "./use-async-options-wZ9LJ2BJ.js";
+import { t as use_infinite_scroll_default } from "./use-infinite-scroll-CpbhGGT5.js";
+import { t as useDebounce } from "./use-debounce-_qaEZqtt.js";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Combobox } from "@base-ui/react";
+
+//#region src/components/combobox.tsx
+const ComboboxAsyncContext = React$1.createContext({
+	isAsync: false,
+	isLoading: false,
+	isLoadingMore: false,
+	isError: false,
+	hasMore: false,
+	onLoadMore: () => {}
+});
+function useComboboxAsyncContext() {
+	return React$1.useContext(ComboboxAsyncContext);
+}
+const ComboboxListRefContext = React$1.createContext(null);
+const ComboboxAnchorContext = React$1.createContext(null);
+const ComboboxInsidePopupContext = React$1.createContext(false);
+function useAttachComboboxAnchor(userRef) {
+	const ctxRef = React$1.useContext(ComboboxAnchorContext);
+	const insidePopup = React$1.useContext(ComboboxInsidePopupContext);
+	return React$1.useCallback((node) => {
+		if (typeof userRef === "function") userRef(node);
+		else if (userRef && typeof userRef === "object") userRef.current = node;
+		if (ctxRef && !insidePopup) ctxRef.current = node;
+	}, [
+		ctxRef,
+		insidePopup,
+		userRef
+	]);
+}
+function normalizeInputValue(value) {
+	return Array.isArray(value) ? value.join(",") : String(value ?? "");
+}
+function Combobox$1({ loadOptions, debounceMs, isLoading = false, ...props }) {
+	const anchorRef = React$1.useRef(null);
+	const inner = loadOptions ? /* @__PURE__ */ jsx(ComboboxAsyncRoot, {
+		loadOptions,
+		debounceMs,
+		isLoading,
+		...props
+	}) : /* @__PURE__ */ jsx(ComboboxAsyncContext.Provider, {
+		value: {
+			isAsync: false,
+			isLoading,
+			isLoadingMore: false,
+			isError: false,
+			hasMore: false,
+			onLoadMore: () => {}
+		},
+		children: /* @__PURE__ */ jsx(Combobox.Root, {
+			autoHighlight: true,
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(ComboboxAnchorContext.Provider, {
+		value: anchorRef,
+		children: inner
+	});
+}
+function ComboboxAsyncRoot({ loadOptions, debounceMs = 500, open: openProp, inputValue: inputValueProp, defaultInputValue, onOpenChange, onInputValueChange, filter: _ignoredFilter, items: _ignoredItems, autoHighlight = "always", isLoading: isLoadingProp = false, children, ...props }) {
+	const [internalOpen, setInternalOpen] = React$1.useState(false);
+	const open = openProp ?? internalOpen;
+	const handleOpenChange = (next, eventDetails) => {
+		if (openProp === void 0) setInternalOpen(next);
+		onOpenChange?.(next, eventDetails);
+	};
+	const initialSearchValue = normalizeInputValue(inputValueProp ?? defaultInputValue);
+	const [searchValue, setSearchValue] = React$1.useState(initialSearchValue);
+	const [debouncedSearchValue, setDebouncedSearchValue] = React$1.useState(initialSearchValue);
+	React$1.useEffect(() => {
+		if (inputValueProp !== void 0) setSearchValue(normalizeInputValue(inputValueProp));
+	}, [inputValueProp]);
+	useDebounce(() => {
+		setDebouncedSearchValue(searchValue);
+	}, debounceMs, [searchValue]);
+	const handleInputValueChange = (val, eventDetails) => {
+		if (eventDetails?.reason !== "item-press") setSearchValue(val);
+		onInputValueChange?.(val, eventDetails);
+	};
+	const asyncState = useAsyncOptions(loadOptions, {
+		isOpen: open,
+		inputValue: debouncedSearchValue
+	});
+	const contextValue = React$1.useMemo(() => ({
+		isAsync: true,
+		isLoading: isLoadingProp || asyncState.isLoading,
+		isLoadingMore: asyncState.isLoadingMore,
+		isError: asyncState.isError,
+		hasMore: !!asyncState.hasMore,
+		onLoadMore: asyncState.onLoadMore
+	}), [
+		isLoadingProp,
+		asyncState.isLoading,
+		asyncState.isLoadingMore,
+		asyncState.isError,
+		asyncState.hasMore,
+		asyncState.onLoadMore
+	]);
+	return /* @__PURE__ */ jsx(ComboboxAsyncContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Combobox.Root, {
+			...props,
+			items: asyncState.items,
+			filter: null,
+			autoHighlight,
+			open,
+			inputValue: inputValueProp,
+			defaultInputValue,
+			onOpenChange: handleOpenChange,
+			onInputValueChange: handleInputValueChange,
+			children
+		})
+	});
+}
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ref, ...props }) {
+	const attachAnchor = useAttachComboboxAnchor(ref);
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		ref: attachAnchor,
+		"data-slot": "combobox-trigger",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" })]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, children, disabled, showTrigger = true, showClear = true, ...props }) {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		ref: useAttachComboboxAnchor(),
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, { ...disabled !== void 0 ? { disabled } : {} }),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					...disabled !== void 0 ? { disabled } : {}
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { ...disabled !== void 0 ? { disabled } : {} })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, children, ...props }) {
+	const ctxAnchor = React$1.useContext(ComboboxAnchorContext);
+	const resolvedAnchor = anchor ?? ctxAnchor ?? void 0;
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor: resolvedAnchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Combobox.Popup, {
+			"data-slot": "combobox-content",
+			className: cn("group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
+			...props,
+			children: /* @__PURE__ */ jsx(ComboboxInsidePopupContext.Provider, {
+				value: true,
+				children
+			})
+		})
+	}) });
+}
+function ComboboxList({ className, children, ref, ...props }) {
+	const { isAsync, hasMore } = useComboboxAsyncContext();
+	const [listEl, setListEl] = React$1.useState(null);
+	const handleListRef = React$1.useCallback((node) => {
+		setListEl(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const resolvedChildren = React$1.useMemo(() => {
+		if (isAsync && typeof children === "function") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Combobox.Collection, { children }), hasMore ? /* @__PURE__ */ jsx(ComboboxLoadMoreSentinel, {}) : null] });
+		return children;
+	}, [
+		isAsync,
+		hasMore,
+		children
+	]);
+	return /* @__PURE__ */ jsx(ComboboxListRefContext.Provider, {
+		value: listEl,
+		children: /* @__PURE__ */ jsx(Combobox.List, {
+			ref: handleListRef,
+			"data-slot": "combobox-list",
+			className: cn("ppx-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1", className),
+			...props,
+			children: resolvedChildren
+		})
+	});
+}
+function ComboboxLoadMoreSentinel() {
+	const { isLoadingMore, hasMore, onLoadMore, isError } = useComboboxAsyncContext();
+	const [ref] = use_infinite_scroll_default({
+		isLoadingMore,
+		hasMore,
+		onLoadMore,
+		disabled: isError,
+		root: React$1.useContext(ComboboxListRefContext),
+		rootMargin: "0px 0px 80px 0px"
+	});
+	return /* @__PURE__ */ jsx(Combobox.Status, {
+		ref,
+		"data-slot": "combobox-load-more",
+		"aria-label": isLoadingMore ? "Loading more options" : void 0,
+		className: "flex h-10 items-center justify-center",
+		children: isLoadingMore && /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground size-4" })
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn("outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className: cn(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxStatus({ loading = "Loading…", error = "Failed to load options", empty = "No options found", className, ...props }) {
+	const { isAsync, isLoading, isError } = useComboboxAsyncContext();
+	if (isLoading || isAsync && isError) return /* @__PURE__ */ jsx(Combobox.Status, {
+		"data-slot": "combobox-status",
+		className: cn("text-muted-foreground flex w-full items-center justify-center py-2 text-center text-sm", className),
+		...props,
+		children: isLoading ? loading : error
+	});
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm", className),
+		...props,
+		children: empty
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("bg-border -mx-1 my-1 h-px", className),
+		...props
+	});
+}
+function ComboboxChips({ className, ref, ...props }) {
+	const attachAnchor = useAttachComboboxAnchor(ref);
+	return /* @__PURE__ */ jsx(Combobox.Chips, {
+		ref: attachAnchor,
+		"data-slot": "combobox-chips",
+		className: cn("border-input shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm transition-[color,box-shadow]", className),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0 flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs"
+			}),
+			className: "-ms-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 outline-none", className),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return React$1.useRef(null);
+}
+
+//#endregion
+export { useComboboxAnchor as _, ComboboxClear as a, ComboboxGroup as c, ComboboxLabel as d, ComboboxList as f, ComboboxValue as g, ComboboxTrigger as h, ComboboxChipsInput as i, ComboboxInput as l, ComboboxStatus as m, ComboboxChip as n, ComboboxCollection as o, ComboboxSeparator as p, ComboboxChips as r, ComboboxContent as s, Combobox$1 as t, ComboboxItem as u };
+//# sourceMappingURL=combobox-CnpyzZ7B.js.map