b44ui 0.2.5 → 0.2.7

package/dist/index.d.ts

@@ -1765,9 +1765,10 @@ 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: <T extends SelectValue>({ state, options, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, children, ...rest }: DProps & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue"> & {
+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;

package/dist/index.js

@@ -129,16 +129,27 @@ 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 = ({ state, options, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, children, ...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 });
     const entries = options ? Object.entries(options) : undefined;
-    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 }), value: state ? state[0] : rest.value, defaultValue: rest.defaultValue, onChange: e => {
+    const [showTitle, setShowTitle] = useState(!!title);
+    const [innerValue, setInnerValue] = useState(rest.defaultValue);
+    const value = showTitle ? '' : state ? state[0] : rest.value ?? innerValue;
+    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: value, onChange: e => {
+            if (title && e.target.value === '') {
+                setShowTitle(true);
+                onChange?.(e);
+                return;
+            }
             const value = entries?.find(([, value]) => String(value) === e.target.value)?.[1] ?? e.target.value;
+            setShowTitle(false);
+            if (!state && rest.value === undefined)
+                setInnerValue(value);
             state?.[1](value);
             onChange?.(e);
-        }, children: entries
-            ? entries.map(([label, value]) => _jsx("option", { value: value, children: label }, `${label}:${value}`))
-            : children });
+        }, 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.5",
+  "version": "0.2.7",
   "type": "module",
   "sideEffects": [
     "./index.js",