@mars-stack/ui 1.0.0

package/README.md

@@ -0,0 +1,38 @@
+# @mars-stack/ui
+
+Design-token-driven UI components and styles for MARS apps.
+
+## Installation
+
+```bash
+yarn add @mars-stack/ui
+```
+
+## Components
+
+**Primitives:** Button, Input, Checkbox, Select, Textarea, Badge, Avatar, Spinner, Divider, Table, Text, JsonLd
+
+**Patterns:** Card, Modal, Toast, FormField, EmptyState, PasswordStrengthIndicator
+
+## Styles
+
+Import the full design system in your `globals.css`:
+
+```css
+@import 'tailwindcss';
+@import '@mars-stack/ui/styles/index.css';
+@import './brand.css';
+```
+
+Override `--brand-50` through `--brand-950` in `brand.css` to customise your brand colour.
+
+## Usage
+
+```tsx
+import { Button, Card, Input, Text } from '@mars-stack/ui';
+import { useZodForm } from '@mars-stack/ui/hooks';
+```
+
+## License
+
+MIT

package/dist/chunk-MLKGABMK.js

@@ -0,0 +1,8 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export { __export };

package/dist/hooks/index.d.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+
+interface UseZodFormOptions<T extends z.ZodSchema<Record<string, unknown>>> {
+    schema: T;
+    initialValues?: Partial<z.infer<T>>;
+    mode?: 'onChange' | 'onBlur' | 'onSubmit';
+}
+interface UseZodFormResult<T extends z.ZodSchema<Record<string, unknown>>> {
+    values: z.infer<T>;
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    isValid: boolean;
+    isSubmitting: boolean;
+    setValue: (field: keyof z.infer<T>, value: string | boolean) => void;
+    setError: (field: keyof z.infer<T>, error: string) => void;
+    setTouched: (field: keyof z.infer<T>, touched?: boolean) => void;
+    setSubmitting: (submitting: boolean) => void;
+    validateField: (field: keyof z.infer<T>) => boolean;
+    validateForm: () => boolean;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleSubmit: (onSubmit: (values: z.infer<T>) => void | Promise<void>) => (e: React.FormEvent) => Promise<void>;
+    reset: (values?: Partial<z.infer<T>>) => void;
+    getFieldProps: (field: keyof z.infer<T>) => {
+        name: string;
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+        error?: string;
+    };
+}
+declare function useZodForm<T extends z.ZodSchema<Record<string, unknown>>>({ schema, initialValues, mode, }: UseZodFormOptions<T>): UseZodFormResult<T>;
+
+export { type UseZodFormOptions, type UseZodFormResult, useZodForm };

package/dist/hooks/index.js

