rook-cli 1.3.2 → 1.3.4

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

@@ -0,0 +1,34 @@
+{% doc %}
+  Snippet: RkCheckbox
+  Renders a checkbox input with label.
+
+  @param {string} name - Input name
+  @param {string} id - Unique id
+  @param {string} label - Label text
+  @param {string} [value] - Input value (default: 'on')
+  @param {boolean} [checked] - Pre-checked state
+  @param {boolean} [disabled] - Disabled state
+  @param {boolean} [required] - Required state
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-checkbox', name: 'agree', id: 'agree', label: 'Concordo com os termos' %}
+{% enddoc %}
+
+{%- liquid
+  assign cb_value = value | default: 'on'
+-%}
+
+<label class="rk-checkbox{% if custom_class %} {{ custom_class }}{% endif %}" for="{{ id }}">
+  <input
+    type="checkbox"
+    class="rk-checkbox__input"
+    id="{{ id }}"
+    name="{{ name }}"
+    value="{{ cb_value }}"
+    {% if checked %}checked{% endif %}
+    {% if disabled %}disabled{% endif %}
+    {% if required %}required aria-required="true"{% endif %}
+  >
+  <span class="rk-checkbox__label">{{ label }}</span>
+</label>

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

@@ -0,0 +1,52 @@
+{% doc %}
+  Snippet: RkCollapsible
+  Renders a Collapsible element (Shadcn/UI pattern).
+  Unlike Accordion (details/summary), this uses standard divs and JS for exact height animation control and WAI-ARIA roles.
+
+  @param {string} id - Unique id for aria linking
+  @param {string} trigger - HTML content for the trigger button
+  @param {string} content - HTML content to hide/show
+  @param {boolean} [open] - Should it render open initially? (default: false)
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture coll_trigger %}
+    <span>Mais Informações</span>
+    <span class="rk-collapsible__icon">⬇️</span>
+  {% endcapture %}
+  {% capture coll_content %}
+    <p>Aqui você encontra todas as informações sobre a garantia e devoluções.</p>
+  {% endcapture %}
+  {% render 'rk-collapsible', id: 'info-1', trigger: coll_trigger, content: coll_content %}
+{% enddoc %}
+
+{%- liquid
+  assign t_open = open | default: false
+-%}
+
+<rk-collapsible-element
+  id="{{ id }}"
+  class="rk-collapsible{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-open="{{ t_open }}"
+>
+  {%- comment -%} Trigger {%- endcomment -%}
+  <button
+    type="button"
+    class="rk-collapsible__trigger"
+    aria-expanded="{{ t_open }}"
+    aria-controls="{{ id }}-content"
+  >
+    {{ trigger }}
+  </button>
+
+  {%- comment -%} Content Animated Wrapper {%- endcomment -%}
+  <div
+    id="{{ id }}-content"
+    class="rk-collapsible__content{% if t_open %} rk-collapsible__content--expanded{% endif %}"
+    {% unless t_open %}hidden{% endunless %}
+  >
+    <div class="rk-collapsible__content-inner">
+      {{ content }}
+    </div>
+  </div>
+</rk-collapsible-element>

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

