@bouko/react 1.6.6 → 1.6.8

package/dist/components/button.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 export type ButtonProps = {
     variant?: "primary" | "outline" | "ghost";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     style?: string;
     onClick?: () => void;
     disabled?: boolean;

package/dist/components/button.js

@@ -13,6 +13,7 @@ const styles = tv({
             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-sm",
             md: "px-4 py-2",
             lg: "px-5 py-3 text-lg"

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

@@ -0,0 +1,6 @@
+type Props = {
+    placeholder?: string;
+    action: (query: string) => void;
+};
+export default function SearchBar({ placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/search/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RowBox } from "../flex";
+import { Button } from "../button";
+export default function SearchBar({ placeholder, action }) {
+    const [query, search] = useState("");
+    return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none lowercase text-lg placeholder-slate-500 tracking-wide", placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), _jsx(Button, { size: "sm", style: "gap-[0.4rem] font-extrabold py-1 px-3 font-mono", onClick: () => action(query), children: "GO" })] }));
+}
+const styles = {
+    container: "items-center gap-6 w-xl pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
+};

package/dist/components/search-bar.d.ts

@@ -0,0 +1,5 @@
+export type SearchBarProps = {
+    placeholder?: string;
+    action: (query: string) => void;
+};
+export declare function SearchBar({ placeholder, action }: SearchBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/search-bar.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RowBox } from "./flex";
+import { Button } from "./button";
+export function SearchBar({ placeholder, action }) {
+    const [query, search] = useState("");
+    return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none lowercase text-lg placeholder-slate-500 tracking-wide", placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), _jsx(Button, { size: "sm", style: "gap-[0.4rem] font-extrabold py-1 px-3 font-mono", onClick: () => action(query), children: "GO" })] }));
+}
+const styles = {
+    container: "items-center gap-6 w-xl pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
+};

package/dist/index.d.ts

@@ -9,6 +9,7 @@ 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";
 export * from "./core/functions";
 export * from "./core/format";

package/dist/index.js

@@ -9,6 +9,7 @@ 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";
 export * from "./core/functions";
 export * from "./core/format";

package/package.json

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

package/dist/components/heading.d.ts

@@ -1,13 +0,0 @@
-import type { ReactNode } from "react";
-type Props = {
-    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 }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/heading.js

@@ -1,14 +0,0 @@
-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 font-bold",
-    subtitle: "text-sm font-semibold text-primary-lighter"
-};

package/dist/components/mcq.d.ts

@@ -1,2 +0,0 @@
-import type { OptionField } from "../core/types";
-export default function MultipleChoice({ label, options, style, value, update, required }: OptionField): import("react/jsx-runtime").JSX.Element;

package/dist/components/mcq.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Field from "./field";
-import { cn } from "@bouko/style";
-export default function MultipleChoice({ label, options, style, value, update, required = true }) {
-    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => update(x.id) }), x.label] }, i))) }) }));
-}
-const Dot = ({ active, select }) => (_jsx("div", { className: cn(styles.dot, active && "bg-accent border-accent-dark"), onClick: select }));
-const styles = {
-    options: "flex flex-col gap-1 w-full",
-    item: "flex items-center gap-3 text-sm",
-    dot: "size-3 bg-background-dark/50 hover:bg-background-dark duration-200 cursor-pointer border border-background-dark rounded-full"
-};