SaaS-FrameWork 0.1.1__py3-none-any.whl

components/layout/DEx_Sidebar.py

@@ -0,0 +1,131 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+from components.layout.DEx_NavItem import DEx_NavItem
+
+COMPONENT_VERSION = "0.0.1"
+
+
+class DEx_Sidebar(ft.Container):
+    """Versioned DEx sidebar with grouped app navigation and user footer."""
+
+    NAV_ITEMS = [
+        (ft.Icons.DASHBOARD_ROUNDED,          "Dashboard",    "/dashboard"),
+        (ft.Icons.PEOPLE_ALT_ROUNDED,         "Contatos",     "/contacts"),
+        (ft.Icons.SHOW_CHART_ROUNDED,         "Pipeline",     "/pipeline"),
+        (ft.Icons.CONFIRMATION_NUMBER,        "Negocios",     "/deals"),
+        (ft.Icons.EMAIL_ROUNDED,              "E-mail",       "/email"),
+        (ft.Icons.CALENDAR_MONTH,             "Agenda",       "/calendar"),
+        (ft.Icons.ANALYTICS_ROUNDED,          "Relatorios",   "/reports"),
+        (ft.Icons.INTEGRATION_INSTRUCTIONS,   "Integracoes",  "/integrations"),
+    ]
+
+    def __init__(self, current_route: str = "/dashboard", on_navigate=None):
+        self.current_route = current_route
+        self.on_navigate = on_navigate
+        super().__init__(
+            content=self._build_content(),
+            width=Spacing.SIDEBAR_WIDTH,
+            bgcolor=Colors.BG_SURFACE,
+            border=ft.Border.only(right=ft.BorderSide(1, Colors.BORDER)),
+        )
+
+    def _navigate(self, route: str):
+        self.current_route = route
+        if self.on_navigate:
+            self.on_navigate(route)
+        self.content = self._build_content()
+        self.update()
+
+    def _build_content(self) -> ft.Column:
+        logo = ft.Container(
+            content=ft.Row(
+                [
+                    ft.Container(
+                        content=ft.Text("D", size=16, weight=ft.FontWeight.W_700, color=Colors.BG_DEEP),
+                        width=32, height=32,
+                        bgcolor=Colors.ACCENT,
+                        border_radius=8,
+                        alignment=ft.Alignment(0, 0),
+                    ),
+                    ft.Column(
+                        [
+                            ft.Text("DEx", size=15, weight=ft.FontWeight.W_700, color=Colors.TEXT_PRIMARY),
+                            ft.Text("Framework v4", size=10, color=Colors.TEXT_MUTED),
+                        ],
+                        spacing=0, tight=True,
+                    ),
+                ],
+                spacing=Spacing.SM,
+            ),
+            padding=ft.Padding.only(left=Spacing.MD, top=Spacing.LG, bottom=Spacing.LG),
+        )
+
+        nav_section = ft.Column(
+            controls=[
+                DEx_NavItem(icon, label, route, active=(route == self.current_route), on_click=self._navigate)
+                for icon, label, route in self.NAV_ITEMS
+            ],
+            spacing=2,
+        )
+
+        settings_nav = ft.Column(
+            [
+                DEx_NavItem(
+                    ft.Icons.SETTINGS_ROUNDED, "Configuracoes", "/settings",
+                    active=self.current_route == "/settings",
+                    on_click=self._navigate,
+                ),
+            ],
+            spacing=2,
+        )
+
+        user_footer = ft.Container(
+            content=ft.Row(
+                [
+                    ft.Container(
+                        content=ft.Text("AD", size=12, weight=ft.FontWeight.W_700, color=Colors.DATA),
+                        width=34, height=34,
+                        bgcolor=f"{Colors.DATA}22",
+                        border_radius=17,
+                        alignment=ft.Alignment(0, 0),
+                    ),
+                    ft.Column(
+                        [
+                            ft.Text("Almir Duarte", size=13, weight=ft.FontWeight.W_600, color=Colors.TEXT_PRIMARY),
+                            ft.Text("Admin", size=11, color=Colors.TEXT_MUTED),
+                        ],
+                        spacing=0, tight=True, expand=True,
+                    ),
+                    ft.IconButton(
+                        icon=ft.Icons.LOGOUT_ROUNDED,
+                        icon_size=16,
+                        icon_color=Colors.TEXT_MUTED,
+                        tooltip="Sair",
+                    ),
+                ],
+                spacing=Spacing.SM,
+            ),
+            padding=ft.Padding.symmetric(horizontal=Spacing.MD, vertical=Spacing.MD),
+            border=ft.Border.only(top=ft.BorderSide(1, Colors.BORDER)),
+        )
+
+        return ft.Column(
+            [
+                logo,
+                ft.Container(
+                    content=ft.Text(
+                        "NAVEGACAO",
+                        size=10,
+                        color=Colors.TEXT_MUTED,
+                        style=ft.TextStyle(letter_spacing=1.5),
+                    ),
+                    padding=ft.Padding.only(left=Spacing.MD, bottom=Spacing.XS),
+                ),
+                nav_section,
+                ft.Container(expand=True),
+                settings_nav,
+                user_footer,
+            ],
+            spacing=0,
+            expand=True,
+        )