@@ -0,0 +1,85 @@
+{% doc %}
+  Snippet: RkDialog
+  Renders a Dialog / Modal (Shadcn/UI pattern) with full anatomy.
+  Uses Web Component <rk-dialog-element> for behaviour.
+
+  @param {string} id - Unique dialog id (required)
+  @param {string} title - Dialog 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 {boolean} [show_close] - Show X close button (default: true)
+  @param {string} [width] - Content width (e.g. '540px')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture dialog_body %}
+    <p>Content here</p>
+  {% endcapture %}
+  {% capture dialog_footer %}
+    <button class="rk-btn rk-btn--secondary rk-btn--md" data-action="close">
+      <span class="rk-btn__text">Cancelar</span>
+    </button>
+    {% render 'rk-button', text: 'Salvar', style: 'primary' %}
+  {% endcapture %}
+  {% render 'rk-dialog', id: 'my-dialog', title: 'Editar Perfil', description: 'Atualize suas informações.', body: dialog_body, footer: dialog_footer %}
+{% enddoc %}
+
+{%- liquid
+  assign d_overlay_close = overlay_close | default: true
+  assign d_show_close = show_close | default: true
+-%}
+
+{%- capture title_id -%}{{ id }}-title{%- endcapture -%}
+{%- capture desc_id -%}{{ id }}-desc{%- endcapture -%}
+
+<rk-dialog-element
+  data-dialog-id="{{ id }}"
+  data-overlay-close="{{ d_overlay_close }}"
+>
+  <div id="{{ id }}" class="rk-dialog{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
+    <div class="rk-dialog__overlay"></div>
+
+    {%- comment -%} Content {%- endcomment -%}
+    <div
+      class="rk-dialog__content"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="{{ title_id }}"
+      {% if description %}aria-describedby="{{ desc_id }}"{% endif %}
+      {% if width %}style="--rk-dialog-width: {{ width }};"{% endif %}
+    >
+      {%- if d_show_close -%}
+        <button type="button" class="rk-dialog__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>
+      {%- endif -%}
+
+      {%- comment -%} Header {%- endcomment -%}
+      <div class="rk-dialog__header">
+        <h2 id="{{ title_id }}" class="rk-dialog__title">{{ title }}</h2>
+        {%- if description -%}
+          <p id="{{ desc_id }}" class="rk-dialog__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+
+      {%- comment -%} Body {%- endcomment -%}
+      {%- if body -%}
+        <div class="rk-dialog__body">
+          {{ body }}
+        </div>
+      {%- endif -%}
+
+      {%- comment -%} Footer {%- endcomment -%}
+      {%- if footer -%}
+        <div class="rk-dialog__footer">
+          {{ footer }}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</rk-dialog-element>

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

@@ -0,0 +1,25 @@
+{% doc %}
+  Snippet: RkDivider
+  Renders a visual divider line.
+
+  @param {string} [thickness] - CSS thickness (default: '1px')
+  @param {string} [width] - CSS width (default: '100%')
+  @param {string} [align] - 'left' | 'center' | 'right' (default: 'center')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-divider', width: '80%' %}
+{% enddoc %}
+
+{%- liquid
+  assign d_thickness = thickness | default: '1px'
+  assign d_width = width | default: '100%'
+  assign d_align = align | default: 'center'
+-%}
+
+<div
+  class="rk-divider{% if custom_class %} {{ custom_class }}{% endif %}"
+  style="--rk-divider-align: {{ d_align }};"
+>
+  <hr class="rk-divider__line" style="--rk-divider-thickness: {{ d_thickness }}; --rk-divider-width: {{ d_width }};">
+</div>

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

@@ -0,0 +1,81 @@
+{% doc %}
+  Snippet: RkDrawer
+  Renders a Drawer (sliding panel from screen edge).
+  Uses Web Component <rk-drawer-element> for behaviour.
+
+  @param {string} id - Unique drawer id
+  @param {string} [side] - 'bottom' | 'top' | 'left' | 'right' (default: 'bottom')
+  @param {boolean} [show_handle] - Show drag handle indicator (default: true)
+  @param {string} [title] - Optional header title
+  @param {string} [description] - Optional header description
+  @param {string} [body] - HTML for the body content
+  @param {string} [footer] - HTML for the footer (action buttons)
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [width] - Panel width for left/right drawers (e.g. '400px')
+  @param {string} [height] - Panel height for top/bottom drawers (e.g. '50vh')
+
+  @example
+  {% capture drawer_body %}
+    <p>Drawer content here</p>
+  {% endcapture %}
+  {% capture drawer_footer %}
+    {% render 'rk-button', text: 'Confirmar', style: 'primary', full_width: true %}
+  {% endcapture %}
+  {% render 'rk-drawer', id: 'my-drawer', side: 'bottom', title: 'Filtros', body: drawer_body, footer: drawer_footer %}
+{% enddoc %}
+
+{%- liquid
+  assign d_side = side | default: 'bottom'
+  assign d_show_handle = show_handle | default: true
+-%}
+
+<rk-drawer-element data-drawer-id="{{ id }}" data-side="{{ d_side }}">
+  <div id="{{ id }}" class="rk-drawer{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
+    <div class="rk-drawer__overlay"></div>
+
+    {%- comment -%} Panel {%- endcomment -%}
+    <div
+      class="rk-drawer__panel rk-drawer__panel--{{ d_side }}"
+      role="dialog"
+      aria-modal="true"
+      {% if title %}aria-label="{{ title }}"{% endif %}
+      {% if width %}style="--rk-drawer-width: {{ width }};"{% endif %}
+      {% if height %}style="--rk-drawer-height: {{ height }};"{% endif %}
+    >
+      {%- if d_show_handle and d_side == 'bottom' or d_show_handle and d_side == 'top' -%}
+        <div class="rk-drawer__handle">
+          <div class="rk-drawer__handle-bar"></div>
+        </div>
+      {%- endif -%}
+
+      {%- comment -%} Close button {%- endcomment -%}
+      <button type="button" class="rk-drawer__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>
+
+      {%- if title or description -%}
+        <div class="rk-drawer__header">
+          {%- if title -%}
+            <h2 class="rk-drawer__title">{{ title }}</h2>
+          {%- endif -%}
+          {%- if description -%}
+            <p class="rk-drawer__description">{{ description }}</p>
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+
+      <div class="rk-drawer__body">
+        {{ body }}
+      </div>
+
+      {%- if footer -%}
+        <div class="rk-drawer__footer">
+          {{ footer }}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</rk-drawer-element>

