@dirstack/ui 1.0.0

package/dist/components/search-input.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/variants.js";
+import { SearchIcon, XIcon } from "../lib/icons.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-input.tsx
+/**
+* Text input with a leading search icon and a clear button once it holds a value. Labels and
+* placeholders come from the caller.
+*/
+function SearchInput({ value, onValueChange, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }),
+			/* @__PURE__ */ jsx(Input, {
+				value,
+				className: "px-9",
+				onChange: (event) => onValueChange(event.target.value),
+				...props
+			}),
+			value.length > 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				"aria-label": "Clear search",
+				prefix: /* @__PURE__ */ jsx(XIcon, {}),
+				className: "absolute top-1/2 right-1 -translate-y-1/2",
+				onClick: () => onValueChange("")
+			})
+		]
+	});
+}
+//#endregion
+export { SearchInput };
+
+//# sourceMappingURL=search-input.js.map

package/dist/components/search-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.js","names":[],"sources":["../../src/components/search-input.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { Button } from \"~/components/button\"\nimport { Input } from \"~/components/input\"\nimport { SearchIcon, XIcon } from \"~/lib/icons\"\nimport { cn } from \"~/lib/variants\"\n\ntype SearchInputProps = Omit<ComponentProps<typeof Input>, \"value\" | \"onChange\"> & {\n  value: string\n  onValueChange: (value: string) => void\n}\n\n/**\n * Text input with a leading search icon and a clear button once it holds a value. Labels and\n * placeholders come from the caller.\n */\nexport function SearchInput({ value, onValueChange, className, ...props }: SearchInputProps) {\n  return (\n    <div className={cn(\"relative\", className)}>\n      <SearchIcon className=\"pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\" />\n\n      <Input\n        value={value}\n        className=\"px-9\"\n        onChange={event => onValueChange(event.target.value)}\n        {...props}\n      />\n\n      {value.length > 0 && (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          aria-label=\"Clear search\"\n          prefix={<XIcon />}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n          onClick={() => onValueChange(\"\")}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,YAAY,EAAE,OAAO,eAAe,WAAW,GAAG,SAA2B;CAC3F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;EAAxC,UAAA;GACE,oBAAC,YAAD,EAAY,WAAU,4FAA6F,CAAA;GAEnH,oBAAC,OAAD;IACS;IACP,WAAU;IACV,WAAU,UAAS,cAAc,MAAM,OAAO,KAAK;IACnD,GAAI;GACL,CAAA;GAEA,MAAM,SAAS,KACd,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,cAAW;IACX,QAAQ,oBAAC,OAAD,CAAQ,CAAA;IAChB,WAAU;IACV,eAAe,cAAc,EAAE;GAChC,CAAA;EAEA;;AAET"}

package/dist/components/section-header.d.ts

