@jbpark/ui-kit 5.1.0 → 5.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentProps<'main'> {\n  asChild?: boolean;\n}\n\nconst Content = ({ children, className, asChild = false, ...props }: Props) => {\n  // Only one <main> landmark should exist per page — a Layout nested\n  // inside a page that already has its own <main> (or a Content nested\n  // inside another Content) needs a way to opt out of rendering a second\n  // one. asChild + Slot (same pattern as core/button.tsx and\n  // core/badge.tsx) merges these props/classes onto the caller's own\n  // element instead.\n  const Comp = asChild ? Slot : 'main';\n\n  return (\n    <Comp\n      className={cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      )}\n      {...props}\n    >\n      {/* Reset the registry to null so a `Sider` used inside `Content`\n          (e.g. a detail page's own sub-navigation) doesn't register\n          against the ancestor `Layout` and flip its axis to flex-row —\n          a genuinely nested `Layout` already gets its own fresh registry,\n          this only guards the \"Sider with no intervening Layout\" case. */}\n      <SiderRegistryContext.Provider value={null}>\n        {children}\n      </SiderRegistryContext.Provider>\n    </Comp>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;;;AAUA,MAAM,WAAW,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,YAAmB;AAS7E,QACE,oBAHW,UAAU,OAAO;EAI1B,WAAW,GACT,kCAUA,UACD;EACD,GAAI;YAOJ,oBAAC,qBAAqB;GAAS,OAAO;GACnC;IAC6B;GAC3B"}
+{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentProps<'main'> {\n  asChild?: boolean;\n}\n\nconst Content = ({ children, className, asChild = false, ...props }: Props) => {\n  // Only one <main> landmark should exist per page — a Layout nested\n  // inside a page that already has its own <main> (or a Content nested\n  // inside another Content) needs a way to opt out of rendering a second\n  // one. asChild + Slot (same pattern as core/button.tsx and\n  // core/badge.tsx) merges these props/classes onto the caller's own\n  // element instead.\n  const Comp = asChild ? Slot : 'main';\n\n  return (\n    <Comp\n      className={cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      )}\n      {...props}\n    >\n      {/* Reset the registry to null so a `Sider` used inside `Content`\n          (e.g. a detail page's own sub-navigation) doesn't register\n          against the ancestor `Layout` and flip its axis to flex-row —\n          a genuinely nested `Layout` already gets its own fresh registry,\n          this only guards the \"Sider with no intervening Layout\" case. */}\n      <SiderRegistryContext.Provider value={null}>\n        {children}\n      </SiderRegistryContext.Provider>\n    </Comp>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;;AAUA,MAAM,WAAW,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,YAAmB;CAS7E,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,WAAW,GACT,kCAUA,SACF;EACA,GAAI;EAOJ,UAAA,oBAAC,qBAAqB,UAAtB;GAA+B,OAAO;GACnC;EAC4B,CAAA;CAC3B,CAAA;AAEV"}

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

@@ -1,12 +1,6 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/templates/layout/footer.d.ts
 interface Props extends React.ComponentProps<'footer'> {}
-declare const Footer: ({
-  children,
-  className,
-  ...props
-}: Props) => react_jsx_runtime0.JSX.Element;
+declare const Footer: ({ children, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Footer, Props };
+export { Props, Footer as default };
 //# sourceMappingURL=footer.d.mts.map

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

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

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

@@ -1,6 +1,5 @@
 import { cn } from "../../../utils.mjs";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/templates/layout/footer.tsx
 const Footer = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("footer", {
@@ -9,7 +8,7 @@ const Footer = ({ children, className, ...props }) => {
 		children
 	});
 };
-
 //#endregion
 export { Footer as default };
+
 //# sourceMappingURL=footer.mjs.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,cAAA;EACnC,QAAA;AAAA;AAAA,cAGI,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAKb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"mappings":";UAEiB,cAAc,MAAM;EACnC;;cAGI,WAAU,UAAA,WAAA,aAAA,SAKb,0BAAK,IAAA"}

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

@@ -1,6 +1,5 @@
 import { cn } from "../../../utils.mjs";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/templates/layout/header.tsx
 const Header = ({ children, className, position = "sticky", ...props }) => {
 	return /* @__PURE__ */ jsx("header", {
@@ -9,7 +8,7 @@ const Header = ({ children, className, position = "sticky", ...props }) => {
 		children
 	});
 };
-
 //#endregion
 export { Header as default };
+
 //# sourceMappingURL=header.mjs.map

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

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

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

@@ -1,12 +1,6 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/templates/layout/layout.d.ts
 interface Props extends React.ComponentProps<'div'> {}
-declare const Layout: ({
-  children,
-  className,
-  ...props
-}: Props) => react_jsx_runtime0.JSX.Element;
+declare const Layout: ({ children, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Layout, Props };
+export { Props, Layout as default };
 //# sourceMappingURL=layout.d.mts.map

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

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

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

@@ -3,7 +3,6 @@ import { SiderRegistryContext } from "./sider-context.mjs";
 import Sider from "./sider.mjs";
 import { Children, createContext, isValidElement, useContext, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/templates/layout/layout.tsx
 const LayoutNestedContext = createContext(false);
 const hasDirectSiderChild = (children) => Children.toArray(children).some((child) => isValidElement(child) && child.type === Sider);
@@ -34,7 +33,7 @@ const Layout = ({ children, className, ...props }) => {
 		})
 	});
 };
-
 //#endregion
 export { Layout as default };
+
 //# sourceMappingURL=layout.mjs.map

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

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

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

@@ -1,5 +1,4 @@
 import { createContext, useContext, useLayoutEffect, useRef } from "react";
-
 //#region src/components/templates/layout/sider-context.ts
 const SiderRegistryContext = createContext(null);
 const useRegisterSider = () => {
@@ -14,7 +13,7 @@ const useRegisterSider = () => {
 		};
 	}, [registry]);
 };
-
 //#endregion
 export { SiderRegistryContext, useRegisterSider };
+
 //# sourceMappingURL=sider-context.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"sider-context.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider-context.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useRef } from 'react';\n\n// `Layout` needs to know whether a `Sider` exists anywhere in its subtree\n// to decide flex-row vs flex-col — but `Children.toArray(children).some(...)`\n// only ever sees direct children, and doesn't flatten Fragments, so a\n// `Sider` wrapped in a Fragment (or a custom wrapper component) went\n// undetected. Registering presence via context instead survives any\n// amount of wrapping, since it's `Sider` itself reporting in, not `Layout`\n// inspecting its children's shape.\nexport interface SiderRegistry {\n  registerSider: (id: object) => void;\n  unregisterSider: (id: object) => void;\n}\n\nexport const SiderRegistryContext = createContext<SiderRegistry | null>(null);\n\nexport const useRegisterSider = () => {\n  const registry = useContext(SiderRegistryContext);\n  const idRef = useRef({});\n\n  // `useLayoutEffect` (not `useEffect`) so the registration — and the\n  // resulting flex-row switch on `Layout` — commits before the browser\n  // paints, avoiding a flash of the flex-col fallback layout on mount.\n  useLayoutEffect(() => {\n    if (!registry) {\n      return;\n    }\n\n    const id = idRef.current;\n    registry.registerSider(id);\n\n    return () => {\n      registry.unregisterSider(id);\n    };\n  }, [registry]);\n};\n"],"mappings":";;;AAcA,MAAa,uBAAuB,cAAoC,KAAK;AAE7E,MAAa,yBAAyB;CACpC,MAAM,WAAW,WAAW,qBAAqB;CACjD,MAAM,QAAQ,OAAO,EAAE,CAAC;AAKxB,uBAAsB;AACpB,MAAI,CAAC,SACH;EAGF,MAAM,KAAK,MAAM;AACjB,WAAS,cAAc,GAAG;AAE1B,eAAa;AACX,YAAS,gBAAgB,GAAG;;IAE7B,CAAC,SAAS,CAAC"}
+{"version":3,"file":"sider-context.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider-context.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useRef } from 'react';\n\n// `Layout` needs to know whether a `Sider` exists anywhere in its subtree\n// to decide flex-row vs flex-col — but `Children.toArray(children).some(...)`\n// only ever sees direct children, and doesn't flatten Fragments, so a\n// `Sider` wrapped in a Fragment (or a custom wrapper component) went\n// undetected. Registering presence via context instead survives any\n// amount of wrapping, since it's `Sider` itself reporting in, not `Layout`\n// inspecting its children's shape.\nexport interface SiderRegistry {\n  registerSider: (id: object) => void;\n  unregisterSider: (id: object) => void;\n}\n\nexport const SiderRegistryContext = createContext<SiderRegistry | null>(null);\n\nexport const useRegisterSider = () => {\n  const registry = useContext(SiderRegistryContext);\n  const idRef = useRef({});\n\n  // `useLayoutEffect` (not `useEffect`) so the registration — and the\n  // resulting flex-row switch on `Layout` — commits before the browser\n  // paints, avoiding a flash of the flex-col fallback layout on mount.\n  useLayoutEffect(() => {\n    if (!registry) {\n      return;\n    }\n\n    const id = idRef.current;\n    registry.registerSider(id);\n\n    return () => {\n      registry.unregisterSider(id);\n    };\n  }, [registry]);\n};\n"],"mappings":";;AAcA,MAAa,uBAAuB,cAAoC,IAAI;AAE5E,MAAa,yBAAyB;CACpC,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,QAAQ,OAAO,CAAC,CAAC;CAKvB,sBAAsB;EACpB,IAAI,CAAC,UACH;EAGF,MAAM,KAAK,MAAM;EACjB,SAAS,cAAc,EAAE;EAEzB,aAAa;GACX,SAAS,gBAAgB,EAAE;EAC7B;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}

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

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/templates/layout/sider.d.ts
 type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface Props extends Omit<React.ComponentProps<'aside'>, 'onCollapse'> {
@@ -18,24 +16,7 @@ interface Props extends Omit<React.ComponentProps<'aside'>, 'onCollapse'> {
   onCollapse?: (collapsed: boolean) => void;
   onBreakpoint?: (broken: boolean) => void;
 }
-declare const Sider: ({
-  children,
-  className,
-  classNames,
-  style,
-  width,
-  collapsedWidth,
-  collapsible,
-  defaultCollapsed,
-  collapsed: _collapsed,
-  placement,
-  reverseArrow,
-  trigger,
-  breakpoint,
-  onCollapse,
-  onBreakpoint,
-  ...props
-}: Props) => react_jsx_runtime0.JSX.Element;
+declare const Sider: ({ children, className, classNames, style, width, collapsedWidth, collapsible, defaultCollapsed, collapsed: _collapsed, placement, reverseArrow, trigger, breakpoint, onCollapse, onBreakpoint, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Sider };
+export { Props, Sider as default };
 //# sourceMappingURL=sider.d.mts.map

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

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

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

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { useRegisterSider } from "./sider-context.mjs";
@@ -7,7 +6,6 @@ import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useResponsiveSize } from "@jbpark/use-hooks";
-
 //#region src/components/templates/layout/sider.tsx
 const BREAKPOINT_ORDER = [
 	"xs",
@@ -80,7 +78,7 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 		})]
 	});
 };
