@bouku/core 0.0.2 → 0.0.3

package/dist/assets/icons/chevron-up.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
+    <path 
+        d="M297.4 169.4C309.9 156.9 330.2 156.9 342.7 169.4L534.7 361.4C547.2 373.9 547.2 394.2 534.7 406.7C522.2 419.2 501.9 419.2 489.4 406.7L320 237.3L150.6 406.6C138.1 419.1 117.8 419.1 105.3 406.6C92.8 394.1 92.8 373.8 105.3 361.3L297.3 169.3z" 
+        fill="currentColor" 
+    />
+</svg>

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

@@ -0,0 +1,6 @@
+export declare function Accordion({ items }: {
+    items: {
+        label: string;
+        content: React.ReactNode;
+    }[];
+}): import("react").JSX.Element;

package/dist/components/accordion/index.js

@@ -0,0 +1,12 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const flex_1 = require("../layout/flex");
+const tab_1 = require("./tab");
+function Accordion({ items }) {
+    const [activeItem, setActiveItem] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: "gap-5 overflow-y-auto scrollbar-none", children: items.map(({ label, content }, i) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-5", children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => setActiveItem(i === activeItem ? null : i), children: (0, jsx_runtime_1.jsx)(tab_1.SectionHeader, { isActive: i === activeItem, label: label }) }), i === activeItem && ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "w-full", center: true, children: content }))] }, i))) }));
+}

package/dist/components/accordion/tab.d.ts

@@ -0,0 +1,4 @@
+export declare function SectionHeader({ isActive, label }: {
+    isActive: boolean;
+    label: string;
+}): import("react").JSX.Element;

package/dist/components/accordion/tab.js

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeader = SectionHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chevron_up_svg_1 = __importDefault(require("@/assets/icons/chevron-up.svg"));
+const tailwind_variants_1 = require("tailwind-variants");
+function SectionHeader({ isActive, label }) {
+    const s = getStyles({ isActive });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: s.container(), children: [(0, jsx_runtime_1.jsx)("span", { className: s.label(), children: label }), (0, jsx_runtime_1.jsx)(chevron_up_svg_1.default, { className: s.chevron() })] }));
+}
+const getStyles = (0, tailwind_variants_1.tv)({
+    slots: {
+        container: "flex justify-between items-center gap-8 px-3 py-2 border rounded duration-200 cursor-pointer",
+        label: "font-bold",
+        chevron: "duration-200"
+    },
+    variants: {
+        isActive: {
+            true: {
+                container: "bg-surface-light border-border-light",
+                label: "text-primary",
+                chevron: "text-accent rotate-180"
+            },
+            false: {
+                container: "bg-surface hover:bg-surface-light border-border",
+                label: "text-primary-dark",
+                chevron: "text-primary-dark"
+            }
+        }
+    }
+});

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./accordion";
 export { default as Separator } from "./layout/separator";
 export { default as FadeBox } from "./layout/fade";
 export { default as AbsoluteBox } from "./layout/absolute";

package/dist/components/index.js

@@ -18,6 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = exports.Section = exports.Pagination = exports.AbsoluteBox = exports.FadeBox = exports.Separator = void 0;
+__exportStar(require("./accordion"), exports);
 var separator_1 = require("./layout/separator");
 Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(separator_1).default; } });
 var fade_1 = require("./layout/fade");

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./components";
 export * from "./utils";
-export declare function mountApp(app: React.ReactNode): void;

package/dist/index.js

@@ -14,12 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mountApp = mountApp;
-const client_1 = require("react-dom/client");
 __exportStar(require("./components"), exports);
 __exportStar(require("./utils"), exports);
-function mountApp(app) {
-    const element = document.getElementById("root");
-    const root = (0, client_1.createRoot)(element);
-    root.render(app);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",