shad-m 1.0.2 → 1.0.3

package/dist/common/display/display-html-string.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const DisplayHTMLString = React__namespace.forwardRef(
+  ({ htmlString, ...rest }, ref) => {
+    const [sanitizedHTML, setSanitizedHTML] = React__namespace.useState("");
+    React__namespace.useEffect(() => {
+      const sanitizeHTML = async () => {
+        if (typeof window !== "undefined") {
+          try {
+            const { default: DOMPurify } = await import('dompurify');
+            setSanitizedHTML(DOMPurify.sanitize(htmlString));
+          } catch (error) {
+            console.warn("Failed to load DOMPurify, using raw HTML:", error);
+            setSanitizedHTML(htmlString);
+          }
+        } else {
+          setSanitizedHTML(htmlString);
+        }
+      };
+      sanitizeHTML();
+    }, [htmlString]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, dangerouslySetInnerHTML: { __html: sanitizedHTML }, ...rest });
+  }
+);
+DisplayHTMLString.displayName = "DisplayHTMLString";
+
+exports.DisplayHTMLString = DisplayHTMLString;
+//# sourceMappingURL=display-html-string.js.map
+//# sourceMappingURL=display-html-string.js.map

package/dist/common/display/display-html-string.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/display-html-string.tsx"],"names":["React","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,oBAAoBA,gBAAA,CAAM,UAAA;AAAA,EAC9B,CAAC,EAAE,UAAA,EAAY,GAAG,IAAA,IAAQ,GAAA,KAAQ;AAChC,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,gBAAA,CAAM,SAAS,EAAE,CAAA;AAE3D,IAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,MAAA,MAAM,eAAe,YAAY;AAC/B,QAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,UAAA,IAAI;AACF,YAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAU,GAAI,MAAM,OAAO,WAAW,CAAA;AACvD,YAAA,gBAAA,CAAiB,SAAA,CAAU,QAAA,CAAS,UAAU,CAAC,CAAA;AAAA,UACjD,SAAS,KAAA,EAAO;AACd,YAAA,OAAA,CAAQ,IAAA,CAAK,6CAA6C,KAAK,CAAA;AAC/D,YAAA,gBAAA,CAAiB,UAAU,CAAA;AAAA,UAC7B;AAAA,QACF,CAAA,MAAO;AAEL,UAAA,gBAAA,CAAiB,UAAU,CAAA;AAAA,QAC7B;AAAA,MACF,CAAA;AAEA,MAAA,YAAA,EAAa;AAAA,IACf,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,IAAA,uBAAOC,cAAA,CAAC,SAAI,GAAA,EAAU,uBAAA,EAAyB,EAAE,MAAA,EAAQ,aAAA,EAAc,EAAI,GAAG,IAAA,EAAM,CAAA;AAAA,EACtF;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"display-html-string.js","sourcesContent":["import * as React from 'react';\n\nexport interface DisplayHTMLStringProps extends React.HTMLAttributes<HTMLDivElement> {\n  htmlString: string;\n}\n\nconst DisplayHTMLString = React.forwardRef<HTMLDivElement, DisplayHTMLStringProps>(\n  ({ htmlString, ...rest }, ref) => {\n    const [sanitizedHTML, setSanitizedHTML] = React.useState('');\n\n    React.useEffect(() => {\n      const sanitizeHTML = async () => {\n        if (typeof window !== 'undefined') {\n          try {\n            const { default: DOMPurify } = await import('dompurify');\n            setSanitizedHTML(DOMPurify.sanitize(htmlString));\n          } catch (error) {\n            console.warn('Failed to load DOMPurify, using raw HTML:', error);\n            setSanitizedHTML(htmlString);\n          }\n        } else {\n          // Server-side rendering - use raw HTML (consider security implications)\n          setSanitizedHTML(htmlString);\n        }\n      };\n\n      sanitizeHTML();\n    }, [htmlString]);\n\n    return <div ref={ref} dangerouslySetInnerHTML={{ __html: sanitizedHTML }} {...rest} />;\n  },\n);\n\nDisplayHTMLString.displayName = 'DisplayHTMLString';\n\nexport { DisplayHTMLString };\n"]}

package/dist/common/display/display-html-string.mjs

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+
+const DisplayHTMLString = React.forwardRef(
+  ({ htmlString, ...rest }, ref) => {
+    const [sanitizedHTML, setSanitizedHTML] = React.useState("");
+    React.useEffect(() => {
+      const sanitizeHTML = async () => {
+        if (typeof window !== "undefined") {
+          try {
+            const { default: DOMPurify } = await import('dompurify');
+            setSanitizedHTML(DOMPurify.sanitize(htmlString));
+          } catch (error) {
+            console.warn("Failed to load DOMPurify, using raw HTML:", error);
+            setSanitizedHTML(htmlString);
+          }
+        } else {
+          setSanitizedHTML(htmlString);
+        }
+      };
+      sanitizeHTML();
+    }, [htmlString]);
+    return /* @__PURE__ */ jsx("div", { ref, dangerouslySetInnerHTML: { __html: sanitizedHTML }, ...rest });
+  }
+);
+DisplayHTMLString.displayName = "DisplayHTMLString";
+
+export { DisplayHTMLString };
+//# sourceMappingURL=display-html-string.mjs.map
+//# sourceMappingURL=display-html-string.mjs.map

