cubit_components 0.1.0 → 0.2.1

metadata

@@ -1,192 +1,60 @@
 --- !ruby/object:Gem::Specification
 name: cubit_components
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Fabio Papa
-bindir: bin
+bindir: exe
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2026-07-18 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: propshaft
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.0'
-- !ruby/object:Gem::Dependency
-  name: rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '8.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '8.0'
-- !ruby/object:Gem::Dependency
-  name: tailwindcss-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.0'
-- !ruby/object:Gem::Dependency
-  name: capybara
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.38'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.38'
-- !ruby/object:Gem::Dependency
-  name: rspec-its
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.0'
-- !ruby/object:Gem::Dependency
-  name: rspec-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '6.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '6.0'
-- !ruby/object:Gem::Dependency
-  name: standardrb
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.0'
-- !ruby/object:Gem::Dependency
-  name: standard-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.4'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.4'
-description: CubitComponents provides a set of layout-focused ViewComponents with
-  built-in Tailwind CSS support and utility class validation.
+description: ViewComponent-based layout primitives and token system for Sugar Cube.
 email:
 - me@fabiopapa.dev
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/stylesheets/cubit_components/application.css
-- app/assets/tailwind/cubit_components/engine.css
-- config/routes.rb
 - lib/cubit_components.rb
 - lib/cubit_components/base_component.rb
-- lib/cubit_components/bleed_component.rb
 - lib/cubit_components/box_component.rb
-- lib/cubit_components/columns_component.rb
 - lib/cubit_components/configuration.rb
-- lib/cubit_components/content_block_component.rb
-- lib/cubit_components/engine.rb
-- lib/cubit_components/inline_component.rb
-- lib/cubit_components/page_block_component.rb
+- lib/cubit_components/container_component.rb
+- lib/cubit_components/flex_component.rb
+- lib/cubit_components/grid_component.rb
+- lib/cubit_components/hstack_component.rb
 - lib/cubit_components/page_component.rb
-- lib/cubit_components/previews/bleed_component_preview.rb
-- lib/cubit_components/previews/box_component_preview.rb
-- lib/cubit_components/previews/columns_component_preview.rb
-- lib/cubit_components/previews/components_index.rb
-- lib/cubit_components/previews/content_block_component_preview.rb
-- lib/cubit_components/previews/inline_component_preview.rb
-- lib/cubit_components/previews/page_block_component_preview.rb
-- lib/cubit_components/previews/page_component_preview.rb
-- lib/cubit_components/previews/preview_helper.rb
-- lib/cubit_components/previews/spread_component_preview.rb
-- lib/cubit_components/previews/stack_component_preview.rb
-- lib/cubit_components/previews/tiles_component_preview.rb
+- lib/cubit_components/page_container_component.rb
+- lib/cubit_components/placeholder_component.rb
 - lib/cubit_components/spread_component.rb
 - lib/cubit_components/stack_component.rb
-- lib/cubit_components/tailwind_generated_classes_chat.txt
-- lib/cubit_components/tiles_component.rb
-- lib/cubit_components/vattr_validator.rb
+- lib/cubit_components/style_dsl.rb
 - lib/cubit_components/version.rb
-- lib/generators/cubit/install/install_generator.rb
-- lib/tasks/cubit_components_tasks.rake
-homepage: https://github.com/fapapa/cubit_components
-licenses:
-- MIT
+- lib/cubit_components/vstack_component.rb
+- sig/cubit_components.rbs
+homepage: https://github.com/fapapa/sugar_cube_system/tree/main/gems/cubit_components
+licenses: []
 metadata:
-  homepage_uri: https://github.com/fapapa/cubit_components
-  source_code_uri: https://github.com/fapapa/cubit_components
-  changelog_uri: https://github.com/fapapa/cubit_components/blob/main/CHANGELOG.md
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/fapapa/sugar_cube_system/tree/main/gems/cubit_components
+  source_code_uri: https://github.com/fapapa/sugar_cube_system/tree/main/gems/cubit_components
 rdoc_options: []
 require_paths:
 - lib
