phia-design-system

分类: 测试与安全 | 上传者: charlenopires | 下载: 0 | 版本: v1.0（最新）

Design system visual do PhiaUI. SEMPRE consultar antes de criar ou modificar qualquer componente. Cobre tipografia, paleta de cores, espaçamento, sombras, ícones, layout, animação, acessibilidade, responsividade, agnosticismo, modularidade e extensibilidade. --- # PhiaUI Design System Linguagem visual obrigatória para todos os componentes PhiaUI. Para padrões de **código** (API, cn/1, variants, testes, segurança) → ver `phia-component/SKILL.md`. --- ## 1. Filosofia & Referência - **shadcn/ui** é a referência primária — consultar via Context7 (`/shadcn-ui/ui`) antes de implementar - **Tailwind CSS v4** — CSS-first config via `@theme` / `@source` / `@utility` (sem `tailwind.config.js`) - **OKLCH** — paleta de cores em espaço perceptualmente uniforme (ampla gama, dark mode preciso) - **Zero libs externas de UI** — sem Heroicons npm, sem Alpine, sem class-variance-authority - **Semantic tokens sempre** — nunca usar cores Tailwind brutas (`blue-500`) em componentes --- ## 2. Sistema de Cores ### Tokens Semânticos (todos mapeados em `priv/static/theme.css`) | Token | Light | Dark | Uso | |-------|-------|------|-----| | `background` | oklch(1 0 0) | oklch(0.145 0 0) | Fundo da página | | `foreground` | oklch(0.145 0 0) | oklch(0.985 0 0) | Texto principal | | `primary` | oklch(0.205 0 0) | oklch(0.922 0 0) | CTA, botão principal | | `primary-foreground` | oklch(0.985 0 0) | oklch(0.205 0 0) | Texto sobre primary | | `secondary` | oklch(0.97 0 0) | oklch(0.269 0 0) | Ações secundárias | | `muted` | oklch(0.97 0 0) | oklch(0.269 0 0) | Áreas neutras | | `muted-foreground` | oklch(0.556 0 0) | oklch(0.708 0 0) | Texto de suporte | | `accent` | oklch(0.97 0 0) | oklch(0.269 0 0) | Hover em menus | | `destructive` | oklch(0.577 0.245 27.325) | oklch(0.704 0.191 22.216) | Erros, perigo | | `border` | oklch(0.922 0 0) | oklch(0.269 0 0) | Bordas e divisores | | `input` | oklch(0.922 0 0) | oklch(0.269 0 0) | Bordas de inputs | | `ring` | oklch(0.708 0 0) | oklch(0.556 0 0) | Foc

更新日志: Source: GitHub https://github.com/charlenopires/PhiaUI

目录结构

当前层级: 根目录

📁 docs/
- 📁 components/
  - 📄 buttons.md 7.3 KB
  - 📄 calendar.md 18.3 KB
  - 📄 cards.md 8.2 KB
  - 📄 data.md 14.1 KB
  - 📄 display.md 10.3 KB
  - 📄 feedback.md 10.9 KB
  - 📄 forms.md 7.9 KB
  - 📄 inputs.md 28.7 KB
  - 📄 layout.md 8.8 KB
  - 📄 media.md 4.9 KB
  - 📄 navigation.md 12.9 KB
  - 📄 overlay.md 13.2 KB
- 📁 guides/
  - 📄 theme-system.md 11.3 KB
  - 📄 tutorial-booking.md 16.2 KB
  - 📄 tutorial-cms.md 21.7 KB
  - 📄 tutorial-dashboard.md 17.7 KB
📁 lib/
- 📁 mix/
  - 📁 tasks/
    
    📄 phia.add.ex 11.7 KB
    
    📄 phia.icons.ex 7.1 KB
    
    📄 phia.install.ex 6.7 KB
    
    📄 phia.theme.ex 10.7 KB
    
    📄 phia.undaisy.ex 12.3 KB
