@kosmeo-ui/react 0.1.0

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

@@ -0,0 +1,50 @@
+"use client";
+
+import OptionsGroup from "../../forms/optionsGroup/index.js";
+import Checkbox from "../checkbox/index.js";
+import { ReactNode } from "react";
+
+export interface CheckboxOption<T = string> {
+  value: T;
+  label: ReactNode;
+}
+
+interface CheckboxGroupProps<T = string> {
+  label?: string;
+  name: string;
+  options: CheckboxOption<T>[];
+  values: T[];
+  onChange: (values: T[]) => void;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+const CheckboxGroup = <T extends string = string>(
+  props: CheckboxGroupProps<T>
+) => {
+  const { disabled = false, required = false } = props;
+
+  const handleToggle = (value: T) => {
+    const newValues = props.values.includes(value)
+      ? props.values.filter((v) => v !== value)
+      : [...props.values, value];
+    props.onChange(newValues);
+  };
+
+  return (
+    <OptionsGroup label={props.label} required={required}>
+      {props.options.map((option, index) => (
+        <Checkbox
+          key={index}
+          checked={props.values.includes(option.value)}
+          onChange={() => handleToggle(option.value)}
+          label={option.label}
+          labelLocation="right"
+          disabled={disabled}
+        />
+      ))}
+    </OptionsGroup>
+  );
+};
+
+export default CheckboxGroup;

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

@@ -0,0 +1,77 @@
+"use client";
+
+import Input from "../input/index.js";
+import { ChangeEvent } from "react";
+import "./styles.css";
+
+export interface ColorPickerProps {
+  label?: string;
+  value: string;
+  onChange: (hex: string) => void;
+  placeholder?: string;
+  error?: string;
+  /** Allow empty string (no color). Defaults to false. */
+  allowEmpty?: boolean;
+  required?: boolean;
+  /** Override the default validation error message. */
+  invalidMessage?: string;
+}
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+const DEFAULT_INVALID_MESSAGE = "Color must be #RRGGBB (e.g. #A1B2C3)";
+
+const ColorPicker = ({
+  label,
+  value,
+  onChange,
+  placeholder = "#A1B2C3",
+  error,
+  allowEmpty = false,
+  required,
+  invalidMessage = DEFAULT_INVALID_MESSAGE,
+}: ColorPickerProps) => {
+  const trimmed = value.trim();
+  const isEmpty = trimmed === "";
+  const isValid = HEX_RE.test(trimmed);
+  const internalError =
+    !isValid && !(allowEmpty && isEmpty) && trimmed.length > 0
+      ? invalidMessage
+      : undefined;
+  const swatchValue = isValid ? trimmed : "#000000";
+  const displayError = error ?? internalError;
+
+  const handleSwatchChange = (e: ChangeEvent<HTMLInputElement>) =>
+    onChange(e.target.value);
+
+  return (
+    <div className="k-color-picker">
+      {label && (
+        <label className="k-color-picker-label">
+          {label}
+          {required && <span aria-hidden> *</span>}
+        </label>
+      )}
+      <div className="k-color-picker-row">
+        <input
+          type="color"
+          aria-label={label ? `${label} swatch` : "Color swatch"}
+          value={swatchValue}
+          onChange={handleSwatchChange}
+          className="k-color-picker-swatch"
+        />
+        <div className="k-color-picker-input">
+          <Input
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+      </div>
+      {displayError && (
+        <div className="k-color-picker-error">{displayError}</div>
+      )}
+    </div>
+  );
+};
+
+export default ColorPicker;

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

@@ -0,0 +1,52 @@
+.k-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.k-color-picker-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.k-color-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-color-picker-swatch {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+}
+
+.k-color-picker-swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.k-color-picker-swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 0.25rem;
+}
+
+.k-color-picker-swatch::-moz-color-swatch {
+  border: none;
+  border-radius: 0.25rem;
+}
+
+.k-color-picker-input {
+  flex: 1;
+}
+
+.k-color-picker-error {
+  font-size: 0.8125rem;
+  color: var(--danger-color);
+}

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

