giggles 0.3.2 → 0.3.3

package/dist/ui/index.d.ts

@@ -32,4 +32,45 @@ type TextInputProps = {
 };
 declare function TextInput({ label, value, onChange, onSubmit, placeholder, render }: TextInputProps): react_jsx_runtime.JSX.Element;
 
-export { CommandPalette, type CommandPaletteRenderProps, TextInput, type TextInputRenderProps };
+type SelectOption<T> = {
+    label: string;
+    value: T;
+};
+type SelectRenderProps<T> = {
+    option: SelectOption<T>;
+    focused: boolean;
+    highlighted: boolean;
+    selected: boolean;
+};
+type SelectProps<T> = {
+    options: SelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    onSubmit?: (value: T) => void;
+    onHighlight?: (value: T) => void;
+    label?: string;
+    immediate?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    render?: (props: SelectRenderProps<T>) => React__default.ReactNode;
+};
+declare function Select<T>({ options, value, onChange, onSubmit, onHighlight, label, immediate, direction, render }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+type MultiSelectRenderProps<T> = {
+    option: SelectOption<T>;
+    focused: boolean;
+    highlighted: boolean;
+    selected: boolean;
+};
+type MultiSelectProps<T> = {
+    options: SelectOption<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    onSubmit?: (value: T[]) => void;
+    onHighlight?: (value: T) => void;
+    label?: string;
+    direction?: 'vertical' | 'horizontal';
+    render?: (props: MultiSelectRenderProps<T>) => React__default.ReactNode;
+};
+declare function MultiSelect<T>({ options, value, onChange, onSubmit, onHighlight, label, direction, render }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+export { CommandPalette, type CommandPaletteRenderProps, MultiSelect, type MultiSelectRenderProps, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps };

package/dist/ui/index.js

@@ -1,5 +1,6 @@
 import {
   FocusTrap,
+  GigglesError,
   useFocus,
   useKeybindingRegistry,
   useKeybindings
@@ -174,7 +175,152 @@ function TextInput({ label, value, onChange, onSubmit, placeholder, render }) {
     /* @__PURE__ */ jsx2(Text2, { dimColor: isPlaceholder, children: displayValue })
   ] });
 }
+
+// src/ui/Select.tsx
+import React3, { useState as useState2 } from "react";
+import { Box as Box2, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Select({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  onHighlight,
+  label,
+  immediate,
+  direction = "vertical",
+  render
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of options) {
+    const key = String(opt.value);
+    if (seen.has(key)) {
+      throw new GigglesError("Select options must have unique values");
+    }
+    seen.add(key);
+  }
+  const focus = useFocus();
+  const [highlightIndex, setHighlightIndex] = useState2(0);
+  const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
+  if (safeIndex !== highlightIndex) {
+    setHighlightIndex(Math.max(0, safeIndex));
+  }
+  const moveHighlight = (delta) => {
+    if (options.length === 0) return;
+    const next2 = Math.max(0, Math.min(options.length - 1, safeIndex + delta));
+    if (next2 !== safeIndex) {
+      setHighlightIndex(next2);
+      onHighlight == null ? void 0 : onHighlight(options[next2].value);
+      if (immediate) {
+        onChange(options[next2].value);
+      }
+    }
+  };
+  const prev = () => moveHighlight(-1);
+  const next = () => moveHighlight(1);
+  const navBindings = direction === "vertical" ? { j: next, k: prev, down: next, up: prev } : { l: next, h: prev, right: next, left: prev };
+  useKeybindings(focus, {
+    ...navBindings,
+    enter: () => {
+      if (options.length === 0) return;
+      if (immediate) {
+        onSubmit == null ? void 0 : onSubmit(options[safeIndex].value);
+      } else {
+        onChange(options[safeIndex].value);
+        onSubmit == null ? void 0 : onSubmit(options[safeIndex].value);
+      }
+    }
+  });
+  const isHorizontal = direction === "horizontal";
+  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: isHorizontal ? "row" : "column", gap: isHorizontal ? 1 : 0, children: [
+    label != null && /* @__PURE__ */ jsx3(Text3, { children: label }),
+    options.map((option, index) => {
+      const highlighted = index === safeIndex;
+      const selected = option.value === value;
+      if (render) {
+        return /* @__PURE__ */ jsx3(React3.Fragment, { children: render({ option, focused: focus.focused, highlighted, selected }) }, String(option.value));
+      }
+      return /* @__PURE__ */ jsxs3(Text3, { dimColor: !focus.focused, children: [
+        highlighted ? ">" : " ",
+        " ",
+        option.label
+      ] }, String(option.value));
+    })
+  ] });
+}
+
+// src/ui/MultiSelect.tsx
+import React4, { useState as useState3 } from "react";
+import { Box as Box3, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MultiSelect({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  onHighlight,
+  label,
+  direction = "vertical",
+  render
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of options) {
+    const key = String(opt.value);
+    if (seen.has(key)) {
+      throw new GigglesError("MultiSelect options must have unique values");
+    }
+    seen.add(key);
+  }
+  const focus = useFocus();
+  const [highlightIndex, setHighlightIndex] = useState3(0);
+  const safeIndex = options.length === 0 ? -1 : Math.min(highlightIndex, options.length - 1);
+  if (safeIndex !== highlightIndex) {
+    setHighlightIndex(Math.max(0, safeIndex));
+  }
+  const moveHighlight = (delta) => {
+    if (options.length === 0) return;
+    const next2 = Math.max(0, Math.min(options.length - 1, safeIndex + delta));
+    if (next2 !== safeIndex) {
+      setHighlightIndex(next2);
+      onHighlight == null ? void 0 : onHighlight(options[next2].value);
+    }
+  };
+  const toggle = () => {
+    if (options.length === 0) return;
+    const item = options[safeIndex].value;
+    const exists = value.includes(item);
+    onChange(exists ? value.filter((v) => v !== item) : [...value, item]);
+  };
+  const prev = () => moveHighlight(-1);
+  const next = () => moveHighlight(1);
+  const navBindings = direction === "vertical" ? { j: next, k: prev, down: next, up: prev } : { l: next, h: prev, right: next, left: prev };
+  useKeybindings(focus, {
+    ...navBindings,
+    " ": toggle,
+    ...onSubmit && { enter: () => onSubmit(value) }
+  });
+  const isHorizontal = direction === "horizontal";
+  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: isHorizontal ? "row" : "column", gap: isHorizontal ? 1 : 0, children: [
+    label != null && /* @__PURE__ */ jsx4(Text4, { children: label }),
+    options.map((option, index) => {
+      const highlighted = index === safeIndex;
+      const selected = value.includes(option.value);
+      if (render) {
+        return /* @__PURE__ */ jsx4(React4.Fragment, { children: render({ option, focused: focus.focused, highlighted, selected }) }, String(option.value));
+      }
+      return /* @__PURE__ */ jsxs4(Text4, { dimColor: !focus.focused, children: [
+        highlighted ? ">" : " ",
+        " [",
+        selected ? "x" : " ",
+        "] ",
+        option.label
+      ] }, String(option.value));
+    })
+  ] });
+}
 export {
   CommandPalette,
+  MultiSelect,
+  Select,
   TextInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "MIT",
   "repository": {
     "type": "git",