Packages
- @triptyk/ember-input — Low-level input primitives (input, select, datepicker, file, etc.).
- @triptyk/ember-input-validation — Validated form prefabs built on ember-input and ember-immer-changeset with Zod schemas.
- @triptyk/ember-ui — High-level UI prefabs: dashboard layout, login/forgot-password/reset-password flows, forms, tables, and modals.
Quick Start
The example below shows a minimal validated form using ember-input-validation and ember-ui.
glimmer-ts
'%20rx='24'/%3e%3c!--%20Grille%20subtile%20en%20arrière-plan%20--%3e%3cline%20x1='25'%20y1='125'%20x2='175'%20y2='125'%20stroke='%23FFF'%20stroke-width='0.5'%20opacity='0.15'/%3e%3cline%20x1='25'%20y1='145'%20x2='175'%20y2='145'%20stroke='%23FFF'%20stroke-width='0.5'%20opacity='0.15'/%3e%3cline%20x1='25'%20y1='165'%20x2='175'%20y2='165'%20stroke='%23FFF'%20stroke-width='0.5'%20opacity='0.15'/%3e%3c!--%20Groupe%20flamme%20avec%20ombre%20--%3e%3cg%20filter='url(%23shadow)'%3e%3c!--%20Flamme%20principale%20--%3e%3cpath%20d='M100%2025%20C130%2042,%20150%2070,%20150%20100%20C150%20130,%20127%20155,%20100%20155%20C73%20155,%2050%20130,%2050%20100%20C50%2070,%2070%2042,%20100%2025%20Z'%20fill='url(%23flameGradient)'/%3e%3c!--%20Détails%20de%20la%20flamme%20--%3e%3cpath%20d='M100%2040%20C120%2052,%20130%2072,%20130%2095%20C130%20118,%20115%20135,%20100%20135%20C85%20135,%2070%20118,%2070%2095%20C70%2072,%2080%2052,%20100%2040%20Z'%20fill='%23FFF'%20opacity='0.6'/%3e%3c!--%20Cœur%20de%20la%20flamme%20--%3e%3cellipse%20cx='100'%20cy='95'%20rx='12'%20ry='18'%20fill='%23E04E39'/%3e%3cellipse%20cx='100'%20cy='90'%20rx='6'%20ry='10'%20fill='%23FF6B54'/%3e%3c/g%3e%3c!--%20Composants%20UI%20stylisés%20(comme%20des%20widgets)%20--%3e%3cg%20opacity='0.95'%3e%3c!--%20Input%20field%20--%3e%3crect%20x='30'%20y='168'%20width='60'%20height='10'%20fill='%23FFF'%20rx='5'/%3e%3ccircle%20cx='36'%20cy='173'%20r='2.5'%20fill='%23E04E39'/%3e%3c!--%20Dropdown/Select%20--%3e%3crect%20x='95'%20y='168'%20width='50'%20height='10'%20fill='%23FFF'%20rx='5'/%3e%3cpath%20d='M139%20170%20L143%20174%20L135%20174%20Z'%20fill='%23E04E39'/%3e%3c!--%20Toggle/Switch%20--%3e%3crect%20x='150'%20y='168'%20width='25'%20height='10'%20fill='%23FFF'%20rx='5'/%3e%3ccircle%20cx='167'%20cy='173'%20r='3.5'%20fill='%23E04E39'/%3e%3c/g%3e%3c/svg%3e)