phlex_ui 0.1.6 → 0.1.7

data/lib/phlex_ui/command/dialog_content.rb

@@ -1,49 +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
+  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
+    def template(&block)
+      template_tag(data: {dialog_target: "content"}) do
+        div(data: {controller: "dismissable"}) do
+          backdrop
+          div(**attrs, &block)
         end
+      end
+    end
 
-        private
+    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 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
+    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
+end

data/lib/phlex_ui/command/dialog_trigger.rb

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

data/lib/phlex_ui/command/empty.rb

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

data/lib/phlex_ui/command/group.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Command::Group < Base
-        def initialize(title: nil, **attrs)
-            @title = title
-            super(**attrs)
-        end
+  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
+    def template(&block)
+      div(**attrs) do
+        render_header if @title
+        render_items(&block)
+      end
+    end
 
-        private
+    private
 
-        def render_header
-            div(group_heading: @title) do
-                @title
-            end
-        end
+    def render_header
+      div(group_heading: @title) do
+        @title
+      end
+    end
 
-        def render_items(&block)
-            div(group_items: "", role: "group", &block)
-        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
+    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
+end

data/lib/phlex_ui/command/input.rb

@@ -1,56 +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
+  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
+    def template
+      input_container do
+        search_icon
+        input(**attrs)
+      end
+    end
 
-        private
+    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 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 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
+    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
+end

data/lib/phlex_ui/command/item.rb

@@ -1,31 +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
+  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
+    def template(&block)
+      a(**attrs, &block)
+    end
 
-        private
+    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
+    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
+end

data/lib/phlex_ui/command/list.rb

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

data/lib/phlex_ui/command.rb

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

data/lib/phlex_ui/pagination/content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Pagination::Content < Base
+    def template(&block)
+      ul(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-row items-center gap-1"
+      }
+    end
+  end
+end

data/lib/phlex_ui/pagination/ellipsis.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Pagination::Ellipsis < Base
+    def template(&block)
+      li do
+        span(**attrs) do
+          icon
+          span(class: "sr-only") { "More pages" }
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "h-4 w-4"
+      ) do |s|
+        s.circle(cx: "12", cy: "12", r: "1")
+        s.circle(cx: "19", cy: "12", r: "1")
+        s.circle(cx: "5", cy: "12", r: "1")
+      end
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "flex h-9 w-9 items-center justify-center"
+      }
+    end
+  end
+end

data/lib/phlex_ui/pagination/item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Pagination::Item < Base
+    def initialize(href: "#", active: false, **attrs)
+      @href = href
+      @active = active
+      super(**attrs)
+    end
+
+    def template(&block)
+      li do
+        a(href: @href, **attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {current: @active ? "page" : nil},
+        class: tokens(
+          PhlexUI::Button.new(variant: @active ? :outline : :ghost).attrs[:class]
+        )
+      }
+    end
+  end
+end

data/lib/phlex_ui/pagination.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Pagination < Base
+    def template(&block)
+      nav(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {label: "pagination"},
+        class: "mx-auto flex w-full justify-center",
+        role: "navigation"
+      }
+    end
+  end
+end