@kosmeo-ui/react 0.1.0

package/src/components/forms/form/index.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, FormEvent, ReactNode } from "react";
+import { toast } from "react-toastify";
+import "./styles.css";
+
+interface FormProps {
+  children: ReactNode;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+  id?: string;
+  noValidate?: boolean;
+}
+
+const Form = (props: FormProps) => {
+  const { children, onSubmit, id, noValidate = true } = props;
+  const [hasValidated, setHasValidated] = useState(false);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formElement = e.currentTarget;
+    const allInputs = Array.from(
+      formElement.querySelectorAll("input, textarea, select")
+    );
+
+    let isFormValid = true;
+
+    for (const input of allInputs) {
+      const inputElement = input as
+        HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+      const isRequired = inputElement.hasAttribute("required");
+
+      if (isRequired) {
+        const isValid = validateInput(inputElement);
+        if (!isValid) isFormValid = false;
+      } else {
+        inputElement.classList.add("k-input-valid");
+        inputElement.classList.remove("k-input-invalid");
+      }
+    }
+
+    setHasValidated(true);
+    if (isFormValid) onSubmit(e);
+    else toast.error("Please fill in all required fields.");
+  };
+
+  const validateInput = (input: Element) => {
+    const inputElement = input as
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+    let isEmpty = false;
+    if (inputElement.type === "checkbox") {
+      isEmpty = !(inputElement as HTMLInputElement).checked;
+    } else {
+      isEmpty = !inputElement.value || inputElement.value.trim() === "";
+    }
+
+    if (isEmpty) {
+      inputElement.classList.add("k-input-invalid");
+      inputElement.classList.remove("k-input-valid");
+      return false;
+    } else {
+      inputElement.classList.add("k-input-valid");
+      inputElement.classList.remove("k-input-invalid");
+    }
+    return true;
+  };
+
+  return (
+    <form
+      id={id}
+      className={`k-form ${hasValidated ? "k-form-validating" : ""}`}
+      onSubmit={handleSubmit}
+      noValidate={noValidate}
+    >
+      {children}
+    </form>
+  );
+};
+
+export default Form;

package/src/components/forms/form/styles.css

@@ -0,0 +1,27 @@
+.k-form {
+  width: 100%;
+}
+
+.k-form-validating .k-input,
+.k-form-validating .k-textarea,
+.k-form-validating .k-multiselect {
+  transition: border-color 0.3s ease-in-out;
+}
+
+.k-form-validating .k-input-invalid {
+  border-color: var(--danger-color);
+}
+
+.k-form-validating .k-input-invalid:focus {
+  border-color: var(--danger-color);
+  box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
+}
+
+.k-form-validating .k-input-valid {
+  border-color: var(--success-color);
+}
+
+.k-form-validating .k-input-valid:focus {
+  border-color: var(--success-color);
+  box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
+}

package/src/components/forms/formActions/formError.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { ReactNode } from "react";
+
+export interface FormErrorProps {
+  children: ReactNode;
+}
+
+const FormError = ({ children }: FormErrorProps) => {
+  return (
+    <div role="alert" className="k-form-error">
+      {children}
+    </div>
+  );
+};
+
+export default FormError;

