rook-cli 1.3.2 → 1.3.5

package/rook-framework/config/rk-color-scheme-group.json

@@ -0,0 +1,138 @@
+[
+    {
+        "name": "Rook UI — Esquema de Cores",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Esquemas de cores do Rook UI. Cada seção pode aplicar um esquema diferente nos componentes rk-*."
+            },
+            {
+                "type": "color_scheme_group",
+                "id": "rk_color_schemes",
+                "definition": [
+                    {
+                        "type": "header",
+                        "content": "Cores de Fundo"
+                    },
+                    {
+                        "type": "color",
+                        "id": "background",
+                        "label": "Fundo",
+                        "default": "#ffffff"
+                    },
+                    {
+                        "type": "color",
+                        "id": "background_secondary",
+                        "label": "Fundo Secundário",
+                        "default": "#f5f5f5",
+                        "info": "Usado em tabs, toggles, progress track e cards."
+                    },
+                    {
+                        "type": "header",
+                        "content": "Cores Primárias"
+                    },
+                    {
+                        "type": "color",
+                        "id": "primary",
+                        "label": "Cor Primária",
+                        "default": "#000000",
+                        "info": "Botões, links e destaques."
+                    },
+                    {
+                        "type": "color",
+                        "id": "primary_hover",
+                        "label": "Cor Primária (Hover)",
+                        "default": "#1a1a1a"
+                    },
+                    {
+                        "type": "color",
+                        "id": "primary_foreground",
+                        "label": "Texto sobre Primária",
+                        "default": "#ffffff",
+                        "info": "Texto quando o fundo é a cor primária (botões, FAB)."
+                    },
+                    {
+                        "type": "header",
+                        "content": "Cores Secundárias"
+                    },
+                    {
+                        "type": "color",
+                        "id": "secondary",
+                        "label": "Cor Secundária",
+                        "default": "#ffffff"
+                    },
+                    {
+                        "type": "color",
+                        "id": "secondary_hover",
+                        "label": "Cor Secundária (Hover)",
+                        "default": "#f5f5f5"
+                    },
+                    {
+                        "type": "header",
+                        "content": "Cores Semânticas"
+                    },
+                    {
+                        "type": "color",
+                        "id": "success",
+                        "label": "Cor de Sucesso",
+                        "default": "#22c55e"
+                    },
+                    {
+                        "type": "color",
+                        "id": "danger",
+                        "label": "Cor de Erro / Perigo",
+                        "default": "#ef4444"
+                    },
+                    {
+                        "type": "header",
+                        "content": "Texto e Bordas"
+                    },
+                    {
+                        "type": "color",
+                        "id": "text",
+                        "label": "Cor do Texto",
+                        "default": "#1a1a1a"
+                    },
+                    {
+                        "type": "color",
+                        "id": "text_muted",
+                        "label": "Texto Secundário",
+                        "default": "#737373"
+                    },
+                    {
+                        "type": "color",
+                        "id": "border",
+                        "label": "Cor da Borda",
+                        "default": "#e5e5e5"
+                    },
+                    {
+                        "type": "color",
+                        "id": "ring",
+                        "label": "Anel de Foco (Focus Ring)",
+                        "default": "#0f172a",
+                        "info": "Cor do outline de foco para acessibilidade."
+                    },
+                    {
+                        "type": "color",
+                        "id": "shadow",
+                        "label": "Cor da Sombra",
+                        "default": "#000000",
+                        "info": "Base para box-shadow de cards, drawers e popovers."
+                    }
+                ],
+                "role": {
+                    "text": "text",
+                    "background": "background",
+                    "links": "primary",
+                    "icons": "text",
+                    "primary_button": "primary",
+                    "on_primary_button": "primary_foreground",
+                    "primary_button_border": "primary",
+                    "secondary_button": "secondary",
+                    "on_secondary_button": "primary",
+                    "secondary_button_border": "border"
+                }
+            }
+        ]
+    }
+]

package/rook-framework/config/rk-settings_schema.json