@@ -0,0 +1,151 @@
+"use client";
+import '../chunk-MLKGABMK.js';
+import { useState, useRef, useCallback } from 'react';
+
+function useZodForm({
+  schema,
+  initialValues = {},
+  mode = "onChange"
+}) {
+  const [values, setValues] = useState(() => ({ ...initialValues }));
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const [errors, setErrors] = useState({});
+  const [touched, setTouchedState] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const validateWithValues = useCallback(
+    (valuesToValidate) => {
+      const result = schema.safeParse(valuesToValidate);
+      if (result.success) return {};
+      const newErrors = {};
+      result.error.issues.forEach((issue) => {
+        const path = issue.path.join(".");
+        newErrors[path] = issue.message;
+      });
+      return newErrors;
+    },
+    [schema]
+  );
+  const validateForm = useCallback(() => {
+    const newErrors = validateWithValues(valuesRef.current);
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [validateWithValues]);
+  const validateField = useCallback(
+    (field) => {
+      const newErrors = validateWithValues(valuesRef.current);
+      setErrors(newErrors);
+      return !newErrors[field];
+    },
+    [validateWithValues]
+  );
+  const setValue = useCallback(
+    (field, value) => {
+      const fieldName = field;
+      const newValues = { ...valuesRef.current, [field]: value };
+      setValues(newValues);
+      valuesRef.current = newValues;
+      const shouldRevalidateOnChange = mode !== "onSubmit" && (touched[fieldName] || Boolean(errors[fieldName]));
+      if (shouldRevalidateOnChange) {
+        const newErrors = validateWithValues(newValues);
+        setErrors(newErrors);
+      }
+    },
+    [errors, mode, touched, validateWithValues]
+  );
+  const setError = useCallback((field, error) => {
+    setErrors((prev) => ({ ...prev, [field]: error }));
+  }, []);
+  const setTouched = useCallback((field, isTouched = true) => {
+    setTouchedState((prev) => ({ ...prev, [field]: isTouched }));
+  }, []);
+  const setSubmitting = useCallback((submitting) => {
+    setIsSubmitting(submitting);
+  }, []);
+  const handleChange = useCallback(
+    (e) => {
+      const { name, value, type, checked } = e.target;
+      const fieldValue = type === "checkbox" ? checked : value;
+      setValue(name, fieldValue);
+    },
+    [setValue]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      const { name } = e.target;
+      setTouched(name, true);
+      if (mode === "onBlur") validateField(name);
+    },
+    [mode, setTouched, validateField]
+  );
+  const handleSubmit = useCallback(
+    (onSubmit) => {
+      return async (e) => {
+        e.preventDefault();
+        const currentValues = valuesRef.current;
+        const allTouched = {};
+        Object.keys(currentValues).forEach((key) => {
+          allTouched[key] = true;
+        });
+        setTouchedState(allTouched);
+        if (!validateForm()) return;
+        setIsSubmitting(true);
+        try {
+          await onSubmit(currentValues);
+        } catch (error) {
+          console.error("Form submission error:", error);
+        } finally {
+          setIsSubmitting(false);
+        }
+      };
+    },
+    [validateForm]
+  );
+  const reset = useCallback(
+    (newValues) => {
+      if (newValues) {
+        setValues((prev) => ({ ...prev, ...newValues }));
+      } else {
+        setValues(initialValues);
+      }
+      setErrors({});
+      setTouchedState({});
+      setIsSubmitting(false);
+    },
+    [initialValues]
+  );
+  const getFieldProps = useCallback(
+    (field) => {
+      const fieldName = field;
+      return {
+        name: fieldName,
+        value: String(values[field] || ""),
+        onChange: handleChange,
+        onBlur: handleBlur,
+        error: touched[fieldName] ? errors[fieldName] : void 0
+      };
+    },
+    [values, handleChange, handleBlur, touched, errors]
+  );
+  const isValid = Object.keys(errors).length === 0;
+  return {
+    values,
+    errors,
+    touched,
+    isValid,
+    isSubmitting,
+    setValue,
+    setError,
+    setTouched,
+    setSubmitting,
+    validateField,
+    validateForm,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    reset,
+    getFieldProps
+  };
+}
+
+export { useZodForm };

package/dist/index.d.ts

