@jbpark/ui-kit 3.7.0 → 4.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+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;
+  subTitle?: React.ReactNode;
+  extra?: React.ReactNode;
+  backIcon?: React.ReactNode;
+  onBack?: () => void;
+  classNames?: {
+    back?: string;
+    title?: string;
+    subTitle?: string;
+    extra?: string;
+  };
+}
+declare const PageHeader: ({
+  title,
+  subTitle,
+  extra,
+  backIcon,
+  onBack,
+  className,
+  classNames,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageHeader, Props };
+//# sourceMappingURL=page-header.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.mts","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"mappings":";;;UAQiB,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,cAaE,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"}

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { cn, renderConditional } from "../../utils.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 }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2",
+			children: [onBack && /* @__PURE__ */ jsx(Button, {
+				type: "text",
+				shape: "circle",
+				size: "small",
+				"aria-label": "뒤로가기",
+				icon: backIcon || /* @__PURE__ */ jsx(ArrowLeft, {}),
+				onClick: onBack,
+				className: cn(classNames?.back)
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-0.5",
+					children: [title && /* @__PURE__ */ jsx("p", {
+						className: cn("text-lg font-medium", classNames?.title),
+						children: title
+					}), subTitle && /* @__PURE__ */ jsx("p", {
+						className: cn("text-muted-foreground text-sm", classNames?.subTitle),
+						children: subTitle
+					})]
+				}), renderConditional(extra, (v) => /* @__PURE__ */ jsx("div", {
+					className: cn("shrink-0", classNames?.extra),
+					children: v
+				}))]
+			})]
+		}), children]
+	});
+};
+
+//#endregion
+export { PageHeader as default };
+//# sourceMappingURL=page-header.mjs.map

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

@@ -0,0 +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 { 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.\n//\n// TODO: the back button's aria-label (\"뒤로가기\") is hardcoded the same\n// way every other component's was before #210 (Config's `locale` slot)\n// existed. Wire it up to `useConfig().locale` once that PR merges, adding\n// a `back` key to Locale/DEFAULT_LOCALE — left out here to avoid this PR\n// depending on an unmerged one.\nconst PageHeader = ({\n  title,\n  subTitle,\n  extra,\n  backIcon,\n  onBack,\n  className,\n  classNames,\n  children,\n  ...props\n}: Props) => {\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=\"뒤로가기\"\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":";;;;;;;;AA+BA,MAAM,cAAc,EAClB,OACA,UACA,OACA,UACA,QACA,WACA,YACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC;EAAI,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;aACxD,qBAAC;GAAI,WAAU;cACZ,UACC,oBAAC;IACC,MAAK;IACL,OAAM;IACN,MAAK;IACL,cAAW;IACX,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"}

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

@@ -0,0 +1,24 @@
+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'> {
+  status?: Status;
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  subTitle?: React.ReactNode;
+  extra?: React.ReactNode;
+}
+declare const Result: ({
+  status,
+  icon,
+  title,
+  subTitle,
+  extra,
+  className,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Props, Result };
+//# sourceMappingURL=result.d.mts.map

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

@@ -0,0 +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"}

package/dist/components/templates/result.mjs

@@ -0,0 +1,46 @@
+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" }),
+	error: /* @__PURE__ */ jsx(OctagonX, { className: "text-red-400" }),
+	info: /* @__PURE__ */ jsx(Info, { className: "text-blue-400" }),
+	warning: /* @__PURE__ */ jsx(OctagonAlert, { className: "text-yellow-400" }),
+	"404": /* @__PURE__ */ jsx(FileQuestion, { className: "text-muted-foreground" }),
+	"403": /* @__PURE__ */ jsx(ShieldAlert, { className: "text-muted-foreground" }),
+	"500": /* @__PURE__ */ jsx(ServerCrash, { className: "text-muted-foreground" })
+};
+const Result = ({ status = "info", icon, title, subTitle, extra, className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center gap-2 py-16 text-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-2 [&_svg]:size-16",
+				children: icon ?? STATUS_ICONS[status]
+			}),
+			title && /* @__PURE__ */ jsx("p", {
+				className: "text-xl font-medium",
+				children: title
+			}),
+			subTitle && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: subTitle
+			}),
+			extra && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 flex items-center justify-center gap-2",
+				children: extra
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 w-full",
+				children
+			})
+		]
+	});
+};
+
+//#endregion
+export { Result as default };
+//# sourceMappingURL=result.mjs.map

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

@@ -0,0 +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"}

package/dist/index.d.mts

