@kosmeo-ui/react 0.1.0

package/src/components/inputs/searchSelect/index.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import useFloatingPosition from "../../../hooks/useFloatingPosition.js";
+import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
+import useListKeyboard from "../../../hooks/useListKeyboard.js";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import { ReactNode, useEffect, useRef, useState } from "react";
+import Portal from "../../overlays/portal/index.js";
+import { PropsWithSize } from "../../types.js";
+import Input from "../input/index.js";
+import "../searchList/styles.css";
+
+interface SearchSelectProps<T> extends PropsWithSize {
+  /** **_Optional_** label above the field. */
+  label?: string;
+  /** The currently selected option, or null. */
+  value: T | null;
+  /** In-memory options to choose from (filtered client-side as the user types). */
+  options: T[];
+  /** Visible label for an option. */
+  getOptionLabel: (option: T) => string;
+  /** Stable React key for an option. */
+  getOptionKey: (option: T) => string;
+  /** Fired ONLY on an explicit pick — never on blur, so it can't clobber edits. */
+  onSelect: (option: T) => void;
+  /** **_Optional_** custom dropdown row renderer. */
+  renderOption?: (option: T) => ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  longDropDown?: boolean;
+}
+
+const SearchSelect = <T,>(props: SearchSelectProps<T>) => {
+  const {
+    size = "md",
+    required = false,
+    disabled = false,
+    longDropDown = false,
+  } = props;
+
+  const selectedLabel = props.value ? props.getOptionLabel(props.value) : "";
+  const selectedLabelRef = useRef(selectedLabel);
+  selectedLabelRef.current = selectedLabel;
+
+  const [inputValue, setInputValue] = useState(selectedLabel);
+  const [isOpen, setIsOpen] = useState(false);
+  const [filtering, setFiltering] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const optionRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const { anchorRef: inputWrapperRef, position: dropdownPos } =
+    useFloatingPosition({ isOpen });
+
+  useEffect(() => {
+    setInputValue(selectedLabel);
+    setFiltering(false);
+  }, [selectedLabel]);
+
+  const filterText = inputValue.trim().toLowerCase();
+  const filtered =
+    filtering && filterText
+      ? props.options.filter((o) =>
+          props.getOptionLabel(o).toLowerCase().includes(filterText)
+        )
+      : props.options;
+
+  const restore = () => {
+    setInputValue(selectedLabelRef.current);
+    setFiltering(false);
+    setIsOpen(false);
+  };
+
+  useOutsideClick([dropdownRef, listRef], restore);
+  useScrollIntoView(optionRefs, highlightedIndex, isOpen);
+
+  const choose = (option: T) => {
+    props.onSelect(option);
+    setInputValue(props.getOptionLabel(option));
+    setFiltering(false);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+
+  const handleKeyDown = useListKeyboard({
+    isOpen,
+    length: filtered.length,
+    highlightedIndex,
+    setHighlightedIndex,
+    onSelect: (i) => {
+      if (filtered[i]) choose(filtered[i]);
+    },
+    onClose: () => setIsOpen(false),
+  });
+
+  optionRefs.current = [];
+
+  const dropdownList =
+    isOpen && dropdownPos ? (
+      <ul
+        ref={listRef}
+        className={`k-search-list-dropdown k-search-list-dropdown-portal ${
+          longDropDown ? "large" : "small"
+        }`}
+        style={{
+          position: "fixed",
+          top: dropdownPos.top,
+          left: dropdownPos.left,
+          width: dropdownPos.width,
+        }}
+      >
+        {filtered.length > 0 ? (
+          filtered.map((option, index) => (
+            <li
+              ref={(el) => {
+                optionRefs.current[index] = el;
+              }}
+              key={props.getOptionKey(option)}
+              className={`k-search-list-option k-search-list-option-${size} ${
+                index === highlightedIndex
+                  ? "k-search-list-option-highlighted"
+                  : ""
+              }`}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                choose(option);
+              }}
+              onMouseOver={() => setHighlightedIndex(index)}
+            >
+              {props.renderOption
+                ? props.renderOption(option)
+                : props.getOptionLabel(option)}
+            </li>
+          ))
+        ) : (
+          <li
+            className={`k-search-list-no-results k-search-list-no-results-${size}`}
+          >
+            No results found
+          </li>
+        )}
+      </ul>
+    ) : null;
+
+  return (
+    <div className="k-search-list-container" ref={dropdownRef}>
+      <div ref={inputWrapperRef}>
+        <Input
+          label={props.label}
+          required={required}
+          disabled={disabled}
+          value={inputValue}
+          onChange={(e) => {
+            setInputValue(e.target.value);
+            setFiltering(true);
+            setIsOpen(true);
+          }}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => {
+            setTimeout(restore, 100);
+          }}
+          placeholder={props.placeholder || "Select..."}
+          dropDown={true}
+          isOpen={isOpen}
+          size={size}
+        />
+      </div>
+      <Portal>{dropdownList}</Portal>
+    </div>
+  );
+};
+
+export default SearchSelect;