- 📁 phia_ui/
  - 📁 class_merger/
    
    📄 cache.ex 5.8 KB
    
    📄 groups.ex 13.9 KB
  - 📁 components/
    
    📁 animation/
    
    📄 animation.ex 28.7 KB
    
    📁 buttons/
    
    📄 back_top.ex 2.9 KB
    
    📄 button.ex 7.9 KB
    
    📄 button_group.ex 5.1 KB
    
    📄 copy_button.ex 5.1 KB
    
    📄 float_button.ex 8.0 KB
    
    📄 toggle.ex 7.7 KB
    
    📄 toggle_group.ex 14.4 KB
    
    📁 calendar/
    
    📄 badge_calendar.ex 7.4 KB
    
    📄 big_calendar.ex 10.4 KB
    
    📄 booking_calendar.ex 9.4 KB
    
    📄 calendar.ex 17.0 KB
    
    📄 calendar_time_picker.ex 5.4 KB
    
    📄 calendar_week_view.ex 8.8 KB
    
    📄 countdown_timer.ex 7.0 KB
    
    📄 daily_agenda.ex 5.9 KB
    
    📄 date_card.ex 4.4 KB
    
    📄 date_field.ex 3.5 KB
    
    📄 date_picker.ex 11.7 KB
    
    📄 date_range_picker.ex 14.6 KB
    
    📄 date_range_presets.ex 5.8 KB
    
    📄 date_strip.ex 3.9 KB
    
    📄 date_time_picker.ex 4.7 KB
    
    📄 event_calendar.ex 9.1 KB
    
    📄 heatmap_calendar.ex 8.1 KB
    
    📄 month_picker.ex 4.3 KB
    
    📄 multi_month_calendar.ex 8.4 KB
    
    📄 multi_select_calendar.ex 10.0 KB
    
    📄 range_calendar.ex 10.1 KB
    
    📄 schedule_event_card.ex 5.0 KB
    
    📄 schedule_view.ex 6.3 KB
    
    📄 streak_calendar.ex 6.4 KB
    
    📄 time_picker.ex 4.5 KB
    
    📄 time_slider_picker.ex 4.9 KB
    
    📄 time_slot_grid.ex 4.4 KB
    
    📄 time_slot_list.ex 5.5 KB
    
    📄 week_calendar.ex 4.6 KB
    
    📄 week_day_picker.ex 4.6 KB
    
    📄 week_picker.ex 4.5 KB
    
    📄 wheel_picker.ex 5.0 KB
    
    📄 year_picker.ex 4.6 KB
    
    📁 cards/
    
    📄 article_card.ex 3.3 KB
    
    📄 card.ex 12.6 KB
    
    📄 color_swatch_card.ex 2.5 KB
    
    📄 cta_card.ex 3.2 KB
    
    📄 event_card.ex 4.7 KB
    
    📄 feature_card.ex 3.0 KB
    
    📄 file_card.ex 5.6 KB
    
    📄 image_card.ex 2.0 KB
    
    📄 link_preview_card.ex 4.9 KB
    
    📄 metric_grid.ex 5.7 KB
    
    📄 notification_card.ex 3.5 KB
    
    📄 pricing_card.ex 3.8 KB
    
    📄 product_card.ex 4.6 KB
    
    📄 profile_card.ex 3.6 KB
    
    📄 progress_card.ex 3.6 KB
    
    📄 receipt_card.ex 4.9 KB
    
    📄 selectable_card.ex 4.7 KB
    
    📄 stat_card.ex 10.9 KB
    
    📄 team_card.ex 4.3 KB
    
    📄 testimonial_card.ex 3.6 KB
    
    📁 data/
    
    📄 area_chart.ex 6.4 KB
    
    📄 badge_delta.ex 2.7 KB
    
    📄 bar_chart.ex 9.1 KB
    
    📄 bar_list.ex 3.0 KB
    
    📄 bubble_chart.ex 5.3 KB
    
    📄 bulk_action_bar.ex 9.5 KB
    
    📄 bullet_chart.ex 4.2 KB
    
    📄 category_bar.ex 3.8 KB
    
    📄 chart.ex 11.4 KB
    
    📄 chart_axis_helpers.ex 2.0 KB
    
    📄 chart_helpers.ex 8.5 KB
    
    📄 chart_shell.ex 8.5 KB
    
    📄 comparison_table.ex 3.7 KB
    
    📄 data_grid.ex 34.0 KB
    
    📄 donut_chart.ex 3.6 KB
    
    📄 filter_bar.ex 12.9 KB
    
    📄 filter_builder.ex 16.6 KB
    
    📄 funnel_chart.ex 3.6 KB
    
    📄 gantt_chart.ex 6.8 KB
    
    📄 gauge_chart.ex 7.1 KB
    
    📄 heatmap_chart.ex 4.6 KB
    
    📄 histogram_chart.ex 4.4 KB
    
    📄 kanban_board.ex 12.1 KB
    
    📄 leaderboard.ex 3.9 KB
    
    📄 line_chart.ex 6.7 KB
    
    📄 meter_group.ex 3.3 KB
    
    📄 nps_widget.ex 5.3 KB
    
    📄 pie_chart.ex 3.1 KB
    
    📄 radar_chart.ex 5.7 KB
    
    📄 radial_bar_chart.ex 4.3 KB
    
    📄 scatter_chart.ex 5.5 KB
    
    📄 slope_chart.ex 4.9 KB
    
    📄 sparkline_card.ex 5.1 KB
    
    📄 table.ex 14.9 KB
    
    📄 timeline_chart.ex 4.6 KB
    
    📄 tree.ex 5.5 KB
    
    📄 treemap_chart.ex 2.9 KB
    
    📄 uptime_bar.ex 3.8 KB
    
    📄 waterfall_chart.ex 6.4 KB
    
    📁 display/
    
    📄 activity_feed.ex 12.1 KB
    
    📄 avatar.ex 10.5 KB
    
    📄 avatar_group.ex 4.5 KB
    
    📄 badge.ex 6.4 KB
    
    📄 chat_message.ex 18.2 KB
    
    📄 dark_mode_toggle.ex 6.7 KB
    
    📄 direction.ex 3.7 KB
    
    📄 icon.ex 4.7 KB
    
    📄 kbd.ex 4.3 KB
    
    📄 theme_provider.ex 8.1 KB
    
    📄 timeline.ex 7.8 KB
    
    📁 editor/
    
    📄 editor.ex 63.5 KB
    
    📁 feedback/
    
    📄 alert.ex 11.0 KB
    
    📄 alert_dialog.ex 18.2 KB
    
    📄 circular_progress.ex 5.5 KB
    
    📄 empty_state.ex 5.1 KB
    
    📄 popconfirm.ex 3.9 KB
    
    📄 progress.ex 4.3 KB
    
    📄 result_state.ex 3.2 KB
    
    📄 skeleton.ex 9.4 KB
    
    📄 snackbar.ex 3.4 KB
    
    📄 sonner.ex 6.0 KB
    
    📄 spinner.ex 3.1 KB
    
    📄 step_tracker.ex 9.2 KB
    
    📄 toast.ex 12.2 KB
    
    📁 forms/
    
    📄 field.ex 12.3 KB
    
    📄 form.ex 7.1 KB
    
    📄 form_field.ex 2.3 KB
    
    📄 label.ex 1.4 KB
    
    📁 inputs/
    
    📄 autocomplete_input.ex 7.0 KB
    
    📄 avatar_upload.ex 8.1 KB
    
    📄 checkbox.ex 12.2 KB
    
    📄 chip.ex 6.8 KB
    
    📄 clearable_input.ex 7.1 KB
    
    📄 color_picker.ex 3.7 KB
    
    📄 combobox.ex 14.2 KB
    
    📄 copy_input.ex 6.1 KB
    
    📄 document_upload.ex 10.3 KB
    
    📄 editable.ex 5.1 KB
    
    📄 file_upload.ex 10.0 KB
    
    📄 fullscreen_drop.ex 4.6 KB
    
    📄 image_gallery_upload.ex 7.1 KB
    
    📄 image_upload.ex 8.1 KB
    
    📄 inline_search.ex 6.4 KB
    
    📄 input.ex 8.9 KB
    
    📄 input_addon.ex 2.5 KB
    
    📄 input_group.ex 4.9 KB
    
    📄 input_otp.ex 10.7 KB
    
    📄 mention_input.ex 13.1 KB
    
    📄 multi_select.ex 10.0 KB
    
    📄 number_input.ex 9.0 KB
    
    📄 password_input.ex 7.4 KB
    
    📄 phia_input.ex 3.5 KB
    
    📄 phone_input.ex 9.0 KB
    
    📄 radio_group.ex 14.8 KB
    
    📄 rating.ex 5.5 KB
    
    📄 rich_text_editor.ex 14.6 KB
    
    📄 search_input.ex 9.9 KB
    
    📄 segmented_control.ex 6.6 KB
    
    📄 select.ex 7.8 KB
    
    📄 slider.ex 11.8 KB
    
    📄 switch.ex 10.7 KB
    
    📄 tags_input.ex 7.8 KB
    
    📄 textarea.ex 6.2 KB
    
    📄 textarea_counter.ex 7.4 KB
    
    📄 unit_input.ex 9.4 KB
    
    📄 upload_button.ex 7.4 KB
    
    📄 upload_card.ex 8.2 KB
    
    📄 upload_progress.ex 8.2 KB
    
    📄 upload_queue.ex 9.3 KB
    
    📄 url_input.ex 7.1 KB
    
    📁 interaction/
    
    📄 draggable_tree.ex 4.8 KB
    
    📄 drop_zone.ex 6.9 KB
    
    📄 multi_drag.ex 1.6 KB
    
    📄 sortable.ex 6.3 KB
    
    📄 sortable_grid.ex 3.3 KB
    
    📁 layout/
    
    📄 accordion.ex 15.5 KB
    
    📄 aspect_ratio.ex 4.5 KB
    
    📄 box.ex 1.4 KB
    
    📄 center.ex 1.8 KB
    
    📄 collapsible.ex 10.1 KB
    
    📄 container.ex 2.3 KB
    
    📄 description_list.ex 4.3 KB
    
    📄 divider.ex 2.5 KB
    
    📄 fixed_bar.ex 2.0 KB
    
    📄 flex.ex 3.8 KB
    
    📄 grid.ex 3.4 KB
    
    📄 masonry_grid.ex 1.7 KB
    
    📄 media_object.ex 2.3 KB
    
    📄 nav_list.ex 6.1 KB
    
    📄 page_header.ex 2.6 KB
    
    📄 page_layout.ex 3.1 KB
    
    📄 resizable.ex 10.2 KB
    
    📄 scroll_area.ex 7.5 KB
    
    📄 section.ex 1.5 KB
    
    📄 separator.ex 4.4 KB
    
    📄 shell.ex 23.1 KB
    
    📄 simple_grid.ex 2.7 KB
    
    📄 spacer.ex 1.5 KB
    
    📄 split_layout.ex 2.3 KB
    
    📄 stack.ex 2.9 KB
    
    📄 sticky.ex 2.2 KB
    
    📄 wrap.ex 2.4 KB
    
    📁 media/
    
    📄 audio_player.ex 5.8 KB
    
    📄 carousel.ex 11.2 KB
    
    📄 image_comparison.ex 3.7 KB
    
    📄 qr_code.ex 3.7 KB
    
    📄 watermark.ex 2.7 KB
    
    📁 navigation/
    
    📄 action_sheet.ex 5.5 KB
    
    📄 app_shell.ex 5.9 KB
    
    📄 bottom_navigation.ex 6.0 KB
    
    📄 breadcrumb.ex 12.3 KB
    
    📄 chip_nav.ex 3.5 KB
    
    📄 dock.ex 4.3 KB
    
    📄 dot_navigation.ex 3.1 KB
    
    📄 floating_nav.ex 3.4 KB
    
    📄 mega_menu.ex 6.0 KB
    
    📄 menubar.ex 9.4 KB
    
    📄 mobile_sidebar_toggle.ex 2.5 KB
    
    📄 nav_link.ex 4.9 KB
    
    📄 navigation_menu.ex 12.5 KB
    
    📄 pagination.ex 14.2 KB
    
    📄 sidebar.ex 13.3 KB
    
    📄 speed_dial.ex 4.6 KB
    
    📄 tabs.ex 17.7 KB
    
    📄 tabs_nav.ex 12.2 KB
    
    📄 toolbar.ex 4.1 KB
    
    📄 topbar.ex 1.7 KB
    
    📄 vertical_nav.ex 5.1 KB
    
    📁 overlay/
    
    📄 command.ex 20.8 KB
    
    📄 context_menu.ex 16.7 KB
    
    📄 dialog.ex 13.0 KB
    
    📄 drawer.ex 17.0 KB
    
    📄 dropdown_menu.ex 26.3 KB
    
    📄 hover_card.ex 11.4 KB
    
    📄 popover.ex 9.4 KB
    
    📄 sheet.ex 16.6 KB
    
    📄 tooltip.ex 9.1 KB
    
    📁 typography/
    
    📄 typography.ex 27.3 KB
  - 📁 themes/
    
    📄 blue.ex 5.1 KB
    
    📄 green.ex 2.7 KB
    
    📄 neutral.ex 2.5 KB
    
    📄 orange.ex 2.7 KB
    
    📄 rose.ex 5.5 KB
    
    📄 slate.ex 5.2 KB
    
    📄 violet.ex 2.7 KB
    
    📄 zinc.ex 5.2 KB
  - 📄 application.ex 2.6 KB
  - 📄 class_merger.ex 7.3 KB
  - 📄 component_registry.ex 99.3 KB
  - 📄 template_linter.ex 3.4 KB
  - 📄 theme.ex 10.2 KB
  - 📄 theme_css.ex 10.7 KB
