phlex_ui 0.0.4 → 0.0.5

data/lib/phlex_ui/context_menu/label.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class ContextMenu::Label < Base
+        def initialize(inset: false, **attrs)
+            @inset = inset
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def inset? = @inset
+
+        def default_attrs
+            {
+                class: tokens("px-2 py-1.5 text-sm font-semibold text-text", inset?: "pl-8")
+            }
+        end
+    end
+end

data/lib/phlex_ui/context_menu/separator.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class ContextMenu::Separator < Base
+        def template
+            div(**attrs)
+        end
+
+        private
+
+        def default_attrs
+            {
+                role: "separator",
+                aria_orientation: "horizontal",
+                class: "-mx-1 my-1 h-px bg-border"
+            }
+        end
+    end
+end

data/lib/phlex_ui/context_menu/trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class ContextMenu::Trigger < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { 
+                    popover_target: 'trigger', 
+                    action: 'contextmenu->popover#handleContextMenu' 
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/context_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class ContextMenu < Base
+        def initialize(options: {}, **attrs)
+            @options = options
+            @options[:trigger] ||= "manual"
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { 
+                    controller: "popover",
+                    popover_options_value: @options.to_json
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/dialog/content.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Dialog::Content < Base
+        SIZES = {
+            xs: "max-w-sm",
+            sm: "max-w-md",
+            md: "max-w-lg",
+            lg: "max-w-2xl",
+            xl: "max-w-4xl",
+            full: "max-w-full",
+        }
+        
+        def initialize(size: :md, **attrs)
+            @size = size
+            super(**attrs)
+        end
+
+        def template
+            template_tag(data: { dialog_target: "content" }) do
+                div(data: { controller: 'dismissable' }) do
+                    backdrop
+                    div(**attrs) do
+                        yield
+                        close_button
+                    end
+                end
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                data_state: "open",
+                class: tokens(
+                    "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full 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",
+                    SIZES[@size]
+                ),
+            }
+        end
+
+        def close_button
+            button(
+                type: "button",
+                class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent-background data-[state=open]:text-muted-text",
+                data_action: "click->dismissable#dismiss"
+            ) do
+                svg(
+                    width: "15",
+                    height: "15",
+                    viewbox: "0 0 15 15",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: "h-4 w-4"
+                ) do |s|
+                    s.path(
+                    d:
+                        "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+                    fill: "currentColor",
+                    fill_rule: "evenodd",
+                    clip_rule: "evenodd"
+                    )
+                end
+                span(class: "sr-only") { "Close" }
+            end
+        end
+
+        def backdrop
+            div(
+                data_state: "open",
+                data_action: "click->dismissable#dismiss esc->dismissable#dismiss",
+                class:
+                    "fixed pointer-events-auto 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",
+            )
+        end
+    end
+end

data/lib/phlex_ui/dialog/description.rb

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

data/lib/phlex_ui/dialog/footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Dialog::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 gap-y-2 sm:gap-y-0"
+            }
+        end
+    end
+end

data/lib/phlex_ui/dialog/header.rb

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

data/lib/phlex_ui/dialog/middle.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Dialog::Middle < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "py-4"
+            }
+        end
+    end
+end

data/lib/phlex_ui/dialog/title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Dialog::Title < Base
+        def template(&)
+            h3(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-lg font-semibold leading-none tracking-tight"
+            }
+        end
+    end
+end

data/lib/phlex_ui/dialog/trigger.rb

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

data/lib/phlex_ui/dialog.rb

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

data/lib/phlex_ui/dropdown_menu/content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class DropdownMenu::Content < Base
+        def template(&)
+            template_tag(data: { popover_target: "content" }) do
+                div(**attrs, &)
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                 data: { 
+                    state: :open 
+                }, 
+                 class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-text shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
+            }
+        end
+    end
+end

data/lib/phlex_ui/dropdown_menu/item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class DropdownMenu::Item < Base
+        def initialize(href: "#", **attrs)
+            @href = href
+            super(**attrs)
+        end
+
+        def template(&)
+            a(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                href: @href,
+                role: "menuitem",
+                class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent-background hover:text-accent-text focus:bg-accent-background focus:text-accent-text aria-selected:bg-accent-background aria-selected:text-accent-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                data_action: "click->popover#close",
+                data_popover_target: "menuItem",
+                tabindex: "-1",
+                data_orientation: "vertical",
+            }
+        end
+    end
+end