@@ -0,0 +1,158 @@
+"use client";
+
+import FieldShell from "../../forms/fieldShell/index.js";
+import { ChangeEvent } from "react";
+import "./styles.css";
+import {
+  dateInputToIso,
+  dateTimeLocalToIso,
+  toDateInputValue,
+  toDateTimeLocalValue,
+} from "./utils.js";
+
+export interface DateInputBaseProps {
+  label?: string;
+  required?: boolean;
+  error?: string;
+  helperText?: string;
+  disabled?: boolean;
+  min?: string;
+  max?: string;
+  id?: string;
+  name?: string;
+}
+
+export interface DateInputProps extends DateInputBaseProps {
+  /** Accepts an ISO string or `Date`. Empty string and null both mean "no value". */
+  value: string | Date | null;
+  /** Fires with an ISO date-time string (start-of-day) or `null` when cleared. */
+  onChange: (iso: string | null) => void;
+}
+
+export interface DateTimeInputProps extends DateInputBaseProps {
+  value: string | Date | null;
+  onChange: (iso: string | null) => void;
+}
+
+export interface TimeInputProps extends DateInputBaseProps {
+  /** `HH:mm` (24-hour). */
+  value: string | null;
+  onChange: (time: string | null) => void;
+}
+
+export const DateInput = ({
+  value,
+  onChange,
+  label,
+  required,
+  error,
+  helperText,
+  disabled,
+  min,
+  max,
+  id,
+  name,
+}: DateInputProps) => {
+  const handle = (e: ChangeEvent<HTMLInputElement>) =>
+    onChange(dateInputToIso(e.target.value));
+  return (
+    <FieldShell
+      label={label}
+      required={required}
+      error={error}
+      helperText={helperText}
+      htmlFor={id}
+    >
+      <input
+        id={id}
+        name={name}
+        type="date"
+        value={toDateInputValue(value)}
+        onChange={handle}
+        disabled={disabled}
+        min={min}
+        max={max}
+        required={required}
+        className="k-date-input-field"
+      />
+    </FieldShell>
+  );
+};
+
+export const DateTimeInput = ({
+  value,
+  onChange,
+  label,
+  required,
+  error,
+  helperText,
+  disabled,
+  min,
+  max,
+  id,
+  name,
+}: DateTimeInputProps) => {
+  const handle = (e: ChangeEvent<HTMLInputElement>) =>
+    onChange(dateTimeLocalToIso(e.target.value));
+  return (
+    <FieldShell
+      label={label}
+      required={required}
+      error={error}
+      helperText={helperText}
+      htmlFor={id}
+    >
+      <input
+        id={id}
+        name={name}
+        type="datetime-local"
+        value={toDateTimeLocalValue(value)}
+        onChange={handle}
+        disabled={disabled}
+        min={min}
+        max={max}
+        required={required}
+        className="k-date-input-field"
+      />
+    </FieldShell>
+  );
+};
+
+export const TimeInput = ({
+  value,
+  onChange,
+  label,
+  required,
+  error,
+  helperText,
+  disabled,
+  min,
+  max,
+  id,
+  name,
+}: TimeInputProps) => {
+  const handle = (e: ChangeEvent<HTMLInputElement>) =>
+    onChange(e.target.value || null);
+  return (
+    <FieldShell
+      label={label}
+      required={required}
+      error={error}
+      helperText={helperText}
+      htmlFor={id}
+    >
+      <input
+        id={id}
+        name={name}
+        type="time"
+        value={value ?? ""}
+        onChange={handle}
+        disabled={disabled}
+        min={min}
+        max={max}
+        required={required}
+        className="k-date-input-field"
+      />
+    </FieldShell>
+  );
+};

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

@@ -0,0 +1,22 @@
+.k-date-input-field {
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  font-size: 0.9375rem;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.k-date-input-field:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.125rem
+    color-mix(in srgb, var(--primary-color) 30%, transparent);
+}
+
+.k-date-input-field:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}

package/src/components/inputs/dateInput/utils.ts