- 📄 phia_ui.ex 20.0 KB
📁 priv/
- 📁 static/
  - 📄 phia_ui.css 1.4 KB
- 📁 templates/
  - 📁 class_merger/
    
    📄 cache.ex.eex 1.3 KB
    
    📄 class_merger.ex.eex 2.7 KB
    
    📄 groups.ex.eex 5.2 KB
  - 📁 components/
    
    📁 buttons/
    
    📄 button.ex.eex 3.8 KB
    
    📁 calendar/
    
    📄 date_range_picker.ex.eex 7.4 KB
    
    📁 cards/
    
    📄 card.ex.eex 3.5 KB
    
    📄 stat_card.ex.eex 2.9 KB
    
    📁 data/
    
    📄 chart.ex.eex 3.1 KB
    
    📄 data_grid.ex.eex 3.9 KB
    
    📄 table.ex.eex 3.8 KB
    
    📁 display/
    
    📄 badge.ex.eex 1.5 KB
    
    📄 dark_mode_toggle.ex.eex 2.0 KB
    
    📄 icon.ex.eex 1.8 KB
    
    📁 feedback/
    
    📄 alert.ex.eex 2.9 KB
    
    📄 skeleton.ex.eex 2.5 KB
    
    📄 toast.ex.eex 3.0 KB
    
    📁 inputs/
    
    📄 input.ex.eex 3.8 KB
    
    📄 rich_text_editor.ex.eex 15.2 KB
    
    📄 select.ex.eex 4.0 KB
    
    📄 textarea.ex.eex 2.9 KB
    
    📁 layout/
    
    📄 shell.ex.eex 3.4 KB
    
    📁 navigation/
    
    📄 breadcrumb.ex.eex 2.7 KB
    
    📄 pagination.ex.eex 5.0 KB
    
    📁 overlay/
    
    📄 command.ex.eex 4.7 KB
    
    📄 dialog.ex.eex 4.9 KB
    
    📄 popover.ex.eex 2.5 KB
    
    📄 tooltip.ex.eex 2.6 KB
  - 📁 js/
    
    📁 hooks/
    
    📄 action_sheet.js 3.6 KB
    
    📄 advanced_editor.js 10.9 KB
    
    📄 audio_player.js 4.0 KB
    
    📄 back_top.js 1.8 KB
    
    📄 bubble_menu.js 4.0 KB
    
    📄 calendar.js 2.3 KB
    
    📄 carousel.js 5.0 KB
    
    📄 chart.js 4.5 KB
    
    📄 color_picker.js 1.8 KB
    
    📄 command.js 4.0 KB
    
    📄 confetti.js 2.9 KB
    
    📄 context_menu.js 5.0 KB
    
    📄 copy_button.js 2.3 KB
    
    📄 dark_mode.js 2.6 KB
    
    📄 data_grid.js 630 B
    
    📄 date_range_picker.js 1.3 KB
    
    📄 dialog.js 4.7 KB
    
    📄 draggable_tree.js 5.3 KB
    
    📄 drawer.js 5.2 KB
    
    📄 drop_zone.js 7.4 KB
    
    📄 dropdown_menu.js 5.9 KB
    
    📄 editable.js 3.4 KB
    
    📄 editor_color_picker.js 3.9 KB
    
    📄 editor_dropdown.js 4.1 KB
    
    📄 editor_find_replace.js 7.0 KB
    
    📄 floating_menu.js 4.7 KB
    
    📄 fullscreen_drop.js 2.2 KB
    
    📄 image_comparison.js 2.8 KB
    
    📄 kanban.js 6.6 KB
    
    📄 markdown_editor.js 4.7 KB
    
    📄 marquee.js 1.5 KB
    
    📄 mega_menu.js 3.2 KB
    
    📄 mention_input.js 4.0 KB
    
    📄 multi_drag.js 7.2 KB
    
    📄 number_ticker.js 1.9 KB
    
    📄 particle_bg.js 3.3 KB
    
    📄 popover.js 4.3 KB
    
    📄 resizable.js 3.4 KB
    
    📄 rich_text_editor.js 14.1 KB
    
    📄 scroll_reveal.js 1.8 KB
    
    📄 slash_command.js 7.7 KB
    
    📄 sonner.js 9.5 KB
    
    📄 sortable.js 9.7 KB
    
    📄 sortable_grid.js 3.9 KB
    
    📄 speed_dial.js 3.2 KB
    
    📄 spotlight.js 1.3 KB
    
    📄 tags_input.js 7.1 KB
    
    📄 text_scramble.js 2.3 KB
    
    📄 theme.js 2.8 KB
    
    📄 tilt_card.js 1.9 KB
    
    📄 toast.js 3.7 KB
    
    📄 tooltip.js 3.9 KB
    
    📄 typewriter.js 1.5 KB
    
    📄 word_rotate.js 1.2 KB
  - 📁 theme/
    
    📄 theme.css 13.3 KB
