@bouko/react 2.5.6 → 2.5.8

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

@@ -1,54 +1,54 @@
-import type { ReactNode } from "react";
-export declare type Props = {
-    variants?: VariantConfig[];
-    direction?: "horizontal" | "vertical";
-    interval?: number;
-    duration?: number;
-    style?: string;
-    layout?: boolean;
-    children?: ReactNode;
-};
-export declare function Animation({ variants, style, direction, interval, duration, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-declare type VariantConfig = {
-    initial?: Record<string, number>;
-    animate?: Record<string, number>;
-    exit?: Record<string, number>;
-};
-/**
- * Merges multiple variant configs into one.
- */
-export declare function mergeVariants(...variants: VariantConfig[]): VariantConfig;
-export declare const opacity: (x?: number) => {
-    initial: {
-        opacity: number;
-    };
-    animate: {
-        opacity: number;
-    };
-    exit: {
-        opacity: number;
-    };
-};
-export declare const slideX: (x?: number) => {
-    initial: {
-        x: number;
-    };
-    animate: {
-        x: number;
-    };
-    exit: {
-        x: number;
-    };
-};
-export declare const slideY: (y?: number) => {
-    initial: {
-        y: number;
-    };
-    animate: {
-        y: number;
-    };
-    exit: {
-        y: number;
-    };
-};
-export { AnimatePresence } from "framer-motion";
+import type { ReactNode } from "react";
+export type Props = {
+    variants?: VariantConfig[];
+    direction?: "horizontal" | "vertical";
+    interval?: number;
+    duration?: number;
+    style?: string;
+    layout?: boolean;
+    children?: ReactNode;
+};
+export declare function Animation({ variants, style, direction, interval, duration, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+type VariantConfig = {
+    initial?: Record<string, number>;
+    animate?: Record<string, number>;
+    exit?: Record<string, number>;
+};
+/**
+ * Merges multiple variant configs into one.
+ */
+export declare function mergeVariants(...variants: VariantConfig[]): VariantConfig;
+export declare const opacity: (x?: number) => {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const slideX: (x?: number) => {
+    initial: {
+        x: number;
+    };
+    animate: {
+        x: number;
+    };
+    exit: {
+        x: number;
+    };
+};
+export declare const slideY: (y?: number) => {
+    initial: {
+        y: number;
+    };
+    animate: {
+        y: number;
+    };
+    exit: {
+        y: number;
+    };
+};
+export { AnimatePresence } from "framer-motion";

package/dist/components/animate/index.js

@@ -1,33 +1,33 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { cn } from "@bouko/style";
-export function Animation({ variants = [opacity()], style, direction = "horizontal", interval = 3000, duration = 0.3, ...props }) {
-    return (_jsx(motion.div, { className: cn("w-full", style), transition: { duration: duration }, ...mergeVariants(...variants), ...props }, void 0));
-}
-/**
- * Merges multiple variant configs into one.
- */
-export function mergeVariants(...variants) {
-    return variants.reduce((acc, v) => ({
-        initial: { ...acc.initial, ...v.initial },
-        animate: { ...acc.animate, ...v.animate },
-        exit: { ...acc.exit, ...v.exit },
-    }), { initial: {}, animate: {}, exit: {} });
-}
-export const opacity = (x = 1) => ({
-    initial: { opacity: 0 },
-    animate: { opacity: x },
-    exit: { opacity: 0 }
-});
-export const slideX = (x = 5) => ({
-    initial: { x: x },
-    animate: { x: 0 },
-    exit: { x: -x }
-});
-export const slideY = (y = 5) => ({
-    initial: { y: y },
-    animate: { y: 0 },
-    exit: { y: -y }
-});
-export { AnimatePresence } from "framer-motion";
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { cn } from "@bouko/style";
+export function Animation({ variants = [opacity()], style, direction = "horizontal", interval = 3000, duration = 0.3, ...props }) {
+    return (_jsx(motion.div, { className: cn("w-full", style), transition: { duration: duration }, ...mergeVariants(...variants), ...props }));
+}
+/**
+ * Merges multiple variant configs into one.
+ */
+export function mergeVariants(...variants) {
+    return variants.reduce((acc, v) => ({
+        initial: { ...acc.initial, ...v.initial },
+        animate: { ...acc.animate, ...v.animate },
+        exit: { ...acc.exit, ...v.exit },
+    }), { initial: {}, animate: {}, exit: {} });
+}
+export const opacity = (x = 1) => ({
+    initial: { opacity: 0 },
+    animate: { opacity: x },
+    exit: { opacity: 0 }
+});
+export const slideX = (x = 5) => ({
+    initial: { x: x },
+    animate: { x: 0 },
+    exit: { x: -x }
+});
+export const slideY = (y = 5) => ({
+    initial: { y: y },
+    animate: { y: 0 },
+    exit: { y: -y }
+});
+export { AnimatePresence } from "framer-motion";

package/dist/components/attachment.d.ts

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

package/dist/components/attachment.js

@@ -1,18 +1,18 @@
-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 { 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 && id)
-            update(Array.from(e.target.files));
-    };
-    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)" }, void 0) : ""] }, void 0), _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, {}, void 0), "Drag and drop files, paste screenshots, or"] }, void 0), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }, void 0), _jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, multiple: true, ref: ref }, void 0)] }, void 0)), value && value.length > 0 && value.map((x, i) => (_jsx("span", { className: "text-xs text-slate-500", children: x.name }, i)))] }, void 0), note && _jsx("span", { className: styles.note, children: note }, void 0)] }, void 0));
-}
-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"
-};
+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 { 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 && id)
+            update(Array.from(e.target.files));
+    };
+    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, multiple: true, 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/components/badge.d.ts

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