package/src/components/inputs/select/index.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import FieldShell from "../../forms/fieldShell/index.js";
+import { PropsWithSize } from "../../types.js";
+import { useLayoutEffect } from "react";
+import "./styles.css";
+
+export interface SelectOption<T = string> {
+  value: T;
+  label: string;
+}
+
+interface SelectProps<T = string> extends PropsWithSize {
+  /** **_Optional_** if the field is disabled */
+  disabled?: boolean;
+  /** **_Optional_** label that appears above the select */
+  label?: string;
+  /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+  required?: boolean;
+  /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+  id?: string;
+  /** **_Optional_** placeholder text for the first option */
+  placeholder?: string;
+  /** **_Optional_** current selected value */
+  value?: T;
+  /** **_Optional_** options to display in the select */
+  options: SelectOption<T>[];
+  /** **_Optional_** function that is called when the value changes */
+  onChange?: (value: T | undefined) => void;
+  /** **_Optional_** function that is called when the select is focused */
+  onFocus?: React.FocusEventHandler<HTMLSelectElement>;
+  /** **_Optional_** function that is called when the select loses focus */
+  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
+}
+
+const Select = <T extends string = string>(props: SelectProps<T>) => {
+  const { size = "md", disabled = false, required = false } = props;
+
+  const selectId =
+    props.id || `select-${Math.random().toString(36).substring(2, 9)}`;
+
+  const selectClasses = ["k-select", `k-select-${size}`]
+    .filter(Boolean)
+    .join(" ");
+
+  // When no value matches any option and there's no placeholder,
+  // the browser displays the first option but React state is out of sync.
+  // Fire onChange synchronously (layout effect) so parent state is updated
+  // before other effects run.
+  useLayoutEffect(() => {
+    if (!props.onChange || props.options.length === 0) return;
+    const currentValue = props.value || "";
+    const hasMatch =
+      props.options.some((o) => String(o.value) === String(currentValue)) ||
+      (props.placeholder && currentValue === "");
+    if (!hasMatch) {
+      props.onChange(props.options[0].value);
+    }
+  }, [props.options, props.value, props.placeholder]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    if (props.onChange) {
+      props.onChange(selectedValue === "" ? undefined : (selectedValue as T));
+    }
+  };
+
+  return (
+    <FieldShell
+      label={props.label}
+      required={required}
+      htmlFor={selectId}
+      className="k-select-container"
+    >
+      <div className="k-select-wrapper">
+        <select
+          id={selectId}
+          value={props.value || ""}
+          required={required}
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+          className={selectClasses}
+        >
+          {props.placeholder && (
+            <option value="" disabled={required}>
+              {props.placeholder}
+            </option>
+          )}
+          {props.options.map((option, index) => (
+            <option key={index} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </FieldShell>
+  );
+};
+
+export default Select;

package/src/components/inputs/select/styles.css

@@ -0,0 +1,66 @@
+.k-select-container {
+  width: 100%;
+}
+
+.k-select-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.k-select {
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  color: var(--text-color);
+  width: 100%;
+  box-sizing: border-box;
+  line-height: 1.5;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  background-color: var(--background-color-light);
+  cursor: pointer;
+}
+
+.k-select-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.69rem 0.75rem;
+}
+
+.k-select-md {
+  font-size: var(--text-size-md);
+  padding: 0.84rem 1rem;
+}
+
+.k-select-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.98rem 1.25rem;
+}
+
+.k-select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px var(--border-shadow-color-active);
+}
+
+.k-select:disabled {
+  background-color: var(--background-color-disabled);
+  color: var(--text-color-disabled);
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+}
+
+.k-select option {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  padding: 0.5rem;
+}
+
+.k-select:invalid {
+  border-color: var(--danger-color);
+}
+
+.k-select:hover:not(:disabled) {
+  border-color: var(--border-color-hover);
+}

