phlex_ui 0.0.4 → 0.0.5

data/lib/phlex_ui/button.rb

@@ -1,73 +1,96 @@
+# frozen_string_literal: true
+
 module PhlexUI
     class Button < Base
-        def initialize(**kwargs)
-            @variant = kwargs[:variant]&.to_sym || :primary
-            @size = kwargs[:size]
-            @kwargs = kwargs
-            @kwargs[:type] ||= "button"
+        def initialize(variant: :primary, size: :md, icon: false, **attrs)
+            @variant = variant.to_sym
+            @size = size.to_sym
+            @icon = icon
+            super(**attrs)
         end
 
         def template(&)
+            button(**attrs, &)
+        end
+
+        private
+
+        def size_classes
+            if @icon
+                case @size
+                when :sm then "h-6 w-6"
+                when :md then "h-9 w-9"
+                when :lg then "h-10 w-10"
+                when :xl then "h-12 w-12"
+                end
+            else
+                case @size
+                when :sm then "px-3 py-1.5 h-8 text-xs"
+                when :md then "px-4 py-2 h-9 text-sm"
+                when :lg then "px-4 py-2 h-10 text-base"
+                when :xl then "px-6 py-3 h-12 text-base"
+                end
+            end
+        end
+
+        def primary_classes
+            tokens(
+                "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-text shadow hover:bg-primary/90",
+                size_classes
+            )
+        end
+
+        def link_classes
+            tokens(
+                "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
+                size_classes
+            )
+        end
+
+        def secondary_classes
+            tokens(
+                "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-muted-background text-text shadow-sm hover:bg-opacity-80",
+                size_classes
+            )
+        end
+
+        def destructive_classes
+            tokens(
+                "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-white shadow-sm hover:bg-destructive/90",
+                size_classes
+            )
+        end
+
+        def outline_classes
+            tokens(
+                "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent-background hover:text-accent-text",
+                size_classes
+            )
+        end
+
+        def ghost_classes
+            tokens(
+                "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent-background hover:text-accent-text",
+                size_classes
+            )
+        end
+
+        def default_classes
             case @variant
-            when :primary
-                button(
-                    **@kwargs, 
-                    class: tokens(
-                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary-600 dark:bg-primary-500 text-white shadow hover:bg-primary-700 dark:hover:bg-primary-600 h-9",
-                        -> { @size == :icon } => "h-9 w-9 justify-center",
-                        -> { @size.nil? } => "px-4 py-2",
-                        -> { @kwargs[:class] } => @kwargs[:class]
-                    ), 
-                    &)
-            when :link
-                button(
-                    **@kwargs, 
-                    class: tokens(
-                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-600 dark:text-primary-400 underline-offset-4 hover:underline h-9 px-4 py-2",
-                        -> { @kwargs[:class] } => @kwargs[:class]
-                    ),
-                    &)
-            when :secondary
-                button(
-                    **@kwargs,
-                    class: tokens(
-                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary-100 dark:bg-accent text-primary-600 dark:text-white shadow-sm hover:bg-primary-200 hover:text-primary-700 dark:hover:bg-opacity-10 h-9",
-                        -> { @size == :icon } => "h-9 w-9 justify-center",
-                        -> { @size.nil? } => "px-4 py-2",
-                        -> { @kwargs[:class] } => @kwargs[:class]
-                    ),
-                    &)
-            when :destructive
-                button(
-                    **@kwargs,
-                    class: tokens(
-                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive-600 hover:bg-destructive-700 dark:bg-destructive-500 dark:hover:bg-destructive-600 text-white shadow-sm h-9",
-                        -> { @size == :icon } => "h-9 w-9 justify-center",
-                        -> { @size.nil? } => "px-4 py-2",
-                        -> { @kwargs[:class] } => @kwargs[:class]
-                    ),
-                    &)
-            when :outline
-                button(
-                    **@kwargs,
-                    class: tokens(
-                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border bg-transparent shadow-sm hover:bg-accent h-9",
-                        -> { @size == :icon } => "h-9 w-9 justify-center",
-                        -> { @size.nil? } => "px-4 py-2",
-                        -> { @kwargs[:class] } => @kwargs[:class]
-                    ),
-                    &)
-            when :ghost
-                button(
-                    **@kwargs,
-                    class: tokens(
-                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent h-9",
-                        -> { @size == :icon } => "h-9 w-9 justify-center",
-                        -> { @size.nil? } => "px-4 py-2",
-                        -> { @kwargs[:class] } => @kwargs[:class]
-                    ),
-                    &)
+            when :primary then primary_classes
+            when :link then link_classes
+            when :secondary then secondary_classes
+            when :destructive then destructive_classes
+            when :outline then outline_classes
+            when :ghost then ghost_classes
             end
         end
+
+        def default_attrs
+            {
+                type: "button",
+                class: default_classes,
+            }
+        end
     end
 end

data/lib/phlex_ui/card/content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Card::Content < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "p-6 pt-0"
+            }
+        end
+    end
+end

data/lib/phlex_ui/card/description.rb

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

data/lib/phlex_ui/card/footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Card::Footer < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "items-center p-6 pt-0"
+            }
+        end
+    end
+end

data/lib/phlex_ui/card/header.rb

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

