@akshar-technosoft/ui 1.3.0 → 1.3.2

package/dist/components/layouts/app-container.cjs

@@ -0,0 +1,3 @@
+"use client"
+"use strict";var t=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var d=(e,o)=>{for(var p in o)t(e,p,{get:o[p],enumerable:!0})},x=(e,o,p,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of m(o))!f.call(e,r)&&r!==p&&t(e,r,{get:()=>o[r],enumerable:!(a=i(o,r))||a.enumerable});return e};var C=e=>x(t({},"__esModule",{value:!0}),e);var N={};d(N,{AppContainer:()=>u});module.exports=C(N);var l=require("clsx"),n=require("tailwind-merge");function s(...e){return(0,n.twMerge)((0,l.clsx)(e))}var c=require("react/jsx-runtime"),u=({children:e,className:o})=>(0,c.jsx)("div",{className:s("flex flex-col h-full gap-2",o),children:e});0&&(module.exports={AppContainer});
+//# sourceMappingURL=app-container.cjs.map

package/dist/components/layouts/app-container.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/app-container.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { cn } from '../../lib/utils.js';\nimport type { ReactNode } from 'react';\n\nexport type AppContainerProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** Page shell: full-height column, small gap between header/content/footer. */\nexport const AppContainer = ({ children, className }: AppContainerProps) => (\n  <div className={cn('flex flex-col h-full gap-2', className)}>\n    {children}\n  </div>\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"],"mappings":";yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAAsC,gBACtCC,EAAwB,0BAEjB,SAASC,KAAMC,EAAsB,CAC1C,SAAO,cAAQ,QAAKA,CAAM,CAAC,CAC7B,CDKE,IAAAC,EAAA,6BADWC,EAAe,CAAC,CAAE,SAAAC,EAAU,UAAAC,CAAU,OACjD,OAAC,OAAI,UAAWC,EAAG,6BAA8BD,CAAS,EACvD,SAAAD,EACH","names":["app_container_exports","__export","AppContainer","__toCommonJS","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","AppContainer","children","className","cn"]}

package/dist/components/layouts/app-container.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type AppContainerProps = {
+    children: ReactNode;
+    className?: string;
+};
+/** Page shell: full-height column, small gap between header/content/footer. */
+declare const AppContainer: ({ children, className }: AppContainerProps) => react_jsx_runtime.JSX.Element;
+
+export { AppContainer, type AppContainerProps };

package/dist/components/layouts/app-container.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type AppContainerProps = {
+    children: ReactNode;
+    className?: string;
+};
+/** Page shell: full-height column, small gap between header/content/footer. */
+declare const AppContainer: ({ children, className }: AppContainerProps) => react_jsx_runtime.JSX.Element;
+
+export { AppContainer, type AppContainerProps };

package/dist/components/layouts/app-container.js

@@ -0,0 +1,3 @@
+"use client"
+import{clsx as p}from"clsx";import{twMerge as t}from"tailwind-merge";function o(...e){return t(p(e))}import{jsx as a}from"react/jsx-runtime";var i=({children:e,className:r})=>a("div",{className:o("flex flex-col h-full gap-2",r),children:e});export{i as AppContainer};
+//# sourceMappingURL=app-container.js.map

package/dist/components/layouts/app-container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/layouts/app-container.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import { cn } from '../../lib/utils.js';\nimport type { ReactNode } from 'react';\n\nexport type AppContainerProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** Page shell: full-height column, small gap between header/content/footer. */\nexport const AppContainer = ({ children, className }: AppContainerProps) => (\n  <div className={cn('flex flex-col h-full gap-2', className)}>\n    {children}\n  </div>\n);\n"],"mappings":";AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CCKE,cAAAC,MAAA,oBADK,IAAMC,EAAe,CAAC,CAAE,SAAAC,EAAU,UAAAC,CAAU,IACjDH,EAAC,OAAI,UAAWI,EAAG,6BAA8BD,CAAS,EACvD,SAAAD,EACH","names":["clsx","twMerge","cn","inputs","jsx","AppContainer","children","className","cn"]}

package/dist/components/layouts/app-content.cjs

@@ -0,0 +1,3 @@
+"use client"
+"use strict";var B=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var z=(e,n)=>{for(var a in n)p(e,a,{get:n[a],enumerable:!0})},b=(e,n,a,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of _(n))!M.call(e,s)&&s!==a&&p(e,s,{get:()=>n[s],enumerable:!(i=E(n,s))||i.enumerable});return e};var V=(e,n,a)=>(a=e!=null?B(I(e)):{},b(n||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),H=e=>b(p({},"__esModule",{value:!0}),e);var U={};z(U,{AppContent:()=>O,AppContentFooter:()=>C,AppContentHeader:()=>P,AppSheet:()=>A});module.exports=H(U);var w=require("clsx"),g=require("tailwind-merge");function r(...e){return(0,g.twMerge)((0,w.clsx)(e))}var d=V(require("react"),1),o=require("react/jsx-runtime"),y="(min-width: 1024px)",L=()=>{let[e,n]=d.default.useState(()=>typeof window>"u"||window.matchMedia(y).matches);return d.default.useEffect(()=>{let a=window.matchMedia(y),i=()=>n(a.matches);return a.addEventListener("change",i),()=>a.removeEventListener("change",i)},[]),e},P=e=>null,C=e=>null,A=e=>null,O=({children:e,className:n,contentClassName:a})=>{let i=L(),s,h,c,m,u,N=d.default.Children.toArray(e).filter(t=>{if(d.default.isValidElement(t)){if(t.type===P){let l=t.props;return s=l.children,h=l.className,!1}if(t.type===C){let l=t.props;return c=l.children,m=l.className,!1}if(t.type===A)return u=t.props,!1}return!0}),R=(0,o.jsx)("div",{className:r("flex-1 overflow-auto h-full no-scrollbar p-2",a),children:N}),S=t=>{let{side:l="right"}=t,k=(t.overlay??!0)||!i,f=r("w-1/3 max-w-full",t.className),v=r("h-full bg-background",l==="right"?"border-l":"border-r"),x=(0,o.jsx)("div",{className:r("h-full p-2",a),children:N});return k?(0,o.jsxs)("div",{tabIndex:-1,className:"flex relative flex-1 overflow-hidden",children:[(0,o.jsx)("div",{className:"h-full overflow-auto w-full transition-all duration-500 relative z-10",children:x}),(0,o.jsxs)("div",{tabIndex:-1,inert:!t.open,className:r("absolute inset-0 z-20",!t.open&&"pointer-events-none"),children:[(0,o.jsx)("div",{className:r("absolute inset-0 bg-black/50 transition-opacity duration-500",t.open?"opacity-100":"opacity-0 pointer-events-none"),onClick:()=>t.onOpenChange(!1)}),(0,o.jsx)("div",{tabIndex:-1,className:r("absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl","transition-all duration-500 ease-in-out",l==="right"?"right-0":"left-0",t.open?"translate-x-0 opacity-100":r(l==="right"?"translate-x-full":"-translate-x-full","opacity-0 pointer-events-none"),v,f),children:t.children})]})]}):(0,o.jsxs)("div",{className:"flex relative flex-1 overflow-hidden",children:[l==="left"&&(0,o.jsx)("div",{className:r("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",v,t.open?f:"w-0 border-0"),children:t.children}),(0,o.jsx)("div",{className:r("h-full flex-1 min-w-0 overflow-auto transition-all duration-500",t.open&&"overflow-y-auto overflow-x-hidden"),children:x}),l==="right"&&(0,o.jsx)("div",{className:r("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",v,t.open?f:"w-0 border-0"),children:t.children})]})};return(0,o.jsxs)("div",{className:r("flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2",n),children:[s&&(0,o.jsx)("div",{className:r("border-b p-2",h),children:s}),u?S(u):R,c&&(0,o.jsx)("div",{className:r("border-t p-2",m),children:c})]})};0&&(module.exports={AppContent,AppContentFooter,AppContentHeader,AppSheet});
+//# sourceMappingURL=app-content.cjs.map

package/dist/components/layouts/app-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/app-content.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { cn } from \"../../lib/utils.js\"\nimport React from \"react\"\n\ntype BandProps = { children: React.ReactNode; className?: string }\n\n/** Below this the main content can't spare a fixed-width push panel — push sheets render as overlay. */\nconst PUSH_MIN_QUERY = \"(min-width: 1024px)\"\n\nconst useCanPush = () => {\n  const [canPush, setCanPush] = React.useState(\n    () => typeof window === \"undefined\" || window.matchMedia(PUSH_MIN_QUERY).matches\n  )\n  React.useEffect(() => {\n    const mql = window.matchMedia(PUSH_MIN_QUERY)\n    const onChange = () => setCanPush(mql.matches)\n    mql.addEventListener(\"change\", onChange)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n  return canPush\n}\n\n/**\n * Pinned band above AppContent's scroll region (border-b, shares the parent's\n * padding). Must be a DIRECT child of AppContent — it is a marker: AppContent\n * extracts it and renders the band itself; anything else inside scrolls as body.\n */\nexport const AppContentHeader = (_props: BandProps) => null\n\n/** Pinned band below the scroll region. Same contract as AppContentHeader. */\nexport const AppContentFooter = (_props: BandProps) => null\n\nexport type AppSheetProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Sheet edge. Default right. */\n  side?: \"left\" | \"right\"\n  /** Default true: sheet slides OVER the dimmed body (click outside closes).\n   *  `overlay={false}` = push mode: sheet takes its width, body shrinks.\n   *  Below 1024px push falls back to overlay automatically — a fixed-width\n   *  panel would leave the main content unusably cramped. */\n  overlay?: boolean\n  /** Merged onto the panel's default `w-1/3 max-w-full` — override the width\n   *  (`w-1/2`, `w-[600px]`), round corners (`rounded-tr-lg`, `rounded-br-lg`,\n   *  `rounded-lg`…; default is square — round the outer corners, square off any\n   *  that touch an AppContentHeader/Footer band), or add styling (`p-0`). */\n  className?: string\n  children: React.ReactNode\n}\n\n/**\n * Side panel of an AppContent. Must be a DIRECT child of AppContent (marker,\n * same contract as the bands) — one sheet per AppContent. Controlled only.\n */\nexport const AppSheet = (_props: AppSheetProps) => null\n\nexport type AppContentProps = {\n  children: React.ReactNode\n  className?: string\n  /** Extra classes for the inner content wrapper (default has `p-2` — pass `p-0` to drop it). */\n  contentClassName?: string\n}\n\n/**\n * Page content region. Fills the remaining space of its flex parent\n * (`flex-auto min-h-0`) — the standard slot under AppContainer/AppHeader.\n * For a content-sized block override via className (`flex-none`) or pair with\n * an explicit height (`h-full`). Children scroll; AppContentHeader/Footer and\n * AppSheet direct children are extracted and rendered as pinned band / side panel.\n */\nexport const AppContent = ({\n  children: rawChildren,\n  className,\n  contentClassName,\n}: AppContentProps) => {\n  const canPush = useCanPush()\n\n  // extract marker children; the rest is the scrolling body\n  let header: React.ReactNode; let headerClassName: string | undefined\n  let footer: React.ReactNode; let footerClassName: string | undefined\n  let sheet: AppSheetProps | undefined\n  const children = React.Children.toArray(rawChildren).filter((child) => {\n    if (React.isValidElement(child)) {\n      if (child.type === AppContentHeader) {\n        const p = child.props as BandProps\n        header = p.children; headerClassName = p.className; return false\n      }\n      if (child.type === AppContentFooter) {\n        const p = child.props as BandProps\n        footer = p.children; footerClassName = p.className; return false\n      }\n      if (child.type === AppSheet) {\n        sheet = child.props as AppSheetProps; return false\n      }\n    }\n    return true\n  })\n\n  const body = (\n    <div className={cn(\"flex-1 overflow-auto h-full no-scrollbar p-2\", contentClassName)}>\n      {children}\n    </div>\n  )\n\n  const renderWithSheet = (s: AppSheetProps) => {\n    const { side = \"right\" } = s\n    const overlay = (s.overlay ?? true) || !canPush\n    const width = cn(\"w-1/3 max-w-full\", s.className)\n    const panel = cn(\"h-full bg-background\", side === \"right\" ? \"border-l\" : \"border-r\")\n    const inner = (\n      <div className={cn(\"h-full p-2\", contentClassName)}>\n        {children}\n      </div>\n    )\n\n    if (!overlay) {\n      // push mode: sheet width animates open/closed, body shrinks with it\n      return (\n        <div className=\"flex relative flex-1 overflow-hidden\">\n          {side === \"left\" && (\n            <div className={cn(\"shrink-0 overflow-y-auto transition-all duration-500 ease-in-out\", panel, s.open ? width : \"w-0 border-0\")}>\n              {s.children}\n            </div>\n          )}\n          <div className={cn(\n            \"h-full flex-1 min-w-0 overflow-auto transition-all duration-500\",\n            s.open && \"overflow-y-auto overflow-x-hidden\"\n          )}>\n            {inner}\n          </div>\n          {side === \"right\" && (\n            <div className={cn(\"shrink-0 overflow-y-auto transition-all duration-500 ease-in-out\", panel, s.open ? width : \"w-0 border-0\")}>\n              {s.children}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    // overlay mode: dimmed body, sheet slides over it\n    return (\n      <div tabIndex={-1} className=\"flex relative flex-1 overflow-hidden\">\n        <div className=\"h-full overflow-auto w-full transition-all duration-500 relative z-10\">\n          {inner}\n        </div>\n        <div\n          tabIndex={-1}\n          inert={!s.open}\n          className={cn(\"absolute inset-0 z-20\", !s.open && \"pointer-events-none\")}\n        >\n          <div\n            className={cn(\n              \"absolute inset-0 bg-black/50 transition-opacity duration-500\",\n              s.open ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n            )}\n            onClick={() => s.onOpenChange(false)}\n          />\n          <div\n            tabIndex={-1}\n            className={cn(\n              \"absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl\",\n              \"transition-all duration-500 ease-in-out\",\n              side === \"right\" ? \"right-0\" : \"left-0\",\n              s.open\n                ? \"translate-x-0 opacity-100\"\n                : cn(side === \"right\" ? \"translate-x-full\" : \"-translate-x-full\", \"opacity-0 pointer-events-none\"),\n              panel,\n              width\n            )}\n          >\n            {s.children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\n      \"flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2\",\n      className\n    )}>\n      {header && (\n        <div className={cn(\"border-b p-2\", headerClassName)}>\n          {header}\n        </div>\n      )}\n      {sheet ? renderWithSheet(sheet) : body}\n      {footer && (\n        <div className={cn(\"border-t p-2\", footerClassName)}>\n          {footer}\n        </div>\n      )}\n    </div>\n  )\n}\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"],"mappings":";0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,qBAAAC,EAAA,qBAAAC,EAAA,aAAAC,IAAA,eAAAC,EAAAN,GCAA,IAAAO,EAAsC,gBACtCC,EAAwB,0BAEjB,SAASC,KAAMC,EAAsB,CAC1C,SAAO,cAAQ,QAAKA,CAAM,CAAC,CAC7B,CDJA,IAAAC,EAAkB,sBAiGdC,EAAA,6BA5FEC,EAAiB,sBAEjBC,EAAa,IAAM,CACvB,GAAM,CAACC,EAASC,CAAU,EAAI,EAAAC,QAAM,SAClC,IAAM,OAAO,OAAW,KAAe,OAAO,WAAWJ,CAAc,EAAE,OAC3E,EACA,SAAAI,QAAM,UAAU,IAAM,CACpB,IAAMC,EAAM,OAAO,WAAWL,CAAc,EACtCM,EAAW,IAAMH,EAAWE,EAAI,OAAO,EAC7C,OAAAA,EAAI,iBAAiB,SAAUC,CAAQ,EAChC,IAAMD,EAAI,oBAAoB,SAAUC,CAAQ,CACzD,EAAG,CAAC,CAAC,EACEJ,CACT,EAOaK,EAAoBC,GAAsB,KAG1CC,EAAoBD,GAAsB,KAwB1CE,EAAYF,GAA0B,KAgBtCG,EAAa,CAAC,CACzB,SAAUC,EACV,UAAAC,EACA,iBAAAC,CACF,IAAuB,CACrB,IAAMZ,EAAUD,EAAW,EAGvBc,EAA6BC,EAC7BC,EAA6BC,EAC7BC,EACEC,EAAW,EAAAhB,QAAM,SAAS,QAAQQ,CAAW,EAAE,OAAQS,GAAU,CACrE,GAAI,EAAAjB,QAAM,eAAeiB,CAAK,EAAG,CAC/B,GAAIA,EAAM,OAASd,EAAkB,CACnC,IAAMe,EAAID,EAAM,MAChB,OAAAN,EAASO,EAAE,SAAUN,EAAkBM,EAAE,UAAkB,EAC7D,CACA,GAAID,EAAM,OAASZ,EAAkB,CACnC,IAAMa,EAAID,EAAM,MAChB,OAAAJ,EAASK,EAAE,SAAUJ,EAAkBI,EAAE,UAAkB,EAC7D,CACA,GAAID,EAAM,OAASX,EACjB,OAAAS,EAAQE,EAAM,MAA+B,EAEjD,CACA,MAAO,EACT,CAAC,EAEKE,KACJ,OAAC,OAAI,UAAWC,EAAG,+CAAgDV,CAAgB,EAChF,SAAAM,EACH,EAGIK,EAAmBC,GAAqB,CAC5C,GAAM,CAAE,KAAAC,EAAO,OAAQ,EAAID,EACrBE,GAAWF,EAAE,SAAW,KAAS,CAACxB,EAClC2B,EAAQL,EAAG,mBAAoBE,EAAE,SAAS,EAC1CI,EAAQN,EAAG,uBAAwBG,IAAS,QAAU,WAAa,UAAU,EAC7EI,KACJ,OAAC,OAAI,UAAWP,EAAG,aAAcV,CAAgB,EAC9C,SAAAM,EACH,EAGF,OAAKQ,KA0BH,QAAC,OAAI,SAAU,GAAI,UAAU,uCAC3B,oBAAC,OAAI,UAAU,wEACZ,SAAAG,EACH,KACA,QAAC,OACC,SAAU,GACV,MAAO,CAACL,EAAE,KACV,UAAWF,EAAG,wBAAyB,CAACE,EAAE,MAAQ,qBAAqB,EAEvE,oBAAC,OACC,UAAWF,EACT,+DACAE,EAAE,KAAO,cAAgB,+BAC3B,EACA,QAAS,IAAMA,EAAE,aAAa,EAAK,EACrC,KACA,OAAC,OACC,SAAU,GACV,UAAWF,EACT,mEACA,0CACAG,IAAS,QAAU,UAAY,SAC/BD,EAAE,KACE,4BACAF,EAAGG,IAAS,QAAU,mBAAqB,oBAAqB,+BAA+B,EACnGG,EACAD,CACF,EAEC,SAAAH,EAAE,SACL,GACF,GACF,KAvDE,QAAC,OAAI,UAAU,uCACZ,UAAAC,IAAS,WACR,OAAC,OAAI,UAAWH,EAAG,mEAAoEM,EAAOJ,EAAE,KAAOG,EAAQ,cAAc,EAC1H,SAAAH,EAAE,SACL,KAEF,OAAC,OAAI,UAAWF,EACd,kEACAE,EAAE,MAAQ,mCACZ,EACG,SAAAK,EACH,EACCJ,IAAS,YACR,OAAC,OAAI,UAAWH,EAAG,mEAAoEM,EAAOJ,EAAE,KAAOG,EAAQ,cAAc,EAC1H,SAAAH,EAAE,SACL,GAEJ,CAwCN,EAEA,SACE,QAAC,OAAI,UAAWF,EACd,yFACAX,CACF,EACG,UAAAE,MACC,OAAC,OAAI,UAAWS,EAAG,eAAgBR,CAAe,EAC/C,SAAAD,EACH,EAEDI,EAAQM,EAAgBN,CAAK,EAAII,EACjCN,MACC,OAAC,OAAI,UAAWO,EAAG,eAAgBN,CAAe,EAC/C,SAAAD,EACH,GAEJ,CAEJ","names":["app_content_exports","__export","AppContent","AppContentFooter","AppContentHeader","AppSheet","__toCommonJS","import_clsx","import_tailwind_merge","cn","inputs","import_react","import_jsx_runtime","PUSH_MIN_QUERY","useCanPush","canPush","setCanPush","React","mql","onChange","AppContentHeader","_props","AppContentFooter","AppSheet","AppContent","rawChildren","className","contentClassName","header","headerClassName","footer","footerClassName","sheet","children","child","p","body","cn","renderWithSheet","s","side","overlay","width","panel","inner"]}

