protos 0.4.3 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7b9c6eb83f7c89f66d1f625fd200b2f6595c098130e16da1fcb6b2e96dd59fe
-  data.tar.gz: 07a7e91d1ef7041dba38b72eb412309d31cf6426ad1e3b157f6a83fab59a32dd
+  metadata.gz: '0796561a80e75fb39f8b35ec75257104adc90b21227ef1525876576d10415269'
+  data.tar.gz: 394a8ee190d1d2647476db45d2d9b9edb156bc42a3935898d6f1deca35261326
 SHA512:
-  metadata.gz: 36fa9e7809d68b3d1227814cb7bb23fc44066813de58360486f5c7ffffafb30f58f6cb50309aef8902796ea234dfe3f5dcd46b451673cf77600da5f257840e33
-  data.tar.gz: 8ee74d55eebfaaec0d488809563695bf456229ed8dad466a10b6b5f20c117ed02644ef2a7a9646679a47697cae06eca5e6e50f21a863292d46c9753be4c82939
+  metadata.gz: 59e2288d2ae8adfc3b352838dda25c776edddf48d99b310181629e78f09831552be23e36adedaca7bf3601678cb08950500f4b72f2ed609324ccd72ddd32a92d
+  data.tar.gz: e0e4beda7e4cbff4e3b669899b65df2ec7c37fe388e75b561418ce1cc65abd4cb1cfecabd743f964bf0dee98de1c4ccdbf9f7e76f77078f294a8bfb0a4272802

data/CHANGELOG.md

@@ -1,5 +1,22 @@
 ## [Unreleased]
 
+## [0.6.0] - 2024-09-04
+
+- Changes how merging attributes works to only mix on certain attributes,
+  overriding on all others. This is opposite to how attributes used to be merged
+  by default. This is a fix for attributes like `value` where you actually need
+  to override them.
+- Adds tests for all Rails components
+- Adds a separate tested `Mix` class for handling attribute merging
+
+## [0.5.0] - 2024-08-27
+
+- Fixes all accessibility violations according to Axe Core
+- Reduces responsibility of Tabs to only be a tablist, no tab panels
+- Fixes passing ID to popovers, dropdowns, drawers, etc to not override the
+  input ID
+- Changes trigger on popover to be a button instead of a div
+
 ## [0.4.3] - 2024-08-14
 
 - Removes unneeded auto-loading in Rails which fixes collisions with `protos-markdown`

data/README.md

