rook-cli 1.3.2 → 1.3.5

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

@@ -0,0 +1,56 @@
+{% doc %}
+  Snippet: RkQuantity
+  Renders a quantity selector wrapped in a Web Component.
+
+  @param {number} [value] - Initial quantity (default: 1)
+  @param {number} [min] - Minimum value (default: 1)
+  @param {number} [max] - Maximum value
+  @param {number} [step] - Step increment (default: 1)
+  @param {string} [name] - Input name attribute (default: 'quantity')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-quantity', value: 1, min: 1, max: 10 %}
+{% enddoc %}
+
+{%- liquid
+  assign qty_value = value | default: 1
+  assign qty_min = min | default: 1
+  assign qty_step = step | default: 1
+  assign qty_name = name | default: 'quantity'
+-%}
+
+<rk-quantity-selector class="rk-quantity{% if custom_class %} {{ custom_class }}{% endif %}">
+  <button
+    type="button"
+    class="rk-quantity__btn"
+    data-type="minus"
+    aria-label="{{ 'accessibility.decrease_quantity' | t | default: 'Diminuir quantidade' }}"
+    {% if qty_value <= qty_min %}disabled{% endif %}
+  >
+    <span aria-hidden="true">−</span>
+  </button>
+
+  <input
+    type="number"
+    class="rk-quantity__input"
+    name="{{ qty_name }}"
+    value="{{ qty_value }}"
+    min="{{ qty_min }}"
+    {% if max %}max="{{ max }}"{% endif %}
+    step="{{ qty_step }}"
+    aria-label="{{ 'accessibility.quantity' | t | default: 'Quantidade' }}"
+    inputmode="numeric"
+    pattern="[0-9]*"
+  >
+
+  <button
+    type="button"
+    class="rk-quantity__btn"
+    data-type="plus"
+    aria-label="{{ 'accessibility.increase_quantity' | t | default: 'Aumentar quantidade' }}"
+    {% if max and qty_value >= max %}disabled{% endif %}
+  >
+    <span aria-hidden="true">+</span>
+  </button>
+</rk-quantity-selector>

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