@@ -0,0 +1,107 @@
+import { VariantProps } from "../lib/variants.js";
+import { Stack } from "./stack.js";
+import { HeadingProps } from "./heading.js";
+import { useRender } from "@base-ui/react/use-render";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/section-header.d.ts
+declare const sectionHeaderVariants: import("tailwind-variants").TVReturnType<{
+  alignment: {
+    left: "justify-between text-start";
+    center: "justify-center text-center";
+  };
+  size: {
+    page: "gap-y-3 gap-x-6 lg:gap-x-12";
+    card: "gap-y-2 gap-x-6";
+    panel: "gap-y-2 gap-x-6";
+    hero: "gap-y-3 gap-x-6 lg:gap-x-12";
+  };
+  wrap: {
+    true: "flex-wrap";
+    false: "flex-nowrap";
+  };
+}, undefined, "flex items-center w-full min-w-0", {
+  alignment: {
+    left: "justify-between text-start";
+    center: "justify-center text-center";
+  };
+  size: {
+    page: "gap-y-3 gap-x-6 lg:gap-x-12";
+    card: "gap-y-2 gap-x-6";
+    panel: "gap-y-2 gap-x-6";
+    hero: "gap-y-3 gap-x-6 lg:gap-x-12";
+  };
+  wrap: {
+    true: "flex-wrap";
+    false: "flex-nowrap";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  alignment: {
+    left: "justify-between text-start";
+    center: "justify-center text-center";
+  };
+  size: {
+    page: "gap-y-3 gap-x-6 lg:gap-x-12";
+    card: "gap-y-2 gap-x-6";
+    panel: "gap-y-2 gap-x-6";
+    hero: "gap-y-3 gap-x-6 lg:gap-x-12";
+  };
+  wrap: {
+    true: "flex-wrap";
+    false: "flex-nowrap";
+  };
+}, undefined>>;
+type SectionHeaderProps = Omit<useRender.ComponentProps<"div">, "title"> & Omit<VariantProps<typeof sectionHeaderVariants>, "wrap"> & {
+  /**
+   * Keep the title block and the actions on one line instead of wrapping them.
+   */
+  wrap?: boolean;
+  /**
+   * Title block. Given any of `title`/`description`/`leading`/`actions`, the header renders
+   * its own `SectionHeaderBody` (empty if there is nothing but actions, so they still sit right);
+   * leave them all out to compose the body by hand, e.g. an entity header with dot-joined
+   * meta or the dashboard greeting.
+   */
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /**
+   * Leading visual beside the title, e.g. an entity avatar.
+   */
+  leading?: ReactNode;
+};
+/**
+ * The one header for every surface in the app: pages, cards, list panels, dialogs and settings
+ * sections. Pass `title`/`description`/`actions` for the standard block, or compose
+ * `SectionHeaderBody` + `SectionHeaderActions` as children when the content is bespoke.
+ */
+declare function SectionHeader({ className, alignment, size, wrap, title, description, actions, leading, children, render, ...props }: SectionHeaderProps): import("react").JSX.Element;
+/**
+ * The page title. Its visual size and semantic level both follow the header's `size`, so a
+ * page heading stays the route's single `<h1>` while cards and panels render `<h2>`s. Pass
+ * `size`/`as` to override either one on its own.
+ */
+declare function SectionHeaderTitle({ size, as, ...props }: HeadingProps): import("react").JSX.Element;
+type SectionHeaderBodyProps = ComponentProps<"div"> & {
+  /**
+   * Leading visual, e.g. an entity avatar.
+   */
+  leading?: ReactNode;
+};
+/**
+ * The one title block for every header in the app (pages, cards, dialogs, settings sections):
+ * an optional leading visual beside a column of `SectionHeaderTitle` + `SectionHeaderDescription`. Change the
+ * spacing here and it changes everywhere.
+ */
+declare function SectionHeaderBody({ leading, children, className, ...props }: SectionHeaderBodyProps): import("react").JSX.Element;
+/**
+ * The muted line under a title. Wraps by default; pass `truncate` for one-line entity meta.
+ */
+declare function SectionHeaderDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/**
+ * Right-aligned actions. Stops shrinking when the header is `wrap={false}`, so a long title
+ * truncates instead of squeezing the buttons.
+ */
+declare function SectionHeaderActions({ className, ...props }: ComponentProps<typeof Stack>): import("react").JSX.Element;
+//#endregion
+export { SectionHeader, SectionHeaderActions, SectionHeaderBody, SectionHeaderDescription, SectionHeaderTitle };
+//# sourceMappingURL=section-header.d.ts.map

package/dist/components/section-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.d.ts","names":[],"sources":["../../src/components/section-header.tsx"],"mappings":";;;;;;cAOM,mDAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CtB,qBAAqB,KAAK,UAAU,kCACvC,KAAK,oBAAoB;;;;EAIvB;;;;;;;EAOA,QAAQ;EACR,cAAc;EACd,UAAU;;;;EAIV,UAAU;;;;;;;iBAQL,gBACP,WACA,WACA,MACA,MACA,OACA,aACA,SACA,SACA,UACA,WACG,SACF,qCAAkB,IAAA;;;;;;iBAmCZ,qBAAqB,MAAM,OAAO,SAAS,+BAAY,IAAA;KAM3D,yBAAyB;;;;EAI5B,UAAU;;;;;;;iBAQH,oBAAoB,SAAS,UAAU,cAAc,SAAS,yCAAsB,IAAA;;;;iBAYpF,2BAA2B,cAAc,SAAS,sCAAmB,IAAA;;;;;iBAQrE,uBAAuB,cAAc,SAAS,sBAAsB,yBAAM,IAAA"}

package/dist/components/section-header.js

@@ -0,0 +1,147 @@
+import { cn, variants } from "../lib/variants.js";
+import { Stack } from "./stack.js";
+import { Heading } from "./heading.js";
+import { descriptionClasses } from "../lib/classes.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { createContext, use } from "react";
+//#region src/components/section-header.tsx
+const sectionHeaderVariants = variants({
+	base: "flex items-center w-full min-w-0",
+	variants: {
+		alignment: {
+			left: "justify-between text-start",
+			center: "justify-center text-center"
+		},
+		size: {
+			page: "gap-y-3 gap-x-6 lg:gap-x-12",
+			card: "gap-y-2 gap-x-6",
+			panel: "gap-y-2 gap-x-6",
+			hero: "gap-y-3 gap-x-6 lg:gap-x-12"
+		},
+		wrap: {
+			true: "flex-wrap",
+			false: "flex-nowrap"
+		}
+	},
+	defaultVariants: {
+		alignment: "left",
+		wrap: true
+	}
+});
+/**
+* The title each header scale gets, alongside the spacing the variant above gives it: `page`
+* for a route heading, `card` for a standalone card, `panel` for a dashboard or list panel,
+* `hero` for the centered auth and callback screens. The `as` entry keeps the heading outline
+* intact — one `<h1>` per route, `<h2>` for everything nested inside it.
+*/
+const sectionHeaderTitles = {
+	page: {
+		size: "h3",
+		as: "h1"
+	},
+	card: {
+		size: "h4",
+		as: "h2"
+	},
+	panel: {
+		size: "h5",
+		as: "h2"
+	},
+	hero: {
+		size: "h2",
+		as: "h1"
+	}
+};
+const SectionHeaderContext = createContext({
+	size: "page",
+	wrap: true
+});
+/**
+* The one header for every surface in the app: pages, cards, list panels, dialogs and settings
+* sections. Pass `title`/`description`/`actions` for the standard block, or compose
+* `SectionHeaderBody` + `SectionHeaderActions` as children when the content is bespoke.
+*/
+function SectionHeader({ className, alignment = "left", size = "page", wrap = true, title, description, actions, leading, children, render, ...props }) {
+	const element = useRender({
+		render,
+		defaultTagName: "div",
+		props: {
+			className: cn(sectionHeaderVariants({
+				alignment,
+				size,
+				wrap,
+				className
+			})),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				(title || description || leading || actions) && /* @__PURE__ */ jsxs(SectionHeaderBody, {
+					leading,
+					className: cn(alignment === "center" && "justify-center"),
+					children: [title && /* @__PURE__ */ jsx(SectionHeaderTitle, { children: title }), description && /* @__PURE__ */ jsx(SectionHeaderDescription, { children: description })]
+				}),
+				actions && /* @__PURE__ */ jsx(SectionHeaderActions, { children: actions }),
+				children
+			] }),
+			...props
+		}
+	});
+	return /* @__PURE__ */ jsx(SectionHeaderContext, {
+		value: {
+			size,
+			wrap
+		},
+		children: element
+	});
+}
+/**
+* The page title. Its visual size and semantic level both follow the header's `size`, so a
+* page heading stays the route's single `<h1>` while cards and panels render `<h2>`s. Pass
+* `size`/`as` to override either one on its own.
+*/
+function SectionHeaderTitle({ size, as, ...props }) {
+	const preset = sectionHeaderTitles[use(SectionHeaderContext).size];
+	return /* @__PURE__ */ jsx(Heading, {
+		size: size ?? preset.size,
+		as: as ?? preset.as,
+		...props
+	});
+}
+/**
+* The one title block for every header in the app (pages, cards, dialogs, settings sections):
+* an optional leading visual beside a column of `SectionHeaderTitle` + `SectionHeaderDescription`. Change the
+* spacing here and it changes everywhere.
+*/
+function SectionHeaderBody({ leading, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-1 items-center gap-3", className),
+		...props,
+		children: [leading, /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children
+		})]
+	});
+}
+/**
+* The muted line under a title. Wraps by default; pass `truncate` for one-line entity meta.
+*/
+function SectionHeaderDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn(descriptionClasses, className),
+		...props
+	});
+}
+/**
+* Right-aligned actions. Stops shrinking when the header is `wrap={false}`, so a long title
+* truncates instead of squeezing the buttons.
+*/
+function SectionHeaderActions({ className, ...props }) {
+	const { wrap } = use(SectionHeaderContext);
+	return /* @__PURE__ */ jsx(Stack, {
+		className: cn("-my-0.5", !wrap && "shrink-0", className),
+		...props
+	});
+}
+//#endregion
+export { SectionHeader, SectionHeaderActions, SectionHeaderBody, SectionHeaderDescription, SectionHeaderTitle };
+
+//# sourceMappingURL=section-header.js.map