components/layout/DEx_Stack.py

@@ -0,0 +1,73 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+
+def DEx_Stack(
+    controls: list | None = None,
+    width: int | float | None = None,
+    height: int | float | None = None,
+    expand: bool = False,
+    clip: bool = True,
+) -> ft.Stack:
+    """Stack com posicionamento absoluto. Use left/top/right/bottom nos filhos."""
+    return ft.Stack(
+        controls=controls or [],
+        width=width,
+        height=height,
+        expand=expand,
+        clip_behavior=ft.ClipBehavior.HARD_EDGE if clip else ft.ClipBehavior.NONE,
+    )
+
+
+def DEx_StackOverlay(
+    base: ft.Control,
+    overlay: ft.Control,
+    overlay_alignment: ft.Alignment = ft.Alignment(1, -1),
+    width: int | float | None = None,
+    height: int | float | None = None,
+) -> ft.Stack:
+    """Stack com um controle base e um overlay posicionado por alinhamento."""
+    return ft.Stack(
+        controls=[
+            base,
+            ft.Container(
+                content=overlay,
+                alignment=overlay_alignment,
+            ),
+        ],
+        width=width,
+        height=height,
+    )
+
+
+def DEx_StackBadge(
+    content: ft.Control,
+    badge_text: str,
+    badge_color: str | None = None,
+    size: int = 18,
+) -> ft.Stack:
+    """Controle com badge numérico no canto superior direito."""
+    color = badge_color or Colors.ACCENT
+    return ft.Stack(
+        controls=[
+            content,
+            ft.Container(
+                content=ft.Text(
+                    badge_text,
+                    size=9,
+                    weight=ft.FontWeight.W_700,
+                    color=Colors.BG_DEEP,
+                    text_align=ft.TextAlign.CENTER,
+                ),
+                width=size,
+                height=size,
+                border_radius=size // 2,
+                bgcolor=color,
+                alignment=ft.Alignment(0, 0),
+                right=0,
+                top=0,
+            ),
+        ],
+    )

components/layout/DEx_Tabs.py

