@psnext/design-system 1.1.0 → 1.2.0

package/dist/layouts/TwoColumn/index.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/layouts/TwoColumn/TwoColumn.tsx
+const twoColumnVariants = (0, require("class-variance-authority").cva)("flex flex-col lg:flex-row", {
+	variants: {
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		reverse: { true: "lg:flex-row-reverse" }
+	},
+	defaultVariants: { gap: "lg" }
+});
+/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */
+function TwoColumn({ className, gap, reverse, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "two-column",
+		className: require_cn.cn(twoColumnVariants({
+			gap,
+			reverse
+		}), className),
+		...props
+	});
+}
+/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */
+function TwoColumnAside({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		"data-slot": "two-column-aside",
+		className: require_cn.cn("w-full shrink-0 lg:w-64", className),
+		...props
+	});
+}
+/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */
+function TwoColumnMain({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "two-column-main",
+		className: require_cn.cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+//#endregion
+exports.TwoColumn = TwoColumn;
+exports.TwoColumnAside = TwoColumnAside;
+exports.TwoColumnMain = TwoColumnMain;
+exports.twoColumnVariants = twoColumnVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/layouts/TwoColumn/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/layouts/TwoColumn/TwoColumn.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// TwoColumn — composable two-column layout (aside + main). Stacks vertically\n// below `lg`. Compose: <TwoColumn><TwoColumnAside/><TwoColumnMain/></TwoColumn>.\n// The aside width is set on TwoColumnAside (default lg:w-64; override via className,\n// e.g. a 56px nav rail with `lg:w-14`).\nconst twoColumnVariants = cva(\"flex flex-col lg:flex-row\", {\n  variants: {\n    gap: {\n      none: \"gap-0\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n    },\n    reverse: {\n      true: \"lg:flex-row-reverse\",\n    },\n  },\n  defaultVariants: {\n    gap: \"lg\",\n  },\n});\n\ntype TwoColumnProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof twoColumnVariants> & {\n    /** Space between the aside and main columns (and between stacked rows below `lg`). */\n    gap?: VariantProps<typeof twoColumnVariants>[\"gap\"];\n    /** Place the aside after the main column at `lg` and up (`flex-row-reverse`). */\n    reverse?: VariantProps<typeof twoColumnVariants>[\"reverse\"];\n  };\n\n/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */\nfunction TwoColumn({ className, gap, reverse, ...props }: TwoColumnProps) {\n  return (\n    <div\n      data-slot=\"two-column\"\n      className={cn(twoColumnVariants({ gap, reverse }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */\nfunction TwoColumnAside({ className, ...props }: React.ComponentProps<\"aside\">) {\n  return (\n    <aside\n      data-slot=\"two-column-aside\"\n      className={cn(\"w-full shrink-0 lg:w-64\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */\nfunction TwoColumnMain({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"two-column-main\" className={cn(\"min-w-0 flex-1\", className)} {...props} />;\n}\n\nexport { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants, type TwoColumnProps };\n"],"mappings":";;;;AASA,MAAM,qBAAA,qCAAA,EAAA,KAAwB,6BAA6B;CACzD,UAAU;EACR,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS,EACP,MAAM,sBACR;CACF;CACA,iBAAiB,EACf,KAAK,KACP;AACF,CAAC;;AAWD,SAAS,UAAU,EAAE,WAAW,KAAK,SAAS,GAAG,SAAyB;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kBAAkB;GAAE;GAAK;EAAQ,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAwC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAkB,WAAWA,WAAAA,GAAG,kBAAkB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG"}

package/dist/layouts/TwoColumn/index.d.cts

@@ -0,0 +1,2 @@
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index68.cjs";
+export { TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, twoColumnVariants };

package/dist/layouts/TwoColumn/index.d.ts

@@ -0,0 +1,2 @@
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index68.js";
+export { TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, twoColumnVariants };

package/dist/layouts/TwoColumn/index.js

@@ -0,0 +1,48 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/layouts/TwoColumn/TwoColumn.tsx
+const twoColumnVariants = cva("flex flex-col lg:flex-row", {
+	variants: {
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		reverse: { true: "lg:flex-row-reverse" }
+	},
+	defaultVariants: { gap: "lg" }
+});
+/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */
+function TwoColumn({ className, gap, reverse, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "two-column",
+		className: cn(twoColumnVariants({
+			gap,
+			reverse
+		}), className),
+		...props
+	});
+}
+/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */
+function TwoColumnAside({ className, ...props }) {
+	return /* @__PURE__ */ jsx("aside", {
+		"data-slot": "two-column-aside",
+		className: cn("w-full shrink-0 lg:w-64", className),
+		...props
+	});
+}
+/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */
+function TwoColumnMain({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "two-column-main",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+//#endregion
+export { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/layouts/TwoColumn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/TwoColumn/TwoColumn.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// TwoColumn — composable two-column layout (aside + main). Stacks vertically\n// below `lg`. Compose: <TwoColumn><TwoColumnAside/><TwoColumnMain/></TwoColumn>.\n// The aside width is set on TwoColumnAside (default lg:w-64; override via className,\n// e.g. a 56px nav rail with `lg:w-14`).\nconst twoColumnVariants = cva(\"flex flex-col lg:flex-row\", {\n  variants: {\n    gap: {\n      none: \"gap-0\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n    },\n    reverse: {\n      true: \"lg:flex-row-reverse\",\n    },\n  },\n  defaultVariants: {\n    gap: \"lg\",\n  },\n});\n\ntype TwoColumnProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof twoColumnVariants> & {\n    /** Space between the aside and main columns (and between stacked rows below `lg`). */\n    gap?: VariantProps<typeof twoColumnVariants>[\"gap\"];\n    /** Place the aside after the main column at `lg` and up (`flex-row-reverse`). */\n    reverse?: VariantProps<typeof twoColumnVariants>[\"reverse\"];\n  };\n\n/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */\nfunction TwoColumn({ className, gap, reverse, ...props }: TwoColumnProps) {\n  return (\n    <div\n      data-slot=\"two-column\"\n      className={cn(twoColumnVariants({ gap, reverse }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */\nfunction TwoColumnAside({ className, ...props }: React.ComponentProps<\"aside\">) {\n  return (\n    <aside\n      data-slot=\"two-column-aside\"\n      className={cn(\"w-full shrink-0 lg:w-64\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */\nfunction TwoColumnMain({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"two-column-main\" className={cn(\"min-w-0 flex-1\", className)} {...props} />;\n}\n\nexport { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants, type TwoColumnProps };\n"],"mappings":";;;;AASA,MAAM,oBAAoB,IAAI,6BAA6B;CACzD,UAAU;EACR,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS,EACP,MAAM,sBACR;CACF;CACA,iBAAiB,EACf,KAAK,KACP;AACF,CAAC;;AAWD,SAAS,UAAU,EAAE,WAAW,KAAK,SAAS,GAAG,SAAyB;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kBAAkB;GAAE;GAAK;EAAQ,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAwC;CAC9E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,GAAG,kBAAkB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG"}

package/dist/layouts/index.cjs

@@ -1,101 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils.cjs");
-const require_Stack = require("../Stack.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-let class_variance_authority = require("class-variance-authority");
-//#region src/layouts/Container/Container.tsx
-const containerVariants = (0, class_variance_authority.cva)("mx-auto w-full", {
-	variants: {
-		size: {
-			narrow: "max-w-[900px]",
-			content: "max-w-[1200px]",
-			wide: "max-w-[1440px]",
-			full: "max-w-none"
-		},
-		variant: {
-			default: "px-4",
-			glass: "rounded-2xl bg-[var(--glass-light)] px-4 py-4 backdrop-blur-[var(--glass-blur)] sm:px-6"
-		}
-	},
-	defaultVariants: {
-		size: "content",
-		variant: "default"
-	}
-});
-function Container({ as, className, size, variant, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
-		"data-slot": "container",
-		"data-variant": variant ?? "default",
-		className: require_utils.cn(containerVariants({
-			size,
-			variant
-		}), className),
-		...props
-	});
-}
-//#endregion
-//#region src/layouts/PageBackground/PageBackground.tsx
-const PAGE_GRADIENT = "radial-gradient(circle at 90% 10%, var(--page-gradient-edge) 0%, var(--page-gradient-mid) 25%, var(--page-gradient-edge) 60%)";
-function PageBackground({ fixed = true, className, style, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "page-background",
-		"aria-hidden": true,
-		className: require_utils.cn("pointer-events-none inset-0 bg-slate-200 dark:bg-slate-950", fixed ? "fixed -z-10" : "absolute", className),
-		style: {
-			backgroundImage: PAGE_GRADIENT,
-			...style
-		},
-		...props
-	});
-}
-//#endregion
-//#region src/layouts/TwoColumn/TwoColumn.tsx
-const twoColumnVariants = (0, class_variance_authority.cva)("flex flex-col lg:flex-row", {
-	variants: {
-		gap: {
-			none: "gap-0",
-			sm: "gap-3",
-			md: "gap-4",
-			lg: "gap-6",
-			xl: "gap-8"
-		},
-		reverse: { true: "lg:flex-row-reverse" }
-	},
-	defaultVariants: { gap: "lg" }
-});
-function TwoColumn({ className, gap, reverse, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "two-column",
-		className: require_utils.cn(twoColumnVariants({
-			gap,
-			reverse
-		}), className),
-		...props
-	});
-}
-function TwoColumnAside({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-		"data-slot": "two-column-aside",
-		className: require_utils.cn("w-full shrink-0 lg:w-64", className),
-		...props
-	});
-}
-function TwoColumnMain({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "two-column-main",
-		className: require_utils.cn("min-w-0 flex-1", className),
-		...props
-	});
-}
-//#endregion
-exports.Container = Container;
-exports.PageBackground = PageBackground;
-exports.Stack = require_Stack.Stack;
-exports.TwoColumn = TwoColumn;
-exports.TwoColumnAside = TwoColumnAside;
-exports.TwoColumnMain = TwoColumnMain;
-exports.containerVariants = containerVariants;
-exports.stackVariants = require_Stack.stackVariants;
-exports.twoColumnVariants = twoColumnVariants;
-
-//# sourceMappingURL=index.cjs.map
+const require_layouts_Container_index = require("./Container/index.cjs");
+const require_layouts_PageBackground_index = require("./PageBackground/index.cjs");
+const require_layouts_Stack_index = require("./Stack/index.cjs");
+const require_layouts_TwoColumn_index = require("./TwoColumn/index.cjs");
+exports.Container = require_layouts_Container_index.Container;
+exports.PageBackground = require_layouts_PageBackground_index.PageBackground;
+exports.Stack = require_layouts_Stack_index.Stack;
+exports.TwoColumn = require_layouts_TwoColumn_index.TwoColumn;
+exports.TwoColumnAside = require_layouts_TwoColumn_index.TwoColumnAside;
+exports.TwoColumnMain = require_layouts_TwoColumn_index.TwoColumnMain;
+exports.containerVariants = require_layouts_Container_index.containerVariants;
+exports.stackVariants = require_layouts_Stack_index.stackVariants;
+exports.twoColumnVariants = require_layouts_TwoColumn_index.twoColumnVariants;