@@ -0,0 +1,33 @@
+const pad = (n: number) => n.toString().padStart(2, "0");
+
+export const toDateInputValue = (
+  value: string | Date | null | undefined
+): string => {
+  if (value == null || value === "") return "";
+  const d = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
+
+export const toDateTimeLocalValue = (
+  value: string | Date | null | undefined
+): string => {
+  if (value == null || value === "") return "";
+  const d = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(
+    d.getHours()
+  )}:${pad(d.getMinutes())}`;
+};
+
+export const dateInputToIso = (value: string): string | null => {
+  if (!value) return null;
+  const d = new Date(`${value}T00:00:00`);
+  return Number.isNaN(d.getTime()) ? null : d.toISOString();
+};
+
+export const dateTimeLocalToIso = (value: string): string | null => {
+  if (!value) return null;
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d.toISOString();
+};

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import IconButton from "../../buttons/iconButton/index.js";
+import { ReactNode, useRef, useState } from "react";
+import Button from "../../buttons/button/index.js";
+import "./styles.css";
+import {
+  faCaretDown,
+  faCaretUp,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+
+export interface DropdownProps extends PropsWithSize, PropsWithVariant {
+  children: ReactNode;
+  label?: ReactNode;
+  icon?: IconDefinition;
+  align?: "left" | "right";
+  renderCaret?: boolean;
+  /** Controlled mode: whether the dropdown is open */
+  isOpen?: boolean;
+  /** Controlled mode: callback when open state changes */
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+const Dropdown = (props: DropdownProps) => {
+  const { align = "left", renderCaret = true } = props;
+
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+
+  const isControlled = props.isOpen !== undefined;
+  const isOpen = isControlled ? props.isOpen : internalIsOpen;
+
+  const setIsOpen = (open: boolean) => {
+    if (isControlled) props.onOpenChange?.(open);
+    else setInternalIsOpen(open);
+  };
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleTriggerClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  useOutsideClick([dropdownRef], () => setIsOpen(false));
+
+  const label = (
+    <div className="k-dropdown-label-container">
+      {props.label}
+      {renderCaret && (
+        <FontAwesomeIcon icon={isOpen ? faCaretUp : faCaretDown} />
+      )}
+    </div>
+  );
+
+  return (
+    <div ref={dropdownRef} className={`k-dropdown-container`}>
+      {props.icon ? (
+        <IconButton
+          size={props.size}
+          variant={props.variant}
+          icon={props.icon}
+          onClick={handleTriggerClick}
+        >
+          {props.label && label}
+        </IconButton>
+      ) : (
+        <Button
+          size={props.size}
+          variant={props.variant}
+          onClick={handleTriggerClick}
+        >
+          {props.label && label}
+        </Button>
+      )}
+
+      <div className={`k-dropdown-menu ${align} ${isOpen ? "open" : ""}`}>
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

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

@@ -0,0 +1,46 @@
+.k-dropdown-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.k-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  background-color: var(--background-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.375rem 1.25rem var(--shadow-color);
+  overflow: hidden;
+  transform: translateY(-0.625rem);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    visibility 0.2s;
+  min-width: 100%;
+  z-index: 100;
+  padding: 0.5rem 0;
+  margin-top: 0.25rem;
+}
+
+.k-dropdown-menu.left {
+  left: 0;
+}
+
+.k-dropdown-menu.right {
+  right: 0;
+}
+
+.k-dropdown-menu.open {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+.k-dropdown-label-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+
+interface DropdownArrowButtonProps extends PropsWithSize {
+  isOpen: boolean;
+  disabled?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onClick?: (e: React.MouseEvent<any>) => void;
+}
+
+const DropdownArrowButton = ({
+  size,
+  isOpen,
+  disabled = false,
+  onClick,
+}: DropdownArrowButtonProps) => {
+  return (
+    <button
+      type="button"
+      className={`k-dropdown-arrow k-dropdown-arrow-${size}`}
+      onClick={onClick}
+      tabIndex={-1}
+      disabled={disabled}
+    >
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        className={isOpen ? "k-dropdown-arrow-open" : ""}
+      />
+    </button>
+  );
+};
+
+export default DropdownArrowButton;

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

@@ -0,0 +1,47 @@
+/* Generic dropdown arrow toggle — used by Input (dropDown), MultiSelect, etc. */
+.k-dropdown-arrow {
+  position: absolute;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-secondary);
+  transition:
+    color 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+}
+
+.k-dropdown-arrow:hover:not(:disabled) {
+  color: var(--primary-color);
+}
+
+.k-dropdown-arrow:focus {
+  outline: none;
+}
+
+.k-dropdown-arrow:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.k-dropdown-arrow-sm {
+  font-size: 0.75rem;
+  top: 0.5rem;
+}
+
+.k-dropdown-arrow-md {
+  font-size: 0.875rem;
+  top: 0.625rem;
+}
+
+.k-dropdown-arrow-lg {
+  font-size: 1rem;
+  top: 0.75rem;
+}
+
+.k-dropdown-arrow-open {
+  transform: rotate(180deg);
+}