@ktnpm_devops/react-component 0.4.1 → 0.5.0

package/dist/index31.cjs

@@ -1,21 +1,82 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const clsx = require("./index38.cjs");
-const SettingsLayout_module = require("./index66.cjs");
-const SettingsLayout = ({
-  sidebar,
-  children,
-  title,
-  maxWidth = "48rem",
-  sidebarCollapsed = false,
-  className
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(SettingsLayout_module.default.root, className), children: [
-  sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: clsx.clsx(SettingsLayout_module.default.sidebar, { [SettingsLayout_module.default.sidebarCollapsed]: sidebarCollapsed }), children: sidebar }),
-  /* @__PURE__ */ jsxRuntime.jsx("main", { className: SettingsLayout_module.default.main, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SettingsLayout_module.default.content, style: { maxWidth }, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: SettingsLayout_module.default.title, children: title }),
-    children
-  ] }) })
-] });
-exports.SettingsLayout = SettingsLayout;
+const react = require("react");
+const constants = require("./index51.cjs");
+const ResizableSplitPanel_module = require("./index59.cjs");
+const FULL_PERCENT = 100;
+const ResizableSplitPanel = ({
+  leftPanel,
+  rightPanel,
+  defaultLeftWidth = 50,
+  minLeftWidth = 30,
+  minRightWidth = 30
+}) => {
+  const [leftWidth, setLeftWidth] = react.useState(defaultLeftWidth);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const clampWidth = react.useCallback(
+    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
+    [minLeftWidth, minRightWidth]
+  );
+  const handleMouseDown = react.useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleMouseMove = react.useCallback(
+    (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
+      setLeftWidth(clampWidth(pct));
+    },
+    [isDragging, clampWidth]
+  );
+  const handleMouseUp = react.useCallback(() => setIsDragging(false), []);
+  react.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      setLeftWidth((w) => clampWidth(w + constants.KEYBOARD_STEP));
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      setLeftWidth((w) => clampWidth(w - constants.KEYBOARD_STEP));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResizableSplitPanel_module.default.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ResizableSplitPanel_module.default.divider,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDown,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-valuenow": Math.round(leftWidth),
+        "aria-label": "Resize panels",
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.dividerHandle, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
+  ] });
+};
+exports.ResizableSplitPanel = ResizableSplitPanel;
 //# sourceMappingURL=index31.cjs.map

