@kosmeo-ui/react 0.1.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@kosmeo-ui/react",
+  "version": "0.1.0",
+  "description": "React components themed with CSS variables, light and dark",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "css-variables",
+    "dark-mode"
+  ],
+  "homepage": "https://github.com/kosmeo-ui/kosmeo-ui/tree/master/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/kosmeo-ui/kosmeo-ui/issues"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kosmeo-ui/kosmeo-ui.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && node scripts/copy-css.js",
+    "check": "tsc --noEmit",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "axios": "^1.0.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "peerDependenciesMeta": {
+    "axios": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
+    "@tanstack/react-virtual": "^3.14.2",
+    "@tiptap/extensions": "^3.26.0",
+    "@tiptap/react": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
+    "libphonenumber-js": "^1.13.6",
+    "luxon": "^3.7.2",
+    "react-toastify": "^11.1.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.104.2",
+    "@types/luxon": "^3.7.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "axios": "^1.17.0",
+    "typescript": "^6.0.3"
+  }
+}

package/src/components/buttons/button/index.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import { RefObject } from "react";
+import "./styles.css";
+
+export interface ButtonProps extends PropsWithSize, PropsWithVariant {
+  /** The child element(s) that will appear in the Button */
+  children?: React.ReactNode;
+  /** Function that is called when the button is pressed */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Whether or not the button should be active */
+  disabled?: boolean;
+  /** How to align the content of the button */
+  align?: "left" | "center" | "right";
+  /** Whether or not to show the shadow around the button */
+  shadow?: boolean;
+  /** Reference to the button element */
+  ref?: RefObject<HTMLButtonElement | null>;
+  /** HTML button type attribute */
+  type?: "button" | "submit" | "reset";
+  /** ID of the form element to associate with (for submit buttons outside the form) */
+  form?: string;
+  /** Whether the button is in a isLoading state */
+  isLoading?: boolean;
+  /** Whether the button should take full width. Defaults to false
+   * (content-width via `width: fit-content`, which stays content-sized in
+   * block, flex-row, AND flex-column containers). Set true for a 100%-width
+   * button — e.g. a form's primary submit, or paired action buttons that
+   * should split a row evenly. */
+  fullWidth?: boolean;
+  /** Accessible label. Required for icon-only buttons. */
+  "aria-label"?: string;
+  /** ID of element describing this button (for additional context). */
+  "aria-describedby"?: string;
+  /** ID of element labelling this button. */
+  "aria-labelledby"?: string;
+  /** HTML title attribute (native tooltip). */
+  title?: string;
+}
+
+const Button = (props: ButtonProps) => {
+  const {
+    size = "md",
+    variant = "primary",
+    align = "center",
+    shadow = true,
+    type = "button",
+    form,
+    isLoading = false,
+    fullWidth = false,
+  } = props;
+  return (
+    <button
+      ref={props.ref}
+      type={type}
+      form={form}
+      disabled={props.disabled || isLoading}
+      aria-label={props["aria-label"]}
+      aria-describedby={props["aria-describedby"]}
+      aria-labelledby={props["aria-labelledby"]}
+      title={props.title}
+      className={`k-button k-button-${variant} k-button-${size} k-button-${align} ${
+        shadow ? "k-button-shadow" : ""
+      } ${`k-button-${fullWidth ? "full" : "auto"}-width`}`.trim()}
+      onClick={props.onClick}
+    >
+      {isLoading ? (
+        <FontAwesomeIcon
+          icon={faCircleNotch}
+          className="k-button-spinner"
+          spin
+        />
+      ) : (
+        props.children
+      )}
+    </button>
+  );
+};
+export default Button;

package/src/components/buttons/button/styles.css

