@optimum-intelligence/opti-ui 0.0.0-stage → 0.2.0

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type InputProps } from '../input/Input';
+export interface SearchInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'startAdornment' | 'endAdornment'> {
+    value?: string;
+    defaultValue?: string;
+    /** Called with the new text on typing and with `''` on clear. */
+    onValueChange?: (value: string) => void;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /** Replaces the leading search icon. */
+    icon?: React.ReactNode;
+}
+/** Text input with a search icon and a clear button that appears once there is a value. */
+export declare function SearchInput({ value, defaultValue, onValueChange, clearLabel, icon, disabled, ref, ...props }: SearchInputProps): React.JSX.Element;

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,114 @@
+"use client";
+import { SearchIcon, XIcon } from "../../icons/index.js";
+import { IconButton } from "../button/Button.js";
+import { Input } from "../input/Input.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/search-input/SearchInput.tsx
+/** Text input with a search icon and a clear button that appears once there is a value. */
+function SearchInput(t0) {
+	const $ = c(26);
+	let disabled;
+	let icon;
+	let onValueChange;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let value;
+	if ($[0] !== t0) {
+		({value, defaultValue: t1, onValueChange, clearLabel: t2, icon, disabled, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = disabled;
+		$[2] = icon;
+		$[3] = onValueChange;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = value;
+	} else {
+		disabled = $[1];
+		icon = $[2];
+		onValueChange = $[3];
+		props = $[4];
+		ref = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		value = $[8];
+	}
+	const defaultValue = t1 === void 0 ? "" : t1;
+	const clearLabel = t2 === void 0 ? "Clear search" : t2;
+	const [inner, setInner] = React.useState(defaultValue);
+	const current = value ?? inner;
+	const inputRef = React.useRef(null);
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => inputRef.current;
+		$[9] = t3;
+	} else t3 = $[9];
+	React.useImperativeHandle(ref, t3);
+	let t4;
+	if ($[10] !== onValueChange) {
+		t4 = (next) => {
+			setInner(next);
+			onValueChange?.(next);
+		};
+		$[10] = onValueChange;
+		$[11] = t4;
+	} else t4 = $[11];
+	const change = t4;
+	let t5;
+	if ($[12] !== icon) {
+		t5 = icon ?? /* @__PURE__ */ jsx(SearchIcon, {});
+		$[12] = icon;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== change || $[15] !== clearLabel || $[16] !== current || $[17] !== disabled) {
+		t6 = current && !disabled ? /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			shape: "circle",
+			"aria-label": clearLabel,
+			onClick: () => {
+				change("");
+				inputRef.current?.focus();
+			},
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}) : void 0;
+		$[14] = change;
+		$[15] = clearLabel;
+		$[16] = current;
+		$[17] = disabled;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== change || $[20] !== current || $[21] !== disabled || $[22] !== props || $[23] !== t5 || $[24] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Input, {
+			ref: inputRef,
+			type: "text",
+			role: "searchbox",
+			enterKeyHint: "search",
+			autoComplete: "off",
+			disabled,
+			...props,
+			value: current,
+			onValueChange: change,
+			startAdornment: t5,
+			endAdornment: t6
+		});
+		$[19] = change;
+		$[20] = current;
+		$[21] = disabled;
+		$[22] = props;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	return t7;
+}
+//#endregion
+export { SearchInput };
+
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["React","Input","InputProps","IconButton","SearchIcon","XIcon","SearchInputProps","Omit","value","defaultValue","onValueChange","clearLabel","icon","ReactNode","SearchInput","t0","$","_c","disabled","props","ref","t1","t2","undefined","inner","setInner","useState","current","inputRef","useRef","t3","Symbol","for","HTMLInputElement","useImperativeHandle","t4","next","change","t5","t6","focus","t7","_c"],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input, type InputProps } from '../input/Input';\nimport { IconButton } from '../button/Button';\nimport { SearchIcon, XIcon } from '../../icons';\n\nexport interface SearchInputProps\n  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'startAdornment' | 'endAdornment'> {\n  value?: string;\n  defaultValue?: string;\n  /** Called with the new text on typing and with `''` on clear. */\n  onValueChange?: (value: string) => void;\n  /** Accessible name of the clear button. */\n  clearLabel?: string;\n  /** Replaces the leading search icon. */\n  icon?: React.ReactNode;\n}\n\n/** Text input with a search icon and a clear button that appears once there is a value. */\nexport function SearchInput({\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearLabel = 'Clear search',\n  icon,\n  disabled,\n  ref,\n  ...props\n}: SearchInputProps) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const current = value ?? inner;\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n  const change = (next: string) => {\n    setInner(next);\n    onValueChange?.(next);\n  };\n\n  return (\n    <Input\n      ref={inputRef}\n      type=\"text\"\n      role=\"searchbox\"\n      enterKeyHint=\"search\"\n      autoComplete=\"off\"\n      disabled={disabled}\n      {...props}\n      value={current}\n      onValueChange={change}\n      startAdornment={icon ?? <SearchIcon />}\n      endAdornment={\n        current && !disabled ? (\n          <IconButton\n            size=\"sm\"\n            shape=\"circle\"\n            aria-label={clearLabel}\n            onClick={() => {\n              change('');\n              inputRef.current?.focus();\n            }}\n          >\n            <XIcon />\n          </IconButton>\n        ) : undefined\n      }\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/select/Select.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { ControlSize } from '../input/Input';
+export interface SelectTriggerProps extends BaseSelect.Trigger.Props {
+    size?: ControlSize;
+    /** Placeholder shown by the default value slot. */
+    placeholder?: React.ReactNode;
+}
+/** The select button. Renders the value and chevron unless children are given. */
+declare function SelectTrigger({ size, placeholder, className, children, ref, ...props }: SelectTriggerProps): React.JSX.Element;
+declare function SelectValue({ className, ref, ...props }: BaseSelect.Value.Props): React.JSX.Element;
+export interface SelectContentProps extends BaseSelect.Popup.Props {
+    side?: BaseSelect.Positioner.Props['side'];
+    align?: BaseSelect.Positioner.Props['align'];
+    sideOffset?: BaseSelect.Positioner.Props['sideOffset'];
+    /** Overlap the trigger so the selected item lines up with it (macOS style). */
+    alignItemWithTrigger?: boolean;
+    positionerProps?: BaseSelect.Positioner.Props;
+}
+/** Portal + positioner + popup + list in one. */
+declare function SelectContent({ side, align, sideOffset, alignItemWithTrigger, positionerProps, className, children, ref, ...props }: SelectContentProps): React.JSX.Element;
+declare function SelectItem({ className, children, ref, ...props }: BaseSelect.Item.Props): React.JSX.Element;
+declare function SelectGroup({ className, ref, ...props }: BaseSelect.Group.Props): React.JSX.Element;
+declare function SelectGroupLabel({ className, ref, ...props }: BaseSelect.GroupLabel.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ref, ...props }: BaseSelect.Separator.Props): React.JSX.Element;
+declare function SelectLabel({ className, ref, ...props }: BaseSelect.Label.Props): React.JSX.Element;
+export interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SelectOptionGroup {
+    label: React.ReactNode;
+    items: SelectOption[];
+}
+type RootProps = Omit<BaseSelect.Root.Props<string, false>, 'items' | 'children' | 'multiple'>;
+export interface SelectProps extends RootProps {
+    /** Options, or groups of options. */
+    items: Array<SelectOption | SelectOptionGroup>;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    size?: ControlSize;
+    /** Props passed to the trigger button (className, style, aria-*). */
+    triggerProps?: Omit<SelectTriggerProps, 'size' | 'placeholder'>;
+    contentProps?: Omit<SelectContentProps, 'children'>;
+}
+declare function SelectComponent({ items, label, description, error, placeholder, size, triggerProps, contentProps, name, disabled, required, ...rootProps }: SelectProps): React.JSX.Element;
+/**
+ * `<Select items={…} />` renders a complete labelled select. For full control
+ * compose the parts: `Select.Root`, `Select.Trigger`, `Select.Content`,
+ * `Select.Item`, `Select.Group`, `Select.GroupLabel`, `Select.Separator`.
+ */
+export declare const Select: typeof SelectComponent & {
+    Root: typeof BaseSelect.Root;
+    Label: typeof SelectLabel;
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Group: typeof SelectGroup;
+    GroupLabel: typeof SelectGroupLabel;
+    Separator: typeof SelectSeparator;
+};
+export {};