@@ -0,0 +1,259 @@
+[
+    {
+        "name": "Rook UI — Cores",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Cores globais padrão do Rook UI. Essas cores definem o :root e são usadas quando nenhum esquema de cores é aplicado na seção."
+            },
+            {
+                "type": "header",
+                "content": "Cores Primárias"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_primary",
+                "label": "Cor Primária",
+                "default": "#000000",
+                "info": "Cor principal dos botões, links e destaques."
+            },
+            {
+                "type": "color",
+                "id": "rk_color_primary_hover",
+                "label": "Cor Primária (Hover)",
+                "default": "#1a1a1a"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_primary_foreground",
+                "label": "Texto sobre Primária",
+                "default": "#ffffff",
+                "info": "Cor do texto quando o fundo é a cor primária."
+            },
+            {
+                "type": "header",
+                "content": "Cores Secundárias"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_secondary",
+                "label": "Cor Secundária",
+                "default": "#ffffff"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_secondary_hover",
+                "label": "Cor Secundária (Hover)",
+                "default": "#f5f5f5"
+            },
+            {
+                "type": "header",
+                "content": "Cores de Fundo"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_background",
+                "label": "Fundo da Página",
+                "default": "#ffffff",
+                "info": "Cor de fundo geral dos componentes do framework."
+            },
+            {
+                "type": "color",
+                "id": "rk_color_background_secondary",
+                "label": "Fundo Secundário",
+                "default": "#f5f5f5",
+                "info": "Usado em tabs, toggles, cards e áreas com destaque sutil."
+            },
+            {
+                "type": "header",
+                "content": "Cores Semânticas"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_success",
+                "label": "Cor de Sucesso",
+                "default": "#22c55e"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_danger",
+                "label": "Cor de Erro / Perigo",
+                "default": "#ef4444"
+            },
+            {
+                "type": "header",
+                "content": "Texto e Bordas"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_text",
+                "label": "Cor do Texto Base",
+                "default": "#1a1a1a"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_text_muted",
+                "label": "Cor do Texto Secundário",
+                "default": "#737373"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_border",
+                "label": "Cor da Borda",
+                "default": "#e5e5e5"
+            },
+            {
+                "type": "color",
+                "id": "rk_color_ring",
+                "label": "Cor do Anel de Foco (Focus Ring)",
+                "default": "#0f172a",
+                "info": "Cor utilizada no outline de foco (acessibilidade)."
+            }
+        ]
+    },
+    {
+        "name": "Rook UI — Forma e Transição",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Controle de arredondamento (border-radius), espaçamentos e transições dos componentes rk-*."
+            },
+            {
+                "type": "header",
+                "content": "Arredondamento (Border Radius)"
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius",
+                "min": 0,
+                "max": 40,
+                "step": 2,
+                "unit": "px",
+                "label": "Arredondamento Padrão",
+                "default": 8,
+                "info": "Aplicado em botões, inputs, cards e a maioria dos componentes."
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius_sm",
+                "min": 0,
+                "max": 20,
+                "step": 1,
+                "unit": "px",
+                "label": "Arredondamento Pequeno",
+                "default": 4,
+                "info": "Usado em badges, itens de menu e elementos menores."
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius_lg",
+                "min": 0,
+                "max": 40,
+                "step": 2,
+                "unit": "px",
+                "label": "Arredondamento Grande",
+                "default": 12,
+                "info": "Usado em cards e containers maiores."
+            },
+            {
+                "type": "range",
+                "id": "rk_border_radius_pill",
+                "min": 0,
+                "max": 100,
+                "step": 2,
+                "unit": "px",
+                "label": "Arredondamento Pill",
+                "default": 50,
+                "info": "Formato pill/arredondado completo (scrollbar thumbs, badges pill, etc)."
+            },
+            {
+                "type": "header",
+                "content": "Transição"
+            },
+            {
+                "type": "range",
+                "id": "rk_transition_speed",
+                "min": 100,
+                "max": 800,
+                "step": 50,
+                "unit": "ms",
+                "label": "Velocidade da Transição",
+                "default": 300,
+                "info": "Controla a velocidade de hover, abertura de modals, drawers e outros efeitos."
+            }
+        ]
+    },
+    {
+        "name": "Rook UI — Parcelamento",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Configurações de cálculo de parcelamento exibidas pelos componentes rk-installments."
+            },
+            {
+                "type": "checkbox",
+                "id": "rk_installments_enabled",
+                "label": "Ativar Parcelamento",
+                "default": true
+            },
+            {
+                "type": "number",
+                "id": "rk_installments_max",
+                "label": "Quantidade Máxima de Parcelas",
+                "default": 12
+            },
+            {
+                "type": "number",
+                "id": "rk_installments_without_interest",
+                "label": "Quantidade de Parcelas Sem Juros",
+                "default": 3
+            },
+            {
+                "type": "text",
+                "id": "rk_installments_min_value",
+                "label": "Valor Mínimo da Parcela (em centavos)",
+                "info": "Ex: 500 para representar R$ 5,00",
+                "default": "500"
+            },
+            {
+                "type": "text",
+                "id": "rk_installments_interest_rate",
+                "label": "Taxa de Juros ao Mês (%)",
+                "info": "Ex: 2.99",
+                "default": "2.99"
+            }
+        ]
+    },
+    {
+        "name": "Rook UI — Pix",
+        "settings": [
+            {
+                "type": "paragraph",
+                "content": "Configurações de desconto Pix exibidas pelos componentes rk-pix-discount."
+            },
+            {
+                "type": "checkbox",
+                "id": "rk_pix_enabled",
+                "label": "Ativar Desconto Pix",
+                "default": true
+            },
+            {
+                "type": "range",
+                "id": "rk_pix_discount",
+                "min": 0,
+                "max": 30,
+                "step": 1,
+                "unit": "%",
+                "label": "Porcentagem de Desconto no Pix",
+                "default": 5
+            },
+            {
+                "type": "text",
+                "id": "rk_pix_label",
+                "label": "Texto do Pix",
+                "default": "no Pix",
+                "info": "Texto exibido ao lado do valor com desconto (ex: 'no Pix', 'via Pix')."
+            }
+        ]
+    }
+]