package/dist/components/badge.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default 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/button/ghost.d.ts

@@ -1,7 +1,7 @@
-import type { Component, Clickable } from "../../core/types";
-export default function GhostButton({ style, action, children }: Component & Clickable): import("react/jsx-runtime").JSX.Element | null;
-/**
- * Problems:
- *
- * - Perfect `Button`
-**/ 
+import type { Component, Clickable } from "../../core/types";
+export default function GhostButton({ style, action, children }: Component & Clickable): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Problems:
+ *
+ * - Perfect `Button`
+**/ 

package/dist/components/button/ghost.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "./normal";
-import { cn } from "@bouko/style";
-export default function GhostButton({ style, action, children }) {
-    if (!children)
-        return null;
-    return (_jsx(Button, { variant: "ghost", style: cn("p-0 hover:brightness-110", style), onClick: action, children: children }, void 0));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./normal";
+import { cn } from "@bouko/style";
+export default function GhostButton({ style, action, children }) {
+    if (!children)
+        return null;
+    return (_jsx(Button, { variant: "ghost", style: cn("p-0 hover:brightness-110", style), onClick: action, children: children }));
+}

package/dist/components/button/icon.d.ts

@@ -1,9 +1,9 @@
-import type { ReactNode } from "react";
-import type { Clickable } from "../../core/types";
-declare type Props = Clickable & {
-    color?: string;
-    icon: ReactNode;
-    disabled?: boolean;
-};
-export default function IconButton({ color, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { ReactNode } from "react";
+import type { Clickable } from "../../core/types";
+type Props = Clickable & {
+    color?: string;
+    icon: ReactNode;
+    disabled?: boolean;
+};
+export default function IconButton({ color, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/icon.js

@@ -1,19 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { opacitize } from "@bouko/style";
-export default function IconButton({ color = "--color-accent", icon, action, disabled = false }) {
-    return (_jsx("button", { className: "hover:brightness-115 disabled:cursor-not-allowed", style: styles(color), onClick: action, disabled: !action || disabled, children: icon }, void 0));
-}
-const styles = (color) => ({
-    display: "flex",
-    justifyContent: "center",
-    itemsCenter: "center",
-    padding: "0.5rem",
-    background: opacitize(color, 60),
-    border: `1px solid var(${color})`,
-    borderRadius: "100%",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-    color: opacitize("--color-primary", 80),
-    transitionDuration: "200ms",
-    cursor: "pointer"
-});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { opacitize } from "@bouko/style";
+export default function IconButton({ color = "--color-accent", icon, action, disabled = false }) {
+    console.log(disabled);
+    return (_jsx("button", { className: "hover:brightness-115 disabled:!cursor-not-allowed", style: styles(color), onClick: action, disabled: !action || disabled, children: icon }));
+}
+const styles = (color) => ({
+    display: "flex",
+    justifyContent: "center",
+    itemsCenter: "center",
+    padding: "0.5rem",
+    background: opacitize(color, 60),
+    border: `1px solid var(${color})`,
+    borderRadius: "100%",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+    color: opacitize("--color-primary", 80),
+    transitionDuration: "200ms",
+    cursor: "pointer"
+});

package/dist/components/button/load.d.ts

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

package/dist/components/button/load.js

@@ -1,35 +1,35 @@
-"use state";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn, tv } from "@bouko/style";
-import CheckCircle from "../../assets/icons/check-circle.svg";
-import Spinner from "../../assets/icons/spinner.svg";
-export default function LoadButton({ size, variant, style, icon, onClick, children, ...props }) {
-    const [isLoading, setLoading] = useState(false);
-    const submit = async () => {
-        setLoading(true);
-        try {
-            await onClick?.();
-        }
-        catch { }
-        setLoading(false);
-    };
-    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, ...props, children: [isLoading ? _jsx(Spinner, { className: "animate-spin" }, void 0) : (icon || _jsx(CheckCircle, {}, void 0)), children] }, void 0));
-}
-const styles = tv({
-    base: "flex justify-center 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"
-        }
-    }
-});
+"use state";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn, tv } from "@bouko/style";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import Spinner from "../../assets/icons/spinner.svg";
+export default function LoadButton({ size, variant, style, onClick, children, ...props }) {
+    const [isLoading, setLoading] = useState(false);
+    const submit = async () => {
+        setLoading(true);
+        try {
+            await onClick?.();
+        }
+        catch { }
+        setLoading(false);
+    };
+    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, ...props, children: [isLoading ? _jsx(Spinner, { className: "animate-spin" }) : _jsx(CheckCircle, {}), children] }));
+}
+const styles = tv({
+    base: "flex justify-center 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/components/button/normal.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from "react";
-import type { Component } from "../../core/types";
-export declare type ButtonProps = Component & {
-    variant?: "primary" | "outline" | "ghost" | "secondary";
-    size?: "xs" | "sm" | "md" | "lg";
-    icon?: ReactNode;
-    action?: () => void;
-    disabled?: boolean;
-};
-export declare function Button({ size, variant, style, icon, action, disabled, children }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export default Button;
+import { ReactNode } from "react";
+import type { Component } from "../../core/types";
+export type ButtonProps = Component & {
+    variant?: "primary" | "outline" | "ghost" | "secondary";
+    size?: "xs" | "sm" | "md" | "lg";
+    icon?: ReactNode;
+    action?: () => void;
+    disabled?: boolean;
+};
+export declare function Button({ size, variant, style, icon, action, disabled, children }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/button/normal.js

@@ -1,39 +1,39 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn, tv } from "@bouko/style";
-import Spinner from "../../assets/icons/spinner.svg";
-export function Button({ size, variant, style, icon, action, disabled, children }) {
-    const [isLoading, setLoading] = useState(false);
-    const submit = async () => {
-        setLoading(true);
-        try {
-            await action?.();
-        }
-        catch { }
-        setLoading(false);
-    };
-    return (_jsxs("button", { className: cn(styles({ variant, size }), variant === "ghost" && "p-0", style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
-                ? _jsx(Spinner, { className: "animate-spin" }, void 0)
-                : icon, children] }, void 0));
-}
-const styles = tv({
-    base: "flex justify-center items-center gap-2 bg-accent border border-accent-darker rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-110",
-    defaultVariants: { size: "md" },
-    variants: {
-        variant: {
-            primary: "bg-primary border-primary-dark",
-            outline: "bg-transparent border-accent hover:border-accent-dark text-primary",
-            ghost: "bg-transparent border-transparent text-accent hover:brightness-110",
-            secondary: "bg-background-dark dark:bg-background-light border-border-dark dark:border-border-light text-background-darker dark:text-primary"
-        },
-        size: {
-            xs: "px-3 py-1 text-xs",
-            circle: "px-2 py-2 text-xs rounded-full",
-            sm: "px-3 py-2 text-xs sm:text-sm",
-            md: "px-4 py-2",
-            lg: "px-5 py-3 text-lg"
-        }
-    }
-});
-export default Button;
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn, tv } from "@bouko/style";
+import Spinner from "../../assets/icons/spinner.svg";
+export function Button({ size, variant, style, icon, action, disabled, children }) {
+    const [isLoading, setLoading] = useState(false);
+    const submit = async () => {
+        setLoading(true);
+        try {
+            await action?.();
+        }
+        catch { }
+        setLoading(false);
+    };
+    return (_jsxs("button", { className: cn(styles({ variant, size }), variant === "ghost" && "p-0", style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
+                ? _jsx(Spinner, { className: "animate-spin" })
+                : icon, children] }));
+}
+const styles = tv({
+    base: "flex justify-center items-center gap-2 bg-accent border border-accent-darker rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-110",
+    defaultVariants: { size: "md" },
+    variants: {
+        variant: {
+            primary: "bg-primary border-primary-dark",
+            outline: "bg-transparent border-accent hover:border-accent-dark text-primary",
+            ghost: "bg-transparent border-transparent text-accent hover:brightness-110",
+            secondary: "bg-background-dark dark:bg-background-light border-border-dark dark:border-border-light text-background-darker dark:text-primary"
+        },
+        size: {
+            xs: "px-3 py-1 text-xs",
+            circle: "px-2 py-2 text-xs rounded-full",
+            sm: "px-3 py-2 text-xs sm:text-sm",
+            md: "px-4 py-2",
+            lg: "px-5 py-3 text-lg"
+        }
+    }
+});
+export default Button;

package/dist/components/button.d.ts

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
-export declare 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;
+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/components/button.js

@@ -1,22 +1,22 @@
-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 }, void 0));
-}
-const styles = tv({
-    base: "flex justify-center 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"
-        }
-    }
-});
+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 justify-center 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/components/carousel/index.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from "react";
-export declare type CarouselProps<T = ReactNode> = {
-    container?: string;
-    items: T[];
-    direction?: "horizontal" | "vertical";
-    interval?: number;
-    duration?: number;
-    autoplay?: boolean;
-    style?: string;
-};
-export declare function Carousel({ container, style, items, direction, autoplay, interval, ...props }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+export type CarouselProps<T = ReactNode> = {
+    container?: string;
+    items: T[];
+    direction?: "horizontal" | "vertical";
+    interval?: number;
+    duration?: number;
+    autoplay?: boolean;
+    style?: string;
+};
+export declare function Carousel({ container, style, items, direction, autoplay, interval, ...props }: CarouselProps): import("react/jsx-runtime").JSX.Element;