b44ui 0.2.4 → 0.2.6

package/dist/index.d.ts

@@ -27,6 +27,8 @@ type AppProps = DivProps & {
     htScreen?: boolean;
 };
 type InputState = [string, React.Dispatch<React.SetStateAction<string>>];
+type SelectValue = string | number;
+type SelectState<T extends SelectValue = SelectValue> = [T, React.Dispatch<React.SetStateAction<T>>];
 export declare const D: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
 export declare const H1: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }: HeadingProps) => import("react").DetailedReactHTMLElement<{
     className: string;
@@ -1763,7 +1765,13 @@ export declare const Input: ({ state, cn, cnIgnoreWrongUsage, grow, gap, p, wd,
 export declare const Textarea: ({ cn, cnIgnoreWrongUsage, ref, grow, gap, p, wd, ht, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     ref?: React.RefObject<HTMLTextAreaElement | null>;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Select: ({ cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends SelectValue>({ state, options, title, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, children, ...rest }: DProps & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "title"> & {
+    state?: SelectState<T>;
+    options?: Record<string, T>;
+    title?: string;
+    value?: T;
+    defaultValue?: T;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Grid: ({ children, cols, gap, ...rest }: DivProps & {
     cols?: number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -129,9 +129,20 @@ export const Textarea = ({ cn, cnIgnoreWrongUsage, ref, grow, gap, p, wd, ht, ..
     const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
     return _jsx("textarea", { ref: ref, ...rest, className: CN('rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }) });
 };
-export const Select = ({ cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }) => {
+export const Select = ({ state, options, title, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, children, ...rest }) => {
     const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
-    return _jsx("select", { ...rest, className: CN('rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }) });
+    const entries = options ? Object.entries(options) : undefined;
+    return _jsxs("select", { ...rest, className: CN('rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), value: state ? state[0] : rest.value, defaultValue: rest.defaultValue, onChange: e => {
+            if (title && e.target.value === '') {
+                onChange?.(e);
+                return;
+            }
+            const value = entries?.find(([, value]) => String(value) === e.target.value)?.[1] ?? e.target.value;
+            state?.[1](value);
+            onChange?.(e);
+        }, children: [title && _jsx("option", { value: '', children: title }), entries
+                ? entries.map(([label, value]) => _jsx("option", { value: value, children: label }, `${label}:${value}`))
+                : children] });
 };
 export const Grid = ({ children, cols, gap, ...rest }) => _jsx(D, { ...rest, cn: CN('grid ui-grid', rcn(rest)), gap: gap ?? 4, style: { ['--cols']: cols ?? Children.count(children), ...rest.style }, children: children });
 export const Scroll = ({ grow = true, ...rest }) => _jsx(D, { ...rest, cn: CN('min-h-0 overflow-y-auto', rcn(rest)), grow: grow });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "sideEffects": [
     "./index.js",