phlex_ui 0.0.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e94d694e97786f20a88cc28497e9fbda569229a4b60688745e1faef5bb6a794
-  data.tar.gz: 3c06ca211012a28ad741ec3d66db56c7ecde93e637d07b24e2da5f987c759eef
+  metadata.gz: 443bba42189a98a9688d7218421e85da741c759ee3e9d7720817d4623ebbb85e
+  data.tar.gz: 92b24956dbcb18b4ba30be83a9f1fa736e9679fad74eb36522a1a8b97f085e0c
 SHA512:
-  metadata.gz: e45505146ef033bef4bc13725b1abc4dd450ca5f9b0a76981a109570044f50c68523dc4cd48aa69b0e9731e6ce5a7497788a08341012e2ea583ae9eab1fdae2e
-  data.tar.gz: 197a7019398397c7cff18c24c5e0a5822f183d98ef9ac6f7852f0ccb782f70653941ac3eda20eeb40015303d34b6291a171b9d1777ac68d8ce32a8e2774cff72
+  metadata.gz: 589b3e9cf3fdd3c09cb137d6dd8183d3ffed38a4ab87329337224e2320b9555b45b201df3006002c55f04011564be28719775fac8c12d459cc61601bf1553c76
+  data.tar.gz: e5fbd20b89c5a55f9aefe048f74d19f6241c0b7af7d047405a455b785d8d84251ce528dcd8a1198a6c5ed62a23cfa8e1908b2d8fbd4da5f70457b3135893b67f

data/lib/phlex_ui/accordion/builder.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Accordion::Builder < Base
+    def template(&block)
+      render PhlexUI::Accordion.new(**attrs) do
+        block.call
+      end
+    end
+
+    def add_item(title, content, open: false)
+      render Accordion::Item.new(open: open) do
+        render PhlexUI::Accordion::Trigger.new do
+          render PhlexUI::Accordion::DefaultTrigger.new { title }
+        end
+        render PhlexUI::Accordion::Content.new do
+          render PhlexUI::Accordion::DefaultContent.new { content }
+        end
+      end
+    end
+  end
+end