@@ -0,0 +1,110 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+
+class _TabEntry:
+    def __init__(self, label: str, icon=None, content: ft.Control | None = None):
+        self.label = label
+        self.icon = icon
+        self.content = content
+
+
+def DEx_Tab(label: str, icon=None, content: ft.Control | None = None) -> _TabEntry:
+    """Single tab definition for DEx_Tabs."""
+    return _TabEntry(label=label, icon=icon, content=content)
+
+
+def DEx_Tabs(
+    tabs: list,
+    selected_index: int = 0,
+    on_change=None,
+    expand: bool = True,
+) -> ft.Control:
+    """Styled horizontal tab bar with underline indicator in Colors.ACCENT."""
+    if not tabs:
+        return ft.Container()
+
+    active = {"idx": selected_index}
+    content_ref: ft.Ref[ft.Container] = ft.Ref()
+    bar_ref: ft.Ref[ft.Row] = ft.Ref()
+
+    def _current_view():
+        tab = tabs[active["idx"]]
+        if isinstance(tab, _TabEntry) and tab.content is not None:
+            return tab.content
+        return ft.Container()
+
+    def _switch(idx: int):
+        def handler(e):
+            active["idx"] = idx
+            if content_ref.current:
+                content_ref.current.content = _current_view()
+            if bar_ref.current:
+                bar_ref.current.controls = _tab_buttons()
+            if on_change:
+                class _FakeEvent:
+                    control = type("C", (), {"selected_index": idx})()
+                on_change(_FakeEvent())
+            try:
+                if content_ref.current:
+                    content_ref.current.update()
+                if bar_ref.current:
+                    bar_ref.current.update()
+            except RuntimeError:
+                pass
+        return handler
+
+    def _tab_btn(tab, idx: int) -> ft.Control:
+        label = tab.label if isinstance(tab, _TabEntry) else str(tab)
+        icon = tab.icon if isinstance(tab, _TabEntry) else None
+        is_active = active["idx"] == idx
+
+        row_items: list[ft.Control] = []
+        if icon:
+            row_items.append(ft.Icon(icon, size=14, color=Colors.ACCENT if is_active else Colors.TEXT_MUTED))
+        row_items.append(ft.Text(
+            label,
+            size=13,
+            weight=ft.FontWeight.W_600 if is_active else ft.FontWeight.W_400,
+            color=Colors.ACCENT if is_active else Colors.TEXT_SECONDARY,
+        ))
+
+        return ft.Container(
+            content=ft.Row(row_items, spacing=4, tight=True),
+            padding=ft.Padding.symmetric(horizontal=Spacing.MD, vertical=Spacing.SM),
+            border=ft.Border.only(
+                bottom=ft.BorderSide(2, Colors.ACCENT if is_active else ft.Colors.TRANSPARENT)
+            ),
+            on_click=_switch(idx),
+            ink=True,
+        )
+
+    def _tab_buttons() -> list[ft.Control]:
+        return [_tab_btn(tab, i) for i, tab in enumerate(tabs)]
+
+    tab_bar = ft.Container(
+        content=ft.Row(ref=bar_ref, controls=_tab_buttons(), spacing=0, scroll=ft.ScrollMode.AUTO),
+        border=ft.Border.only(bottom=ft.BorderSide(1, Colors.BORDER)),
+    )
+
+    has_content = any(
+        isinstance(t, _TabEntry) and t.content is not None for t in tabs
+    )
+
+    if has_content:
+        return ft.Column(
+            [
+                tab_bar,
+                ft.Container(ref=content_ref, content=_current_view(), expand=True),
+            ],
+            spacing=0,
+            expand=expand,
+        )
+    return ft.Column(
+        [tab_bar],
+        spacing=0,
+        expand=expand,
+        tight=True,
+    )

components/metadata.py

