Migrate to v2

Migration Checklist

1. Upgrade to the latest v1 release first.
2. Migrate to Button v2 and Card v2.
3. Replace import paths using atoms/molecules with ui.
4. Update directory casing in import paths to lowercase.
5. Use icons from @clubmed/trident-icons.
6. Migrate Tailwind setup to v4 expectations.
7. Apply the onChange signature migration for forms.

Breaking Changes from v1

1. Button and Card v2

• Button and Card APIs evolved in v2.
• Migrate these components first to reduce follow-up conflicts.

2. Import Paths

• Replace paths containing atoms or molecules with ui.
• Update directories to lowercase.

Copy// v1
@clubmed/trident-ui/molecules/Buttons/Button
 
// v2
@clubmed/trident-ui/ui/buttons/button

3. Icons Package

• Use icons from @clubmed/trident-icons.
• Stop importing icon assets from legacy v1 paths.

4. Tailwind 4 Migration

• Tailwind 4 no longer reads tailwind.config.ts the same way as v1-era setup.
• If needed during transition, rename to tailwind.config.legacy.(js|ts).
• Update syntax to Tailwind 4 conventions (@layer, @utility, etc.).
• Import Trident UI styles:

Copy@import '@clubmed/trident-ui/style.css';

• If your own stylesheet uses Trident classes/variables, add at file top:

Copy@reference "@clubmed/trident-ui/style.css";

Breaking Change: Form onChange Signature

In v2, form components use a unified callback signature:

CopyonChange(event, value)

Previous (v1)

CopyonChange(name, value)

New (v2)

CopyonChange(event, value)

When you still need the field name, read it from event.currentTarget.name:

Copyconst name = (event.currentTarget as HTMLInputElement).name;

Common Refactors

Text-like fields

Copy// v1
onChange={(name, value) => setValue(value)}
 
// v2
onChange={(_, value) => setValue(value)}

Checkbox-like fields

Copy// v1
onChange={(event) => setChecked(event.target.checked)}
 
// v2
onChange={(_, checked) => setChecked(checked)}

Radio-like fields

Copy// v1
onChange={(event) => setSelected(event.target.value)}
 
// v2
onChange={(_, value) => setSelected(value)}

Components Concerned

• TextField, Select, DateField, NumberField, Password, PhoneField, Range
• Switch, Filter, Checkbox, Radio
• CheckboxSelect, Checkboxes, RadioGroup

Why This Change

• Same developer experience for all form components.
• Easier integration with generic form handlers.
• Keeps access to browser event while exposing normalized name and value.