protos 0.6.0 → 0.7.0

data/lib/protos/dropdown.rb

@@ -10,14 +10,18 @@ module Protos
     # rather than pure CSS for accessibility. The layout of pure CSS was too
     # tricky to get right and we felt the dependency tradeoff was worthwhile.
 
+    autoload :Item, "protos/dropdown/item"
+    autoload :Menu, "protos/dropdown/menu"
+    autoload :Trigger, "protos/dropdown/trigger"
+
     option :position,
-           type: Popover::Positions,
-           default: -> { :bottom },
-           reader: false
+      type: Popover::Positions,
+      default: -> { :bottom },
+      reader: false
     option :trigger,
-           default: -> { :click },
-           reader: false,
-           type: Popover::Triggers | Types::Array.of(Popover::Triggers)
+      default: -> { :click },
+      reader: false,
+      type: Popover::Triggers | Types::Array.of(Popover::Triggers)
 
     def item(...) = render Item.new(...)
 

data/lib/protos/hero.rb

@@ -6,6 +6,9 @@ module Protos
     # optionally layout an image for a responsive layout.
     # https://daisyui.com/components/hero/
 
+    autoload :Content, "protos/hero/content"
+    autoload :Overlay, "protos/hero/overlay"
+
     def view_template(&)
       div(**attrs, &)
     end

data/lib/protos/list.rb

@@ -5,6 +5,8 @@ module Protos
     # DOCS: A list of items that are joined together for easier styling with
     # borders, border radius, etc.
 
+    autoload :Item, "protos/list/item"
+
     option :ordered, Types::Bool, default: -> { false }, reader: false
 
     def view_template(&)

data/lib/protos/modal/close_button.rb

@@ -10,6 +10,14 @@ module Protos
           button(**attrs, &block)
         end
       end
+
+      private
+
+      def default_attrs
+        {
+          data: { action: "protos--modal#close" }
+        }
+      end
     end
   end
 end

data/lib/protos/modal/dialog.rb

@@ -14,12 +14,10 @@ module Protos
 
       private
 
-      def attrs
-        @attrs ||= build_attrs(
-          {
-            data: { "protos--modal-target": "modal" }
-          }
-        )
+      def default_attrs
+        {
+          data: { "protos--modal-target": "dialog" }
+        }
       end
 
       def theme

data/lib/protos/modal.rb

@@ -5,6 +5,10 @@ module Protos
     # DOCS: A modal component that can be triggered by a button or a link and
     # will open a fullscreen modal, usually with a close button.
 
+    autoload :CloseButton, "protos/modal/close_button"
+    autoload :Dialog, "protos/modal/dialog"
+    autoload :Trigger, "protos/modal/trigger"
+
     def view_template(&)
       div(**attrs, class: css[:container], &)
     end
@@ -20,7 +24,8 @@ module Protos
     def default_attrs
       {
         data: {
-          controller: "protos--modal"
+          controller: "protos--modal",
+          action: "click->protos--modal#backdropClose"
         }
       }
     end

data/lib/protos/popover.rb

@@ -12,6 +12,9 @@ module Protos
     # Tippy.js options can be passed in via the `options` attribute or, more
     # conveniently by the typed options listed below.
 
+    autoload :Trigger, "protos/popover/trigger"
+    autoload :Content, "protos/popover/content"
+
     Positions = Types::Coercible::Symbol.enum(
       :top,
       :top_start,
@@ -52,33 +55,33 @@ module Protos
     )
 
     option :position,
-           type: Positions,
-           default: -> { :top },
-           reader: false
+      type: Positions,
+      default: -> { :top },
+      reader: false
     option :animation,
-           type: Animations,
-           default: -> { :fade },
-           reader: false
+      type: Animations,
+      default: -> { :fade },
+      reader: false
     option :duration,
-           type: Types::Integer | Types::Array.of(Types::Integer),
-           default: -> { [300, 250] },
-           reader: false
+      type: Types::Integer | Types::Array.of(Types::Integer),
+      default: -> { [300, 250] },
+      reader: false
     option :hide_on_click,
-           type: Types::Bool | Types.Value(:toggle),
-           default: -> { true },
-           reader: false
+      type: Types::Bool | Types.Value(:toggle),
+      default: -> { true },
+      reader: false
     option :z_index,
-           type: Types::Integer,
-           default: -> { 9999 },
-           reader: false
+      type: Types::Integer,
+      default: -> { 9999 },
+      reader: false
     option :options,
-           default: -> { {} },
-           reader: false,
-           type: Types::Hash
+      default: -> { {} },
+      reader: false,
+      type: Types::Hash
     option :trigger,
-           default: -> { %i[mouseenter focus] },
-           reader: false,
-           type: Triggers | Types::Array.of(Triggers)
+      default: -> { %i[mouseenter focus] },
+      reader: false,
+      type: Triggers | Types::Array.of(Triggers)
 
     def view_template(&)
       div(**attrs, &)