package/rook-framework/snippets/rk-external-assets copy.liquid

@@ -0,0 +1,33 @@
+{% doc %}
+  Snippet: RkExternalAssets
+  Módulo de CDNs e serviços externos.
+
+  @param {string} location - 'head' ou 'body'
+  
+  @example
+  {% render 'rk-external-assets', location: 'head' %}
+{% enddoc %}
+
+{%- liquid
+  assign location = location | default: 'head'
+-%}
+
+{%- if location == 'head' -%}
+  <!-- [RkExternalAssets] Preconnects -->
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+  <link rel="preconnect" href="https://unpkg.com" crossorigin>
+
+  <!-- [RkExternalAssets] Stylesheets CSS -->
+  {%- comment -%} Add external CSS here {%- endcomment -%}
+
+{%- elsif location == 'body' -%}
+  <!-- [RkExternalAssets] Javascripts -->
+
+  <!-- [RkExternalAssets] Inline Initializations -->
+  <script>
+    if (typeof anime !== 'undefined') {
+      window.animate = anime.animate;
+    }
+  </script>
+{%- endif -%}

package/rook-framework/snippets/rk-external-assets.liquid

@@ -0,0 +1,68 @@
+{% doc %}
+  Snippet: RkExternalAssets
+  Módulo de CDNs e serviços externos.
+
+  @param {string} location - 'head' ou 'body'
+  
+  @example
+  {% render 'rk-external-assets', location: 'head' %}
+{% enddoc %}
+
+{%- liquid
+  assign location = location | default: 'head'
+
+  # 1. CONFIG MAP - DOMÍNIOS PARA PRECONNECT
+  assign preconnects_str = "https://cdn.jsdelivr.net, https://cdnjs.cloudflare.com, https://unpkg.com"
+
+  # 2. CONFIG MAP - CSS ASSETS (Formato: id | url)
+  assign css_assets_str = ""
+
+  # 3. CONFIG MAP - JS ASSETS (Formato: id | url | strategy)
+  assign js_assets_str = "gsap | https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js | defer, scrolltrigger | https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js | defer"
+-%}
+
+{%- if location == 'head' -%}
+  <!-- [RkExternalAssets] Preconnects -->
+  {%- assign preconnect_domains = preconnects_str | split: ',' -%}
+  {%- for domain in preconnect_domains -%}
+    {%- assign domain_clean = domain | strip -%}
+    {%- if domain_clean != blank -%}
+      <link rel="preconnect" href="{{ domain_clean }}" crossorigin>
+    {%- endif -%}
+  {%- endfor -%}
+
+  <!-- [RkExternalAssets] Stylesheets CSS -->
+  {%- assign css_lines = css_assets_str | split: ',' -%}
+  {%- for css_line in css_lines -%}
+    {%- assign css_clean = css_line | strip -%}
+    {%- if css_clean == blank -%}{%- continue -%}{%- endif -%}
+    
+    {%- assign css_data = css_clean | split: '|' -%}
+    {%- if css_data.size >= 2 -%}
+      {%- assign css_id = css_data[0] | strip -%}
+      {%- assign css_url = css_data[1] | strip -%}
+      <link rel="stylesheet" href="{{ css_url }}" id="rk-ext-{{ css_id }}">
+    {%- endif -%}
+  {%- endfor -%}
+{%- endif -%}
+
+{%- if location == 'body' -%}
+  <!-- [RkExternalAssets] Javascripts -->
+  {%- assign js_lines = js_assets_str | split: ',' -%}
+  {%- for js_line in js_lines -%}
+    {%- assign js_clean = js_line | strip -%}
+    {%- if js_clean == blank -%}{%- continue -%}{%- endif -%}
+    
+    {%- assign js_data = js_clean | split: '|' -%}
+    {%- if js_data.size >= 2 -%}
+      {%- assign js_id = js_data[0] | strip -%}
+      {%- assign js_url = js_data[1] | strip -%}
+      {%- assign js_strategy = js_data[2] | strip | default: 'defer' -%}
+      {%- if js_strategy == 'async' -%}
+        <script src="{{ js_url }}" id="rk-ext-{{ js_id }}" async></script>
+      {%- else -%}
+        <script src="{{ js_url }}" id="rk-ext-{{ js_id }}" defer></script>
+      {%- endif -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endif -%}