package/dist/common/display/display-html-string.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/display-html-string.tsx"],"names":[],"mappings":";;;AAMA,MAAM,oBAAoB,KAAA,CAAM,UAAA;AAAA,EAC9B,CAAC,EAAE,UAAA,EAAY,GAAG,IAAA,IAAQ,GAAA,KAAQ;AAChC,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,KAAA,CAAM,SAAS,EAAE,CAAA;AAE3D,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,MAAM,eAAe,YAAY;AAC/B,QAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,UAAA,IAAI;AACF,YAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAU,GAAI,MAAM,OAAO,WAAW,CAAA;AACvD,YAAA,gBAAA,CAAiB,SAAA,CAAU,QAAA,CAAS,UAAU,CAAC,CAAA;AAAA,UACjD,SAAS,KAAA,EAAO;AACd,YAAA,OAAA,CAAQ,IAAA,CAAK,6CAA6C,KAAK,CAAA;AAC/D,YAAA,gBAAA,CAAiB,UAAU,CAAA;AAAA,UAC7B;AAAA,QACF,CAAA,MAAO;AAEL,UAAA,gBAAA,CAAiB,UAAU,CAAA;AAAA,QAC7B;AAAA,MACF,CAAA;AAEA,MAAA,YAAA,EAAa;AAAA,IACf,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,IAAA,uBAAO,GAAA,CAAC,SAAI,GAAA,EAAU,uBAAA,EAAyB,EAAE,MAAA,EAAQ,aAAA,EAAc,EAAI,GAAG,IAAA,EAAM,CAAA;AAAA,EACtF;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"display-html-string.mjs","sourcesContent":["import * as React from 'react';\n\nexport interface DisplayHTMLStringProps extends React.HTMLAttributes<HTMLDivElement> {\n  htmlString: string;\n}\n\nconst DisplayHTMLString = React.forwardRef<HTMLDivElement, DisplayHTMLStringProps>(\n  ({ htmlString, ...rest }, ref) => {\n    const [sanitizedHTML, setSanitizedHTML] = React.useState('');\n\n    React.useEffect(() => {\n      const sanitizeHTML = async () => {\n        if (typeof window !== 'undefined') {\n          try {\n            const { default: DOMPurify } = await import('dompurify');\n            setSanitizedHTML(DOMPurify.sanitize(htmlString));\n          } catch (error) {\n            console.warn('Failed to load DOMPurify, using raw HTML:', error);\n            setSanitizedHTML(htmlString);\n          }\n        } else {\n          // Server-side rendering - use raw HTML (consider security implications)\n          setSanitizedHTML(htmlString);\n        }\n      };\n\n      sanitizeHTML();\n    }, [htmlString]);\n\n    return <div ref={ref} dangerouslySetInnerHTML={{ __html: sanitizedHTML }} {...rest} />;\n  },\n);\n\nDisplayHTMLString.displayName = 'DisplayHTMLString';\n\nexport { DisplayHTMLString };\n"]}

package/dist/common/display/index.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var displayHtmlString = require('./display-html-string');
+var displayField = require('./display-field');
+var displayFieldGroup = require('./display-field-group');
+var countdown = require('./countdown');
+var statusState = require('./status-state');
+var index = require('./sidebar/index');
+var page = require('./page');
+var scoreMeter = require('./score-meter');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var statusState__default = /*#__PURE__*/_interopDefault(statusState);
+var index__default = /*#__PURE__*/_interopDefault(index);
+var scoreMeter__default = /*#__PURE__*/_interopDefault(scoreMeter);
+
+
+
+Object.defineProperty(exports, "DisplayHTMLString", {
+  enumerable: true,
+  get: function () { return displayHtmlString.DisplayHTMLString; }
+});
+Object.defineProperty(exports, "DisplayField", {
+  enumerable: true,
+  get: function () { return displayField.DisplayField; }
+});
+Object.defineProperty(exports, "DisplayFieldGroup", {
+  enumerable: true,
+  get: function () { return displayFieldGroup.DisplayFieldGroup; }
+});
+Object.defineProperty(exports, "Countdown", {
+  enumerable: true,
+  get: function () { return countdown.Countdown; }
+});
+Object.defineProperty(exports, "StatusState", {
+  enumerable: true,
+  get: function () { return statusState__default.default; }
+});
+Object.defineProperty(exports, "SidebarLayout", {
+  enumerable: true,
+  get: function () { return index__default.default; }
+});
+Object.defineProperty(exports, "SidebarSheet", {
+  enumerable: true,
+  get: function () { return index.SidebarSheet; }
+});
+Object.defineProperty(exports, "ScoreMeter", {
+  enumerable: true,
+  get: function () { return scoreMeter__default.default; }
+});
+Object.keys(page).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return page[k]; }
+  });
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/common/display/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/common/display/index.mjs

