@bouko/react 1.5.6 → 1.5.8

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

@@ -1,9 +1,16 @@
 import type { ReactNode } from "react";
-export declare function ColumnBox({ style, children }: {
+type Props = Position & {
     style?: string;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+};
+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,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@bouko/style";
-export function ColumnBox({ style, children }) {
-    return (_jsx("div", { className: cn("flex flex-col", style), children: children }));
+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/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/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/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/package.json

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