@@ -194,15 +62,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.8
+rubygems_version: 3.6.2
 specification_version: 4
-summary: A collection of reusable ViewComponents with standardized styling and utility
-  class validation.
+summary: ViewComponent-based layout primitives and token system for Sugar Cube.
 test_files: []

data/MIT-LICENSE

@@ -1,20 +0,0 @@
-Copyright Fabio Papa
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/app/assets/stylesheets/cubit_components/application.css

@@ -1,6 +0,0 @@
-/*
- *= require_tree .
- *= require_self
- */
-
-@import "tailwindcss";

data/app/assets/tailwind/cubit_components/engine.css

@@ -1,4 +0,0 @@
-@import "tailwindcss";
-
-@source inline("{sm:,md:,lg:,xl:,2xl:,}flex-row");
-@source "../../../../lib/**/*";

data/config/routes.rb

@@ -1,2 +0,0 @@
-Rails.application.routes.draw do
-end

data/lib/cubit_components/bleed_component.rb

@@ -1,26 +0,0 @@
-module CubitComponents
-  class BleedComponent < BaseComponent
-    # Allow negative margin utility classes.
-    # They follow Tailwind's pattern, e.g., "-m-3" or "sm:-mx-4"
-    VALID_VATTRS = Set.new(
-      begin
-        breakpoints = ["", "sm:", "md:", "lg:", "xl:"]
-        directions = ["", "x", "y", "t", "r", "b", "l"]
-        values = %w[1 2 3 4 5]
-        breakpoints.flat_map do |bp|
-          directions.flat_map do |dir|
-            values.map do |val|
-              # For no breakpoint, produces e.g. "-m-3"
-              # For a breakpoint, produces e.g. "sm:-mx-4"
-              "#{bp}-m#{dir}-#{val}"
-            end
-          end
-        end
-      end
-    ).freeze
-
-    def initialize(element: "div", classes: "", vattrs: [])
-      super
-    end
-  end
-end

data/lib/cubit_components/columns_component.rb

@@ -1,48 +0,0 @@
-# frozen_string_literal: true
-
-module CubitComponents
-  # Horizontal flex-layout that can collapse into a vertical stack.
-  class ColumnsComponent < BaseComponent
-    VALID_VATTRS = Set.new(
-      %w[
-        gap-small gap-medium gap-large
-        items-start items-center items-end
-        text-left text-center text-right
-      ]
-    ).freeze
-
-    # :reverse   – Boolean, applies `flex-row-reverse`
-    # :collapse_below – breakpoint string, ex. "sm" → "sm:flex-col"
-    # `reverse` can only be true when `collapse_below` is non-nil
-    def initialize(element: "div", classes: "", vattrs: [], reverse: false, collapse_below: nil)
-      @reverse = reverse
-      @collapse_below = collapse_below
-
-      super(
-        element: element,
-        classes: build_layout_classes(classes),
-        vattrs: vattrs
-      )
-    end
-
-    # Nested column – accepts any utility classes, no validation
-    class ColumnComponent < BaseComponent
-      private def validate_vattrs? = false
-    end
-
-    private
-
-    def build_layout_classes(user)
-      base = %w[flex]
-      base << if @collapse_below && @reverse
-        "flex-col-reverse"
-      elsif @collapse_below
-        "flex-col"
-      else
-        "flex-row"
-      end
-      base << "#{@collapse_below}:flex-row" if @collapse_below
-      (base + user.to_s.split).join(" ")
-    end
-  end
-end

data/lib/cubit_components/content_block_component.rb