@@ -0,0 +1,98 @@
+"""Central catalog metadata for DEx Framework components."""
+
+from components.versioning import ComponentMeta
+
+
+COMPONENTS = [
+    ComponentMeta("DEx_Badge", "primitives", "0.0.1", "Rótulo compacto de status e categoria."),
+    ComponentMeta("DEx_Divider", "primitives", "0.0.1", "Separador horizontal sutil."),
+    ComponentMeta("DEx_SectionEyebrow", "primitives", "0.0.1", "Marcador de seção numerado em ciano."),
+    ComponentMeta("DEx_StatusDot", "primitives", "0.0.1", "Indicador de estado colorido em miniatura."),
+    ComponentMeta("DEx_Card", "cards", "0.0.1", "Superfície base para conteúdo agrupado."),
+    ComponentMeta("DEx_MetricCard", "cards", "0.0.1", "Card de KPI com valor, ícone e variação."),
+    ComponentMeta("DEx_ContactCard", "cards", "0.0.1", "Card de entidade com iniciais, metadados e rodapé."),
+    ComponentMeta("DEx_BtnPrimary", "buttons", "0.1.0", "Botão de ação primária."),
+    ComponentMeta("DEx_BtnGhost", "buttons", "0.0.1", "Botão de ação secundária com borda."),
+    ComponentMeta("DEx_BtnIcon", "buttons", "0.0.1", "Botão de ação somente com ícone."),
+    ComponentMeta("DEx_BtnFilled", "buttons", "0.0.1", "Botão preenchido de alta ênfase."),
+    ComponentMeta("DEx_BtnTonal", "buttons", "0.0.1", "Botão tonal de ênfase secundária."),
+    ComponentMeta("DEx_BtnText", "buttons", "0.0.1", "Botão textual de menor ênfase."),
+    ComponentMeta("DEx_BtnFAB", "buttons", "0.0.1", "Botão de ação flutuante para criação de registros."),
+    ComponentMeta("DEx_BtnSegmented", "buttons", "0.0.1", "Alternador de múltiplas opções mutuamente exclusivas."),
+    ComponentMeta("DEx_MenuBar", "buttons", "0.0.1", "Barra de menus horizontal com submenus."),
+    ComponentMeta("DEx_PopupMenu", "buttons", "0.0.1", "Menu de contexto acionado por ícone."),
+    ComponentMeta("DEx_TextField", "inputs", "0.0.1", "Campo de texto estilizado."),
+    ComponentMeta("DEx_SearchField", "inputs", "0.0.1", "Campo de busca com ícone de lupa."),
+    ComponentMeta("DEx_Dropdown", "inputs", "0.0.1", "Seletor de opções estilizado."),
+    ComponentMeta("DEx_Checkbox", "inputs", "0.0.1", "Caixa de seleção booleana ou tristate estilizada."),
+    ComponentMeta("DEx_Switch", "inputs", "0.0.1", "Toggle switch para configurações binárias."),
+    ComponentMeta("DEx_Radio", "inputs", "0.0.1", "Opção de rádio e grupo para seleção mutuamente exclusiva."),
+    ComponentMeta("DEx_Slider", "inputs", "0.0.1", "Slider de valor único e de intervalo para entrada numérica."),
+    ComponentMeta("DEx_Chip", "inputs", "0.0.1", "Chip selecionável para filtros e multi-seleção."),
+    ComponentMeta("DEx_AutoComplete", "inputs", "0.0.1", "Campo de texto com dropdown de sugestões predefinidas."),
+    ComponentMeta("DEx_SearchBar", "inputs", "0.0.1", "Barra de pesquisa expansível com overlay de sugestões."),
+    ComponentMeta("DEx_DataTable", "data", "0.0.1", "Tabela de dados estilizada."),
+    ComponentMeta("DEx_PipelineColumn", "data", "0.0.1", "Coluna de pipeline/Kanban por etapa."),
+    ComponentMeta("DEx_TreeView", "data", "0.0.1", "Árvore hierárquica com busca, expansão e seleção."),
+    ComponentMeta("DEx_AppShell", "layout", "0.0.1", "Shell da aplicação com sidebar e área de conteúdo."),
+    ComponentMeta("DEx_Sidebar", "layout", "0.0.1", "Sidebar de navegação vertical."),
+    ComponentMeta("DEx_Header", "layout", "0.0.1", "Cabeçalho de página com busca e ações."),
+    ComponentMeta("DEx_NavItem", "layout", "0.1.0", "Item de navegação com acento de estado ativo."),
+    ComponentMeta("DEx_Tabs", "layout", "0.0.1", "Barra de abas horizontal com indicador em ACCENT."),
+    ComponentMeta("DEx_NavigationBar", "layout", "0.0.1", "Barra de navegação inferior estilo mobile."),
+    ComponentMeta("DEx_NavigationRail", "layout", "0.0.1", "Rail de navegação vertical compacto para desktop."),
+    ComponentMeta("DEx_NavigationDrawer", "layout", "0.0.1", "Drawer lateral de navegação secundária."),
+    ComponentMeta("DEx_AppBar", "layout", "0.0.1", "Barra superior de aplicação com título e ações."),
+    ComponentMeta("DEx_BottomAppBar", "layout", "0.0.1", "Barra inferior com ações e suporte a FAB."),
+    ComponentMeta("DEx_Notify", "feedback", "0.0.1", "Notificação temporária tipo snackbar."),
+    ComponentMeta("DEx_AlertDialog", "feedback", "0.0.1", "Diálogo modal para confirmações e alertas."),
+    ComponentMeta("DEx_BottomSheet", "feedback", "0.0.2", "Painel deslizante que emerge da borda inferior."),
+    ComponentMeta("DEx_Banner", "feedback", "0.0.1", "Banner persistente abaixo do AppBar para avisos."),
+    ComponentMeta("DEx_Tooltip", "feedback", "0.0.1", "Dica contextual ao hover ou long-press."),
+    ComponentMeta("DEx_ListTile", "data", "0.0.1", "Item de lista com título, subtítulo, leading e trailing."),
+    ComponentMeta("DEx_ExpansionTile", "data", "0.0.1", "Tile expansível que revela controles filhos."),
+    ComponentMeta("DEx_ExpansionPanel", "data", "0.0.1", "Painel acordeão agrupado em ExpansionPanelList."),
+    ComponentMeta("DEx_ListView", "data", "0.0.1", "Lista vertical com scroll e divisores automáticos."),
+    ComponentMeta("DEx_GridView", "data", "0.0.1", "Grade responsiva para cards e itens repetidos."),
+    # Sprint 7 — Feedback e Status
+    ComponentMeta("DEx_ProgressBar", "feedback", "0.0.1", "Barra de progresso horizontal determinada ou indeterminada."),
+    ComponentMeta("DEx_ProgressRing", "feedback", "0.0.2", "Indicador circular de progresso com label opcional."),
+    ComponentMeta("DEx_Shimmer", "feedback", "0.0.1", "Esqueletos de carregamento: ShimmerCard, ShimmerList."),
+    # Sprint 8 — Mídia e Exibição
+    ComponentMeta("DEx_Avatar", "primitives", "0.0.1", "Avatar circular com iniciais coloridas e grupo com overflow."),
+    ComponentMeta("DEx_Image", "primitives", "0.0.1", "Imagem com bordas arredondadas e placeholder de estado vazio."),
+    ComponentMeta("DEx_Icon", "primitives", "0.0.1", "Ícone com tokens de tamanho SM/MD/LG/XL e badge overlay."),
+    ComponentMeta("DEx_Markdown", "primitives", "0.0.1", "Renderizador Markdown com suporte a tabelas e código."),
+    # Sprint 9 — Seletores Temporais e Arquivos
+    ComponentMeta("DEx_DateField", "inputs", "0.0.1", "Campo de data estilizado com ícone e range opcional."),
+    ComponentMeta("DEx_TimeField", "inputs", "0.0.1", "Campo de horário com máscara hh:mm e range opcional."),
+    ComponentMeta("DEx_FilePicker", "inputs", "0.1.0", "Seletor de arquivo nativo com filtro de extensões."),
+    # Sprint 10 — Layout Avançado
+    ComponentMeta("DEx_Stack", "layout", "0.0.1", "Stack com posicionamento absoluto, overlay e badge."),
+    ComponentMeta("DEx_ResponsiveRow", "layout", "0.0.1", "Grade responsiva de 12 colunas com DEx_Col."),
+    ComponentMeta("DEx_GestureDetector", "layout", "0.0.1", "Detector de tap, double-tap, long-press, hover e pan."),
+    ComponentMeta("DEx_Draggable", "layout", "0.0.1", "Drag-and-drop: Draggable + DragTarget por grupo."),
+    ComponentMeta("DEx_AnimatedSwitcher", "layout", "0.0.2", "Troca de conteúdo animada (FADE/SCALE/ROTATION)."),
+    ComponentMeta("DEx_Theme", "theme", "0.0.2", "Tokens de design e construtor de tema Flet."),
+    ComponentMeta("DEx_ColorThemes", "theme", "0.0.3", "Temas de cor acessíveis 60-30-10 para aplicações DEx."),
+]
+
+
+GROUP_DESCRIPTIONS = {
+    "primitives": "Elementos visuais atômicos para composição de controles maiores.",
+    "cards": "Superfícies reutilizáveis para métricas, entidades e conteúdo agrupado.",
+    "buttons": "Controles de ação: primário, secundário e somente ícone.",
+    "inputs": "Controles de formulário e busca estilizados para o sistema visual DEx.",
+    "data": "Controles para tabelas, pipelines e visualizações de dados operacionais.",
+    "layout": "Frame da aplicação, navegação e controles de estrutura de página.",
+    "feedback": "Controles de feedback do usuário para estados transitórios.",
+    "theme": "Cores, espaçamento, tipografia e construção de tema compartilhados.",
+}
+
+
+def get_component_version(name: str) -> str:
+    """Return a component version by name."""
+    for component in COMPONENTS:
+        if component.name == name:
+            return component.version
+    return "0.0.0"

