@jbpark/ui-kit 3.8.0 → 4.0.0

package/dist/components/templates/empty.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/empty.d.ts
+interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+}
+declare const Empty: ({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Empty, Props };
+//# sourceMappingURL=empty.d.mts.map

package/dist/components/templates/empty.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.mts","names":[],"sources":["../../../src/components/templates/empty.tsx"],"mappings":";;;UAIiB,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,cAAA;EACxC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,MAAA,GAAS,KAAA,CAAM,SAAA;AAAA;AAAA,cAQX,KAAA;EAAS,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,MAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAOZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/empty.mjs

@@ -0,0 +1,34 @@
+import { cn } from "../../utils.mjs";
+import { Inbox } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/templates/empty.tsx
+const Empty = ({ icon, title, description = "No data", action, className, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground [&_svg]:size-12",
+				children: icon ?? /* @__PURE__ */ jsx(Inbox, {})
+			}),
+			title && /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-1",
+				children: action
+			})
+		]
+	});
+};
+
+//#endregion
+export { Empty as default };
+//# sourceMappingURL=empty.mjs.map

package/dist/components/templates/empty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.mjs","names":[],"sources":["../../../src/components/templates/empty.tsx"],"sourcesContent":["import { Inbox } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\n// The counterpart List's `empty` prop was asking for — List/Upload/Swiper\n// each render arbitrary content for their empty state today with nothing\n// in the library actually meant to go there. Pairs with Skeleton the same\n// way Skeleton pairs with real content: one placeholder for \"nothing\n// loaded yet\", one for \"loaded, and there's nothing\".\nconst Empty = ({\n  icon,\n  title,\n  description = 'No data',\n  action,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 py-12 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"text-muted-foreground [&_svg]:size-12\">\n        {icon ?? <Inbox />}\n      </div>\n      {title && <p className=\"text-sm font-medium\">{title}</p>}\n      {description && (\n        <p className=\"text-muted-foreground text-sm\">{description}</p>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n};\n\nexport default Empty;\n"],"mappings":";;;;;AAgBA,MAAM,SAAS,EACb,MACA,OACA,cAAc,WACd,QACA,WACA,GAAG,YACQ;AACX,QACE,qBAAC;EACC,MAAK;EACL,WAAW,GACT,qEACA,UAED;EACD,GAAI;;GAEJ,oBAAC;IAAI,WAAU;cACZ,QAAQ,oBAAC,UAAQ;KACd;GACL,SAAS,oBAAC;IAAE,WAAU;cAAuB;KAAU;GACvD,eACC,oBAAC;IAAE,WAAU;cAAiC;KAAgB;GAE/D,UAAU,oBAAC;IAAI,WAAU;cAAQ;KAAa;;GAC3C"}

