rook-cli 1.3.8 → 1.3.9

package/rook-framework/blocks/rk-quick-add.liquid

@@ -39,7 +39,7 @@
 
 {% schema %}
 {
-  "name": "RK | Adicionar ao Carrinho",
+  "name": "RK | Quick Add",
   "tag": null,
   "settings": [
     {
@@ -129,7 +129,7 @@
   ],
   "presets": [
     {
-      "name": "RK | Adicionar ao Carrinho",
+      "name": "RK | Quick Add",
       "category": "Rook UI"
     }
   ]

package/rook-framework/blocks/rk-typography.liquid

@@ -1,46 +1,87 @@
 {% comment %}
-  Block: RK Typography
-  Renders a rk-typography for headings and text blocks.
-  Uses rk-spacing-style for Horizon-compatible spacing.
+  Block: RK Typography (Text)
+  Renders text content using rk-typography snippet.
+  Supports plain text and richtext modes with full styling controls.
 {% endcomment %}
 
+{%- liquid
+  assign bs = block.settings
+  assign use_richtext = bs.use_richtext
+  assign el_size = bs.size | default: 'md'
+-%}
+
 <rk-typography-block
   id="block-{{ block.id }}"
   {{ block.shopify_attributes }}
-  class="rk-block rk-spacing-style"
+  class="rk-block rk-block--text rk-spacing-style rk-size-style"
   style="
-    {% render 'rk-spacing-style', settings: block.settings %}
-    {% if block.settings.custom_color != blank %}--rk-typo-color: {{ block.settings.custom_color }};{% endif %}
+    {% render 'rk-spacing-style', settings: bs %}
+    {% render 'rk-size-style', settings: bs %}
+    {% if bs.custom_color != blank %}--rk-text-color: {{ bs.custom_color }};{% endif %}
+    {% if bs.max_width != 'none' %}--rk-text-max-width: {{ bs.max_width }};{% endif %}
+    {% if bs.line_height != 'default' %}--rk-text-line-height: var(--rk-line-height-{{ bs.line_height }});{% endif %}
+    {% if bs.letter_spacing != 'normal' %}--rk-text-letter-spacing: var(--rk-letter-spacing-{{ bs.letter_spacing }});{% endif %}
+    {% if bs.wrap != 'pretty' %}--rk-text-wrap: {{ bs.wrap }};{% endif %}
+    {% if bs.background %}--rk-text-bg: {{ bs.background_color }};--rk-text-radius: {{ bs.corner_radius }}px;{% endif %}
   "
 >
-  {%- liquid
-    assign use_richtext = false
-    if block.settings.use_richtext
-      assign use_richtext = true
-    endif
-  -%}
-
   {% if use_richtext %}
     <div
-      class="rk-typography rk-typography--{{ block.settings.size }}{% if block.settings.bold %} rk-typography--bold{% endif %}{% if block.settings.muted %} rk-typography--muted{% endif %}{% if block.settings.uppercase %} rk-typography--uppercase{% endif %}"
-      style="text-align: {{ block.settings.alignment }};{% if block.settings.custom_color != blank %} color: var(--rk-typo-color);{% endif %}"
+      class="rk-typography rk-typography--{{ el_size }}{% if bs.bold %} rk-typography--bold{% endif %}{% if bs.muted %} rk-typography--muted{% endif %}{% if bs.uppercase %} rk-typography--uppercase{% endif %} rk-block__text"
+      {% if bs.alignment %}style="text-align: {{ bs.alignment }};"{% endif %}
     >
-      {{ block.settings.richtext }}
+      {{ bs.richtext }}
     </div>
   {% else %}
     {% render 'rk-typography',
-      text: block.settings.text,
-      tag: block.settings.tag,
-      size: block.settings.size,
-      align: block.settings.alignment,
-      bold: block.settings.bold,
-      muted: block.settings.muted,
-      uppercase: block.settings.uppercase,
-      custom_class: block.settings.custom_color | prepend: 'color:' | prepend: 'style="' | append: '"'
+      text: bs.text,
+      tag: bs.tag,
+      size: el_size,
+      align: bs.alignment,
+      bold: bs.bold,
+      muted: bs.muted,
+      uppercase: bs.uppercase,
+      custom_class: 'rk-block__text'
     %}
   {% endif %}
 </rk-typography-block>
 
+{% stylesheet %}
+  .rk-block--text {
+    width: var(--rk-width, fit-content);
+  }
+
+  .rk-block--text .rk-block__text {
+    margin: 0;
+    color: var(--rk-text-color, inherit);
+    max-width: var(--rk-text-max-width, none);
+    line-height: var(--rk-text-line-height, var(--rk-line-height-relaxed));
+    letter-spacing: var(--rk-text-letter-spacing, normal);
+    text-wrap: var(--rk-text-wrap, pretty);
+  }
+
+  .rk-block--text .rk-block__text p {
+    margin: 0;
+  }
+
+  .rk-block--text .rk-block__text p + p {
+    margin-top: var(--rk-space-sm);
+  }
+
+  /* Background mode */
+  .rk-block--text[style*="--rk-text-bg"] .rk-block__text {
+    background-color: var(--rk-text-bg);
+    border-radius: var(--rk-text-radius, 0);
+    padding: var(--rk-space-sm) var(--rk-space-md);
+  }
+
+  @media (max-width: 749px) {
+    .rk-block--text {
+      width: var(--rk-width-mobile, var(--rk-width, fit-content));
+    }
+  }
+{% endstylesheet %}
+
 {% schema %}
 {
   "name": "RK | Texto",
@@ -72,39 +113,37 @@
       "label": "Tag HTML",
       "options": [
         { "value": "p", "label": "Parágrafo (p)" },
-        { "value": "h1", "label": "Título H1" },
-        { "value": "h2", "label": "Título H2" },
-        { "value": "h3", "label": "Título H3" },
-        { "value": "h4", "label": "Título H4" },
-        { "value": "h5", "label": "Título H5" },
-        { "value": "h6", "label": "Título H6" },
+        { "value": "h1", "label": "H1" },
+        { "value": "h2", "label": "H2" },
+        { "value": "h3", "label": "H3" },
+        { "value": "h4", "label": "H4" },
+        { "value": "h5", "label": "H5" },
+        { "value": "h6", "label": "H6" },
         { "value": "span", "label": "Span" }
       ],
       "default": "p",
       "visible_if": "{{ block.settings.use_richtext == false }}"
     },
+    {
+      "type": "header",
+      "content": "Tipografia"
+    },
     {
       "type": "select",
       "id": "size",
       "label": "Tamanho",
       "options": [
-        { "value": "xs", "label": "Extra Pequeno (12px)" },
-        { "value": "sm", "label": "Pequeno (14px)" },
-        { "value": "md", "label": "Médio (16px)" },
-        { "value": "lg", "label": "Grande (18px)" },
-        { "value": "xl", "label": "Extra Grande (20px)" },
+        { "value": "xs", "label": "XS (12px)" },
+        { "value": "sm", "label": "SM (14px)" },
+        { "value": "md", "label": "MD (16px)" },
+        { "value": "lg", "label": "LG (18px)" },
+        { "value": "xl", "label": "XL (20px)" },
         { "value": "2xl", "label": "2XL (24px)" },
         { "value": "3xl", "label": "3XL (30px)" },
         { "value": "4xl", "label": "4XL (36px)" }
       ],
       "default": "md"
     },
-    {
-      "type": "text_alignment",
-      "id": "alignment",
-      "label": "Alinhamento",
-      "default": "left"
-    },
     {
       "type": "checkbox",
       "id": "bold",
@@ -114,19 +153,133 @@
     {
       "type": "checkbox",
       "id": "muted",
-      "label": "Cor suave (muted)",
+      "label": "Cor Suave (muted)",
       "default": false
     },
     {
       "type": "checkbox",
       "id": "uppercase",
-      "label": "Caixa alta",
+      "label": "Caixa Alta",
       "default": false
     },
+    {
+      "type": "select",
+      "id": "line_height",
+      "label": "Altura da Linha",
+      "options": [
+        { "value": "default", "label": "Padrão" },
+        { "value": "tight", "label": "Compacto" },
+        { "value": "normal", "label": "Normal" },
+        { "value": "relaxed", "label": "Espaçado" }
+      ],
+      "default": "default"
+    },
+    {
+      "type": "select",
+      "id": "letter_spacing",
+      "label": "Espaçamento entre Letras",
+      "options": [
+        { "value": "normal", "label": "Normal" },
+        { "value": "tight", "label": "Compacto" },
+        { "value": "wide", "label": "Espaçado" }
+      ],
+      "default": "normal"
+    },
+    {
+      "type": "select",
+      "id": "wrap",
+      "label": "Quebra de Texto",
+      "options": [
+        { "value": "pretty", "label": "Pretty" },
+        { "value": "balance", "label": "Balance" },
+        { "value": "nowrap", "label": "Sem quebra" }
+      ],
+      "default": "pretty"
+    },
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "alignment",
+      "label": "Alinhamento",
+      "options": [
+        { "value": "left", "label": "Esquerda" },
+        { "value": "center", "label": "Centro" },
+        { "value": "right", "label": "Direita" }
+      ],
+      "default": "left"
+    },
+    {
+      "type": "select",
+      "id": "width",
+      "label": "Largura",
+      "options": [
+        { "value": "fit-content", "label": "Ajustar ao conteúdo" },
+        { "value": "fill", "label": "Preencher (100%)" }
+      ],
+      "default": "fit-content"
+    },
+    {
+      "type": "select",
+      "id": "width_mobile",
+      "label": "Largura Mobile",
+      "options": [
+        { "value": "fit-content", "label": "Ajustar ao conteúdo" },
+        { "value": "fill", "label": "Preencher (100%)" }
+      ],
+      "default": "fill"
+    },
+    {
+      "type": "select",
+      "id": "max_width",
+      "label": "Largura Máxima",
+      "options": [
+        { "value": "none", "label": "Sem limite" },
+        { "value": "40ch", "label": "Estreita (40ch)" },
+        { "value": "60ch", "label": "Normal (60ch)" },
+        { "value": "80ch", "label": "Larga (80ch)" }
+      ],
+      "default": "none"
+    },
+    {
+      "type": "header",
+      "content": "Cor"
+    },
     {
       "type": "color",
       "id": "custom_color",
-      "label": "Cor personalizada"
+      "label": "Cor Personalizada",
+      "info": "Deixe vazio para herdar a cor do contexto."
+    },
+    {
+      "type": "header",
+      "content": "Aparência"
+    },
+    {
+      "type": "checkbox",
+      "id": "background",
+      "label": "Fundo Colorido",
+      "default": false
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "Cor de Fundo",
+      "default": "#00000026",
+      "visible_if": "{{ block.settings.background }}"
+    },
+    {
+      "type": "range",
+      "id": "corner_radius",
+      "label": "Raio da Borda",
+      "min": 0,
+      "max": 50,
+      "step": 1,
+      "unit": "px",
+      "default": 0,
+      "visible_if": "{{ block.settings.background }}"
     },
     {
       "type": "header",
@@ -176,7 +329,18 @@
   "presets": [
     {
       "name": "RK | Texto",
-      "category": "Rook UI"
+      "category": "Rook UI",
+      "settings": {
+        "text": "Seu texto aqui"
+      }
+    },
+    {
+      "name": "RK | Texto Avançado",
+      "category": "Rook UI",
+      "settings": {
+        "use_richtext": true,
+        "width": "fill"
+      }
     }
   ]
 }