package/dist/layouts/index.d.cts

@@ -1,76 +1,5 @@
-import * as react_jsx_runtime335 from "react/jsx-runtime";
-import * as class_variance_authority_types27 from "class-variance-authority/types";
-import { VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-//#region src/layouts/Container/Container.d.ts
-declare const containerVariants: (props?: ({
-  size?: "content" | "narrow" | "wide" | "full" | null | undefined;
-  variant?: "default" | "glass" | null | undefined;
-} & class_variance_authority_types27.ClassProp) | undefined) => string;
-type ContainerProps = React.ComponentProps<"div"> & VariantProps<typeof containerVariants> & {
-  as?: React.ElementType;
-};
-declare function Container({
-  as,
-  className,
-  size,
-  variant,
-  ...props
-}: ContainerProps): react_jsx_runtime335.JSX.Element;
-//#endregion
-//#region src/layouts/PageBackground/PageBackground.d.ts
-type PageBackgroundProps = React.ComponentProps<"div"> & {
-  /** Fixed to the viewport (default) vs absolute-fill of a positioned parent. */
-  fixed?: boolean;
-};
-declare function PageBackground({
-  fixed,
-  className,
-  style,
-  ...props
-}: PageBackgroundProps): react_jsx_runtime335.JSX.Element;
-//#endregion
-//#region src/layouts/Stack/Stack.d.ts
-declare const stackVariants: (props?: ({
-  direction?: "horizontal" | "vertical" | null | undefined;
-  gap?: "sm" | "md" | "lg" | "none" | "xs" | "xl" | "2xl" | null | undefined;
-  align?: "end" | "center" | "start" | "stretch" | null | undefined;
-  justify?: "end" | "center" | "start" | "between" | null | undefined;
-} & class_variance_authority_types27.ClassProp) | undefined) => string;
-type StackProps = React.ComponentProps<"div"> & VariantProps<typeof stackVariants> & {
-  as?: React.ElementType;
-};
-declare function Stack({
-  as,
-  className,
-  direction,
-  gap,
-  align,
-  justify,
-  ...props
-}: StackProps): react_jsx_runtime335.JSX.Element;
-//#endregion
-//#region src/layouts/TwoColumn/TwoColumn.d.ts
-declare const twoColumnVariants: (props?: ({
-  gap?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
-  reverse?: boolean | null | undefined;
-} & class_variance_authority_types27.ClassProp) | undefined) => string;
-type TwoColumnProps = React.ComponentProps<"div"> & VariantProps<typeof twoColumnVariants>;
-declare function TwoColumn({
-  className,
-  gap,
-  reverse,
-  ...props
-}: TwoColumnProps): react_jsx_runtime335.JSX.Element;
-declare function TwoColumnAside({
-  className,
-  ...props
-}: React.ComponentProps<"aside">): react_jsx_runtime335.JSX.Element;
-declare function TwoColumnMain({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime335.JSX.Element;
-//#endregion
-export { Container, type ContainerProps, PageBackground, type PageBackgroundProps, Stack, type StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, type TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };
-//# sourceMappingURL=index.d.cts.map
+import { n as ContainerProps, r as containerVariants, t as Container } from "../index65.cjs";
+import { n as PageBackgroundProps, t as PageBackground } from "../index66.cjs";
+import { n as StackProps, r as stackVariants, t as Stack } from "../index67.cjs";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index68.cjs";
+export { Container, ContainerProps, PageBackground, PageBackgroundProps, Stack, StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };

package/dist/layouts/index.d.ts

@@ -1,76 +1,5 @@
-import * as React from "react";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types1 from "class-variance-authority/types";
-
-//#region src/layouts/Container/Container.d.ts
-declare const containerVariants: (props?: ({
-  size?: "narrow" | "content" | "wide" | "full" | null | undefined;
-  variant?: "default" | "glass" | null | undefined;
-} & class_variance_authority_types1.ClassProp) | undefined) => string;
-type ContainerProps = React.ComponentProps<"div"> & VariantProps<typeof containerVariants> & {
-  as?: React.ElementType;
-};
-declare function Container({
-  as,
-  className,
-  size,
-  variant,
-  ...props
-}: ContainerProps): react_jsx_runtime20.JSX.Element;
-//#endregion
-//#region src/layouts/PageBackground/PageBackground.d.ts
-type PageBackgroundProps = React.ComponentProps<"div"> & {
-  /** Fixed to the viewport (default) vs absolute-fill of a positioned parent. */
-  fixed?: boolean;
-};
-declare function PageBackground({
-  fixed,
-  className,
-  style,
-  ...props
-}: PageBackgroundProps): react_jsx_runtime20.JSX.Element;
-//#endregion
-//#region src/layouts/Stack/Stack.d.ts
-declare const stackVariants: (props?: ({
-  direction?: "vertical" | "horizontal" | null | undefined;
-  gap?: "sm" | "md" | "lg" | "none" | "xl" | "xs" | "2xl" | null | undefined;
-  align?: "start" | "center" | "end" | "stretch" | null | undefined;
-  justify?: "start" | "center" | "end" | "between" | null | undefined;
-} & class_variance_authority_types1.ClassProp) | undefined) => string;
-type StackProps = React.ComponentProps<"div"> & VariantProps<typeof stackVariants> & {
-  as?: React.ElementType;
-};
-declare function Stack({
-  as,
-  className,
-  direction,
-  gap,
-  align,
-  justify,
-  ...props
-}: StackProps): react_jsx_runtime20.JSX.Element;
-//#endregion
-//#region src/layouts/TwoColumn/TwoColumn.d.ts
-declare const twoColumnVariants: (props?: ({
-  gap?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
-  reverse?: boolean | null | undefined;
-} & class_variance_authority_types1.ClassProp) | undefined) => string;
-type TwoColumnProps = React.ComponentProps<"div"> & VariantProps<typeof twoColumnVariants>;
-declare function TwoColumn({
-  className,
-  gap,
-  reverse,
-  ...props
-}: TwoColumnProps): react_jsx_runtime20.JSX.Element;
-declare function TwoColumnAside({
-  className,
-  ...props
-}: React.ComponentProps<"aside">): react_jsx_runtime20.JSX.Element;
-declare function TwoColumnMain({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime20.JSX.Element;
-//#endregion
-export { Container, type ContainerProps, PageBackground, type PageBackgroundProps, Stack, type StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, type TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };
-//# sourceMappingURL=index.d.ts.map
+import { n as ContainerProps, r as containerVariants, t as Container } from "../index65.js";
+import { n as PageBackgroundProps, t as PageBackground } from "../index66.js";
+import { n as StackProps, r as stackVariants, t as Stack } from "../index67.js";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index68.js";
+export { Container, ContainerProps, PageBackground, PageBackgroundProps, Stack, StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };

package/dist/layouts/index.js

@@ -1,92 +1,5 @@
-import { n as cn } from "../utils.js";
-import { n as stackVariants, t as Stack } from "../Stack.js";
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-//#region src/layouts/Container/Container.tsx
-const containerVariants = cva("mx-auto w-full", {
-	variants: {
-		size: {
-			narrow: "max-w-[900px]",
-			content: "max-w-[1200px]",
-			wide: "max-w-[1440px]",
-			full: "max-w-none"
-		},
-		variant: {
-			default: "px-4",
-			glass: "rounded-2xl bg-[var(--glass-light)] px-4 py-4 backdrop-blur-[var(--glass-blur)] sm:px-6"
-		}
-	},
-	defaultVariants: {
-		size: "content",
-		variant: "default"
-	}
-});
-function Container({ as, className, size, variant, ...props }) {
-	return /* @__PURE__ */ jsx(as ?? "div", {
-		"data-slot": "container",
-		"data-variant": variant ?? "default",
-		className: cn(containerVariants({
-			size,
-			variant
-		}), className),
-		...props
-	});
-}
-//#endregion
-//#region src/layouts/PageBackground/PageBackground.tsx
-const PAGE_GRADIENT = "radial-gradient(circle at 90% 10%, var(--page-gradient-edge) 0%, var(--page-gradient-mid) 25%, var(--page-gradient-edge) 60%)";
-function PageBackground({ fixed = true, className, style, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "page-background",
-		"aria-hidden": true,
-		className: cn("pointer-events-none inset-0 bg-slate-200 dark:bg-slate-950", fixed ? "fixed -z-10" : "absolute", className),
-		style: {
-			backgroundImage: PAGE_GRADIENT,
-			...style
-		},
-		...props
-	});
-}
-//#endregion
-//#region src/layouts/TwoColumn/TwoColumn.tsx
-const twoColumnVariants = cva("flex flex-col lg:flex-row", {
-	variants: {
-		gap: {
-			none: "gap-0",
-			sm: "gap-3",
-			md: "gap-4",
-			lg: "gap-6",
-			xl: "gap-8"
-		},
-		reverse: { true: "lg:flex-row-reverse" }
-	},
-	defaultVariants: { gap: "lg" }
-});
-function TwoColumn({ className, gap, reverse, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "two-column",
-		className: cn(twoColumnVariants({
-			gap,
-			reverse
-		}), className),
-		...props
-	});
-}
-function TwoColumnAside({ className, ...props }) {
-	return /* @__PURE__ */ jsx("aside", {
-		"data-slot": "two-column-aside",
-		className: cn("w-full shrink-0 lg:w-64", className),
-		...props
-	});
-}
-function TwoColumnMain({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "two-column-main",
-		className: cn("min-w-0 flex-1", className),
-		...props
-	});
-}
-//#endregion
+import { Container, containerVariants } from "./Container/index.js";
+import { PageBackground } from "./PageBackground/index.js";
+import { Stack, stackVariants } from "./Stack/index.js";
+import { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants } from "./TwoColumn/index.js";
 export { Container, PageBackground, Stack, TwoColumn, TwoColumnAside, TwoColumnMain, containerVariants, stackVariants, twoColumnVariants };
-
-//# sourceMappingURL=index.js.map

package/dist/patterns/DataTable/index.cjs

@@ -0,0 +1,114 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../../primitives/Button/index.cjs");
+const require_primitives_Table_index = require("../../primitives/Table/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tanstack_react_table = require("@tanstack/react-table");
+//#region src/patterns/DataTable/DataTable.tsx
+/**
+* TanStack-Table-backed data table with sorting, row selection, and optional
+* client-side pagination, rendered through the Table primitives.
+*/
+function DataTable({ columns, data, striped = true, enablePagination = true, pageSize = 10 }) {
+	const [sorting, setSorting] = react.useState([]);
+	const [rowSelection, setRowSelection] = react.useState({});
+	const table = (0, _tanstack_react_table.useReactTable)({
+		data,
+		columns,
+		state: {
+			sorting,
+			rowSelection
+		},
+		onSortingChange: setSorting,
+		onRowSelectionChange: setRowSelection,
+		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+		getSortedRowModel: (0, _tanstack_react_table.getSortedRowModel)(),
+		getPaginationRowModel: enablePagination ? (0, _tanstack_react_table.getPaginationRowModel)() : void 0,
+		initialState: { pagination: { pageSize } }
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "data-table",
+		className: "space-y-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "overflow-hidden rounded-md border",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Table_index.Table, {
+				striped,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableHead, {
+					colSpan: header.colSpan,
+					children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, {
+					"data-state": row.getIsSelected() ? "selected" : void 0,
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+				}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, {
+					colSpan: columns.length,
+					className: "h-24 text-center text-muted-foreground",
+					children: "No results."
+				}) }) })]
+			})
+		}), enablePagination ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "text-sm text-muted-foreground",
+				"data-slot": "data-table-selection",
+				children: [
+					table.getFilteredSelectedRowModel().rows.length,
+					" of",
+					" ",
+					table.getFilteredRowModel().rows.length,
+					" row(s) selected."
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"Page ",
+							table.getState().pagination.pageIndex + 1,
+							" of ",
+							table.getPageCount() || 1
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => table.previousPage(),
+						disabled: !table.getCanPreviousPage(),
+						children: "Previous"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => table.nextPage(),
+						disabled: !table.getCanNextPage(),
+						children: "Next"
+					})
+				]
+			})]
+		}) : null]
+	});
+}
+/** Sortable column header — drop into a column's `header` to get click-to-sort. */
+function DataTableColumnHeader({ column, title, className }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className,
+		children: title
+	});
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Button_index.Button, {
+		variant: "ghost",
+		size: "sm",
+		className: require_cn.cn("-ml-2 h-8", className),
+		onClick: () => column.toggleSorting(sorted === "asc"),
+		children: [title, sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, {})]
+	});
+}
+//#endregion
+exports.DataTable = DataTable;
+exports.DataTableColumnHeader = DataTableColumnHeader;
+
+//# sourceMappingURL=index.cjs.map