package/dist/components/templates/grid/col.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/grid/col.d.ts
+interface ResponsiveColSpan {
+  span?: number;
+  offset?: number;
+}
+type ColSpanProp = number | ResponsiveColSpan;
+interface Props extends React.ComponentProps<'div'> {
+  span?: number;
+  offset?: number;
+  xs?: ColSpanProp;
+  sm?: ColSpanProp;
+  md?: ColSpanProp;
+  lg?: ColSpanProp;
+  xl?: ColSpanProp;
+  '2xl'?: ColSpanProp;
+}
+declare const Col: ({
+  span,
+  offset,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  "2xl": xxl,
+  className,
+  style,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Col, Props };
+//# sourceMappingURL=col.d.mts.map

package/dist/components/templates/grid/col.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.d.mts","names":[],"sources":["../../../../src/components/templates/grid/col.tsx"],"mappings":";;;UAUU,iBAAA;EACR,IAAA;EACA,MAAA;AAAA;AAAA,KAGG,WAAA,YAAuB,iBAAA;AAAA,UAEX,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,IAAA;EACA,MAAA;EACA,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,EAAA,GAAK,WAAA;EACL,KAAA,GAAQ,WAAA;AAAA;AAAA,cAaJ,GAAA;EAAO,IAAA;EAAA,MAAA;EAAA,EAAA;EAAA,EAAA;EAAA,EAAA;EAAA,EAAA;EAAA,EAAA;EAAA,OAAA,GAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAaV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/grid/col.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import { useRowContext } from "./row-context.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/templates/grid/col.tsx
+const TOTAL_COLUMNS = 24;
+const BREAKPOINT_ORDER = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+const resolveColSpan = (value) => typeof value === "number" ? { span: value } : value;
+const Col = ({ span = TOTAL_COLUMNS, offset = 0, xs, sm, md, lg, xl, "2xl": xxl, className, style, children, ...props }) => {
+	const { gutterX, breakpoint } = useRowContext();
+	const responsiveProps = {
+		xs,
+		sm,
+		md,
+		lg,
+		xl,
+		"2xl": xxl
+	};
+	let effectiveSpan = span;
+	let effectiveOffset = offset;
+	for (const bp of BREAKPOINT_ORDER) {
+		if (BREAKPOINT_ORDER.indexOf(bp) > BREAKPOINT_ORDER.indexOf(breakpoint)) break;
+		const resolved = resolveColSpan(responsiveProps[bp]);
+		if (resolved?.span !== void 0) effectiveSpan = resolved.span;
+		if (resolved?.offset !== void 0) effectiveOffset = resolved.offset;
+	}
+	const widthPercent = effectiveSpan / TOTAL_COLUMNS * 100;
+	const offsetPercent = effectiveOffset / TOTAL_COLUMNS * 100;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("box-border shrink-0 grow-0", className),
+		style: {
+			flexBasis: `${widthPercent}%`,
+			maxWidth: `${widthPercent}%`,
+			marginLeft: offsetPercent ? `${offsetPercent}%` : void 0,
+			paddingLeft: gutterX ? gutterX / 2 : void 0,
+			paddingRight: gutterX ? gutterX / 2 : void 0,
+			...style
+		},
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Col as default };
+//# sourceMappingURL=col.mjs.map

package/dist/components/templates/grid/col.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.mjs","names":[],"sources":["../../../../src/components/templates/grid/col.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Breakpoint, useRowContext } from './row-context';\n\nconst TOTAL_COLUMNS = 24;\n\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\ninterface ResponsiveColSpan {\n  span?: number;\n  offset?: number;\n}\n\ntype ColSpanProp = number | ResponsiveColSpan;\n\nexport interface Props extends React.ComponentProps<'div'> {\n  span?: number;\n  offset?: number;\n  xs?: ColSpanProp;\n  sm?: ColSpanProp;\n  md?: ColSpanProp;\n  lg?: ColSpanProp;\n  xl?: ColSpanProp;\n  '2xl'?: ColSpanProp;\n}\n\nconst resolveColSpan = (value: ColSpanProp | undefined) =>\n  typeof value === 'number' ? { span: value } : value;\n\n// 24-column system (matches Ant Design's Row/Col, a familiar mental model\n// for anyone coming from it) implemented with plain percentage widths\n// rather than Tailwind's col-span-* utilities — those utilities need a\n// literal, statically-scannable class per (breakpoint, span) combination,\n// and 6 breakpoints x 24 spans is 144 combinations, most of which would\n// never be used. Percentage math scales to any span/breakpoint\n// combination with one code path instead.\nconst Col = ({\n  span = TOTAL_COLUMNS,\n  offset = 0,\n  xs,\n  sm,\n  md,\n  lg,\n  xl,\n  '2xl': xxl,\n  className,\n  style,\n  children,\n  ...props\n}: Props) => {\n  const { gutterX, breakpoint } = useRowContext();\n\n  const responsiveProps: Partial<Record<Breakpoint, ColSpanProp | undefined>> =\n    { xs, sm, md, lg, xl, '2xl': xxl };\n\n  let effectiveSpan = span;\n  let effectiveOffset = offset;\n\n  // Mobile-first cascade: walk breakpoints up to (and including) the\n  // current one, letting each defined prop override the last — so\n  // `<Col span={24} md={12} />` is 24 below md and 12 from md upward, with\n  // no need to also specify lg/xl/2xl for the value to keep applying.\n  for (const bp of BREAKPOINT_ORDER) {\n    if (BREAKPOINT_ORDER.indexOf(bp) > BREAKPOINT_ORDER.indexOf(breakpoint)) {\n      break;\n    }\n\n    const resolved = resolveColSpan(responsiveProps[bp]);\n\n    if (resolved?.span !== undefined) {\n      effectiveSpan = resolved.span;\n    }\n    if (resolved?.offset !== undefined) {\n      effectiveOffset = resolved.offset;\n    }\n  }\n\n  const widthPercent = (effectiveSpan / TOTAL_COLUMNS) * 100;\n  const offsetPercent = (effectiveOffset / TOTAL_COLUMNS) * 100;\n\n  return (\n    <div\n      className={cn('box-border shrink-0 grow-0', className)}\n      style={{\n        flexBasis: `${widthPercent}%`,\n        maxWidth: `${widthPercent}%`,\n        marginLeft: offsetPercent ? `${offsetPercent}%` : undefined,\n        paddingLeft: gutterX ? gutterX / 2 : undefined,\n        paddingRight: gutterX ? gutterX / 2 : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Col;\n"],"mappings":";;;;;;;AAMA,MAAM,gBAAgB;AAEtB,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAoB5E,MAAM,kBAAkB,UACtB,OAAO,UAAU,WAAW,EAAE,MAAM,OAAO,GAAG;AAShD,MAAM,OAAO,EACX,OAAO,eACP,SAAS,GACT,IACA,IACA,IACA,IACA,IACA,OAAO,KACP,WACA,OACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,SAAS,eAAe,eAAe;CAE/C,MAAM,kBACJ;EAAE;EAAI;EAAI;EAAI;EAAI;EAAI,OAAO;EAAK;CAEpC,IAAI,gBAAgB;CACpB,IAAI,kBAAkB;AAMtB,MAAK,MAAM,MAAM,kBAAkB;AACjC,MAAI,iBAAiB,QAAQ,GAAG,GAAG,iBAAiB,QAAQ,WAAW,CACrE;EAGF,MAAM,WAAW,eAAe,gBAAgB,IAAI;AAEpD,MAAI,UAAU,SAAS,OACrB,iBAAgB,SAAS;AAE3B,MAAI,UAAU,WAAW,OACvB,mBAAkB,SAAS;;CAI/B,MAAM,eAAgB,gBAAgB,gBAAiB;CACvD,MAAM,gBAAiB,kBAAkB,gBAAiB;AAE1D,QACE,oBAAC;EACC,WAAW,GAAG,8BAA8B,UAAU;EACtD,OAAO;GACL,WAAW,GAAG,aAAa;GAC3B,UAAU,GAAG,aAAa;GAC1B,YAAY,gBAAgB,GAAG,cAAc,KAAK;GAClD,aAAa,UAAU,UAAU,IAAI;GACrC,cAAc,UAAU,UAAU,IAAI;GACtC,GAAG;GACJ;EACD,GAAI;EAEH;GACG"}