package/src/components/inputs/switch/index.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import "./styles.css";
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  labelLocation?: "left" | "right";
+  disabled?: boolean;
+  isLoading?: boolean;
+  size?: "sm" | "md";
+  id?: string;
+}
+
+const Switch = (props: SwitchProps) => {
+  const {
+    labelLocation = "right",
+    disabled = false,
+    isLoading = false,
+    size = "md",
+  } = props;
+
+  const inputId =
+    props.id || `switch-${Math.random().toString(36).substring(2, 9)}`;
+
+  return (
+    <div className={`k-switch-container k-switch-${labelLocation}`}>
+      {props.label && labelLocation === "left" && (
+        <label className="k-switch-label" htmlFor={inputId}>
+          {props.label}
+        </label>
+      )}
+      <div
+        className={`k-switch-track k-switch-${size}${props.checked ? " k-switch-on" : ""}${disabled || isLoading ? " k-switch-disabled" : ""}${isLoading ? " k-switch-loading" : ""}`}
+      >
+        <input
+          id={inputId}
+          type="checkbox"
+          checked={props.checked}
+          onChange={props.onChange}
+          disabled={disabled || isLoading}
+          className="k-switch-input"
+        />
+        <span className="k-switch-thumb" />
+      </div>
+      {props.label && labelLocation === "right" && (
+        <label className="k-switch-label" htmlFor={inputId}>
+          {props.label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default Switch;

package/src/components/inputs/switch/styles.css

@@ -0,0 +1,116 @@
+.k-switch-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-switch-left {
+  flex-direction: row;
+}
+
+.k-switch-right {
+  flex-direction: row;
+}
+
+.k-switch-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+  cursor: pointer;
+  user-select: none;
+}
+
+.k-switch-track {
+  position: relative;
+  border-radius: 999px;
+  background-color: var(--border-color);
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.k-switch-track.k-switch-on {
+  background-color: var(--success-color);
+}
+
+/* Size: md (default) */
+.k-switch-md {
+  width: 40px;
+  height: 22px;
+}
+
+.k-switch-md .k-switch-thumb {
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  left: 2px;
+}
+
+.k-switch-md.k-switch-on .k-switch-thumb {
+  transform: translateX(18px);
+}
+
+/* Size: sm */
+.k-switch-sm {
+  width: 32px;
+  height: 18px;
+}
+
+.k-switch-sm .k-switch-thumb {
+  width: 14px;
+  height: 14px;
+  top: 2px;
+  left: 2px;
+}
+
+.k-switch-sm.k-switch-on .k-switch-thumb {
+  transform: translateX(14px);
+}
+
+/* Thumb */
+.k-switch-thumb {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--background-color-light);
+  transition: transform 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+/* Hidden input */
+.k-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* Disabled */
+.k-switch-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.k-switch-disabled .k-switch-input {
+  cursor: not-allowed;
+}
+
+.k-switch-disabled + .k-switch-label,
+.k-switch-label:has(~ .k-switch-track.k-switch-disabled) {
+  color: var(--text-color-disabled);
+  cursor: not-allowed;
+}
+
+/* Loading */
+.k-switch-loading {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.k-switch-loading .k-switch-input {
+  cursor: wait;
+}

package/src/components/inputs/textArea/index.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import FieldShell from "../../forms/fieldShell/index.js";
+import { PropsWithSize } from "../../types.js";
+import { useEffect, useRef } from "react";
+import "./styles.css";
+
+interface TextAreaProps extends PropsWithSize {
+  /** **_Optional_** if the field is disabled */
+  disabled?: boolean;
+  /** **_Optional_** label that appears above the input */
+  label?: string | React.ReactNode;
+  /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+  required?: boolean;
+  /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+  id?: string;
+  /** **_Optional_** placeholder text that will appear in the input until the user adds a value */
+  placeholder?: string;
+  /** **_Optional_** value to be set when the element first loads */
+  value?: string;
+  /** **_Optional_** the number of rows */
+  rows?: number;
+  /** **_Optional_** the number of colomuns */
+  cols?: number;
+  /** **_Optional_** maximum value for the input */
+  ref?: React.Ref<HTMLTextAreaElement>;
+  /** **_Optional_** maximum value for the input */
+  max?: number;
+  /** **_Optional_** minimum value for the input */
+  min?: number;
+  /** **_Optional_** whether to show character count next to label */
+  showCharCount?: boolean;
+  /** **_Optional_** function that is called when the value of the input changes */
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+  /** **_Optional_** function that is called when the input is focused */
+  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+  /** **_Optional_** function that is called when the input loses focus */
+  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+  /** **_Optional_** function that is called when the user presses a key down in the input */
+  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+  /** **_Optional_** whether to auto-expand the textarea as user types */
+  autoExpand?: boolean;
+  /** **_Optional_** maximum number of rows when auto-expanding */
+  maxRows?: number;
+}
+
+const TextArea = (props: TextAreaProps) => {
+  const {
+    size = "md",
+    disabled = false,
+    required = false,
+    autoExpand = false,
+    maxRows = 5,
+    rows = 3,
+  } = props;
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const internalRef = props.ref || textareaRef;
+
+  const inputId =
+    props.id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  const adjustHeight = () => {
+    if (!autoExpand) return;
+    const ref = typeof internalRef === "object" && internalRef?.current;
+    if (!ref) return;
+
+    ref.style.height = "auto";
+
+    const style = window.getComputedStyle(ref);
+    const lHeight = parseInt(style.lineHeight);
+    const pTop = parseInt(style.paddingTop);
+    const pBottom = parseInt(style.paddingBottom);
+    const bTop = parseInt(style.borderTopWidth);
+    const bBottom = parseInt(style.borderBottomWidth);
+
+    const minHeight = lHeight * rows + pTop + pBottom + bTop + bBottom;
+    const maxHeight = lHeight * maxRows + pTop + pBottom + bTop + bBottom;
+
+    if (!ref.value.trim()) {
+      ref.style.height = `${minHeight}px`;
+      ref.style.overflowY = "hidden";
+      return;
+    }
+
+    const newHeight = Math.min(ref.scrollHeight, maxHeight);
+    ref.style.height = `${Math.max(newHeight, minHeight)}px`;
+    ref.style.overflowY = ref.scrollHeight > maxHeight ? "auto" : "hidden";
+  };
+
+  useEffect(() => {
+    adjustHeight();
+  }, [props.value, autoExpand, maxRows, rows]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (props.onChange) props.onChange(e);
+    adjustHeight();
+  };
+
+  const charCount = props.showCharCount ? (
+    <>
+      {props.value?.length || 0}
+      {props.max && ` / ${props.max}`}
+    </>
+  ) : undefined;
+
+  return (
+    <FieldShell
+      label={props.label}
+      required={required}
+      htmlFor={inputId}
+      labelAside={charCount}
+    >
+      <textarea
+        id={inputId}
+        className={`k-textarea k-textarea-${size} ${
+          autoExpand ? "k-textarea-auto-expand" : ""
+        }`}
+        placeholder={props.placeholder}
+        rows={rows}
+        cols={props.cols}
+        value={props.value}
+        ref={internalRef}
+        required={required}
+        maxLength={props.max}
+        minLength={props.min}
+        disabled={disabled}
+        onChange={handleChange}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
+        onKeyDown={props.onKeyDown}
+      />
+    </FieldShell>
+  );
+};
+
+export default TextArea;

package/src/components/inputs/textArea/styles.css

@@ -0,0 +1,55 @@
+.k-textarea {
+  background-color: var(--background-color-light);
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  color: var(--text-color);
+  width: 100%;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  resize: vertical;
+  min-height: 5rem;
+  display: block;
+}
+
+.k-textarea-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-textarea-md {
+  font-size: var(--text-size-md);
+  padding: 0.625rem 1rem;
+}
+
+.k-textarea-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.75rem 1.25rem;
+}
+
+.k-textarea::placeholder {
+  color: var(--text-color-secondary);
+  opacity: 0.7;
+}
+
+.k-textarea:focus {
+  outline: none;
+  border-color: var(--border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+}
+
+.k-textarea:disabled {
+  background-color: var(--bg-color-disabled);
+  color: var(--text-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+  resize: none;
+}
+
+.k-textarea-auto-expand {
+  resize: none;
+  overflow: hidden;
+  transition: height 0.1s ease;
+  min-height: unset;
+}