-
 //#endregion
 export { Sider as default };
+
 //# sourceMappingURL=sider.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef } from 'react';\n\nimport { useControllableState, useResponsiveSize } from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  const latestBrokenRef = useRef(broken);\n  const previousBrokenRef = useRef<boolean | null>(null);\n  const microtaskScheduledRef = useRef(false);\n  const onBreakpointRef = useRef(onBreakpoint);\n\n  useEffect(() => {\n    onBreakpointRef.current = onBreakpoint;\n  });\n\n  // `useResponsiveSize`'s own initial measurement resolves through its own\n  // layout effect, which (since it's called earlier in this component)\n  // commits and — if the real viewport differs from its SSR-safe 'xs'\n  // placeholder default — triggers a synchronous corrective re-render, all\n  // before the browser paints. Both the placeholder-derived render and the\n  // corrected one get their own effect pass (React doesn't coalesce\n  // same-tick synchronous re-commits into a single effect flush), so\n  // reacting to `broken` directly — in a layout or passive effect either\n  // way — fires once with the wrong placeholder value, then again with the\n  // corrected one.\n  //\n  // Coalescing through a microtask sidesteps that: every effect pass just\n  // records its `broken` into a ref and schedules (at most once) a\n  // microtask that reads whatever ended up latest once the synchronous\n  // cascade has fully settled, and acts on that single, correct value.\n  //\n  // The `previousBrokenRef` guard is the separate fix for #227 point 3:\n  // without it, an inline `onCollapse`/`onBreakpoint` (a fresh identity\n  // every render) would change `setCollapsed`'s own identity and re-run\n  // this effect on every unrelated parent re-render, reapplying `broken`\n  // and undoing a user's manual toggle. Only a genuine change should act.\n  useEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    latestBrokenRef.current = broken;\n\n    if (microtaskScheduledRef.current) {\n      return;\n    }\n    microtaskScheduledRef.current = true;\n\n    queueMicrotask(() => {\n      microtaskScheduledRef.current = false;\n\n      const settledBroken = latestBrokenRef.current;\n\n      if (previousBrokenRef.current === settledBroken) {\n        return;\n      }\n\n      previousBrokenRef.current = settledBroken;\n      setCollapsed(settledBroken);\n      onBreakpointRef.current?.(settledBroken);\n    });\n  }, [broken, breakpoint, setCollapsed]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        // Below Header's z-50 (and every other floating/overlay primitive\n        // in this library, which all use z-50) — Sider is a static layout\n        // column, not floating chrome, and previously outranked Header\n        // with an arbitrary z-100, covering it once Header stuck to the\n        // viewport top on scroll.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && trigger !== null && (\n        <button\n          type=\"button\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAsB5E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;AACX,mBAAkB;CAElB,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,YAAY,OAAO;CACzB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CAEF,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,MACX,CAAC;CACF,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,QAAQ,GACpD,iBAAiB,QAAQ,WAAW,GACpC;CAEJ,MAAM,kBAAkB,OAAO,OAAO;CACtC,MAAM,oBAAoB,OAAuB,KAAK;CACtD,MAAM,wBAAwB,OAAO,MAAM;CAC3C,MAAM,kBAAkB,OAAO,aAAa;AAE5C,iBAAgB;AACd,kBAAgB,UAAU;GAC1B;AAuBF,iBAAgB;AACd,MAAI,CAAC,WACH;AAGF,kBAAgB,UAAU;AAE1B,MAAI,sBAAsB,QACxB;AAEF,wBAAsB,UAAU;AAEhC,uBAAqB;AACnB,yBAAsB,UAAU;GAEhC,MAAM,gBAAgB,gBAAgB;AAEtC,OAAI,kBAAkB,YAAY,cAChC;AAGF,qBAAkB,UAAU;AAC5B,gBAAa,cAAc;AAC3B,mBAAgB,UAAU,cAAc;IACxC;IACD;EAAC;EAAQ;EAAY;EAAa,CAAC;CAEtC,MAAM,uBAAuB;AAC3B,eAAa,CAAC,UAAU;;CAS1B,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;AAExD,QACE,qBAAC;EACC,WAAW,GAMT,sDACA,mCAKA,cAAc,WAAW,cACzB,UAED;EACD,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,MAAM;GACpD,GAAG;GACJ;EACD,GAAI;aAEJ,oBAAC;GAAI,IAAI;GAAW,WAAU;GAC3B;IACG,EACL,eAAe,YAAY,QAC1B,oBAAC;GACC,MAAK;GACL,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,QAEb;aAEA,YAAY,SAAY,oBAAC,eAAY,WAAU,WAAW,GAAG;IACvD;GAEL"}