data/lib/phlex_ui/accordion/content.rb

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion::Content < Base
-        def template(&)
-            div(**attrs, &)
-        end
+  class Accordion::Content < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                data: { 
-                    accordion_target: "content" 
-                }, 
-                class: 'overflow-y-hidden',
-                style: 'height: 0px;'
-            }
-        end
+    def default_attrs
+      {
+        data: {
+          accordion_target: "content"
+        },
+        class: "overflow-y-hidden",
+        style: "height: 0px;"
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/accordion/default_content.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion::DefaultContent < Base
-        def template(&)
-            div(**attrs, &)
-        end
+  class Accordion::DefaultContent < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                class: 'pb-4 pt-0 text-sm'
-            }
-        end
+    def default_attrs
+      {
+        class: "pb-4 pt-0 text-sm"
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/accordion/default_trigger.rb

@@ -1,19 +1,19 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion::DefaultTrigger < Base
-        def template(&)
-            div(class: "flex items-center justify-between w-full") do
-                p(&)
-                render ::PhlexUI::Accordion::Icon.new
-            end
-        end
+  class Accordion::DefaultTrigger < Base
+    def template(&block)
+      div(class: "flex items-center justify-between w-full") do
+        p(&block)
+        render ::PhlexUI::Accordion::Icon.new
+      end
+    end
 
-        def default_attrs
-            {
-                data: { action: "click->accordion#toggle" },
-                class: 'w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline'
-            }
-        end
+    def default_attrs
+      {
+        data: {action: "click->accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/accordion/icon.rb

@@ -1,38 +1,38 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion::Icon < Base
-        def template(&block)
-            span(**attrs) do
-                if block
-                    block.call
-                else
-                    icon
-                end
-            end
+  class Accordion::Icon < Base
+    def template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
         end
+      end
+    end
 
-        def icon
-            svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 20 20",
-                fill: "currentColor",
-                class: "w-4 h-4"
-            ) do |s|
-                s.path(
-                    fill_rule: "evenodd",
-                    d:
-                    "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
-                    clip_rule: "evenodd"
-                )
-            end
-        end
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
 
-        def default_attrs
-            {
-                class: 'opacity-50',
-                data: { accordion_target: "icon" },
-            }
-        end
+    def default_attrs
+      {
+        class: "opacity-50",
+        data: {accordion_target: "icon"}
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/accordion/item.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion::Item < Base
-        def initialize(open: false, rotate_icon: 180, **attrs)
-            @open = open
-            @rotate_icon = rotate_icon
-            super(**attrs)
-        end
+  class Accordion::Item < Base
+    def initialize(open: false, rotate_icon: 180, **attrs)
+      @open = open
+      @rotate_icon = rotate_icon
+      super(**attrs)
+    end
 
-        def template(&)
-            div(**attrs, &)
-        end
+    def template(&block)
+      div(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                data: { 
-                    controller: "accordion",
-                    accordion_open_value: @open,
-                    accordion_rotate_icon_value: @rotate_icon
-                },
-                class: 'border-b'
-            }
-        end
+    def default_attrs
+      {
+        data: {
+          controller: "accordion",
+          accordion_open_value: @open,
+          accordion_rotate_icon_value: @rotate_icon
+        },
+        class: "border-b"
+      }
     end
+  end
 end

data/lib/phlex_ui/accordion/trigger.rb

@@ -1,16 +1,16 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion::Trigger < Base
-        def template(&)
-            button(**attrs, &)
-        end
+  class Accordion::Trigger < Base
+    def template(&block)
+      button(**attrs, &block)
+    end
 
-        def default_attrs
-            {
-                data: { action: "click->accordion#toggle" },
-                class: 'w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline'
-            }
-        end
+    def default_attrs
+      {
+        data: {action: "click->accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/accordion.rb

@@ -1,28 +1,17 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Accordion < Base
-        def template(&)
-            div(**attrs, &)
-        end
-
-        def add_item(title, content, open: false)
-            render Accordion::Item.new(open: open) do
-                render PhlexUI::Accordion::Trigger.new do
-                    render PhlexUI::Accordion::DefaultTrigger.new { title }
-                end
-                render PhlexUI::Accordion::Content.new do
-                    render PhlexUI::Accordion::DefaultContent.new { content }
-                end
-            end
-        end
+  class Accordion < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                class: 'w-full'
-            }
-        end
+    def default_attrs
+      {
+        class: "w-full"
+      }
     end
+  end
 end

data/lib/phlex_ui/alert/description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Alert::Description < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm [&_p]:leading-relaxed"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert/title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Alert::Title < Base
+    def template(&block)
+      h5(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mb-1 font-medium leading-none tracking-tight"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Alert < Base
+    def initialize(variant: nil, **attrs)
+      @variant = variant
+      super(**attrs) # must be called after variant is set
+    end
+
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def colors
+      case @variant
+      when nil
+        "ring-border bg-muted/20 text-foreground [&>svg]:opacity-80"
+      when :warning
+        "ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80"
+      when :success
+        "ring-success/20 bg-success/5 text-success [&>svg]:text-success/80"
+      when :destructive
+        "ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80"
+      end
+    end
+
+    def default_attrs
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      {
+        class: tokens(base_classes, colors)
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/action.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Action < Base
+    def template(&block)
+      render PhlexUI::Button.new(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :primary
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/cancel.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Cancel < Base
+    def template(&block)
+      render PhlexUI::Button.new(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        data: {
+          action: "click->dismissable#dismiss"
+        },
+        class: "mt-2 sm:mt-0"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/content.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Content < Base
+    def template(&block)
+      template_tag(**attrs) do
+        div(data: {controller: "dismissable"}) do
+          background
+          container(&block)
+        end
+      end
+    end
+
+    def background
+      div(
+        data_state: "open",
+        class:
+              "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        style: "pointer-events:auto",
+        data_aria_hidden: "true",
+        aria_hidden: "true"
+      )
+    end
+
+    def container(&block)
+      div(
+        role: "alertdialog",
+        data_state: "open",
+        class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        style: "pointer-events:auto",
+        &block
+      )
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          alert_dialog_target: "content"
+        }
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Description < Base
+    def template(&block)
+      p(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Footer < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Header < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col space-y-2 text-center sm:text-left"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Title < Base
+    def template(&block)
+      h2(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-lg font-semibold"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog/trigger.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog::Trigger < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {action: "click->alert-dialog#open"},
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/phlex_ui/alert_dialog.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AlertDialog < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "alert-dialog",
+          alert_dialog_open_value: @open
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/phlex_ui/aspect_ratio.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class AspectRatio < Base
+    def initialize(aspect_ratio: "16/9", **attrs)
+      raise "aspect_ratio must be in the format of a string with a slash in the middle (eg. '16/9', '1/1')" unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")
+
+      @aspect_ratio = aspect_ratio
+      super(**attrs)
+    end
+
+    def template(&block)
+      div(
+        class: "relative w-full",
+        style: "padding-bottom: #{padding_bottom}%;"
+      ) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def padding_bottom
+      @aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
+    end
+
+    def default_attrs
+      {
+        class: "bg-muted absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"
+      }
+    end
+  end
+end