package/rook-framework/snippets/rk-accordion.liquid

@@ -0,0 +1,31 @@
+{% doc %}
+  Snippet: RkAccordion
+  Renders a disclosure / accordion using <details> + Web Component.
+
+  @param {string} title - The accordion header text
+  @param {string} content - The content to show/hide (HTML safe)
+  @param {boolean} [open] - Whether it should start open
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-accordion', title: 'Descrição', content: product.description %}
+{% enddoc %}
+
+<rk-accordion-element>
+  <details
+    class="rk-accordion{% if custom_class %} {{ custom_class }}{% endif %}"
+    {% if open %}open{% endif %}
+  >
+    <summary class="rk-accordion__trigger">
+      <span>{{ title }}</span>
+      <span class="rk-accordion__icon" aria-hidden="true">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+    </summary>
+    <div class="rk-accordion__content">
+      {{ content }}
+    </div>
+  </details>
+</rk-accordion-element>

package/rook-framework/snippets/rk-alert-dialog.liquid

@@ -0,0 +1,83 @@
+{% doc %}
+  Snippet: RkAlertDialog
+  Renders an Alert Dialog for critical confirmations.
+  Uses Web Component <rk-alert-dialog-element> for behaviour.
+
+  Unlike the standard Modal, the Alert Dialog:
+  - Does NOT close on overlay click
+  - Focuses the Cancel button by default (safety)
+  - Uses role="alertdialog" for assistive technologies
+
+  @param {string} id - Unique alert dialog id
+  @param {string} title - Alert title (required)
+  @param {string} [description] - Explanatory text about consequences
+  @param {string} [cancel_text] - Cancel button text (default: 'Cancelar')
+  @param {string} [confirm_text] - Confirm button text (default: 'Confirmar')
+  @param {string} [confirm_style] - Confirm button rk-button style (default: 'primary')
+  @param {boolean} [esc_close] - Allow ESC key to close (default: true)
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-alert-dialog',
+    id: 'delete-account',
+    title: 'Você tem certeza absoluta?',
+    description: 'Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta.',
+    cancel_text: 'Cancelar',
+    confirm_text: 'Excluir Conta',
+    confirm_style: 'danger'
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign ad_cancel_text = cancel_text | default: 'Cancelar'
+  assign ad_confirm_text = confirm_text | default: 'Confirmar'
+  assign ad_confirm_style = confirm_style | default: 'primary'
+  assign ad_esc_close = esc_close | default: true
+-%}
+
+{%- capture title_id -%}{{ id }}-title{%- endcapture -%}
+{%- capture desc_id -%}{{ id }}-desc{%- endcapture -%}
+
+<rk-alert-dialog-element data-alert-dialog-id="{{ id }}" data-esc-close="{{ ad_esc_close }}">
+  <div
+    id="{{ id }}"
+    class="rk-alert-dialog{% if custom_class %} {{ custom_class }}{% endif %}"
+  >
+    {%- comment -%} Overlay (non-dismissable) {%- endcomment -%}
+    <div class="rk-alert-dialog__overlay"></div>
+
+    {%- comment -%} Content {%- endcomment -%}
+    <div
+      class="rk-alert-dialog__content"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="{{ title_id }}"
+      {% if description %}aria-describedby="{{ desc_id }}"{% endif %}
+    >
+      <div class="rk-alert-dialog__header">
+        <h2 id="{{ title_id }}" class="rk-alert-dialog__title">{{ title }}</h2>
+        {%- if description -%}
+          <p id="{{ desc_id }}" class="rk-alert-dialog__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+
+      <div class="rk-alert-dialog__footer">
+        <button
+          type="button"
+          class="rk-btn rk-btn--secondary rk-btn--md"
+          data-action="cancel"
+        >
+          <span class="rk-btn__text">{{ ad_cancel_text }}</span>
+        </button>
+
+        <button
+          type="button"
+          class="rk-btn rk-btn--{{ ad_confirm_style }} rk-btn--md"
+          data-action="confirm"
+        >
+          <span class="rk-btn__text">{{ ad_confirm_text }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</rk-alert-dialog-element>

package/rook-framework/snippets/rk-aspect-ratio.liquid

@@ -0,0 +1,23 @@
+{% doc %}
+  Snippet: RkAspectRatio
+  Um container utilitário que força uma proporção específica (aspect-ratio) no seu conteúdo.
+  Ideal para imagens, embeds, iframes e esqueletos de carregamento.
+
+  @param {string} content - O conteúdo html a ser encaixado (ex: tag img, iframe). Age como `asChild`.
+  @param {string} [ratio] - A proporção (ex: '16/9', '4/3', '1/1', '21/9'). Padrão: '16/9'
+  @param {string} [custom_class] - Classes CSS adicionais.
+
+  @example
+  {% capture media_img %}
+    <img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}">
+  {% endcapture %}
+  {% render 'rk-aspect-ratio', content: media_img, ratio: '1/1' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_ratio = ratio | default: '16/9'
+-%}
+
+<div class="rk-aspect-ratio{% if custom_class %} {{ custom_class }}{% endif %}" style="aspect-ratio: {{ t_ratio }};">
+  {{ content }}
+</div>