package/dist/index31.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index31.cjs","sources":["../src/layouts/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { SettingsLayoutProps } from './SettingsLayout.types';\nimport styles from './SettingsLayout.module.css';\n\nexport const SettingsLayout = ({\n  sidebar,\n  children,\n  title,\n  maxWidth = '48rem',\n  sidebarCollapsed = false,\n  className,\n}: SettingsLayoutProps) => (\n  <div className={clsx(styles.root, className)}>\n    {sidebar && (\n      <aside className={clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed })}>\n        {sidebar}\n      </aside>\n    )}\n    <main className={styles.main}>\n      <div className={styles.content} style={{ maxWidth }}>\n        {title && <h1 className={styles.title}>{title}</h1>}\n        {children}\n      </div>\n    </main>\n  </div>\n);\n"],"names":["clsx","styles","jsx","jsxs"],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB;AACF,sCACG,OAAA,EAAI,WAAWA,KAAAA,KAAKC,sBAAAA,QAAO,MAAM,SAAS,GACxC,UAAA;AAAA,EAAA,WACCC,2BAAAA,IAAC,SAAA,EAAM,WAAWF,KAAAA,KAAKC,sBAAAA,QAAO,SAAS,EAAE,CAACA,sBAAAA,QAAO,gBAAgB,GAAG,iBAAA,CAAkB,GACnF,UAAA,SACH;AAAA,EAEFC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,sBAAAA,QAAO,MACtB,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,sBAAAA,QAAO,SAAS,OAAO,EAAE,YACtC,UAAA;AAAA,IAAA,SAASC,2BAAAA,IAAC,MAAA,EAAG,WAAWD,sBAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,IAC7C;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAAA,EAAA,CACF;;"}
+{"version":3,"file":"index31.cjs","sources":["../src/composites/ResizableSplitPanel/ResizableSplitPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { KEYBOARD_STEP } from '../../constants';\nimport styles from './ResizableSplitPanel.module.css';\n\nexport interface ResizableSplitPanelProps {\n  /** Content for the left panel. */\n  leftPanel: ReactNode;\n  /** Content for the right panel. */\n  rightPanel: ReactNode;\n  /** Default left panel width as a percentage (0-100). */\n  defaultLeftWidth?: number;\n  /** Minimum left panel width as a percentage. */\n  minLeftWidth?: number;\n  /** Minimum right panel width as a percentage. */\n  minRightWidth?: number;\n}\n\nconst FULL_PERCENT = 100;\n\nexport const ResizableSplitPanel = ({\n  leftPanel,\n  rightPanel,\n  defaultLeftWidth = 50,\n  minLeftWidth = 30,\n  minRightWidth = 30,\n}: ResizableSplitPanelProps) => {\n  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const clampWidth = useCallback(\n    (w: number) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),\n    [minLeftWidth, minRightWidth],\n  );\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * FULL_PERCENT;\n      setLeftWidth(clampWidth(pct));\n    },\n    [isDragging, clampWidth],\n  );\n\n  const handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, [isDragging, handleMouseMove, handleMouseUp]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));\n    }\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <div className={styles.left} style={{ width: `${leftWidth}%` }}>\n        {leftPanel}\n      </div>\n      <div\n        className={styles.divider}\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-valuenow={Math.round(leftWidth)}\n        aria-label=\"Resize panels\"\n        tabIndex={0}\n      >\n        <div className={styles.dividerHandle}>\n          <svg width={4} height={24} viewBox=\"0 0 4 24\" fill=\"none\">\n            <circle cx={2} cy={6} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={12} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={18} r={1.5} fill=\"currentColor\" />\n          </svg>\n        </div>\n      </div>\n      <div className={styles.right} style={{ width: `${FULL_PERCENT - leftWidth}%` }}>\n        {rightPanel}\n      </div>\n    </div>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","KEYBOARD_STEP","styles","jsx","jsxs"],"mappings":"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"}

package/dist/index31.js