@@ -0,0 +1,193 @@
+.k-button {
+  display: flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  /* Deterministic content height so a text Button and an icon-only IconButton
+     at the same size render the same height (toolbars line up). */
+  line-height: 1.5;
+  transition:
+    background-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  text-wrap: nowrap;
+}
+
+.k-button-full-width {
+  width: 100%;
+}
+
+.k-button-auto-width {
+  /* fit-content (not auto) so the button stays content-sized regardless of
+     container: a block parent won't stretch it to 100%, and a flex column
+     parent's align-items: stretch won't either (stretch only applies when the
+     cross-size is auto). In a flex row it behaves like auto. */
+  width: fit-content;
+}
+
+.k-button-left {
+  justify-content: flex-start;
+}
+
+.k-button-center {
+  justify-content: center;
+}
+
+.k-button-right {
+  justify-content: flex-end;
+}
+
+.k-button:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.k-button-shadow {
+  box-shadow:
+    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+}
+
+.k-button-sm {
+  padding: 0.5rem 1rem;
+  font-size: var(--text-size-sm);
+}
+
+.k-button-md {
+  padding: 0.75rem 1.5rem;
+  font-size: var(--text-size-md);
+}
+
+.k-button-lg {
+  padding: 1rem 2rem;
+  font-size: var(--text-size-lg);
+}
+
+.k-button:not(:disabled):hover {
+  box-shadow:
+    0 0.625rem 0.9375rem -0.1875rem var(--shadow-color-hover),
+    0 0.25rem 0.375rem -0.25rem var(--shadow-color-hover);
+}
+
+.k-button:active {
+  box-shadow: inset 0 0.125rem 0.25rem 0 var(--shadow-color-active);
+}
+
+.k-button:focus {
+  box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
+}
+
+.k-button-primary {
+  background-color: var(--primary-color);
+  color: var(--text-color-light);
+}
+.k-button-primary:not(:disabled):hover {
+  background-color: var(--primary-color-hover);
+}
+.k-button-primary:active {
+  background-color: var(--primary-color-active);
+}
+.k-button-primary:focus {
+  box-shadow: 0 0 0 0.1875rem var(--primary-color);
+}
+
+.k-button-secondary {
+  background-color: var(--secondary-color);
+  color: var(--text-color-light);
+}
+.k-button-secondary:not(:disabled):hover {
+  background-color: var(--secondary-color-hover);
+}
+.k-button-secondary:active {
+  background-color: var(--secondary-color-active);
+}
+.k-button-secondary:focus {
+  box-shadow: 0 0 0 0.1875rem var(--secondary-color);
+}
+
+.k-button-light {
+  background-color: var(--light-color);
+  color: var(--text-color);
+}
+.k-button-light:not(:disabled):hover {
+  background-color: var(--light-color-hover);
+}
+.k-button-light:active {
+  background-color: var(--light-color-active);
+}
+.k-button-light:focus {
+  box-shadow: 0 0 0 0.1875rem var(--light-color);
+}
+
+.k-button-danger {
+  background-color: var(--danger-color);
+  color: var(--text-color-light);
+}
+.k-button-danger:not(:disabled):hover {
+  background-color: var(--danger-color-hover);
+}
+.k-button-danger:active {
+  background-color: var(--danger-color-active);
+}
+.k-button-danger:focus {
+  box-shadow: 0 0 0 0.1875rem var(--danger-color);
+}
+
+.k-button-success {
+  background-color: var(--success-color);
+  color: var(--text-color-light);
+}
+.k-button-success:not(:disabled):hover {
+  background-color: var(--success-color-hover);
+}
+.k-button-success:active {
+  background-color: var(--success-color-active);
+}
+.k-button-success:focus {
+  box-shadow: 0 0 0 0.1875rem var(--success-color);
+}
+
+.k-button-warning {
+  background-color: var(--warning-color);
+  color: var(--text-color);
+}
+.k-button-warning:not(:disabled):hover {
+  background-color: var(--warning-color-hover);
+}
+.k-button-warning:active {
+  background-color: var(--warning-color-active);
+}
+.k-button-warning:focus {
+  box-shadow: 0 0 0 0.1875rem var(--warning-color);
+}
+
+.k-button-link {
+  background-color: transparent;
+  color: var(--primary-color);
+  padding: 0;
+  border-radius: 0;
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  box-shadow: none;
+}
+.k-button-link:not(:disabled):hover {
+  color: var(--primary-color-hover);
+  background-color: transparent;
+  box-shadow: none;
+}
+.k-button-link:active {
+  color: var(--primary-color-active);
+  background-color: transparent;
+  box-shadow: none;
+}
+.k-button-link:focus {
+  outline: 0.125rem solid var(--primary-color);
+  outline-offset: 0.125rem;
+  box-shadow: none;
+}
+.k-button-link.k-button-shadow {
+  box-shadow: none;
+}

package/src/components/buttons/iconButton/index.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import Button, { ButtonProps } from "../button/index.js";
+import "./styles.css";
+
+interface IconButtonProps extends ButtonProps {
+  /** The FontAwesome icon that will be displayed in the Button */
+  icon: IconProp;
+}
+
+const IconButton = (props: IconButtonProps) => {
+  return (
+    <Button {...props}>
+      <div className={`k-icon-button-body`}>
+        <FontAwesomeIcon icon={props.icon} />
+        {props.children}
+      </div>
+    </Button>
+  );
+};
+export default IconButton;

package/src/components/buttons/iconButton/styles.css

@@ -0,0 +1,14 @@
+.k-icon-button-body {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  /* Reserve the same 1.5em line-box as a text Button so an icon-only button is
+     exactly as tall as a text button at the same size (matches .k-button
+     line-height). Without this, the icon's intrinsic height makes it shorter. */
+  min-height: 1.5em;
+}
+
+.k-icon-button-body:disabled {
+  cursor: not-allowed;
+}

package/src/components/buttons/rowActions/index.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface RowActionsProps {
+  children: ReactNode;
+  /** Horizontal alignment. Defaults to "center" (DataTable cell convention). */
+  align?: "start" | "center" | "end";
+  /** Gap between items. Defaults to "xs" = 0.25rem. */
+  gap?: "xs" | "sm" | "md";
+}
+
+const RowActions = ({
+  children,
+  align = "center",
+  gap = "xs",
+}: RowActionsProps) => {
+  const classes = [
+    "k-row-actions",
+    `k-row-actions-${align}`,
+    `k-row-actions-gap-${gap}`,
+  ].join(" ");
+  return <div className={classes}>{children}</div>;
+};
+
+export default RowActions;