@@ -1,10 +1,16 @@
 import Button from "./Button.mjs";
 import Tag from "./Tag.mjs";
 import Typography from "./Typography.mjs";
-import Card from "./Card.mjs";
-import { Menu } from "./components/molecules/menu/menu.mjs";
+import Card, { Props } from "./Card.mjs";
+import { Menu, Props as Props$14 } from "./components/molecules/menu/menu.mjs";
+import { Props as Props$18 } from "./components/molecules/reveals/reveals.mjs";
 import Reveals from "./Reveals.mjs";
-import Space from "./Space.mjs";
+import Space, { Props as Props$21 } from "./Space.mjs";
+import { Props as Props$5 } from "./components/templates/layout/content.mjs";
+import { Props as Props$9 } from "./components/templates/layout/footer.mjs";
+import { Props as Props$10 } from "./components/templates/layout/header.mjs";
+import { Props as Props$11 } from "./components/templates/layout/layout.mjs";
+import { Props as Props$20 } from "./components/templates/layout/sider.mjs";
 import Layout from "./Layout.mjs";
 import { Checkbox } from "./components/atoms/checkbox/index.mjs";
 import { ColorPicker } from "./components/atoms/color-picker.mjs";
@@ -19,21 +25,31 @@ import { Skeleton } from "./components/atoms/skeleton/index.mjs";
 import { Spin } from "./components/atoms/spin.mjs";
 import { Switch } from "./components/atoms/switch.mjs";
 import "./components/atoms/index.mjs";
-import { Collapse } from "./components/molecules/collapse.mjs";
-import { Dropdown } from "./components/molecules/dropdown.mjs";
+import { Collapse, Props as Props$2 } from "./components/molecules/collapse.mjs";
+import { Dropdown, Props as Props$7 } from "./components/molecules/dropdown.mjs";
+import { Props as Props$13 } from "./components/molecules/marquees/marquees.mjs";
 import { Marquees } from "./components/molecules/marquees/index.mjs";
+import { Props as Props$22 } from "./components/molecules/splitter/splitter.mjs";
 import { Splitter } from "./components/molecules/splitter/index.mjs";
-import { Upload, UploadFile } from "./components/molecules/upload.mjs";
+import { Props as Props$24, Upload, UploadFile } from "./components/molecules/upload.mjs";
 import "./components/molecules/index.mjs";
-import { Drawer, Props as Props$1 } from "./components/organisms/drawer.mjs";
+import { Drawer, Props as Props$6 } from "./components/organisms/drawer.mjs";
+import { Props as Props$12 } from "./components/organisms/list/list.mjs";
 import { List } from "./components/organisms/list/index.mjs";
-import { Modal } from "./components/organisms/modal.mjs";
+import { Modal, Props as Props$15 } from "./components/organisms/modal.mjs";
+import { Props as Props$23 } from "./components/organisms/swiper/swiper.mjs";
 import { Swiper } from "./components/organisms/swiper/index.mjs";
 import { StaticProps, Toast } from "./components/organisms/toast.mjs";
 import "./components/organisms/index.mjs";
+import { Container, Props as Props$4 } from "./components/templates/container.mjs";
+import { Empty, Props as Props$8 } from "./components/templates/empty.mjs";
+import { Props as Props$17, Result } from "./components/templates/result.mjs";
+import { PageHeader, Props as Props$16 } from "./components/templates/page-header.mjs";
+import { Props as Props$19, Row } from "./components/templates/grid/row.mjs";
+import { Col, Props as Props$1 } from "./components/templates/grid/col.mjs";
 import "./components/templates/index.mjs";
