@bouko/react 1.5.8 → 1.6.0

package/dist/components/animate/configs.d.ts

@@ -0,0 +1,136 @@
+export declare const animations: {
+    fadeUp: {
+        initial: {
+            opacity: number;
+            y: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            transition: {
+                duration: number;
+            };
+        };
+    };
+    fadeInAndOut: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+        };
+        exit: {
+            opacity: number;
+        };
+    };
+    fadeUpAndOut: {
+        initial: {
+            opacity: number;
+            y: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+        };
+        exit: {
+            opacity: number;
+            y: number;
+        };
+    };
+    fadeUpAndOutSlow: {
+        initial: {
+            opacity: number;
+            y: string;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        exit: {
+            opacity: number;
+            y: string;
+        };
+    };
+    fadeLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+        };
+        exit: {
+            x: number;
+            opacity: number;
+        };
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    growUpAndOut: {
+        initial: {
+            opacity: number;
+            height: number;
+        };
+        animate: {
+            opacity: number;
+            height: string;
+        };
+        exit: {
+            opacity: number;
+            height: number;
+        };
+    };
+    fadeStagger: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: {
+                staggerChildren: number;
+            };
+        };
+    };
+    fadeList: {
+        hidden: {
+            opacity: number;
+            x: number;
+            y: number;
+        };
+        visible: {
+            opacity: number;
+            x: number;
+            y: number;
+            transition: {
+                type: string;
+                stiffness: number;
+                damping: number;
+            };
+        };
+    };
+    popUp: {
+        initial: {
+            opacity: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            scale: number;
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+        };
+        transition: {
+            duration: number;
+            ease: number[];
+        };
+    };
+};

package/dist/components/animate/configs.js