package/dist/components/layouts/app-content.d.cts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type BandProps = {
+    children: React__default.ReactNode;
+    className?: string;
+};
+/**
+ * Pinned band above AppContent's scroll region (border-b, shares the parent's
+ * padding). Must be a DIRECT child of AppContent — it is a marker: AppContent
+ * extracts it and renders the band itself; anything else inside scrolls as body.
+ */
+declare const AppContentHeader: (_props: BandProps) => null;
+/** Pinned band below the scroll region. Same contract as AppContentHeader. */
+declare const AppContentFooter: (_props: BandProps) => null;
+type AppSheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Sheet edge. Default right. */
+    side?: "left" | "right";
+    /** Default true: sheet slides OVER the dimmed body (click outside closes).
+     *  `overlay={false}` = push mode: sheet takes its width, body shrinks.
+     *  Below 1024px push falls back to overlay automatically — a fixed-width
+     *  panel would leave the main content unusably cramped. */
+    overlay?: boolean;
+    /** Merged onto the panel's default `w-1/3 max-w-full` — override the width
+     *  (`w-1/2`, `w-[600px]`), round corners (`rounded-tr-lg`, `rounded-br-lg`,
+     *  `rounded-lg`…; default is square — round the outer corners, square off any
+     *  that touch an AppContentHeader/Footer band), or add styling (`p-0`). */
+    className?: string;
+    children: React__default.ReactNode;
+};
+/**
+ * Side panel of an AppContent. Must be a DIRECT child of AppContent (marker,
+ * same contract as the bands) — one sheet per AppContent. Controlled only.
+ */
+declare const AppSheet: (_props: AppSheetProps) => null;
+type AppContentProps = {
+    children: React__default.ReactNode;
+    className?: string;
+    /** Extra classes for the inner content wrapper (default has `p-2` — pass `p-0` to drop it). */
+    contentClassName?: string;
+};
+/**
+ * Page content region. Fills the remaining space of its flex parent
+ * (`flex-auto min-h-0`) — the standard slot under AppContainer/AppHeader.
+ * For a content-sized block override via className (`flex-none`) or pair with
+ * an explicit height (`h-full`). Children scroll; AppContentHeader/Footer and
+ * AppSheet direct children are extracted and rendered as pinned band / side panel.
+ */
+declare const AppContent: ({ children: rawChildren, className, contentClassName, }: AppContentProps) => react_jsx_runtime.JSX.Element;
+
+export { AppContent, AppContentFooter, AppContentHeader, type AppContentProps, AppSheet, type AppSheetProps };