package/dist/components/templates/grid/index.d.mts

@@ -0,0 +1,2 @@
+import { Props, Row } from "./row.mjs";
+import { Col, Props as Props$1 } from "./col.mjs";

package/dist/components/templates/grid/row-context.mjs

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+//#region src/components/templates/grid/row-context.ts
+const RowContext = createContext({
+	gutterX: 0,
+	gutterY: 0,
+	breakpoint: "xs"
+});
+const useRowContext = () => useContext(RowContext);
+
+//#endregion
+export { RowContext, useRowContext };
+//# sourceMappingURL=row-context.mjs.map

package/dist/components/templates/grid/row-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-context.mjs","names":[],"sources":["../../../../src/components/templates/grid/row-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface RowContextValue {\n  gutterX: number;\n  gutterY: number;\n  breakpoint: Breakpoint;\n}\n\n// Defaults assume Col is used without a Row (not the intended usage, but\n// shouldn't crash) — 'xs' matches useResponsiveSize's own SSR-safe initial\n// guess (measures 0 width before mount), same mobile-first default Sider's\n// breakpoint feature already relies on.\nexport const RowContext = createContext<RowContextValue>({\n  gutterX: 0,\n  gutterY: 0,\n  breakpoint: 'xs',\n});\n\nexport const useRowContext = () => useContext(RowContext);\n"],"mappings":";;;AAcA,MAAa,aAAa,cAA+B;CACvD,SAAS;CACT,SAAS;CACT,YAAY;CACb,CAAC;AAEF,MAAa,sBAAsB,WAAW,WAAW"}