@@ -0,0 +1,67 @@
+{% doc %}
+  Snippet: RkQuickAdd
+  Renders an "Add to Cart" button with optional quantity selector.
+  ⚠️ EXCEPTION: This component is coupled to Horizon's quick-add.js & events.js.
+
+  @param {object} product - The product object
+  @param {string} section_id - The section ID
+  @param {boolean} [show_quantity] - Shows the rk-quantity selector (default: false)
+  @param {string} [button_text] - Override button text
+  @param {string} [button_style] - rk-button style (default: 'primary')
+  @param {string} [button_size] - rk-button size (default: 'md')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-quick-add', product: product, section_id: section.id, show_quantity: true %}
+{% enddoc %}
+
+{%- liquid
+  assign variant = product.selected_or_first_available_variant
+  assign form_id = 'RkQuickAdd-' | append: product.id | append: '-' | append: section_id
+  assign add_text = button_text | default: 'Adicionar ao Carrinho'
+  assign btn_style = button_style | default: 'primary'
+  assign btn_size = button_size | default: 'md'
+
+  assign can_add = false
+  if variant.available
+    assign can_add = true
+  endif
+-%}
+
+<quick-add-component
+  class="rk-quick-add{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-product-title="{{ product.title }}"
+>
+  <product-form-component
+    data-section-id="{{ section_id }}"
+    data-product-id="{{ product.id }}"
+    on:submit="/handleSubmit"
+  >
+    {%- form 'product', product, id: form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
+      <input type="hidden" name="id" value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>
+
+      {% if show_quantity %}
+        <div style="margin-bottom: var(--rk-space-sm);">
+          {% render 'rk-quantity',
+            value: variant.quantity_rule.min | default: 1,
+            min: variant.quantity_rule.min | default: 1,
+            max: variant.quantity_rule.max,
+            step: variant.quantity_rule.increment | default: 1,
+            name: 'quantity'
+          %}
+        </div>
+      {% else %}
+        <input type="hidden" name="quantity" value="{{ variant.quantity_rule.min | default: 1 }}">
+      {% endif %}
+
+      {% render 'rk-button',
+        text: add_text,
+        type: 'submit',
+        style: btn_style,
+        size: btn_size,
+        disabled: can_add == false,
+        full_width: true
+      %}
+    {%- endform -%}
+  </product-form-component>
+</quick-add-component>

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

@@ -0,0 +1,17 @@
+{% doc %}
+  Snippet: RkScripts
+  Módulo de carregamento concentrado dos web components do Rook UI Core.
+  Garante que todos os controllers JS do framework sejam injetados juntos e de forma organizada,
+  mantendo a arquitetura desacoplada e limpa (SOLID).
+{% enddoc %}
+
+{%- liquid
+  # Lista de componentes JS essenciais do Rook Framework
+  assign rk_components = 'quantity,modal,accordion,popover,scroll-area,drawer,dialog,sheet,tabs,toggle,progress,collapsible,carousel,bottom-app-bar'
+  assign rk_components_array = rk_components | split: ','
+-%}
+
+<!-- [RkScripts] Web Components Controllers -->
+{%- for component in rk_components_array -%}
+  <script src="{{ 'rk-' | append: component | append: '.js' | asset_url }}" defer></script>
+{%- endfor -%}

package/rook-framework/snippets/rk-scroll-area.liquid

@@ -0,0 +1,60 @@
+{% doc %}
+  Snippet: RkScrollArea
+  Renders a custom scroll area with styled scrollbars.
+  Uses Web Component <rk-scroll-area> for behaviour.
+
+  @param {string} [id] - Optional unique id
+  @param {string} [orientation] - 'vertical' | 'horizontal' | 'both' (default: 'vertical')
+  @param {string} [visibility] - 'auto' | 'always' | 'hover' (default: 'auto')
+  @param {string} [height] - Container height CSS value (e.g. '300px', '50vh')
+  @param {string} [width] - Container width CSS value (e.g. '100%')
+  @param {string} [content] - HTML content to display inside the viewport
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture scroll_content %}
+    <p>Long text or list of items here…</p>
+  {% endcapture %}
+  {% render 'rk-scroll-area', height: '300px', content: scroll_content %}
+
+  {% comment %} Horizontal example {% endcomment %}
+  {% render 'rk-scroll-area', orientation: 'horizontal', height: '200px', content: cards_html %}
+{% enddoc %}
+
+{%- liquid
+  assign sa_orientation = orientation | default: 'vertical'
+  assign sa_visibility = visibility | default: 'auto'
+  assign sa_height = height | default: '100%'
+  assign sa_width = width | default: '100%'
+-%}
+
+<rk-scroll-area
+  {% if id %}id="{{ id }}"{% endif %}
+  class="rk-scroll-area{% if sa_visibility == 'always' %} rk-scroll-area--always{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-visibility="{{ sa_visibility }}"
+  style="--rk-scroll-area-height: {{ sa_height }}; --rk-scroll-area-width: {{ sa_width }};"
+>
+  {%- comment -%} Viewport {%- endcomment -%}
+  <div class="rk-scroll-area__viewport" tabindex="0">
+    {{ content }}
+  </div>
+
+  {%- comment -%} Vertical Scrollbar {%- endcomment -%}
+  {%- if sa_orientation == 'vertical' or sa_orientation == 'both' -%}
+    <div class="rk-scroll-area__scrollbar rk-scroll-area__scrollbar--vertical">
+      <div class="rk-scroll-area__thumb"></div>
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Horizontal Scrollbar {%- endcomment -%}
+  {%- if sa_orientation == 'horizontal' or sa_orientation == 'both' -%}
+    <div class="rk-scroll-area__scrollbar rk-scroll-area__scrollbar--horizontal">
+      <div class="rk-scroll-area__thumb"></div>
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Corner (only when both axes) {%- endcomment -%}
+  {%- if sa_orientation == 'both' -%}
+    <div class="rk-scroll-area__corner"></div>
+  {%- endif -%}
+</rk-scroll-area>

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