+{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef } from 'react';\n\nimport { useControllableState, useResponsiveSize } from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  const latestBrokenRef = useRef(broken);\n  const previousBrokenRef = useRef<boolean | null>(null);\n  const microtaskScheduledRef = useRef(false);\n  const onBreakpointRef = useRef(onBreakpoint);\n\n  useEffect(() => {\n    onBreakpointRef.current = onBreakpoint;\n  });\n\n  // `useResponsiveSize`'s own initial measurement resolves through its own\n  // layout effect, which (since it's called earlier in this component)\n  // commits and — if the real viewport differs from its SSR-safe 'xs'\n  // placeholder default — triggers a synchronous corrective re-render, all\n  // before the browser paints. Both the placeholder-derived render and the\n  // corrected one get their own effect pass (React doesn't coalesce\n  // same-tick synchronous re-commits into a single effect flush), so\n  // reacting to `broken` directly — in a layout or passive effect either\n  // way — fires once with the wrong placeholder value, then again with the\n  // corrected one.\n  //\n  // Coalescing through a microtask sidesteps that: every effect pass just\n  // records its `broken` into a ref and schedules (at most once) a\n  // microtask that reads whatever ended up latest once the synchronous\n  // cascade has fully settled, and acts on that single, correct value.\n  //\n  // The `previousBrokenRef` guard is the separate fix for #227 point 3:\n  // without it, an inline `onCollapse`/`onBreakpoint` (a fresh identity\n  // every render) would change `setCollapsed`'s own identity and re-run\n  // this effect on every unrelated parent re-render, reapplying `broken`\n  // and undoing a user's manual toggle. Only a genuine change should act.\n  useEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    latestBrokenRef.current = broken;\n\n    if (microtaskScheduledRef.current) {\n      return;\n    }\n    microtaskScheduledRef.current = true;\n\n    queueMicrotask(() => {\n      microtaskScheduledRef.current = false;\n\n      const settledBroken = latestBrokenRef.current;\n\n      if (previousBrokenRef.current === settledBroken) {\n        return;\n      }\n\n      previousBrokenRef.current = settledBroken;\n      setCollapsed(settledBroken);\n      onBreakpointRef.current?.(settledBroken);\n    });\n  }, [broken, breakpoint, setCollapsed]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        // Below Header's z-50 (and every other floating/overlay primitive\n        // in this library, which all use z-50) — Sider is a static layout\n        // column, not floating chrome, and previously outranked Header\n        // with an arbitrary z-100, covering it once Header stuck to the\n        // viewport top on scroll.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && trigger !== null && (\n        <button\n          type=\"button\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAK;AAsB3E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;CACX,iBAAiB;CAEjB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,KACZ,CAAC;CACD,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,OAAO,IACnD,iBAAiB,QAAQ,UAAU,IACnC;CAEJ,MAAM,kBAAkB,OAAO,MAAM;CACrC,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,wBAAwB,OAAO,KAAK;CAC1C,MAAM,kBAAkB,OAAO,YAAY;CAE3C,gBAAgB;EACd,gBAAgB,UAAU;CAC5B,CAAC;CAuBD,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,gBAAgB,UAAU;EAE1B,IAAI,sBAAsB,SACxB;EAEF,sBAAsB,UAAU;EAEhC,qBAAqB;GACnB,sBAAsB,UAAU;GAEhC,MAAM,gBAAgB,gBAAgB;GAEtC,IAAI,kBAAkB,YAAY,eAChC;GAGF,kBAAkB,UAAU;GAC5B,aAAa,aAAa;GAC1B,gBAAgB,UAAU,aAAa;EACzC,CAAC;CACH,GAAG;EAAC;EAAQ;EAAY;CAAY,CAAC;CAErC,MAAM,uBAAuB;EAC3B,aAAa,CAAC,SAAS;CACzB;CAQA,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;CAExD,OACE,qBAAC,SAAD;EACE,WAAW,GAMT,sDACA,mCAKA,cAAc,WAAW,cACzB,SAEF;EACA,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,KAAK;GACnD,GAAG;EACL;EACA,GAAI;EArBN,UAAA,CAuBE,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,GACJ,eAAe,YAAY,QAC1B,oBAAC,UAAD;GACE,MAAK;GACL,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,OAEd;GAEC,UAAA,YAAY,KAAA,IAAY,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA,IAAI;EACxD,CAAA,CAEL;;AAEX"}