package/dist/components/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.js","names":[],"sources":["../../src/components/section-header.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport { type ComponentProps, createContext, type ReactNode, use } from \"react\"\nimport { Heading, type HeadingProps } from \"~/components/heading\"\nimport { Stack } from \"~/components/stack\"\nimport { descriptionClasses } from \"~/lib/classes\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst sectionHeaderVariants = variants({\n  base: \"flex items-center w-full min-w-0\",\n\n  variants: {\n    alignment: {\n      left: \"justify-between text-start\",\n      center: \"justify-center text-center\",\n    },\n    size: {\n      page: \"gap-y-3 gap-x-6 lg:gap-x-12\",\n      card: \"gap-y-2 gap-x-6\",\n      panel: \"gap-y-2 gap-x-6\",\n      hero: \"gap-y-3 gap-x-6 lg:gap-x-12\",\n    },\n    wrap: {\n      true: \"flex-wrap\",\n      false: \"flex-nowrap\",\n    },\n  },\n\n  defaultVariants: {\n    alignment: \"left\",\n    wrap: true,\n  },\n})\n\ntype SectionHeaderSize = NonNullable<VariantProps<typeof sectionHeaderVariants>[\"size\"]>\n\n/**\n * The title each header scale gets, alongside the spacing the variant above gives it: `page`\n * for a route heading, `card` for a standalone card, `panel` for a dashboard or list panel,\n * `hero` for the centered auth and callback screens. The `as` entry keeps the heading outline\n * intact — one `<h1>` per route, `<h2>` for everything nested inside it.\n */\nconst sectionHeaderTitles = {\n  page: { size: \"h3\", as: \"h1\" },\n  card: { size: \"h4\", as: \"h2\" },\n  panel: { size: \"h5\", as: \"h2\" },\n  hero: { size: \"h2\", as: \"h1\" },\n} as const satisfies Record<SectionHeaderSize, { size: HeadingProps[\"size\"]; as: string }>\n\nconst SectionHeaderContext = createContext<{ size: SectionHeaderSize; wrap: boolean }>({\n  size: \"page\",\n  wrap: true,\n})\n\ntype SectionHeaderProps = Omit<useRender.ComponentProps<\"div\">, \"title\"> &\n  Omit<VariantProps<typeof sectionHeaderVariants>, \"wrap\"> & {\n    /**\n     * Keep the title block and the actions on one line instead of wrapping them.\n     */\n    wrap?: boolean\n    /**\n     * Title block. Given any of `title`/`description`/`leading`/`actions`, the header renders\n     * its own `SectionHeaderBody` (empty if there is nothing but actions, so they still sit right);\n     * leave them all out to compose the body by hand, e.g. an entity header with dot-joined\n     * meta or the dashboard greeting.\n     */\n    title?: ReactNode\n    description?: ReactNode\n    actions?: ReactNode\n    /**\n     * Leading visual beside the title, e.g. an entity avatar.\n     */\n    leading?: ReactNode\n  }\n\n/**\n * The one header for every surface in the app: pages, cards, list panels, dialogs and settings\n * sections. Pass `title`/`description`/`actions` for the standard block, or compose\n * `SectionHeaderBody` + `SectionHeaderActions` as children when the content is bespoke.\n */\nfunction SectionHeader({\n  className,\n  alignment = \"left\",\n  size = \"page\",\n  wrap = true,\n  title,\n  description,\n  actions,\n  leading,\n  children,\n  render,\n  ...props\n}: SectionHeaderProps) {\n  const element = useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      className: cn(sectionHeaderVariants({ alignment, size, wrap, className })),\n      children: (\n        <>\n          {(title || description || leading || actions) && (\n            <SectionHeaderBody\n              leading={leading}\n              className={cn(alignment === \"center\" && \"justify-center\")}\n            >\n              {title && <SectionHeaderTitle>{title}</SectionHeaderTitle>}\n              {description && <SectionHeaderDescription>{description}</SectionHeaderDescription>}\n            </SectionHeaderBody>\n          )}\n\n          {actions && <SectionHeaderActions>{actions}</SectionHeaderActions>}\n\n          {children}\n        </>\n      ),\n      ...props,\n    },\n  })\n\n  return <SectionHeaderContext value={{ size, wrap }}>{element}</SectionHeaderContext>\n}\n\n/**\n * The page title. Its visual size and semantic level both follow the header's `size`, so a\n * page heading stays the route's single `<h1>` while cards and panels render `<h2>`s. Pass\n * `size`/`as` to override either one on its own.\n */\nfunction SectionHeaderTitle({ size, as, ...props }: HeadingProps) {\n  const preset = sectionHeaderTitles[use(SectionHeaderContext).size]\n\n  return <Heading size={size ?? preset.size} as={as ?? preset.as} {...props} />\n}\n\ntype SectionHeaderBodyProps = ComponentProps<\"div\"> & {\n  /**\n   * Leading visual, e.g. an entity avatar.\n   */\n  leading?: ReactNode\n}\n\n/**\n * The one title block for every header in the app (pages, cards, dialogs, settings sections):\n * an optional leading visual beside a column of `SectionHeaderTitle` + `SectionHeaderDescription`. Change the\n * spacing here and it changes everywhere.\n */\nfunction SectionHeaderBody({ leading, children, className, ...props }: SectionHeaderBodyProps) {\n  return (\n    <div className={cn(\"flex min-w-0 flex-1 items-center gap-3\", className)} {...props}>\n      {leading}\n      <div className=\"flex min-w-0 flex-col gap-1.5\">{children}</div>\n    </div>\n  )\n}\n\n/**\n * The muted line under a title. Wraps by default; pass `truncate` for one-line entity meta.\n */\nfunction SectionHeaderDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return <p className={cn(descriptionClasses, className)} {...props} />\n}\n\n/**\n * Right-aligned actions. Stops shrinking when the header is `wrap={false}`, so a long title\n * truncates instead of squeezing the buttons.\n */\nfunction SectionHeaderActions({ className, ...props }: ComponentProps<typeof Stack>) {\n  const { wrap } = use(SectionHeaderContext)\n\n  return <Stack className={cn(\"-my-0.5\", !wrap && \"shrink-0\", className)} {...props} />\n}\n\nexport {\n  SectionHeader,\n  SectionHeaderTitle,\n  SectionHeaderBody,\n  SectionHeaderDescription,\n  SectionHeaderActions,\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,wBAAwB,SAAS;CACrC,MAAM;CAEN,UAAU;EACR,WAAW;GACT,MAAM;GACN,QAAQ;EACV;EACA,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,MAAM;GACN,OAAO;EACT;CACF;CAEA,iBAAiB;EACf,WAAW;EACX,MAAM;CACR;AACF,CAAC;;;;;;;AAUD,MAAM,sBAAsB;CAC1B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;CAC7B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;CAC7B,OAAO;EAAE,MAAM;EAAM,IAAI;CAAK;CAC9B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;AAC/B;AAEA,MAAM,uBAAuB,cAA0D;CACrF,MAAM;CACN,MAAM;AACR,CAAC;;;;;;AA4BD,SAAS,cAAc,EACrB,WACA,YAAY,QACZ,OAAO,QACP,OAAO,MACP,OACA,aACA,SACA,SACA,UACA,QACA,GAAG,SACkB;CACrB,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO;GACL,WAAW,GAAG,sBAAsB;IAAE;IAAW;IAAM;IAAM;GAAU,CAAC,CAAC;GACzE,UACE,qBAAA,UAAA,EAAA,UAAA;KACI,SAAS,eAAe,WAAW,YACnC,qBAAC,mBAAD;KACW;KACT,WAAW,GAAG,cAAc,YAAY,gBAAgB;KAF1D,UAAA,CAIG,SAAS,oBAAC,oBAAD,EAAA,UAAqB,MAA0B,CAAA,GACxD,eAAe,oBAAC,0BAAD,EAAA,UAA2B,YAAsC,CAAA,CAChE;;IAGpB,WAAW,oBAAC,sBAAD,EAAA,UAAuB,QAA8B,CAAA;IAEhE;GACD,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;CAED,OAAO,oBAAC,sBAAD;EAAsB,OAAO;GAAE;GAAM;EAAK;EAAI,UAAA;CAA8B,CAAA;AACrF;;;;;;AAOA,SAAS,mBAAmB,EAAE,MAAM,IAAI,GAAG,SAAuB;CAChE,MAAM,SAAS,oBAAoB,IAAI,oBAAoB,CAAC,CAAC;CAE7D,OAAO,oBAAC,SAAD;EAAS,MAAM,QAAQ,OAAO;EAAM,IAAI,MAAM,OAAO;EAAI,GAAI;CAAQ,CAAA;AAC9E;;;;;;AAcA,SAAS,kBAAkB,EAAE,SAAS,UAAU,WAAW,GAAG,SAAiC;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0CAA0C,SAAS;EAAG,GAAI;EAA7E,UAAA,CACG,SACD,oBAAC,OAAD;GAAK,WAAU;GAAiC;EAAc,CAAA,CAC3D;;AAET;;;;AAKA,SAAS,yBAAyB,EAAE,WAAW,GAAG,SAA8B;CAC9E,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtE;;;;;AAMA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CACnF,MAAM,EAAE,SAAS,IAAI,oBAAoB;CAEzC,OAAO,oBAAC,OAAD;EAAO,WAAW,GAAG,WAAW,CAAC,QAAQ,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtF"}

