phlex_ui 0.0.3 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96bee30ae4924b1a8300df9b2ca4322877078a064d4b1326f9c4c43d184461f1
-  data.tar.gz: b3739fab746cef0e2ec75b736b4b92c4ae14daa6071ff4afc07972ecc4db5b42
+  metadata.gz: 997466eeaf90ee785e93f2bbb17ddf3014db28e538cfd2b5bb1177800b7eff41
+  data.tar.gz: a876736cf42046f4eda6e974ca8d48a2ffceb29dc49679bf2a857815a2d14c4e
 SHA512:
-  metadata.gz: aafde25ef57c8477bcfd5cb6f8c3610b9a806bf386fd7947e03943ad665edd893c2a8946e08eb22a97904092ff19813ab66e7b079c5a60ddf0ac5d5faceb31eb
-  data.tar.gz: a60fe88f9f889563d5ddbc8c8e2f316ecfbf74916547ba370e8bb37a4d6ba33866fc750898325fb83cedeb4b05629b35275c1856dbec4c9aaef00d036010017d
+  metadata.gz: ca6af73e57c9c22983f4eab367a894bbcdba53e8b16b707ec14accf80f1faa81994f45f2ea34ffb1867cc800875bce96c7d716043f418b1aa88aa1adfcc3049d
+  data.tar.gz: 6fb432282362714d0a1b048e476dc15d7ad38f60ef26c311eaeefe35fcca31b9b34b72224f61147b991fd832c148f1380fa556eb878abe5ecf27dd3a50c8ea46

data/lib/phlex_ui/accordion/content.rb

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

data/lib/phlex_ui/accordion/default_content.rb

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

data/lib/phlex_ui/accordion/default_trigger.rb

@@ -0,0 +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
+
+        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

data/lib/phlex_ui/accordion/icon.rb

@@ -0,0 +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
+        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
+    end
+end

data/lib/phlex_ui/accordion/item.rb

@@ -0,0 +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
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::Trigger < Base
+        def template(&)
+            button(**attrs, &)
+        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

data/lib/phlex_ui/accordion.rb

@@ -0,0 +1,28 @@
+# 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
+
+        private
+
+        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(&)
+            div(**attrs, &)
+        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(&)
+            h5(**attrs, &)
+        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(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def colors
+            case @variant
+            when nil
+                'ring-border bg-muted-background text-text [&>svg]:opacity-80'
+            when :warning
+                'ring-warning/20 bg-warning/10 text-warning [&>svg]:text-warning/80'
+            when :success
+                'ring-success/20 bg-success/10 text-success [&>svg]:text-success/80'
+            when :destructive
+                'ring-destructive/10 dark:ring-destructive/20 text-destructive bg-destructive/10 [&>svg]:text-destructive/80'
+            end
+        end
+
+        def default_attrs
+            base_classes = '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(&)
+            render PhlexUI::Button.new(**attrs, &)
+        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(&)
+            render PhlexUI::Button.new(**attrs, &)
+        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(&)
+            template_tag(**attrs) do
+                div(data: { controller: 'dismissable' }) do
+                    background
+                    container(&)
+                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(&)
+            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",
+                &
+            )
+        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(&)
+            p(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-sm text-muted-text"
+            }
+        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(&)
+            div(**attrs, &)
+        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(&)
+            div(**attrs, &)
+        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(&)
+            h2(**attrs, &)
+        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(&)
+            div(**attrs, &)
+        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(&)
+            div(**attrs, &)
+        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(&)
+            div(
+                class: "relative w-full",
+                style: "padding-bottom: #{padding_bottom}%;",
+            ) do
+                div(**attrs, &)
+            end
+        end
+
+        private
+
+        def padding_bottom
+            @aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
+        end
+
+        def default_attrs
+            {
+                class: "bg-muted-background absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"
+            }
+        end
+    end
+end

data/lib/phlex_ui/attribute_merger.rb