package/dist/patterns/DataTable/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React","Table","TableHeader","TableRow","TableHead","TableBody","TableCell","Button","cn","ArrowUpIcon","ArrowDownIcon","ChevronsUpDownIcon"],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/primitives/Table\";\nimport { cn } from \"@/utils\";\n\ntype DataTableProps<TData, TValue> = {\n  /** TanStack Table column definitions describing each column's header and cell. */\n  columns: ColumnDef<TData, TValue>[];\n  /** The row objects to render in the table body. */\n  data: TData[];\n  /** Zebra-stripe the rows (default true). */\n  striped?: boolean;\n  /** Client-side pagination + page size (default true, 10). */\n  enablePagination?: boolean;\n  /** Rows per page when pagination is enabled (default 10). */\n  pageSize?: number;\n};\n\n/**\n * TanStack-Table-backed data table with sorting, row selection, and optional\n * client-side pagination, rendered through the Table primitives.\n */\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  striped = true,\n  enablePagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div data-slot=\"data-table\" className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table striped={striped}>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id} colSpan={header.colSpan}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow key={row.id} data-state={row.getIsSelected() ? \"selected\" : undefined}>\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center text-muted-foreground\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {enablePagination ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\" data-slot=\"data-table-selection\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-foreground\">\n              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n            </span>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              Next\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Sortable column header — drop into a column's `header` to get click-to-sort. */\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: {\n  /** The TanStack Table column instance this header controls. */\n  column: Column<TData, TValue>;\n  /** Visible label for the column. */\n  title: string;\n  /** Optional class applied to the header button (or span when unsortable). */\n  className?: string;\n}) {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"-ml-2 h-8\", className)}\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n    >\n      {title}\n      {sorted === \"asc\" ? (\n        <ArrowUpIcon />\n      ) : sorted === \"desc\" ? (\n        <ArrowDownIcon />\n      ) : (\n        <ChevronsUpDownIcon />\n      )}\n    </Button>\n  );\n}\n\nexport { DataTable, DataTableColumnHeader };\nexport type { ColumnDef };\n"],"mappings":"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"}