package/src/components/forms/formActions/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface FormActionsProps {
+  children: ReactNode;
+  /** Defaults to "right". "between" for split (cancel left, submit right).
+   * "fill" makes the buttons split the row evenly (equal width side-by-side),
+   * e.g. a Deny/Allow pair. */
+  align?: "right" | "between" | "center" | "left" | "fill";
+  /** Margin-top size. Defaults to "md". */
+  spacing?: "sm" | "md" | "lg" | "none";
+}
+
+const FormActions = ({
+  children,
+  align = "right",
+  spacing = "md",
+}: FormActionsProps) => {
+  return (
+    <div
+      className={`k-form-actions k-form-actions-${align} k-form-actions-spacing-${spacing}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FormActions;

package/src/components/forms/formActions/styles.css

@@ -0,0 +1,50 @@
+.k-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.k-form-actions-right {
+  justify-content: flex-end;
+}
+.k-form-actions-left {
+  justify-content: flex-start;
+}
+.k-form-actions-center {
+  justify-content: center;
+}
+.k-form-actions-between {
+  justify-content: space-between;
+}
+/* Each direct child grows to an equal share of the row (basis 0), so a
+   Deny/Allow pair renders as two equal-width buttons side by side. */
+.k-form-actions-fill > * {
+  flex: 1 1 0;
+}
+
+.k-form-actions-spacing-none {
+  margin-top: 0;
+}
+.k-form-actions-spacing-sm {
+  margin-top: 0.5rem;
+}
+.k-form-actions-spacing-md {
+  margin-top: 1rem;
+}
+.k-form-actions-spacing-lg {
+  margin-top: 1.5rem;
+}
+
+.k-form-error {
+  background-color: color-mix(
+    in srgb,
+    var(--danger-color) 12%,
+    var(--background-color)
+  );
+  color: var(--danger-color);
+  border: 0.0625rem solid var(--danger-color);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}

package/src/components/forms/formGrid/index.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface FormGridProps {
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  children: ReactNode;
+}
+
+const FormGrid = ({ columns = 2, gap = "md", children }: FormGridProps) => {
+  return (
+    <div
+      className={`k-form-grid k-form-grid-${columns}col k-form-grid-gap-${gap}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FormGrid;

package/src/components/forms/formGrid/styles.css

@@ -0,0 +1,41 @@
+.k-form-grid {
+  display: grid;
+}
+
+.k-form-grid-1col {
+  grid-template-columns: 1fr;
+}
+.k-form-grid-2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+.k-form-grid-3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+.k-form-grid-4col {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.k-form-grid-gap-sm {
+  gap: 0.5rem;
+}
+.k-form-grid-gap-md {
+  gap: 1rem;
+}
+.k-form-grid-gap-lg {
+  gap: 1.5rem;
+}
+
+@media (max-width: 1024px) {
+  .k-form-grid-3col,
+  .k-form-grid-4col {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .k-form-grid-2col,
+  .k-form-grid-3col,
+  .k-form-grid-4col {
+    grid-template-columns: 1fr;
+  }
+}

package/src/components/forms/infoRow/index.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface InfoRowProps {
+  label: ReactNode;
+  value: ReactNode;
+  /** Defaults to "horizontal" (label left, value right). "stacked" puts label above value. */
+  layout?: "horizontal" | "stacked";
+}
+
+const InfoRow = ({ label, value, layout = "horizontal" }: InfoRowProps) => {
+  return (
+    <div className={`k-info-row k-info-row-${layout}`}>
+      <div className="k-info-row-label">{label}</div>
+      <div className="k-info-row-value">{value}</div>
+    </div>
+  );
+};
+
+export default InfoRow;

package/src/components/forms/infoRow/styles.css

@@ -0,0 +1,38 @@
+.k-info-row {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-bottom: 0.0625rem solid var(--border-color);
+}
+
+.k-info-row:last-child {
+  border-bottom: none;
+}
+
+.k-info-row-horizontal {
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.k-info-row-stacked {
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.k-info-row-label {
+  font-weight: 500;
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+.k-info-row-value {
+  font-weight: 500;
+  text-align: right;
+  word-break: break-word;
+}
+
+.k-info-row-stacked .k-info-row-value {
+  text-align: left;
+  font-weight: 400;
+}

package/src/components/forms/optionsGroup/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import MandatoryAsterisk from "../requiredAsterisk/index.js";
+import { ReactNode } from "react";
+import "./styles.css";
+
+interface OptionsGroupProps {
+  label?: string;
+  required?: boolean;
+  children: ReactNode;
+}
+
+/** Internal shell for CheckboxGroup / RadioGroup — label + option list. */
+const OptionsGroup = ({ label, required, children }: OptionsGroupProps) => (
+  <div className="k-options-group">
+    {label && (
+      <label className="k-options-group-label">
+        {label}
+        {required && <MandatoryAsterisk />}
+      </label>
+    )}
+    <div className="k-options-group-options">{children}</div>
+  </div>
+);
+
+export default OptionsGroup;

package/src/components/forms/optionsGroup/styles.css

@@ -0,0 +1,34 @@
+.k-options-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.k-options-group-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--text-color);
+}
+
+.k-options-group-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.k-options-group-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.k-options-group-option input {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.k-options-group-option:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/src/components/forms/requiredAsterisk/index.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import "./styles.css";
+
+const MandatoryAsterisk = () => (
+  <span className="k-mandatory-asterisk"> *</span>
+);
+
+export default MandatoryAsterisk;

package/src/components/forms/requiredAsterisk/styles.css

@@ -0,0 +1,3 @@
+.k-mandatory-asterisk {
+  color: var(--danger-color);
+}

package/src/components/index.ts

@@ -0,0 +1,139 @@
+export { default as RecoveryCodeGrid } from "./data-display/recoveryCodeGrid/index.js";
+export { default as ConfirmationModal } from "./overlays/confirmationModal/index.js";
+export { default as InfiniteScroll } from "./data-display/infiniteScroll/index.js";
+export {
+  DateInput,
+  DateTimeInput,
+  TimeInput,
+} from "./inputs/dateInput/index.js";
+export { default as SecretDisplay } from "./data-display/secretDisplay/index.js";
+export { default as LoadingOverlay } from "./feedback/loadingOverlay/index.js";
+export { default as ImagePreview } from "./data-display/imagePreview/index.js";
+export { default as AddressBlock } from "./data-display/addressBlock/index.js";
+export { default as BorderedSection } from "./layout/borderedSection/index.js";
+export { default as FormError } from "./forms/formActions/formError.js";
+export { default as RichTextEditor } from "./inputs/richTextEditor/index.js";
+export { default as ColorSwatch } from "./data-display/colorSwatch/index.js";
+export { default as CheckboxGroup } from "./inputs/checkboxGroup/index.js";
+export { default as SectionHeader } from "./layout/sectionHeader/index.js";
+export { default as SummaryRow } from "./data-display/summaryRow/index.js";
+export { default as Breadcrumbs } from "./navigation/breadcrumbs/index.js";
+export { default as FileDropZone } from "./inputs/fileDropZone/index.js";
+export { default as ProgressBar } from "./feedback/progressBar/index.js";
+export { default as DataTable } from "./data-display/dataTable/index.js";
+export { default as SearchSelect } from "./inputs/searchSelect/index.js";
+export { default as StatCard } from "./data-display/statCard/index.js";
+export { default as MultiSelect } from "./inputs/multiSelect/index.js";
+export { default as ColorPicker } from "./inputs/colorPicker/index.js";
+export { default as TabButton } from "./navigation/tabButton/index.js";
+export { default as ListCard } from "./data-display/listCard/index.js";
+export { default as EmptyState } from "./feedback/emptyState/index.js";
+export { default as RowActions } from "./buttons/rowActions/index.js";
+export { default as DetailField } from "./forms/detailField/index.js";
+export { default as FormActions } from "./forms/formActions/index.js";
+export { default as IconButton } from "./buttons/iconButton/index.js";
+export { default as PhoneInput } from "./inputs/phoneInput/index.js";
+export { default as FileUpload } from "./inputs/fileUpload/index.js";
+export { default as SearchList } from "./inputs/searchList/index.js";
+export { default as RadioGroup } from "./inputs/radioGroup/index.js";
+export { default as ListRow } from "./data-display/listRow/index.js";
+export { default as TagCard } from "./data-display/tagCard/index.js";
+export { default as Stepper } from "./navigation/stepper/index.js";
+export { default as Typeahead } from "./inputs/typeahead/index.js";
+export { default as AuthPage } from "./layout/authPage/index.js";
+export { default as Checkbox } from "./inputs/checkbox/index.js";
+export { default as Centered } from "./layout/centered/index.js";
+export { default as Dropdown } from "./inputs/dropdown/index.js";
+export { default as TextArea } from "./inputs/textArea/index.js";
+export { default as Tooltip } from "./feedback/tooltip/index.js";
+export { default as Spinner } from "./feedback/spinner/index.js";
+export { default as Table } from "./data-display/table/index.js";
+export { default as FormGrid } from "./forms/formGrid/index.js";
+export { default as Portal } from "./overlays/portal/index.js";
+export { default as InfoRow } from "./forms/infoRow/index.js";
+export type { CountryCode } from "libphonenumber-js";
+export { default as Button } from "./buttons/button/index.js";
+export { default as Switch } from "./inputs/switch/index.js";
+export { default as Select } from "./inputs/select/index.js";
+export { default as Alert } from "./feedback/alert/index.js";
+export { default as Badge } from "./feedback/badge/index.js";
+export { default as Modal } from "./overlays/modal/index.js";
+export { default as Tabs } from "./navigation/tabs/index.js";
+export { default as Input } from "./inputs/input/index.js";
+export { default as Page } from "./layout/page/index.js";
+export { default as Card } from "./layout/card/index.js";
+export { default as Form } from "./forms/form/index.js";
+export { default as Row } from "./layout/row/index.js";
+export { default as Col } from "./layout/col/index.js";
+export {
+  default as LanguageSelect,
+  SUPPORTED_LANGUAGES,
+} from "./inputs/languageSelect/index.js";
+export {
+  Sidebar,
+  SidebarNavGroup,
+  SidebarNavLink,
+  default as SidebarDefault,
+} from "./navigation/sidebar/index.js";
+
+export type {
+  Breadcrumb,
+  BreadcrumbsProps,
+} from "./navigation/breadcrumbs/index.js";
+export type { RecoveryCodeGridProps } from "./data-display/recoveryCodeGrid/index.js";
+export type { SecretDisplayProps } from "./data-display/secretDisplay/index.js";
+export type { PageProps, PageGap, PageMaxWidth } from "./layout/page/index.js";
+export type { BorderedSectionProps } from "./layout/borderedSection/index.js";
+export type { FormErrorProps } from "./forms/formActions/formError.js";
+export type { ColorSwatchProps } from "./data-display/colorSwatch/index.js";
+export type { SectionHeaderProps } from "./layout/sectionHeader/index.js";
+export type { LanguageOption } from "./inputs/languageSelect/index.js";
+export type { EmptyStateProps } from "./feedback/emptyState/index.js";
+export type { ColorPickerProps } from "./inputs/colorPicker/index.js";
+export type { TabItem, TabsProps } from "./navigation/tabs/index.js";
+export type { RowActionsProps } from "./buttons/rowActions/index.js";
+export type { DetailFieldProps } from "./forms/detailField/index.js";
+export type { FormActionsProps } from "./forms/formActions/index.js";
+export type { ListRowProps } from "./data-display/listRow/index.js";
+export type { AuthPageProps } from "./layout/authPage/index.js";
+export type { FormGridProps } from "./forms/formGrid/index.js";
+export type { InfoRowProps } from "./forms/infoRow/index.js";
+export type {
+  StatCardProps,
+  StatCardIconVariant,
+} from "./data-display/statCard/index.js";
+export type {
+  SummaryRowProps,
+  SummaryRowItem,
+} from "./data-display/summaryRow/index.js";
+export type {
+  SidebarProps,
+  SidebarNavGroupProps,
+  SidebarNavLinkProps,
+} from "./navigation/sidebar/index.js";
+export type {
+  TableColumn,
+  TableRow,
+  TableLeadingColumn,
+} from "./data-display/dataTable/index.js";
+export type {
+  AddressBlockProps,
+  AddressBlockAddress,
+} from "./data-display/addressBlock/index.js";
+export type {
+  StepperProps,
+  StepperStep,
+  StepperStatus,
+} from "./navigation/stepper/index.js";
+export type {
+  DateInputProps,
+  DateTimeInputProps,
+  TimeInputProps,
+} from "./inputs/dateInput/index.js";
+export type {
+  InfiniteScrollMenu,
+  InfiniteScrollMenuFilter,
+  InfiniteScrollMenuSort,
+  InfiniteScrollMenuSortDataKey,
+  InfiniteScrollMenuLimitOption,
+} from "./data-display/infiniteScroll/index.js";

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

@@ -0,0 +1,54 @@
+"use client";
+
+import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
+import "./styles.css";
+
+interface CheckboxProps {
+  label?: string | React.ReactNode;
+  labelLocation?: "top" | "right" | "bottom" | "left";
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+  /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+  required?: boolean;
+  /** **_Optional_** if the checkbox is disabled */
+  disabled?: boolean;
+  /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+  id?: string;
+}
+
+const Checkbox = (props: CheckboxProps) => {
+  const { labelLocation = "top", disabled = false, required = false } = props;
+
+  const inputId =
+    props.id || `checkbox-${Math.random().toString(36).substring(2, 9)}`;
+
+  return (
+    <div className={`k-checkbox-container k-${labelLocation}`}>
+      {props.label && (
+        <label className="k-checkbox-label" htmlFor={inputId}>
+          {typeof props.label === "string" ? (
+            <>
+              {props.label}
+              {required && <MandatoryAsterisk />}
+            </>
+          ) : (
+            props.label
+          )}
+        </label>
+      )}
+      <input
+        id={inputId}
+        type="checkbox"
+        required={required}
+        checked={props.checked}
+        onClick={props.onClick}
+        onChange={props.onChange}
+        className="k-checkbox"
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+export default Checkbox;

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

@@ -0,0 +1,48 @@
+.k-checkbox-container {
+  display: flex;
+}
+
+.k-checkbox-container.k-top {
+  flex-direction: column;
+}
+
+.k-checkbox-container.k-right {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.k-checkbox-container.k-bottom {
+  flex-direction: column-reverse;
+}
+
+.k-checkbox-container.k-left {
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.k-checkbox {
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 0.25rem;
+  border-color: var(--border-color);
+}
+
+.k-checkbox-label {
+  display: block;
+  margin-bottom: 0.1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.k-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.k-checkbox:disabled + .k-checkbox-label,
+.k-checkbox-label:has(+ .k-checkbox:disabled) {
+  color: var(--text-color-disabled);
+  cursor: not-allowed;
+}