@@ -1,21 +1,82 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "./index38.js";
-import styles from "./index66.js";
-const SettingsLayout = ({
-  sidebar,
-  children,
-  title,
-  maxWidth = "48rem",
-  sidebarCollapsed = false,
-  className
-}) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-  sidebar && /* @__PURE__ */ jsx("aside", { className: clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed }), children: sidebar }),
-  /* @__PURE__ */ jsx("main", { className: styles.main, children: /* @__PURE__ */ jsxs("div", { className: styles.content, style: { maxWidth }, children: [
-    title && /* @__PURE__ */ jsx("h1", { className: styles.title, children: title }),
-    children
-  ] }) })
-] });
+import { useState, useRef, useCallback, useEffect } from "react";
+import { KEYBOARD_STEP } from "./index51.js";
+import styles from "./index59.js";
+const FULL_PERCENT = 100;
+const ResizableSplitPanel = ({
+  leftPanel,
+  rightPanel,
+  defaultLeftWidth = 50,
+  minLeftWidth = 30,
+  minRightWidth = 30
+}) => {
+  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef(null);
+  const clampWidth = useCallback(
+    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
+    [minLeftWidth, minRightWidth]
+  );
+  const handleMouseDown = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
+      setLeftWidth(clampWidth(pct));
+    },
+    [isDragging, clampWidth]
+  );
+  const handleMouseUp = useCallback(() => setIsDragging(false), []);
+  useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.divider,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDown,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-valuenow": Math.round(leftWidth),
+        "aria-label": "Resize panels",
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsx("div", { className: styles.dividerHandle, children: /* @__PURE__ */ jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
+          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
+          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
+          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
+  ] });
+};
 export {
-  SettingsLayout
+  ResizableSplitPanel
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/layouts/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { SettingsLayoutProps } from './SettingsLayout.types';\nimport styles from './SettingsLayout.module.css';\n\nexport const SettingsLayout = ({\n  sidebar,\n  children,\n  title,\n  maxWidth = '48rem',\n  sidebarCollapsed = false,\n  className,\n}: SettingsLayoutProps) => (\n  <div className={clsx(styles.root, className)}>\n    {sidebar && (\n      <aside className={clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed })}>\n        {sidebar}\n      </aside>\n    )}\n    <main className={styles.main}>\n      <div className={styles.content} style={{ maxWidth }}>\n        {title && <h1 className={styles.title}>{title}</h1>}\n        {children}\n      </div>\n    </main>\n  </div>\n);\n"],"names":[],"mappings":";;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB;AACF,2BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACxC,UAAA;AAAA,EAAA,WACC,oBAAC,SAAA,EAAM,WAAW,KAAK,OAAO,SAAS,EAAE,CAAC,OAAO,gBAAgB,GAAG,iBAAA,CAAkB,GACnF,UAAA,SACH;AAAA,EAEF,oBAAC,QAAA,EAAK,WAAW,OAAO,MACtB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,OAAO,EAAE,YACtC,UAAA;AAAA,IAAA,SAAS,oBAAC,MAAA,EAAG,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,IAC7C;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAAA,EAAA,CACF;"}
+{"version":3,"file":"index31.js","sources":["../src/composites/ResizableSplitPanel/ResizableSplitPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { KEYBOARD_STEP } from '../../constants';\nimport styles from './ResizableSplitPanel.module.css';\n\nexport interface ResizableSplitPanelProps {\n  /** Content for the left panel. */\n  leftPanel: ReactNode;\n  /** Content for the right panel. */\n  rightPanel: ReactNode;\n  /** Default left panel width as a percentage (0-100). */\n  defaultLeftWidth?: number;\n  /** Minimum left panel width as a percentage. */\n  minLeftWidth?: number;\n  /** Minimum right panel width as a percentage. */\n  minRightWidth?: number;\n}\n\nconst FULL_PERCENT = 100;\n\nexport const ResizableSplitPanel = ({\n  leftPanel,\n  rightPanel,\n  defaultLeftWidth = 50,\n  minLeftWidth = 30,\n  minRightWidth = 30,\n}: ResizableSplitPanelProps) => {\n  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const clampWidth = useCallback(\n    (w: number) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),\n    [minLeftWidth, minRightWidth],\n  );\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * FULL_PERCENT;\n      setLeftWidth(clampWidth(pct));\n    },\n    [isDragging, clampWidth],\n  );\n\n  const handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, [isDragging, handleMouseMove, handleMouseUp]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));\n    }\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <div className={styles.left} style={{ width: `${leftWidth}%` }}>\n        {leftPanel}\n      </div>\n      <div\n        className={styles.divider}\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-valuenow={Math.round(leftWidth)}\n        aria-label=\"Resize panels\"\n        tabIndex={0}\n      >\n        <div className={styles.dividerHandle}>\n          <svg width={4} height={24} viewBox=\"0 0 4 24\" fill=\"none\">\n            <circle cx={2} cy={6} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={12} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={18} r={1.5} fill=\"currentColor\" />\n          </svg>\n        </div>\n      </div>\n      <div className={styles.right} style={{ width: `${FULL_PERCENT - leftWidth}%` }}>\n        {rightPanel}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAiBA,MAAM,eAAe;AAEd,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,gBAAgB;AAClB,MAAgC;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,gBAAgB;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc,KAAK,IAAI,cAAc,KAAK,IAAI,eAAe,eAAe,CAAC,CAAC;AAAA,IAC/E,CAAC,cAAc,aAAa;AAAA,EAAA;AAG9B,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAA;AACF,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAkB;AACjB,UAAI,CAAC,cAAc,CAAC,aAAa,QAAS;AAC1C,YAAM,OAAO,aAAa,QAAQ,sBAAA;AAClC,YAAM,OAAQ,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAS;AACrD,mBAAa,WAAW,GAAG,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,YAAY,UAAU;AAAA,EAAA;AAGzB,QAAM,gBAAgB,YAAY,MAAM,cAAc,KAAK,GAAG,CAAA,CAAE;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AACjB,aAAS,iBAAiB,aAAa,eAAe;AACtD,aAAS,iBAAiB,WAAW,aAAa;AAClD,aAAS,KAAK,MAAM,SAAS;AAC7B,aAAS,KAAK,MAAM,aAAa;AACjC,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,aAAa;AACrD,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,aAAa,CAAC;AAE/C,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,EAAE,QAAQ,cAAc;AAC1B,QAAE,eAAA;AACF,mBAAa,CAAC,MAAM,WAAW,IAAI,aAAa,CAAC;AAAA,IACnD,WAAW,EAAE,QAAQ,aAAa;AAChC,QAAE,eAAA;AACF,mBAAa,CAAC,MAAM,WAAW,IAAI,aAAa,CAAC;AAAA,IACnD;AAAA,EACF;AAEA,8BACG,OAAA,EAAI,WAAW,OAAO,MAAM,KAAK,cAChC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,MAAM,OAAO,EAAE,OAAO,GAAG,SAAS,IAAA,GACtD,UAAA,UAAA,CACH;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,aAAa;AAAA,QACb,WAAW;AAAA,QACX,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,iBAAe,KAAK,MAAM,SAAS;AAAA,QACnC,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,eACrB,UAAA,qBAAC,OAAA,EAAI,OAAO,GAAG,QAAQ,IAAI,SAAQ,YAAW,MAAK,QACjD,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAO,IAAI,GAAG,IAAI,GAAG,GAAG,KAAK,MAAK,eAAA,CAAe;AAAA,UAClD,oBAAC,YAAO,IAAI,GAAG,IAAI,IAAI,GAAG,KAAK,MAAK,eAAA,CAAe;AAAA,UACnD,oBAAC,YAAO,IAAI,GAAG,IAAI,IAAI,GAAG,KAAK,MAAK,eAAA,CAAe;AAAA,QAAA,EAAA,CACrD,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,oBAAC,OAAA,EAAI,WAAW,OAAO,OAAO,OAAO,EAAE,OAAO,GAAG,eAAe,SAAS,IAAA,GACtE,UAAA,WAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/index32.cjs

@@ -2,80 +2,62 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index38.cjs");
-const constants = require("./index45.cjs");
-const Sidebar_module = require("./index48.cjs");
-const SidebarContext = react.createContext({ isCollapsed: false });
-const useSidebarContext = () => react.useContext(SidebarContext);
-const SidebarSection = ({
-  title,
-  children,
-  collapsible = false,
-  defaultCollapsed = false
-}) => {
-  const { isCollapsed: sidebarCollapsed } = useSidebarContext();
-  const [sectionCollapsed, setSectionCollapsed] = react.useState(defaultCollapsed);
-  const titleId = react.useId();
-  const isOpen = !collapsible || !sectionCollapsed;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.section, role: "group", "aria-labelledby": title ? titleId : void 0, children: [
-    title && !sidebarCollapsed && (collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        id: titleId,
-        type: "button",
-        className: Sidebar_module.default.sectionToggle,
-        onClick: () => setSectionCollapsed((prev) => !prev),
-        "aria-expanded": isOpen,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sidebar_module.default.sectionTitle, children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(Sidebar_module.default.sectionChevron, { [Sidebar_module.default.sectionChevronOpen]: isOpen }), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-        ]
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { id: titleId, className: Sidebar_module.default.sectionTitle, children: title })),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.sectionItems, children })
-  ] });
+const clsx = require("./index47.cjs");
+const Row_module = require("./index75.cjs");
+const gapClass = {
+  none: Row_module.default.gapNone,
+  "2xs": Row_module.default.gap2xs,
+  xs: Row_module.default.gapXs,
+  sm: Row_module.default.gapSm,
+  md: Row_module.default.gapMd,
+  lg: Row_module.default.gapLg,
+  xl: Row_module.default.gapXl,
+  "2xl": Row_module.default.gap2xl,
+  "3xl": Row_module.default.gap3xl
 };