📁 test/
- 📁 mix/
  - 📁 tasks/
    
    📄 phia_add_test.exs 15.2 KB
    
    📄 phia_icons_test.exs 6.3 KB
    
    📄 phia_install_test.exs 6.8 KB
    
    📄 phia_theme_test.exs 8.2 KB
    
    📄 phia_undaisy_test.exs 12.6 KB
- 📁 phia_ui/
  - 📁 class_merger/
    
    📄 conflict_test.exs 1.8 KB
    
    📄 groups_test.exs 2.7 KB
    
    📄 property_test.exs 3.0 KB
  - 📁 components/
    
    📁 animation/
    
    📄 animation_test.exs 27.6 KB
    
    📁 buttons/
    
    📄 back_top_test.exs 4.1 KB
    
    📄 button_group_test.exs 3.0 KB
    
    📄 button_test.exs 11.9 KB
    
    📄 copy_button_test.exs 3.9 KB
    
    📄 float_button_test.exs 4.6 KB
    
    📄 toggle_group_test.exs 5.7 KB
    
    📄 toggle_test.exs 4.4 KB
    
    📁 calendar/
    
    📄 badge_calendar_test.exs 5.6 KB
    
    📄 big_calendar_test.exs 9.5 KB
    
    📄 booking_calendar_test.exs 6.5 KB
    
    📄 calendar_test.exs 7.9 KB
    
    📄 calendar_time_picker_test.exs 5.2 KB
    
    📄 calendar_week_view_test.exs 7.1 KB
    
    📄 countdown_timer_test.exs 4.8 KB
    
    📄 daily_agenda_test.exs 6.2 KB
    
    📄 date_card_test.exs 5.1 KB
    
    📄 date_field_test.exs 4.5 KB
    
    📄 date_picker_test.exs 3.4 KB
    
    📄 date_range_picker_test.exs 5.8 KB
    
    📄 date_range_presets_test.exs 5.0 KB
    
    📄 date_strip_test.exs 5.0 KB
    
    📄 date_time_picker_test.exs 5.7 KB
    
    📄 event_calendar_test.exs 7.1 KB
    
    📄 heatmap_calendar_test.exs 6.9 KB
    
    📄 month_picker_test.exs 4.4 KB
    
    📄 multi_month_calendar_test.exs 5.4 KB
    
    📄 multi_select_calendar_test.exs 6.1 KB
    
    📄 range_calendar_test.exs 9.3 KB
    
    📄 schedule_event_card_test.exs 5.3 KB
    
    📄 schedule_view_test.exs 5.3 KB
    
    📄 streak_calendar_test.exs 5.0 KB
    
    📄 time_picker_test.exs 4.5 KB
    
    📄 time_slider_picker_test.exs 5.3 KB
    
    📄 time_slot_grid_test.exs 5.5 KB
    
    📄 time_slot_list_test.exs 4.9 KB
    
    📄 week_calendar_test.exs 4.7 KB
    
    📄 week_day_picker_test.exs 3.4 KB
    
    📄 week_picker_test.exs 4.2 KB
    
    📄 wheel_picker_test.exs 7.6 KB
    
    📄 year_picker_test.exs 4.4 KB
    
    📁 cards/
    
    📄 article_card_test.exs 5.5 KB
    
    📄 card_test.exs 10.3 KB
    
    📄 color_swatch_card_test.exs 3.7 KB
    
    📄 cta_card_test.exs 4.4 KB
    
    📄 event_card_test.exs 7.5 KB
    
    📄 feature_card_test.exs 3.6 KB
    
    📄 file_card_test.exs 8.2 KB
    
    📄 image_card_test.exs 3.0 KB
    
    📄 link_preview_card_test.exs 7.6 KB
    
    📄 metric_grid_test.exs 3.9 KB
    
    📄 notification_card_test.exs 7.3 KB
    
    📄 pricing_card_test.exs 8.2 KB
    
    📄 product_card_test.exs 7.9 KB
    
    📄 profile_card_test.exs 4.4 KB
    
    📄 progress_card_test.exs 7.1 KB
    
    📄 receipt_card_test.exs 4.4 KB
    
    📄 selectable_card_test.exs 4.8 KB
    
    📄 stat_card_test.exs 6.4 KB
    
    📄 team_card_test.exs 4.2 KB
    
    📄 testimonial_card_test.exs 4.7 KB
    
    📁 data/
    
    📄 area_chart_test.exs 3.1 KB
    
    📄 badge_delta_test.exs 4.0 KB
    
    📄 bar_chart_test.exs 4.4 KB
    
    📄 bar_list_test.exs 2.7 KB
    
    📄 bubble_chart_test.exs 3.0 KB
    
    📄 bulk_action_bar_test.exs 6.9 KB
    
    📄 bullet_chart_test.exs 3.5 KB
    
    📄 category_bar_test.exs 2.9 KB
    
    📄 chart_shell_test.exs 6.0 KB
    
    📄 chart_test.exs 6.2 KB
    
    📄 comparison_table_test.exs 3.3 KB
    
    📄 data_grid_test.exs 17.4 KB
    
    📄 donut_chart_test.exs 3.7 KB
    
    📄 filter_bar_test.exs 9.5 KB
    
    📄 filter_builder_test.exs 6.9 KB
    
    📄 funnel_chart_test.exs 3.0 KB
    
    📄 gantt_chart_test.exs 4.9 KB
    
    📄 gauge_chart_test.exs 4.9 KB
    
    📄 heatmap_chart_test.exs 3.5 KB
    
    📄 histogram_chart_test.exs 3.1 KB
    
    📄 kanban_board_test.exs 9.5 KB
    
    📄 leaderboard_test.exs 3.0 KB
    
    📄 line_chart_test.exs 3.9 KB
    
    📄 meter_group_test.exs 2.7 KB
    
    📄 nps_widget_test.exs 3.0 KB
    
    📄 pie_chart_test.exs 3.8 KB
    
    📄 radar_chart_test.exs 3.5 KB
    
    📄 radial_bar_chart_test.exs 4.0 KB
    
    📄 scatter_chart_test.exs 3.6 KB
    
    📄 slope_chart_test.exs 3.4 KB
    
    📄 sparkline_card_test.exs 4.3 KB
    
    📄 table_test.exs 10.0 KB
    
    📄 timeline_chart_test.exs 3.9 KB
    
    📄 tree_test.exs 6.7 KB
    
    📄 treemap_chart_test.exs 3.7 KB
    
    📄 uptime_bar_test.exs 4.4 KB
    
    📄 waterfall_chart_test.exs 3.5 KB
    
    📁 display/
    
    📄 activity_feed_test.exs 10.9 KB
    
    📄 avatar_group_test.exs 8.7 KB
    
    📄 avatar_test.exs 8.4 KB
    
    📄 badge_test.exs 5.0 KB
    
    📄 chat_message_test.exs 12.5 KB
    
    📄 dark_mode_toggle_test.exs 1.9 KB
    
    📄 direction_test.exs 1.9 KB
    
    📄 icon_test.exs 5.4 KB
    
    📄 kbd_test.exs 1.4 KB
    
    📄 theme_provider_test.exs 3.0 KB
    
    📄 timeline_test.exs 7.8 KB
    
    📁 editor/
    
    📄 editor_test.exs 35.4 KB
    
    📁 feedback/
    
    📄 alert_dialog_test.exs 9.8 KB
    
    📄 alert_test.exs 7.1 KB
    
    📄 circular_progress_test.exs 5.3 KB
    
    📄 empty_state_test.exs 4.7 KB
    
    📄 popconfirm_test.exs 3.7 KB
    
    📄 progress_test.exs 4.8 KB
    
    📄 result_state_test.exs 3.8 KB
    
    📄 skeleton_test.exs 6.6 KB
    
    📄 snackbar_test.exs 3.9 KB
    
    📄 sonner_test.exs 4.4 KB
    
    📄 spinner_test.exs 3.8 KB
    
    📄 step_tracker_test.exs 7.0 KB
    
    📄 toast_test.exs 5.9 KB
    
    📁 forms/
    
    📄 field_test.exs 8.1 KB
    
    📄 form_field_test.exs 3.9 KB
    
    📄 form_test.exs 11.9 KB
    
    📄 label_test.exs 2.8 KB
    
    📁 inputs/
    
    📄 autocomplete_input_test.exs 3.4 KB
    
    📄 avatar_upload_test.exs 2.7 KB
    
    📄 checkbox_test.exs 10.8 KB
    
    📄 chip_test.exs 5.5 KB
    
    📄 clearable_input_test.exs 3.6 KB
    
    📄 color_picker_test.exs 4.1 KB
    
    📄 combobox_test.exs 10.2 KB
    
    📄 copy_input_test.exs 2.6 KB
    
    📄 document_upload_test.exs 3.1 KB
    
    📄 editable_test.exs 5.8 KB
    
    📄 file_upload_test.exs 6.5 KB
    
    📄 fullscreen_drop_test.exs 2.5 KB
    
    📄 image_gallery_upload_test.exs 2.9 KB
    
    📄 image_upload_test.exs 12.0 KB
    
    📄 inline_search_test.exs 2.2 KB
    
    📄 input_addon_test.exs 3.2 KB
    
    📄 input_group_test.exs 3.3 KB
    
    📄 input_otp_test.exs 7.6 KB
    
    📄 input_test.exs 6.7 KB
    
    📄 mention_input_test.exs 9.4 KB
    
    📄 multi_select_test.exs 8.6 KB
    
    📄 number_input_test.exs 8.1 KB
    
    📄 password_input_test.exs 6.3 KB
    
    📄 phia_input_test.exs 5.6 KB
    
    📄 phone_input_test.exs 2.9 KB
    
    📄 radio_group_test.exs 7.0 KB
    
    📄 rating_test.exs 10.7 KB
    
    📄 rich_text_editor_test.exs 11.4 KB
    
    📄 search_input_test.exs 4.1 KB
    
    📄 segmented_control_test.exs 8.3 KB
    
    📄 select_test.exs 12.0 KB
    
    📄 slider_test.exs 11.4 KB
    
    📄 switch_test.exs 5.7 KB
    
    📄 tags_input_test.exs 10.5 KB
    
    📄 textarea_counter_test.exs 3.1 KB
    
    📄 textarea_test.exs 11.1 KB
    
    📄 unit_input_test.exs 3.2 KB
    
    📄 upload_button_test.exs 3.0 KB
    
    📄 upload_card_test.exs 3.2 KB
    
    📄 upload_progress_test.exs 2.8 KB
    
    📄 upload_queue_test.exs 3.5 KB
    
    📄 url_input_test.exs 2.8 KB
    
    📁 interaction/
    
    📄 draggable_tree_test.exs 6.2 KB
    
    📄 drop_zone_test.exs 5.4 KB
    
    📄 multi_drag_test.exs 2.1 KB
    
    📄 sortable_grid_test.exs 3.7 KB
    
    📄 sortable_test.exs 7.4 KB
    
    📁 layout/
    
    📄 accordion_test.exs 15.5 KB
    
    📄 aspect_ratio_test.exs 5.4 KB
    
    📄 box_test.exs 1.9 KB
    
    📄 center_test.exs 1.7 KB
    
    📄 collapsible_test.exs 9.2 KB
    
    📄 container_test.exs 2.2 KB
    
    📄 description_list_test.exs 2.5 KB
    
    📄 divider_test.exs 1.9 KB
    
    📄 fixed_bar_test.exs 1.8 KB
    
    📄 flex_test.exs 2.9 KB
    
    📄 grid_test.exs 2.1 KB
    
    📄 masonry_grid_test.exs 1.7 KB
    
    📄 media_object_test.exs 2.1 KB
    
    📄 nav_list_test.exs 3.7 KB
    
    📄 page_header_test.exs 2.2 KB
    
    📄 page_layout_test.exs 2.9 KB
    
    📄 resizable_test.exs 6.9 KB
    
    📄 scroll_area_test.exs 3.1 KB
    
    📄 section_test.exs 1.2 KB
    
    📄 separator_test.exs 4.0 KB
    
    📄 shell_test.exs 13.2 KB
    
    📄 simple_grid_test.exs 1.9 KB
    
    📄 spacer_test.exs 1.6 KB
    
    📄 split_layout_test.exs 1.8 KB
    
    📄 stack_test.exs 2.1 KB
    
    📄 sticky_test.exs 1.9 KB
    
    📄 wrap_test.exs 1.9 KB
    
    📁 media/
    
    📄 audio_player_test.exs 3.9 KB
    
    📄 carousel_test.exs 10.2 KB
    
    📄 image_comparison_test.exs 2.9 KB
    
    📄 qr_code_test.exs 3.8 KB
    
    📄 watermark_test.exs 2.8 KB
    
    📁 navigation/
    
    📄 action_sheet_test.exs 5.1 KB
    
    📄 app_shell_test.exs 5.1 KB
    
    📄 bottom_navigation_test.exs 3.7 KB
    
    📄 breadcrumb_test.exs 6.8 KB
    
    📄 chip_nav_test.exs 4.1 KB
    
    📄 dock_test.exs 4.3 KB
    
    📄 dot_navigation_test.exs 4.2 KB
    
    📄 floating_nav_test.exs 3.7 KB
    
    📄 mega_menu_test.exs 5.3 KB
    
    📄 menubar_test.exs 8.8 KB
    
    📄 mobile_sidebar_toggle_test.exs 2.3 KB
    
    📄 nav_link_test.exs 4.3 KB
    
    📄 navigation_menu_test.exs 9.5 KB
    
    📄 pagination_test.exs 6.8 KB
    
    📄 sidebar_item_expandable_test.exs 2.6 KB
    
    📄 sidebar_test.exs 5.1 KB
    
    📄 speed_dial_test.exs 4.4 KB
    
    📄 tabs_nav_test.exs 15.1 KB
    
    📄 tabs_test.exs 9.5 KB
    
    📄 toolbar_test.exs 4.5 KB
    
    📄 topbar_test.exs 1.4 KB
    
    📄 vertical_nav_test.exs 5.2 KB
    
    📁 overlay/
    
    📄 command_test.exs 8.3 KB
    
    📄 context_menu_test.exs 9.0 KB
    
    📄 dialog_test.exs 16.7 KB
    
    📄 drawer_test.exs 12.2 KB
    
    📄 dropdown_menu_sub_test.exs 3.6 KB
    
    📄 dropdown_menu_test.exs 13.6 KB
    
    📄 hover_card_test.exs 7.2 KB
    
    📄 popover_test.exs 6.5 KB
    
    📄 sheet_test.exs 15.3 KB
    
    📄 tooltip_test.exs 6.3 KB
    
    📁 typography/
    
    📄 typography_test.exs 30.5 KB
    
    📄 shell_moduledoc_test.exs 2.8 KB
  - 📁 theme/
    
    📄 theme_css_test.exs 4.0 KB
  - 📄 application_test.exs 505 B
  - 📄 class_merger_test.exs 1.6 KB
  - 📄 component_helpers_test.exs 1.3 KB
  - 📄 component_registry_test.exs 14.3 KB
  - 📄 template_linter_test.exs 3.8 KB
  - 📄 theme_css_test.exs 17.1 KB
  - 📄 theme_test.exs 13.5 KB