@@ -0,0 +1,294 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonProps = {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onClick'>;
+declare const Button: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkButton: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    href: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
+
+type InputProps = {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+    showPasswordToggle?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<{
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+    showPasswordToggle?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+
+type CheckboxProps = {
+    label: React.ReactNode;
+    error?: string;
+    className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    label: React.ReactNode;
+    error?: string;
+    className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+type SelectProps = {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+    options: Array<SelectOption>;
+    placeholder?: string;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'>;
+declare const Select: React.ForwardRefExoticComponent<{
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+    options: Array<SelectOption>;
+    placeholder?: string;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> & React.RefAttributes<HTMLSelectElement>>;
+
+type TextareaProps = {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: React.ForwardRefExoticComponent<{
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'neutral' | 'info';
+type BadgeProps = {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    className?: string;
+};
+declare const Badge: React.FC<BadgeProps>;
+
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type AvatarProps = {
+    src?: string | null;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    className?: string;
+};
+declare const Avatar: React.FC<AvatarProps>;
+
+type DividerProps = {
+    children?: React.ReactNode;
+    className?: string;
+};
+declare const Divider: React.FC<DividerProps>;
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+type SpinnerProps = {
+    size?: SpinnerSize;
+    className?: string;
+    label?: string;
+};
+declare const Spinner: React.FC<SpinnerProps>;
+
+type TableProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+declare const Table: React.FC<TableProps>;
+declare const TableHead: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+declare const TableBody: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const TableRow: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+declare const TableHeaderCell: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+declare const TableCell: React.FC<{
+    children?: React.ReactNode;
+    className?: string;
+}>;
+
+type JsonLdProps = {
+    data: Record<string, unknown>;
+};
+declare const JsonLd: React.FC<JsonLdProps>;
+
+type HeadingProps = {
+    children: React.ReactNode;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div';
+    noMargin?: boolean;
+    className?: string;
+};
+declare const H1: ({ children, as: Component, noMargin, className }: HeadingProps) => react_jsx_runtime.JSX.Element;
+declare const H2: ({ children, as: Component, noMargin, className }: HeadingProps) => react_jsx_runtime.JSX.Element;
+declare const H3: ({ children, as: Component, noMargin, className }: HeadingProps) => react_jsx_runtime.JSX.Element;
+declare const H4: ({ children, as: Component, noMargin, className }: HeadingProps) => react_jsx_runtime.JSX.Element;
+declare const Paragraph: ({ children, noMargin, className, }: {
+    children: React.ReactNode;
+    noMargin?: boolean;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+interface TextLinkProps {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    target?: string;
+    rel?: string;
+}
+declare const TextLink: ({ href, children, className, target, rel }: TextLinkProps) => react_jsx_runtime.JSX.Element;
+declare const Cite: ({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Blockquote: ({ children, noMargin, className, }: {
+    children: React.ReactNode;
+    noMargin?: boolean;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const Text_Blockquote: typeof Blockquote;
+declare const Text_Cite: typeof Cite;
+declare const Text_H1: typeof H1;
+declare const Text_H2: typeof H2;
+declare const Text_H3: typeof H3;
+declare const Text_H4: typeof H4;
+declare const Text_Paragraph: typeof Paragraph;
+declare const Text_TextLink: typeof TextLink;
+declare namespace Text {
+  export { Text_Blockquote as Blockquote, Text_Cite as Cite, Text_H1 as H1, Text_H2 as H2, Text_H3 as H3, Text_H4 as H4, Text_Paragraph as Paragraph, Text_TextLink as TextLink };
+}
+
+type CardProps = {
+    children: React.ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+};
+declare const Card: React.FC<CardProps>;
+type CardHeaderProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+declare const CardHeader: React.FC<CardHeaderProps>;
+type CardBodyProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+declare const CardBody: React.FC<CardBodyProps>;
+type CardFooterProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+declare const CardFooter: React.FC<CardFooterProps>;
+
+type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+};
+declare const Modal: React.FC<ModalProps>;
+
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+type ToastProps = {
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+    onDismiss?: () => void;
+    className?: string;
+};
+declare const Toast: React.FC<ToastProps>;
+
+type PasswordRequirements = {
+    length: boolean;
+    lowercase: boolean;
+    uppercase: boolean;
+    number: boolean;
+    special: boolean;
+    noPassword: boolean;
+    noSequential: boolean;
+};
+type PasswordStrength = 'Weak' | 'Medium' | 'Strong';
+type PasswordStrengthIndicatorProps = {
+    strength: PasswordStrength;
+    requirements: PasswordRequirements;
+    className?: string;
+};
+declare const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>;
+
+type EmptyStateProps = {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+};
+declare const EmptyState: React.FC<EmptyStateProps>;
+
+type FormFieldProps = {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    htmlFor?: string;
+};
+declare const FormField: React.FC<FormFieldProps>;
+
+export { Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, Input, type InputProps, JsonLd, type JsonLdProps, LinkButton, Modal, type ModalProps, type PasswordRequirements, type PasswordStrength, PasswordStrengthIndicator, type PasswordStrengthIndicatorProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, type SpinnerSize, Table, TableBody, TableCell, TableHead, TableHeaderCell, type TableProps, TableRow, Text, Textarea, type TextareaProps, Toast, type ToastProps, type ToastVariant };