@@ -0,0 +1,10 @@
+export { DisplayHTMLString } from './display-html-string';
+export { DisplayField } from './display-field';
+export { DisplayFieldGroup } from './display-field-group';
+export { Countdown } from './countdown';
+export { default as StatusState } from './status-state';
+export { default as SidebarLayout, SidebarSheet } from './sidebar/index';
+export * from './page';
+export { default as ScoreMeter } from './score-meter';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/common/display/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}

package/dist/common/display/page-breadcrumb.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Icon = require('@/assets/Icon');
+var breadcrumb = require('@/components/breadcrumb');
+var skeleton = require('@/components/skeleton');
+var providers = require('@repo/ui/providers');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const PageBreadcrumb = React.memo(
+  ({
+    items,
+    className,
+    isLoading = false,
+    LinkComponent: LinkComponentProp
+  }) => {
+    const { LinkComponent: LinkComponentContext } = providers.useUISystemContext();
+    const Link = LinkComponentProp || LinkComponentContext || (({ href, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...props, children }));
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.Breadcrumb, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(breadcrumb.BreadcrumbList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: "/", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.HomeOutlineIcon16, { className: "ic-ink-400s hover:ic-ink-500s" }) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-64" }) })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.Breadcrumb, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(breadcrumb.BreadcrumbList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: "/", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.HomeOutlineIcon16, { className: "ic-ink-400s hover:ic-ink-500s" }) }) }) }),
+      items?.map(({ href, label }, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: href ? /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbLink, { className: "text-ink-400s text-t14m", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href, children: label }) }) : /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbPage, { children: label }) })
+      ] }, `${idx}-${typeof label === "string" ? label : idx}`))
+    ] }) });
+  }
+);
+PageBreadcrumb.displayName = "PageBreadcrumb";
+
+exports.PageBreadcrumb = PageBreadcrumb;
+//# sourceMappingURL=page-breadcrumb.js.map
+//# sourceMappingURL=page-breadcrumb.js.map

package/dist/common/display/page-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/page-breadcrumb.tsx"],"names":["memo","useUISystemContext","jsx","Breadcrumb","jsxs","BreadcrumbList","BreadcrumbItem","BreadcrumbLink","HomeOutlineIcon16","BreadcrumbSeparator","Skeleton","React","BreadcrumbPage"],"mappings":";;;;;;;;;;;;;AAiCO,MAAM,cAAA,GAAiBA,UAAA;AAAA,EAC5B,CAAC;AAAA,IACC,KAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,aAAA,EAAe;AAAA,GACjB,KAA2B;AACzB,IAAA,MAAM,EAAE,aAAA,EAAe,oBAAA,EAAqB,GAAIC,4BAAA,EAAmB;AAGnE,IAAA,MAAM,IAAA,GACJ,iBAAA,IACA,oBAAA,KACC,CAAC,EAAE,IAAA,EAAM,QAAA,EAAU,GAAG,KAAA,uBACrBC,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAa,GAAG,OAChB,QAAA,EACH,CAAA,CAAA;AAGJ,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,uBACEA,cAAA,CAACC,qBAAA,EAAA,EAAW,SAAA,EACV,QAAA,kBAAAC,eAAA,CAACC,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAACI,yBAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAACK,yBAAA,EAAA,EAAe,OAAA,EAAO,MACrB,QAAA,kBAAAL,cAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,GAAA,EACT,yCAACM,sBAAA,EAAA,EAAkB,SAAA,EAAU,+BAAA,EAAgC,CAAA,EAC/D,GACF,CAAA,EACF,CAAA;AAAA,uCACCC,8BAAA,EAAA,EAAoB,CAAA;AAAA,uCACpBH,yBAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAACQ,iBAAA,EAAA,EAAS,SAAA,EAAU,YAAW,CAAA,EACjC;AAAA,OAAA,EACF,CAAA,EACF,CAAA;AAAA,IAEJ;AACA,IAAA,uBACER,cAAA,CAACC,qBAAA,EAAA,EAAW,SAAA,EACV,QAAA,kBAAAC,eAAA,CAACC,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACI,yBAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAACK,yBAAA,EAAA,EAAe,OAAA,EAAO,MACrB,QAAA,kBAAAL,cAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,GAAA,EACT,yCAACM,sBAAA,EAAA,EAAkB,SAAA,EAAU,+BAAA,EAAgC,CAAA,EAC/D,GACF,CAAA,EACF,CAAA;AAAA,MAEC,KAAA,EAAO,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,KAAA,EAAM,EAAG,GAAA,qBAC5BJ,eAAA,CAACO,sBAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,wBAAAT,cAAA,CAACO,8BAAA,EAAA,EAAoB,CAAA;AAAA,uCACpBH,yBAAA,EAAA,EACE,QAAA,EAAA,IAAA,kCACEC,yBAAA,EAAA,EAAe,SAAA,EAAU,2BAA0B,OAAA,EAAO,IAAA,EACzD,QAAA,kBAAAL,cAAA,CAAC,IAAA,EAAA,EAAK,MAAa,QAAA,EAAA,KAAA,EAAM,CAAA,EAC3B,oBAEAA,cAAA,CAACU,yBAAA,EAAA,EAAgB,iBAAM,CAAA,EAE3B;AAAA,OAAA,EAAA,EAVmB,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,OAAO,UAAU,QAAA,GAAW,KAAA,GAAQ,GAAG,CAAA,CAWtE,CACD;AAAA,KAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"page-breadcrumb.js","sourcesContent":["'use client';\n\nimport { HomeOutlineIcon16 } from '@/assets/Icon';\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/breadcrumb';\nimport { Skeleton } from '@/components/skeleton';\nimport { useUISystemContext } from '@repo/ui/providers';\nimport React, { memo } from 'react';\n\nexport type PageBreadcrumbItem = {\n  href?: string;\n  label: string;\n};\n\nexport interface PageBreadcrumbProps {\n  items: PageBreadcrumbItem[];\n  className?: string;\n  isLoading?: boolean;\n  LinkComponent?: React.ComponentType<any>;\n}\n\n/**\n * PageBreadcrumb - Client Component\n *\n * This component uses hooks (useUISystemContext) so it must be a client component.\n * Can be safely imported in server components as it's marked with 'use client'.\n */\nexport const PageBreadcrumb = memo(\n  ({\n    items,\n    className,\n    isLoading = false,\n    LinkComponent: LinkComponentProp,\n  }: PageBreadcrumbProps) => {\n    const { LinkComponent: LinkComponentContext } = useUISystemContext();\n\n    // Use provided LinkComponent prop, fallback to context, or fallback to anchor tag\n    const Link =\n      LinkComponentProp ||\n      LinkComponentContext ||\n      (({ href, children, ...props }: any) => (\n        <a href={href} {...props}>\n          {children}\n        </a>\n      ));\n\n    if (isLoading) {\n      return (\n        <Breadcrumb className={className}>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink asChild>\n                <Link href=\"/\">\n                  <HomeOutlineIcon16 className=\"ic-ink-400s hover:ic-ink-500s\" />\n                </Link>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <Skeleton className=\"h-4 w-64\" />\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      );\n    }\n    return (\n      <Breadcrumb className={className}>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink asChild>\n              <Link href=\"/\">\n                <HomeOutlineIcon16 className=\"ic-ink-400s hover:ic-ink-500s\" />\n              </Link>\n            </BreadcrumbLink>\n          </BreadcrumbItem>\n\n          {items?.map(({ href, label }, idx) => (\n            <React.Fragment key={`${idx}-${typeof label === 'string' ? label : idx}`}>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                {href ? (\n                  <BreadcrumbLink className=\"text-ink-400s text-t14m\" asChild>\n                    <Link href={href}>{label}</Link>\n                  </BreadcrumbLink>\n                ) : (\n                  <BreadcrumbPage>{label}</BreadcrumbPage>\n                )}\n              </BreadcrumbItem>\n            </React.Fragment>\n          ))}\n        </BreadcrumbList>\n      </Breadcrumb>\n    );\n  },\n);\nPageBreadcrumb.displayName = 'PageBreadcrumb';\n"]}