@@ -0,0 +1,86 @@
+{% doc %}
+  Snippet: RkSheet
+  Renders a Sheet / Side Panel that slides from the viewport edges.
+  Uses Web Component <rk-sheet-element> for behaviour.
+
+  Unlike the Drawer, the Sheet occupies the full height/width of the viewport
+  and is designed for deeper interactions (filters, forms, navigation menus).
+
+  @param {string} id - Unique sheet id (required)
+  @param {string} [side] - 'right' | 'left' | 'top' | 'bottom' (default: 'right')
+  @param {string} [size] - Panel width/height CSS value (default: '400px')
+  @param {string} title - Sheet title (required for a11y)
+  @param {string} [description] - Header description / subtitle
+  @param {string} [body] - HTML for the body content
+  @param {string} [footer] - HTML for the footer (action buttons)
+  @param {boolean} [overlay_close] - Close on overlay click (default: true)
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture sheet_body %}
+    <form>...</form>
+  {% endcapture %}
+  {% capture sheet_footer %}
+    {% render 'rk-button', text: 'Salvar Alterações', style: 'primary', full_width: true %}
+  {% endcapture %}
+  {% render 'rk-sheet', id: 'filters-panel', side: 'right', size: '420px', title: 'Filtros', body: sheet_body, footer: sheet_footer %}
+
+  {% comment %} Navigation menu {% endcomment %}
+  {% render 'rk-sheet', id: 'nav-menu', side: 'left', title: 'Menu', body: nav_html %}
+{% enddoc %}
+
+{%- liquid
+  assign s_side = side | default: 'right'
+  assign s_size = size | default: '400px'
+  assign s_overlay_close = overlay_close | default: true
+-%}
+
+{%- capture title_id -%}{{ id }}-title{%- endcapture -%}
+{%- capture desc_id -%}{{ id }}-desc{%- endcapture -%}
+
+<rk-sheet-element
+  data-sheet-id="{{ id }}"
+  data-overlay-close="{{ s_overlay_close }}"
+>
+  <div id="{{ id }}" class="rk-sheet{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
+    <div class="rk-sheet__overlay"></div>
+
+    {%- comment -%} Panel {%- endcomment -%}
+    <div
+      class="rk-sheet__panel rk-sheet__panel--{{ s_side }}"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="{{ title_id }}"
+      {% if description %}aria-describedby="{{ desc_id }}"{% endif %}
+      style="--rk-sheet-size: {{ s_size }};"
+    >
+      {%- comment -%} Close button {%- endcomment -%}
+      <button type="button" class="rk-sheet__close" data-action="close" aria-label="Fechar">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+
+      {%- comment -%} Header {%- endcomment -%}
+      <div class="rk-sheet__header">
+        <h2 id="{{ title_id }}" class="rk-sheet__title">{{ title }}</h2>
+        {%- if description -%}
+          <p id="{{ desc_id }}" class="rk-sheet__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+
+      {%- comment -%} Body {%- endcomment -%}
+      <div class="rk-sheet__body">
+        {{ body }}
+      </div>
+
+      {%- comment -%} Footer {%- endcomment -%}
+      {%- if footer -%}
+        <div class="rk-sheet__footer">
+          {{ footer }}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</rk-sheet-element>

package/rook-framework/snippets/rk-size-style.liquid

@@ -0,0 +1,48 @@
+{%- doc -%}
+  Renders CSS variables for size (width/height) styles with responsive support.
+  Portable equivalent of Horizon's `size-style.liquid` with `rk-` prefixed variables.
+  Intended for blocks and sections that provide values for all the referenced settings.
+
+  @param {object} settings - The block or section settings object containing size values
+
+  Settings keys used:
+    - settings.width: 'fill' | 'fit-content' | 'custom' | CSS value
+    - settings.custom_width: number (percentage when width == 'custom')
+    - settings.height: 'fill' | 'fit-content' | 'custom' | CSS value
+    - settings.custom_height: number (percentage when height == 'custom')
+    - settings.width_mobile: 'fill' | 'fit-content' | 'custom' (optional, mobile override)
+    - settings.custom_width_mobile: number (percentage when width_mobile == 'custom')
+
+  @example
+  <div class="rk-size-style" style="{% render 'rk-size-style', settings: block.settings %}">
+{%- enddoc -%}
+
+{%- comment -%}--- Width ---{%- endcomment -%}
+{%- if settings.width == 'custom' -%}
+  --rk-width: {{ settings.custom_width }}%;
+{%- elsif settings.width == 'fill' -%}
+  --rk-width: 100%;
+{%- elsif settings.width != blank -%}
+  --rk-width: {{ settings.width }};
+{%- endif -%}
+
+{%- comment -%}--- Height ---{%- endcomment -%}
+{%- if settings.height == 'custom' -%}
+  --rk-height: {{ settings.custom_height }}%;
+{%- elsif settings.height == 'fill' -%}
+  --rk-height: 100%;
+{%- elsif settings.height != blank -%}
+  --rk-height: {{ settings.height }};
+{%- endif -%}
+
+{%- comment -%}--- Width Mobile ---{%- endcomment -%}
+{%- if settings.width_mobile == 'custom' -%}
+  --rk-width-mobile: {{ settings.custom_width_mobile }}%;
+  --rk-width-mobile-min: {{ settings.custom_width_mobile }}%;
+{%- elsif settings.width_mobile == 'fill' -%}
+  --rk-width-mobile: 100%;
+  --rk-width-mobile-min: 5rem;
+{%- elsif settings.width_mobile == 'fit-content' -%}
+  --rk-width-mobile: fit-content;
+  --rk-width-mobile-min: fit-content;
+{%- endif -%}

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