package/dist/components/layouts/app-content.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type BandProps = {
+    children: React__default.ReactNode;
+    className?: string;
+};
+/**
+ * Pinned band above AppContent's scroll region (border-b, shares the parent's
+ * padding). Must be a DIRECT child of AppContent — it is a marker: AppContent
+ * extracts it and renders the band itself; anything else inside scrolls as body.
+ */
+declare const AppContentHeader: (_props: BandProps) => null;
+/** Pinned band below the scroll region. Same contract as AppContentHeader. */
+declare const AppContentFooter: (_props: BandProps) => null;
+type AppSheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Sheet edge. Default right. */
+    side?: "left" | "right";
+    /** Default true: sheet slides OVER the dimmed body (click outside closes).
+     *  `overlay={false}` = push mode: sheet takes its width, body shrinks.
+     *  Below 1024px push falls back to overlay automatically — a fixed-width
+     *  panel would leave the main content unusably cramped. */
+    overlay?: boolean;
+    /** Merged onto the panel's default `w-1/3 max-w-full` — override the width
+     *  (`w-1/2`, `w-[600px]`), round corners (`rounded-tr-lg`, `rounded-br-lg`,
+     *  `rounded-lg`…; default is square — round the outer corners, square off any
+     *  that touch an AppContentHeader/Footer band), or add styling (`p-0`). */
+    className?: string;
+    children: React__default.ReactNode;
+};
+/**
+ * Side panel of an AppContent. Must be a DIRECT child of AppContent (marker,
+ * same contract as the bands) — one sheet per AppContent. Controlled only.
+ */
+declare const AppSheet: (_props: AppSheetProps) => null;
+type AppContentProps = {
+    children: React__default.ReactNode;
+    className?: string;
+    /** Extra classes for the inner content wrapper (default has `p-2` — pass `p-0` to drop it). */
+    contentClassName?: string;
+};
+/**
+ * Page content region. Fills the remaining space of its flex parent
+ * (`flex-auto min-h-0`) — the standard slot under AppContainer/AppHeader.
+ * For a content-sized block override via className (`flex-none`) or pair with
+ * an explicit height (`h-full`). Children scroll; AppContentHeader/Footer and
+ * AppSheet direct children are extracted and rendered as pinned band / side panel.
+ */
+declare const AppContent: ({ children: rawChildren, className, contentClassName, }: AppContentProps) => react_jsx_runtime.JSX.Element;
+
+export { AppContent, AppContentFooter, AppContentHeader, type AppContentProps, AppSheet, type AppSheetProps };

package/dist/components/layouts/app-content.js

@@ -0,0 +1,3 @@
+"use client"
+import{clsx as P}from"clsx";import{twMerge as C}from"tailwind-merge";function t(...a){return C(P(a))}import i from"react";import{jsx as n,jsxs as s}from"react/jsx-runtime";var b="(min-width: 1024px)",A=()=>{let[a,d]=i.useState(()=>typeof window>"u"||window.matchMedia(b).matches);return i.useEffect(()=>{let r=window.matchMedia(b),l=()=>d(r.matches);return r.addEventListener("change",l),()=>r.removeEventListener("change",l)},[]),a},R=a=>null,S=a=>null,k=a=>null,z=({children:a,className:d,contentClassName:r})=>{let l=A(),p,h,c,m,u,N=i.Children.toArray(a).filter(e=>{if(i.isValidElement(e)){if(e.type===R){let o=e.props;return p=o.children,h=o.className,!1}if(e.type===S){let o=e.props;return c=o.children,m=o.className,!1}if(e.type===k)return u=e.props,!1}return!0}),w=n("div",{className:t("flex-1 overflow-auto h-full no-scrollbar p-2",r),children:N}),g=e=>{let{side:o="right"}=e,y=(e.overlay??!0)||!l,f=t("w-1/3 max-w-full",e.className),v=t("h-full bg-background",o==="right"?"border-l":"border-r"),x=n("div",{className:t("h-full p-2",r),children:N});return y?s("div",{tabIndex:-1,className:"flex relative flex-1 overflow-hidden",children:[n("div",{className:"h-full overflow-auto w-full transition-all duration-500 relative z-10",children:x}),s("div",{tabIndex:-1,inert:!e.open,className:t("absolute inset-0 z-20",!e.open&&"pointer-events-none"),children:[n("div",{className:t("absolute inset-0 bg-black/50 transition-opacity duration-500",e.open?"opacity-100":"opacity-0 pointer-events-none"),onClick:()=>e.onOpenChange(!1)}),n("div",{tabIndex:-1,className:t("absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl","transition-all duration-500 ease-in-out",o==="right"?"right-0":"left-0",e.open?"translate-x-0 opacity-100":t(o==="right"?"translate-x-full":"-translate-x-full","opacity-0 pointer-events-none"),v,f),children:e.children})]})]}):s("div",{className:"flex relative flex-1 overflow-hidden",children:[o==="left"&&n("div",{className:t("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",v,e.open?f:"w-0 border-0"),children:e.children}),n("div",{className:t("h-full flex-1 min-w-0 overflow-auto transition-all duration-500",e.open&&"overflow-y-auto overflow-x-hidden"),children:x}),o==="right"&&n("div",{className:t("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",v,e.open?f:"w-0 border-0"),children:e.children})]})};return s("div",{className:t("flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2",d),children:[p&&n("div",{className:t("border-b p-2",h),children:p}),u?g(u):w,c&&n("div",{className:t("border-t p-2",m),children:c})]})};export{z as AppContent,S as AppContentFooter,R as AppContentHeader,k as AppSheet};
+//# sourceMappingURL=app-content.js.map

package/dist/components/layouts/app-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/layouts/app-content.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import { cn } from \"../../lib/utils.js\"\nimport React from \"react\"\n\ntype BandProps = { children: React.ReactNode; className?: string }\n\n/** Below this the main content can't spare a fixed-width push panel — push sheets render as overlay. */\nconst PUSH_MIN_QUERY = \"(min-width: 1024px)\"\n\nconst useCanPush = () => {\n  const [canPush, setCanPush] = React.useState(\n    () => typeof window === \"undefined\" || window.matchMedia(PUSH_MIN_QUERY).matches\n  )\n  React.useEffect(() => {\n    const mql = window.matchMedia(PUSH_MIN_QUERY)\n    const onChange = () => setCanPush(mql.matches)\n    mql.addEventListener(\"change\", onChange)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n  return canPush\n}\n\n/**\n * Pinned band above AppContent's scroll region (border-b, shares the parent's\n * padding). Must be a DIRECT child of AppContent — it is a marker: AppContent\n * extracts it and renders the band itself; anything else inside scrolls as body.\n */\nexport const AppContentHeader = (_props: BandProps) => null\n\n/** Pinned band below the scroll region. Same contract as AppContentHeader. */\nexport const AppContentFooter = (_props: BandProps) => null\n\nexport type AppSheetProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Sheet edge. Default right. */\n  side?: \"left\" | \"right\"\n  /** Default true: sheet slides OVER the dimmed body (click outside closes).\n   *  `overlay={false}` = push mode: sheet takes its width, body shrinks.\n   *  Below 1024px push falls back to overlay automatically — a fixed-width\n   *  panel would leave the main content unusably cramped. */\n  overlay?: boolean\n  /** Merged onto the panel's default `w-1/3 max-w-full` — override the width\n   *  (`w-1/2`, `w-[600px]`), round corners (`rounded-tr-lg`, `rounded-br-lg`,\n   *  `rounded-lg`…; default is square — round the outer corners, square off any\n   *  that touch an AppContentHeader/Footer band), or add styling (`p-0`). */\n  className?: string\n  children: React.ReactNode\n}\n\n/**\n * Side panel of an AppContent. Must be a DIRECT child of AppContent (marker,\n * same contract as the bands) — one sheet per AppContent. Controlled only.\n */\nexport const AppSheet = (_props: AppSheetProps) => null\n\nexport type AppContentProps = {\n  children: React.ReactNode\n  className?: string\n  /** Extra classes for the inner content wrapper (default has `p-2` — pass `p-0` to drop it). */\n  contentClassName?: string\n}\n\n/**\n * Page content region. Fills the remaining space of its flex parent\n * (`flex-auto min-h-0`) — the standard slot under AppContainer/AppHeader.\n * For a content-sized block override via className (`flex-none`) or pair with\n * an explicit height (`h-full`). Children scroll; AppContentHeader/Footer and\n * AppSheet direct children are extracted and rendered as pinned band / side panel.\n */\nexport const AppContent = ({\n  children: rawChildren,\n  className,\n  contentClassName,\n}: AppContentProps) => {\n  const canPush = useCanPush()\n\n  // extract marker children; the rest is the scrolling body\n  let header: React.ReactNode; let headerClassName: string | undefined\n  let footer: React.ReactNode; let footerClassName: string | undefined\n  let sheet: AppSheetProps | undefined\n  const children = React.Children.toArray(rawChildren).filter((child) => {\n    if (React.isValidElement(child)) {\n      if (child.type === AppContentHeader) {\n        const p = child.props as BandProps\n        header = p.children; headerClassName = p.className; return false\n      }\n      if (child.type === AppContentFooter) {\n        const p = child.props as BandProps\n        footer = p.children; footerClassName = p.className; return false\n      }\n      if (child.type === AppSheet) {\n        sheet = child.props as AppSheetProps; return false\n      }\n    }\n    return true\n  })\n\n  const body = (\n    <div className={cn(\"flex-1 overflow-auto h-full no-scrollbar p-2\", contentClassName)}>\n      {children}\n    </div>\n  )\n\n  const renderWithSheet = (s: AppSheetProps) => {\n    const { side = \"right\" } = s\n    const overlay = (s.overlay ?? true) || !canPush\n    const width = cn(\"w-1/3 max-w-full\", s.className)\n    const panel = cn(\"h-full bg-background\", side === \"right\" ? \"border-l\" : \"border-r\")\n    const inner = (\n      <div className={cn(\"h-full p-2\", contentClassName)}>\n        {children}\n      </div>\n    )\n\n    if (!overlay) {\n      // push mode: sheet width animates open/closed, body shrinks with it\n      return (\n        <div className=\"flex relative flex-1 overflow-hidden\">\n          {side === \"left\" && (\n            <div className={cn(\"shrink-0 overflow-y-auto transition-all duration-500 ease-in-out\", panel, s.open ? width : \"w-0 border-0\")}>\n              {s.children}\n            </div>\n          )}\n          <div className={cn(\n            \"h-full flex-1 min-w-0 overflow-auto transition-all duration-500\",\n            s.open && \"overflow-y-auto overflow-x-hidden\"\n          )}>\n            {inner}\n          </div>\n          {side === \"right\" && (\n            <div className={cn(\"shrink-0 overflow-y-auto transition-all duration-500 ease-in-out\", panel, s.open ? width : \"w-0 border-0\")}>\n              {s.children}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    // overlay mode: dimmed body, sheet slides over it\n    return (\n      <div tabIndex={-1} className=\"flex relative flex-1 overflow-hidden\">\n        <div className=\"h-full overflow-auto w-full transition-all duration-500 relative z-10\">\n          {inner}\n        </div>\n        <div\n          tabIndex={-1}\n          inert={!s.open}\n          className={cn(\"absolute inset-0 z-20\", !s.open && \"pointer-events-none\")}\n        >\n          <div\n            className={cn(\n              \"absolute inset-0 bg-black/50 transition-opacity duration-500\",\n              s.open ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n            )}\n            onClick={() => s.onOpenChange(false)}\n          />\n          <div\n            tabIndex={-1}\n            className={cn(\n              \"absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl\",\n              \"transition-all duration-500 ease-in-out\",\n              side === \"right\" ? \"right-0\" : \"left-0\",\n              s.open\n                ? \"translate-x-0 opacity-100\"\n                : cn(side === \"right\" ? \"translate-x-full\" : \"-translate-x-full\", \"opacity-0 pointer-events-none\"),\n              panel,\n              width\n            )}\n          >\n            {s.children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\n      \"flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2\",\n      className\n    )}>\n      {header && (\n        <div className={cn(\"border-b p-2\", headerClassName)}>\n          {header}\n        </div>\n      )}\n      {sheet ? renderWithSheet(sheet) : body}\n      {footer && (\n        <div className={cn(\"border-t p-2\", footerClassName)}>\n          {footer}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":["clsx","twMerge","cn","inputs","React","jsx","jsxs","PUSH_MIN_QUERY","useCanPush","canPush","setCanPush","mql","onChange","AppContentHeader","_props","AppContentFooter","AppSheet","AppContent","rawChildren","className","contentClassName","header","headerClassName","footer","footerClassName","sheet","children","child","p","body","cn","renderWithSheet","s","side","overlay","width","panel","inner"]}