-import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
-import { useConfig } from "./providers/Config/context.mjs";
-import { Config, Props } from "./providers/Config/index.mjs";
-import "./providers/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, DatePicker, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, useConfig };
+import { Locale, ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/Config/context.mjs";
+import { Config, Props as Props$3 } from "./providers/Config/index.mjs";
+import "./providers.mjs";
+export { Button, Card, Props as CardProps, Checkbox, Col, Props$1 as ColProps, Collapse, Props$2 as CollapseProps, ColorPicker, Config, Props$3 as ConfigProps, Container, Props$4 as ContainerProps, Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, Drawer, Props$6 as DrawerProps, Dropdown, Props$7 as DropdownProps, Empty, Props$8 as EmptyProps, FloatButton, Props$9 as FooterProps, Props$10 as HeaderProps, Input, Layout, Props$11 as LayoutProps, List, Props$12 as ListProps, Locale, Marquees, Props$13 as MarqueesProps, Menu, Props$14 as MenuProps, Modal, Props$15 as ModalProps, PageHeader, Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, Props$17 as ResultProps, Reveals, Props$18 as RevealsProps, Row, Props$19 as RowProps, Select, Props$20 as SiderProps, Skeleton, Space, Props$21 as SpaceProps, Spin, Splitter, Props$22 as SplitterProps, Swiper, Props$23 as SwiperProps, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, Props$24 as UploadProps, useConfig };

package/dist/index.mjs

@@ -5,6 +5,8 @@ import Typography from "./Typography.mjs";
 import Popover from "./components/atoms/popover.mjs";
 import ColorPicker from "./components/atoms/color-picker.mjs";
 import DatePicker from "./components/atoms/date-picker.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/Config/context.mjs";
+import Config from "./providers/Config/index.mjs";
 import FloatButton from "./components/atoms/float-button/index.mjs";
 import Input from "./components/atoms/input/index.mjs";
 import Progress from "./components/atoms/progress.mjs";
@@ -29,7 +31,11 @@ import Modal from "./components/organisms/modal.mjs";
 import Swiper from "./components/organisms/swiper/index.mjs";
 import Toast from "./components/organisms/toast.mjs";
 import Layout from "./Layout.mjs";
-import { useConfig } from "./providers/Config/context.mjs";
-import Config from "./providers/Config/index.mjs";
+import Container from "./components/templates/container.mjs";
+import Empty from "./components/templates/empty.mjs";
+import Result from "./components/templates/result.mjs";
+import PageHeader from "./components/templates/page-header.mjs";
+import Row from "./components/templates/grid/row.mjs";
+import Col from "./components/templates/grid/col.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, DatePicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, useConfig };
+export { Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Popover, Progress, Radio, Result, Reveals, Row, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, useConfig };

package/dist/providers/Config/context.d.mts

@@ -1,8 +1,9 @@
-import { ContextValue } from "./types.mjs";
+import { ContextValue, Locale } from "./types.mjs";
 import "react";
 
 //#region src/providers/Config/context.d.ts
+declare const DEFAULT_LOCALE: Required<Locale>;
 declare const useConfig: () => ContextValue;
 //#endregion
-export { useConfig };
+export { DEFAULT_LOCALE, useConfig };
 //# sourceMappingURL=context.d.mts.map

package/dist/providers/Config/context.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.mts","names":[],"sources":["../../../src/providers/Config/context.ts"],"mappings":";;;;cAUa,SAAA,QAAS,YAAA"}
+{"version":3,"file":"context.d.mts","names":[],"sources":["../../../src/providers/Config/context.ts"],"mappings":";;;;cAMa,cAAA,EAAgB,QAAA,CAAS,MAAA;AAAA,cAczB,SAAA,QAAS,YAAA"}

package/dist/providers/Config/context.mjs

@@ -3,9 +3,20 @@
 import { createContext, useContext } from "react";
 
 //#region src/providers/Config/context.ts
-const Context = createContext({ theme: {} });
+const DEFAULT_LOCALE = {
+	close: "닫기",
+	clear: "지우기",
+	backToTop: "맨 위로",
+	loading: "로딩 중",
+	expand: "펼치기",
+	collapse: "접기"
+};
+const Context = createContext({
+	theme: {},
+	locale: DEFAULT_LOCALE
+});
 const useConfig = () => useContext(Context);
 
 //#endregion
-export { Context, useConfig };
+export { Context, DEFAULT_LOCALE, useConfig };
 //# sourceMappingURL=context.mjs.map

package/dist/providers/Config/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/providers/Config/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ContextValue } from './types';\n\nexport const Context = createContext<ContextValue>({\n  theme: {},\n});\n\nexport const useConfig = () => useContext(Context);\n"],"mappings":";;;;;AAMA,MAAa,UAAU,cAA4B,EACjD,OAAO,EAAE,EACV,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/providers/Config/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ContextValue, Locale } from './types';\n\nexport const DEFAULT_LOCALE: Required<Locale> = {\n  close: '닫기',\n  clear: '지우기',\n  backToTop: '맨 위로',\n  loading: '로딩 중',\n  expand: '펼치기',\n  collapse: '접기',\n};\n\nexport const Context = createContext<ContextValue>({\n  theme: {},\n  locale: DEFAULT_LOCALE,\n});\n\nexport const useConfig = () => useContext(Context);\n"],"mappings":";;;;;AAMA,MAAa,iBAAmC;CAC9C,OAAO;CACP,OAAO;CACP,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACX;AAED,MAAa,UAAU,cAA4B;CACjD,OAAO,EAAE;CACT,QAAQ;CACT,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}