data/lib/protos/stats.rb

@@ -5,6 +5,13 @@ module Protos
     # DOCS: Stats component that contains a collection of stats
     # https://daisyui.com/components/stat/
 
+    autoload :Actions, "protos/stats/actions"
+    autoload :Description, "protos/stats/description"
+    autoload :Figure, "protos/stats/figure"
+    autoload :Stat, "protos/stats/stat"
+    autoload :Title, "protos/stats/title"
+    autoload :Value, "protos/stats/value"
+
     def view_template(&)
       div(**attrs, &)
     end

data/lib/protos/steps.rb

@@ -5,6 +5,8 @@ module Protos
     # DOCS: Steps can be used to show a list of steps in a process.
     # https://daisyui.com/components/steps/
 
+    autoload :Step, "protos/steps/step"
+
     option :vertical, type: Types::Bool, default: -> { false }
 
     def view_template(&)
@@ -17,10 +19,10 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "steps",
-          vertical: "steps-vertical"
-        )
+          ("steps-vertical" if vertical)
+        ]
       }
     end
   end

data/lib/protos/swap.rb

@@ -6,6 +6,9 @@ module Protos
     # display different content.
     # https://daisyui.com/components/swap/
 
+    autoload :On, "protos/swap/on"
+    autoload :Off, "protos/swap/off"
+
     def view_template
       label(**attrs) do
         input(

data/lib/protos/table/caption.rb

@@ -11,9 +11,9 @@ module Protos
       }.freeze
 
       option :side,
-             reader: false,
-             type: Types::Coercible::Symbol.enum(:bottom, :top),
-             default: -> { :bottom }
+        reader: false,
+        type: Types::Coercible::Symbol.enum(:bottom, :top),
+        default: -> { :bottom }
 
       def view_template(&)
         caption(**attrs, &)

data/lib/protos/table/cell.rb

@@ -12,9 +12,9 @@ module Protos
       }.freeze
 
       option :align,
-             type: Types::Coercible::Symbol.enum(:left, :center, :right),
-             reader: false,
-             default: -> { :left }
+        type: Types::Coercible::Symbol.enum(:left, :center, :right),
+        reader: false,
+        default: -> { :left }
 
       def view_template(&)
         td(**attrs, &)

data/lib/protos/table/head.rb

@@ -12,9 +12,9 @@ module Protos
       }.freeze
 
       option :align,
-             type: Types::Coercible::Symbol.enum(:left, :center, :right),
-             reader: false,
-             default: -> { :left }
+        type: Types::Coercible::Symbol.enum(:left, :center, :right),
+        reader: false,
+        default: -> { :left }
 
       def view_template(&)
         th(**attrs, &)

data/lib/protos/table.rb

@@ -5,6 +5,14 @@ module Protos
     # DOCS: A table component
     # https://daisyui.com/components/table/
 