package/src/components/buttons/rowActions/styles.css

@@ -0,0 +1,27 @@
+.k-row-actions {
+  display: flex;
+}
+
+.k-row-actions-start {
+  justify-content: flex-start;
+}
+
+.k-row-actions-center {
+  justify-content: center;
+}
+
+.k-row-actions-end {
+  justify-content: flex-end;
+}
+
+.k-row-actions-gap-xs {
+  gap: 0.25rem;
+}
+
+.k-row-actions-gap-sm {
+  gap: 0.5rem;
+}
+
+.k-row-actions-gap-md {
+  gap: 0.75rem;
+}

package/src/components/data-display/addressBlock/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ReactNode } from "react";
+import "./styles.css";
+
+export interface AddressBlockAddress {
+  name?: string | null;
+  company?: string | null;
+  street1?: string | null;
+  street2?: string | null;
+  city?: string | null;
+  stateProvince?: string | null;
+  postalCode?: string | null;
+  countryCode?: string | null;
+  phone?: string | null;
+  email?: string | null;
+}
+
+export interface AddressBlockProps {
+  address: AddressBlockAddress;
+  /** Uppercase label rendered above the address (e.g. "Ship to"). */
+  label?: ReactNode;
+  /** "full" (default): name+company+full multi-line. "compact": single block. */
+  variant?: "full" | "compact";
+  /** Suppress phone + email lines. */
+  hideContact?: boolean;
+}
+
+const join = (...parts: (string | null | undefined)[]) =>
+  parts.filter(Boolean).join(", ");
+
+const AddressBlock = ({
+  address,
+  label,
+  variant = "full",
+  hideContact,
+}: AddressBlockProps) => {
+  const cityLine = [address.city, address.stateProvince, address.postalCode]
+    .filter(Boolean)
+    .join(" ");
+  const region = join(cityLine, address.countryCode ?? undefined);
+
+  return (
+    <div className={`k-address-block k-address-block-${variant}`}>
+      {label && <div className="k-address-block-label">{label}</div>}
+      <address className="k-address-block-body">
+        {variant === "full" && (address.name || address.company) && (
+          <div className="k-address-block-name">
+            {address.name}
+            {address.name && address.company && " · "}
+            {address.company}
+          </div>
+        )}
+        {address.street1 && (
+          <div className="k-address-block-street">{address.street1}</div>
+        )}
+        {address.street2 && (
+          <div className="k-address-block-street">{address.street2}</div>
+        )}
+        {region && <div className="k-address-block-region">{region}</div>}
+        {!hideContact && (address.phone || address.email) && (
+          <div className="k-address-block-contact">
+            {[address.phone, address.email].filter(Boolean).join(" · ")}
+          </div>
+        )}
+      </address>
+    </div>
+  );
+};
+
+export default AddressBlock;

package/src/components/data-display/addressBlock/styles.css

@@ -0,0 +1,41 @@
+.k-address-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.k-address-block-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-color);
+  opacity: 0.65;
+}
+
+.k-address-block-body {
+  font-style: normal;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  word-break: break-word;
+}
+
+.k-address-block-name {
+  font-weight: 600;
+}
+
+.k-address-block-contact {
+  font-size: 0.8125rem;
+  color: var(--text-color);
+  opacity: 0.7;
+  margin-top: 0.125rem;
+}
+
+.k-address-block-compact .k-address-block-body {
+  font-size: 0.875rem;
+  gap: 0;
+}

package/src/components/data-display/colorSwatch/index.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import "./styles.css";
+
+export interface ColorSwatchProps {
+  color: string;
+  size?: "sm" | "md" | "lg";
+  /** Border around swatch. Defaults to true. */
+  bordered?: boolean;
+  /** Accessible label (rendered as title attribute). */
+  title?: string;
+}
+
+const ColorSwatch = ({
+  color,
+  size = "md",
+  bordered = true,
+  title,
+}: ColorSwatchProps) => {
+  return (
+    <span
+      role="img"
+      aria-label={title}
+      title={title}
+      style={{ backgroundColor: color }}
+      className={`k-color-swatch k-color-swatch-${size} ${
+        bordered ? "k-color-swatch-bordered" : ""
+      }`.trim()}
+    />
+  );
+};
+
+export default ColorSwatch;

package/src/components/data-display/colorSwatch/styles.css

@@ -0,0 +1,25 @@
+.k-color-swatch {
+  display: inline-block;
+  border-radius: 50%;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.k-color-swatch-bordered {
+  border: 0.0625rem solid var(--border-color);
+}
+
+.k-color-swatch-sm {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.k-color-swatch-md {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.k-color-swatch-lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}