package/dist/common/display/page-breadcrumb.mjs

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { HomeOutlineIcon16 } from '@/assets/Icon';
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@/components/breadcrumb';
+import { Skeleton } from '@/components/skeleton';
+import { useUISystemContext } from '@repo/ui/providers';
+import React, { memo } from 'react';
+
+const PageBreadcrumb = memo(
+  ({
+    items,
+    className,
+    isLoading = false,
+    LinkComponent: LinkComponentProp
+  }) => {
+    const { LinkComponent: LinkComponentContext } = useUISystemContext();
+    const Link = LinkComponentProp || LinkComponentContext || (({ href, children, ...props }) => /* @__PURE__ */ jsx("a", { href, ...props, children }));
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(Breadcrumb, { className, children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/", children: /* @__PURE__ */ jsx(HomeOutlineIcon16, { className: "ic-ink-400s hover:ic-ink-500s" }) }) }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64" }) })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx(Breadcrumb, { className, children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/", children: /* @__PURE__ */ jsx(HomeOutlineIcon16, { className: "ic-ink-400s hover:ic-ink-500s" }) }) }) }),
+      items?.map(({ href, label }, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: href ? /* @__PURE__ */ jsx(BreadcrumbLink, { className: "text-ink-400s text-t14m", asChild: true, children: /* @__PURE__ */ jsx(Link, { href, children: label }) }) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: label }) })
+      ] }, `${idx}-${typeof label === "string" ? label : idx}`))
+    ] }) });
+  }
+);
+PageBreadcrumb.displayName = "PageBreadcrumb";
+
+export { PageBreadcrumb };
+//# sourceMappingURL=page-breadcrumb.mjs.map
+//# sourceMappingURL=page-breadcrumb.mjs.map