+    autoload :Caption, "protos/table/caption"
+    autoload :Header, "protos/table/header"
+    autoload :Head, "protos/table/head"
+    autoload :Body, "protos/table/body"
+    autoload :Footer, "protos/table/footer"
+    autoload :Row, "protos/table/row"
+    autoload :Cell, "protos/table/cell"
+
     SIZES = {
       xs: "table-xs",
       sm: "table-sm",
@@ -16,14 +24,14 @@ module Protos
     option :pin_columns, default: -> { false }, type: Types::Bool
     option :striped, default: -> { false }, type: Types::Bool
     option :size,
-           default: -> { :md },
-           reader: false,
-           type: Types::Coercible::Symbol.enum(
-             :xs,
-             :sm,
-             :md,
-             :lg
-           )
+      default: -> { :md },
+      reader: false,
+      type: Types::Coercible::Symbol.enum(
+        :xs,
+        :sm,
+        :md,
+        :lg
+      )
 
     def view_template(&block)
       div(**attrs) do
@@ -54,13 +62,13 @@ module Protos
     def theme
       {
         container: "w-full overflow-x-auto",
-        table: tokens(
+        table: [
           "table",
           size,
-          pin_rows: "table-pin-rows",
-          pin_columns: "table-pin-columns",
-          striped: "table-striped"
-        )
+          ("table-pin-rows" if pin_rows),
+          ("table-pin-columns" if pin_columns),
+          ("table-striped" if striped)
+        ]
       }
     end
   end

data/lib/protos/tabs/tab.rb

@@ -22,11 +22,11 @@ module Protos
 
       def theme
         {
-          container: tokens(
+          container: [
             "tab",
-            disabled: "tab-disabled",
-            active: "tab-active"
-          )
+            ("tab-disabled" if disabled),
+            ("tab-active" if active)
+          ]
         }
       end
     end

data/lib/protos/tabs.rb

@@ -5,6 +5,8 @@ module Protos
     # DOCS: A component that contains many Protos::Tab components
     # https://daisyui.com/components/tab/
 
+    autoload :Tab, "protos/tabs/tab"
+
     SIZES = {
       xs: "tabs-xs",
       sm: "tabs-sm",
@@ -13,23 +15,23 @@ module Protos
     }.freeze
 
     option :type,
-           default: -> { :default },
-           reader: false,
-           type: Types::Coercible::Symbol.enum(
-             :default,
-             :boxed,
-             :bordered,
-             :lifted
-           )
+      default: -> { :default },
+      reader: false,
+      type: Types::Coercible::Symbol.enum(
+        :default,
+        :boxed,
+        :bordered,
+        :lifted
+      )
     option :size,
-           default: -> { :md },
-           reader: false,
-           type: Types::Coercible::Symbol.enum(
-             :xs,
-             :sm,
-             :md,
-             :lg
-           )
+      default: -> { :md },
+      reader: false,
+      type: Types::Coercible::Symbol.enum(
+        :xs,
+        :sm,
+        :md,
+        :lg
+      )
 
     def view_template(&)
       div(**attrs, &)

data/lib/protos/theme.rb

@@ -9,7 +9,7 @@ module Protos
 
     class << self
       def merger
-        @merger ||= TailwindMerge::Merger.new
+        @merger ||= TailwindMerge::Merger.new.freeze
       end
     end
 
@@ -25,14 +25,15 @@ module Protos
       end
     end
 
-    def [](key)
-      return nil unless key?(key)
+    def [](*keys)
+      symbols, strings = keys.partition { |key| key.is_a?(Symbol) }
+      values = @theme.values_at(*symbols).join(" ")
+      values += " #{strings.join(" ")}" unless strings.empty?
 
-      value = @theme[key].to_s
-      return nil if value.empty?
-      return value unless @tailwind_merge
+      return nil if values.empty?
+      return values unless @tailwind_merge
 
-      self.class.merger.merge(value)
+      self.class.merger.merge(values)
     end
 
     def key?(key)

data/lib/protos/timeline.rb

@@ -5,6 +5,11 @@ module Protos
     # DOCS: A timeline component
     # https://daisyui.com/components/timeline/
 
+    autoload :Item, "protos/timeline/item"
+    autoload :Left, "protos/timeline/left"
+    autoload :Center, "protos/timeline/center"
+    autoload :Right, "protos/timeline/right"
+
     option :vertical, type: Types::Bool, default: -> { false }
 
     def view_template(&)
@@ -23,10 +28,10 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "timeline",
-          vertical: "timeline-vertical"
-        )
+          ("timeline-vertical" if vertical)
+        ]
       }
     end
   end

data/lib/protos/toast.rb

@@ -6,6 +6,8 @@ module Protos
     # that popup at a fixed position on the screen.
     # https://daisyui.com/components/toast/
 
+    autoload :CloseButton, "protos/toast/close_button"
+
     Positions = Types::Symbol.enum(
       :top_start,
       :top_center,
@@ -31,9 +33,9 @@ module Protos
     }.freeze
 
     option :position,
-           type: Positions,
-           default: -> { :bottom_end },
-           reader: false
+      type: Positions,
+      default: -> { :bottom_end },
+      reader: false
 
     def view_template(&)
       dialog(**attrs, &)

data/lib/protos/typography/paragraph.rb

@@ -15,10 +15,10 @@ module Protos
 
       def theme
         {
-          container: tokens(
+          container: [
             "leading-relaxed",
-            margin: "[&:not(:first-child)]:mt-sm"
-          )
+            ("[&:not(:first-child)]:mt-sm" if margin)
+          ]
         }
       end
     end

data/lib/protos/typography.rb

@@ -5,6 +5,10 @@ module Protos
     # DOCS: The core typography module that can be mixedin to override the
     # default elements with custom elements.
 
+    autoload :Heading, "protos/typography/heading"
+    autoload :Paragraph, "protos/typography/paragraph"
+    autoload :InlineLink, "protos/typography/inline_link"
+
     def h1(**, &)
       render Heading.new(level: 1, size: :xl, **, &)
     end

data/lib/protos/version.rb

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

data/lib/protos.rb

@@ -8,127 +8,43 @@ require "tailwind_merge"
 
 module Protos
   class Error < StandardError; end