- 📁 support/
  - 📄 component_helpers.ex 1.2 KB
- 📄 mix_project_test.exs 1.5 KB
- 📄 phia_ui_test.exs 135 B
- 📄 test_helper.exs 15 B
📄 .formatter.exs 97 B
📄 .gitignore 618 B
📄 CHANGELOG.md 51.4 KB
📄 coveralls.json 176 B
📄 LICENSE 1.1 KB
📄 mix.exs 2.5 KB
📄 mix.lock 8.0 KB
📄 README.md 42.3 KB
📄 SKILL.md 18.3 KB

SKILL.md

---
name: phia-design-system
description: >
  Design system visual do PhiaUI. SEMPRE consultar antes de criar ou modificar qualquer componente.
  Cobre tipografia, paleta de cores, espaçamento, sombras, ícones, layout, animação,
  acessibilidade, responsividade, agnosticismo, modularidade e extensibilidade.
---

# PhiaUI Design System

Linguagem visual obrigatória para todos os componentes PhiaUI.
Para padrões de **código** (API, cn/1, variants, testes, segurança) → ver `phia-component/SKILL.md`.

---

## 1. Filosofia & Referência

- **shadcn/ui** é a referência primária — consultar via Context7 (`/shadcn-ui/ui`) antes de implementar
- **Tailwind CSS v4** — CSS-first config via `@theme` / `@source` / `@utility` (sem `tailwind.config.js`)
- **OKLCH** — paleta de cores em espaço perceptualmente uniforme (ampla gama, dark mode preciso)
- **Zero libs externas de UI** — sem Heroicons npm, sem Alpine, sem class-variance-authority
- **Semantic tokens sempre** — nunca usar cores Tailwind brutas (`blue-500`) em componentes