-SidebarSection.displayName = "Sidebar.Section";
-const SidebarRoot = ({
-  isCollapsed = false,
-  onToggleCollapse,
-  width = constants.SIDEBAR.WIDTH,
-  collapsedWidth = constants.SIDEBAR.COLLAPSED_WIDTH,
-  header,
-  footer,
-  children,
-  className
-}) => {
-  const currentWidth = isCollapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "nav",
+const alignClass = {
+  start: Row_module.default.alignStart,
+  center: Row_module.default.alignCenter,
+  end: Row_module.default.alignEnd,
+  stretch: Row_module.default.alignStretch,
+  baseline: Row_module.default.alignBaseline
+};
+const justifyClass = {
+  start: Row_module.default.justifyStart,
+  center: Row_module.default.justifyCenter,
+  end: Row_module.default.justifyEnd,
+  between: Row_module.default.justifyBetween,
+  around: Row_module.default.justifyAround,
+  evenly: Row_module.default.justifyEvenly
+};
+const Row = react.forwardRef(
+  ({
+    gap = "md",
+    align = "stretch",
+    justify = "start",
+    wrap = true,
+    direction = "row",
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      className: clsx.clsx(Sidebar_module.default.root, { [Sidebar_module.default.collapsed]: isCollapsed }, className),
-      style: { width: `${currentWidth}px` },
-      "aria-label": "Main navigation",
-      children: [
-        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.header, children: header }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.body, children }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.footer, children: footer }),
-        onToggleCollapse && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: Sidebar_module.default.toggle,
-            onClick: onToggleCollapse,
-            "aria-expanded": !isCollapsed,
-            "aria-label": "Toggle sidebar",
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })
-          }
-        )
-      ]
+      ref,
+      className: clsx.clsx(
+        Row_module.default.root,
+        gapClass[gap],
+        alignClass[align],
+        justifyClass[justify],
+        wrap ? Row_module.default.wrap : Row_module.default.nowrap,
+        direction === "column" ? Row_module.default.dirColumn : Row_module.default.dirRow,
+        className
+      ),
+      ...props,
+      children
     }