package/dist/components/select.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from "../lib/variants.js";
+import { inputVariants } from "./input.js";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/components/select.d.ts
+declare const Select: typeof Select$1.Root;
+declare const SelectGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SelectValue: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare function SelectTrigger({ children, className, hover, focus, size, ...props }: Select$1.Trigger.Props & VariantProps<typeof inputVariants>): import("react").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: Select$1.ScrollUpArrow.Props): import("react").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: Select$1.ScrollDownArrow.Props): import("react").JSX.Element;
+declare function SelectContent({ className, children, align, side, sideOffset, alignItemWithTrigger, ...props }: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "side" | "sideOffset" | "alignItemWithTrigger">): import("react").JSX.Element;
+declare function SelectLabel({ className, ...props }: Select$1.GroupLabel.Props): import("react").JSX.Element;
+declare function SelectItem({ className, children, label, ...props }: Select$1.Item.Props): import("react").JSX.Element;
+declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): import("react").JSX.Element;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/components/select.tsx"],"mappings":";;;;cAQM,eAAM,SAAA;cACN,6BAAW,0BAAA,8BAAA,2CAAA,cAAA;cACX,6BAAW,0BAAA,8BAAA,2CAAA,cAAA;iBAER,gBACP,UACA,WACA,OACA,OACA,SACG,SACF,SAAgB,QAAQ,QAAQ,oBAAoB,iCAAc,IAAA;iBAmB5D,uBAAuB,cAAc,SAAS,SAAgB,cAAc,wBAAK,IAAA;iBAWjF,yBAAyB,cAAc,SAAS,SAAgB,gBAAgB,wBAAK,IAAA;iBAqBrF,gBACP,WACA,UACA,OACA,MACA,YACA,yBACG,SACF,SAAgB,MAAM,QACvB,KACE,SAAgB,WAAW,mFAE5B,IAAA;iBA2BM,cAAc,cAAc,SAAS,SAAgB,WAAW,wBAAK,IAAA;iBASrE,aAAa,WAAW,UAAU,UAAU,SAAS,SAAgB,KAAK,wBAAK,IAAA;iBAoB/E,kBAAkB,cAAc,SAAS,SAAgB,UAAU,wBAAK,IAAA"}