package/dist/common/display/page-breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/page-breadcrumb.tsx"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,cAAA,GAAiB,IAAA;AAAA,EAC5B,CAAC;AAAA,IACC,KAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,aAAA,EAAe;AAAA,GACjB,KAA2B;AACzB,IAAA,MAAM,EAAE,aAAA,EAAe,oBAAA,EAAqB,GAAI,kBAAA,EAAmB;AAGnE,IAAA,MAAM,IAAA,GACJ,iBAAA,IACA,oBAAA,KACC,CAAC,EAAE,IAAA,EAAM,QAAA,EAAU,GAAG,KAAA,uBACrB,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAa,GAAG,OAChB,QAAA,EACH,CAAA,CAAA;AAGJ,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EACV,QAAA,kBAAA,IAAA,CAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,MACrB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,GAAA,EACT,8BAAC,iBAAA,EAAA,EAAkB,SAAA,EAAU,+BAAA,EAAgC,CAAA,EAC/D,GACF,CAAA,EACF,CAAA;AAAA,4BACC,mBAAA,EAAA,EAAoB,CAAA;AAAA,4BACpB,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,YAAW,CAAA,EACjC;AAAA,OAAA,EACF,CAAA,EACF,CAAA;AAAA,IAEJ;AACA,IAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EACV,QAAA,kBAAA,IAAA,CAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,MACrB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,GAAA,EACT,8BAAC,iBAAA,EAAA,EAAkB,SAAA,EAAU,+BAAA,EAAgC,CAAA,EAC/D,GACF,CAAA,EACF,CAAA;AAAA,MAEC,KAAA,EAAO,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,KAAA,EAAM,EAAG,GAAA,qBAC5B,IAAA,CAAC,KAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,CAAA;AAAA,4BACpB,cAAA,EAAA,EACE,QAAA,EAAA,IAAA,uBACE,cAAA,EAAA,EAAe,SAAA,EAAU,2BAA0B,OAAA,EAAO,IAAA,EACzD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAa,QAAA,EAAA,KAAA,EAAM,CAAA,EAC3B,oBAEA,GAAA,CAAC,cAAA,EAAA,EAAgB,iBAAM,CAAA,EAE3B;AAAA,OAAA,EAAA,EAVmB,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,OAAO,UAAU,QAAA,GAAW,KAAA,GAAQ,GAAG,CAAA,CAWtE,CACD;AAAA,KAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"page-breadcrumb.mjs","sourcesContent":["'use client';\n\nimport { HomeOutlineIcon16 } from '@/assets/Icon';\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/breadcrumb';\nimport { Skeleton } from '@/components/skeleton';\nimport { useUISystemContext } from '@repo/ui/providers';\nimport React, { memo } from 'react';\n\nexport type PageBreadcrumbItem = {\n  href?: string;\n  label: string;\n};\n\nexport interface PageBreadcrumbProps {\n  items: PageBreadcrumbItem[];\n  className?: string;\n  isLoading?: boolean;\n  LinkComponent?: React.ComponentType<any>;\n}\n\n/**\n * PageBreadcrumb - Client Component\n *\n * This component uses hooks (useUISystemContext) so it must be a client component.\n * Can be safely imported in server components as it's marked with 'use client'.\n */\nexport const PageBreadcrumb = memo(\n  ({\n    items,\n    className,\n    isLoading = false,\n    LinkComponent: LinkComponentProp,\n  }: PageBreadcrumbProps) => {\n    const { LinkComponent: LinkComponentContext } = useUISystemContext();\n\n    // Use provided LinkComponent prop, fallback to context, or fallback to anchor tag\n    const Link =\n      LinkComponentProp ||\n      LinkComponentContext ||\n      (({ href, children, ...props }: any) => (\n        <a href={href} {...props}>\n          {children}\n        </a>\n      ));\n\n    if (isLoading) {\n      return (\n        <Breadcrumb className={className}>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink asChild>\n                <Link href=\"/\">\n                  <HomeOutlineIcon16 className=\"ic-ink-400s hover:ic-ink-500s\" />\n                </Link>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <Skeleton className=\"h-4 w-64\" />\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      );\n    }\n    return (\n      <Breadcrumb className={className}>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink asChild>\n              <Link href=\"/\">\n                <HomeOutlineIcon16 className=\"ic-ink-400s hover:ic-ink-500s\" />\n              </Link>\n            </BreadcrumbLink>\n          </BreadcrumbItem>\n\n          {items?.map(({ href, label }, idx) => (\n            <React.Fragment key={`${idx}-${typeof label === 'string' ? label : idx}`}>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                {href ? (\n                  <BreadcrumbLink className=\"text-ink-400s text-t14m\" asChild>\n                    <Link href={href}>{label}</Link>\n                  </BreadcrumbLink>\n                ) : (\n                  <BreadcrumbPage>{label}</BreadcrumbPage>\n                )}\n              </BreadcrumbItem>\n            </React.Fragment>\n          ))}\n        </BreadcrumbList>\n      </Breadcrumb>\n    );\n  },\n);\nPageBreadcrumb.displayName = 'PageBreadcrumb';\n"]}

package/dist/common/display/page-v2.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lib = require('@/lib');
+var React = require('react');
+var page = require('./page');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const PageContent = React__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: lib.cn("space-y-4 rounded-lg bg-white p-4 md:p-6", className),
+      ...props
+    }
+  )
+);
+PageContent.displayName = "PageContent";
+
+Object.defineProperty(exports, "Page", {
+  enumerable: true,
+  get: function () { return page.Page; }
+});
+Object.defineProperty(exports, "PageAction", {
+  enumerable: true,
+  get: function () { return page.PageAction; }
+});
+Object.defineProperty(exports, "PageBack", {
+  enumerable: true,
+  get: function () { return page.PageBack; }
+});
+Object.defineProperty(exports, "PageBreadcrumb", {
+  enumerable: true,
+  get: function () { return page.PageBreadcrumb; }
+});
+Object.defineProperty(exports, "PageContainer", {
+  enumerable: true,
+  get: function () { return page.PageContainer; }
+});
+Object.defineProperty(exports, "PageHeader", {
+  enumerable: true,
+  get: function () { return page.PageHeader; }
+});
+Object.defineProperty(exports, "PageSubtitle", {
+  enumerable: true,
+  get: function () { return page.PageSubtitle; }
+});
+Object.defineProperty(exports, "PageTitle", {
+  enumerable: true,
+  get: function () { return page.PageTitle; }
+});
+exports.PageContent = PageContent;
+//# sourceMappingURL=page-v2.js.map
+//# sourceMappingURL=page-v2.js.map

