phlex_ui 0.0.4 → 0.0.5

data/lib/phlex_ui/link.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Link < Base
+        def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
+            @href = href
+            @variant = variant.to_sym
+            @size = size.to_sym
+            @icon = icon
+            super(**attrs)
+        end
+
+        def template(&)
+            a(href: @href, **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 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/popover/content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Popover::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-2 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/popover/trigger.rb

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

data/lib/phlex_ui/popover.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Popover < Base
+        def initialize(options: {}, **attrs)
+            @options = options
+            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/shortcut_key.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class ShortcutKey < Base
+        def template(&)
+            kbd(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted-background px-1.5 font-mono text-[10px] font-medium text-muted-text opacity-100"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table/body.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Body < Base
+        def template(&)
+            tbody(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "[&_tr:last-child]:border-0"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table/builder.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Builder < Base
+        include Phlex::DeferredRender
+
+        Column = Struct.new(:header, :header_attrs, :footer, :footer_attrs, :block, keyword_init: true)
+
+        def initialize(records = [], caption: nil, **attrs)
+            @records = records
+            @columns = []
+            @caption = caption
+            super(**attrs)
+        end
+
+        def template(&block)
+            render PhlexUI::Table.new(**attrs) do
+                header
+                body
+                caption if @caption
+                footer if @columns.any?(&:footer)
+            end
+        end
+
+        def column(header, footer = nil, header_attrs: {}, footer_attrs: {}, &block)
+            @columns << Column.new(
+                header: header,
+                header_attrs: header_attrs,
+                footer: footer,
+                footer_attrs: footer_attrs,
+                block: block
+            )
+        end
+
+        def header
+            render PhlexUI::Table::Header.new do
+                render PhlexUI::Table::Row.new do
+                    @columns.each do |column|
+                        render PhlexUI::Table::Head.new(**column.header_attrs) do
+                            column.header
+                        end
+                    end
+                end
+            end
+        end
+
+        def body
+            render PhlexUI::Table::Body.new do
+                @records.each do |record|
+                    render PhlexUI::Table::Row.new do
+                        @columns.each do |column|
+                            render PhlexUI::Table::Cell.new do
+                                column.block.call(record)
+                            end
+                        end
+                    end
+                end
+            end
+        end
+
+        def footer
+            render PhlexUI::Table::Footer.new do
+                render PhlexUI::Table::Row.new do
+                    @columns.each do |column|
+                        render PhlexUI::Table::Head.new(**column.footer_attrs) do
+                            column.footer
+                        end
+                    end
+                end
+            end
+        end
+
+        def caption
+            render PhlexUI::Table::Caption.new { @caption }
+        end
+    end
+end

data/lib/phlex_ui/table/caption.rb

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

data/lib/phlex_ui/table/cell.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Cell < Base
+        def template(&)
+            td(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table/footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Footer < Base
+        def template(&)
+            tfoot(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "border-t bg-muted-background bg-opacity-50 font-medium[& amp;>tr]:last:border-b-0"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table/head.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Head < Base
+        def template(&)
+            th(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "h-10 px-2 text-left align-middle font-medium text-muted-text [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table/header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Header < Base
+        def template(&)
+            thead(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "[&_tr]:border-b"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table/row.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table::Row < Base
+        def template(&)
+            tr(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "border-b transition-colors hover:bg-muted-background hover:bg-opacity-50 data-[state=selected]:bg-muted-background"
+            }
+        end
+    end
+end

data/lib/phlex_ui/table.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Table < Base
+        def template(&)
+            div(class: "relative w-full overflow-auto") do
+                table(**attrs, &)
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "w-full caption-bottom text-sm"
+            }
+        end
+    end
+end

data/lib/phlex_ui/tabs/content.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Tabs::Content < Base
+        def initialize(value:, **attrs)
+            @value = value
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    tabs_target: :content,
+                    value: @value
+                },
+                class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden",
+            }
+        end
+    end
+end

data/lib/phlex_ui/tabs/list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Tabs::List < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "inline-flex h-9 items-center justify-center rounded-lg bg-muted-background p-1 text-muted-text"
+            }
+        end
+    end
+end

data/lib/phlex_ui/tabs/trigger.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Tabs::Trigger < Base
+        def initialize(value:, **attrs)
+            @value = value
+            super(**attrs)
+        end
+
+        def template(&)
+            button(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                type: :button,
+                data: {
+                    tabs_target: :trigger,
+                    action: "click->tabs#show",
+                    value: @value
+                },
+                class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-text data-[state=active]:shadow"
+            }
+        end
+    end
+end

data/lib/phlex_ui/tabs.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Tabs < Base
+        def initialize(default: nil, **attrs)
+            @default = default
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    controller: 'tabs',
+                    tabs_default_value_value: @default
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/theme_toggle.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class ThemeToggle < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        def light_mode(**user_attrs, &)
+            light_attrs = PhlexUI::AttributeMerger.new(default_light_attrs, user_attrs).call
+            div(**light_attrs, &)
+        end
+
+        def dark_mode(**user_attrs, &)
+            dark_attrs = PhlexUI::AttributeMerger.new(default_dark_attrs, user_attrs).call
+            div(**dark_attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { controller: 'toggle-theme' }
+            }
+        end
+
+        def default_light_attrs
+            {
+                class: 'dark:hidden',
+                data: { action: 'click->toggle-theme#setDarkTheme' }
+            }
+        end
+
+        def default_dark_attrs
+            {
+                class: 'hidden dark:inline-block',
+                data: { action: 'click->toggle-theme#setLightTheme' }
+            }
+        end
+    end
+end

data/lib/phlex_ui/tooltip/content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Tooltip::Content < Base
+        def template(&)
+            template_tag(data: { popover_target: "content" }) do
+                div(**attrs, &)
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    state: :open # used for animate-in and animate-out on tooltip
+                },
+                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/tooltip/trigger.rb

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

data/lib/phlex_ui/tooltip.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Tooltip < Base
+        def initialize(options: {}, **attrs)
+            @options = options
+            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/typography/blockquote.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Typography::Blockquote < Base
+        def template(&)
+            blockquote(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "mt-6 border-l-2 pl-6 italic"
+            }
+        end
+    end
+end

data/lib/phlex_ui/typography/h1.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Typography::H1 < Base
+        def template(&)
+            h1(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "scroll-m-20 text-3xl font-semibold leading-normal lg:leading-normal tracking-tight lg:text-4xl"
+            }
+        end
+    end
+end

data/lib/phlex_ui/typography/h2.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Typography::H2 < Base
+        def template(&)
+            h2(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+            }
+        end
+    end
+end