@@ -20,10 +20,90 @@ Other Phlex based UI libraries worth checking out:
 - [PhlexUI](https://phlexui.com/)
 - [ZestUI](https://zestui.com/)
 
+Thinking of making your next static site using Phlex? Check out
+[staticky](https://github.com/nolantait/staticky). The protos docs were
+published using it.
+
+## Phlex components
+
+Phlex is a fantastic framework for building frontend components in pure Ruby:
+
+```ruby
+class Navbar
+  def view_template
+    header(class: "flex items-center justify-between") do
+      h3 { "My site" }
+      button { "Log out" }
+    end
+  end
+end
+```
+
+But how can we sometimes render this `Navbar` with a different background color?
+
+It would be nice to have our components take a class like any other element:
+
+```ruby
+render Navbar.new(class: "bg-primary")
+```
+
+Unfortunately `class` is a special keyword in Ruby, so we need to do some
+awkward handling to use it like this:
+
+```ruby
+class Navbar
+  def initialize(**options)
+    # Keyword `class` is a special word in Ruby so we have to awkwardly unwrap
+    # like this instead of using keyword arguments
+    @classes = options[:class]
+  end
+
+  def view_template
+    header(class: "#{@classes} flex items-center justify-between") do
+      h3 { "My site" }
+      button { "Log out" }
+    end
+  end
+end
+```
+
+Now we can pass in a style to our container, but what about overriding the style
+of the `h3` tag?
+
+```ruby
+class Navbar
+  def initialize(**options)
+    # Keyword `class` is a special word in Ruby so we have to awkwardly unwrap
+    # like this instead of using keyword arguments
+    @container_classes = options[:class]
+    @title_classes = options[:title_class]
+  end
+
+  def view_template
+    header(class: "#{@classes} flex items-center justify-between") do
+      h3(class: @title_classes) { "My site" }
+      button { "Log out" }
+    end
+  end
+end
+```
+
+Eventually everyone makes a kind of ad-hoc system for specifying styles. It gets
+more complicated when you have attributes like a data-controller. How do you
+give a good experience letting people using your components to add their own
+controllers while your component depends on one already?
+
+This library is an attempt to make this kind of developer experience while
+making reusable components more convention over configuration.
+
 ## Protos::Component
 
-A protos component follows some conventions that make them easy to work with as
-components in your app.
+A protos component follows 3 conventions that make them easy to work with as
+components in your app:
+
+- [Slots and themes](#slots-and-themes)
+- [Attrs and default attrs](#attrs-and-default-attrs)
+- [Params and options](#params-and-options)
 
 Every UI component library will have a tension between being too general to fit
 in your app or too narrow to be useful. Making components that look good out of
@@ -32,20 +112,18 @@ the box can make them hard to customize.
 We try and resolve this tension by making these components have a minimal style
 that can be easily overridden using some ergonomic conventions.
 
-There are 3 core conventions:
-- [Slots and themes](#slots-and-themes)
-- [Attrs and default attrs](#attrs-and-default-attrs)
-- [Params and options](#params-and-options)
-
 ### Slots and themes
 
-Components are styled with `css` slots that are filled with values from
-a `theme`.
+Components are styled with `css` slots that get their values from a simple hash
+we call a `theme`.
+
+You define a `theme` for your component by defining a `#theme` method that
+returns a hash.
+
+Users of your components can override, merge, or remove parts of your theme by
+passing in their own as an argument to the component. Another nice benefit is
+that your markup doesn't get overwhelmed horizontally with your css classes.
 
-You define a theme for your component by defining a `#theme` method that returns
-a hash. This hash will be merged with any theme provided when rendering your
-component. This allows you to easily override styles for your components
-depending on their context.
 
 ```ruby
 class List < Protos::Component
@@ -58,7 +136,7 @@ class List < Protos::Component
 
   def theme
     {
-      list: tokens("space-y-4"), # We can use `#tokens` from phlex (recommended)
+      list: "space-y-4", # We can use `#tokens` from phlex (recommended)
       item: "font-bold text-2xl" # Or just plain old strings
     }
   end
@@ -66,7 +144,10 @@ end
 ```
 
 Using a theme and css slots allows us to easily override any part of a component
-when we render:
+when we render.
+
+Here we are passing in our own theme. The default behavior is to add these
+styles on to the theme, rather than replacing them.
 
 ```ruby
 render List.new(
@@ -77,7 +158,12 @@ render List.new(
 )
 ```
 
-This would combine the default and our theme using tailwind\_merge:
+When the component is rendered the `tailwind_merge` gem will also prune any
+duplicate unneeded styles.
+
+For example even though the themes `list` key would be added together to become
+`space-y-4 space-y-8`, the `tailwind_merge` gem will prune it down to just
+`space-y-8` as the two styles conflict.
 
 ```html
 <ul class="space-y-8">
@@ -119,8 +205,8 @@ The new `css[:item]` slot would be:
 <li class="font-bold">Item 1</li>
 ```
 
-If you want to change the method we define our default theme you can override the
-`theme_method` on the class:
+If you want to change the method we define our default theme under you can
+override the `theme_method` on the class:
 
 ```ruby
 class List < Protos::Component
@@ -142,12 +228,15 @@ end
 ### Attrs and default attrs
 
 By convention, all components spread in an `attrs` hash on their outermost
-element of the component.
+element of the component. There is no rule for this, but it makes them feel more
+naturally like native html elements when you render them.
 
-By doing this we enable 2 main conveniences:
+By doing this we enable 3 main conveniences:
 1. We can pass a `class` keyword when initializing the component which will be
    merged safely into the `css[:container]` slot
-2. We can add default attributes that are safely merged with any provided to the
+2. We can pass any html attributes we want to the element such as `id`, `data`
+   etc and it will just work
+3. We can add default attributes that are safely merged with any provided to the
    component when its being initialized
 
 ```ruby
@@ -175,12 +264,15 @@ class List < Protos::Component
 end
 ```
 
-`#attrs` will by default merge the `class` keyword into the `css[:container]`
-slot which we define in our theme.
+`#attrs` returns a hash which will by default merge the `class` keyword into the
+`css[:container]` slot which we define in our theme. The `ul` elements class
+would be `space-y-4` as that is the `css[:container]` on our theme.
+
+Special html options (`class`, `data`) will be safely merged. 
 
-Special html options will be safely merged. For examples, the component above
-defines a list controller. If we passed our own controller into data when we
-initialize, the component's data-controller attribute would be appended to:
+For examples, the component above defines a list controller. If we passed our
+own controller into data when we initialize, the component's data-controller
+attribute would be appended to:
 
 ```ruby
 render List.new(
@@ -194,6 +286,9 @@ That would output both controllers to the DOM element:
 <ul data-controller="list tooltip">
 ```
 
+This makes it very convenient to add functionality to basic components without
+overriding their core behavior or having to modify/override their class.
+
 If we wanted to, just like for our theme we can change the method from
 `default_attrs` by defining the `default_attrs_method` on the class:
 
@@ -224,25 +319,27 @@ class List < Protos::Component
 end
 ```
 
+This makes our initialization declarative and easy to extend without having to
+consider how to call `super` in the initializer.
+
 The following keywords are reserved in the base class:
 
 - `class`
 - `theme`
 - `html_options`
 
+You are free to add whatever positional or keyword arguments you like as long as
+they don't directly conflict with those names.
+
 ## Putting it all together
 
-Here is an example of a small navbar component:
+Lets revisit the example of our `Navbar` component:
 
 ```ruby
 require "protos"
 
 class Navbar < Protos::Component
   def view_template
-    # **attrs will add:
-    # - Any html options defined on the component initialization such as data,
-    #   role, for, etc..
-    # - Class will be added to the css[:container] and applied
     header(**attrs) do
       h1(class: css[:heading]) { "Hello world" }
       h2(class: css[:subtitle]) { "With a subtitle" }
@@ -259,19 +356,19 @@ class Navbar < Protos::Component
 
   def theme
     {
-      container: tokens(
-        "flex",
-        "justify-between",
-        "items-center",
-        "gap-sm"
-      ),
-      heading: tokens("text-2xl", "font-bold"),
-      subtitle: tokens("text-base")
+      container: "flex justify-between items-center gap-sm",
+      heading: "text-2xl font-bold",
+      subtitle: "text-sm"
     }
   end
 end
+```
 
-component = Navbar.new(
+Now all the concerns about adding in our behavior, styles, etc are handled for
+us by convention:
+
+```ruby
+render Navbar.new(
   # This will add to the component's css[:container] slot
   class: "my-sm",
   # This will add the controller and not remove
@@ -283,8 +380,6 @@ component = Navbar.new(
     subtitle!: "text-xl"   # We can override the entire slot
   }
 )
-
-puts component.call
 ```
 
 Which produces the following html:
@@ -308,7 +403,7 @@ If bundler is not being used to manage dependencies, install the gem by executin
 
 ## Usage
 
-Setup [Tailwindcss](https://tailwindcss.com/), [daisyUI](https://daisyui.com)
+Setup [TailwindCSS](https://tailwindcss.com/), [DaisyUI](https://daisyui.com)
 and add the protos path to your content.
 
 ```
@@ -316,7 +411,7 @@ npm install -D tailwindcss postcss autoprefixer daisyui
 npx tailwindcss init
 ```
 
-Then we need to add the protos path to the `content` of our tailwindcss config
+Then we need to add the protos path to the `content` of our tailwind config
 so tailwind will read the styles defined in the Protos gem.
 
 Protos also uses semantic spacing such as `p-sm` or `m-md` instead of set
@@ -344,15 +439,6 @@ module.exports = {
         lg: "var(--spacing-lg)",
         xl: "var(--spacing-xl)",
       },
-      // If you use % based spacing you might want different spacing
-      // for any vertical gaps to prevent overflow
-      gap: {
-        xs: "var(--spacing-gap-xs)",
-        sm: "var(--spacing-gap-sm)",
-        md: "var(--spacing-gap-md)",
-        lg: "var(--spacing-gap-lg)",
-        xl: "var(--spacing-gap-xl)",
-      },
     },
   }
   // ....
@@ -388,11 +474,12 @@ end
 
 ## Building your own components
 
-You can override components simply by redefining the class in your own app:
+You can override components simply by redefining sub-classing the class in your
+own app:
 
 ```ruby
-module Protos
-  class Swap < Component
+module Components
+  class Swap < Protos::Component
     private
 
     def on(...)
@@ -408,8 +495,22 @@ module Protos
 end
 ```
 
-You could also encapsulate these more primitive proto components into your own
-components. You could use `Proto::List` to create your own list and even use
+But its much better to avoid the sub-classing and just render the component
+inside of your own:
+
+```ruby
+module Components
+  class Swap < ApplicationComponent
+    def view_template
+      render Protos::Swap.new do |c|
+        # ....
+      end
+    end
+  end
+end
+```
+
+You could use `Proto::List` to create your own list and even use
 `Phlex::DeferredRender` to make the API more convenient.
 
 Let's create a list component with headers and actions:

data/lib/protos/accordion/item.rb

@@ -5,16 +5,16 @@ module Protos
     class Item < Component
       # DOCS: An accorion is just a collapse with radio buttons.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, type: Types::String | Types::Integer
 
       def view_template(&block)
         li(**attrs) do
-          render Collapse.new(theme: collapse_theme) do
-            # form: "" prevents the radio button from being submitted if its
-            # within a form
-            input(type: :radio, name: id, form: "", autocomplete: :off)
-            yield if block
-          end
+          render Collapse.new(
+            theme: collapse_theme,
+            input_id: @input_id.to_s,
+            input_type: :radio,
+            &block
+          )
         end
       end
 

data/lib/protos/accordion.rb

@@ -7,20 +7,30 @@ module Protos
     # to be open at the same time, use the collapse component.
     # https://daisyui.com/components/accordion/
 
-    option :id, default: -> { "collapse-#{SecureRandom.hex(4)}" }
-
     def view_template(&)
       ul(**attrs, &)
     end
 
-    def item(*, **, &) = render Item.new(*, id:, **, &)
+    def item(*, input_id: nil, **, &)
+      self.current_input_id = input_id
+
+      render Item.new(*, input_id: current_input_id, **, &)
+    end
 
     def content(...) = render Collapse::Content.new(...)
 
-    def title(*, **, &) = render Collapse::Title.new(*, id:, **, &)
+    def title(*, **, &)
+      render Collapse::Title.new(*, input_id: current_input_id, **, &)
+    end
 
     private
 
+    attr_reader :current_input_id
+
+    def current_input_id=(value)
+      @current_input_id = value || "collapse-#{SecureRandom.hex(4)}"
+    end
+
     def theme
       {
         container: "join join-vertical"

data/lib/protos/alert/actions.rb

@@ -11,6 +11,12 @@ module Protos
 
       private
 
+      def default_attrs
+        {
+          aria_label: "alert-actions"
+        }
+      end
+
       def theme
         {
           container: "flex gap-xs items-center"

data/lib/protos/attributes.rb

@@ -4,11 +4,6 @@ module Protos
   class Attributes
     # DOCS: A class that represents the attributes of a component. This would be
     # all html options except for `class` and `theme`.
-    #
-    # This class is responsible for safely merging in both user supplied and
-    # default attributes. When a user adds { data: { controller: "foo" }} to
-    # their component. This will merge the value in so that any default
-    # controllers do not get overridden.
 
     def initialize(attrs = {}, **kwargs)
       @attrs = attrs.merge!(kwargs)
@@ -34,19 +29,7 @@ module Protos
     private
 
     def mix(hash, *hashes)
-      hashes.each_with_object(hash) do |hash, result|
-        result.merge!(hash) do |_key, a, b| # rubocop:disable Metrics/ParameterLists
-          next a unless b
-          next a if a == b
-
-          case [a, b]
-          in String, String then "#{a} #{b}"
-          in Array, Array then a + b
-          in Hash, Hash then mix(a, b)
-          else b
-          end
-        end
-      end
+      Mix.call(hash, *hashes)
     end
   end
 end

data/lib/protos/breadcrumbs.rb

@@ -15,6 +15,12 @@ module Protos
 
     private
 
+    def default_attrs
+      {
+        aria_label: "breadcrumbs"
+      }
+    end
+
     def theme
       {
         container: "breadcrumbs"

data/lib/protos/collapse/title.rb

@@ -5,14 +5,15 @@ module Protos
     class Title < Component
       # DOCS: The title of a collapse. This is the content that is always
       # visible and is used to toggle the collapse.
-      option :id,
-             type: Types::Coercible::String,
+
+      option :input_id,
+             type: Types::String | Types::Integer | Types::Nil,
              reader: false,
-             default: -> { "" }
+             default: -> { }
 
       def view_template(&)
-        if @id.size.positive?
-          label(for: @id, **attrs, &)
+        if @input_id
+          label(for: @input_id.to_s, **attrs, &)
         else
           div(**attrs, &)
         end

data/lib/protos/collapse.rb

@@ -6,19 +6,30 @@ module Protos
     # is visible at all times, and the content is only visible when expanded.
     # https://daisyui.com/components/collapse/
 
-    option :checkbox, default: -> { false }, type: Types::Bool, reader: false
-    option :id,
+    option :input_type, default: -> { :checkbox }, reader: false
+    option :input_id,
+           reader: false,
            default: -> { "collapse-#{SecureRandom.hex(4)}" },
            type: Types::String
 
     def view_template
       div(**attrs) do
-        input(type: "checkbox", id:, autocomplete: :off) if @checkbox
+        if @input_type
+          input(
+            type: @input_type,
+            id: @input_id,
+            name: @input_id,
+            autocomplete: :off,
+            # form: "" prevents the radio button from being submitted if its
+            # within a form
+            form: ""
+          )
+        end
         yield if block_given?
       end
     end
 
-    def title(*, **, &) = render Title.new(*, id:, **, &)
+    def title(*, **, &) = render Title.new(*, input_id: @input_id, **, &)
 
     def content(...) = render Content.new(...)
 

data/lib/protos/command/input.rb

@@ -12,7 +12,7 @@ module Protos
              }
 
       def view_template(&block)
-        div(**attrs) do
+        li(**attrs) do
           label(class: css[:label]) do
             div(class: css[:icon], &block) if block
             input(

data/lib/protos/command/title.rb

@@ -7,7 +7,7 @@ module Protos
       # inside a Protos::Command::Group component.
 
       def view_template(&)
-        h2(**attrs, &)
+        li { h2(**attrs, &) }
       end
 
       private

data/lib/protos/component.rb

@@ -27,14 +27,14 @@ module Protos
     option :html_options, default: -> { {} }, reader: false
 
     # Adds non-defined options to the html_options hash
-    def initialize(*args, **kwargs, &)
+    def initialize(*, **kwargs, &)
       defined_keys = self.class.dry_initializer.definitions.keys
       defined, undefined =
         kwargs
           .partition { |key, _| defined_keys.include?(key) }
           .map!(&:to_h)
 
-      super(*args, html_options: undefined, **defined, &)
+      super(*, html_options: undefined, **defined, &)
     end
 
     private

data/lib/protos/drawer/side.rb

@@ -6,11 +6,15 @@ module Protos
       # DOCS: The content that will be shown when you open the drawer using the
       # trigger. This would be hidden until triggered.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, reader: false, type: Types::String
 
       def view_template
         aside(**attrs) do
-          label(for: id, aria_label: "close sidebar", class: css[:toggle])
+          label(
+            for: @input_id,
+            aria_label: "close sidebar",
+            class: css[:toggle]
+          )
           yield if block_given?
         end
       end

data/lib/protos/drawer/trigger.rb

@@ -6,10 +6,10 @@ module Protos
       # DOCS: The trigger for a drawer. When this is clicked the side will open
       # and overlap the main content with a darker overlay.
 
-      option :id, type: Types::Coercible::String
+      option :input_id, reader: false, type: Types::String
 
       def view_template(&)
-        label(for: id, **attrs, &)
+        label(for: @input_id, **attrs, &)
       end
 
       private

data/lib/protos/drawer.rb

@@ -7,20 +7,29 @@ module Protos
     # trigger is clicked.
     # https://daisyui.com/components/drawer/
 
-    option :id, type: Types::Coercible::String
+    option :id,
+           reader: false,
+           type: Types::Coercible::String,
+           default: -> { "drawer-#{SecureRandom.hex(4)}" }
 
     def view_template
       div(**attrs) do
-        input(id:, type: :checkbox, class: css[:toggle], autocomplete: :off)
+        input(
+          id: @id,
+          type: :checkbox,
+          class: css[:toggle],
+          autocomplete: :off,
+          form: ""
+        )
         yield if block_given?
       end
     end
 
     def content(...) = render Content.new(...)
 
-    def side(*, **, &) = render Side.new(*, id:, **, &)
+    def side(*, **, &) = render Side.new(*, input_id: @id, **, &)
 
-    def trigger(*, **, &) = render Trigger.new(*, id:, **, &)
+    def trigger(*, **, &) = render Trigger.new(*, input_id: @id, **, &)
 
     private
 

data/lib/protos/mix.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Protos
+  class Mix
+    # DOCS: This class is responsible for safely merging in both user supplied
+    # and default attributes. When a user adds { data: { controller: "foo" }} to
+    # their component. This will merge the value in so that any default
+    # controllers do not get overridden.
+
+    MERGEABLE_ATTRIBUTES = Set.new(%i[class data]).freeze
+
+    def self.call(...) = new.call(...)
+
+    def call(old_hash, *hashes)
+      hashes
+        .compact
+        .each_with_object(old_hash) do |new_hash, result|
+          merge(result, new_hash, top_level: true)
+        end
+    end
+
+    private
+
+    def merge(old_hash, new_hash, top_level: false) # rubocop:disable Metrics/PerceivedComplexity
+      old_hash.merge!(new_hash) do |key, old, new|
+        next old unless new
+        next old if old == new
+        next new if top_level && !MERGEABLE_ATTRIBUTES.include?(key)
+
+        case [old, new]
+        in String, String then "#{old} #{new}"
+        in Array, Array then old + new
+        in Hash, Hash then merge(old, new)
+        else new
+        end
+      end
+    end
+  end
+end

data/lib/protos/popover/trigger.rb

@@ -7,7 +7,7 @@ module Protos
       # or click on to show the popover.
 
       def view_template(&)
-        div(**attrs, &)
+        button(**attrs, &)
       end
 
       private
@@ -15,7 +15,8 @@ module Protos
       def default_attrs
         {
           data: { "protos--popover-target": "trigger" },
-          tabindex: 0
+          tabindex: 0,
+          type: :button
         }
       end
     end

data/lib/protos/swap.rb

@@ -8,7 +8,13 @@ module Protos
 
     def view_template
       label(**attrs) do
-        input(type: :checkbox, class: css[:input], autocomplete: :off)
+        input(
+          type: :checkbox,
+          class: css[:input],
+          autocomplete: :off,
+          form: "",
+          aria_label: "swap"
+        )
         yield if block_given?
       end
     end

data/lib/protos/tabs/tab.rb

@@ -5,35 +5,24 @@ module Protos
     class Tab < Component
       # DOCS: A single tab in a tabs component
 
-      option :id
-      option :label
       option :active, default: -> { false }
       option :disabled, default: -> { false }
 
       def view_template(&)
-        input(
-          type: :radio,
-          class: css[:input],
-          name: id,
-          role: :tab,
-          aria_label: label,
-          autocomplete: :off
-        )
-        div(**attrs, &)
+        button(**attrs, disabled:, &)
       end
 
       private
 
       def default_attrs
         {
-          role: :tabpanel
+          role: :tab
         }
       end
 
       def theme
         {
-          container: "tab-content",
-          input: tokens(
+          container: tokens(
             "tab",
             disabled: "tab-disabled",
             active: "tab-active"

data/lib/protos/toast/close_button.rb

@@ -8,6 +8,7 @@ module Protos
       def view_template(&block)
         form(method: :dialog, class: css[:form]) do
           button(
+            aria_label: "close",
             autofocus: true,
             formmethod: :dialog,
             formnovalidate: true,

data/lib/protos/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Protos
-  VERSION = "0.4.3"
+  VERSION = "0.6.0"
 end

data/lib/protos.rb

@@ -15,6 +15,7 @@ require_relative "protos/types"
 require_relative "protos/token_list"
 require_relative "protos/component"
 require_relative "protos/theme"
+require_relative "protos/mix"
 require_relative "protos/attributes"
 
 # Components

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: protos
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.6.0
 platform: ruby
 authors:
 - Nolan J Tait
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-08-15 00:00:00.000000000 Z
+date: 2024-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-core
@@ -149,6 +149,7 @@ files:
 - lib/protos/hero/overlay.rb
 - lib/protos/list.rb
 - lib/protos/list/item.rb
+- lib/protos/mix.rb
 - lib/protos/modal.rb
 - lib/protos/modal/close_button.rb
 - lib/protos/modal/dialog.rb
@@ -220,7 +221,7 @@ requirements:
 - tailwindcss
 - daisyui
 - protos-stimulus
-rubygems_version: 3.5.17
+rubygems_version: 3.5.18
 signing_key:
 specification_version: 4
 summary: A UI component library built with phlex and daisyui