package/rook-framework/snippets/rk-form-field.liquid

@@ -0,0 +1,83 @@
+{% doc %}
+  Snippet: RkFormField
+  Componente estrutural para agrupar campos de formulário (Label + Input + Descrição + Mensagem de Erro).
+  Gerencia automaticamente as associações WAI-ARIA com base no ID fornecido.
+
+  @param {string} id - O ID único base para o controle (Ex: 'customer_email'). O input dentro deve usar esse ID.
+  @param {string} label - O texto do label.
+  @param {string} control - Elemento transcluído de marcação (ex: `<input>`, `<select>`, `<textarea>`).
+  @param {string} [description] - Texto descritivo/ajuda opcional para guiar o preenchimento.
+  @param {string} [error] - Se presente, o campo entra em estado de erro e exibe esta mensagem.
+  @param {boolean} [required] - Se true, exibe o indicador (asterisco) de campo obrigatório.
+  @param {string} [layout] - 'vertical' (padrão) ou 'horizontal'.
+
+  @example
+  {% capture control_input %}
+    <input type="email" id="email" name="customer[email]" class="rk-input" required>
+  {% endcapture %}
+
+  {% render 'rk-form-field',
+    id: 'email',
+    label: 'Endereço de E-mail',
+    control: control_input,
+    description: 'Nós nunca compartilharemos o seu e-mail.',
+    required: true
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_layout = layout | default: 'vertical'
+  assign has_error = false
+  if error != blank
+    assign has_error = true
+  endif
+
+  assign description_id = id | append: '-description'
+  assign error_id = id | append: '-error'
+-%}
+
+<div class="rk-form-field rk-form-field--{{ t_layout }}{% if has_error %} rk-form-field--error{% endif %}">
+  
+  {%- comment -%} ==========================================
+      1. LABEL AREA
+  ========================================== {%- endcomment -%}
+  <label for="{{ id }}" class="rk-form-field__label">
+    {{ label }}
+    {%- if required -%}
+      <span class="rk-form-field__required" aria-hidden="true">*</span>
+    {%- endif -%}
+  </label>
+
+  {%- comment -%} ==========================================
+      2. CONTROL WRAPPER (Adicionando ARIA associations ao filho)
+  ========================================== {%- endcomment -%}
+  <div 
+    class="rk-form-field__control"
+    {%- comment -%}
+      Como Liquid não parseia o conteúdo de `control` para injetar ATRIBUTOS facilmente
+      nós deixamos como wrapper. Recomendado que no arquivo que chamou adicione navativamente 
+      se o WAI ARIA total for crítico. Mas o wrapper abraça.
+    {%- endcomment -%}
+  >
+    {{ control }}
+  </div>
+
+  {%- comment -%} ==========================================
+      3. DESCRIPTION AREA
+  ========================================== {%- endcomment -%}
+  {%- if description != blank and has_error == false -%}
+    <p id="{{ description_id }}" class="rk-form-field__description">
+      {{ description }}
+    </p>
+  {%- endif -%}
+
+  {%- comment -%} ==========================================
+      4. ERROR MESSAGE
+  ========================================== {%- endcomment -%}
+  {%- if has_error -%}
+    <p id="{{ error_id }}" class="rk-form-field__error" role="alert">
+      {{ error }}
+    </p>
+  {%- endif -%}
+
+</div>

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