data/lib/phlex_ui/card/title.rb

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

data/lib/phlex_ui/card.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Card < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "rounded-xl border bg-background shadow"
+            }
+        end
+    end
+end

data/lib/phlex_ui/checkbox.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Checkbox < Base
+        def template
+            input(**attrs)
+        end
+
+        private
+
+        def default_attrs
+            {
+                type: "checkbox",
+                class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
+            }
+        end
+    end
+end

data/lib/phlex_ui/clipboard/popover.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Clipboard::Popover < Base
+        def initialize(type:, **attrs)
+            @type = type
+            super(**attrs)
+        end
+
+        def template(&)
+            template_tag(data: { clipboard_target: clipboard_target }) do
+                div(**attrs, &)
+            end
+        end
+
+        private
+
+        def clipboard_target
+            case @type
+            when :success
+                "successPopover"
+            when :error
+                "errorPopover"
+            end
+        end
+
+        def default_attrs
+            {
+                data: { 
+                    state: :open 
+                },
+                class: "z-50 rounded-md text-sm border bg-background px-2 py-0.5 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/clipboard/source.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Clipboard::Source < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    clipboard_target: "source",
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/clipboard/trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Clipboard::Trigger < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    clipboard_target: "trigger",
+                    action: "click->clipboard#copy",
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/clipboard.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Clipboard < Base
+        def initialize(success: "Copied!", error: "Copy Failed!", **attrs)
+            @success = success
+            @error = error
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs) do
+                div(&)
+                success_popover
+                error_popover
+            end
+        end
+
+        private
+
+        def success_popover
+            render Clipboard::Popover.new(type: :success) { @success }
+        end
+
+        def error_popover
+            render Clipboard::Popover.new(type: :error) { @error }
+        end
+
+        def default_attrs
+            {
+                data: {
+                    controller: "clipboard",
+                    clipboard_success_value: @success,
+                    clipboard_error_value: @error,
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/codeblock.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+require "rouge"
+
+module PhlexUI
+    class Codeblock < Base
+        FORMATTER = ::Rouge::Formatters::HTML.new
+        ROUGE_CSS = Rouge::Themes::Github.mode(:dark).render(scope: '.highlight') # See themes here: https://rouge-ruby.github.io/docs/Rouge/CSSTheme.html
+
+        def initialize(code, syntax:, clipboard: true, clipboard_success: "Copied!", clipboard_error: "Copy failed!", **attrs)
+            @code = code
+			@syntax = syntax.to_sym
+            @clipboard = clipboard
+            @clipboard_success = clipboard_success
+            @clipboard_error = clipboard_error
+
+			if @syntax == :ruby || @syntax == :html
+				@code = @code.gsub(/(?:^|\G) {2}/m, "	")
+			end
+
+            super(**attrs)
+        end
+
+        def template
+            style { ROUGE_CSS.html_safe } # For faster load times, move this to the head of your document. (Also move ROUGE_CSS value to head of document)
+            if @clipboard
+                with_clipboard
+            else
+                codeblock
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"
+            }
+        end
+
+        def with_clipboard
+            render PhlexUI::Clipboard.new(success: @clipboard_success, error: @clipboard_error, class: 'relative') do
+                render PhlexUI::Clipboard::Source.new do
+                    codeblock
+                end
+                div(class: "absolute top-2 right-2") do
+                    render PhlexUI::Clipboard::Trigger.new do
+                        render PhlexUI::Button.new(variant: :ghost, size: :sm, icon: true, class: 'text-white hover:text-white hover:bg-white/20') { clipboard_icon }
+                    end
+                end
+            end
+        end
+
+        def codeblock
+            div(**attrs) do
+                div(class: "after:content-none") do
+                    pre do
+                        unsafe_raw FORMATTER.format(
+                            lexer.lex(@code)
+                        )
+                    end
+                end
+            end
+        end
+
+		def lexer
+			Rouge::Lexer.find(@syntax)
+		end
+
+        def clipboard_icon
+            svg(
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewbox: "0 0 24 24",
+                stroke_width: "1.5",
+                stroke: "currentColor",
+                class: "w-4 h-4"
+            ) do |s|
+                s.path(
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    d:
+                    "M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"
+                )
+            end
+        end
+
+        def check_icon
+            svg(
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewbox: "0 0 24 24",
+                stroke_width: "1.5",
+                stroke: "currentColor",
+                class: "w-4 h-4"
+            ) do |s|
+                s.path(
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                )
+            end
+        end
+    end
+end

data/lib/phlex_ui/collapsible/content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Collapsible::Content < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { collapsible_target: "content" },
+                class: 'overflow-y-hidden'
+            }
+        end
+    end
+end

data/lib/phlex_ui/collapsible/trigger.rb

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

data/lib/phlex_ui/collapsible.rb

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

data/lib/phlex_ui/context_menu/content.rb

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

data/lib/phlex_ui/context_menu/item.rb

@@ -0,0 +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
+
+            super(**attrs)
+        end
+
+        def template(&)
+            a(**attrs) do
+                render_checkmark if @checked
+                yield
+                render_shortcut if @shortcut
+            end
+        end
+
+        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
+        end
+
+        def render_shortcut
+            span(class: "ml-auto text-xs tracking-widest text-muted-text") { @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
+    end
+end