package/dist/components/select.js

@@ -0,0 +1,94 @@
+"use client";
+import { cn, variants } from "../lib/variants.js";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../lib/icons.js";
+import { popoverAnimationClasses } from "../lib/classes.js";
+import { inputVariants } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/components/select.tsx
+const Select = Select$1.Root;
+const SelectGroup = Select$1.Group;
+const SelectValue = Select$1.Value;
+function SelectTrigger({ children, className, hover = true, focus = true, size, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		className: cn(inputVariants({
+			hover,
+			focus,
+			size
+		}), "flex items-center justify-between", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		}), /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ml-1 size-4 shrink-0 opacity-50" }) })]
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+		className: cn("flex cursor-pointer items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+		className: cn("flex cursor-pointer items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+}
+const selectScrollButtonVariants = variants({
+	base: "absolute inset-x-0 z-10 bg-background animate-in fade-in-0 duration-300",
+	variants: { position: {
+		top: "top-0 mask-b-from-0",
+		bottom: "bottom-0 mask-t-from-0"
+	} }
+});
+function SelectContent({ className, children, align, side, sideOffset = 4, alignItemWithTrigger = false, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		sideOffset,
+		align,
+		side,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
+			className: cn("relative z-50 isolate max-h-(--available-height) min-w-(--anchor-width) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md backdrop-blur-xs", !alignItemWithTrigger && popoverAnimationClasses, className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, { className: selectScrollButtonVariants({ position: "top" }) }),
+				/* @__PURE__ */ jsx(Select$1.List, {
+					className: "p-1",
+					children
+				}),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, { className: selectScrollButtonVariants({ position: "bottom" }) })
+			]
+		})
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		className: cn("px-2 py-1.5 text-sm font-medium", className),
+		...props
+	});
+}
+function SelectItem({ className, children, label, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		label: label ?? (typeof children === "string" ? children : void 0),
+		className: cn("relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-control text-secondary-foreground outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Separator, {
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\"\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\nimport { inputVariants } from \"~/components/input\"\nimport { popoverAnimationClasses } from \"~/lib/classes\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from \"~/lib/icons\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst Select = SelectPrimitive.Root\nconst SelectGroup = SelectPrimitive.Group\nconst SelectValue = SelectPrimitive.Value\n\nfunction SelectTrigger({\n  children,\n  className,\n  hover = true,\n  focus = true,\n  size,\n  ...props\n}: SelectPrimitive.Trigger.Props & VariantProps<typeof inputVariants>) {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        inputVariants({ hover, focus, size }),\n        \"flex items-center justify-between\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"truncate\">{children}</span>\n\n      <SelectPrimitive.Icon\n        render={<ChevronsUpDownIcon className=\"ml-1 size-4 shrink-0 opacity-50\" />}\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpArrow.Props) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      className={cn(\"flex cursor-pointer items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownArrow.Props) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      className={cn(\"flex cursor-pointer items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nconst selectScrollButtonVariants = variants({\n  base: \"absolute inset-x-0 z-10 bg-background animate-in fade-in-0 duration-300\",\n  variants: {\n    position: {\n      top: \"top-0 mask-b-from-0\",\n      bottom: \"bottom-0 mask-t-from-0\",\n    },\n  },\n})\n\nfunction SelectContent({\n  className,\n  children,\n  align,\n  side,\n  sideOffset = 4,\n  alignItemWithTrigger = false,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          className={cn(\n            \"relative z-50 isolate max-h-(--available-height) min-w-(--anchor-width) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md backdrop-blur-xs\",\n            !alignItemWithTrigger && popoverAnimationClasses,\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton className={selectScrollButtonVariants({ position: \"top\" })} />\n          <SelectPrimitive.List className=\"p-1\">{children}</SelectPrimitive.List>\n          <SelectScrollDownButton className={selectScrollButtonVariants({ position: \"bottom\" })} />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className={cn(\"px-2 py-1.5 text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({ className, children, label, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      label={label ?? (typeof children === \"string\" ? children : undefined)}\n      className={cn(\n        \"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-control text-secondary-foreground outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props} />\n  )\n}\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,SAASA,SAAgB;AAC/B,MAAM,cAAcA,SAAgB;AACpC,MAAM,cAAcA,SAAgB;AAEpC,SAAS,cAAc,EACrB,UACA,WACA,QAAQ,MACR,QAAQ,MACR,MACA,GAAG,SACkE;CACrE,OACE,qBAACA,SAAgB,SAAjB;EACE,WAAW,GACT,cAAc;GAAE;GAAO;GAAO;EAAK,CAAC,GACpC,qCACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,GAE3C,oBAACA,SAAgB,MAAjB,EACE,QAAQ,oBAAC,oBAAD,EAAoB,WAAU,kCAAmC,CAAA,EAC1E,CAAA,CACsB;;AAE7B;AAEA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAA8C;CAC1F,OACE,oBAACA,SAAgB,eAAjB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAEJ,UAAA,oBAAC,eAAD,CAAgB,CAAA;CACa,CAAA;AAEnC;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAgD;CAC9F,OACE,oBAACA,SAAgB,iBAAjB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAEJ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;CACa,CAAA;AAErC;AAEA,MAAM,6BAA6B,SAAS;CAC1C,MAAM;CACN,UAAU,EACR,UAAU;EACR,KAAK;EACL,QAAQ;CACV,EACF;AACF,CAAC;AAED,SAAS,cAAc,EACrB,WACA,UACA,OACA,MACA,aAAa,GACb,uBAAuB,OACvB,GAAG,SAKA;CACH,OACE,oBAACA,SAAgB,QAAjB,EAAA,UACE,oBAACA,SAAgB,YAAjB;EACc;EACL;EACD;EACgB;EACtB,WAAU;EAEV,UAAA,qBAACA,SAAgB,OAAjB;GACE,WAAW,GACT,2KACA,CAAC,wBAAwB,yBACzB,SACF;GACA,GAAI;GANN,UAAA;IAQE,oBAAC,sBAAD,EAAsB,WAAW,2BAA2B,EAAE,UAAU,MAAM,CAAC,EAAI,CAAA;IACnF,oBAACA,SAAgB,MAAjB;KAAsB,WAAU;KAAO;IAA+B,CAAA;IACtE,oBAAC,wBAAD,EAAwB,WAAW,2BAA2B,EAAE,UAAU,SAAS,CAAC,EAAI,CAAA;GACnE;;CACG,CAAA,EACN,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2C;CAC9E,OACE,oBAACA,SAAgB,YAAjB;EACE,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,UAAU,OAAO,GAAG,SAAqC;CACxF,OACE,qBAACA,SAAgB,MAAjB;EACE,OAAO,UAAU,OAAO,aAAa,WAAW,WAAW,KAAA;EAC3D,WAAW,GACT,wPACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,SAAgB,eAAjB,EAAA,UACE,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA,EACF,CAAA;EAC3B,CAAA,GACN,oBAACA,SAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA0C;CACjF,OACE,oBAACA,SAAgB,WAAjB;EAA2B,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAElG"}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+//#region src/components/skeleton.d.ts
+export declare function Skeleton({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../src/components/skeleton.tsx"],"mappings":";;wBAGgB,WAAW,cAAc,SAAS,wCAAqB,IAAA"}

package/dist/components/skeleton.js

@@ -0,0 +1,13 @@
+import { cn } from "../lib/variants.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("animate-pulse rounded-md bg-foreground/10", className),
+		...props
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { cn } from \"~/lib/variants\"\n\nexport function Skeleton({ className, ...props }: ComponentProps<\"div\">) {\n  return <div className={cn(\"animate-pulse rounded-md bg-foreground/10\", className)} {...props} />\n}\n"],"mappings":";;;AAGA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAgC;CACvE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,6CAA6C,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjG"}

package/dist/components/stack.d.ts

@@ -0,0 +1,54 @@
+import { VariantProps } from "../lib/variants.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack.d.ts
+declare const stackVariants: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: "gap-1";
+    sm: "gap-x-2 gap-y-1";
+    md: "gap-x-3 gap-y-2";
+    lg: "gap-x-4 gap-y-3";
+  };
+  direction: {
+    row: "flex-row items-center place-content-start";
+    column: "flex-col items-start";
+  };
+  wrap: {
+    true: "flex-wrap";
+    false: "";
+  };
+}, undefined, "flex", {
+  size: {
+    xs: "gap-1";
+    sm: "gap-x-2 gap-y-1";
+    md: "gap-x-3 gap-y-2";
+    lg: "gap-x-4 gap-y-3";
+  };
+  direction: {
+    row: "flex-row items-center place-content-start";
+    column: "flex-col items-start";
+  };
+  wrap: {
+    true: "flex-wrap";
+    false: "";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    xs: "gap-1";
+    sm: "gap-x-2 gap-y-1";
+    md: "gap-x-3 gap-y-2";
+    lg: "gap-x-4 gap-y-3";
+  };
+  direction: {
+    row: "flex-row items-center place-content-start";
+    column: "flex-col items-start";
+  };
+  wrap: {
+    true: "flex-wrap";
+    false: "";
+  };
+}, undefined>>;
+type StackProps = useRender.ComponentProps<"div"> & VariantProps<typeof stackVariants>;
+declare function Stack({ className, render, size, direction, wrap, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Stack };
+//# sourceMappingURL=stack.d.ts.map

package/dist/components/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","names":[],"sources":["../../src/components/stack.tsx"],"mappings":";;;cAGM,2CAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2Bd,aAAa,UAAU,wBAAwB,oBAAoB;iBAE/D,QAAQ,WAAW,QAAQ,MAAM,WAAW,SAAS,SAAS,6BAAU,+CAAA"}

package/dist/components/stack.js

@@ -0,0 +1,46 @@
+import { cn, variants } from "../lib/variants.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack.tsx
+const stackVariants = variants({
+	base: "flex",
+	variants: {
+		size: {
+			xs: "gap-1",
+			sm: "gap-x-2 gap-y-1",
+			md: "gap-x-3 gap-y-2",
+			lg: "gap-x-4 gap-y-3"
+		},
+		direction: {
+			row: "flex-row items-center place-content-start",
+			column: "flex-col items-start"
+		},
+		wrap: {
+			true: "flex-wrap",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		direction: "row",
+		wrap: true
+	}
+});
+function Stack({ className, render, size, direction, wrap, ...props }) {
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: {
+			className: cn(stackVariants({
+				size,
+				direction,
+				wrap,
+				className
+			})),
+			...props
+		}
+	});
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=stack.js.map

package/dist/components/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/components/stack.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst stackVariants = variants({\n  base: \"flex\",\n\n  variants: {\n    size: {\n      xs: \"gap-1\",\n      sm: \"gap-x-2 gap-y-1\",\n      md: \"gap-x-3 gap-y-2\",\n      lg: \"gap-x-4 gap-y-3\",\n    },\n    direction: {\n      row: \"flex-row items-center place-content-start\",\n      column: \"flex-col items-start\",\n    },\n    wrap: {\n      true: \"flex-wrap\",\n      false: \"\",\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    direction: \"row\",\n    wrap: true,\n  },\n})\n\ntype StackProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof stackVariants>\n\nfunction Stack({ className, render, size, direction, wrap, ...props }: StackProps) {\n  return useRender({\n    render,\n    defaultTagName: \"div\",\n    props: { className: cn(stackVariants({ size, direction, wrap, className })), ...props },\n  })\n}\n\nexport { Stack }\n"],"mappings":";;;AAGA,MAAM,gBAAgB,SAAS;CAC7B,MAAM;CAEN,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,WAAW;GACT,KAAK;GACL,QAAQ;EACV;EACA,MAAM;GACJ,MAAM;GACN,OAAO;EACT;CACF;CAEA,iBAAiB;EACf,MAAM;EACN,WAAW;EACX,MAAM;CACR;AACF,CAAC;AAID,SAAS,MAAM,EAAE,WAAW,QAAQ,MAAM,WAAW,MAAM,GAAG,SAAqB;CACjF,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GAAE,WAAW,GAAG,cAAc;IAAE;IAAM;IAAW;IAAM;GAAU,CAAC,CAAC;GAAG,GAAG;EAAM;CACxF,CAAC;AACH"}

package/dist/components/stat-strip.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "../lib/variants.js";
+import { Format } from "@number-flow/react";
+import { useRender } from "@base-ui/react/use-render";
+import { ComponentProps } from "react";
+//#region src/components/stat-strip.d.ts
+declare const stripVariants: import("tailwind-variants").TVReturnType<{
+  variant: {
+    plain: "overflow-clip rounded-xl border bg-card shadow-xs";
+    track: "rounded-xl bg-background p-1.5 sm:gap-x-[13px]";
+  };
+}, undefined, "group/strip grid grid-cols-2 gap-y-1 max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:flex sm:flex-wrap sm:gap-y-0", {
+  variant: {
+    plain: "overflow-clip rounded-xl border bg-card shadow-xs";
+    track: "rounded-xl bg-background p-1.5 sm:gap-x-[13px]";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    plain: "overflow-clip rounded-xl border bg-card shadow-xs";
+    track: "rounded-xl bg-background p-1.5 sm:gap-x-[13px]";
+  };
+}, undefined>>;
+type StatStripProps = ComponentProps<"div"> & VariantProps<typeof stripVariants>;
+declare function StatStrip({ className, variant, ...props }: StatStripProps): import("react").JSX.Element;
+type StatStripItemProps = Omit<useRender.ComponentProps<"div">, "children"> & {
+  label: string;
+  value: string | number;
+  format?: Format;
+  hint?: string;
+  /**
+   * Marks the item as the one driving the panel beside it. Pass `render={<button ... />}`
+   * to make it selectable.
+   */
+  selected?: boolean;
+};
+declare function StatStripItem({ label, value, format, hint, selected, render, className, ...props }: StatStripItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { StatStrip, StatStripItem };
+//# sourceMappingURL=stat-strip.d.ts.map

package/dist/components/stat-strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-strip.d.ts","names":[],"sources":["../../src/components/stat-strip.tsx"],"mappings":";;;;;cAOM,2CAAa;;;;;;;;;;;;;;;;KAmBd,iBAAiB,wBAAwB,oBAAoB;iBAEzD,YAAY,WAAW,YAAY,SAAS,iCAAc,IAAA;KAU9D,qBAAqB,KAAK,UAAU;EACvC;EACA;EACA,SAAS;EACT;;;;;EAKA;;iBAGO,gBACP,OACA,OACA,QACA,MACA,UACA,QACA,cACG,SACF,qCAAkB,+CAAA"}