components/primitives/DEx_Avatar.py

@@ -0,0 +1,87 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+_PALETTE = [
+    Colors.ACCENT, Colors.DATA, Colors.SUCCESS,
+    Colors.WARNING, Colors.INFO, Colors.DANGER,
+]
+
+
+def _initials(name: str) -> str:
+    parts = name.strip().split()
+    if len(parts) >= 2:
+        return (parts[0][0] + parts[-1][0]).upper()
+    return name[:2].upper() if name else "?"
+
+
+def _color_for(name: str) -> str:
+    return _PALETTE[sum(ord(c) for c in name) % len(_PALETTE)]
+
+
+def DEx_Avatar(
+    name: str = "",
+    src: str = "",
+    size: int = 36,
+    color: str | None = None,
+    on_click=None,
+) -> ft.Container:
+    """Circular avatar — image when src is provided, initials fallback otherwise."""
+    radius = size // 2
+    if src:
+        inner: ft.Control = ft.CircleAvatar(
+            foreground_image_src=src,
+            radius=radius,
+        )
+    else:
+        bg = color or _color_for(name)
+        inner = ft.CircleAvatar(
+            content=ft.Text(_initials(name), size=max(9, size // 3),
+                            weight=ft.FontWeight.W_700, color=Colors.BG_DEEP),
+            bgcolor=bg,
+            radius=radius,
+        )
+    return ft.Container(
+        content=inner,
+        width=size,
+        height=size,
+        border_radius=radius,
+        clip_behavior=ft.ClipBehavior.HARD_EDGE,
+        on_click=on_click,
+    )
+
+
+def DEx_AvatarGroup(
+    names: list[str],
+    size: int = 32,
+    max_visible: int = 4,
+) -> ft.Stack:
+    """Overlapping avatar group with overflow counter."""
+    visible = names[:max_visible]
+    overflow = len(names) - max_visible
+    overlap = size // 3
+    total_width = size + (len(visible) - 1) * (size - overlap)
+    if overflow > 0:
+        total_width += size - overlap
+
+    controls: list[ft.Control] = []
+    for i, name in enumerate(visible):
+        controls.append(ft.Container(
+            content=DEx_Avatar(name=name, size=size),
+            left=i * (size - overlap),
+            top=0,
+        ))
+    if overflow > 0:
+        controls.append(ft.Container(
+            content=ft.CircleAvatar(
+                content=ft.Text(f"+{overflow}", size=max(8, size // 4),
+                                weight=ft.FontWeight.W_600, color=Colors.TEXT_SECONDARY),
+                bgcolor=Colors.BG_ELEVATED,
+                radius=size // 2,
+            ),
+            width=size, height=size,
+            left=len(visible) * (size - overlap),
+            top=0,
+        ))
+    return ft.Stack(controls, width=total_width, height=size)

components/primitives/DEx_Badge.py

@@ -0,0 +1,18 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors
+
+COMPONENT_VERSION = "0.0.1"
+
+
+def DEx_Badge(
+    label: str,
+    color: str = Colors.DATA,
+    text_color: str = Colors.BG_DEEP,
+) -> ft.Container:
+    """Create the versioned compact badge for status and category labels."""
+    return ft.Container(
+        content=ft.Text(label, size=11, weight=ft.FontWeight.W_600, color=text_color),
+        bgcolor=color,
+        border_radius=4,
+        padding=ft.Padding.symmetric(horizontal=8, vertical=3),
+    )

components/primitives/DEx_Divider.py

@@ -0,0 +1,13 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+
+def DEx_Divider() -> ft.Container:
+    """Create the versioned subtle horizontal divider."""
+    return ft.Container(
+        height=1,
+        bgcolor=Colors.BORDER,
+        margin=ft.Margin.symmetric(vertical=Spacing.SM),
+    )

components/primitives/DEx_Icon.py

@@ -0,0 +1,46 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+# Size tokens
+ICON_SM = 16
+ICON_MD = 20
+ICON_LG = 24
+ICON_XL = 32
+
+
+def DEx_Icon(
+    name: str,
+    size: int = ICON_MD,
+    color: str | None = None,
+    tooltip: str = "",
+) -> ft.Icon:
+    """Design-token icon with default color from DEx palette."""
+    return ft.Icon(
+        name,
+        size=size,
+        color=color or Colors.TEXT_SECONDARY,
+        tooltip=tooltip if tooltip else None,
+    )
+
+
+def DEx_IconBadge(
+    name: str,
+    badge_text: str,
+    size: int = ICON_MD,
+    color: str | None = None,
+    badge_color: str | None = None,
+) -> ft.Stack:
+    """Icon with a small badge overlay in the top-right corner."""
+    return ft.Stack([
+        ft.Icon(name, size=size, color=color or Colors.TEXT_SECONDARY),
+        ft.Container(
+            content=ft.Text(badge_text, size=8, weight=ft.FontWeight.W_700, color=Colors.BG_DEEP),
+            bgcolor=badge_color or Colors.DANGER,
+            border_radius=6,
+            padding=ft.Padding.symmetric(horizontal=3, vertical=1),
+            right=0,
+            top=0,
+        ),
+    ], width=size + 8, height=size + 6)

components/primitives/DEx_Image.py

@@ -0,0 +1,55 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+
+def DEx_Image(
+    src: str,
+    width: int | None = None,
+    height: int | None = None,
+    fit=None,
+    border_radius: int = 0,
+    alt: str = "",
+    expand: bool = False,
+) -> ft.Container:
+    """Styled image with optional rounded corners and cover/contain fit."""
+    img = ft.Image(
+        src=src,
+        width=width,
+        height=height,
+        fit=fit,
+        expand=expand,
+    )
+    if border_radius:
+        return ft.Container(
+            content=img,
+            width=width,
+            height=height,
+            border_radius=border_radius,
+            clip_behavior=ft.ClipBehavior.HARD_EDGE,
+            expand=expand,
+        )
+    return ft.Container(content=img, width=width, height=height, expand=expand)
+
+
+def DEx_ImagePlaceholder(
+    width: int = 200,
+    height: int = 120,
+    icon: str = ft.Icons.IMAGE_ROUNDED,
+    label: str = "Sem imagem",
+    border_radius: int = 0,
+) -> ft.Container:
+    """Placeholder shown when no image is available."""
+    return ft.Container(
+        content=ft.Column([
+            ft.Icon(icon, size=28, color=Colors.TEXT_MUTED),
+            ft.Text(label, size=11, color=Colors.TEXT_MUTED),
+        ], horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+           alignment=ft.MainAxisAlignment.CENTER, spacing=4),
+        width=width,
+        height=height,
+        bgcolor=Colors.BG_ELEVATED,
+        border=ft.Border.all(1, Colors.BORDER),
+        border_radius=border_radius,
+    )

components/primitives/DEx_Markdown.py

@@ -0,0 +1,21 @@
+import flet as ft
+from components.theme.DEx_Theme import Colors, Spacing
+
+COMPONENT_VERSION = "0.0.1"
+
+
+def DEx_Markdown(
+    content: str,
+    selectable: bool = False,
+    expand: bool = False,
+    width: int | None = None,
+) -> ft.Markdown:
+    """Styled Markdown renderer using DEx color tokens."""
+    return ft.Markdown(
+        value=content,
+        selectable=selectable,
+        expand=expand,
+        width=width,
+        code_theme="atom-one-dark",
+        extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
+    )