---

## 2. Sistema de Cores

### Tokens Semânticos (todos mapeados em `priv/static/theme.css`)

| Token | Light | Dark | Uso |
|-------|-------|------|-----|
| `background` | oklch(1 0 0) | oklch(0.145 0 0) | Fundo da página |
| `foreground` | oklch(0.145 0 0) | oklch(0.985 0 0) | Texto principal |
| `primary` | oklch(0.205 0 0) | oklch(0.922 0 0) | CTA, botão principal |
| `primary-foreground` | oklch(0.985 0 0) | oklch(0.205 0 0) | Texto sobre primary |
| `secondary` | oklch(0.97 0 0) | oklch(0.269 0 0) | Ações secundárias |
| `muted` | oklch(0.97 0 0) | oklch(0.269 0 0) | Áreas neutras |
| `muted-foreground` | oklch(0.556 0 0) | oklch(0.708 0 0) | Texto de suporte |
| `accent` | oklch(0.97 0 0) | oklch(0.269 0 0) | Hover em menus |
| `destructive` | oklch(0.577 0.245 27.325) | oklch(0.704 0.191 22.216) | Erros, perigo |
| `border` | oklch(0.922 0 0) | oklch(0.269 0 0) | Bordas e divisores |
| `input` | oklch(0.922 0 0) | oklch(0.269 0 0) | Bordas de inputs |
| `ring` | oklch(0.708 0 0) | oklch(0.556 0 0) | Focus ring |
| `card` / `card-foreground` | background / foreground | idem | Superfície de card |
| `popover` / `popover-foreground` | background / foreground | idem | Overlays flutuantes |
| `sidebar` / `sidebar-*` | — | — | Navegação lateral |
| `chart-1` … `chart-5` | oklch variados | oklch variados | Visualizações |

### Presets de Cor (8 temas em `priv/static/themes/`)

`zinc` (padrão), `slate`, `blue`, `rose`, `orange`, `green`, `violet`, `neutral`

Cada preset redefine apenas os tokens `primary` / `primary-foreground` — demais tokens são neutros.

### Modificadores de Opacidade

```heex
<%# hover: reduz opacidade em vez de cor diferente %>
class="bg-primary hover:bg-primary/90"
class="bg-muted hover:bg-muted/80"
class="text-muted-foreground/70"
```

Usar `/80`, `/90`, `/70` para estados de hover/active — **nunca** inventar nova cor.

### Regra de Ouro

```
✅ bg-primary       ✅ bg-destructive     ✅ bg-muted
❌ bg-blue-500      ❌ bg-red-600         ❌ bg-gray-100
```

---

## 3. Tipografia

### Famílias

```css
/* priv/static/theme.css */
--font-sans: ui-sans-serif, system-ui, sans-serif   /* padrão absoluto */
--font-mono: ui-monospace, 'Cascadia Code', monospace /* código, kbd, OTP */
```

Nenhum componente deve importar Google Fonts ou fontes externas.

### Escala de Tamanho (8 níveis)

| Classe | rem | px | Uso típico |
|--------|-----|----|------------|
| `text-xs` | 0.75 | 12 | Badges, labels de campo, metadados |
| `text-sm` | 0.875 | 14 | Corpo padrão, itens de lista, inputs |
| `text-base` | 1 | 16 | Parágrafos, descrições longas |
| `text-lg` | 1.125 | 18 | Subtítulos de seção |
| `text-xl` | 1.25 | 20 | Títulos de card, dialog headings |
| `text-2xl` | 1.5 | 24 | Page headings |
| `text-3xl` | 1.875 | 30 | Hero headings |
| `text-4xl` | 2.25 | 36 | Display / landing titles |

### Pesos

| Classe | Uso |
|--------|-----|
| `font-normal` | Corpo de texto, descrições |
| `font-medium` | Labels, botões, itens de menu |
| `font-semibold` | Títulos de componente, card_title |
| `font-mono` | Código, kbd, OTP inputs, timestamps técnicos |

### Line Height

- `leading-none` (1) — headings display
- `leading-tight` (1.25) — títulos compactos
- `leading-normal` (1.5) — padrão de corpo
- `leading-relaxed` (1.625) — texto longo / prose

---

## 4. Sistema de Espaçamento

Base: **4px** (1 unidade Tailwind = 4px). Todo espaçamento é múltiplo de 4.

### Padding por Tipo de Componente

| Componente | Padrão |
|------------|--------|
| Botões sm | `px-3 py-1.5` (12px / 6px) |
| Botões default | `px-4 py-2` (16px / 8px) |
| Botões lg | `px-8 py-2.5` (32px / 10px) |
| Inputs | `px-3 py-2` (12px / 8px) |
| Cards | `p-6` (24px) |
| Card header/footer | `px-6 py-4` (24px / 16px) |
| Popover / Dropdown | `p-1` (4px) para container, `px-2 py-1.5` para item |
| Dialog | `p-6` corpo, `p-6 pt-0` footer |
| Alert | `p-4` (16px) |
| Badge | `px-2.5 py-0.5` (10px / 2px) |
| Kbd | `px-1.5 py-0.5` (6px / 2px) |
| Tooltip | `px-3 py-1.5` (12px / 6px) |