package/rook-framework/snippets/rk-badge.liquid

@@ -0,0 +1,17 @@
+{% doc %}
+  Snippet: RkBadge
+  Renders a small label badge.
+
+  @param {string} text - Badge text
+  @param {string} [style] - 'primary' | 'success' | 'danger' | 'outline' (default: 'primary')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-badge', text: 'Novo', style: 'success' %}
+{% enddoc %}
+
+{%- assign badge_style = style | default: 'primary' -%}
+
+<span class="rk-badge rk-badge--{{ badge_style }}{% if custom_class %} {{ custom_class }}{% endif %}">
+  {{ text }}
+</span>

package/rook-framework/snippets/rk-bottom-app-bar.liquid

@@ -0,0 +1,51 @@
+{% doc %}
+  Snippet: RkBottomAppBar
+  Renders a Bottom App Bar (Menubar style) that fixes at the screen bottom.
+  Includes a Glassmorphism effect and Safe Area support.
+
+  @param {string} content - HTML content representing the buttons/links. MUST use `role="menuitem"` for JS keyboard tracking.
+  @param {string} [fab] - HTML content for a Floating Action Button in the center.
+  @param {string} [id] - Unique ID for the bar
+  @param {string} [alignment] - 'distributed' | 'grouped' (default: 'distributed')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture app_bar_items %}
+    <button role="menuitem" class="rk-bottom-app-bar__item">
+      <span>Home</span>
+    </button>
+    <button role="menuitem" class="rk-bottom-app-bar__item">
+      <span>Categorias</span>
+    </button>
+  {% endcapture %}
+
+  {% capture my_fab %}
+    <button role="menuitem" class="rk-bottom-app-bar__fab">🛒</button>
+  {% endcapture %}
+
+  {% render 'rk-bottom-app-bar', content: app_bar_items, fab: my_fab, alignment: 'grouped' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_alignment = alignment | default: 'distributed'
+  assign t_id = id | default: 'rk-bottom-app-bar'
+-%}
+
+<rk-bottom-app-bar-element
+  id="{{ t_id }}"
+  class="rk-bottom-app-bar rk-bottom-app-bar--{{ t_alignment }}{% if custom_class %} {{ custom_class }}{% endif %}"
+  role="menubar"
+  aria-label="Bottom Navigation"
+>
+  {%- comment -%} Optional FAB that breaks the edge {%- endcomment -%}
+  {%- if fab -%}
+    <div class="rk-bottom-app-bar__fab-wrapper">
+      {{ fab }}
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Normal Items Row {%- endcomment -%}
+  <div class="rk-bottom-app-bar__row">
+    {{ content }}
+  </div>
+</rk-bottom-app-bar-element>