-  ) });
-};
-SidebarRoot.displayName = "Sidebar";
-const Sidebar = Object.assign(SidebarRoot, {
-  Section: SidebarSection
-});
-exports.Sidebar = Sidebar;
-exports.useSidebarContext = useSidebarContext;
+  )
+);
+Row.displayName = "Row";
+exports.Row = Row;
 //# sourceMappingURL=index32.cjs.map

package/dist/index32.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index32.cjs","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar.Section                                                    */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n  title,\n  children,\n  collapsible = false,\n  defaultCollapsed = false,\n}: SidebarSectionProps) => {\n  const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n  const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n  const titleId = useId();\n\n  const isOpen = !collapsible || !sectionCollapsed;\n\n  return (\n    <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n      {title && !sidebarCollapsed && (\n        collapsible ? (\n          <button\n            id={titleId}\n            type=\"button\"\n            className={styles.sectionToggle}\n            onClick={() => setSectionCollapsed((prev) => !prev)}\n            aria-expanded={isOpen}\n          >\n            <span className={styles.sectionTitle}>{title}</span>\n            <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n              <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </span>\n          </button>\n        ) : (\n          <span id={titleId} className={styles.sectionTitle}>\n            {title}\n          </span>\n        )\n      )}\n      {isOpen && <div className={styles.sectionItems}>{children}</div>}\n    </div>\n  );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar                                                            */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n  isCollapsed = false,\n  onToggleCollapse,\n  width = SIDEBAR.WIDTH,\n  collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n  header,\n  footer,\n  children,\n  className,\n}: SidebarProps) => {\n  const currentWidth = isCollapsed ? collapsedWidth : width;\n\n  return (\n    <SidebarContext.Provider value={{ isCollapsed }}>\n      <nav\n        className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n        style={{ width: `${currentWidth}px` }}\n        aria-label=\"Main navigation\"\n      >\n        {header && <div className={styles.header}>{header}</div>}\n\n        <div className={styles.body}>{children}</div>\n\n        {footer && <div className={styles.footer}>{footer}</div>}\n\n        {onToggleCollapse && (\n          <button\n            type=\"button\"\n            className={styles.toggle}\n            onClick={onToggleCollapse}\n            aria-expanded={!isCollapsed}\n            aria-label=\"Toggle sidebar\"\n          >\n            <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              {isCollapsed ? (\n                <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              ) : (\n                <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              )}\n            </svg>\n          </button>\n        )}\n      </nav>\n    </SidebarContext.Provider>\n  );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Section: SidebarSection,\n});\n"],"names":["createContext","useContext","useState","useId","jsxs","styles","jsx","clsx","SIDEBAR"],"mappings":"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"}
+{"version":3,"file":"index32.cjs","sources":["../src/primitives/Row/Row.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RowProps } from './Row.types';\nimport styles from './Row.module.css';\n\nconst gapClass: Record<string, string> = {\n  none: styles.gapNone,\n  '2xs': styles.gap2xs,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n  '2xl': styles.gap2xl,\n  '3xl': styles.gap3xl,\n};\n\nconst alignClass: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst justifyClass: Record<string, string> = {\n  start: styles.justifyStart,\n  center: styles.justifyCenter,\n  end: styles.justifyEnd,\n  between: styles.justifyBetween,\n  around: styles.justifyAround,\n  evenly: styles.justifyEvenly,\n};\n\nexport const Row = forwardRef<HTMLDivElement, RowProps>(\n  (\n    {\n      gap = 'md',\n      align = 'stretch',\n      justify = 'start',\n      wrap = true,\n      direction = 'row',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={clsx(\n        styles.root,\n        gapClass[gap],\n        alignClass[align],\n        justifyClass[justify],\n        wrap ? styles.wrap : styles.nowrap,\n        direction === 'column' ? styles.dirColumn : styles.dirRow,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\n\nRow.displayName = 'Row';\n"],"names":["styles","forwardRef","jsx","clsx"],"mappings":";;;;;;AAKA,MAAM,WAAmC;AAAA,EACvC,MAAMA,WAAAA,QAAO;AAAA,EACb,OAAOA,WAAAA,QAAO;AAAA,EACd,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,OAAOA,WAAAA,QAAO;AAAA,EACd,OAAOA,WAAAA,QAAO;AAChB;AAEA,MAAM,aAAqC;AAAA,EACzC,OAAOA,WAAAA,QAAO;AAAA,EACd,QAAQA,WAAAA,QAAO;AAAA,EACf,KAAKA,WAAAA,QAAO;AAAA,EACZ,SAASA,WAAAA,QAAO;AAAA,EAChB,UAAUA,WAAAA,QAAO;AACnB;AAEA,MAAM,eAAuC;AAAA,EAC3C,OAAOA,WAAAA,QAAO;AAAA,EACd,QAAQA,WAAAA,QAAO;AAAA,EACf,KAAKA,WAAAA,QAAO;AAAA,EACZ,SAASA,WAAAA,QAAO;AAAA,EAChB,QAAQA,WAAAA,QAAO;AAAA,EACf,QAAQA,WAAAA,QAAO;AACjB;AAEO,MAAM,MAAMC,MAAAA;AAAAA,EACjB,CACE;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,KAAAA;AAAAA,QACTH,WAAAA,QAAO;AAAA,QACP,SAAS,GAAG;AAAA,QACZ,WAAW,KAAK;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAOA,WAAAA,QAAO,OAAOA,WAAAA,QAAO;AAAA,QAC5B,cAAc,WAAWA,WAAAA,QAAO,YAAYA,WAAAA,QAAO;AAAA,QACnD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,IAAI,cAAc;;"}

package/dist/index32.js

@@ -1,81 +1,63 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useState, useId, createContext } from "react";
-import { clsx } from "./index38.js";
-import { SIDEBAR } from "./index45.js";
-import styles from "./index48.js";
-const SidebarContext = createContext({ isCollapsed: false });
-const useSidebarContext = () => useContext(SidebarContext);
-const SidebarSection = ({
-  title,
-  children,
-  collapsible = false,
-  defaultCollapsed = false
-}) => {
-  const { isCollapsed: sidebarCollapsed } = useSidebarContext();
-  const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);
-  const titleId = useId();
-  const isOpen = !collapsible || !sectionCollapsed;
-  return /* @__PURE__ */ jsxs("div", { className: styles.section, role: "group", "aria-labelledby": title ? titleId : void 0, children: [
-    title && !sidebarCollapsed && (collapsible ? /* @__PURE__ */ jsxs(
-      "button",
-      {
-        id: titleId,
-        type: "button",
-        className: styles.sectionToggle,
-        onClick: () => setSectionCollapsed((prev) => !prev),
-        "aria-expanded": isOpen,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: styles.sectionTitle, children: title }),
-          /* @__PURE__ */ jsx("span", { className: clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen }), children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-        ]
-      }
-    ) : /* @__PURE__ */ jsx("span", { id: titleId, className: styles.sectionTitle, children: title })),
-    isOpen && /* @__PURE__ */ jsx("div", { className: styles.sectionItems, children })
-  ] });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "./index47.js";
+import styles from "./index75.js";
+const gapClass = {
+  none: styles.gapNone,
+  "2xs": styles.gap2xs,
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+  "2xl": styles.gap2xl,
+  "3xl": styles.gap3xl
 };