@@ -1,21 +0,0 @@
-module CubitComponents
-  class ContentBlockComponent < BaseComponent
-    DEFAULT_CLASSES = "max-w-screen mx-auto"
-    VALID_VATTRS = Set.new(
-      %w[
-        max-w-3xs max-w-2xs max-w-xs
-        max-w-sm max-w-md max-w-lg
-        max-w-xl max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl
-        max-w-none max-w-full max-w-screen
-      ]
-    )
-
-    # No extra vattr validation is required, so simply merge with default classes.
-    def initialize(element: "div", classes: "", vattrs: [])
-      default_classes = DEFAULT_CLASSES.split(" ")
-      default_classes.delete("max-w-screen") if vattrs.any? { |v| v.start_with?("max-w-") }
-      merged_classes = [*default_classes, classes].join(" ").strip
-      super(element: element, classes: merged_classes, vattrs: vattrs)
-    end
-  end
-end

data/lib/cubit_components/engine.rb

@@ -1,14 +0,0 @@
-require "rails"
-require "view_component"
-
-module CubitComponents
-  class Engine < ::Rails::Engine
-    config.view_component.preview_paths << root.join("lib/cubit_components/previews")
-
-    isolate_namespace CubitComponents
-
-    initializer "cubit_components.assets" do |app|
-      app.config.assets.precompile += %w[cubit_components/application.css]
-    end
-  end
-end

data/lib/cubit_components/inline_component.rb

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-module CubitComponents
-  class InlineComponent < BaseComponent
-    VALID_VATTRS = Set.new(
-      %w[gap-6 gap-small gap-medium gap-large text-left text-center text-right]
-    ).freeze
-
-    # collapse_below – e.g. "sm", "md"; adds "#{breakpoint}:flex-col"
-    def initialize(element: "div", classes: "", vattrs: [], collapse_below: nil)
-      extra_classes = %w[flex flex-wrap]
-      extra_classes << "flex-col #{collapse_below}:flex-row" if collapse_below
-
-      combined_classes = ([classes] + extra_classes).reject(&:empty?).join(" ")
-
-      super(element: element, classes: combined_classes, vattrs: vattrs)
-    end
-  end
-end

data/lib/cubit_components/page_block_component.rb

@@ -1,37 +0,0 @@
-module CubitComponents
-  class PageBlockComponent < BaseComponent
-    DEFAULT_OUTER_CLASSES = "px-4 sm:px-6".freeze
-    VALID_VATTRS = Set.new(
-      %w[
-        max-w-3xs max-w-2xs max-w-xs
-        max-w-sm max-w-md max-w-lg
-        max-w-xl max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl
-        max-w-none max-w-full max-w-screen
-      ]
-    )
-
-    # Optionally allow extra classes for the inner content block if needed.
-    def initialize(element: "div", classes: "", vattrs: [], content_block_classes: "")
-      @outer_classes = [DEFAULT_OUTER_CLASSES, classes].join(" ").strip
-      @content_block_classes = content_block_classes
-      @content_block_vattrs = vattrs # Pass the vattrs wholesale to the inner content block
-
-      super(element: element, classes: @outer_classes)
-    end
-
-    def call
-      content_tag @element, class: @outer_classes do
-        render_content_block { content }
-      end
-    end
-
-    private
-
-    def render_content_block(&block)
-      # Create a ContentBlockComponent, passing in any inner classes overrides.
-      ContentBlockComponent
-        .new(classes: @content_block_classes, vattrs: @content_block_vattrs)
-        .render_in(view_context, &block)
-    end
-  end
-end

data/lib/cubit_components/previews/bleed_component_preview.rb

@@ -1,13 +0,0 @@
-class BleedComponentPreview < ViewComponent::Preview
-  def default
-    render(CubitComponents::BleedComponent.new(vattrs: ["-m-3"])) do
-      tag.div("Bleed Content", class: "bg-gray-100 p-4")
-    end
-  end
-
-  def responsive
-    render(CubitComponents::BleedComponent.new(vattrs: ["sm:-mx-2", "md:-m-4"])) do
-      tag.div("Responsive Bleed Content", class: "bg-blue-100 p-4")
-    end
-  end
-end

data/lib/cubit_components/previews/box_component_preview.rb

