@als-tp/als-react-ts-ui

A comprehensive React TypeScript UI component library built on top of Base UI, providing 35+ accessible, customizable components with full TypeScript support.

Features

• 🎨 35+ Components: Comprehensive set of UI components
• 💪 TypeScript First: Full type safety and IntelliSense support
• ♿ Accessible: Built on Base UI with ARIA compliance
• 🎭 Customizable: CSS Modules with CSS variables for theming
• 📦 Tree-shakeable: Import only what you need
• 🔧 Modern Stack: React 19, TypeScript 5.9, Vite 7

Installation

# npm
npm install @als-tp/als-react-ts-ui

# pnpm
pnpm add @als-tp/als-react-ts-ui

# yarn
yarn add @als-tp/als-react-ts-ui

Peer Dependencies

This library requires the following peer dependencies:

pnpm install [email protected] [email protected] @base-ui/[email protected]

Usage

Import Styles

First, import the CSS in your application entry point:

import '@als-tp/als-react-ts-ui/styles';

Import Components

import { ALSButton, ALSDialog, ALSInput } from '@als-tp/als-react-ts-ui';

function App() {
  return (
    <div>
      <ALSButton variant="primary" size="md">
        Click me
      </ALSButton>
      
      <ALSInput placeholder="Enter text..." />
    </div>
  );
}

TypeScript Support

All components are fully typed. TypeScript will provide autocomplete and type checking:

import type { ALSButtonProps } from '@als-tp/als-react-ts-ui';

const buttonProps: ALSButtonProps = {
  variant: 'primary',
  size: 'lg',
  onClick: () => console.log('clicked')
};

Available Components

Form Components

• ALSButton - Versatile button with variants and sizes
• ALSInput - Text input field
• ALSCheckbox - Checkbox with label
• ALSCheckboxGroup - Group of checkboxes
• ALSRadio - Radio button
• ALSSwitch - Toggle switch
• ALSSelect - Dropdown select
• ALSCombobox - Autocomplete combobox
• ALSAutocomplete - Autocomplete input
• ALSNumberField - Numeric input
• ALSSlider - Range slider
• ALSField - Form field wrapper
• ALSFieldset - Form fieldset
• ALSForm - Form container

Layout Components

• MainLayout - Main application layout
• ALSSeparator - Visual separator
• ALSScrollArea - Scrollable container
• ALSTabs - Tab navigation
• ALSToolbar - Toolbar container

Overlay Components

• ALSDialog - Modal dialog
• ALSAlertDialog - Alert/confirmation dialog
• ALSPopover - Popover overlay
• ALSTooltip - Tooltip
• ALSMenu - Dropdown menu
• ALSContextMenu - Context menu
• ALSMenubar - Menu bar
• ALSNavigationMenu - Navigation menu

Feedback Components

• ALSToast - Toast notifications
• ALSProgress - Progress indicator
• ALSMeter - Meter/gauge

Content Components

• ALSAccordion - Expandable accordion
• ALSCollapsible - Collapsible content
• ALSAvatar - User avatar
• ALSPreviewCard - Preview card

Interactive Components

• ALSToggle - Toggle button
• ALSToggleGroup - Toggle button group

Customization

The library uses CSS variables for theming. You can override these in your global CSS:

:root {
    /* Typography Scale */
    --font-family-base: "F37 Beckett", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* Fluid Typography Scale */
    --font-h1: clamp(2.5rem, 4vw + 1rem, 3.5rem); /* 40-56px */
    --font-h2: clamp(2rem, 3vw + 0.5rem, 2.75rem); /* 32-44px */
    --font-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* 24-32px */
    --font-h4: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); /* 20-28px */
    --font-h5: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); /* 18-24px */
    --font-h6: clamp(1rem, 0.5vw + 0.5rem, 1.25rem); /* 16-20px */
    --font-base: 1rem; /* 16px */
    --font-small: 0.875rem; /* 14px */
    --font-tiny: 0.75rem; /* 12px */

    /* Spacing Scale */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem; /* 8px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */

    /* Border Radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --radius-xl: 1rem; /* 16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%),
        0 2px 4px -2px rgb(0 0 0 / 10%);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%),
        0 4px 6px -4px rgb(0 0 0 / 10%);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%),
        0 8px 10px -6px rgb(0 0 0 / 10%);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-duration-fast: 150ms;
    --transition-duration-base: 250ms;
    --transition-duration-slow: 350ms;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* ALS Color Palette */

    --color-als-white: #fff;
    --color-als-black: #000;

    /* ALS Grays */
    --color-als-gray-100: #f2f5f7;
    --color-als-gray-500: #d9e1e5;
    --color-als-gray-900: #b0b9be;

    /* ALS Blues */

    /* Dark blue  */
    --color-als-dark-blue-700: #1f3349;

    /* Primary blue */

    --color-als-blue-100: #d9ecf9;
    --color-als-blue-500: #9fd7ff;
    --color-als-blue-900: #45b1ff;

    /* Aux blue */
    --color-als-aux-blue-100: #c9f1ff;
    --color-als-aux-blue-200: #93e2ff;
    --color-als-aux-blue-300: #5dd4ff;
    --color-als-aux-blue-500: #00b0f0;
    --color-als-aux-blue-800: #0084b4;
    --color-als-aux-blue-900: #005878;

    /* ALS Beiges */
    --color-als-beige-100: #ffedcb;
    --color-als-beige-500: #ecd8b3;
    --color-als-beige-900: #cfb88e;

    /* ALS Greens */
    --color-als-green-100: #d0eed5;
    --color-als-green-500: #a8d3af;
    --color-als-green-900: #7ec68a;

    /* ALS Reds */
    --color-als-red-100: #ffdfdf;
    --color-als-red-500: #ff6f6f;
    --color-als-red-900: #f00;

    /* Semantic Colors */
    --color-success: var(--color-als-green-500);
    --color-warning: var(--color-als-beige-500);
    --color-error: var(--color-als-red-500);
    --color-info: var(--color-als-blue-500);

    /* Background Colors */
    --bg-primary: var(--color-als-gray-100);

    /* Text Colors */
    --text-primary: var(--color-als-dark-blue-700);
    --text-secondary: var(--color-als-gray-900); /* o el color que prefieras */

    /* Border Colors */
    --border-primary: var(--color-als-gray-500);
    --border-secondary: var(--color-als-gray-100);
    --border-focus: var(--color-als-blue-500);

    /* Menu Size  */
    --sidenav-width-expanded: 16rem; /* 256px */
    --sidenav-width-collapsed: 4rem; /* 64px */

    /* Header Size */
    --header-height: 4rem; /* 64px */
}

Development

Building the Library

pnpm run build:lib

Running Storybook

pnpm storybook

Running Tests

pnpm test

License

MIT © ALS TP

Links

• Base UI Documentation