@@ -0,0 +1,62 @@
+export const animations = {
+    "fadeUp": {
+        "initial": { "opacity": 0, "y": 30 },
+        "animate": {
+            "opacity": 1,
+            "y": 0,
+            "transition": { "duration": 0.3 }
+        }
+    },
+    "fadeInAndOut": {
+        "initial": { "opacity": 0 },
+        "animate": { "opacity": 1 },
+        "exit": { "opacity": 0 }
+    },
+    "fadeUpAndOut": {
+        "initial": { "opacity": 0, "y": 10 },
+        "animate": { "opacity": 1, "y": 0 },
+        "exit": { "opacity": 1, "y": -10 }
+    },
+    "fadeUpAndOutSlow": {
+        "initial": { "opacity": 0, "y": "-100%" },
+        "animate": { "opacity": 1, "y": 0,
+            "transition": { "duration": 0.2, "ease": "easeInOut" }
+        },
+        "exit": { "opacity": 0, "y": "100%" }
+    },
+    "fadeLeft": {
+        "initial": { "x": -50, "opacity": 0 },
+        "animate": { "x": 0, "opacity": 1 },
+        "exit": { "x": 50, "opacity": 0 },
+        "transition": { "duration": 0.4, "ease": "easeOut" }
+    },
+    "growUpAndOut": {
+        "initial": { "opacity": 0, "height": 0 },
+        "animate": { "opacity": 1, "height": "auto" },
+        "exit": { "opacity": 0, "height": 0 }
+    },
+    "fadeStagger": {
+        "initial": { "opacity": 0 },
+        "animate": {
+            "opacity": 1,
+            "transition": { "staggerChildren": 0.2 }
+        }
+    },
+    "fadeList": {
+        "hidden": { "opacity": 0, "x": -10, "y": 5 },
+        "visible": {
+            "opacity": 1, "x": 0, "y": 0,
+            "transition": {
+                "type": "spring",
+                "stiffness": 350,
+                "damping": 25
+            }
+        }
+    },
+    "popUp": {
+        "initial": { "opacity": 0, "scale": 0.9 },
+        "animate": { "opacity": 1, "scale": 1 },
+        "exit": { "opacity": 0, "scale": 0.9 },
+        "transition": { "duration": 0.2, "ease": [0.23, 1, 0.32, 1] }
+    }
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { animations } from "./configs";
+type Props = {
+    style?: string;
+    variant?: keyof typeof animations;
+    inherit?: boolean;
+    layout?: boolean;
+    ref?: React.RefObject<HTMLDivElement | null>;
+    children?: React.ReactNode;
+};
+export declare function Animation({ style, variant, inherit, layout, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/animate/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { animations } from "./configs";
+export function Animation({ style, variant = "fadeInAndOut", inherit, layout, children }) {
+    return (_jsx(motion.div, { className: style, variants: animations[variant], initial: inherit ? undefined : "initial", animate: inherit ? undefined : "animate", exit: inherit ? undefined : "exit", layout: layout, children: children }));
+}

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

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/components/list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BulletList } from "./variants/bullet";
+export { default as NumberList } from "./variants/number";

package/dist/components/list/index.js

@@ -0,0 +1,2 @@
+export { default as BulletList } from "./variants/bullet";
+export { default as NumberList } from "./variants/number";

package/dist/components/list/item.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+interface Props {
+    marker: ReactNode;
+    content: ReactNode;
+    index: number;
+    centerMarker?: boolean;
+}
+export default function Item({ marker, content, centerMarker, index }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/list/item.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Animation } from "../animate";
+import { cn } from "@bouko/style";
+;
+export default function Item({ marker, content, centerMarker, index }) {
+    return (_jsxs(Animation, { style: cn("flex items-start text-sm", centerMarker && "items-center"), variant: "fadeList", children: [marker, content] }, index));
+}

package/dist/components/list/variants/bullet.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+interface Props {
+    style?: string;
+    title?: string;
+    items: ReactNode[];
+    centerMarker?: boolean;
+}
+export default function BulletList({ style, title, items, centerMarker }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/list/variants/bullet.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Item from "../item";
+import { Animation } from "../../animate/";
+import { cn } from "@bouko/style";
+;
+export default function BulletList({ style, title, items, centerMarker }) {
+    return (_jsxs(Animation, { style: cn(styles.base, style), variant: "fadeList", children: [!!title && _jsx("span", { className: styles.title, children: title }), _jsx(Animation, { style: cn(styles.base, style, !!title && "ml-2"), variant: "fadeList", children: items.map((x, i) => (_jsx(Item, { marker: _jsx(Marker, {}), content: x, index: i, centerMarker: centerMarker }, i))) })] }, title));
+}
+function Marker() {
+    return (_jsx("span", { className: "mr-3 text-accent", children: "\u2022" }));
+}
+const styles = {
+    base: "flex flex-col gap-1 w-full text-primary-dark",
+    title: "mb-1 text-base text-primary"
+};

package/dist/components/list/variants/number.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+interface Props {
+    style?: string;
+    marker?: string;
+    title?: string;
+    items: ReactNode[];
+    centerMarker?: boolean;
+}
+export default function NumberList({ style, marker, title, items, centerMarker }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/list/variants/number.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Item from "../item";
+import { Animation } from "../../animate";
+import { cn } from "@bouko/style";
+;
+export default function NumberList({ style, marker, title, items, centerMarker }) {
+    return (_jsxs(Animation, { style: cn(styles.base, style), variant: "fadeList", children: [!!title && _jsx("span", { className: styles.title, children: title }), _jsx(Animation, { style: cn(styles.base, style, !!title && "ml-2"), variant: "fadeList", children: items.map((x, i) => (_jsx(Item, { marker: _jsx(Marker, { style: marker, x: i + 1 }), content: x, index: i, centerMarker: centerMarker }, i))) }, "content")] }, "list"));
+}
+function Marker({ style, x }) {
+    return (_jsx("div", { className: cn(styles.marker, style), children: _jsx("span", { className: styles.label, children: x }) }));
+}
+const styles = {
+    base: "flex flex-col gap-6 w-full text-primary-dark",
+    title: "mb-1 text-base text-primary",
+    marker: "flex justify-center items-center mt-1 mr-6 min-w-7 w-7 aspect-square bg-radial-[at_50%_75%] from-accent-light to-accent to-accent-dark to-90% border border-accent-darker rounded-full shadow-glow-soft",
+    label: "font-bold text-background-lighter select-none"
+};

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.6.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",