@@ -1,12 +0,0 @@
-# frozen_string_literal: true
-
-class BoxComponentPreview < ViewComponent::Preview
-  def default
-    render(CubitComponents::BoxComponent.new) { "Default Box" }
-  end
-
-  def with_utilities
-    render(CubitComponents::BoxComponent.new(classes: "p-4",
-      vattrs: %w[gap-small text-center])) { "Preview" }
-  end
-end

data/lib/cubit_components/previews/columns_component_preview.rb

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-class ColumnsComponentPreview < ViewComponent::Preview
-  # Two equal columns, default layout
-  def default
-    render(CubitComponents::ColumnsComponent.new(vattrs: %w[gap-medium])) do
-      tag.div("Col 1", class: "w-1/3") +
-        tag.div("Col 2", class: "w-1/6") +
-        tag.div("Col 3", class: "w-1/2")
-    end
-  end
-
-  # Reversed order & collapses below md
-  def reversed_and_collapsing
-    render(CubitComponents::ColumnsComponent.new(reverse: true, collapse_below: "md", vattrs: %w[gap-large items-center])) do
-      tag.div("First", class: "w-full") +
-        tag.div("Second", class: "w-full")
-    end
-  end
-end

data/lib/cubit_components/previews/components_index.rb

@@ -1,28 +0,0 @@
-module CubitComponents
-  module Previews
-    class ComponentsIndex < ViewComponent::Preview
-      # A listing of all component previews.
-      def index
-        previews = [
-          {name: "BleedComponentPreview", path: "/cubit_components/bleed_component_preview"},
-          {name: "BoxComponentPreview", path: "/cubit_components/box_component_preview"},
-          {name: "ColumnsComponentPreview", path: "/cubit_components/columns_component_preview"},
-          {name: "ContentBlockComponentPreview", path: "/cubit_components/content_block_component_preview"},
-          {name: "InlineComponentPreview", path: "/cubit_components/inline_component_preview"},
-          {name: "PageBlockComponentPreview", path: "/cubit_components/page_block_component_preview"},
-          {name: "PageComponentPreview", path: "/cubit_components/page_component_preview"},
-          {name: "SpreadComponentPreview", path: "/cubit_components/spread_component_preview"},
-          {name: "StackComponentPreview", path: "/cubit_components/stack_component_preview"},
-          {name: "TilesComponentPreview", path: "/cubit_components/tiles_component_preview"}
-        ]
-
-        html = "<h1>Components Preview Index</h1><ul>"
-        previews.each do |preview|
-          html << "<li><a href='#{preview[:path]}'>#{preview[:name]}</a></li>"
-        end
-        html << "</ul>"
-        html.html_safe
-      end
-    end
-  end
-end

data/lib/cubit_components/previews/content_block_component_preview.rb

@@ -1,13 +0,0 @@
-class ContentBlockComponentPreview < ViewComponent::Preview
-  def default
-    render(CubitComponents::ContentBlockComponent.new(vattrs: %w[max-w-sm])) do
-      tag.p("This content is constrained by the max-width and centered.")
-    end
-  end
-
-  def with_extra_classes
-    render(CubitComponents::ContentBlockComponent.new(classes: "bg-gray-100 p-4")) do
-      tag.p("Content block with extra background and padding.")
-    end
-  end
-end

data/lib/cubit_components/previews/inline_component_preview.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-class InlineComponentPreview < ViewComponent::Preview
-  def default
-    render(CubitComponents::InlineComponent.new(vattrs: ["gap-6"])) do
-      tag.div("Block 1") +
-        tag.div("Block 2") +
-        tag.div("Block 3") +
-        tag.div("Block 4") +
-        tag.div("Block 5") +
-        tag.div("Block 6")
-    end
-  end
-
-  def collapse_below_md
-    render(CubitComponents::InlineComponent.new(collapse_below: "sm", vattrs: ["gap-6"])) do
-      tag.div("Block 1") +
-        tag.div("Block 2") +
-        tag.div("Block 3") +
-        tag.div("Block 4") +
-        tag.div("Block 5") +
-        tag.div("Block 6")
-    end
-  end
-end

data/lib/cubit_components/previews/page_block_component_preview.rb

