Tonkean Design System

Complete design system package with all components, design tokens, and CSS variables for Tonkean app.

Installation

npm install tonkean-tcltext

Components

TCLText

Text component with automatic truncation and tooltip on hover.

ButtonToken

Button component with multiple variants, sizes, and states.

InputToken

Input field component with various states and error handling.

SelectToken

Select dropdown component with icon support.

MultiSelectToken

Multi-select dropdown component with search and tag display.

NumericInputToken

Numeric input component with formatting.

ColorSelectToken

Color-coded select component for status selection.

ColorSwatch

Color swatch display component.

IconItem

Icon display component with copy functionality.

Usage

TCLText Component

import { TCLText, TCLFontSize } from 'tonkean-tcltext';
import 'tonkean-tcltext/tokens.css';

function App() {
  return (
    <div style={{ width: '200px' }}>
      <TCLText 
        text="This is a very long text that will be truncated and show a tooltip on hover"
        fontSize={TCLFontSize.NORMAL}
      />
    </div>
  );
}

ButtonToken Component

import { ButtonToken } from 'tonkean-tcltext';
import { loadAllIcons } from 'tonkean-tcltext';

const icons = loadAllIcons();
const circleIcon = icons.find(icon => icon.name === 'circle');

<ButtonToken
  variant="default"
  size="regular"
  state="default"
  label="Click me"
  leadIcon={circleIcon}
/>

InputToken Component

import { InputToken } from 'tonkean-tcltext';

<InputToken
  type="basic"
  state="default"
  label="Email"
  placeholder="Enter your email"
  showLabel={true}
/>

SelectToken Component

import { SelectToken } from 'tonkean-tcltext';
import { loadAllIcons } from 'tonkean-tcltext';

const icons = loadAllIcons();
const mailIcon = icons.find(icon => icon.name === 'mail-01');

<SelectToken
  state="empty"
  label="Select option"
  placeholder="Choose an option"
  leftIcon={mailIcon}
  options={[
    { label: 'Option 1', icon: mailIcon },
    { label: 'Option 2' }
  ]}
  onSelect={(value) => console.log(value)}
/>

MultiSelectToken Component

import { MultiSelectToken } from 'tonkean-tcltext';

<MultiSelectToken
  state="empty"
  label="Select items"
  placeholder="Choose items"
  options={['Item 1', 'Item 2', 'Item 3']}
  onSelect={(selected) => console.log(selected)}
/>

NumericInputToken Component

import { NumericInputToken } from 'tonkean-tcltext';

<NumericInputToken
  state="default"
  label="Amount"
  placeholder="0"
  showLabel={true}
/>

ColorSelectToken Component

import { ColorSelectToken } from 'tonkean-tcltext';

<ColorSelectToken
  state="empty"
  label="Status"
  placeholder="Select status"
  options={[
    { label: 'Active', color: '#10B981' },
    { label: 'Pending', color: '#F59E0B' }
  ]}
/>

Using Storybook Typography Tokens Directly

import { TCLText } from 'tonkean-tcltext';

function App() {
  return (
    <TCLText 
      text="Sample text"
      fontSize="base"  // Can use: 'xs', 'sm', 'base', 'lg', 'xl', '2xl'
      fontFamily="roboto"  // or 'lato'
      color="#000000"
    />
  );
}

Importing All Design Tokens

import { colors, typography, buttons, inputs } from 'tonkean-tcltext';
import type { Colors, Typography, Buttons, Inputs } from 'tonkean-tcltext';

// Access color tokens
const primaryColor = colors.colors.purple[600];
const gray200 = colors.colors.gray[200];

// Access typography tokens
const baseFontSize = typography.typography.fontSizes.base;
const robotoFont = typography.typography.fontFamilies.roboto;

// Access button tokens
const defaultButton = buttons.buttons.variants.default;
const buttonSizes = buttons.buttons.sizes;

// Access input tokens
const inputTypes = inputs.inputs.types;
const inputSizes = inputs.inputs.sizes;

Available Token Categories

Colors

• Basic: black, white
• Gray: 50 through 900
• Red: 50 through 900
• Yellow: 50 through 900
• Green: 50 through 900
• Blue: 50 through 900
• Purple: 50 through 900
• Pink: 50 through 900

Typography

• Font Families: lato, roboto
• Font Sizes: xs, sm, base, lg, xl, 2xl
• Font Weights: regular, medium, bold
• Line Heights: tight, snug, normal, relaxed, loose
• Letter Spacing: tighter, tight, normal, wide, wider, widest

Buttons

• Variants: default, secondary, outline, destructive, warning, link, ghost, multiaction
• Sizes: small, regular, large
• States: default, hover, disabled

Inputs

• Types: basic
• Sizes: regular
• States: default, hover, focus, disabled, disabledPlaceholder

CSS Tokens

Import the CSS file to use CSS variables:

import 'tonkean-tcltext/tokens.css';

// Then use in your CSS:
.my-element {
  color: var(--color-purple-600);
  font-size: var(--font-size-base);
  font-family: var(--font-family-roboto);
}

Icon Utilities

import { loadAllIcons, toFriendlyName, getCategory, iconLibrary } from 'tonkean-tcltext';

// Load all icons (works in Vite/Storybook environment)
const allIcons = loadAllIcons();

// Use icon library (works in all environments)
const icons = iconLibrary;

// Utility functions
const friendlyName = toFriendlyName('mail-01'); // "Mail 01"
const category = getCategory('mail-01'); // "General"

TCLText Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | - | Text content to display | | children | ReactNode | - | Alternative to text prop | | fontSize | TCLFontSize \| 'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' | 'base' | Font size variant | | fontFamily | 'roboto' \| 'lato' | 'roboto' | Font family | | color | string | 'var(--color-gray-900)' | Text color | | className | string | '' | Additional CSS classes | | tooltipConfig | object | - | Tooltip configuration | | tooltipConfig.margin | number | 10 | Tooltip margin | | tooltipConfig.maxWidth | number | 300 | Maximum tooltip width |

TCLFontSize Enum

• TCLFontSize.NORMAL - Maps to 'base' (14px)
• TCLFontSize.TEXT_MEDIUM - Maps to 'base' (14px)
• TCLFontSize.MSMALL - Maps to 'sm' (12px)
• TCLFontSize.SMALL - Maps to 'sm' (12px)
• TCLFontSize.XSMALL - Maps to 'xs' (10px)
• TCLFontSize.MEDIUM - Maps to 'lg' (16px)
• TCLFontSize.LARGE - Maps to 'xl' (20px)

Features

• ✅ All design system components
• ✅ Complete design tokens (colors, typography, buttons, inputs)
• ✅ CSS variables support
• ✅ TypeScript support with full type definitions
• ✅ Icon utilities and library
• ✅ Automatic text truncation with tooltip
• ✅ Fully typed components

Requirements

• React 18.2.0 or higher
• React DOM 18.2.0 or higher

License

MIT