### Gap Patterns

```heex
<%# Stack vertical padrão %>
class="flex flex-col gap-4"
<%# Inline group de botões %>
class="flex items-center gap-2"
<%# Grid de cards %>
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
<%# Formulário %>
class="space-y-4"
```

### Margin

- Nunca usar `m-*` em componentes de biblioteca — responsabilidade do consumer
- Exceção: `mt-1.5` para mensagens de erro abaixo de inputs

---

## 5. Raio de Borda

Escala baseada em `--radius: 0.625rem` (10px) definida no tema:

| Classe | Valor | Uso |
|--------|-------|-----|
| `rounded-sm` | calc(var(--radius) - 4px) ≈ 6px | Badges, chips, tooltips |
| `rounded-md` | calc(var(--radius) - 2px) ≈ 8px | **Botões, inputs, selects** (padrão de input) |
| `rounded-lg` | var(--radius) ≈ 10px | **Cards, dialogs, popovers, dropdowns** |
| `rounded-xl` | calc(var(--radius) + 4px) ≈ 14px | Sheets, drawers, painéis grandes |
| `rounded-2xl` | calc(var(--radius) + 8px) ≈ 18px | Modal overlays, hero elements |
| `rounded-full` | 9999px | Avatars, radio buttons, progress circular, dots |

### Regras Práticas

- `rounded-md` → tudo que o usuário digita ou clica (inputs, buttons)
- `rounded-lg` → containers que agrupam conteúdo (cards, dialogs)
- `rounded-full` → elementos circulares por natureza (avatar, badge de status, stepper dot)
- Nunca misturar `rounded` (4px Tailwind padrão) com os tokens semânticos acima

---

## 6. Sistema de Sombras

4 níveis para profundidade visual:

| Classe | Uso |
|--------|-----|
| `shadow-sm` | Botões elevados, inputs com foco suave, cards flat |
| `shadow-md` | Popovers, dropdowns, tooltips |
| `shadow-lg` | Dialogs, drawers, sheets |
| `shadow-xl` | Command palette, modais de máxima prioridade |

```heex
<%# Dropdown menu %>
class="shadow-md rounded-lg border border-border bg-popover"
<%# Dialog %>
class="shadow-lg rounded-lg border border-border bg-background"
<%# Toast / Sonner %>
class="shadow-lg rounded-md border border-border"
```

**Nunca usar `shadow-2xl` ou `drop-shadow` em componentes** — reservado para marketing/landing.

---

## 7. Sistema de Ícones

PhiaUI usa **Heroicons** via o componente nativo `<.icon>` (SVG inline, sem npm).

### Tamanhos

| Tamanho | Classes | Uso |
|---------|---------|-----|
| xs | `h-3 w-3` | Badges, indicadores de status |
| sm | `h-4 w-4` | Padrão de ícone em texto (botões, inputs) |
| default | `h-5 w-5` | Ícones standalone, nav items |
| lg | `h-6 w-6` | Empty states, features highlights |

### Acessibilidade

```heex
<%# Decorativo: aria-hidden obrigatório %>
<.icon name="hero-check" class="h-4 w-4" aria-hidden="true" />

<%# Funcional (sem label de texto): aria-label obrigatório %>
<button aria-label="Fechar diálogo">
  <.icon name="hero-x-mark" class="h-4 w-4" aria-hidden="true" />
</button>

<%# Nunca: ícone funcional sem label %>
<button><.icon name="hero-x-mark" class="h-4 w-4" /></button>
```

### Naming Convention

- Usar `hero-*` (outline, 24px) para ações e navegação
- Usar `hero-*-solid` para estados ativos ou filled indicators
- Usar `hero-*-mini` (20px) raramente — preferir `h-4 w-4` no ícone outline

---

## 8. Animação & Motion

### Durações

| Escala | Duration | Uso |
|--------|----------|-----|
| micro | 100ms | Feedback de hover, color transitions |
| fast | 150ms | Tooltips, badges de estado |
| default | 200ms | Dropdowns, popovers |
| medium | 300ms | Dialogs, drawers, sheets |
| slow | 500ms | Páginas, carousels, onboarding |

**Nunca usar > 500ms** para transições de UI (exceto animações explicitamente decorativas).

### Classes Tailwind de Animação

```heex
<%# Transições de cor/opacidade (micro) %>
class="transition-colors duration-100"
class="transition-opacity duration-150"

<%# Transições de transform (default) %>
class="transition-transform duration-200 ease-out"

<%# Entrada de overlay (medium) %>
class="transition-all duration-300 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out"

<%# Loading states %>
class="animate-spin"    <%# spinner %>
class="animate-pulse"   <%# skeleton %>
class="animate-bounce"  <%# indicador de digitação %>
```

### Easing

- **`ease-out`** → entradas (elemento aparecendo na tela)
- **`ease-in`** → saídas (elemento desaparecendo)
- **`ease-in-out`** → movimentos de reposicionamento
- **`linear`** → apenas `animate-spin`

### prefers-reduced-motion (obrigatório)

```heex
<%# Toda animação de duração > 100ms deve respeitar: %>
class="motion-safe:transition-transform motion-safe:duration-300"

<%# Para skeletons e spinners: usar variante Tailwind %>
class="animate-pulse motion-reduce:animate-none"
```

---

## 9. Layout & Posicionamento

### Padrões Flexbox

```heex
<%# Row com alinhamento central (botão com ícone) %>
class="inline-flex items-center gap-2"

<%# Stack vertical (formulário) %>
class="flex flex-col gap-4"

<%# Row com espaço entre (header de card) %>
class="flex items-center justify-between"

<%# Centralizado absoluto (empty state) %>
class="flex flex-col items-center justify-center text-center gap-4"
```

### Grid Patterns

```heex
<%# Metric grid responsivo %>
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"

<%# Form de 2 colunas %>
class="grid grid-cols-1 md:grid-cols-2 gap-4"

<%# Layout 70/30 %>
class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6"
```

### Z-Index (camadas fixas)

| Camada | z-index | Uso |
|--------|---------|-----|
| Base | 0 | Conteúdo normal |
| Sticky | 10 | `z-10` — headers sticky, sticky columns |
| Dropdown | 50 | `z-50` — popovers, dropdowns, tooltips |
| Overlay | 50 | `z-50` — backdrop de dialog |
| Modal | 50 | `z-50` — dialog, sheet, drawer |
| Toast | 50 | `z-50` — notificações (renderizadas por último no DOM) |

> PhiaUI usa `z-50` como camada única de overlay. A ordem no DOM (renderizado depois) resolve conflitos.
> Nunca usar `z-[9999]` ou valores arbitrários.

---

## 10. Responsividade

### Breakpoints (mobile-first)

| Prefixo | Viewport | Uso principal |
|---------|----------|---------------|
| (sem) | 0px+ | Mobile: base |
| `sm:` | 640px+ | Tablets portrait |
| `md:` | 768px+ | Tablets landscape |
| `lg:` | 1024px+ | Desktops |
| `xl:` | 1280px+ | Desktops grandes |

### Container Queries (Tailwind v4 built-in)

```heex
<%# Preferir container queries para componentes internamente responsivos %>
<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2">...</div>
</div>
```

### Touch Targets