@@ -0,0 +1,75 @@
+module PhlexUI
+    class AttributeMerger
+        attr_reader :default_attrs, :user_attrs
+        OVERRIDE_KEY = '!'.freeze
+
+        def initialize(default_attrs, user_attrs)
+            @default_attrs = flatten_hash(default_attrs)
+            @user_attrs = flatten_hash(user_attrs)
+        end
+
+        def call
+            merged_attrs = merge_hashes(default_attrs, non_override_attrs)
+            mix(merged_attrs, override_attrs)
+        end
+
+        private
+
+        # @return [Hash]
+        def mix(*args)
+            args.each_with_object({}) do |object, result|
+                result.merge!(object) do |_key, old, new|
+                    case new
+                    when Hash
+                        old.is_a?(Hash) ? mix(old, new) : new
+                    when Array
+                        old.is_a?(Array) ? (old + new) : new
+                    when String
+                        old.is_a?(String) ? "#{old} #{new}" : new
+                    else
+                        new
+                    end
+                end
+
+                result.transform_keys! do |key|
+                    key.end_with?("!") ? key.name.chop.to_sym : key
+                end
+            end
+        end
+
+        def override_attrs
+            user_attrs.select do |key, value|
+                key.to_s.include?(OVERRIDE_KEY)
+            end
+        end
+
+        def non_override_attrs
+            user_attrs.reject do |key, value|
+                key.to_s.include?(OVERRIDE_KEY)
+            end
+        end
+
+        def flatten_hash(hash, parent_key = '', result_hash = {})
+            hash.each do |key, value|
+                new_key = parent_key.empty? ? key : "#{parent_key}_#{key}".to_sym
+                if value.is_a? Hash
+                flatten_hash(value, new_key, result_hash)
+                else
+                result_hash[new_key] = value
+                end
+            end
+            result_hash
+        end
+
+        def merge_hashes(hash1, hash2)
+            flat_hash1 = flatten_hash(hash1)
+            flat_hash2 = flatten_hash(hash2)
+
+            merged = flat_hash1.merge(flat_hash2) do |key, oldval, newval|
+                "#{oldval} #{newval}"
+            end
+
+            merged
+        end
+    end
+end

data/lib/phlex_ui/avatar/fallback.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Avatar::Fallback < Base
+        def template(&)
+            span(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "flex h-full w-full items-center justify-center rounded-full bg-muted-background"
+            }
+        end
+    end
+end

data/lib/phlex_ui/avatar/image.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Avatar::Image < Base
+        def initialize(src:, alt: '', **attrs)
+            @src = src
+            @alt = alt
+            super(**attrs)
+        end
+
+        def template
+            img(**attrs)
+        end
+
+        private
+
+        def default_attrs
+            {
+                loading: "lazy",
+                class: "aspect-square h-full w-full",
+                alt: @alt,
+                src: @src
+            }
+        end
+    end
+end

data/lib/phlex_ui/avatar.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Avatar < Base
+        SIZES = {
+            xs: "h-4 w-4 text-[0.5rem]",
+            sm: "h-6 w-6 text-xs",
+            md: "h-10 w-10 text-base",
+            lg: "h-14 w-14 text-xl",
+            xl: "h-20 w-20 text-3xl"
+        }
+
+        def initialize(size: :md, src: nil, alt: nil, initials: nil, **attrs)
+            @size = size
+            @src = src
+            @alt = alt
+            @initials = initials
+            @size_classes = SIZES[@size]
+            super(**attrs)
+        end
+
+        def template(&block)
+            if block_given?
+                span(**attrs, &block)
+            else
+                span(**attrs) do
+                    render_image if @src
+                    render_initials
+                end
+            end
+        end
+
+        private
+
+        def render_image
+            render ::PhlexUI::Avatar::Image.new(src: @src, alt: @alt)
+        end
+
+        def render_initials
+            render ::PhlexUI::Avatar::Fallback.new { @initials }
+        end
+
+        def default_attrs
+            {
+                class: tokens("relative flex shrink-0 overflow-hidden rounded-full", @size_classes)
+            }
+        end
+    end
+end