@bouko/react 1.5.8 → 1.5.9

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Separator } from "./layout/separator";

package/dist/components/index.js

@@ -0,0 +1 @@
+export { default as Separator } from "./layout/separator";

package/dist/components/layout/separator.d.ts

@@ -0,0 +1,3 @@
+export default function Separator({ style }: {
+    style?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/separator.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useContainer, useResize } from "../../hooks";
+import { cn, tv } from "@bouko/style";
+export default function Separator({ style }) {
+    const { container, ref } = useContainer();
+    const [flow, setFlow] = useState();
+    useResize(container, () => {
+        const css = getComputedStyle(container);
+        setFlow(css.flexDirection);
+    });
+    return (_jsx("div", { className: cn(styles({ flow }), style), ref: ref }));
+}
+;
+const styles = tv({
+    base: "bg-border-dark",
+    variants: {
+        flow: {
+            row: "w-px min-w-px h-full",
+            column: "w-full h-px min-h-px"
+        }
+    }
+});

package/dist/hooks/element/container.d.ts

@@ -0,0 +1,4 @@
+export default function useContainer(): {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    container: HTMLElement | null | undefined;
+};

package/dist/hooks/element/container.js

@@ -0,0 +1,7 @@
+"use client";
+import { useRef } from "react";
+export default function useContainer() {
+    const ref = useRef(null);
+    const container = ref.current?.parentElement;
+    return { ref, container };
+}

package/dist/hooks/element/resize.d.ts

@@ -0,0 +1 @@
+export default function useResizeObserver(element: HTMLElement | null | undefined, action: () => void): void;

package/dist/hooks/element/resize.js

@@ -0,0 +1,12 @@
+"use client";
+import { useEffect } from "react";
+export default function useResizeObserver(element, action) {
+    useEffect(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(action);
+        observer.observe(element);
+        action();
+        return () => observer.disconnect();
+    }, [element, action]);
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useContainer } from "./element/container";
+export { default as useResize } from "./element/resize";

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useContainer } from "./element/container";
+export { default as useResize } from "./element/resize";

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as CheckBox } from "./components/checkbox";
 export { default as Heading } from "./components/heading";
 export { default as Badge } from "./components/badge";
 export { default as FadeCarousel } from "./components/fade-carousel";
+export * from "./components";
 export * from "./components/flex";
 export * from "./components/button";
 export * from "./core/types";

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as CheckBox } from "./components/checkbox";
 export { default as Heading } from "./components/heading";
 export { default as Badge } from "./components/badge";
 export { default as FadeCarousel } from "./components/fade-carousel";
+export * from "./components";
 export * from "./components/flex";
 export * from "./components/button";
 export * from "./core/types";

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",