- Mínimo absoluto: `h-10 w-10` (40px × 40px)
- Ideal mobile: `h-11` (44px) para qualquer ação primária
- Itens em lista clicável: `py-3` mínimo (evitar `py-1` em mobile)
- Usar `@media (pointer: coarse)` via Tailwind quando necessário

---

## 11. Modo Escuro

### Mecanismo

```css
/* priv/static/theme.css — troca automática via .dark no <html> */
:root { --background: oklch(1 0 0); }
.dark { --background: oklch(0.145 0 0); }
```

O `ThemeProvider` adiciona/remove `.dark` no `<html>` via `localStorage['phia-mode']`.

### Anti-FOUC

O script de restauração deve ser o **primeiro script** no `<head>`, antes de qualquer CSS:

```html
<script>
  (function(){
    var m = localStorage.getItem('phia-mode');
    if (m === 'dark') document.documentElement.classList.add('dark');
  })();
</script>
```

### Boas Práticas

```heex
<%# Correto: tokens semânticos trocam automaticamente %>
class="bg-background text-foreground border-border"

<%# Evitar: dark: modifier só quando token semântico não existe %>
class="bg-white dark:bg-zinc-900"  <%# ❌ só se não houver token %>
class="bg-background"               <%# ✅ preferir sempre %>
```

---

## 12. Acessibilidade (WCAG 2.2 AA)

> Detalhes de implementação (ARIA roles, focus trap, live regions, keyboard nav) →
> ver `phia-component/SKILL.md` seção "Accessibility Checklist".

### Contraste de Cores (obrigatório)

- Texto normal: mínimo **4.5:1** contra fundo
- Texto grande (≥18pt bold ou ≥24pt): mínimo **3:1**
- Componentes UI (borders de input, ícones funcionais): mínimo **3:1**
- Os tokens OKLCH do PhiaUI foram calibrados para WCAG AA — **não alterar os valores OKLCH**

### Focus Ring (universal)

```heex
<%# Padrão obrigatório em TODO elemento focável %>
class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
```

### Reduced Motion (em animações)

```heex
class="transition-transform motion-reduce:transition-none"
class="animate-pulse motion-reduce:animate-none"
```

---

## 13. Agnosticismo

O componente não deve assumir contexto externo nem depender de ordem de filhos.

### Tokens em vez de Cores

```elixir
# ✅ Agnóstico: funciona em qualquer tema
"bg-primary text-primary-foreground"

# ❌ Acoplado a um preset
"bg-blue-600 text-white"
```

### :rest Attrs (transparência total)

```elixir
# Permite data-*, phx-*, hx-*, x-*, qualquer attr HTML válida
attr :rest, :global, doc: "HTML attrs forwarded to root element"
```

### Slots > Props de Conteúdo

```heex
<%# ✅ Agnóstico: consumer decide o conteúdo %>
<.card_header><h2>Título custom</h2></.card_header>

<%# ❌ Acoplado: header só aceita string %>
<.card header="Título" />
```

---

## 14. Modularidade

### Atomic Design Adaptado

| Nível | Exemplos PhiaUI |
|-------|-----------------|
| Átomo | Badge, Separator, Spinner, Kbd, Avatar |
| Molécula | Button (icon+label), Input (field+error), Tooltip (trigger+content) |
| Organismo | Card family, Dialog family, DataGrid, Form |
| Template | Shell, ThemeProvider |

### Famílias Composable

Componentes com estrutura interna devem ser famílias:

```heex
<%# Card family %>
<.card>
  <.card_header>
    <.card_title>Título</.card_title>
    <.card_description>Desc</.card_description>
  </.card_header>
  <.card_content>Conteúdo</.card_content>
  <.card_footer class="justify-end">
    <.button>Ação</.button>
  </.card_footer>
</.card>
```

Cada membro da família: `attr :class, :string, default: nil` + `attr :rest, :global`.

### Sub-componentes Independentes

Cada sub-componente deve funcionar standalone:

```heex
<%# Válido fora do contexto pai %>
<.card_header>
  <.card_title>Só o header</.card_title>
</.card_header>
```

---

## 15. Extensibilidade

### cn/1 Override (último ganha)

```elixir
defp classes(assigns) do
  cn([
    "base-class-1 base-class-2",   # base
    variant_class(assigns.variant), # variant
    size_class(assigns.size),       # size
    assigns.class                   # override do consumer — sempre último
  ])
end
```

### Named Slots com :let Context

```elixir
slot :item, doc: "Cada item da lista" do
  attr :disabled, :boolean, default: false
  attr :value, :string, required: true
end
```

```heex
<.select :let={item}>
  <:item value="a" disabled={true}>Opção A</:item>
</.select>
```

### Tema via CSS Variables

Consumers podem sobrescrever tokens por escopo:

```css
/* Em um componente customizado do consumer */
[data-phia-theme="brand"] {
  --primary: oklch(0.55 0.25 280); /* roxo da marca */
}
```

---

## 16. Estados de Componente

Todo componente interativo deve ter estilo para todos os 6 estados:

| Estado | Classes Tailwind |
|--------|-----------------|
| Default | (base) |
| Hover | `hover:bg-accent hover:text-accent-foreground` |
| Focus | `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2` |
| Active | `active:scale-95` ou `active:opacity-90` |
| Disabled | `disabled:pointer-events-none disabled:opacity-50` |
| Loading | `cursor-wait` + `animate-spin` no ícone filho |

### Padrão para Botão (referência)

```elixir
defp base_classes do
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium " <>
  "transition-colors duration-100 " <>
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " <>
  "disabled:pointer-events-none disabled:opacity-50"
end
```

---

## 17. Anti-Patterns Visuais

| ❌ Anti-Pattern | ✅ Correto | Razão |
|-----------------|-----------|-------|
| `bg-blue-500` | `bg-primary` | Quebra theming |
| `text-red-600` | `text-destructive` | Quebra theming |
| `bg-white dark:bg-gray-900` | `bg-background` | Duplica lógica do token |
| `z-[9999]` | `z-50` | Z-index arbitrário |
| `duration-700` | `duration-300` (máx dialog) | Animação longa prejudica UX |
| `animate-spin` sem `motion-reduce:` | `animate-spin motion-reduce:animate-none` | Acessibilidade |
| `h-8 w-8` em touch target | `h-10 w-10` mínimo | WCAG 2.2 |
| `rounded` (4px) | `rounded-md` / `rounded-lg` | Inconsistente com tema |
| `shadow-2xl` | `shadow-lg` (máximo) | Escala de profundidade |
| `font-bold` | `font-semibold` | Peso excessivo em UI |
| `leading-loose` | `leading-normal` / `leading-relaxed` | Espaçamento excessivo |
| Gap de `gap-8` em mobile | `gap-4 sm:gap-8` | Layout mobile quebrado |
| Margem em componente | Nenhuma (responsabilidade do consumer) | Acoplamento de layout |
| Fonte externa (Google Fonts) | System font stack | Performance + privacidade |
| SVG de user input direto | Sanitizar antes | Segurança XSS |

---

## Referências Rápidas

- `priv/static/theme.css` — todos os tokens OKLCH com valores
- `priv/static/themes/` — 8 presets de cor
- `lib/phia_ui/class_merger.ex` — cn/1 implementation
- `lib/phia_ui/components/` — componentes existentes como referência
- `phia-component/SKILL.md` — padrões de código (API, testes, segurança)
- Context7 `/shadcn-ui/ui` — referência shadcn/ui atualizada

登录后下载/点赞/收藏 ❤ 2 | ★ 0

phia-design-system

目录结构

SKILL.md

举报内容

提示