@@ -0,0 +1,32 @@
+{%- doc -%}
+  Renders the CSS variable for the `gap` style with responsive scaling support.
+  Portable equivalent of Horizon's `gap-style.liquid` with `rk-` prefixed variables.
+
+  Values above `scale_min` (default: 24px) are wrapped in a responsive `max()` function
+  that scales down proportionally on smaller viewports using `--rk-gap-scale`.
+
+  @param {number} value - The base or desktop gap value to use, in pixels.
+  @param {string} [name] - The name of the CSS variable suffix. Default: 'gap'
+  @param {number} [scale_min] - Value above which gap scaling will be applied. Default: 24
+  @param {boolean} [disable_scaling] - If true, disables scaling and outputs the original value.
+
+  @example
+  <div class="rk-gap-style" style="{% render 'rk-gap-style', value: block.settings.gap %}">
+
+  @example Custom name
+  <div style="{% render 'rk-gap-style', value: 28, name: 'card-gap' %}">
+    → outputs: --rk-card-gap: max(24px, calc(var(--rk-gap-scale, 1) * 28px));
+{%- enddoc -%}
+
+{%- liquid
+  assign rk_min = scale_min | default: 24
+  assign rk_name = name | default: 'gap'
+-%}
+
+{%- if value != blank -%}
+  {%- if disable_scaling != true and value > rk_min -%}
+    --rk-{{ rk_name }}: max({{ rk_min }}px, calc(var(--rk-gap-scale, 1) * {{ value }}px));
+  {%- else -%}
+    --rk-{{ rk_name }}: {{ value }}px;
+  {%- endif -%}
+{%- endif -%}

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