package/rook-framework/snippets/rk-button.liquid

@@ -0,0 +1,49 @@
+{% doc %}
+  Snippet: RkButton
+  Renders a button or link with style variants.
+
+  @param {string} text - Button label text
+  @param {string} [url] - If set, renders as <a> instead of <button>
+  @param {string} [style] - 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' (default: 'primary')
+  @param {string} [size] - 'sm' | 'md' | 'lg' (default: 'md')
+  @param {string} [type] - Button type attribute ('button' | 'submit'), default: 'button'
+  @param {boolean} [disabled] - Disables the button
+  @param {boolean} [loading] - Shows spinner state
+  @param {boolean} [full_width] - Makes the button 100% width
+  @param {string} [icon] - Icon name to render before text
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [attr] - Additional HTML attributes (e.g. data-*, aria-*)
+  @param {boolean} [open_in_new_tab] - Opens link in new tab
+
+  @example
+  {% render 'rk-button', text: 'Buy Now', style: 'primary', size: 'lg' %}
+  {% render 'rk-button', text: 'Learn More', url: '/about', style: 'outline' %}
+{% enddoc %}
+
+{%- liquid
+  assign tag = 'button'
+  if url != blank
+    assign tag = 'a'
+  endif
+
+  assign btn_style = style | default: 'primary'
+  assign btn_size = size | default: 'md'
+  assign btn_type = type | default: 'button'
+-%}
+
+<{{ tag }}
+  {% if tag == 'a' %}
+    href="{{ url }}"
+    {% if open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
+  {% else %}
+    type="{{ btn_type }}"
+    {% if disabled %}disabled{% endif %}
+  {% endif %}
+  class="rk-btn rk-btn--{{ btn_style }} rk-btn--{{ btn_size }}{% if full_width %} rk-btn--full{% endif %}{% if loading %} rk-btn--loading{% endif %}{% if disabled %} rk-btn--disabled{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {{ attr }}
+>
+  {%- if icon != blank -%}
+    <span class="rk-icon rk-icon--sm">{% render 'icon', icon: icon %}</span>
+  {%- endif -%}
+  <span class="rk-btn__text">{{ text }}</span>
+</{{ tag }}>