@@ -0,0 +1,25 @@
+{% doc %}
+  Snippet: RkSkeleton
+  Renders a loading placeholder skeleton.
+
+  @param {string} [width] - CSS width (default: '100%')
+  @param {string} [height] - CSS height (default: '1em')
+  @param {string} [shape] - 'text' | 'circle' | 'rect' (default: 'text')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-skeleton', width: '200px', height: '20px' %}
+  {% render 'rk-skeleton', shape: 'circle', width: '48px', height: '48px' %}
+{% enddoc %}
+
+{%- liquid
+  assign sk_width = width | default: '100%'
+  assign sk_height = height | default: '1em'
+  assign sk_shape = shape | default: 'text'
+-%}
+
+<div
+  class="rk-skeleton{% if sk_shape == 'circle' %} rk-skeleton--circle{% elsif sk_shape == 'text' %} rk-skeleton--text{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  style="width: {{ sk_width }}; height: {{ sk_height }};"
+  aria-hidden="true"
+></div>

package/rook-framework/snippets/rk-spacing-padding.liquid

@@ -0,0 +1,18 @@
+{%- doc -%}
+  Renders CSS variables for simple padding styles without responsive scaling.
+  Portable equivalent of Horizon's `spacing-padding.liquid` with `rk-` prefixed variables.
+  Use this for simpler cases where responsive scaling is not needed.
+
+  @param {object} settings - The block or section settings object containing padding values
+
+  Settings keys used:
+    - settings['padding-block-start']: number (px, default: 0)
+    - settings['padding-block-end']: number (px, default: 0)
+    - settings['padding-inline-start']: number (px, default: 0)
+    - settings['padding-inline-end']: number (px, default: 0)
+
+  @example
+  <div style="{% render 'rk-spacing-padding', settings: section.settings %}">
+{%- enddoc -%}
+
+--rk-pt: {{ settings.padding-block-start | default: 0 }}px; --rk-pb: {{ settings.padding-block-end | default: 0 }}px; --rk-ps: {{ settings.padding-inline-start | default: 0 }}px; --rk-pe: {{ settings.padding-inline-end | default: 0 }}px;

package/rook-framework/snippets/rk-spacing-style.liquid

@@ -0,0 +1,54 @@
+{%- doc -%}
+  Renders CSS variables for spacing (padding) styles with responsive scaling.
+  Portable equivalent of Horizon's `spacing-style.liquid` with `rk-` prefixed variables.
+  Intended for blocks and sections that provide values for all the referenced settings.
+
+  Values above `scale_min` (default: 20px) are wrapped in a responsive `max()` function
+  that scales down proportionally on smaller viewports using `--rk-spacing-scale`.
+
+  @param {object} settings - The block or section settings object containing spacing values
+
+  Settings keys used:
+    - settings['padding-block-start']: number (px)
+    - settings['padding-block-end']: number (px)
+    - settings['padding-inline-start']: number (px)
+    - settings['padding-inline-end']: number (px)
+
+  CSS Variables generated:
+    - --rk-pt (padding-block-start)
+    - --rk-pb (padding-block-end)
+    - --rk-ps (padding-inline-start)
+    - --rk-pe (padding-inline-end)
+
+  @example
+  <div class="rk-spacing-style" style="{% render 'rk-spacing-style', settings: block.settings %}">
+{%- enddoc -%}
+
+{%- liquid
+  assign rk_scale_min = 20
+  assign rk_keys = 'padding-block-start,padding-block-end,padding-inline-start,padding-inline-end' | split: ','
+  assign rk_vars = '--rk-pt,--rk-pb,--rk-ps,--rk-pe' | split: ','
+
+  for key in rk_keys
+    assign value = settings[key]
+    assign var_name = rk_vars[forloop.index0]
+
+    if value != blank
+      echo var_name
+      echo ': '
+
+      if value > rk_scale_min
+        echo 'max('
+        echo rk_scale_min
+        echo 'px, calc(var(--rk-spacing-scale, 1) * '
+        echo value
+        echo 'px))'
+      else
+        echo value
+        echo 'px'
+      endif
+
+      echo ';'
+    endif
+  endfor
+-%}

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