@@ -0,0 +1,28 @@
+{% doc %}
+  Snippet: RkIcon
+  Renders an SVG icon wrapper.
+
+  @param {string} icon - Icon name to render (passes through to theme's icon.liquid)
+  @param {string} [size] - 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [color] - CSS color value
+  @param {string} [label] - Accessibility label
+
+  @example
+  {% render 'rk-icon', icon: 'heart', size: 'lg' %}
+{% enddoc %}
+
+{%- liquid
+  assign icon_size = size | default: 'md'
+-%}
+
+<span
+  class="rk-icon rk-icon--{{ icon_size }}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if color %}style="color: {{ color }}"{% endif %}
+  {% if label %}aria-label="{{ label }}"{% else %}aria-hidden="true"{% endif %}
+  role="{% if label %}img{% else %}presentation{% endif %}"
+>
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    {% render 'icon', icon: icon %}
+  </svg>
+</span>

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

@@ -0,0 +1,60 @@
+{% doc %}
+  Snippet: RkImage
+  Renders a responsive <img> with srcset, aspect-ratio, lazyload, and CLS prevention.
+
+  @param {object} image - Shopify image object
+  @param {number} [width] - Custom width (default: image.width)
+  @param {number} [height] - Custom height
+  @param {string} [sizes] - Responsive sizes attribute
+  @param {string} [loading] - 'lazy' | 'eager' (default: 'lazy')
+  @param {string} [class] - Extra CSS classes
+  @param {string} [style] - Additional inline styles
+  @param {string} [alt] - Alt text override
+  @param {string} [shape] - 'rounded' | 'circle'
+  @param {string} [placeholder_text] - Text fallback if image is blank
+
+  @example
+  {% render 'rk-image', image: product.featured_image, loading: 'eager' %}
+{% enddoc %}
+
+{%- liquid
+  assign img_loading = loading | default: 'lazy'
+  assign img_alt = alt | default: image.alt | escape
+  assign img_width = width | default: image.width
+  assign img_height = height | default: image.height
+  assign img_sizes = sizes | default: '100vw'
+
+  assign shape_class = ''
+  if shape == 'rounded'
+    assign shape_class = ' rk-image--rounded'
+  elsif shape == 'circle'
+    assign shape_class = ' rk-image--circle'
+  endif
+-%}
+
+{% if image != blank %}
+  {%- assign height_1x = img_height -%}
+  {%- assign height_2x = img_height | times: 2 -%}
+  {%- assign height_3x = img_height | times: 3 -%}
+
+  {%- capture srcset_value -%}
+    {{ image | image_url: height: height_1x }} 1x, {{ image | image_url: height: height_2x }} 2x, {{ image | image_url: height: height_3x }} 3x
+  {%- endcapture -%}
+
+  <div
+    class="rk-image{{ shape_class }}{% if class %} {{ class }}{% endif %}"
+    style="aspect-ratio: {{ img_width }} / {{ img_height }};{% if style %} {{ style }}{% endif %}"
+  >
+    {{ image | image_url: height: height_1x | image_tag:
+      class: 'rk-image__img',
+      srcset: srcset_value,
+      sizes: img_sizes,
+      loading: img_loading,
+      alt: img_alt
+    }}
+  </div>
+{% elsif placeholder_text != blank %}
+  <div class="rk-image__placeholder{% if class %} {{ class }}{% endif %}" style="{% if style %}{{ style }}{% endif %}">
+    {{ placeholder_text }}
+  </div>
+{% endif %}

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

@@ -0,0 +1,35 @@
+{% doc %}
+  Snippet: RkInput
+  Renders a text input field.
+
+  @param {string} name - Input name attribute
+  @param {string} [id] - Input id attribute
+  @param {string} [type] - Input type (default: 'text')
+  @param {string} [value] - Initial value
+  @param {string} [placeholder] - Placeholder text
+  @param {boolean} [required] - Makes input required
+  @param {boolean} [disabled] - Disables input
+  @param {boolean} [error] - Shows error state
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [attr] - Additional HTML attributes
+
+  @example
+  {% render 'rk-input', name: 'email', type: 'email', placeholder: 'seu@email.com' %}
+{% enddoc %}
+
+{%- liquid
+  assign input_type = type | default: 'text'
+  assign input_id = id | default: name
+-%}
+
+<input
+  type="{{ input_type }}"
+  id="{{ input_id }}"
+  name="{{ name }}"
+  {% if value %}value="{{ value }}"{% endif %}
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if required %}required aria-required="true"{% endif %}
+  {% if disabled %}disabled{% endif %}
+  class="rk-input{% if error %} rk-input--error{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {{ attr }}
+>

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

@@ -0,0 +1,54 @@
+{% doc %}
+  Snippet: RkInstallments
+  Renders the installment price information reading global settings.
+
+  @param {number} price - Price in cents to calculate installments from
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-installments', price: product.selected_or_first_available_variant.price %}
+{% enddoc %}
+
+{%- liquid
+  unless settings.rk_installments_enabled
+    break
+  endunless
+
+  assign inst_max = settings.rk_installments_max | default: 12
+  assign inst_no_interest = settings.rk_installments_without_interest | default: 3
+  assign inst_min_value = settings.rk_installments_min_value | default: '500' | plus: 0
+  assign interest_rate_raw = settings.rk_installments_interest_rate | default: '2.99'
+
+  assign best_installments = 1
+  assign best_value = price
+
+  for i in (1..inst_max)
+    assign value = price | divided_by: i
+    if value >= inst_min_value
+      assign best_installments = i
+      assign best_value = value
+    else
+      break
+    endif
+  endfor
+
+  assign has_interest = false
+  if best_installments > inst_no_interest
+    assign has_interest = true
+  endif
+
+  assign formatted_value = best_value | money
+-%}
+
+{% if best_installments > 1 %}
+  <span class="rk-installments{% if custom_class %} {{ custom_class }}{% endif %}">
+    <span class="rk-installments__value">{{ best_installments }}x</span>
+    de
+    <span class="rk-installments__value">{{ formatted_value }}</span>
+    {% if has_interest %}
+      <span class="rk-installments__interest">(com juros de {{ interest_rate_raw }}%)</span>
+    {% else %}
+      <span class="rk-installments__interest">sem juros</span>
+    {% endif %}
+  </span>
+{% endif %}