phlex_ui 0.0.5 → 0.1.6

data/lib/phlex_ui/command/dialog_content.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::DialogContent < 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(&block)
+            template_tag(data: { dialog_target: "content" }) do
+                div(data: { controller: 'dismissable' }) do
+                    backdrop
+                    div(**attrs, &block)
+                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 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 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/command/dialog_trigger.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::DialogTrigger < Base
+        DEFAULT_KEYBINDINGS = [
+            "keydown.ctrl+k@window",
+            "keydown.meta+k@window"
+        ].freeze
+
+        def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
+            @keybindings = keybindings.map { |kb| "#{kb}->dialog#open" }
+            super(**attrs)
+        end
+
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    action: tokens("click->dialog#open", @keybindings.join(' '))
+                },
+            }
+        end
+    end
+end

data/lib/phlex_ui/command/empty.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::Empty < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "py-6 text-center text-sm",
+                role: "presentation",
+                data: { command_target: "empty" },
+            }
+        end
+    end
+end

data/lib/phlex_ui/command/group.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::Group < Base
+        def initialize(title: nil, **attrs)
+            @title = title
+            super(**attrs)
+        end
+
+        def template(&block)
+            div(**attrs) do
+                render_header if @title
+                render_items(&block)
+            end
+        end
+
+        private
+
+        def render_header
+            div(group_heading: @title) do
+                @title
+            end
+        end
+
+        def render_items(&block)
+            div(group_items: "", role: "group", &block)
+        end
+
+        def default_attrs
+            {
+                class:
+                    "overflow-hidden p-1 text-foreground [&_[group-heading]]:px-2 [&_[group-heading]]:py-1.5 [&_[group-heading]]:text-xs [&_[group-heading]]:font-medium [&_[group-heading]]:text-muted-foreground",
+                role: "presentation",
+                data: {
+                    value: @title,
+                    command_target: "group",
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/command/input.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::Input < Base
+        def initialize(placeholder: "Type a command or search...", **attrs)
+            @placeholder = placeholder
+            super(**attrs)
+        end
+
+        def template
+            input_container do
+                search_icon
+                input(**attrs)
+            end
+        end
+
+        private
+
+        def search_icon
+            svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            viewbox: "0 0 20 20",
+            fill: "currentColor",
+            class: "w-4 h-4 mr-1.5"
+            ) do |s|
+            s.path(
+                fill_rule: "evenodd",
+                d:
+                "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
+                clip_rule: "evenodd"
+            )
+            end
+        end
+
+        def input_container(&block)
+            div(class: "flex items-center border-b px-3", &block)
+        end
+
+        def default_attrs
+            {
+                class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                placeholder: @placeholder,
+                data_action: "input->command#filter keydown.down->command#handleKeydown keydown.up->command#handleKeydown keydown.enter->command#handleKeydown keydown.esc->dismissable#dismiss",
+                data_command_target: "input",
+                autocomplete: "off",
+                autocorrect: "off",
+                spellcheck: false,
+                autofocus: true,
+                aria_autocomplete: "list",
+                role: "combobox",
+                aria_expanded: true,
+                value: ""
+            }
+        end
+    end
+end

data/lib/phlex_ui/command/item.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::Item < Base
+        def initialize(value:, text: "", href: "#", **attrs)
+            @value = value
+            @text = text
+            @href = href
+            super(**attrs)
+        end
+
+        def template(&block)
+            a(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                href: @href,
+                role: "option",
+                data: {
+                    command_target: "item",
+                    value: @value, text: @text
+                },
+                # aria_selected: "true", # Toggles aria-selected="true" on keydown
+            }
+        end
+    end
+end

data/lib/phlex_ui/command/list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command::List < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "divide-y divide-border",
+            }
+        end
+    end
+end

data/lib/phlex_ui/command.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Command < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { controller: "command" }
+            }
+        end
+    end
+end

data/lib/phlex_ui/context_menu/content.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class ContextMenu::Content < Base
-        def template(&)
-            template_tag(data: { popover_target: "content" }) do
-                div(**attrs, &)
-            end
-        end
+  class ContextMenu::Content < Base
+    def template(&block)
+      template_tag(data: {popover_target: "content"}) do
+        div(**attrs, &block)
+      end
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                role: "menu",
-                aria_orientation: "vertical",
-                data_state: "open",
-                class:
-                    "z-50 min-w-[8rem] outline-none pointer-events-auto 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",
-                tabindex: "-1",
-                data_orientation: "vertical",
-            }
-        end
+    def default_attrs
+      {
+        role: "menu",
+        aria_orientation: "vertical",
+        data_state: "open",
+        class:
+              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground 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",
+        tabindex: "-1",
+        data_orientation: "vertical"
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/context_menu/item.rb

@@ -1,66 +1,66 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class ContextMenu::Item < Base
-        def initialize(href: "#", checked: false, shortcut: nil, disabled: false, **attrs)
-            @href = href
-            @checked = checked
-            @shortcut = shortcut
-            @disabled = disabled
+  class ContextMenu::Item < Base
+    def initialize(href: "#", checked: false, shortcut: nil, disabled: false, **attrs)
+      @href = href
+      @checked = checked
+      @shortcut = shortcut
+      @disabled = disabled
 
-            super(**attrs)
-        end
+      super(**attrs)
+    end
 
-        def template(&)
-            a(**attrs) do
-                render_checkmark if @checked
-                yield
-                render_shortcut if @shortcut
-            end
-        end
+    def template(&block)
+      a(**attrs) do
+        render_checkmark if @checked
+        yield
+        render_shortcut if @shortcut
+      end
+    end
 
-        private
+    private
 
-        def render_checkmark
-            span(class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center") do
-                span(data_state: "checked") 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.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-                        fill: "currentColor",
-                        fill_rule: "evenodd",
-                        clip_rule: "evenodd"
-                        )
-                    end
-                end
-            end
+    def render_checkmark
+      span(class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center") do
+        span(data_state: "checked") 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.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+              fill: "currentColor",
+              fill_rule: "evenodd",
+              clip_rule: "evenodd"
+            )
+          end
         end
+      end
+    end
 
-        def render_shortcut
-            span(class: "ml-auto text-xs tracking-widest text-muted-text") { @shortcut }
-        end
+    def render_shortcut
+      span(class: "ml-auto text-xs tracking-widest text-muted-foreground") { @shortcut }
+    end
 
-        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 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 pl-8",
-                tabindex: "-1",
-                data_orientation: "vertical",
-                data_action: "click->popover#close",
-                data_popover_target: "menuItem",
-                data_disabled: @disabled,
-                disabled: @disabled
-            }
-        end
+    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 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8",
+        tabindex: "-1",
+        data_orientation: "vertical",
+        data_action: "click->popover#close",
+        data_popover_target: "menuItem",
+        data_disabled: @disabled,
+        disabled: @disabled
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/context_menu/label.rb

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

data/lib/phlex_ui/context_menu/separator.rb

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

data/lib/phlex_ui/context_menu/trigger.rb

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

data/lib/phlex_ui/context_menu.rb

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