@@ -0,0 +1,43 @@
+{% doc %}
+  Snippet: RkSpinner
+  Elemento gráfico animado em SVG para indicar processamento em andamento.
+
+  @param {string} [size] - Define o tamanho do spinner: 'sm', 'md' (padrão), 'lg'.
+  @param {string} [color] - Cor CSS/Utilitária para o spinner. Por padrão herda `currentColor`.
+  @param {string} [custom_class] - Classes CSS extras para o container.
+  @param {string} [label] - Texto para acessibilidade (Screen Readers). Padrão: "Carregando...".
+
+  @example
+  <!-- Uso básico -->
+  {% render 'rk-spinner' %}
+
+  <!-- Pequeno dentro de um botão -->
+  <button class="rk-button">
+    {% render 'rk-spinner', size: 'sm', custom_class: 'mr-2' %}
+    Salvando
+  </button>
+{% enddoc %}
+
+{%- liquid
+  assign t_size = size | default: 'md'
+  assign t_label = label | default: 'Carregando...'
+-%}
+
+<span role="status" class="rk-spinner-wrapper{% if custom_class %} {{ custom_class }}{% endif %}">
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width="24" 
+    height="24" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round" 
+    class="rk-spinner rk-spinner--{{ t_size }}{% if color %} {{ color }}{% endif %}"
+    aria-hidden="true"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+  <span class="rk-sr-only">{{ t_label }}</span>
+</span>

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

@@ -0,0 +1,33 @@
+{% doc %}
+  Snippet: RkSwatch
+  Renders a variant swatch (color, image or unavailable).
+
+  @param {object} swatch - Shopify swatch object
+  @param {object} [variant_image] - Alternative image to use
+  @param {boolean} [active] - Currently selected
+  @param {boolean} [unavailable] - Unavailable state
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-swatch', swatch: swatch, active: true %}
+{% enddoc %}
+
+{%- liquid
+  assign swatch_value = null
+
+  if variant_image
+    assign swatch_url = variant_image | image_url: width: 64
+    assign swatch_value = 'url(' | append: swatch_url | append: ')'
+  elsif swatch.image
+    assign swatch_url = swatch.image | image_url: width: 80
+    assign swatch_value = 'url(' | append: swatch_url | append: ')'
+  elsif swatch.color
+    assign swatch_value = 'rgb(' | append: swatch.color.rgb | append: ')'
+  endif
+-%}
+
+<span
+  class="rk-swatch{% if active %} rk-swatch--active{% endif %}{% if unavailable %} rk-swatch--unavailable{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  style="--rk-swatch-bg: {{ swatch_value }};"
+>
+</span>

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

@@ -0,0 +1,44 @@
+{% doc %}
+  Snippet: RkTable
+  Renders a responsive Table component (Shadcn/UI pattern).
+  The snippet acts as a wrapper to manage horizontal scrolling on mobile,
+  while you write the semantic HTML inside it.
+
+  @param {string} content - HTML containing <thead>, <tbody>, etc.
+  @param {boolean} [striped] - Add alternating row colors (default: false)
+  @param {string} [custom_class] - Extra CSS classes for the wrapper
+
+  @example
+  {% capture table_content %}
+    <thead>
+      <tr>
+        <th>Fatura</th>
+        <th>Status</th>
+        <th>Método</th>
+        <th class="rk-text-right">Valor</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>INV001</td>
+        <td>Paga</td>
+        <td>Cartão de Crédito</td>
+        <td class="rk-text-right">R$ 250,00</td>
+      </tr>
+      <tr>
+        <td>INV002</td>
+        <td>Pendente</td>
+        <td>Pix</td>
+        <td class="rk-text-right">R$ 150,00</td>
+      </tr>
+    </tbody>
+  {% endcapture %}
+
+  {% render 'rk-table', content: table_content, striped: true %}
+{% enddoc %}
+
+<div class="rk-table-wrapper{% if custom_class %} {{ custom_class }}{% endif %}">
+  <table class="rk-table{% if striped %} rk-table--striped{% endif %}">
+    {{ content }}
+  </table>
+</div>

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