package/dist/components/templates/page-header.d.mts

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/templates/page-header.d.ts
 interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {
   title?: React.ReactNode;
@@ -14,17 +12,7 @@ interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {
     extra?: string;
   };
 }
-declare const PageHeader: ({
-  title,
-  subTitle,
-  extra,
-  backIcon,
-  onBack,
-  className,
-  classNames,
-  children,
-  ...props
-}: Props) => react_jsx_runtime0.JSX.Element;
+declare const PageHeader: ({ title, subTitle, extra, backIcon, onBack, className, classNames, children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { PageHeader, Props };
+export { Props, PageHeader as default };
 //# sourceMappingURL=page-header.d.mts.map

package/dist/components/templates/page-header.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.d.mts","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"mappings":";;;UASiB,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,cAAA;EACxC,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,MAAA;EACA,UAAA;IACE,IAAA;IACA,KAAA;IACA,QAAA;IACA,KAAA;EAAA;AAAA;AAAA,cAOE,UAAA;EAAc,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAUjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"page-header.d.mts","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"mappings":";UASiB,cAAc,KAAK,MAAM;EACxC,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB;EACA;IACE;IACA;IACA;IACA;;;cAOE,eAAc,OAAA,UAAA,OAAA,UAAA,QAAA,WAAA,YAAA,aAAA,SAUjB,0BAAK,IAAA"}

package/dist/components/templates/page-header.mjs

@@ -1,11 +1,9 @@
-'use client';
-
+"use client";
 import { cn, renderConditional } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import Button from "../../Button.mjs";
 import { ArrowLeft } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/templates/page-header.tsx
 const PageHeader = ({ title, subTitle, extra, backIcon, onBack, className, classNames, children, ...props }) => {
 	const { locale } = useConfig();
@@ -41,7 +39,7 @@ const PageHeader = ({ title, subTitle, extra, backIcon, onBack, className, class
 		}), children]
 	});
 };