package/dist/common/display/page-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/page-v2.tsx"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;AAcA,MAAM,cAAcA,sBAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxBC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,MAAA,CAAG,0CAAA,EAA4C,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA;AAGV;AACA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"page-v2.js","sourcesContent":["/**\n * @deprecated This file is deprecated. Please import from './page' instead.\n *\n * All components are now re-exported from page.tsx for consistency.\n * page-v2.tsx is maintained for backward compatibility only.\n *\n * Migration guide:\n * - Replace: import { ... } from '@repo/ui/common/display/page-v2'\n * - With:    import { ... } from '@repo/ui/common/display/page'\n */\n\nimport { cn } from '@/lib';\nimport React from 'react';\n\nconst PageContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('space-y-4 rounded-lg bg-white p-4 md:p-6', className)}\n      {...props}\n    />\n  ),\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n\n// Re-export other components from page.tsx\nexport {\n  Page,\n  PageAction,\n  PageBack,\n  PageBreadcrumb,\n  PageContainer,\n  PageHeader,\n  PageSubtitle,\n  PageTitle,\n  type PageBreadcrumbItem,\n} from './page';\n"]}

package/dist/common/display/page-v2.mjs

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@/lib';
+import React from 'react';
+export { Page, PageAction, PageBack, PageBreadcrumb, PageContainer, PageHeader, PageSubtitle, PageTitle } from './page';
+
+const PageContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("space-y-4 rounded-lg bg-white p-4 md:p-6", className),
+      ...props
+    }
+  )
+);
+PageContent.displayName = "PageContent";
+
+export { PageContent };
+//# sourceMappingURL=page-v2.mjs.map
+//# sourceMappingURL=page-v2.mjs.map

package/dist/common/display/page-v2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/page-v2.tsx"],"names":[],"mappings":";;;;;AAcA,MAAM,cAAc,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,0CAAA,EAA4C,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA;AAGV;AACA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"page-v2.mjs","sourcesContent":["/**\n * @deprecated This file is deprecated. Please import from './page' instead.\n *\n * All components are now re-exported from page.tsx for consistency.\n * page-v2.tsx is maintained for backward compatibility only.\n *\n * Migration guide:\n * - Replace: import { ... } from '@repo/ui/common/display/page-v2'\n * - With:    import { ... } from '@repo/ui/common/display/page'\n */\n\nimport { cn } from '@/lib';\nimport React from 'react';\n\nconst PageContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('space-y-4 rounded-lg bg-white p-4 md:p-6', className)}\n      {...props}\n    />\n  ),\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n\n// Re-export other components from page.tsx\nexport {\n  Page,\n  PageAction,\n  PageBack,\n  PageBreadcrumb,\n  PageContainer,\n  PageHeader,\n  PageSubtitle,\n  PageTitle,\n  type PageBreadcrumbItem,\n} from './page';\n"]}