@@ -0,0 +1,52 @@
+{% doc %}
+  Snippet: RkTabs
+  Renders a Tabs wrapper (Shadcn/UI pattern).
+  The snippet manages the Web Component wrapper and the basic layout.
+  You need to provide the raw HTML for triggers (buttons) and content (panels)
+  following the WAI-ARIA specs (roles and aria-attributes).
+
+  @param {string} id - Unique tabs id (for prefixing triggers/panels)
+  @param {string} triggers - HTML for the tab triggers ([role="tab"])
+  @param {string} content - HTML for the tab panels ([role="tabpanel"])
+  @param {string} [default_value] - ID of the tab to open by default
+  @param {string} [orientation] - 'horizontal' (default) or 'vertical'
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture tabs_triggers %}
+    <button class="rk-tabs__trigger" role="tab" aria-controls="panel-1" id="tab-1">Descrição</button>
+    <button class="rk-tabs__trigger" role="tab" aria-controls="panel-2" id="tab-2">Especificações</button>
+  {% endcapture %}
+
+  {% capture tabs_content %}
+    <div class="rk-tabs__panel" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+      <p>Texto da descrição aqui.</p>
+    </div>
+    <div class="rk-tabs__panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
+      <p>Detalhes técnicos aqui.</p>
+    </div>
+  {% endcapture %}
+
+  {% render 'rk-tabs', id: 'product-tabs', triggers: tabs_triggers, content: tabs_content, default_value: 'tab-1' %}
+{% enddoc %}
+
+{%- liquid
+  assign t_orientation = orientation | default: 'horizontal'
+-%}
+
+<rk-tabs-element
+  id="{{ id | default: 'rk-tabs' }}"
+  data-default-value="{{ default_value }}"
+  data-orientation="{{ t_orientation }}"
+  class="rk-tabs rk-tabs--{{ t_orientation }}{% if custom_class %} {{ custom_class }}{% endif %}"
+>
+  {%- comment -%} Tab List {%- endcomment -%}
+  <div class="rk-tabs__list" role="tablist" aria-orientation="{{ t_orientation }}">
+    {{ triggers }}
+  </div>
+
+  {%- comment -%} Tab Panels {%- endcomment -%}
+  <div class="rk-tabs__content-wrapper">
+    {{ content }}
+  </div>
+</rk-tabs-element>

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

@@ -0,0 +1,42 @@
+{% doc %}
+  Snippet: RkTextarea
+  Campo de entrada de texto com múltiplas linhas (textarea), seguindo o estilo base (Shadcn/UI).
+
+  @param {string} [id] - ID único para o campo, vinculando-o ao Label.
+  @param {string} [name] - Nome do campo no formulário.
+  @param {string} [placeholder] - Texto de dica (placeholder).
+  @param {string} [value] - Valor inicial.
+  @param {number} [rows] - Quantidade de linhas visíveis (altura inicial). Padrão: 3.
+  @param {string} [resize] - Propriedade de redimensionamento ('none', 'vertical', 'both'). Padrão: 'vertical'.
+  @param {boolean} [required] - Se o campo é obrigatório.
+  @param {boolean} [disabled] - Se o campo está desabilitado.
+  @param {boolean} [readonly] - Se o campo é somente leitura.
+  @param {boolean} [has_error] - Define estilo de erro na borda se `true`.
+  @param {string} [custom_class] - Classes CSS customizadas.
+
+  @example
+  {% render 'rk-textarea',
+    id: 'contact_message',
+    name: 'contact[body]',
+    placeholder: 'Digite sua mensagem aqui...',
+    rows: 4,
+    required: true
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_rows = rows | default: 3
+  assign t_resize = resize | default: 'vertical'
+-%}
+
+<textarea
+  {% if id %}id="{{ id }}"{% endif %}
+  {% if name %}name="{{ name }}"{% endif %}
+  class="rk-textarea rk-textarea--resize-{{ t_resize }}{% if has_error %} rk-textarea--error{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  rows="{{ t_rows }}"
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if required %}required aria-required="true"{% endif %}
+  {% if disabled %}disabled aria-disabled="true"{% endif %}
+  {% if readonly %}readonly{% endif %}
+  {% if has_error %}aria-invalid="true"{% endif %}
+>{{ value }}</textarea>