@bouko/react 1.5.9 → 1.6.1

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

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

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/heading.js

@@ -9,6 +9,6 @@ const base = {
     container: "gap-2 items-center",
     subcontainer: "flex grow flex-col",
     badge: "mb-2",
-    title: "flex items-center gap-2 text-lg font-bold",
-    subtitle: "font-semibold text-primary-lighter"
+    title: "flex items-center gap-2 font-bold",
+    subtitle: "text-sm font-semibold text-primary-lighter"
 };

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export type HeadingProps = {
+    styles?: Record<string, string>;
+    container?: string;
+    badge?: string;
+    icon?: ReactNode;
+    title: ReactNode;
+    align?: "left" | "center";
+    subtitle: ReactNode;
+    reverse?: boolean;
+};
+export default function Heading({ styles, container, badge, icon, title, align, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/heading.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RowBox, ColumnBox } from "../flex";
+import { cn } from "@bouko/style";
+import Badge from "../badge";
+export default function Heading({ styles = {}, container, badge, icon, title, align = "left", subtitle, reverse }) {
+    return (_jsxs(RowBox, { style: cn(base.container, styles.container, container), children: [icon, _jsxs(ColumnBox, { style: cn(base.subcontainer, align === "center" && "items-center", reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx("span", { className: cn(base.title, styles.title), children: title }), _jsx("span", { className: cn(base.subtitle, styles.subtitle), children: subtitle })] })] }));
+}
+const base = {
+    container: "gap-2 items-center",
+    subcontainer: "flex grow flex-col",
+    badge: "mb-2",
+    title: "flex items-center gap-2 text-lg font-bold",
+    subtitle: "font-semibold text-primary-lighter"
+};

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

@@ -4,7 +4,6 @@ export { default as Select } from "./components/select";
 export { default as MultipleChoice } from "./components/multiple-choice";
 export { default as Attachment } from "./components/attachment";
 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";

package/dist/index.js

@@ -4,7 +4,6 @@ export { default as Select } from "./components/select";
 export { default as MultipleChoice } from "./components/multiple-choice";
 export { default as Attachment } from "./components/attachment";
 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";

package/package.json

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