package/dist/common/display/page.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Icon = require('@/assets/Icon');
+var button = require('@/components/button');
+var skeleton = require('@/components/skeleton');
+var utils = require('@/lib/utils');
+var React = require('react');
+var pageBreadcrumb = require('./page-breadcrumb');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const PageTitle = React__default.default.forwardRef(({ className, level = 1, addonBefore, addonAfter, ...props }, ref) => {
+  const Component = `h${level}`;
+  const componentProps = {
+    ref,
+    className: utils.cn("text-t20sb text-ink-500s font-medium", className),
+    ...props
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    addonBefore && /* @__PURE__ */ jsxRuntime.jsx("span", { children: addonBefore }),
+    React__default.default.createElement(Component, componentProps),
+    addonAfter && /* @__PURE__ */ jsxRuntime.jsx("span", { children: addonAfter })
+  ] });
+});
+PageTitle.displayName = "PageTitle";
+const PageSubtitle = React__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("text-t14m text-ink-400s", className), ...props })
+);
+PageSubtitle.displayName = "PageSubtitle";
+const PageBack = React__default.default.forwardRef(
+  ({ className, onBack, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        ref,
+        variant: "ghost",
+        size: "icon",
+        className: utils.cn("h-8 w-8 p-0", className),
+        onClick: onBack,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowLeftIcon, { className: "h-6 w-6" })
+      }
+    );
+  }
+);
+PageBack.displayName = "PageBack";
+const PageAction = React__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("flex items-center gap-3", className), ...props })
+);
+PageAction.displayName = "PageAction";
+const getChildByType = (children, targetType) => {
+  return React__default.default.Children.toArray(children).find((child) => {
+    if (!React__default.default.isValidElement(child)) return false;
+    if (child.type === targetType) return true;
+    const childDisplayName = child.type?.displayName;
+    const targetDisplayName = targetType?.displayName;
+    return childDisplayName && targetDisplayName && childDisplayName === targetDisplayName;
+  });
+};
+const PageHeader = React__default.default.forwardRef(
+  ({
+    className,
+    children,
+    title,
+    subtitle,
+    action,
+    back,
+    loading,
+    variant = "default",
+    responsive = true,
+    ...props
+  }, ref) => {
+    const headerTitle = title || getChildByType(children, PageTitle);
+    const headerSubtitle = subtitle || getChildByType(children, PageSubtitle);
+    const headerAction = action || getChildByType(children, PageAction);
+    const headerBack = back || getChildByType(children, PageBack);
+    const variantClasses = {
+      default: "flex flex-col items-start justify-between gap-4 sm:flex-row",
+      compact: "flex flex-col items-start justify-between gap-2 sm:flex-row",
+      centered: "flex flex-col items-center justify-center gap-4 text-center"
+    };
+    const baseClasses = responsive ? variantClasses[variant] : "flex flex-col items-start justify-between gap-4";
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn(baseClasses, className), ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-48" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-20" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn(baseClasses, className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+        headerBack,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
+          headerTitle,
+          headerSubtitle
+        ] })
+      ] }),
+      headerAction
+    ] });
+  }
+);
+PageHeader.displayName = "PageHeader";
+const PageContainer = React__default.default.forwardRef(
+  ({ className, size = "full", ...props }, ref) => {
+    const sizeClasses = {
+      full: "h-full w-full mx-auto max-w-[1920px]",
+      md: "w-full md:!w-[640px] lg:!w-[970px] mx-auto",
+      // Matches old Container (fixed width with !important, no mx-auto)
+      lg: "mx-auto h-full w-full max-w-[1328px]"
+    };
+    const baseClasses = size === "md" ? "flex flex-col" : "bg-background-pg flex flex-col gap-4 p-4 md:p-6";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(baseClasses, sizeClasses[size], className), ...props });
+  }
+);
+PageContainer.displayName = "PageContainer";
+const PageContent = React__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn("border-ink-50s rounded-lg border bg-white", className),
+      ...props
+    }
+  )
+);
+PageContent.displayName = "PageContent";
+const Page = Object.assign(PageContainer, {
+  Header: PageHeader,
+  Title: PageTitle,
+  Subtitle: PageSubtitle,
+  Action: PageAction,
+  Content: PageContent,
+  Breadcrumb: pageBreadcrumb.PageBreadcrumb
+});
+
+Object.defineProperty(exports, "PageBreadcrumb", {
+  enumerable: true,
+  get: function () { return pageBreadcrumb.PageBreadcrumb; }
+});
+exports.Page = Page;
+exports.PageAction = PageAction;
+exports.PageBack = PageBack;
+exports.PageContainer = PageContainer;
+exports.PageContent = PageContent;
+exports.PageHeader = PageHeader;
+exports.PageSubtitle = PageSubtitle;
+exports.PageTitle = PageTitle;
+exports.getChildByType = getChildByType;
+//# sourceMappingURL=page.js.map
+//# sourceMappingURL=page.js.map

