@kosmeo-ui/react 0.1.0

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

@@ -0,0 +1,186 @@
+"use client";
+
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import DropdownArrowButton from "../dropdownArrowButton/index.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import FieldShell from "../../forms/fieldShell/index.js";
+import { PropsWithSize } from "../../types.js";
+import { ReactNode, useState } from "react";
+import "./styles.css";
+
+interface InputProps extends PropsWithSize {
+  /**
+   * **_Optional_** type of input field to render.
+   *
+   * Defaults to `text`
+   */
+  type?:
+    | "text"
+    | "number"
+    | "password"
+    | "email"
+    | "date"
+    | "datetime-local"
+    | "time"
+    | "url"
+    | "tel";
+
+  /** **_Optional_** if the field is disabled */
+  disabled?: boolean;
+  /** **_Optional_** if the field is a dropdown */
+  dropDown?: boolean;
+  /** **_Optional_** whether or not the drop down options are open */
+  isOpen?: boolean;
+  /** **_Optional_** label that appears above the input */
+  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 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 | number;
+  /** **_Optional_** reference to the input element */
+  ref?: React.Ref<HTMLInputElement>;
+  /** **_Optional_** maximum value for the input */
+  max?: string | number;
+  /** **_Optional_** minimum value for the input */
+  min?: string | number;
+  /** **_Optional_** whether to show character count */
+  showCharCount?: boolean;
+  /** **_Optional_** whether the input should be focused when it first loads */
+  autoFocus?: boolean;
+  /** **_Optional_** name attribute for the input (useful for form submissions) */
+  name?: string;
+  /** **_Optional_** autocomplete attribute for the input */
+  autoComplete?: string;
+  /** **_Optional_** inline addon rendered on the left (currency symbol, unit prefix). */
+  prefix?: ReactNode;
+  /** **_Optional_** inline addon rendered on the right (unit suffix, currency code). */
+  suffix?: ReactNode;
+  /** **_Optional_** error message rendered below the input (replaces helperText if both set). */
+  error?: ReactNode;
+  /** **_Optional_** helper text rendered below the input (hidden when `error` is set). */
+  helperText?: ReactNode;
+  /** **_Optional_** function that is called when the value of the input changes */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  /** **_Optional_** function that is called when the input is focused */
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  /** **_Optional_** function that is called when the input loses focus */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  /** **_Optional_** function that is called when the user presses a key down in the input */
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  /** **_Optional_** function that is called when the input is clicked */
+  onClick?: React.MouseEventHandler<HTMLInputElement>;
+}
+
+const Input = (props: InputProps) => {
+  const {
+    type = "text",
+    size = "md",
+    disabled = false,
+    isOpen = false,
+    required = false,
+    prefix,
+    suffix,
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+
+  const inputId =
+    props.id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const inputType =
+    type === "password" ? (showPassword ? "text" : "password") : type;
+
+  const hasAddon = prefix !== undefined || suffix !== undefined;
+  const inputClasses = [
+    "k-input",
+    `k-input-${size}`,
+    type === "password" && "k-input-password",
+    hasAddon && "k-input-with-addon",
+    prefix !== undefined && "k-input-with-prefix",
+    suffix !== undefined && "k-input-with-suffix",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const renderAddon = (content: ReactNode, side: "prefix" | "suffix") => (
+    <span
+      className={`k-input-addon k-input-addon-${side} k-input-addon-${size}`}
+      aria-hidden="true"
+    >
+      {content}
+    </span>
+  );
+
+  const charCount =
+    props.showCharCount && type === "text" ? (
+      <>
+        {String(props.value || "").length}
+        {props.max && ` / ${props.max}`}
+      </>
+    ) : undefined;
+
+  return (
+    <FieldShell
+      label={props.label}
+      required={required}
+      htmlFor={inputId}
+      labelAside={charCount}
+      error={props.error}
+      helperText={props.helperText}
+    >
+      <div
+        className={`k-input-wrapper${hasAddon ? " k-input-wrapper-addon" : ""}`}
+      >
+        {prefix !== undefined && renderAddon(prefix, "prefix")}
+        <input
+          ref={props.ref}
+          id={inputId}
+          name={props.name}
+          type={inputType}
+          placeholder={props.placeholder}
+          value={props.value}
+          max={props.max}
+          min={props.min}
+          required={required}
+          autoFocus={props.autoFocus}
+          autoComplete={props.autoComplete}
+          disabled={disabled}
+          onChange={props.onChange}
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+          onClick={props.onClick}
+          onKeyDown={props.onKeyDown}
+          className={inputClasses}
+        />
+        {suffix !== undefined && renderAddon(suffix, "suffix")}
+        {props.dropDown && (
+          <DropdownArrowButton
+            size={size}
+            isOpen={isOpen}
+            onClick={props.onClick}
+          />
+        )}
+        {type === "password" && (
+          <button
+            type="button"
+            onClick={togglePasswordVisibility}
+            className="k-password-toggle-button"
+            aria-label={showPassword ? "Hide password" : "Show password"}
+            disabled={disabled}
+          >
+            <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
+          </button>
+        )}
+      </div>
+    </FieldShell>
+  );
+};
+
+export default Input;

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

@@ -0,0 +1,152 @@
+.k-input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.k-input {
+  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;
+}
+
+.k-input-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-input-md {
+  font-size: var(--text-size-md);
+  padding: 0.625rem 1rem;
+}
+
+.k-input-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.75rem 1.25rem;
+}
+
+.k-input-password {
+  padding-right: 2.5rem;
+}
+
+.k-input::placeholder {
+  color: var(--text-color-secondary);
+  opacity: 0.7;
+}
+
+.k-input[type="date"]:empty {
+  color: var(--text-color-secondary);
+}
+
+.k-input:focus {
+  outline: none;
+  border-color: var(--border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+}
+
+.k-input:disabled {
+  background-color: var(--bg-color-disabled);
+  color: var(--text-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.k-password-toggle-button {
+  position: absolute;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-secondary);
+  transition: color 0.2s ease-in-out;
+}
+
+.k-password-toggle-button:hover {
+  color: var(--primary-color);
+}
+
+.k-password-toggle-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem var(--border-shadow-color-active);
+  border-radius: 50%;
+}
+
+.k-password-toggle-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.k-password-toggle-button:disabled:hover {
+  color: var(--text-color-secondary);
+}
+
+.k-input-wrapper-addon {
+  display: flex;
+  align-items: stretch;
+}
+
+.k-input-with-prefix {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+}
+
+.k-input-with-suffix {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+.k-input-addon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color-dark);
+  border: 0.0625rem solid var(--border-color);
+  color: var(--text-color-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.k-input-addon-prefix {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  border-right: none;
+}
+
+.k-input-addon-suffix {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-left: none;
+}
+
+.k-input-addon-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.625rem;
+}
+
+.k-input-addon-md {
+  font-size: var(--text-size-md);
+  padding: 0.625rem 0.75rem;
+}
+
+.k-input-addon-lg {
+  font-size: var(--text-size-lg);
+  padding: 0.75rem 0.875rem;
+}
+
+.k-input-wrapper-addon:focus-within .k-input-addon {
+  border-color: var(--border-color-active);
+}

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

@@ -0,0 +1,77 @@
+"use client";
+
+import Select from "../select/index.js";
+
+export interface LanguageOption {
+  value: string;
+  label: string;
+}
+
+export const SUPPORTED_LANGUAGES: LanguageOption[] = [
+  { value: "en-US", label: "English (United States)" },
+  { value: "en-GB", label: "English (United Kingdom)" },
+  { value: "en-CA", label: "English (Canada)" },
+  { value: "en-AU", label: "English (Australia)" },
+  { value: "es-ES", label: "Spanish (Spain)" },
+  { value: "es-MX", label: "Spanish (Mexico)" },
+  { value: "fr-FR", label: "French (France)" },
+  { value: "fr-CA", label: "French (Canada)" },
+  { value: "de-DE", label: "German (Germany)" },
+  { value: "it-IT", label: "Italian (Italy)" },
+  { value: "pt-BR", label: "Portuguese (Brazil)" },
+  { value: "pt-PT", label: "Portuguese (Portugal)" },
+  { value: "nl-NL", label: "Dutch (Netherlands)" },
+  { value: "sv-SE", label: "Swedish (Sweden)" },
+  { value: "da-DK", label: "Danish (Denmark)" },
+  { value: "fi-FI", label: "Finnish (Finland)" },
+  { value: "no-NO", label: "Norwegian (Norway)" },
+  { value: "pl-PL", label: "Polish (Poland)" },
+  { value: "ru-RU", label: "Russian (Russia)" },
+  { value: "tr-TR", label: "Turkish (Turkey)" },
+  { value: "zh-CN", label: "Chinese (Simplified, China)" },
+  { value: "zh-TW", label: "Chinese (Traditional, Taiwan)" },
+  { value: "ja-JP", label: "Japanese (Japan)" },
+  { value: "ko-KR", label: "Korean (Korea)" },
+  { value: "ar-SA", label: "Arabic (Saudi Arabia)" },
+  { value: "he-IL", label: "Hebrew (Israel)" },
+  { value: "hi-IN", label: "Hindi (India)" },
+];
+
+interface LanguageSelectProps {
+  label?: string;
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** When true, includes a leading "— None —" option (default true). */
+  includeNone?: boolean;
+}
+
+const LanguageSelect = ({
+  label = "Preferred language",
+  value,
+  onChange,
+  id,
+  disabled,
+  required,
+  includeNone = true,
+}: LanguageSelectProps) => {
+  const options: LanguageOption[] = includeNone
+    ? [{ value: "", label: "— None —" }, ...SUPPORTED_LANGUAGES]
+    : SUPPORTED_LANGUAGES;
+
+  return (
+    <Select
+      label={label}
+      id={id}
+      value={value ?? ""}
+      disabled={disabled}
+      required={required}
+      options={options}
+      onChange={(v) => onChange?.(v ? v : null)}
+    />
+  );
+};
+
+export default LanguageSelect;

package/src/components/inputs/multiSelect/dropDown.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import IconButton from "../../buttons/iconButton/index.js";
+import Tooltip from "../../feedback/tooltip/index.js";
+import { PropsWithSize } from "../../types.js";
+import Input from "../input/index.js";
+import { useMemo } from "react";
+import {
+  faCheckDouble,
+  faXmark,
+  faCheck,
+} from "@fortawesome/free-solid-svg-icons";
+
+interface DropDownProps<T> extends PropsWithSize {
+  value: T[];
+  searchTerm: string;
+  searchInputRef: React.RefObject<HTMLInputElement | null>;
+  filteredOptions: T[];
+  options: T[];
+  labelKey: keyof T;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  handleSelectAll: () => void;
+  handleClearAll: () => void;
+  handleOptionToggle: (optionValue: T) => void;
+}
+
+export const DropDownSection = <T,>(props: DropDownProps<T>) => {
+  const { size = "md", value = [] } = props;
+
+  const list = useMemo(() => {
+    return props.filteredOptions.length > 0 ? (
+      props.filteredOptions.map((option) => {
+        const isSelected = value.find(
+          (v) => v[props.labelKey] === option[props.labelKey]
+        );
+        const key = Math.random().toString(36).slice(2);
+        return (
+          <li
+            key={key}
+            className={`k-multiselect-option k-multiselect-option-${size} ${
+              isSelected ? "k-multiselect-option-selected" : ""
+            }`}
+            onClick={(e) => {
+              e.stopPropagation();
+              props.handleOptionToggle(option);
+            }}
+          >
+            <span className="k-multiselect-option-label">
+              {String(option[props.labelKey])}
+            </span>
+            {isSelected && (
+              <FontAwesomeIcon icon={faCheck} className="k-multiselect-check" />
+            )}
+          </li>
+        );
+      })
+    ) : (
+      <li className={`k-multiselect-no-results k-multiselect-option-${size}`}>
+        {props.options.length === 0
+          ? "No options available"
+          : "No options found"}
+      </li>
+    );
+  }, [props.filteredOptions, value]);
+
+  return (
+    <div className={`k-multiselect-dropdown k-multiselect-dropdown-${size}`}>
+      <div className="k-multiselect-search-container">
+        <Input
+          ref={props.searchInputRef}
+          type="text"
+          placeholder="Search options..."
+          size={props.size}
+          value={props.searchTerm}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            props.setSearchTerm(e.target.value)
+          }
+          onClick={(e: React.MouseEvent<HTMLInputElement>) =>
+            e.stopPropagation()
+          }
+        />
+        <div className="k-multiselect-bulk-actions">
+          <Tooltip content="Select All">
+            <IconButton
+              icon={faCheckDouble}
+              size={size}
+              variant="success"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+                props.handleSelectAll();
+              }}
+              disabled={value.length === props.options.length}
+            />
+          </Tooltip>
+          <Tooltip content="Clear All">
+            <IconButton
+              icon={faXmark}
+              size={size}
+              variant="danger"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+                props.handleClearAll();
+              }}
+              disabled={value.length === 0}
+            />
+          </Tooltip>
+        </div>
+      </div>
+
+      <ul className="k-multiselect-options-list">{list}</ul>
+    </div>
+  );
+};