data/lib/phlex_ui/dropdown_menu/label.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class DropdownMenu::Label < Base
+        def template(&)
+            h3(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "px-2 py-1.5 text-sm font-semibold"
+            }
+        end
+    end
+end

data/lib/phlex_ui/dropdown_menu/separator.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class DropdownMenu::Separator < Base
+        def template
+            div(**attrs)
+        end
+
+        private
+
+        def default_attrs
+            {
+                role: "separator",
+                aria_orientation: "horizontal",
+                class: "-mx-1 my-1 h-px bg-muted-background"
+            }
+        end
+    end
+end

data/lib/phlex_ui/dropdown_menu/trigger.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class DropdownMenu::Trigger < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { popover_target: 'trigger' }
+            }
+        end
+    end
+end

data/lib/phlex_ui/dropdown_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class DropdownMenu < Base
+        def initialize(options: {}, **attrs)
+            @options = options
+            @options[:trigger] ||= "click"
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { 
+                    controller: "popover", 
+                    popover_options_value: @options.to_json 
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/form/item.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Form::Item < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "space-y-2"
+            }
+        end
+    end
+end

data/lib/phlex_ui/form/spacer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Form::Spacer < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "space-y-4"
+            }
+        end
+    end
+end

data/lib/phlex_ui/form.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Form < Base
+        def template(&)
+            form(**attrs, &)
+        end
+
+        def input(name, label: nil, hint: false, error: nil, **input_attrs)
+            name = name.to_s
+            label ||= convert_name_to_label(name)
+
+            render PhlexUI::Form::Item.new do
+                render PhlexUI::Label.new(for: name) { label } if label
+                render PhlexUI::Input.new(name: name, id: name, **input_attrs)
+                render PhlexUI::Hint.new { hint } if hint
+            end
+        end
+
+        def button(**button_attrs, &)
+            render PhlexUI::Button.new(**button_attrs, &)
+        end
+
+        private
+
+        def convert_name_to_label(name)
+            name.to_s.split("_").map(&:capitalize).join(" ")
+        end
+
+        def default_attrs
+            {}
+        end
+    end
+end

data/lib/phlex_ui/hint.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Hint < Base
+        def template(&)
+            p(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-[0.8rem] text-muted-text"
+            }
+        end
+    end
+end

data/lib/phlex_ui/hover_card/content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class HoverCard::Content < Base
+        def template(&)
+            template_tag(data: { popover_target: "content" }) do
+                div(**attrs, &)
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    state: :open
+                },
+                class: "z-50 rounded-md border bg-background p-4 text-text shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            }
+        end
+    end
+end

data/lib/phlex_ui/hover_card/trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class HoverCard::Trigger < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    popover_target: 'trigger'
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/hover_card.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class HoverCard < Base
+        def initialize(option: {}, **attrs)
+            @options = option
+            @options[:delay] ||= [500, 250]
+            @options[:trigger] ||= 'mouseenter focus click'
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    controller: "popover",
+                    popover_options_value: @options.to_json
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/input.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Input < Base
+        def initialize(type: :string, error: nil, **attrs)
+            @type = type.to_sym
+            @error = error
+            super(**attrs)
+        end
+
+        def template
+            input(type: @type, **attrs)
+            render PhlexUI::InputError.new { @error } if @error
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: tokens(
+                    "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+                    -> { @error.nil? } => "border-border focus-visible:ring-ring placeholder:text-muted-text",
+                    -> { @error.present? } => "placeholder:text-destructive-900/50 dark:placeholder:text-destructive-200/50 text-destructive-900 dark:text-destructive-300 border-destructive-300 dark:border-destructive focus-visible:ring-destructive dark:focus-visible:ring-destructive-300",
+                    -> { @type == :file } => "pt-1.5 dark:file:text-white"
+                ),
+            }
+        end
+    end
+end

data/lib/phlex_ui/input_error.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class InputError < Base
+        def template(&)
+            p(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "mt-2 text-sm text-destructive"
+            }
+        end
+    end
+end

data/lib/phlex_ui/label.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Label < Base
+        def template(&)
+            label(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            }
+        end
+    end
+end