package/dist/common/display/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/page.tsx"],"names":["React","cn","jsxs","jsx","Button","ArrowLeftIcon","Skeleton","PageBreadcrumbComponent"],"mappings":"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","file":"page.js","sourcesContent":["import { ArrowLeftIcon } from '@/assets/Icon';\nimport { Button } from '@/components/button';\nimport { Skeleton } from '@/components/skeleton';\nimport { cn } from '@/lib/utils';\nimport React from 'react';\n\n// Import with alias to avoid naming conflict\nimport { PageBreadcrumb as PageBreadcrumbComponent } from './page-breadcrumb';\n\n// Re-export for public API\nexport { PageBreadcrumb } from './page-breadcrumb';\nexport type { PageBreadcrumbItem } from './page-breadcrumb';\n\n// Define sub-components BEFORE PageHeader so they can be referenced\nconst PageTitle = React.forwardRef<\n  HTMLHeadingElement,\n  Omit<React.HTMLAttributes<HTMLHeadingElement>, 'title'> & {\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n    addonBefore?: React.ReactNode;\n    addonAfter?: React.ReactNode;\n  }\n>(({ className, level = 1, addonBefore, addonAfter, ...props }, ref) => {\n  const Component = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  const componentProps = {\n    ref,\n    className: cn('text-t20sb text-ink-500s font-medium', className),\n    ...props,\n  } as React.HTMLAttributes<HTMLHeadingElement> & { ref: React.ForwardedRef<HTMLHeadingElement> };\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {addonBefore && <span>{addonBefore}</span>}\n      {React.createElement(Component, componentProps)}\n      {addonAfter && <span>{addonAfter}</span>}\n    </div>\n  );\n});\nPageTitle.displayName = 'PageTitle';\n\nconst PageSubtitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('text-t14m text-ink-400s', className)} {...props} />\n  ),\n);\nPageSubtitle.displayName = 'PageSubtitle';\n\ninterface PageBackProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  onBack: () => void;\n}\nconst PageBack = React.forwardRef<HTMLButtonElement, PageBackProps>(\n  ({ className, onBack, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn('h-8 w-8 p-0', className)}\n        onClick={onBack}\n        {...props}\n      >\n        <ArrowLeftIcon className=\"h-6 w-6\" />\n      </Button>\n    );\n  },\n);\nPageBack.displayName = 'PageBack';\n\nconst PageAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex items-center gap-3', className)} {...props} />\n  ),\n);\nPageAction.displayName = 'PageAction';\n\n// Helper function for better type safety\nexport const getChildByType = (children: React.ReactNode, targetType: React.ComponentType<any>) => {\n  return React.Children.toArray(children).find((child): child is React.ReactElement => {\n    if (!React.isValidElement(child)) return false;\n\n    // Check direct type match\n    if (child.type === targetType) return true;\n\n    // Check displayName for forwardRef components\n    const childDisplayName = (child.type as any)?.displayName;\n    const targetDisplayName = (targetType as any)?.displayName;\n\n    return childDisplayName && targetDisplayName && childDisplayName === targetDisplayName;\n  });\n};\n\ninterface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  className?: string;\n  children?: React.ReactNode;\n  /** Alternative to children composition - more explicit */\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  action?: React.ReactNode;\n  back?: React.ReactNode;\n  /** Control responsive behavior */\n  responsive?: boolean;\n  /** Show loading state */\n  loading?: boolean;\n  /** Control responsive behavior */\n  variant?: 'default' | 'compact' | 'centered';\n  /** Link component for breadcrumbs */\n  LinkComponent?: React.ComponentType<any>;\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      className,\n      children,\n      title,\n      subtitle,\n      action,\n      back,\n      loading,\n      variant = 'default',\n      responsive = true,\n      ...props\n    },\n    ref,\n  ) => {\n    // Support both prop-based and children-based composition\n    const headerTitle = title || getChildByType(children, PageTitle);\n    const headerSubtitle = subtitle || getChildByType(children, PageSubtitle);\n    const headerAction = action || getChildByType(children, PageAction);\n    const headerBack = back || getChildByType(children, PageBack);\n\n    const variantClasses = {\n      default: 'flex flex-col items-start justify-between gap-4 sm:flex-row',\n      compact: 'flex flex-col items-start justify-between gap-2 sm:flex-row',\n      centered: 'flex flex-col items-center justify-center gap-4 text-center',\n    };\n\n    const baseClasses = responsive\n      ? variantClasses[variant]\n      : 'flex flex-col items-start justify-between gap-4';\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn(baseClasses, className)} {...props}>\n          <div className=\"space-y-1\">\n            <Skeleton className=\"h-8 w-48\" />\n            <Skeleton className=\"h-4 w-32\" />\n          </div>\n          <Skeleton className=\"h-10 w-20\" />\n        </div>\n      );\n    }\n\n    return (\n      <div ref={ref} className={cn(baseClasses, className)} {...props}>\n        <div className=\"flex items-start gap-2\">\n          {headerBack}\n          <div className=\"flex-1 space-y-1\">\n            {headerTitle}\n            {headerSubtitle}\n          </div>\n        </div>\n        {headerAction}\n      </div>\n    );\n  },\n);\nPageHeader.displayName = 'PageHeader';\n\ninterface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Control page width */\n  size?: 'full' | 'md' | 'lg';\n}\n\nconst PageContainer = React.forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ className, size = 'full', ...props }, ref) => {\n    const sizeClasses = {\n      full: 'h-full w-full mx-auto max-w-[1920px]',\n      md: 'w-full md:!w-[640px] lg:!w-[970px] mx-auto', // Matches old Container (fixed width with !important, no mx-auto)\n      lg: 'mx-auto h-full w-full max-w-[1328px]',\n    };\n\n    // Size 'md' has minimal styling (like old Container component)\n    // Other sizes have default page styling\n    const baseClasses =\n      size === 'md' ? 'flex flex-col' : 'bg-background-pg flex flex-col gap-4 p-4 md:p-6';\n\n    return <div ref={ref} className={cn(baseClasses, sizeClasses[size], className)} {...props} />;\n  },\n);\nPageContainer.displayName = 'PageContainer';\n\nconst PageContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('border-ink-50s rounded-lg border bg-white', className)}\n      {...props}\n    />\n  ),\n);\nPageContent.displayName = 'PageContent';\n\n// Compound component pattern for better DX\nconst Page = Object.assign(PageContainer, {\n  Header: PageHeader,\n  Title: PageTitle,\n  Subtitle: PageSubtitle,\n  Action: PageAction,\n  Content: PageContent,\n  Breadcrumb: PageBreadcrumbComponent,\n});\n\nexport {\n  Page,\n  PageAction,\n  PageBack,\n  PageContainer,\n  PageContent,\n  PageHeader,\n  PageSubtitle,\n  PageTitle,\n};\n"]}