-end
-
-require_relative "protos/version"
-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
-require_relative "protos/accordion"
-require_relative "protos/accordion/item"
-
-require_relative "protos/alert"
-require_relative "protos/alert/actions"
-require_relative "protos/alert/icon"
-
-require_relative "protos/avatar"
-
-require_relative "protos/breadcrumbs"
-require_relative "protos/breadcrumbs/crumb"
-
-require_relative "protos/card"
-require_relative "protos/card/body"
-require_relative "protos/card/title"
-require_relative "protos/card/actions"
-require_relative "protos/card/image"
-
-require_relative "protos/carousel"
-require_relative "protos/carousel/item"
-require_relative "protos/carousel/actions"
-
-require_relative "protos/chat_bubble"
-require_relative "protos/chat_bubble/content"
-require_relative "protos/chat_bubble/image"
-require_relative "protos/chat_bubble/header"
-require_relative "protos/chat_bubble/footer"
-
-require_relative "protos/collapse"
-require_relative "protos/collapse/title"
-require_relative "protos/collapse/content"
-
-require_relative "protos/command"
-require_relative "protos/command/input"
-require_relative "protos/command/dialog"
-require_relative "protos/command/group"
-require_relative "protos/command/list"
-require_relative "protos/command/trigger"
-require_relative "protos/command/title"
-require_relative "protos/command/item"
-require_relative "protos/command/empty"
-
-require_relative "protos/drawer"
-require_relative "protos/drawer/side"
-require_relative "protos/drawer/trigger"
-require_relative "protos/drawer/content"
-
-require_relative "protos/hero"
-require_relative "protos/hero/content"
-require_relative "protos/hero/overlay"
 
-require_relative "protos/list"
-require_relative "protos/list/item"
-
-require_relative "protos/modal"
-require_relative "protos/modal/close_button"
-require_relative "protos/modal/dialog"
-require_relative "protos/modal/trigger"
-
-require_relative "protos/popover"
-require_relative "protos/popover/trigger"
-require_relative "protos/popover/content"
-
-require_relative "protos/stats"
-require_relative "protos/stats/actions"
-require_relative "protos/stats/description"
-require_relative "protos/stats/figure"
-require_relative "protos/stats/stat"
-require_relative "protos/stats/title"
-require_relative "protos/stats/value"
-
-require_relative "protos/steps"
-require_relative "protos/steps/step"
-
-require_relative "protos/swap"
-require_relative "protos/swap/on"
-require_relative "protos/swap/off"
-
-require_relative "protos/tabs"
-require_relative "protos/tabs/tab"
-
-require_relative "protos/table"
-require_relative "protos/table/caption"
-require_relative "protos/table/header"
-require_relative "protos/table/head"
-require_relative "protos/table/body"
-require_relative "protos/table/footer"
-require_relative "protos/table/row"
-require_relative "protos/table/cell"
-
-require_relative "protos/toast"
-require_relative "protos/toast/close_button"
-
-require_relative "protos/timeline"
-require_relative "protos/timeline/item"
-require_relative "protos/timeline/left"
-require_relative "protos/timeline/center"
-require_relative "protos/timeline/right"
-
-require_relative "protos/typography"
-require_relative "protos/typography/heading"
-require_relative "protos/typography/paragraph"
-require_relative "protos/typography/inline_link"
-
-# Dependent
-require_relative "protos/dropdown"
-require_relative "protos/dropdown/item"
-require_relative "protos/dropdown/menu"
-require_relative "protos/dropdown/trigger"
-
-require_relative "protos/combobox"
+  autoload :Version, "protos/version"
+  autoload :Types, "protos/types"
+  autoload :TokenList, "protos/token_list"
+  autoload :Component, "protos/component"
+  autoload :Theme, "protos/theme"
+  autoload :Mix, "protos/mix"
+  autoload :Attributes, "protos/attributes"
+
+  # Components
+  autoload :Accordion, "protos/accordion"
+  autoload :Alert, "protos/alert"
+  autoload :Avatar, "protos/avatar"
+  autoload :Badge, "protos/badge"
+  autoload :Breadcrumbs, "protos/breadcrumbs"
+  autoload :Card, "protos/card"
+  autoload :Carousel, "protos/carousel"
+  autoload :ChatBubble, "protos/chat_bubble"
+  autoload :Collapse, "protos/collapse"
+  autoload :Command, "protos/command"
+  autoload :Drawer, "protos/drawer"
+  autoload :Hero, "protos/hero"
+  autoload :List, "protos/list"
+  autoload :Modal, "protos/modal"
+  autoload :Popover, "protos/popover"
+  autoload :Stats, "protos/stats"
+  autoload :Steps, "protos/steps"
+  autoload :Swap, "protos/swap"
+  autoload :Tabs, "protos/tabs"
+  autoload :Table, "protos/table"
+  autoload :Toast, "protos/toast"
+  autoload :Timeline, "protos/timeline"
+  autoload :Typography, "protos/typography"
+
+  # Dependent
+  autoload :Dropdown, "protos/dropdown"
+  autoload :Combobox, "protos/combobox"
+end
 
 require_relative "protos/engine" if defined?(Rails)