package/dist/components/layouts/app-footer.cjs

@@ -0,0 +1,3 @@
+"use client"
+"use strict";var r=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var u=(e,o)=>{for(var p in o)r(e,p,{get:o[p],enumerable:!0})},d=(e,o,p,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of n(o))!f.call(e,t)&&t!==p&&r(e,t,{get:()=>o[t],enumerable:!(l=i(o,t))||l.enumerable});return e};var x=e=>d(r({},"__esModule",{value:!0}),e);var g={};u(g,{AppFooter:()=>N});module.exports=x(g);var s=require("clsx"),a=require("tailwind-merge");function c(...e){return(0,a.twMerge)((0,s.clsx)(e))}var m=require("react/jsx-runtime"),N=({className:e,children:o})=>o==null?null:(0,m.jsx)("div",{className:c("flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto",e),children:o});0&&(module.exports={AppFooter});
+//# sourceMappingURL=app-footer.cjs.map

package/dist/components/layouts/app-footer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/app-footer.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { cn } from '../../lib/utils.js';\nimport type { ReactNode } from 'react';\n\nexport type AppFooterProps = {\n  className?: string;\n  /**\n   * Footer content, rendered into a padded flex row. The LAST child is pushed\n   * to the right edge (`[&>*:last-child]:ml-auto`) — actions go last, any\n   * leading children (status text, form fields) sit left with a `gap-4`.\n   * Override per page via className (twMerge, later wins). Renders nothing\n   * without children.\n   */\n  children?: ReactNode;\n};\n\nexport const AppFooter = ({ className, children }: AppFooterProps) =>\n  children == null ? null : (\n    <div className={cn('flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto', className)}>\n      {children}\n    </div>\n  );\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"],"mappings":";yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAAsC,gBACtCC,EAAwB,0BAEjB,SAASC,KAAMC,EAAsB,CAC1C,SAAO,cAAQ,QAAKA,CAAM,CAAC,CAC7B,CDYI,IAAAC,EAAA,6BAFSC,EAAY,CAAC,CAAE,UAAAC,EAAW,SAAAC,CAAS,IAC9CA,GAAY,KAAO,QACjB,OAAC,OAAI,UAAWC,EAAG,8DAA+DF,CAAS,EACxF,SAAAC,EACH","names":["app_footer_exports","__export","AppFooter","__toCommonJS","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","AppFooter","className","children","cn"]}

package/dist/components/layouts/app-footer.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type AppFooterProps = {
+    className?: string;
+    /**
+     * Footer content, rendered into a padded flex row. The LAST child is pushed
+     * to the right edge (`[&>*:last-child]:ml-auto`) — actions go last, any
+     * leading children (status text, form fields) sit left with a `gap-4`.
+     * Override per page via className (twMerge, later wins). Renders nothing
+     * without children.
+     */
+    children?: ReactNode;
+};
+declare const AppFooter: ({ className, children }: AppFooterProps) => react_jsx_runtime.JSX.Element | null;
+
+export { AppFooter, type AppFooterProps };

package/dist/components/layouts/app-footer.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type AppFooterProps = {
+    className?: string;
+    /**
+     * Footer content, rendered into a padded flex row. The LAST child is pushed
+     * to the right edge (`[&>*:last-child]:ml-auto`) — actions go last, any
+     * leading children (status text, form fields) sit left with a `gap-4`.
+     * Override per page via className (twMerge, later wins). Renders nothing
+     * without children.
+     */
+    children?: ReactNode;
+};
+declare const AppFooter: ({ className, children }: AppFooterProps) => react_jsx_runtime.JSX.Element | null;
+
+export { AppFooter, type AppFooterProps };

package/dist/components/layouts/app-footer.js

@@ -0,0 +1,3 @@
+"use client"
+import{clsx as p}from"clsx";import{twMerge as r}from"tailwind-merge";function t(...o){return r(p(o))}import{jsx as l}from"react/jsx-runtime";var i=({className:o,children:e})=>e==null?null:l("div",{className:t("flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto",o),children:e});export{i as AppFooter};
+//# sourceMappingURL=app-footer.js.map

package/dist/components/layouts/app-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/layouts/app-footer.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import { cn } from '../../lib/utils.js';\nimport type { ReactNode } from 'react';\n\nexport type AppFooterProps = {\n  className?: string;\n  /**\n   * Footer content, rendered into a padded flex row. The LAST child is pushed\n   * to the right edge (`[&>*:last-child]:ml-auto`) — actions go last, any\n   * leading children (status text, form fields) sit left with a `gap-4`.\n   * Override per page via className (twMerge, later wins). Renders nothing\n   * without children.\n   */\n  children?: ReactNode;\n};\n\nexport const AppFooter = ({ className, children }: AppFooterProps) =>\n  children == null ? null : (\n    <div className={cn('flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto', className)}>\n      {children}\n    </div>\n  );\n"],"mappings":";AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CCYI,cAAAC,MAAA,oBAFG,IAAMC,EAAY,CAAC,CAAE,UAAAC,EAAW,SAAAC,CAAS,IAC9CA,GAAY,KAAO,KACjBH,EAAC,OAAI,UAAWI,EAAG,8DAA+DF,CAAS,EACxF,SAAAC,EACH","names":["clsx","twMerge","cn","inputs","jsx","AppFooter","className","children","cn"]}

package/dist/components/layouts/app-header.cjs

