<NSButton
  variant="primary"     // primary | secondary | tertiary | text
  color="brand"         // brand | neutral | error | success | warning
  size="medium"         // extra-small | small | medium | large | extra-large
  icon="check"          // Icon name from Grauity icon set
  iconPosition="left"   // left | right
  fullWidth={false}     // Make button full width
  disabled={false}      // Disable button
  loading={false}       // Show loading spinner
  onClick={() => {}}
>
  Button Text
</NSButton>

<NSTextField
  name="email"
  label="Email address"
  placeholder="Enter your email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  type="email"           // text | email | password | number | etc.
  isRequired={true}
  isDisabled={false}
  isReadOnly={false}
  size="medium"          // small | medium | large
  errorMessage="This field is required"
  helpMessage="We'll never share your email"
  maxLength={100}
  adornments={{
    start: <NSIcon name="mail" />,
    end: <NSButton size="small">Send</NSButton>,
  }}
/>

<NSTypography
  variant="heading-1"    // heading-1 to heading-6, body-1, body-2, label, etc.
  as="h1"                // HTML element to render
  color="inherit"        // Any CSS color or "inherit"
>
  Text content
</NSTypography>

<NSIcon
  name="check-circle"    // Icon name from icon set
  size="24"              // Size in pixels: 16, 20, 24, 32, 40, 48, 64
  color="currentColor"   // Any CSS color
  loading={false}        // Show loading animation
/>

<NSTag>
  Premium Member
</NSTag>

import {
  NSButton,
  NSTextField,
  ButtonProps,
  TextFieldProps,
  BUTTON_VARIANTS_ENUM,
  BUTTON_SIZES_ENUM,
} from '@newtonschool/grauity';

// Use types in your components
const MyButton: React.FC<ButtonProps> = (props) => {
  return <NSButton {...props} />;
};

// Use enums for type-safe values
const variant = BUTTON_VARIANTS_ENUM.PRIMARY; // "primary"
const size = BUTTON_SIZES_ENUM.MEDIUM;        // "medium"

<div
  style={{
    // Colors
    backgroundColor: 'var(--color-background-surface)',
    color: 'var(--color-text-primary)',
    borderColor: 'var(--color-border-default)',
    
    // Spacing
    padding: 'var(--spacing-16px)',
    margin: 'var(--spacing-8px)',
    gap: 'var(--spacing-12px)',
    
    // Border radius
    borderRadius: 'var(--corner-radius-8px)',
    
    // Typography
    fontSize: 'var(--font-size-14px)',
    lineHeight: 'var(--line-height-20px)',
  }}
>
  Content
</div>

import { useState } from 'react';
import { NSTextField, NSButton } from '@newtonschool/grauity';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({ email: '', password: '' });

  const handleSubmit = () => {
    const newErrors = { email: '', password: '' };
    
    if (!email) newErrors.email = 'Email is required';
    if (!password) newErrors.password = 'Password is required';
    
    setErrors(newErrors);
    
    if (!newErrors.email && !newErrors.password) {
      // Submit form
      console.log('Form submitted:', { email, password });
    }
  };

  return (
    <div style={{ maxWidth: '400px' }}>
      <NSTextField
        name="email"
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        errorMessage={errors.email}
        isRequired
      />
      
      <NSTextField
        name="password"
        label="Password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        errorMessage={errors.password}
        isRequired
        style={{ marginTop: '16px' }}
      />
      
      <NSButton
        variant="primary"
        color="brand"
        fullWidth
        onClick={handleSubmit}
        style={{ marginTop: '24px' }}
      >
        Sign In
      </NSButton>
    </div>
  );
}

import { useState } from 'react';
import { NSModal, NSButton, NSTypography } from '@newtonschool/grauity';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <NSButton onClick={() => setIsOpen(true)}>
        Open Modal
      </NSButton>
      
      <NSModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Confirm Action"
      >
        <NSTypography variant="body-1">
          Are you sure you want to proceed with this action?
        </NSTypography>
        
        <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
          <NSButton
            variant="primary"
            color="brand"
            onClick={() => {
              console.log('Confirmed');
              setIsOpen(false);
            }}
          >
            Confirm
          </NSButton>
          
          <NSButton
            variant="secondary"
            onClick={() => setIsOpen(false)}
          >
            Cancel
          </NSButton>
        </div>
      </NSModal>
    </>
  );
}

import { NSButton, NSPlaceholder } from '@newtonschool/grauity';

function LoadingExample() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    setIsLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsLoading(false);
  };

  return (
    <NSButton
      variant="primary"
      loading={isLoading}
      onClick={handleClick}
    >
      {isLoading ? 'Loading...' : 'Click Me'}
    </NSButton>
  );
}