-SidebarSection.displayName = "Sidebar.Section";
-const SidebarRoot = ({
-  isCollapsed = false,
-  onToggleCollapse,
-  width = SIDEBAR.WIDTH,
-  collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,
-  header,
-  footer,
-  children,
-  className
-}) => {
-  const currentWidth = isCollapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxs(
-    "nav",
+const alignClass = {
+  start: styles.alignStart,
+  center: styles.alignCenter,
+  end: styles.alignEnd,
+  stretch: styles.alignStretch,
+  baseline: styles.alignBaseline
+};
+const justifyClass = {
+  start: styles.justifyStart,
+  center: styles.justifyCenter,
+  end: styles.justifyEnd,
+  between: styles.justifyBetween,
+  around: styles.justifyAround,
+  evenly: styles.justifyEvenly
+};
+const Row = forwardRef(
+  ({
+    gap = "md",
+    align = "stretch",
+    justify = "start",
+    wrap = true,
+    direction = "row",
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
     {
-      className: clsx(styles.root, { [styles.collapsed]: isCollapsed }, className),
-      style: { width: `${currentWidth}px` },
-      "aria-label": "Main navigation",
-      children: [
-        header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
-        /* @__PURE__ */ jsx("div", { className: styles.body, children }),
-        footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer }),
-        onToggleCollapse && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: styles.toggle,
-            onClick: onToggleCollapse,
-            "aria-expanded": !isCollapsed,
-            "aria-label": "Toggle sidebar",
-            children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: isCollapsed ? /* @__PURE__ */ jsx("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })
-          }
-        )
-      ]
+      ref,
+      className: clsx(
+        styles.root,
+        gapClass[gap],
+        alignClass[align],
+        justifyClass[justify],
+        wrap ? styles.wrap : styles.nowrap,
+        direction === "column" ? styles.dirColumn : styles.dirRow,
+        className
+      ),
+      ...props,
+      children
     }
-  ) });
-};
-SidebarRoot.displayName = "Sidebar";
-const Sidebar = Object.assign(SidebarRoot, {
-  Section: SidebarSection
-});
+  )
+);
+Row.displayName = "Row";
 export {
-  Sidebar,
-  useSidebarContext
+  Row
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar.Section                                                    */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n  title,\n  children,\n  collapsible = false,\n  defaultCollapsed = false,\n}: SidebarSectionProps) => {\n  const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n  const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n  const titleId = useId();\n\n  const isOpen = !collapsible || !sectionCollapsed;\n\n  return (\n    <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n      {title && !sidebarCollapsed && (\n        collapsible ? (\n          <button\n            id={titleId}\n            type=\"button\"\n            className={styles.sectionToggle}\n            onClick={() => setSectionCollapsed((prev) => !prev)}\n            aria-expanded={isOpen}\n          >\n            <span className={styles.sectionTitle}>{title}</span>\n            <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n              <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </span>\n          </button>\n        ) : (\n          <span id={titleId} className={styles.sectionTitle}>\n            {title}\n          </span>\n        )\n      )}\n      {isOpen && <div className={styles.sectionItems}>{children}</div>}\n    </div>\n  );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar                                                            */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n  isCollapsed = false,\n  onToggleCollapse,\n  width = SIDEBAR.WIDTH,\n  collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n  header,\n  footer,\n  children,\n  className,\n}: SidebarProps) => {\n  const currentWidth = isCollapsed ? collapsedWidth : width;\n\n  return (\n    <SidebarContext.Provider value={{ isCollapsed }}>\n      <nav\n        className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n        style={{ width: `${currentWidth}px` }}\n        aria-label=\"Main navigation\"\n      >\n        {header && <div className={styles.header}>{header}</div>}\n\n        <div className={styles.body}>{children}</div>\n\n        {footer && <div className={styles.footer}>{footer}</div>}\n\n        {onToggleCollapse && (\n          <button\n            type=\"button\"\n            className={styles.toggle}\n            onClick={onToggleCollapse}\n            aria-expanded={!isCollapsed}\n            aria-label=\"Toggle sidebar\"\n          >\n            <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              {isCollapsed ? (\n                <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              ) : (\n                <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              )}\n            </svg>\n          </button>\n        )}\n      </nav>\n    </SidebarContext.Provider>\n  );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Section: SidebarSection,\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index32.js","sources":["../src/primitives/Row/Row.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RowProps } from './Row.types';\nimport styles from './Row.module.css';\n\nconst gapClass: Record<string, string> = {\n  none: styles.gapNone,\n  '2xs': styles.gap2xs,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n  '2xl': styles.gap2xl,\n  '3xl': styles.gap3xl,\n};\n\nconst alignClass: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst justifyClass: Record<string, string> = {\n  start: styles.justifyStart,\n  center: styles.justifyCenter,\n  end: styles.justifyEnd,\n  between: styles.justifyBetween,\n  around: styles.justifyAround,\n  evenly: styles.justifyEvenly,\n};\n\nexport const Row = forwardRef<HTMLDivElement, RowProps>(\n  (\n    {\n      gap = 'md',\n      align = 'stretch',\n      justify = 'start',\n      wrap = true,\n      direction = 'row',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={clsx(\n        styles.root,\n        gapClass[gap],\n        alignClass[align],\n        justifyClass[justify],\n        wrap ? styles.wrap : styles.nowrap,\n        direction === 'column' ? styles.dirColumn : styles.dirRow,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\n\nRow.displayName = 'Row';\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAmC;AAAA,EACvC,MAAM,OAAO;AAAA,EACb,OAAO,OAAO;AAAA,EACd,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,OAAO,OAAO;AAAA,EACd,OAAO,OAAO;AAChB;AAEA,MAAM,aAAqC;AAAA,EACzC,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAAA,EACf,KAAK,OAAO;AAAA,EACZ,SAAS,OAAO;AAAA,EAChB,UAAU,OAAO;AACnB;AAEA,MAAM,eAAuC;AAAA,EAC3C,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAAA,EACf,KAAK,OAAO;AAAA,EACZ,SAAS,OAAO;AAAA,EAChB,QAAQ,OAAO;AAAA,EACf,QAAQ,OAAO;AACjB;AAEO,MAAM,MAAM;AAAA,EACjB,CACE;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,SAAS,GAAG;AAAA,QACZ,WAAW,KAAK;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAO,OAAO,OAAO,OAAO;AAAA,QAC5B,cAAc,WAAW,OAAO,YAAY,OAAO;AAAA,QACnD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,IAAI,cAAc;"}