@@ -0,0 +1,3 @@
+"use client"
+"use strict";var l=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var C=(r,t)=>{for(var a in t)l(r,a,{get:t[a],enumerable:!0})},z=(r,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of w(t))!R.call(r,o)&&o!==a&&l(r,o,{get:()=>t[o],enumerable:!(s=k(t,o))||s.enumerable});return r};var P=r=>z(l({},"__esModule",{value:!0}),r);var A={};C(A,{AppHeader:()=>B});module.exports=P(A);var u=require("lucide-react");var p=require("clsx"),v=require("tailwind-merge");function n(...r){return(0,v.twMerge)((0,p.clsx)(r))}var f=require("radix-ui"),m=require("class-variance-authority");var g=require("react/jsx-runtime"),V=(0,m.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function c({className:r,variant:t,size:a,asChild:s=!1,...o}){let d=s?f.Slot.Slot:"button";return(0,g.jsx)(d,{"data-slot":"button",className:n(V({variant:t,size:a,className:r})),...o})}var h=require("react-router"),e=require("react/jsx-runtime"),B=({className:r,title:t,description:a,backAction:s,metadata:o,children:d,childrenClassName:b})=>{let x=()=>{if(!s)return null;let i={variant:"secondary",size:"icon",className:"hover:bg-primary/20 inline-flex"};return s.href?(0,e.jsx)(h.NavLink,{to:s.href,children:(0,e.jsx)(c,{...i,children:(0,e.jsx)(u.ArrowLeftIcon,{className:"size-6"})})}):(0,e.jsx)(c,{...i,onClick:s.onClick,children:(0,e.jsx)(u.ArrowLeftIcon,{className:"size-6"})})},y=()=>!o||o.length===0?null:(0,e.jsx)("div",{className:"flex gap-4",children:o.map((i,N)=>i.value&&(0,e.jsxs)("div",{className:"text-sm",children:[(0,e.jsxs)("span",{className:"text-muted-foreground",children:[i.label," "]}),(0,e.jsx)("span",{children:i.value})]},N))});return(0,e.jsxs)("div",{className:n("flex items-center w-full gap-4 p-2",r),children:[(0,e.jsxs)("div",{className:"flex gap-2 items-center h-full shrink-0",children:[x(),(0,e.jsxs)("div",{className:"flex flex-col gap-2 w-max",children:[(0,e.jsx)("h1",{className:"text-2xl font-bold tracking-tight",children:t}),a&&(0,e.jsx)("p",{className:"text-muted-foreground",children:a}),y()]})]}),d!=null&&(0,e.jsx)("div",{className:n("flex flex-1 items-center justify-end gap-4 h-full",b),children:d})]})};0&&(module.exports={AppHeader});
+//# sourceMappingURL=app-header.cjs.map

package/dist/components/layouts/app-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/app-header.tsx","../../../src/lib/utils.ts","../../../src/components/ui/button.tsx"],"sourcesContent":["import { ArrowLeftIcon } from 'lucide-react';\nimport { cn } from '../../lib/utils.js';\nimport { Button } from '../../components/ui/button.jsx';\nimport type { ReactNode } from 'react';\nimport { NavLink } from 'react-router';\nimport type { RegisteredRoutes } from '@akshar-technosoft/router';\n\nexport type AppHeaderProps = {\n  className?: string;\n  title?: ReactNode;\n  description?: string;\n  /** Back arrow button left of the title: navigate via `href` (typed route) or `onClick`. */\n  backAction?: {\n    onClick?: () => void;\n    href?: RegisteredRoutes;\n  };\n  /** Small label/value pairs rendered under the title. */\n  metadata?: { label: string; value: ReactNode }[];\n  /**\n   * Everything right of the title block. Rendered inside a `flex flex-1\n   * items-center justify-end h-full` row, so content lands at the right edge\n   * vertically centered — no wrapper needed. For a different layout add your\n   * own flex utilities via `childrenClassName` (twMerge, later wins) or a\n   * `<div className=\"flex-1\" />` spacer / `mr-auto` on a child.\n   */\n  children?: ReactNode;\n  /** Extra classes for the children row (e.g. `justify-between gap-2`). */\n  childrenClassName?: string;\n};\n\nexport const AppHeader = ({\n  className,\n  title,\n  description,\n  backAction,\n  metadata,\n  children,\n  childrenClassName,\n}: AppHeaderProps) => {\n  const renderBackAction = () => {\n    if (!backAction) return null;\n\n    const buttonProps = {\n      variant: 'secondary',\n      size: 'icon',\n      className: 'hover:bg-primary/20 inline-flex',\n    } as const;\n\n    if (backAction.href) {\n      return (\n        <NavLink to={backAction.href}>\n          <Button {...buttonProps}>\n            <ArrowLeftIcon className=\"size-6\" />\n          </Button>\n        </NavLink>\n      );\n    }\n\n    return (\n      <Button {...buttonProps} onClick={backAction.onClick}>\n        <ArrowLeftIcon className=\"size-6\" />\n      </Button>\n    );\n  };\n\n  const renderMetadata = () => {\n    if (!metadata || metadata.length === 0) return null;\n\n    return (\n      <div className=\"flex gap-4\">\n        {metadata.map((item, index) => (\n          item.value && (\n            <div key={index} className=\"text-sm\">\n              <span className=\"text-muted-foreground\">{item.label} </span>\n              <span>{item.value}</span>\n            </div>\n          )\n        ))}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cn('flex items-center w-full gap-4 p-2', className)}>\n      <div className=\"flex gap-2 items-center h-full shrink-0\">\n        {renderBackAction()}\n        <div className=\"flex flex-col gap-2 w-max\">\n          <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n          {description && (\n            <p className=\"text-muted-foreground\">{description}</p>\n          )}\n          {renderMetadata()}\n        </div>\n      </div>\n      {children != null && (\n        <div className={cn('flex flex-1 items-center justify-end gap-4 h-full', childrenClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from \"react\"\nimport { Slot as SlotPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? SlotPrimitive.Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":";yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA8B,wBCA9B,IAAAC,EAAsC,gBACtCC,EAAwB,0BAEjB,SAASC,KAAMC,EAAsB,CAC1C,SAAO,cAAQ,QAAKA,CAAM,CAAC,CAC7B,CCJA,IAAAC,EAAsC,oBACtCC,EAAuC,oCAgDnC,IAAAC,EAAA,6BA5CEC,KAAiB,OACrB,6cACA,CACE,SAAU,CACR,QAAS,CACP,QACE,mEACF,YACE,8JACF,QACE,uKACF,UACE,yEACF,MACE,uEACF,KAAM,iDACR,EACA,KAAM,CACJ,QAAS,gCACT,GAAI,gDACJ,GAAI,uCACJ,KAAM,QACR,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEA,SAASC,EAAO,CACd,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,GACV,GAAGC,CACL,EAGK,CACH,IAAMC,EAAOF,EAAU,EAAAG,KAAc,KAAO,SAE5C,SACE,OAACD,EAAA,CACC,YAAU,SACV,UAAWE,EAAGT,EAAe,CAAE,QAAAG,EAAS,KAAAC,EAAM,UAAAF,CAAU,CAAC,CAAC,EACzD,GAAGI,EACN,CAEJ,CFpDA,IAAAI,EAAwB,wBAgDZC,EAAA,6BAtBCC,EAAY,CAAC,CACxB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,kBAAAC,CACF,IAAsB,CACpB,IAAMC,EAAmB,IAAM,CAC7B,GAAI,CAACJ,EAAY,OAAO,KAExB,IAAMK,EAAc,CAClB,QAAS,YACT,KAAM,OACN,UAAW,iCACb,EAEA,OAAIL,EAAW,QAEX,OAAC,WAAQ,GAAIA,EAAW,KACtB,mBAACM,EAAA,CAAQ,GAAGD,EACV,mBAAC,iBAAc,UAAU,SAAS,EACpC,EACF,KAKF,OAACC,EAAA,CAAQ,GAAGD,EAAa,QAASL,EAAW,QAC3C,mBAAC,iBAAc,UAAU,SAAS,EACpC,CAEJ,EAEMO,EAAiB,IACjB,CAACN,GAAYA,EAAS,SAAW,EAAU,QAG7C,OAAC,OAAI,UAAU,aACZ,SAAAA,EAAS,IAAI,CAACO,EAAMC,IACnBD,EAAK,UACH,QAAC,OAAgB,UAAU,UACzB,qBAAC,QAAK,UAAU,wBAAyB,UAAAA,EAAK,MAAM,KAAC,KACrD,OAAC,QAAM,SAAAA,EAAK,MAAM,IAFVC,CAGV,CAEH,EACH,EAIJ,SACE,QAAC,OAAI,UAAWC,EAAG,qCAAsCb,CAAS,EAChE,qBAAC,OAAI,UAAU,0CACZ,UAAAO,EAAiB,KAClB,QAAC,OAAI,UAAU,4BACb,oBAAC,MAAG,UAAU,oCAAqC,SAAAN,EAAM,EACxDC,MACC,OAAC,KAAE,UAAU,wBAAyB,SAAAA,EAAY,EAEnDQ,EAAe,GAClB,GACF,EACCL,GAAY,SACX,OAAC,OAAI,UAAWQ,EAAG,oDAAqDP,CAAiB,EACtF,SAAAD,EACH,GAEJ,CAEJ","names":["app_header_exports","__export","AppHeader","__toCommonJS","import_lucide_react","import_clsx","import_tailwind_merge","cn","inputs","import_radix_ui","import_class_variance_authority","import_jsx_runtime","buttonVariants","Button","className","variant","size","asChild","props","Comp","SlotPrimitive","cn","import_react_router","import_jsx_runtime","AppHeader","className","title","description","backAction","metadata","children","childrenClassName","renderBackAction","buttonProps","Button","renderMetadata","item","index","cn"]}

package/dist/components/layouts/app-header.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { RegisteredRoutes } from '@akshar-technosoft/router';
+
+type AppHeaderProps = {
+    className?: string;
+    title?: ReactNode;
+    description?: string;
+    /** Back arrow button left of the title: navigate via `href` (typed route) or `onClick`. */
+    backAction?: {
+        onClick?: () => void;
+        href?: RegisteredRoutes;
+    };
+    /** Small label/value pairs rendered under the title. */
+    metadata?: {
+        label: string;
+        value: ReactNode;
+    }[];
+    /**
+     * Everything right of the title block. Rendered inside a `flex flex-1
+     * items-center justify-end h-full` row, so content lands at the right edge
+     * vertically centered — no wrapper needed. For a different layout add your
+     * own flex utilities via `childrenClassName` (twMerge, later wins) or a
+     * `<div className="flex-1" />` spacer / `mr-auto` on a child.
+     */
+    children?: ReactNode;
+    /** Extra classes for the children row (e.g. `justify-between gap-2`). */
+    childrenClassName?: string;
+};
+declare const AppHeader: ({ className, title, description, backAction, metadata, children, childrenClassName, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
+
+export { AppHeader, type AppHeaderProps };

package/dist/components/layouts/app-header.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { RegisteredRoutes } from '@akshar-technosoft/router';
+
+type AppHeaderProps = {
+    className?: string;
+    title?: ReactNode;
+    description?: string;
+    /** Back arrow button left of the title: navigate via `href` (typed route) or `onClick`. */
+    backAction?: {
+        onClick?: () => void;
+        href?: RegisteredRoutes;
+    };
+    /** Small label/value pairs rendered under the title. */
+    metadata?: {
+        label: string;
+        value: ReactNode;
+    }[];
+    /**
+     * Everything right of the title block. Rendered inside a `flex flex-1
+     * items-center justify-end h-full` row, so content lands at the right edge
+     * vertically centered — no wrapper needed. For a different layout add your
+     * own flex utilities via `childrenClassName` (twMerge, later wins) or a
+     * `<div className="flex-1" />` spacer / `mr-auto` on a child.
+     */
+    children?: ReactNode;
+    /** Extra classes for the children row (e.g. `justify-between gap-2`). */
+    childrenClassName?: string;
+};
+declare const AppHeader: ({ className, title, description, backAction, metadata, children, childrenClassName, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
+
+export { AppHeader, type AppHeaderProps };

package/dist/components/layouts/app-header.js

@@ -0,0 +1,3 @@
+"use client"
+import{ArrowLeftIcon as u}from"lucide-react";import{clsx as g}from"clsx";import{twMerge as h}from"tailwind-merge";function s(...o){return h(g(o))}import{Slot as b}from"radix-ui";import{cva as x}from"class-variance-authority";import{jsx as N}from"react/jsx-runtime";var y=x("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function c({className:o,variant:l,size:n,asChild:r=!1,...a}){let d=r?b.Slot:"button";return N(d,{"data-slot":"button",className:s(y({variant:l,size:n,className:o})),...a})}import{NavLink as k}from"react-router";import{jsx as e,jsxs as i}from"react/jsx-runtime";var M=({className:o,title:l,description:n,backAction:r,metadata:a,children:d,childrenClassName:p})=>{let v=()=>{if(!r)return null;let t={variant:"secondary",size:"icon",className:"hover:bg-primary/20 inline-flex"};return r.href?e(k,{to:r.href,children:e(c,{...t,children:e(u,{className:"size-6"})})}):e(c,{...t,onClick:r.onClick,children:e(u,{className:"size-6"})})},f=()=>!a||a.length===0?null:e("div",{className:"flex gap-4",children:a.map((t,m)=>t.value&&i("div",{className:"text-sm",children:[i("span",{className:"text-muted-foreground",children:[t.label," "]}),e("span",{children:t.value})]},m))});return i("div",{className:s("flex items-center w-full gap-4 p-2",o),children:[i("div",{className:"flex gap-2 items-center h-full shrink-0",children:[v(),i("div",{className:"flex flex-col gap-2 w-max",children:[e("h1",{className:"text-2xl font-bold tracking-tight",children:l}),n&&e("p",{className:"text-muted-foreground",children:n}),f()]})]}),d!=null&&e("div",{className:s("flex flex-1 items-center justify-end gap-4 h-full",p),children:d})]})};export{M as AppHeader};
+//# sourceMappingURL=app-header.js.map

package/dist/components/layouts/app-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/app-header.tsx","../../../src/lib/utils.ts","../../../src/components/ui/button.tsx"],"sourcesContent":["import { ArrowLeftIcon } from 'lucide-react';\nimport { cn } from '../../lib/utils.js';\nimport { Button } from '../../components/ui/button.jsx';\nimport type { ReactNode } from 'react';\nimport { NavLink } from 'react-router';\nimport type { RegisteredRoutes } from '@akshar-technosoft/router';\n\nexport type AppHeaderProps = {\n  className?: string;\n  title?: ReactNode;\n  description?: string;\n  /** Back arrow button left of the title: navigate via `href` (typed route) or `onClick`. */\n  backAction?: {\n    onClick?: () => void;\n    href?: RegisteredRoutes;\n  };\n  /** Small label/value pairs rendered under the title. */\n  metadata?: { label: string; value: ReactNode }[];\n  /**\n   * Everything right of the title block. Rendered inside a `flex flex-1\n   * items-center justify-end h-full` row, so content lands at the right edge\n   * vertically centered — no wrapper needed. For a different layout add your\n   * own flex utilities via `childrenClassName` (twMerge, later wins) or a\n   * `<div className=\"flex-1\" />` spacer / `mr-auto` on a child.\n   */\n  children?: ReactNode;\n  /** Extra classes for the children row (e.g. `justify-between gap-2`). */\n  childrenClassName?: string;\n};\n\nexport const AppHeader = ({\n  className,\n  title,\n  description,\n  backAction,\n  metadata,\n  children,\n  childrenClassName,\n}: AppHeaderProps) => {\n  const renderBackAction = () => {\n    if (!backAction) return null;\n\n    const buttonProps = {\n      variant: 'secondary',\n      size: 'icon',\n      className: 'hover:bg-primary/20 inline-flex',\n    } as const;\n\n    if (backAction.href) {\n      return (\n        <NavLink to={backAction.href}>\n          <Button {...buttonProps}>\n            <ArrowLeftIcon className=\"size-6\" />\n          </Button>\n        </NavLink>\n      );\n    }\n\n    return (\n      <Button {...buttonProps} onClick={backAction.onClick}>\n        <ArrowLeftIcon className=\"size-6\" />\n      </Button>\n    );\n  };\n\n  const renderMetadata = () => {\n    if (!metadata || metadata.length === 0) return null;\n\n    return (\n      <div className=\"flex gap-4\">\n        {metadata.map((item, index) => (\n          item.value && (\n            <div key={index} className=\"text-sm\">\n              <span className=\"text-muted-foreground\">{item.label} </span>\n              <span>{item.value}</span>\n            </div>\n          )\n        ))}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cn('flex items-center w-full gap-4 p-2', className)}>\n      <div className=\"flex gap-2 items-center h-full shrink-0\">\n        {renderBackAction()}\n        <div className=\"flex flex-col gap-2 w-max\">\n          <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n          {description && (\n            <p className=\"text-muted-foreground\">{description}</p>\n          )}\n          {renderMetadata()}\n        </div>\n      </div>\n      {children != null && (\n        <div className={cn('flex flex-1 items-center justify-end gap-4 h-full', childrenClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from \"react\"\nimport { Slot as SlotPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? SlotPrimitive.Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":";AAAA,OAAS,iBAAAA,MAAqB,eCA9B,OAAS,QAAAC,MAA6B,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CCJA,OAAS,QAAQC,MAAqB,WACtC,OAAS,OAAAC,MAA8B,2BAgDnC,cAAAC,MAAA,oBA5CJ,IAAMC,EAAiBC,EACrB,6cACA,CACE,SAAU,CACR,QAAS,CACP,QACE,mEACF,YACE,8JACF,QACE,uKACF,UACE,yEACF,MACE,uEACF,KAAM,iDACR,EACA,KAAM,CACJ,QAAS,gCACT,GAAI,gDACJ,GAAI,uCACJ,KAAM,QACR,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEA,SAASC,EAAO,CACd,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,GACV,GAAGC,CACL,EAGK,CACH,IAAMC,EAAOF,EAAUG,EAAc,KAAO,SAE5C,OACEV,EAACS,EAAA,CACC,YAAU,SACV,UAAWE,EAAGV,EAAe,CAAE,QAAAI,EAAS,KAAAC,EAAM,UAAAF,CAAU,CAAC,CAAC,EACzD,GAAGI,EACN,CAEJ,CFpDA,OAAS,WAAAI,MAAe,eAgDZ,cAAAC,EAqBE,QAAAC,MArBF,oBAtBL,IAAMC,EAAY,CAAC,CACxB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,kBAAAC,CACF,IAAsB,CACpB,IAAMC,EAAmB,IAAM,CAC7B,GAAI,CAACJ,EAAY,OAAO,KAExB,IAAMK,EAAc,CAClB,QAAS,YACT,KAAM,OACN,UAAW,iCACb,EAEA,OAAIL,EAAW,KAEXN,EAACD,EAAA,CAAQ,GAAIO,EAAW,KACtB,SAAAN,EAACY,EAAA,CAAQ,GAAGD,EACV,SAAAX,EAACa,EAAA,CAAc,UAAU,SAAS,EACpC,EACF,EAKFb,EAACY,EAAA,CAAQ,GAAGD,EAAa,QAASL,EAAW,QAC3C,SAAAN,EAACa,EAAA,CAAc,UAAU,SAAS,EACpC,CAEJ,EAEMC,EAAiB,IACjB,CAACP,GAAYA,EAAS,SAAW,EAAU,KAG7CP,EAAC,OAAI,UAAU,aACZ,SAAAO,EAAS,IAAI,CAACQ,EAAMC,IACnBD,EAAK,OACHd,EAAC,OAAgB,UAAU,UACzB,UAAAA,EAAC,QAAK,UAAU,wBAAyB,UAAAc,EAAK,MAAM,KAAC,EACrDf,EAAC,QAAM,SAAAe,EAAK,MAAM,IAFVC,CAGV,CAEH,EACH,EAIJ,OACEf,EAAC,OAAI,UAAWgB,EAAG,qCAAsCd,CAAS,EAChE,UAAAF,EAAC,OAAI,UAAU,0CACZ,UAAAS,EAAiB,EAClBT,EAAC,OAAI,UAAU,4BACb,UAAAD,EAAC,MAAG,UAAU,oCAAqC,SAAAI,EAAM,EACxDC,GACCL,EAAC,KAAE,UAAU,wBAAyB,SAAAK,EAAY,EAEnDS,EAAe,GAClB,GACF,EACCN,GAAY,MACXR,EAAC,OAAI,UAAWiB,EAAG,oDAAqDR,CAAiB,EACtF,SAAAD,EACH,GAEJ,CAEJ","names":["ArrowLeftIcon","clsx","twMerge","cn","inputs","SlotPrimitive","cva","jsx","buttonVariants","cva","Button","className","variant","size","asChild","props","Comp","SlotPrimitive","cn","NavLink","jsx","jsxs","AppHeader","className","title","description","backAction","metadata","children","childrenClassName","renderBackAction","buttonProps","Button","ArrowLeftIcon","renderMetadata","item","index","cn"]}

package/dist/components/layouts/index.cjs

@@ -0,0 +1,3 @@
+"use client"
+"use strict";var F=Object.create;var h=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var n in t)h(e,n,{get:t[n],enumerable:!0})},P=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of U(t))!Q.call(e,i)&&i!==n&&h(e,i,{get:()=>t[i],enumerable:!(l=O(t,i))||l.enumerable});return e};var Y=(e,t,n)=>(n=e!=null?F(q(e)):{},P(t||!e||!e.__esModule?h(n,"default",{value:e,enumerable:!0}):n,e)),D=e=>P(h({},"__esModule",{value:!0}),e);var $={};W($,{AppContainer:()=>G,AppContent:()=>X,AppContentFooter:()=>E,AppContentHeader:()=>_,AppFooter:()=>Z,AppHeader:()=>K,AppSheet:()=>H});module.exports=D($);var k=require("clsx"),C=require("tailwind-merge");function o(...e){return(0,C.twMerge)((0,k.clsx)(e))}var R=require("react/jsx-runtime"),G=({children:e,className:t})=>(0,R.jsx)("div",{className:o("flex flex-col h-full gap-2",t),children:e});var y=require("lucide-react");var A=require("radix-ui"),S=require("class-variance-authority");var z=require("react/jsx-runtime"),J=(0,S.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function N({className:e,variant:t,size:n,asChild:l=!1,...i}){let c=l?A.Slot.Slot:"button";return(0,z.jsx)(c,{"data-slot":"button",className:o(J({variant:t,size:n,className:e})),...i})}var B=require("react-router"),a=require("react/jsx-runtime"),K=({className:e,title:t,description:n,backAction:l,metadata:i,children:c,childrenClassName:u})=>{let m=()=>{if(!l)return null;let p={variant:"secondary",size:"icon",className:"hover:bg-primary/20 inline-flex"};return l.href?(0,a.jsx)(B.NavLink,{to:l.href,children:(0,a.jsx)(N,{...p,children:(0,a.jsx)(y.ArrowLeftIcon,{className:"size-6"})})}):(0,a.jsx)(N,{...p,onClick:l.onClick,children:(0,a.jsx)(y.ArrowLeftIcon,{className:"size-6"})})},f=()=>!i||i.length===0?null:(0,a.jsx)("div",{className:"flex gap-4",children:i.map((p,g)=>p.value&&(0,a.jsxs)("div",{className:"text-sm",children:[(0,a.jsxs)("span",{className:"text-muted-foreground",children:[p.label," "]}),(0,a.jsx)("span",{children:p.value})]},g))});return(0,a.jsxs)("div",{className:o("flex items-center w-full gap-4 p-2",e),children:[(0,a.jsxs)("div",{className:"flex gap-2 items-center h-full shrink-0",children:[m(),(0,a.jsxs)("div",{className:"flex flex-col gap-2 w-max",children:[(0,a.jsx)("h1",{className:"text-2xl font-bold tracking-tight",children:t}),n&&(0,a.jsx)("p",{className:"text-muted-foreground",children:n}),f()]})]}),c!=null&&(0,a.jsx)("div",{className:o("flex flex-1 items-center justify-end gap-4 h-full",u),children:c})]})};var v=Y(require("react"),1),s=require("react/jsx-runtime"),V="(min-width: 1024px)",T=()=>{let[e,t]=v.default.useState(()=>typeof window>"u"||window.matchMedia(V).matches);return v.default.useEffect(()=>{let n=window.matchMedia(V),l=()=>t(n.matches);return n.addEventListener("change",l),()=>n.removeEventListener("change",l)},[]),e},_=e=>null,E=e=>null,H=e=>null,X=({children:e,className:t,contentClassName:n})=>{let l=T(),i,c,u,m,f,p=v.default.Children.toArray(e).filter(r=>{if(v.default.isValidElement(r)){if(r.type===_){let d=r.props;return i=d.children,c=d.className,!1}if(r.type===E){let d=r.props;return u=d.children,m=d.className,!1}if(r.type===H)return f=r.props,!1}return!0}),g=(0,s.jsx)("div",{className:o("flex-1 overflow-auto h-full no-scrollbar p-2",n),children:p}),L=r=>{let{side:d="right"}=r,M=(r.overlay??!0)||!l,x=o("w-1/3 max-w-full",r.className),b=o("h-full bg-background",d==="right"?"border-l":"border-r"),w=(0,s.jsx)("div",{className:o("h-full p-2",n),children:p});return M?(0,s.jsxs)("div",{tabIndex:-1,className:"flex relative flex-1 overflow-hidden",children:[(0,s.jsx)("div",{className:"h-full overflow-auto w-full transition-all duration-500 relative z-10",children:w}),(0,s.jsxs)("div",{tabIndex:-1,inert:!r.open,className:o("absolute inset-0 z-20",!r.open&&"pointer-events-none"),children:[(0,s.jsx)("div",{className:o("absolute inset-0 bg-black/50 transition-opacity duration-500",r.open?"opacity-100":"opacity-0 pointer-events-none"),onClick:()=>r.onOpenChange(!1)}),(0,s.jsx)("div",{tabIndex:-1,className:o("absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl","transition-all duration-500 ease-in-out",d==="right"?"right-0":"left-0",r.open?"translate-x-0 opacity-100":o(d==="right"?"translate-x-full":"-translate-x-full","opacity-0 pointer-events-none"),b,x),children:r.children})]})]}):(0,s.jsxs)("div",{className:"flex relative flex-1 overflow-hidden",children:[d==="left"&&(0,s.jsx)("div",{className:o("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",b,r.open?x:"w-0 border-0"),children:r.children}),(0,s.jsx)("div",{className:o("h-full flex-1 min-w-0 overflow-auto transition-all duration-500",r.open&&"overflow-y-auto overflow-x-hidden"),children:w}),d==="right"&&(0,s.jsx)("div",{className:o("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",b,r.open?x:"w-0 border-0"),children:r.children})]})};return(0,s.jsxs)("div",{className:o("flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2",t),children:[i&&(0,s.jsx)("div",{className:o("border-b p-2",c),children:i}),f?L(f):g,u&&(0,s.jsx)("div",{className:o("border-t p-2",m),children:u})]})};var I=require("react/jsx-runtime"),Z=({className:e,children:t})=>t==null?null:(0,I.jsx)("div",{className:o("flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto",e),children:t});0&&(module.exports={AppContainer,AppContent,AppContentFooter,AppContentHeader,AppFooter,AppHeader,AppSheet});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/index.ts","../../../src/lib/utils.ts","../../../src/components/layouts/app-container.tsx","../../../src/components/layouts/app-header.tsx","../../../src/components/ui/button.tsx","../../../src/components/layouts/app-content.tsx","../../../src/components/layouts/app-footer.tsx"],"sourcesContent":["export * from './app-container.jsx';\nexport * from './app-header.jsx';\nexport * from './app-content.jsx';\nexport * from './app-footer.jsx';\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import { cn } from '../../lib/utils.js';\nimport type { ReactNode } from 'react';\n\nexport type AppContainerProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** Page shell: full-height column, small gap between header/content/footer. */\nexport const AppContainer = ({ children, className }: AppContainerProps) => (\n  <div className={cn('flex flex-col h-full gap-2', className)}>\n    {children}\n  </div>\n);\n","import { ArrowLeftIcon } from 'lucide-react';\nimport { cn } from '../../lib/utils.js';\nimport { Button } from '../../components/ui/button.jsx';\nimport type { ReactNode } from 'react';\nimport { NavLink } from 'react-router';\nimport type { RegisteredRoutes } from '@akshar-technosoft/router';\n\nexport type AppHeaderProps = {\n  className?: string;\n  title?: ReactNode;\n  description?: string;\n  /** Back arrow button left of the title: navigate via `href` (typed route) or `onClick`. */\n  backAction?: {\n    onClick?: () => void;\n    href?: RegisteredRoutes;\n  };\n  /** Small label/value pairs rendered under the title. */\n  metadata?: { label: string; value: ReactNode }[];\n  /**\n   * Everything right of the title block. Rendered inside a `flex flex-1\n   * items-center justify-end h-full` row, so content lands at the right edge\n   * vertically centered — no wrapper needed. For a different layout add your\n   * own flex utilities via `childrenClassName` (twMerge, later wins) or a\n   * `<div className=\"flex-1\" />` spacer / `mr-auto` on a child.\n   */\n  children?: ReactNode;\n  /** Extra classes for the children row (e.g. `justify-between gap-2`). */\n  childrenClassName?: string;\n};\n\nexport const AppHeader = ({\n  className,\n  title,\n  description,\n  backAction,\n  metadata,\n  children,\n  childrenClassName,\n}: AppHeaderProps) => {\n  const renderBackAction = () => {\n    if (!backAction) return null;\n\n    const buttonProps = {\n      variant: 'secondary',\n      size: 'icon',\n      className: 'hover:bg-primary/20 inline-flex',\n    } as const;\n\n    if (backAction.href) {\n      return (\n        <NavLink to={backAction.href}>\n          <Button {...buttonProps}>\n            <ArrowLeftIcon className=\"size-6\" />\n          </Button>\n        </NavLink>\n      );\n    }\n\n    return (\n      <Button {...buttonProps} onClick={backAction.onClick}>\n        <ArrowLeftIcon className=\"size-6\" />\n      </Button>\n    );\n  };\n\n  const renderMetadata = () => {\n    if (!metadata || metadata.length === 0) return null;\n\n    return (\n      <div className=\"flex gap-4\">\n        {metadata.map((item, index) => (\n          item.value && (\n            <div key={index} className=\"text-sm\">\n              <span className=\"text-muted-foreground\">{item.label} </span>\n              <span>{item.value}</span>\n            </div>\n          )\n        ))}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cn('flex items-center w-full gap-4 p-2', className)}>\n      <div className=\"flex gap-2 items-center h-full shrink-0\">\n        {renderBackAction()}\n        <div className=\"flex flex-col gap-2 w-max\">\n          <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n          {description && (\n            <p className=\"text-muted-foreground\">{description}</p>\n          )}\n          {renderMetadata()}\n        </div>\n      </div>\n      {children != null && (\n        <div className={cn('flex flex-1 items-center justify-end gap-4 h-full', childrenClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n","import * as React from \"react\"\nimport { Slot as SlotPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? SlotPrimitive.Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","import { cn } from \"../../lib/utils.js\"\nimport React from \"react\"\n\ntype BandProps = { children: React.ReactNode; className?: string }\n\n/** Below this the main content can't spare a fixed-width push panel — push sheets render as overlay. */\nconst PUSH_MIN_QUERY = \"(min-width: 1024px)\"\n\nconst useCanPush = () => {\n  const [canPush, setCanPush] = React.useState(\n    () => typeof window === \"undefined\" || window.matchMedia(PUSH_MIN_QUERY).matches\n  )\n  React.useEffect(() => {\n    const mql = window.matchMedia(PUSH_MIN_QUERY)\n    const onChange = () => setCanPush(mql.matches)\n    mql.addEventListener(\"change\", onChange)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n  return canPush\n}\n\n/**\n * Pinned band above AppContent's scroll region (border-b, shares the parent's\n * padding). Must be a DIRECT child of AppContent — it is a marker: AppContent\n * extracts it and renders the band itself; anything else inside scrolls as body.\n */\nexport const AppContentHeader = (_props: BandProps) => null\n\n/** Pinned band below the scroll region. Same contract as AppContentHeader. */\nexport const AppContentFooter = (_props: BandProps) => null\n\nexport type AppSheetProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Sheet edge. Default right. */\n  side?: \"left\" | \"right\"\n  /** Default true: sheet slides OVER the dimmed body (click outside closes).\n   *  `overlay={false}` = push mode: sheet takes its width, body shrinks.\n   *  Below 1024px push falls back to overlay automatically — a fixed-width\n   *  panel would leave the main content unusably cramped. */\n  overlay?: boolean\n  /** Merged onto the panel's default `w-1/3 max-w-full` — override the width\n   *  (`w-1/2`, `w-[600px]`), round corners (`rounded-tr-lg`, `rounded-br-lg`,\n   *  `rounded-lg`…; default is square — round the outer corners, square off any\n   *  that touch an AppContentHeader/Footer band), or add styling (`p-0`). */\n  className?: string\n  children: React.ReactNode\n}\n\n/**\n * Side panel of an AppContent. Must be a DIRECT child of AppContent (marker,\n * same contract as the bands) — one sheet per AppContent. Controlled only.\n */\nexport const AppSheet = (_props: AppSheetProps) => null\n\nexport type AppContentProps = {\n  children: React.ReactNode\n  className?: string\n  /** Extra classes for the inner content wrapper (default has `p-2` — pass `p-0` to drop it). */\n  contentClassName?: string\n}\n\n/**\n * Page content region. Fills the remaining space of its flex parent\n * (`flex-auto min-h-0`) — the standard slot under AppContainer/AppHeader.\n * For a content-sized block override via className (`flex-none`) or pair with\n * an explicit height (`h-full`). Children scroll; AppContentHeader/Footer and\n * AppSheet direct children are extracted and rendered as pinned band / side panel.\n */\nexport const AppContent = ({\n  children: rawChildren,\n  className,\n  contentClassName,\n}: AppContentProps) => {\n  const canPush = useCanPush()\n\n  // extract marker children; the rest is the scrolling body\n  let header: React.ReactNode; let headerClassName: string | undefined\n  let footer: React.ReactNode; let footerClassName: string | undefined\n  let sheet: AppSheetProps | undefined\n  const children = React.Children.toArray(rawChildren).filter((child) => {\n    if (React.isValidElement(child)) {\n      if (child.type === AppContentHeader) {\n        const p = child.props as BandProps\n        header = p.children; headerClassName = p.className; return false\n      }\n      if (child.type === AppContentFooter) {\n        const p = child.props as BandProps\n        footer = p.children; footerClassName = p.className; return false\n      }\n      if (child.type === AppSheet) {\n        sheet = child.props as AppSheetProps; return false\n      }\n    }\n    return true\n  })\n\n  const body = (\n    <div className={cn(\"flex-1 overflow-auto h-full no-scrollbar p-2\", contentClassName)}>\n      {children}\n    </div>\n  )\n\n  const renderWithSheet = (s: AppSheetProps) => {\n    const { side = \"right\" } = s\n    const overlay = (s.overlay ?? true) || !canPush\n    const width = cn(\"w-1/3 max-w-full\", s.className)\n    const panel = cn(\"h-full bg-background\", side === \"right\" ? \"border-l\" : \"border-r\")\n    const inner = (\n      <div className={cn(\"h-full p-2\", contentClassName)}>\n        {children}\n      </div>\n    )\n\n    if (!overlay) {\n      // push mode: sheet width animates open/closed, body shrinks with it\n      return (\n        <div className=\"flex relative flex-1 overflow-hidden\">\n          {side === \"left\" && (\n            <div className={cn(\"shrink-0 overflow-y-auto transition-all duration-500 ease-in-out\", panel, s.open ? width : \"w-0 border-0\")}>\n              {s.children}\n            </div>\n          )}\n          <div className={cn(\n            \"h-full flex-1 min-w-0 overflow-auto transition-all duration-500\",\n            s.open && \"overflow-y-auto overflow-x-hidden\"\n          )}>\n            {inner}\n          </div>\n          {side === \"right\" && (\n            <div className={cn(\"shrink-0 overflow-y-auto transition-all duration-500 ease-in-out\", panel, s.open ? width : \"w-0 border-0\")}>\n              {s.children}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    // overlay mode: dimmed body, sheet slides over it\n    return (\n      <div tabIndex={-1} className=\"flex relative flex-1 overflow-hidden\">\n        <div className=\"h-full overflow-auto w-full transition-all duration-500 relative z-10\">\n          {inner}\n        </div>\n        <div\n          tabIndex={-1}\n          inert={!s.open}\n          className={cn(\"absolute inset-0 z-20\", !s.open && \"pointer-events-none\")}\n        >\n          <div\n            className={cn(\n              \"absolute inset-0 bg-black/50 transition-opacity duration-500\",\n              s.open ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n            )}\n            onClick={() => s.onOpenChange(false)}\n          />\n          <div\n            tabIndex={-1}\n            className={cn(\n              \"absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl\",\n              \"transition-all duration-500 ease-in-out\",\n              side === \"right\" ? \"right-0\" : \"left-0\",\n              s.open\n                ? \"translate-x-0 opacity-100\"\n                : cn(side === \"right\" ? \"translate-x-full\" : \"-translate-x-full\", \"opacity-0 pointer-events-none\"),\n              panel,\n              width\n            )}\n          >\n            {s.children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\n      \"flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2\",\n      className\n    )}>\n      {header && (\n        <div className={cn(\"border-b p-2\", headerClassName)}>\n          {header}\n        </div>\n      )}\n      {sheet ? renderWithSheet(sheet) : body}\n      {footer && (\n        <div className={cn(\"border-t p-2\", footerClassName)}>\n          {footer}\n        </div>\n      )}\n    </div>\n  )\n}\n","import { cn } from '../../lib/utils.js';\nimport type { ReactNode } from 'react';\n\nexport type AppFooterProps = {\n  className?: string;\n  /**\n   * Footer content, rendered into a padded flex row. The LAST child is pushed\n   * to the right edge (`[&>*:last-child]:ml-auto`) — actions go last, any\n   * leading children (status text, form fields) sit left with a `gap-4`.\n   * Override per page via className (twMerge, later wins). Renders nothing\n   * without children.\n   */\n  children?: ReactNode;\n};\n\nexport const AppFooter = ({ className, children }: AppFooterProps) =>\n  children == null ? null : (\n    <div className={cn('flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto', className)}>\n      {children}\n    </div>\n  );\n"],"mappings":"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","names":["layouts_exports","__export","AppContainer","AppContent","AppContentFooter","AppContentHeader","AppFooter","AppHeader","AppSheet","__toCommonJS","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","AppContainer","children","className","cn","import_lucide_react","import_radix_ui","import_class_variance_authority","import_jsx_runtime","buttonVariants","Button","className","variant","size","asChild","props","Comp","SlotPrimitive","cn","import_react_router","import_jsx_runtime","AppHeader","className","title","description","backAction","metadata","children","childrenClassName","renderBackAction","buttonProps","Button","renderMetadata","item","index","cn","import_react","import_jsx_runtime","PUSH_MIN_QUERY","useCanPush","canPush","setCanPush","React","mql","onChange","AppContentHeader","_props","AppContentFooter","AppSheet","AppContent","rawChildren","className","contentClassName","header","headerClassName","footer","footerClassName","sheet","children","child","p","body","cn","renderWithSheet","s","side","overlay","width","panel","inner","import_jsx_runtime","AppFooter","className","children","cn"]}

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

@@ -0,0 +1,7 @@
+export { AppContainer, AppContainerProps } from './app-container.cjs';
+export { AppHeader, AppHeaderProps } from './app-header.cjs';
+export { AppContent, AppContentFooter, AppContentHeader, AppContentProps, AppSheet, AppSheetProps } from './app-content.cjs';
+export { AppFooter, AppFooterProps } from './app-footer.cjs';
+import 'react/jsx-runtime';
+import 'react';
+import '@akshar-technosoft/router';

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

@@ -0,0 +1,7 @@
+export { AppContainer, AppContainerProps } from './app-container.js';
+export { AppHeader, AppHeaderProps } from './app-header.js';
+export { AppContent, AppContentFooter, AppContentHeader, AppContentProps, AppSheet, AppSheetProps } from './app-content.js';
+export { AppFooter, AppFooterProps } from './app-footer.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@akshar-technosoft/router';

package/dist/components/layouts/index.js

@@ -0,0 +1,3 @@
+"use client"
+import{clsx as A}from"clsx";import{twMerge as S}from"tailwind-merge";function e(...o){return S(A(o))}import{jsx as z}from"react/jsx-runtime";var Y=({children:o,className:r})=>z("div",{className:e("flex flex-col h-full gap-2",r),children:o});import{ArrowLeftIcon as P}from"lucide-react";import{Slot as B}from"radix-ui";import{cva as V}from"class-variance-authority";import{jsx as E}from"react/jsx-runtime";var _=V("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:focus-visible:border-ring",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function y({className:o,variant:r,size:n,asChild:a=!1,...d}){let c=a?B.Slot:"button";return E(c,{"data-slot":"button",className:e(_({variant:r,size:n,className:o})),...d})}import{NavLink as H}from"react-router";import{jsx as i,jsxs as v}from"react/jsx-runtime";var oe=({className:o,title:r,description:n,backAction:a,metadata:d,children:c,childrenClassName:u})=>{let m=()=>{if(!a)return null;let p={variant:"secondary",size:"icon",className:"hover:bg-primary/20 inline-flex"};return a.href?i(H,{to:a.href,children:i(y,{...p,children:i(P,{className:"size-6"})})}):i(y,{...p,onClick:a.onClick,children:i(P,{className:"size-6"})})},f=()=>!d||d.length===0?null:i("div",{className:"flex gap-4",children:d.map((p,x)=>p.value&&v("div",{className:"text-sm",children:[v("span",{className:"text-muted-foreground",children:[p.label," "]}),i("span",{children:p.value})]},x))});return v("div",{className:e("flex items-center w-full gap-4 p-2",o),children:[v("div",{className:"flex gap-2 items-center h-full shrink-0",children:[m(),v("div",{className:"flex flex-col gap-2 w-max",children:[i("h1",{className:"text-2xl font-bold tracking-tight",children:r}),n&&i("p",{className:"text-muted-foreground",children:n}),f()]})]}),c!=null&&i("div",{className:e("flex flex-1 items-center justify-end gap-4 h-full",u),children:c})]})};import g from"react";import{jsx as l,jsxs as h}from"react/jsx-runtime";var k="(min-width: 1024px)",I=()=>{let[o,r]=g.useState(()=>typeof window>"u"||window.matchMedia(k).matches);return g.useEffect(()=>{let n=window.matchMedia(k),a=()=>r(n.matches);return n.addEventListener("change",a),()=>n.removeEventListener("change",a)},[]),o},L=o=>null,M=o=>null,F=o=>null,ie=({children:o,className:r,contentClassName:n})=>{let a=I(),d,c,u,m,f,p=g.Children.toArray(o).filter(t=>{if(g.isValidElement(t)){if(t.type===L){let s=t.props;return d=s.children,c=s.className,!1}if(t.type===M){let s=t.props;return u=s.children,m=s.className,!1}if(t.type===F)return f=t.props,!1}return!0}),x=l("div",{className:e("flex-1 overflow-auto h-full no-scrollbar p-2",n),children:p}),C=t=>{let{side:s="right"}=t,R=(t.overlay??!0)||!a,b=e("w-1/3 max-w-full",t.className),N=e("h-full bg-background",s==="right"?"border-l":"border-r"),w=l("div",{className:e("h-full p-2",n),children:p});return R?h("div",{tabIndex:-1,className:"flex relative flex-1 overflow-hidden",children:[l("div",{className:"h-full overflow-auto w-full transition-all duration-500 relative z-10",children:w}),h("div",{tabIndex:-1,inert:!t.open,className:e("absolute inset-0 z-20",!t.open&&"pointer-events-none"),children:[l("div",{className:e("absolute inset-0 bg-black/50 transition-opacity duration-500",t.open?"opacity-100":"opacity-0 pointer-events-none"),onClick:()=>t.onOpenChange(!1)}),l("div",{tabIndex:-1,className:e("absolute inset-y-0 z-50 h-full overflow-y-auto backdrop-blur-2xl","transition-all duration-500 ease-in-out",s==="right"?"right-0":"left-0",t.open?"translate-x-0 opacity-100":e(s==="right"?"translate-x-full":"-translate-x-full","opacity-0 pointer-events-none"),N,b),children:t.children})]})]}):h("div",{className:"flex relative flex-1 overflow-hidden",children:[s==="left"&&l("div",{className:e("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",N,t.open?b:"w-0 border-0"),children:t.children}),l("div",{className:e("h-full flex-1 min-w-0 overflow-auto transition-all duration-500",t.open&&"overflow-y-auto overflow-x-hidden"),children:w}),s==="right"&&l("div",{className:e("shrink-0 overflow-y-auto transition-all duration-500 ease-in-out",N,t.open?b:"w-0 border-0"),children:t.children})]})};return h("div",{className:e("flex flex-auto flex-col min-h-0 overflow-hidden rounded-2xl relative bg-background p-2",r),children:[d&&l("div",{className:e("border-b p-2",c),children:d}),f?C(f):x,u&&l("div",{className:e("border-t p-2",m),children:u})]})};import{jsx as O}from"react/jsx-runtime";var ce=({className:o,children:r})=>r==null?null:O("div",{className:e("flex items-center w-full gap-4 p-2 [&>*:last-child]:ml-auto",o),children:r});export{Y as AppContainer,ie as AppContent,M as AppContentFooter,L as AppContentHeader,ce as AppFooter,oe as AppHeader,F as AppSheet};
+//# sourceMappingURL=index.js.map