package/dist/components/templates/grid/row.d.mts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/grid/row.d.ts
+declare const ALIGN_CLASSES: {
+  top: string;
+  middle: string;
+  bottom: string;
+  stretch: string;
+};
+declare const JUSTIFY_CLASSES: {
+  start: string;
+  end: string;
+  center: string;
+  'space-around': string;
+  'space-between': string;
+  'space-evenly': string;
+};
+interface Props extends React.ComponentProps<'div'> {
+  gutter?: number | [number, number];
+  align?: keyof typeof ALIGN_CLASSES;
+  justify?: keyof typeof JUSTIFY_CLASSES;
+  wrap?: boolean;
+}
+declare const Row: ({
+  gutter,
+  align,
+  justify,
+  wrap,
+  className,
+  style,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Props, Row };
+//# sourceMappingURL=row.d.mts.map

package/dist/components/templates/grid/row.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.mts","names":[],"sources":["../../../../src/components/templates/grid/row.tsx"],"mappings":";;;cAUM,aAAA;;;;;;cAOA,eAAA;;;;;;;;UASW,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,MAAA;EACA,KAAA,gBAAqB,aAAA;EACrB,OAAA,gBAAuB,eAAA;EACvB,IAAA;AAAA;AAAA,cAMI,GAAA;EAAO,MAAA;EAAA,KAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GASV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/grid/row.mjs

@@ -0,0 +1,54 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import { RowContext } from "./row-context.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useResponsiveSize } from "@jbpark/use-hooks";
+
+//#region src/components/templates/grid/row.tsx
+const ALIGN_CLASSES = {
+	top: "items-start",
+	middle: "items-center",
+	bottom: "items-end",
+	stretch: "items-stretch"
+};
+const JUSTIFY_CLASSES = {
+	start: "justify-start",
+	end: "justify-end",
+	center: "justify-center",
+	"space-around": "justify-around",
+	"space-between": "justify-between",
+	"space-evenly": "justify-evenly"
+};
+const Row = ({ gutter = 0, align, justify, wrap = true, className, style, children, ...props }) => {
+	const [gutterX, gutterY] = Array.isArray(gutter) ? gutter : [gutter, 0];
+	const { breakpoint } = useResponsiveSize({ viewport: true });
+	const contextValue = useMemo(() => ({
+		gutterX,
+		gutterY,
+		breakpoint: breakpoint.current
+	}), [
+		gutterX,
+		gutterY,
+		breakpoint
+	]);
+	return /* @__PURE__ */ jsx(RowContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", wrap && "flex-wrap", align && ALIGN_CLASSES[align], justify && JUSTIFY_CLASSES[justify], className),
+			style: {
+				marginLeft: gutterX ? -gutterX / 2 : void 0,
+				marginRight: gutterX ? -gutterX / 2 : void 0,
+				rowGap: gutterY || void 0,
+				...style
+			},
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { Row as default };
+//# sourceMappingURL=row.mjs.map

package/dist/components/templates/grid/row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.mjs","names":[],"sources":["../../../../src/components/templates/grid/row.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useResponsiveSize } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RowContext } from './row-context';\n\nconst ALIGN_CLASSES = {\n  top: 'items-start',\n  middle: 'items-center',\n  bottom: 'items-end',\n  stretch: 'items-stretch',\n};\n\nconst JUSTIFY_CLASSES = {\n  start: 'justify-start',\n  end: 'justify-end',\n  center: 'justify-center',\n  'space-around': 'justify-around',\n  'space-between': 'justify-between',\n  'space-evenly': 'justify-evenly',\n};\n\nexport interface Props extends React.ComponentProps<'div'> {\n  gutter?: number | [number, number];\n  align?: keyof typeof ALIGN_CLASSES;\n  justify?: keyof typeof JUSTIFY_CLASSES;\n  wrap?: boolean;\n}\n\n// The breakpoint tier is resolved once here (not per-Col) so N columns\n// share a single resize listener instead of each mounting its own via\n// useResponsiveSize — matters once a grid has more than a couple Cols.\nconst Row = ({\n  gutter = 0,\n  align,\n  justify,\n  wrap = true,\n  className,\n  style,\n  children,\n  ...props\n}: Props) => {\n  const [gutterX, gutterY] = Array.isArray(gutter) ? gutter : [gutter, 0];\n  const { breakpoint } = useResponsiveSize({ viewport: true });\n\n  const contextValue = useMemo(\n    () => ({ gutterX, gutterY, breakpoint: breakpoint.current }),\n    [gutterX, gutterY, breakpoint],\n  );\n\n  return (\n    <RowContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          'flex',\n          wrap && 'flex-wrap',\n          align && ALIGN_CLASSES[align],\n          justify && JUSTIFY_CLASSES[justify],\n          className,\n          //\n        )}\n        style={{\n          // Negative margin + Col's matching padding is the classic\n          // gutter technique — unlike a plain `gap`, it doesn't break the\n          // percentage-width math when several Cols are meant to sum to\n          // exactly 100% of the row. Vertical gutter has no such\n          // constraint (it only affects spacing *between* wrapped rows),\n          // so it uses native `row-gap` directly.\n          marginLeft: gutterX ? -gutterX / 2 : undefined,\n          marginRight: gutterX ? -gutterX / 2 : undefined,\n          rowGap: gutterY || undefined,\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </RowContext.Provider>\n  );\n};\n\nexport default Row;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB;CACpB,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,SAAS;CACV;AAED,MAAM,kBAAkB;CACtB,OAAO;CACP,KAAK;CACL,QAAQ;CACR,gBAAgB;CAChB,iBAAiB;CACjB,gBAAgB;CACjB;AAYD,MAAM,OAAO,EACX,SAAS,GACT,OACA,SACA,OAAO,MACP,WACA,OACA,UACA,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,WAAW,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,QAAQ,EAAE;CACvE,MAAM,EAAE,eAAe,kBAAkB,EAAE,UAAU,MAAM,CAAC;CAE5D,MAAM,eAAe,eACZ;EAAE;EAAS;EAAS,YAAY,WAAW;EAAS,GAC3D;EAAC;EAAS;EAAS;EAAW,CAC/B;AAED,QACE,oBAAC,WAAW;EAAS,OAAO;YAC1B,oBAAC;GACC,WAAW,GACT,QACA,QAAQ,aACR,SAAS,cAAc,QACvB,WAAW,gBAAgB,UAC3B,UAED;GACD,OAAO;IAOL,YAAY,UAAU,CAAC,UAAU,IAAI;IACrC,aAAa,UAAU,CAAC,UAAU,IAAI;IACtC,QAAQ,WAAW;IACnB,GAAG;IACJ;GACD,GAAI;GAEH;IACG;GACc"}

package/dist/components/templates/index.d.mts

@@ -1 +1,13 @@
-import Layout from "../../Layout.mjs";
+import { Props } from "./layout/content.mjs";
+import { Props as Props$1 } from "./layout/footer.mjs";
+import { Props as Props$2 } from "./layout/header.mjs";
+import { Props as Props$3 } from "./layout/layout.mjs";
+import { Props as Props$4 } from "./layout/sider.mjs";
+import Layout from "../../Layout.mjs";
+import { Container, Props as Props$5 } from "./container.mjs";
+import { Empty, Props as Props$6 } from "./empty.mjs";
+import { Props as Props$7, Result } from "./result.mjs";
+import { PageHeader, Props as Props$8 } from "./page-header.mjs";
+import { Props as Props$9, Row } from "./grid/row.mjs";
+import { Col, Props as Props$10 } from "./grid/col.mjs";
+import "./grid/index.mjs";

package/dist/components/templates/layout/content.d.mts

@@ -1,10 +1,13 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/layout/content.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'main'> {}
+interface Props extends React.ComponentProps<'main'> {
+  asChild?: boolean;
+}
 declare const Content: ({
   children,
   className,
+  asChild,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/templates/layout/content.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAE/B,OAAA;EAAW,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"mappings":";;;UAIiB,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,OAAA;AAAA;AAAA,cAGI,OAAA;EAAW,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAAoD,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/content.mjs

@@ -1,9 +1,10 @@
 import { cn } from "../../../utils.mjs";
 import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 
 //#region src/components/templates/layout/content.tsx
-const Content = ({ children, className, ...props }) => {
-	return /* @__PURE__ */ jsx("main", {
+const Content = ({ children, className, asChild = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "main", {
 		className: cn("min-w-0 shrink grow basis-auto", className),
 		...props,
 		children

package/dist/components/templates/layout/content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'main'> {}\n\nconst Content = ({ children, className, ...props }: Props) => {\n  return (\n    <main\n      className={cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </main>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;AAIA,MAAM,WAAW,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC5D,QACE,oBAAC;EACC,WAAW,GACT,kCAUA,UACD;EACD,GAAI;EAEH;GACI"}
+{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentProps<'main'> {\n  asChild?: boolean;\n}\n\nconst Content = ({ children, className, asChild = false, ...props }: Props) => {\n  // Only one <main> landmark should exist per page — a Layout nested\n  // inside a page that already has its own <main> (or a Content nested\n  // inside another Content) needs a way to opt out of rendering a second\n  // one. asChild + Slot (same pattern as core/button.tsx and\n  // core/badge.tsx) merges these props/classes onto the caller's own\n  // element instead.\n  const Comp = asChild ? Slot : 'main';\n\n  return (\n    <Comp\n      className={cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;;AAQA,MAAM,WAAW,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,YAAmB;AAS7E,QACE,oBAHW,UAAU,OAAO;EAI1B,WAAW,GACT,kCAUA,UACD;EACD,GAAI;EAEH;GACI"}

package/dist/components/templates/layout/footer.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/layout/footer.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'footer'> {}
+interface Props extends React.ComponentProps<'footer'> {}
 declare const Footer: ({
   children,
   className,

package/dist/components/templates/layout/footer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.mts","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAE/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"footer.d.mts","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,cAAA;AAAA,cAE/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'footer'> {}\n\nconst Footer = ({ children, className, ...props }: Props) => {\n  return (\n    <footer className={cn('w-full', className)} {...props}>\n      {children}\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC3D,QACE,oBAAC;EAAO,WAAW,GAAG,UAAU,UAAU;EAAE,GAAI;EAC7C;GACM"}
+{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentProps<'footer'> {}\n\nconst Footer = ({ children, className, ...props }: Props) => {\n  return (\n    <footer className={cn('w-full', className)} {...props}>\n      {children}\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC3D,QACE,oBAAC;EAAO,WAAW,GAAG,UAAU,UAAU;EAAE,GAAI;EAC7C;GACM"}

package/dist/components/templates/layout/header.d.mts

@@ -1,10 +1,13 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/layout/header.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'header'> {}
+interface Props extends React.ComponentProps<'header'> {
+  position?: 'sticky' | 'static' | 'fixed';
+}
 declare const Header: ({
   children,
   className,
+  position,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/templates/layout/header.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAE/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,QAAA;AAAA;AAAA,cAGI,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAKb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/header.mjs

@@ -2,9 +2,9 @@ import { cn } from "../../../utils.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/templates/layout/header.tsx
-const Header = ({ children, className, ...props }) => {
+const Header = ({ children, className, position = "sticky", ...props }) => {
 	return /* @__PURE__ */ jsx("header", {
-		className: cn("sticky top-0 z-50", "bg-background", "flex h-16 w-full items-center px-5", className),
+		className: cn(position === "sticky" && "sticky top-0 z-50", position === "fixed" && "fixed inset-x-0 top-0 z-50", "bg-background", "flex h-16 w-full items-center px-5", className),
 		...props,
 		children
 	});

package/dist/components/templates/layout/header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'header'> {}\n\nconst Header = ({ children, className, ...props }: Props) => {\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-50',\n        'bg-background',\n        'flex h-16 w-full items-center px-5',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC3D,QACE,oBAAC;EACC,WAAW,GACT,qBACA,iBACA,sCACA,UAED;EACD,GAAI;EAEH;GACM"}
+{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentProps<'header'> {\n  position?: 'sticky' | 'static' | 'fixed';\n}\n\nconst Header = ({\n  children,\n  className,\n  position = 'sticky',\n  ...props\n}: Props) => {\n  return (\n    <header\n      className={cn(\n        position === 'sticky' && 'sticky top-0 z-50',\n        position === 'fixed' && 'fixed inset-x-0 top-0 z-50',\n        'bg-background',\n        'flex h-16 w-full items-center px-5',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;AAMA,MAAM,UAAU,EACd,UACA,WACA,WAAW,UACX,GAAG,YACQ;AACX,QACE,oBAAC;EACC,WAAW,GACT,aAAa,YAAY,qBACzB,aAAa,WAAW,8BACxB,iBACA,sCACA,UAED;EACD,GAAI;EAEH;GACM"}

package/dist/components/templates/layout/layout.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/layout/layout.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+interface Props extends React.ComponentProps<'div'> {}
 declare const Layout: ({
   children,
   className,

package/dist/components/templates/layout/layout.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";;;UAciB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAgB/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";;;UAciB,KAAA,SAAc,KAAA,CAAM,cAAA;AAAA,cAgB/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\n// Effects (including the registry-based detection in sider-context.ts)\n// never run during SSR, so registry state alone would render flex-col on\n// the server and every first paint, then flip to flex-row after hydration\n// for even the common, non-wrapped case. This direct-children check seeds\n// the correct initial guess for that common case so it's right immediately;\n// the registry then stays authoritative for Fragment-wrapped/custom-wrapped\n// Siders it can't see, correcting the guess after mount if needed.\nconst hasDirectSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isNested = useContext(LayoutNestedContext);\n  const [siderIds] = useState(() => new Set<object>());\n  const [siderCount, setSiderCount] = useState(() =>\n    hasDirectSiderChild(children) ? 1 : 0,\n  );\n\n  const registry = useMemo(\n    () => ({\n      registerSider: (id: object) => {\n        siderIds.add(id);\n        setSiderCount(siderIds.size);\n      },\n      unregisterSider: (id: object) => {\n        siderIds.delete(id);\n        setSiderCount(siderIds.size);\n      },\n    }),\n    [siderIds],\n  );\n\n  const isRow = siderCount > 0;\n\n  return (\n    <LayoutNestedContext.Provider value>\n      <SiderRegistryContext.Provider value={registry}>\n        <div\n          className={cn(\n            'flex w-full flex-1',\n            // A nested Layout (the Sider row wrapper) must stay free to\n            // shrink/grow inside its parent's flex column, so it keeps\n            // min-h-0. The outermost Layout has no ancestor to size against,\n            // so it needs its own height anchor or flex-1/grow are no-ops\n            // and Content collapses under Footer.\n            isNested ? 'min-h-0' : 'min-h-screen',\n            isRow ? 'flex-row' : 'flex-col',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </SiderRegistryContext.Provider>\n    </LayoutNestedContext.Provider>\n  );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;;AAgBA,MAAM,sBAAsB,cAAc,MAAM;AAShD,MAAM,uBAAuB,aAC3B,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,CAAC,YAAY,+BAAe,IAAI,KAAa,CAAC;CACpD,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,SAAS,GAAG,IAAI,EACrC;CAED,MAAM,WAAW,eACR;EACL,gBAAgB,OAAe;AAC7B,YAAS,IAAI,GAAG;AAChB,iBAAc,SAAS,KAAK;;EAE9B,kBAAkB,OAAe;AAC/B,YAAS,OAAO,GAAG;AACnB,iBAAc,SAAS,KAAK;;EAE/B,GACD,CAAC,SAAS,CACX;CAED,MAAM,QAAQ,aAAa;AAE3B,QACE,oBAAC,oBAAoB;EAAS;YAC5B,oBAAC,qBAAqB;GAAS,OAAO;aACpC,oBAAC;IACC,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,UACD;IACD,GAAI;IAEH;KACG;IACwB;GACH"}
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentProps<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\n// Effects (including the registry-based detection in sider-context.ts)\n// never run during SSR, so registry state alone would render flex-col on\n// the server and every first paint, then flip to flex-row after hydration\n// for even the common, non-wrapped case. This direct-children check seeds\n// the correct initial guess for that common case so it's right immediately;\n// the registry then stays authoritative for Fragment-wrapped/custom-wrapped\n// Siders it can't see, correcting the guess after mount if needed.\nconst hasDirectSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isNested = useContext(LayoutNestedContext);\n  const [siderIds] = useState(() => new Set<object>());\n  const [siderCount, setSiderCount] = useState(() =>\n    hasDirectSiderChild(children) ? 1 : 0,\n  );\n\n  const registry = useMemo(\n    () => ({\n      registerSider: (id: object) => {\n        siderIds.add(id);\n        setSiderCount(siderIds.size);\n      },\n      unregisterSider: (id: object) => {\n        siderIds.delete(id);\n        setSiderCount(siderIds.size);\n      },\n    }),\n    [siderIds],\n  );\n\n  const isRow = siderCount > 0;\n\n  return (\n    <LayoutNestedContext.Provider value>\n      <SiderRegistryContext.Provider value={registry}>\n        <div\n          className={cn(\n            'flex w-full flex-1',\n            // A nested Layout (the Sider row wrapper) must stay free to\n            // shrink/grow inside its parent's flex column, so it keeps\n            // min-h-0. The outermost Layout has no ancestor to size against,\n            // so it needs its own height anchor or flex-1/grow are no-ops\n            // and Content collapses under Footer.\n            isNested ? 'min-h-0' : 'min-h-screen',\n            isRow ? 'flex-row' : 'flex-col',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </SiderRegistryContext.Provider>\n    </LayoutNestedContext.Provider>\n  );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;;AAgBA,MAAM,sBAAsB,cAAc,MAAM;AAShD,MAAM,uBAAuB,aAC3B,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,CAAC,YAAY,+BAAe,IAAI,KAAa,CAAC;CACpD,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,SAAS,GAAG,IAAI,EACrC;CAED,MAAM,WAAW,eACR;EACL,gBAAgB,OAAe;AAC7B,YAAS,IAAI,GAAG;AAChB,iBAAc,SAAS,KAAK;;EAE9B,kBAAkB,OAAe;AAC/B,YAAS,OAAO,GAAG;AACnB,iBAAc,SAAS,KAAK;;EAE/B,GACD,CAAC,SAAS,CACX;CAED,MAAM,QAAQ,aAAa;AAE3B,QACE,oBAAC,oBAAoB;EAAS;YAC5B,oBAAC,qBAAqB;GAAS,OAAO;aACpC,oBAAC;IACC,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,UACD;IACD,GAAI;IAEH;KACG;IACwB;GACH"}

package/dist/components/templates/layout/sider.d.mts

@@ -1,18 +1,22 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/templates/layout/sider.d.ts
-interface Props extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'onCollapse'> {
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface Props extends Omit<React.ComponentProps<'aside'>, 'onCollapse'> {
   width?: number | string;
   collapsedWidth?: number | string;
   collapsible?: boolean;
   defaultCollapsed?: boolean;
   collapsed?: boolean;
+  placement?: 'left' | 'right';
   reverseArrow?: boolean;
   trigger?: React.ReactNode;
   classNames?: {
     trigger?: string;
   };
+  breakpoint?: Breakpoint;
   onCollapse?: (collapsed: boolean) => void;
+  onBreakpoint?: (broken: boolean) => void;
 }
 declare const Sider: ({
   children,
@@ -24,9 +28,12 @@ declare const Sider: ({
   collapsible,
   defaultCollapsed,
   collapsed: _collapsed,
+  placement,
   reverseArrow,
   trigger,
-  onCollapse: _onCollapse,
+  breakpoint,
+  onCollapse,
+  onBreakpoint,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/templates/layout/sider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"sider.d.mts","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"mappings":";;;UAUiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,KAAA;EACA,cAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,YAAA;EACA,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,UAAA;IACE,OAAA;EAAA;EAEF,UAAA,IAAc,SAAA;AAAA;AAAA,cAMV,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,KAAA;EAAA,cAAA;EAAA,WAAA;EAAA,gBAAA;EAAA,SAAA,EAAA,UAAA;EAAA,YAAA;EAAA,OAAA;EAAA,UAAA,EAAA,WAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"sider.d.mts","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"mappings":";;;KAYK,UAAA;AAAA,UAQY,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,cAAA;EAGN,KAAA;EACA,cAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,SAAA;EACA,YAAA;EACA,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,UAAA;IACE,OAAA;EAAA;EAEF,UAAA,GAAa,UAAA;EACb,UAAA,IAAc,SAAA;EACd,YAAA,IAAgB,MAAA;AAAA;AAAA,cAMZ,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,KAAA;EAAA,cAAA;EAAA,WAAA;EAAA,gBAAA;EAAA,SAAA,EAAA,UAAA;EAAA,SAAA;EAAA,YAAA;EAAA,OAAA;EAAA,UAAA;EAAA,UAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAiBZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/sider.mjs

@@ -1,38 +1,65 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
 import { useRegisterSider } from "./sider-context.mjs";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { useState } from "react";
+import { useId, useLayoutEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState, useResponsiveSize } from "@jbpark/use-hooks";
 
 //#region src/components/templates/layout/sider.tsx
+const BREAKPOINT_ORDER = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
 const toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
-const Sider = ({ children, className, classNames, style, width = 200, collapsedWidth = 80, collapsible = false, defaultCollapsed = false, collapsed: _collapsed, reverseArrow = false, trigger, onCollapse: _onCollapse = () => {}, ...props }) => {
+const Sider = ({ children, className, classNames, style, width = 200, collapsedWidth = 80, collapsible = false, defaultCollapsed = false, collapsed: _collapsed, placement = "left", reverseArrow = false, trigger, breakpoint, onCollapse, onBreakpoint, ...props }) => {
 	useRegisterSider();
-	const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
-	const controlled = _collapsed !== void 0;
-	const collapsed = controlled ? _collapsed : uncontrolledCollapsed;
-	const onCollapse = () => {
-		const next = !collapsed;
-		if (!controlled) setUncontrolledCollapsed(next);
-		_onCollapse(next);
+	const { locale } = useConfig();
+	const contentId = useId();
+	const [collapsed, setCollapsed] = useControllableState({
+		value: _collapsed,
+		defaultValue: defaultCollapsed,
+		onChange: onCollapse
+	});
+	const { breakpoint: viewportBreakpoint } = useResponsiveSize({ viewport: true });
+	const broken = breakpoint ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) < BREAKPOINT_ORDER.indexOf(breakpoint) : false;
+	useLayoutEffect(() => {
+		if (!breakpoint) return;
+		setCollapsed(broken);
+		onBreakpoint?.(broken);
+	}, [
+		broken,
+		breakpoint,
+		setCollapsed,
+		onBreakpoint
+	]);
+	const onTriggerClick = () => {
+		setCollapsed(!collapsed);
 	};
-	const TriggerIcon = collapsed !== reverseArrow ? PanelLeftOpen : PanelLeftClose;
+	const TriggerIcon = collapsed !== (reverseArrow !== (placement === "right")) ? PanelLeftOpen : PanelLeftClose;
 	return /* @__PURE__ */ jsxs("aside", {
-		className: cn("z-10 flex h-full shrink-0 flex-col overflow-hidden", "transition-[width] duration-200", className),
+		className: cn("z-10 flex h-full shrink-0 flex-col overflow-hidden", "transition-[width] duration-200", placement === "right" && "order-last", className),
 		style: {
 			width: toCssSize(collapsed ? collapsedWidth : width),
 			...style
 		},
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
+			id: contentId,
 			className: "min-h-0 flex-1 overflow-auto",
 			children
 		}), collapsible && /* @__PURE__ */ jsx("button", {
 			type: "button",
-			"aria-label": collapsed ? "펼치기" : "접기",
-			onClick: onCollapse,
+			"aria-label": collapsed ? locale.expand ?? DEFAULT_LOCALE.expand : locale.collapse ?? DEFAULT_LOCALE.collapse,
+			"aria-expanded": !collapsed,
+			"aria-controls": contentId,
+			onClick: onTriggerClick,
 			className: cn("flex w-full shrink-0 items-center justify-center py-2", "cursor-pointer transition-colors hover:bg-black/5", classNames?.trigger),
 			children: trigger === void 0 ? /* @__PURE__ */ jsx(TriggerIcon, { className: "size-4" }) : trigger
 		})]

package/dist/components/templates/layout/sider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  onCollapse?: (collapsed: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  reverseArrow = false,\n  trigger,\n  onCollapse: _onCollapse = () => {},\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const controlled = _collapsed !== undefined;\n  const collapsed = controlled ? _collapsed : uncontrolledCollapsed;\n\n  const onCollapse = () => {\n    const next = !collapsed;\n\n    if (!controlled) {\n      setUncontrolledCollapsed(next);\n    }\n    _onCollapse(next);\n  };\n\n  const TriggerIcon =\n    collapsed !== reverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        // Below Header's z-50 (and every other floating/overlay primitive\n        // in this library, which all use z-50) — Sider is a static layout\n        // column, not floating chrome, and previously outranked Header\n        // with an arbitrary z-100, covering it once Header stuck to the\n        // viewport top on scroll.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div className=\"min-h-0 flex-1 overflow-auto\">{children}</div>\n      {collapsible && (\n        <button\n          type=\"button\"\n          aria-label={collapsed ? '펼치기' : '접기'}\n          onClick={onCollapse}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AA2BA,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,eAAe,OACf,SACA,YAAY,oBAAoB,IAChC,GAAG,YACQ;AACX,mBAAkB;CAElB,MAAM,CAAC,uBAAuB,4BAC5B,SAAS,iBAAiB;CAE5B,MAAM,aAAa,eAAe;CAClC,MAAM,YAAY,aAAa,aAAa;CAE5C,MAAM,mBAAmB;EACvB,MAAM,OAAO,CAAC;AAEd,MAAI,CAAC,WACH,0BAAyB,KAAK;AAEhC,cAAY,KAAK;;CAGnB,MAAM,cACJ,cAAc,eAAe,gBAAgB;AAE/C,QACE,qBAAC;EACC,WAAW,GAMT,sDACA,mCACA,UAED;EACD,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,MAAM;GACpD,GAAG;GACJ;EACD,GAAI;aAEJ,oBAAC;GAAI,WAAU;GAAgC;IAAe,EAC7D,eACC,oBAAC;GACC,MAAK;GACL,cAAY,YAAY,QAAQ;GAChC,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,QAEb;aAEA,YAAY,SAAY,oBAAC,eAAY,WAAU,WAAW,GAAG;IACvD;GAEL"}
+{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useLayoutEffect } from 'react';\n\nimport { useControllableState, useResponsiveSize } from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  useLayoutEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    setCollapsed(broken);\n    onBreakpoint?.(broken);\n  }, [broken, breakpoint, setCollapsed, onBreakpoint]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        // Below Header's z-50 (and every other floating/overlay primitive\n        // in this library, which all use z-50) — Sider is a static layout\n        // column, not floating chrome, and previously outranked Header\n        // with an arbitrary z-100, covering it once Header stuck to the\n        // viewport top on scroll.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && (\n        <button\n          type=\"button\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAsB5E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;AACX,mBAAkB;CAElB,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,YAAY,OAAO;CACzB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CAEF,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,MACX,CAAC;CACF,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,QAAQ,GACpD,iBAAiB,QAAQ,WAAW,GACpC;AAEJ,uBAAsB;AACpB,MAAI,CAAC,WACH;AAGF,eAAa,OAAO;AACpB,iBAAe,OAAO;IACrB;EAAC;EAAQ;EAAY;EAAc;EAAa,CAAC;CAEpD,MAAM,uBAAuB;AAC3B,eAAa,CAAC,UAAU;;CAS1B,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;AAExD,QACE,qBAAC;EACC,WAAW,GAMT,sDACA,mCAKA,cAAc,WAAW,cACzB,UAED;EACD,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,MAAM;GACpD,GAAG;GACJ;EACD,GAAI;aAEJ,oBAAC;GAAI,IAAI;GAAW,WAAU;GAC3B;IACG,EACL,eACC,oBAAC;GACC,MAAK;GACL,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,QAEb;aAEA,YAAY,SAAY,oBAAC,eAAY,WAAU,WAAW,GAAG;IACvD;GAEL"}