@@ -1,13 +0,0 @@
-class PageBlockComponentPreview < ViewComponent::Preview
-  def default
-    render(CubitComponents::PageBlockComponent.new(vattrs: %w[max-w-sm])) do
-      tag.p("This is a page block which wraps a content block. Outer padding is applied.")
-    end
-  end
-
-  def custom_inner
-    render(CubitComponents::PageBlockComponent.new(content_block_classes: "bg-white shadow-lg p-6")) do
-      tag.p("Page block with a customized inner content block.")
-    end
-  end
-end

data/lib/cubit_components/previews/page_component_preview.rb

@@ -1,17 +0,0 @@
-class PageComponentPreview < ViewComponent::Preview
-  def default
-    render(CubitComponents::PageComponent.new(footer_position: "screen_bottom", classes: "bg-gray-100")) do |component|
-      component.with_footer { tag.footer("Footer content", class: "p-4 bg-blue-200") }
-      tag.header("Header content", class: "p-4 bg-blue-200") +
-        tag.main("Body content", class: "p-4")
-    end
-  end
-
-  def below_fold
-    render(CubitComponents::PageComponent.new(footer_position: "below_fold", classes: "bg-gray-100")) do |component|
-      component.with_footer { tag.footer("Footer content", class: "p-4 bg-blue-200") }
-      tag.header("Header content", class: "p-4 bg-blue-200") +
-        tag.main("Body content", class: "p-4")
-    end
-  end
-end

data/lib/cubit_components/previews/preview_helper.rb

@@ -1,15 +0,0 @@
-module CubitComponents
-  module Previews
-    module PreviewHelper
-      # Returns a documentation link for the component.
-      def documentation_link(component_name)
-        "https://your.documentation.url/#{component_name}"
-      end
-
-      # Standard documentation render for previews
-      def render_documentation(component_name)
-        render plain: "See documentation: #{documentation_link(component_name)}"
-      end
-    end
-  end
-end

data/lib/cubit_components/previews/spread_component_preview.rb

@@ -1,46 +0,0 @@
-class SpreadComponentPreview < ViewComponent::Preview
-  # Default horizontal spread with items-start and text-left
-  def default
-    render(CubitComponents::SpreadComponent.new) do
-      tag.div(class: "p-2 border") { "Item 1" } +
-        tag.div(class: "p-2 border") { "Item 2" } +
-        tag.div(class: "p-2 border") { "Item 3" }
-    end
-  end
-
-  # Vertical spread layout
-  def vertical
-    render(CubitComponents::SpreadComponent.new(vattrs: ["vertical", "items-center"])) do
-      tag.div(class: "p-2 border") { "Item 1" } +
-        tag.div(class: "p-2 border") { "Item 2" } +
-        tag.div(class: "p-2 border") { "Item 3" }
-    end
-  end
-
-  # Centered items
-  def centered_items
-    render(CubitComponents::SpreadComponent.new(vattrs: ["items-center"])) do
-      tag.div(class: "p-2 border h-16") { "Tall Item" } +
-        tag.div(class: "p-2 border") { "Regular Item" } +
-        tag.div(class: "p-2 border h-12") { "Medium Item" }
-    end
-  end
-
-  # Text alignment
-  def text_alignment
-    render(CubitComponents::SpreadComponent.new(vattrs: ["text-center"])) do
-      tag.div(class: "p-2 border w-32") { "Centered Text" } +
-        tag.div(class: "p-2 border w-32") { "Centered Text" } +
-        tag.div(class: "p-2 border w-32") { "Centered Text" }
-    end
-  end
-
-  # Custom element
-  def custom_element
-    render(CubitComponents::SpreadComponent.new(element: "section", classes: "border p-4")) do
-      tag.div(class: "p-2 bg-gray-100") { "Section Item 1" } +
-        tag.div(class: "p-2 bg-gray-100") { "Section Item 2" } +
-        tag.div(class: "p-2 bg-gray-100") { "Section Item 3" }
-    end
-  end
-end