-
 //#endregion
 export { PageHeader as default };
+
 //# sourceMappingURL=page-header.mjs.map

package/dist/components/templates/page-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.mjs","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowLeft } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n  backIcon?: React.ReactNode;\n  onBack?: () => void;\n  classNames?: {\n    back?: string;\n    title?: string;\n    subTitle?: string;\n    extra?: string;\n  };\n}\n\n// Title + back button + extra action area — same shape as Drawer's header\n// (title/extra/closable), which this borrows the layout from wholesale;\n// PageHeader just swaps Drawer's close button for a back button.\nconst PageHeader = ({\n  title,\n  subTitle,\n  extra,\n  backIcon,\n  onBack,\n  className,\n  classNames,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)} {...props}>\n      <div className=\"flex items-start gap-2\">\n        {onBack && (\n          <Button\n            type=\"text\"\n            shape=\"circle\"\n            size=\"small\"\n            aria-label={locale.back ?? DEFAULT_LOCALE.back}\n            icon={backIcon || <ArrowLeft />}\n            onClick={onBack}\n            className={cn(classNames?.back)}\n          />\n        )}\n        <div className=\"flex flex-1 items-start justify-between gap-2\">\n          <div className=\"flex flex-col gap-0.5\">\n            {title && (\n              <p className={cn('text-lg font-medium', classNames?.title)}>\n                {title}\n              </p>\n            )}\n            {subTitle && (\n              <p\n                className={cn(\n                  'text-muted-foreground text-sm',\n                  classNames?.subTitle,\n                )}\n              >\n                {subTitle}\n              </p>\n            )}\n          </div>\n          {renderConditional(extra, v => (\n            <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n          ))}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default PageHeader;\n"],"mappings":";;;;;;;;;AA0BA,MAAM,cAAc,EAClB,OACA,UACA,OACA,UACA,QACA,WACA,YACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,WAAW;AAE9B,QACE,qBAAC;EAAI,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;aACxD,qBAAC;GAAI,WAAU;cACZ,UACC,oBAAC;IACC,MAAK;IACL,OAAM;IACN,MAAK;IACL,cAAY,OAAO,QAAQ,eAAe;IAC1C,MAAM,YAAY,oBAAC,cAAY;IAC/B,SAAS;IACT,WAAW,GAAG,YAAY,KAAK;KAC/B,EAEJ,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;gBACZ,SACC,oBAAC;MAAE,WAAW,GAAG,uBAAuB,YAAY,MAAM;gBACvD;OACC,EAEL,YACC,oBAAC;MACC,WAAW,GACT,iCACA,YAAY,SACb;gBAEA;OACC;MAEF,EACL,kBAAkB,QAAO,MACxB,oBAAC;KAAI,WAAW,GAAG,YAAY,YAAY,MAAM;eAAG;MAAQ,CAC5D;KACE;IACF,EACL;GACG"}
+{"version":3,"file":"page-header.mjs","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowLeft } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n  backIcon?: React.ReactNode;\n  onBack?: () => void;\n  classNames?: {\n    back?: string;\n    title?: string;\n    subTitle?: string;\n    extra?: string;\n  };\n}\n\n// Title + back button + extra action area — same shape as Drawer's header\n// (title/extra/closable), which this borrows the layout from wholesale;\n// PageHeader just swaps Drawer's close button for a back button.\nconst PageHeader = ({\n  title,\n  subTitle,\n  extra,\n  backIcon,\n  onBack,\n  className,\n  classNames,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)} {...props}>\n      <div className=\"flex items-start gap-2\">\n        {onBack && (\n          <Button\n            type=\"text\"\n            shape=\"circle\"\n            size=\"small\"\n            aria-label={locale.back ?? DEFAULT_LOCALE.back}\n            icon={backIcon || <ArrowLeft />}\n            onClick={onBack}\n            className={cn(classNames?.back)}\n          />\n        )}\n        <div className=\"flex flex-1 items-start justify-between gap-2\">\n          <div className=\"flex flex-col gap-0.5\">\n            {title && (\n              <p className={cn('text-lg font-medium', classNames?.title)}>\n                {title}\n              </p>\n            )}\n            {subTitle && (\n              <p\n                className={cn(\n                  'text-muted-foreground text-sm',\n                  classNames?.subTitle,\n                )}\n              >\n                {subTitle}\n              </p>\n            )}\n          </div>\n          {renderConditional(extra, v => (\n            <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n          ))}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AA0BA,MAAM,cAAc,EAClB,OACA,UACA,OACA,UACA,QACA,WACA,YACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAE7B,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;EAA1D,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UACC,oBAAC,QAAD;IACE,MAAK;IACL,OAAM;IACN,MAAK;IACL,cAAY,OAAO,QAAQ,eAAe;IAC1C,MAAM,YAAY,oBAAC,WAAD,CAAY,CAAA;IAC9B,SAAS;IACT,WAAW,GAAG,YAAY,IAAI;GAC/B,CAAA,GAEH,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,SACC,oBAAC,KAAD;MAAG,WAAW,GAAG,uBAAuB,YAAY,KAAK;MACtD,UAAA;KACA,CAAA,GAEJ,YACC,oBAAC,KAAD;MACE,WAAW,GACT,iCACA,YAAY,QACd;MAEC,UAAA;KACA,CAAA,CAEF;IACJ,CAAA,GAAA,kBAAkB,QAAO,MACxB,oBAAC,OAAD;KAAK,WAAW,GAAG,YAAY,YAAY,KAAK;KAAI,UAAA;IAAO,CAAA,CAC5D,CACE;GACF,CAAA,CAAA;EACJ,CAAA,GAAA,QACE;;AAET"}

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

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/templates/result.d.ts
 type Status = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
 interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {
@@ -9,16 +7,7 @@ interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {
   subTitle?: React.ReactNode;
   extra?: React.ReactNode;
 }
-declare const Result: ({
-  status,
-  icon,
-  title,
-  subTitle,
-  extra,
-  className,
-  children,
-  ...props
-}: Props) => react_jsx_runtime0.JSX.Element;
+declare const Result: ({ status, icon, title, subTitle, extra, className, children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Result };
+export { Props, Result as default };
 //# sourceMappingURL=result.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"result.d.mts","names":[],"sources":["../../../src/components/templates/result.tsx"],"mappings":";;;KAYK,MAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,cAAA;EACxC,MAAA,GAAS,MAAA;EACT,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;AAAA;AAAA,cAMV,MAAA;EAAU,MAAA;EAAA,IAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GASb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"result.d.mts","names":[],"sources":["../../../src/components/templates/result.tsx"],"mappings":";KAYK;UAeY,cAAc,KAAK,MAAM;EACxC,SAAS;EACT,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,QAAQ,MAAM;;cAMV,WAAU,QAAA,MAAA,OAAA,UAAA,OAAA,WAAA,aAAA,SASb,0BAAK,IAAA"}

package/dist/components/templates/result.mjs

@@ -1,7 +1,6 @@
 import { cn } from "../../utils.mjs";
 import { Check, FileQuestion, Info, OctagonAlert, OctagonX, ServerCrash, ShieldAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/templates/result.tsx
 const STATUS_ICONS = {
 	success: /* @__PURE__ */ jsx(Check, { className: "text-green-400" }),
@@ -40,7 +39,7 @@ const Result = ({ status = "info", icon, title, subTitle, extra, className, chil
 		]
 	});
 };
-
 //#endregion
 export { Result as default };
+
 //# sourceMappingURL=result.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"result.mjs","names":[],"sources":["../../../src/components/templates/result.tsx"],"sourcesContent":["import {\n  Check,\n  FileQuestion,\n  Info,\n  OctagonAlert,\n  OctagonX,\n  ServerCrash,\n  ShieldAlert,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\ntype Status = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';\n\n// Reuses Modal's exact STATIC_ICONS set (Check/OctagonX/Info/OctagonAlert,\n// same colors) for the 4 statuses they share, so a Result page matches the\n// tone of a Modal.success()/error()/etc a user may have just seen.\nconst STATUS_ICONS: Record<Status, React.ReactNode> = {\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  info: <Info className=\"text-blue-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  '404': <FileQuestion className=\"text-muted-foreground\" />,\n  '403': <ShieldAlert className=\"text-muted-foreground\" />,\n  '500': <ServerCrash className=\"text-muted-foreground\" />,\n};\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  status?: Status;\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n}\n\n// Full-page success/failure/404/403 state screen — Empty's larger,\n// more prominent sibling (Empty says \"nothing here yet\" inline within a\n// list/table; Result says \"here's what happened\" for an entire page/view).\nconst Result = ({\n  status = 'info',\n  icon,\n  title,\n  subTitle,\n  extra,\n  className,\n  children,\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-2 py-16 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"mb-2 [&_svg]:size-16\">{icon ?? STATUS_ICONS[status]}</div>\n      {title && <p className=\"text-xl font-medium\">{title}</p>}\n      {subTitle && <p className=\"text-muted-foreground text-sm\">{subTitle}</p>}\n      {extra && (\n        <div className=\"mt-4 flex items-center justify-center gap-2\">\n          {extra}\n        </div>\n      )}\n      {children && <div className=\"mt-4 w-full\">{children}</div>}\n    </div>\n  );\n};\n\nexport default Result;\n"],"mappings":";;;;;AAiBA,MAAM,eAAgD;CACpD,SAAS,oBAAC,SAAM,WAAU,mBAAmB;CAC7C,OAAO,oBAAC,YAAS,WAAU,iBAAiB;CAC5C,MAAM,oBAAC,QAAK,WAAU,kBAAkB;CACxC,SAAS,oBAAC,gBAAa,WAAU,oBAAoB;CACrD,OAAO,oBAAC,gBAAa,WAAU,0BAA0B;CACzD,OAAO,oBAAC,eAAY,WAAU,0BAA0B;CACxD,OAAO,oBAAC,eAAY,WAAU,0BAA0B;CACzD;AAaD,MAAM,UAAU,EACd,SAAS,QACT,MACA,OACA,UACA,OACA,WACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,qEACA,UAED;EACD,GAAI;;GAEJ,oBAAC;IAAI,WAAU;cAAwB,QAAQ,aAAa;KAAc;GACzE,SAAS,oBAAC;IAAE,WAAU;cAAuB;KAAU;GACvD,YAAY,oBAAC;IAAE,WAAU;cAAiC;KAAa;GACvE,SACC,oBAAC;IAAI,WAAU;cACZ;KACG;GAEP,YAAY,oBAAC;IAAI,WAAU;IAAe;KAAe;;GACtD"}
+{"version":3,"file":"result.mjs","names":[],"sources":["../../../src/components/templates/result.tsx"],"sourcesContent":["import {\n  Check,\n  FileQuestion,\n  Info,\n  OctagonAlert,\n  OctagonX,\n  ServerCrash,\n  ShieldAlert,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\ntype Status = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';\n\n// Reuses Modal's exact STATIC_ICONS set (Check/OctagonX/Info/OctagonAlert,\n// same colors) for the 4 statuses they share, so a Result page matches the\n// tone of a Modal.success()/error()/etc a user may have just seen.\nconst STATUS_ICONS: Record<Status, React.ReactNode> = {\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  info: <Info className=\"text-blue-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  '404': <FileQuestion className=\"text-muted-foreground\" />,\n  '403': <ShieldAlert className=\"text-muted-foreground\" />,\n  '500': <ServerCrash className=\"text-muted-foreground\" />,\n};\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  status?: Status;\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n}\n\n// Full-page success/failure/404/403 state screen — Empty's larger,\n// more prominent sibling (Empty says \"nothing here yet\" inline within a\n// list/table; Result says \"here's what happened\" for an entire page/view).\nconst Result = ({\n  status = 'info',\n  icon,\n  title,\n  subTitle,\n  extra,\n  className,\n  children,\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-2 py-16 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"mb-2 [&_svg]:size-16\">{icon ?? STATUS_ICONS[status]}</div>\n      {title && <p className=\"text-xl font-medium\">{title}</p>}\n      {subTitle && <p className=\"text-muted-foreground text-sm\">{subTitle}</p>}\n      {extra && (\n        <div className=\"mt-4 flex items-center justify-center gap-2\">\n          {extra}\n        </div>\n      )}\n      {children && <div className=\"mt-4 w-full\">{children}</div>}\n    </div>\n  );\n};\n\nexport default Result;\n"],"mappings":";;;;AAiBA,MAAM,eAAgD;CACpD,SAAS,oBAAC,OAAD,EAAO,WAAU,iBAAkB,CAAA;CAC5C,OAAO,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;CAC3C,MAAM,oBAAC,MAAD,EAAM,WAAU,gBAAiB,CAAA;CACvC,SAAS,oBAAC,cAAD,EAAc,WAAU,kBAAmB,CAAA;CACpD,OAAO,oBAAC,cAAD,EAAc,WAAU,wBAAyB,CAAA;CACxD,OAAO,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;CACvD,OAAO,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;AACzD;AAaA,MAAM,UAAU,EACd,SAAS,QACT,MACA,OACA,UACA,OACA,WACA,UACA,GAAG,YACQ;CACX,OACE,qBAAC,OAAD;EACE,WAAW,GACT,qEACA,SAEF;EACA,GAAI;EANN,UAAA;GAQE,oBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA,QAAQ,aAAa;GAAa,CAAA;GACxE,SAAS,oBAAC,KAAD;IAAG,WAAU;IAAuB,UAAA;GAAS,CAAA;GACtD,YAAY,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAY,CAAA;GACtE,SACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEN,YAAY,oBAAC,OAAD;IAAK,WAAU;IAAe;GAAc,CAAA;EACtD;;AAET"}

package/dist/core/accordion.d.mts

@@ -1,32 +1,15 @@
 import * as React$1 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/core/accordion.d.ts
 declare namespace accordion_d_exports {
   export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 }
-declare function Accordion({
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime0.JSX.Element;
-declare function AccordionItem({
-  className,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime0.JSX.Element;
+declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): React$1.JSX.Element;
+declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): React$1.JSX.Element;
 interface CustomTriggerProps {
   expandIcon?: React$1.ReactNode;
 }
-declare function AccordionTrigger({
-  className,
-  children,
-  expandIcon,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Trigger> & CustomTriggerProps): react_jsx_runtime0.JSX.Element;
-declare function AccordionContent({
-  className,
-  children,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime0.JSX.Element;
+declare function AccordionTrigger({ className, children, expandIcon, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger> & CustomTriggerProps): React$1.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
-export { accordion_d_exports };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordion_d_exports };
 //# sourceMappingURL=accordion.d.mts.map

package/dist/core/accordion.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.mts","names":[],"sources":["../../src/core/accordion.tsx"],"mappings":";;;;;;;;iBASS,SAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,kBAAA,CAAmB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,kBAAA,CAAmB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAU7C,kBAAA;EACR,UAAA,GAAa,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGZ,gBAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,kBAAA,CAAmB,OAAA,IAChD,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2BX,gBAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,kBAAA,CAAmB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"accordion.d.mts","names":[],"sources":["../../src/core/accordion.tsx"],"mappings":";;;;;iBASS,eACJ,SACF,QAAM,sBAAsB,mBAAmB,QAAK,QAAA,IAAA;iBAI9C,gBACP,cACG,SACF,QAAM,sBAAsB,mBAAmB,QAAK,QAAA,IAAA;UAU7C;EACR,aAAa,QAAM;;iBAGZ,mBACP,WACA,UACA,eACG,SACF,QAAM,sBAAsB,mBAAmB,WAChD,qBAAkB,QAAA,IAAA;iBA2BX,mBACP,WACA,aACG,SACF,QAAM,sBAAsB,mBAAmB,WAAQ,QAAA,IAAA"}

package/dist/core/accordion.mjs

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import { ChevronDownIcon } from "lucide-react";
 import "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/core/accordion.tsx
 var accordion_exports = /* @__PURE__ */ __exportAll({
 	Accordion: () => Accordion,
@@ -53,7 +51,7 @@ function AccordionContent({ className, children, ...props }) {
 		})
 	});
 }
-
 //#endregion
-export { accordion_exports };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordion_exports };
+
 //# sourceMappingURL=accordion.mjs.map

package/dist/core/accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.mjs","names":[],"sources":["../../src/core/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\ninterface CustomTriggerProps {\n  expandIcon?: React.ReactNode;\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  expandIcon,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger> &\n  CustomTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          `focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1\n          items-start justify-between gap-4 rounded-md py-4 text-left text-sm\n          font-medium transition-all outline-none hover:underline\n          focus-visible:ring-[3px] disabled:pointer-events-none\n          disabled:opacity-50 [&[data-state=open]>svg]:rotate-180`,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {expandIcon || (\n          <ChevronDownIcon\n            className=\"text-muted-foreground pointer-events-none size-4 shrink-0\n              translate-y-0.5 transition-transform duration-200\"\n          />\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up\n        data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;;;;;;;;;;;AASA,SAAS,UAAU,EACjB,GAAG,SACoD;AACvD,QAAO,oBAAC,mBAAmB;EAAK,aAAU;EAAY,GAAI;GAAS;;AAGrE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,WAAW,GAAG,4BAA4B,UAAU;EACpD,GAAI;GACJ;;AAQN,SAAS,iBAAiB,EACxB,WACA,UACA,YACA,GAAG,SAEiB;AACpB,QACE,oBAAC,mBAAmB;EAAO,WAAU;YACnC,qBAAC,mBAAmB;GAClB,aAAU;GACV,WAAW,GACT;;;;oEAKA,UACD;GACD,GAAI;cAEH,UACA,cACC,oBAAC,mBACC,WAAU,+HAEV;IAEuB;GACH;;AAIhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;AAC1D,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,WAAU;EAEV,GAAI;YAEJ,oBAAC;GAAI,WAAW,GAAG,aAAa,UAAU;GAAG;IAAe;GACjC"}
+{"version":3,"file":"accordion.mjs","names":[],"sources":["../../src/core/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\ninterface CustomTriggerProps {\n  expandIcon?: React.ReactNode;\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  expandIcon,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger> &\n  CustomTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          `focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1\n          items-start justify-between gap-4 rounded-md py-4 text-left text-sm\n          font-medium transition-all outline-none hover:underline\n          focus-visible:ring-[3px] disabled:pointer-events-none\n          disabled:opacity-50 [&[data-state=open]>svg]:rotate-180`,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {expandIcon || (\n          <ChevronDownIcon\n            className=\"text-muted-foreground pointer-events-none size-4 shrink-0\n              translate-y-0.5 transition-transform duration-200\"\n          />\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up\n        data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;;;;;;;;;AASA,SAAS,UAAU,EACjB,GAAG,SACoD;CACvD,OAAO,oBAAC,mBAAmB,MAApB;EAAyB,aAAU;EAAY,GAAI;CAAQ,CAAA;AACpE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAAC,mBAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,YACA,GAAG,SAEiB;CACpB,OACE,oBAAC,mBAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAAC,mBAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT;;;;oEAKA,SACF;GACA,GAAI;GAVN,UAAA,CAYG,UACA,cACC,oBAAC,iBAAD,EACE,WAAU,6HAEX,CAAA,CAEuB;;CACH,CAAA;AAE/B;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAAC,mBAAmB,SAApB;EACE,aAAU;EACV,WAAU;EAEV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,aAAa,SAAS;GAAI;EAAc,CAAA;CACjC,CAAA;AAEhC"}

package/dist/core/badge.d.mts

@@ -1,24 +1,15 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
-
-//#region src/core/badge.d.ts
 declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
   variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;
 };
-declare function Badge({
-  className,
-  variant,
-  asChild,
-  ...props
-}: Props): react_jsx_runtime0.JSX.Element;
+declare function Badge({ className, variant, asChild, ...props }: Props): React$1.JSX.Element;
 //#endregion
-export { type Props, badge_d_exports };
+export { Badge, type Props, badgeVariants, badge_d_exports };
 //# sourceMappingURL=badge.d.mts.map

package/dist/core/badge.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/core/badge.tsx"],"mappings":";;;;;;;;;cAOM,aAAA,GAAa,KAAA;;IAyBlB,+BAAA,CAAA,SAAA;AAAA,KAEI,KAAA,GAAQ,OAAA,CAAM,cAAA,WACjB,YAAA,QAAoB,aAAA;EAClB,OAAA;AAAA;AAAA,iBAGK,KAAA,CAAA;EAAQ,SAAA;EAAW,OAAA;EAAS,OAAA;EAAA,GAAoB;AAAA,GAAS,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/core/badge.tsx"],"mappings":";;;;;cAOM,gBAAa;;6CAyBlB;KAEI,QAAQ,QAAM,yBACjB,oBAAoB;EAClB;;iBAGK,QAAQ,WAAW,SAAS,YAAoB,SAAS,QAAK,QAAA,IAAA"}