@bouko/react 1.9.6 → 1.9.8

package/dist/components/form/footer.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button } from "../button";
-import { RowBox } from "../flex";
+import { RowBox } from "../layout/flex";
 import CheckCircle from "./assets/check-circle.svg";
 import Spinner from "./assets/spinner.svg";
 export default function FormFooter({ data, validator, submit, clear }) {

package/dist/components/form/index.js

@@ -7,7 +7,7 @@ import Spinner from "../../assets/icons/spinner.svg";
 import XCircle from "../../assets/icons/x-circle.svg";
 export * from "./functions";
 export * from "./types";
-import { RowBox } from "../flex";
+import { RowBox } from "../layout/flex";
 import Input from "../input";
 import Select from "../select";
 import TextArea from "../textarea";

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
-export { default as Heading, HeadingProps } from "./layout/heading";
+export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
+export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
+export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/{react/src/components → components}/layout/flex.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { cn, tv } from "@bouko/style";
 /**
  * Flex containers with configurable alignment and styling.
@@ -7,8 +7,16 @@ import { cn, tv } from "@bouko/style";
  * @param {ReactNode} children - Child elements to render inside the row.
  * @param {Props} opts - Variant options for styling.
 **/
-export const RowBox = ({ style, children, ...opts }) => (_jsx("div", { className: cn(row(opts), style), children: children }));
-export const ColumnBox = ({ style, children, ...opts }) => (_jsx("div", { className: cn(column(opts), style), children: children }));
+export const RowBox = ({ style, children, ...opts }) => {
+    if (!children)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { className: cn(row(opts), style), children: children }));
+};
+export const ColumnBox = ({ style, children, ...opts }) => {
+    if (!children)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { className: cn(column(opts), style), children: children }));
+};
 /**
  * Styling variants for flex options.
  *

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

@@ -1,12 +1,24 @@
-import type { ReactNode } from "react";
-export type HeadingProps = {
-    styles?: Record<string, string>;
+import { ReactNode } from "react";
+type Options = {
+    size?: "md" | "lg";
+    align?: "left" | "center";
+};
+type Styles = {
     container?: string;
+    text?: string;
+    title?: string;
+    subtitle?: string;
+};
+type Props = {
+    options?: Options;
+    styles?: Styles;
     badge?: string;
     icon?: ReactNode;
     title: ReactNode;
+    size?: "md" | "lg";
     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;
+export default function Heading({ styles, options, badge, icon, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/layout/heading.js

@@ -1,14 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RowBox, ColumnBox } from "../flex";
-import { cn } from "@bouko/style";
+import { cn, tv } from "@bouko/style";
+import { RowBox, ColumnBox } from "..";
 import Badge from "../text/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 }), subtitle && _jsx("span", { className: cn(base.subtitle, styles.subtitle), children: subtitle })] })] }));
+export default function Heading({ styles = {}, options = {}, badge, icon, title, subtitle, reverse }) {
+    const custom = test(options);
+    return (_jsxs(RowBox, { style: cn(base.container, styles.container), children: [icon, _jsxs(ColumnBox, { style: cn(custom.subcontainer(), reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx(RowBox, { style: cn(custom.title(), styles.title, styles.text), children: title }), subtitle && _jsx(RowBox, { style: cn(custom.subtitle(), styles.subtitle, styles.text), 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"
 };
+const test = tv({
+    slots: {
+        subcontainer: "grow",
+        title: "items-center gap-2 text-xl font-bold text-primary",
+        subtitle: "items-center gap-2 font-semibold text-primary-light dark:text-primary-dark"
+    },
+    defaultVariants: {
+        size: "md",
+        align: "center"
+    },
+    variants: {
+        size: {
+            md: {
+                title: "text-xl 2xl:text-2xl",
+                subtitle: "text-base 2xl:text-lg"
+            },
+            lg: {
+                subcontainer: "gap-3",
+                title: "text-5xl 2xl:text-6xl",
+                subtitle: "text-sm sm:text-base 2xl:text-lg"
+            }
+        },
+        align: {
+            left: {
+                subcontainer: "items-start"
+            },
+            center: {
+                subcontainer: "items-center",
+                subtitle: "justify-center text-center"
+            }
+        }
+    }
+});

package/dist/components/search-bar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState } from "react";
-import { RowBox } from "./flex";
+import { RowBox } from "./layout/flex";
 import { Button } from "./button";
 export function SearchBar({ button, placeholder, action }) {
     const [query, search] = useState("");

package/dist/core/format.d.ts

@@ -1 +1,3 @@
+import { ReactNode } from "react";
+export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
 export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;

package/dist/core/format.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 const delimiterConfig = [
     { delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
     { delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
@@ -8,6 +9,7 @@ const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
 const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
 const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
+export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
 export const formatText = (text) => {
     const parts = text
         .split(WRAPPED_TEXT_REGEX)

package/dist/core/types.d.ts

@@ -1,3 +1,8 @@
+import { ReactNode } from "react";
+export type Component = {
+    style?: string;
+    children?: ReactNode;
+};
 export type Attachment = {
     filename: string;
     mimetype: string;

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export { default as Attachment } from "./components/attachment";
 export { default as CheckBox } from "./components/checkbox";
 export { default as FadeCarousel } from "./components/fade-carousel";
 export * from "./components";
-export * from "./components/flex";
 export * from "./components/button";
 export * from "./components/search-bar";
 export * from "./core/types";

package/dist/index.js

@@ -6,7 +6,6 @@ export { default as Attachment } from "./components/attachment";
 export { default as CheckBox } from "./components/checkbox";
 export { default as FadeCarousel } from "./components/fade-carousel";
 export * from "./components";
-export * from "./components/flex";
 export * from "./components/button";
 export * from "./components/search-bar";
 export * from "./core/types";

package/package.json

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

package/dist/components/badge.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from "react";
-export default function Badge({ style, children }: {
-    style?: string;
-    children: ReactNode;
-}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/badge.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default async function Badge({ style, children }) {
-    return (_jsx("span", { className: "w-min px-3 py-1 bg-accent/20 border border-accent-dark rounded-full text-xs text-accent-dark font-semibold", children: children }));
-}

package/dist/components/flex.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react";
-type Props = Position & {
-    style?: string;
-    children: ReactNode;
-};
-type Position = {
-    center?: boolean;
-    centerX?: boolean;
-    centerY?: boolean;
-};
-export declare function ColumnBox({ style, center, centerX, centerY, children }: Props): import("react/jsx-runtime").JSX.Element;
-export declare function RowBox({ style, children }: {
-    style?: string;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/flex.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@bouko/style";
-export function ColumnBox({ style, center, centerX, centerY, children }) {
-    return (_jsx("div", { className: cn("flex flex-col", center && "items-center justify-center", centerX && "items-center", centerY && "justify-center", style), children: children }));
-}
-export function RowBox({ style, children }) {
-    return (_jsx("div", { className: cn("flex", style), children: children }));
-}

package/dist/hooks/color.d.ts

@@ -1,7 +0,0 @@
-type Props = {
-    variable: string;
-    color: string;
-    original: string;
-};
-export default function useColor({ variable, color, original }: Props): void;
-export {};

package/dist/hooks/color.js

@@ -1,8 +0,0 @@
-"use client";
-import { useEffect } from "react";
-export default function useColor({ variable, color, original }) {
-    useEffect(() => {
-        document.documentElement.style.setProperty(`--${variable}`, color);
-        return () => document.documentElement.style.setProperty(`--${variable}`, original);
-    }, []);
-}

package/dist/next/src/components/layouts/locked.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-type LayoutProps = {
-    company: string;
-    fonts: string[];
-    providers: ({ children }: {
-        children: ReactNode;
-    }) => React.JSX.Element;
-    authorized: boolean;
-    children: ReactNode;
-};
-export default function LockedLayout({ company, fonts, providers, authorized, children }: LayoutProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/next/src/components/layouts/locked.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// import Header from "@/components/layout/header";
-// import Footer from "@/components/layout/footer";
-import { cloneElement } from "react";
-import { cn } from "@bouko/style";
-export default function LockedLayout({ company, fonts, providers, authorized, children }) {
-    return (_jsx("html", { lang: "en", className: cn(...fonts, "scroll-smooth"), children: _jsx("body", { className: styles.body, children: cloneElement(providers({
-                children: (_jsx("main", { className: styles.container, children: _jsx("div", { className: styles.content, children: children }) }))
-            })) }) }));
-}
-const styles = {
-    body: "h-[100dvh] bg-background font-sans text-primary select-none sm:overflow-hidden antialiased",
-    container: "flex flex-col w-full h-full sm:overflow-hidden",
-    content: "flex grow justify-center items-start w-full sm:overflow-hidden"
-};

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

@@ -1,136 +0,0 @@
-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/react/src/components/animate/configs.js

@@ -1,62 +0,0 @@
-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/react/src/components/animate/index.d.ts

@@ -1,12 +0,0 @@
-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/react/src/components/animate/index.js

@@ -1,7 +0,0 @@
-"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/react/src/components/attachment.d.ts

@@ -1,2 +0,0 @@
-import { type Field } from "./form";
-export default function Attachment<T>({ id, style, label, value, update, required, note }: Field<T, File[]>): import("react/jsx-runtime").JSX.Element;

package/dist/react/src/components/attachment.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
-import PaperClip from "../assets/icons/paperclip.svg";
-import { setField } from "./form";
-import { cn } from "@bouko/style";
-export default function Attachment({ id, style, label, value, update, required = true, note }) {
-    const ref = useRef(null);
-    const handleFileChange = (e) => {
-        if (e.target.files)
-            setField(update, id, [e.target.files[0]]);
-    };
-    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsxs("div", { onClick: () => ref.current?.click(), className: "flex flex-col justify-center items-center py-3 gap-1 w-full cursor-pointer duration-200 hover:bg-slate-200/40 rounded border-2 border-slate-300 border-dashed", children: [!value || value.length === 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex gap-2 items-center font-semibold text-sm", children: [_jsx(PaperClip, {}), "Drag and drop files, paste screenshots, or"] }), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }), _jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref })] })), value && value.length > 0 && value.map((x, i) => (_jsx("span", { className: "text-xs text-slate-500", children: x.name }, i)))] }), note && _jsx("span", { className: styles.note, children: note })] }));
-}
-const styles = {
-    container: "flex flex-col gap-2 w-full shrink-0 overflow-hidden",
-    label: "text-xs text-slate-600",
-    input: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm",
-    note: "mt-1 text-xs text-slate-500"
-};

package/dist/react/src/components/button.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-export type ButtonProps = {
-    variant?: "primary" | "outline" | "ghost";
-    size?: "xs" | "sm" | "md" | "lg";
-    style?: string;
-    onClick?: () => void;
-    disabled?: boolean;
-    children: ReactNode;
-};
-export declare function Button({ size, variant, style, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/src/components/button.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, tv } from "@bouko/style";
-export function Button({ size, variant, style, ...props }) {
-    return (_jsx("button", { className: cn(styles({ variant, size }), style), ...props }));
-}
-const styles = tv({
-    base: "flex items-center gap-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed",
-    defaultVariants: { size: "md" },
-    variants: {
-        variant: {
-            primary: "bg-primary hover:bg-primary-dark border-primary-dark",
-            outline: "!bg-transparent border-accent hover:border-accent-dark text-primary",
-            ghost: "!bg-transparent border-transparent text-accent hover:text-accent-dark"
-        },
-        size: {
-            xs: "px-3 py-1 text-xs",
-            sm: "px-4 py-2 text-xs sm:text-sm",
-            md: "px-4 py-2",
-            lg: "px-5 py-3 text-lg"
-        }
-    }
-});

package/dist/react/src/components/checkbox.d.ts

@@ -1,8 +0,0 @@
-type Props = {
-    style?: string;
-    label: string;
-    value: boolean;
-    update: (x: boolean) => void;
-};
-export default function Checkbox({ style, label, value, update }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/react/src/components/checkbox.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Check from "../assets/icons/check.svg";
-import { cn } from "@bouko/style";
-export default function Checkbox({ style, label, value, update }) {
-    const isChecked = !!value;
-    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsx("div", { className: cn(styles.box, isChecked && "bg-accent"), onClick: () => update(!isChecked), children: isChecked && _jsx(Check, { className: styles.check }) }), _jsx("span", { className: styles.label, children: label })] }));
-}
-const styles = {
-    container: "flex gap-3 items-center",
-    box: "flex justify-center items-center size-4 min-w-4 hover:bg-accent border rounded border-border-light duration-200 cursor-pointer",
-    check: "size-2 text-background",
-    label: "text-xs text-primary-dark"
-};

package/dist/react/src/components/dropdown/normal.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-type Option = {
-    label: ReactNode;
-    action: () => void;
-};
-export default function Dropdown({ options, children }: {
-    options: Option[];
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export {};