@bouko/react 1.5.7 → 1.5.9

package/dist/components/button.d.ts

@@ -4,6 +4,7 @@ export type ButtonProps = {
     size?: "sm" | "md" | "lg";
     style?: string;
     onClick?: () => void;
+    disabled?: boolean;
     children: ReactNode;
 };
 export declare function Button({ variant, style, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button.js

@@ -4,16 +4,18 @@ export function Button({ variant, style, ...props }) {
     return (_jsx("button", { className: cn(styles({ variant }), style), ...props }));
 }
 const styles = tv({
-    base: "flex items-center gap-2 px-4 py-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-background-light duration-200 cursor-pointer",
+    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-2 border-accent hover:border-accent-dark text-primary",
+            outline: "!bg-transparent border-accent hover:border-accent-dark text-primary",
             ghost: "!bg-transparent border-transparent text-accent hover:text-accent-dark"
         },
         size: {
             sm: "px-3 py-1 text-sm",
-            lg: "text-lg"
+            md: "px-4 py-2",
+            lg: "px-5 py-3 text-lg"
         }
     }
 });

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 font-bold",
-    subtitle: "text-sm font-semibold text-primary-lighter"
+    title: "flex items-center gap-2 text-lg font-bold",
+    subtitle: "font-semibold text-primary-lighter"
 };

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

@@ -1,6 +1,10 @@
 import { type Field as FieldProps } from "@bouko/form";
 type Props<T> = FieldProps<T> & {
     placeholder?: string;
+    styles?: {
+        container?: string;
+        input?: string;
+    };
 };
-export default function Input<T>({ id, style, label, required, note, update, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default function Input<T>({ id, styles, style, label, required, note, update, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Field from "./field";
+import { cn } from "@bouko/style";
 import { setField } from "@bouko/form";
-export default function Input({ id, style, label, required = true, note, update, ...props }) {
-    return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("input", { className: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm", onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
+export default function Input({ id, styles, style, label, required = true, note, update, ...props }) {
+    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm", styles?.input), onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
 }

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

@@ -1 +1,2 @@
 export declare const getFileData: (files: File[]) => Promise<unknown[]>;
+export declare const getEnv: (key: string) => string;

package/dist/core/functions.js

@@ -13,3 +13,9 @@ export const getFileData = (files) => Promise.all(files.map((file) => {
         reader.readAsDataURL(file);
     });
 }));
+export const getEnv = (key) => {
+    const value = process.env[key];
+    if (!value)
+        throw new Error(`Missing required env: ${key}`);
+    return value;
+};

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