phlex_ui 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e94d694e97786f20a88cc28497e9fbda569229a4b60688745e1faef5bb6a794
-  data.tar.gz: 3c06ca211012a28ad741ec3d66db56c7ecde93e637d07b24e2da5f987c759eef
+  metadata.gz: 997466eeaf90ee785e93f2bbb17ddf3014db28e538cfd2b5bb1177800b7eff41
+  data.tar.gz: a876736cf42046f4eda6e974ca8d48a2ffceb29dc49679bf2a857815a2d14c4e
 SHA512:
-  metadata.gz: e45505146ef033bef4bc13725b1abc4dd450ca5f9b0a76981a109570044f50c68523dc4cd48aa69b0e9731e6ce5a7497788a08341012e2ea583ae9eab1fdae2e
-  data.tar.gz: 197a7019398397c7cff18c24c5e0a5822f183d98ef9ac6f7852f0ccb782f70653941ac3eda20eeb40015303d34b6291a171b9d1777ac68d8ce32a8e2774cff72
+  metadata.gz: ca6af73e57c9c22983f4eab367a894bbcdba53e8b16b707ec14accf80f1faa81994f45f2ea34ffb1867cc800875bce96c7d716043f418b1aa88aa1adfcc3049d
+  data.tar.gz: 6fb432282362714d0a1b048e476dc15d7ad38f60ef26c311eaeefe35fcca31b9b34b72224f61147b991fd832c148f1380fa556eb878abe5ecf27dd3a50c8ea46

data/lib/phlex_ui/alert/description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Alert::Description < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-sm [&_p]:leading-relaxed",
+            }
+        end
+    end
+end

data/lib/phlex_ui/alert/title.rb

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

data/lib/phlex_ui/alert.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Alert < Base
+        def initialize(variant: nil, **attrs)
+            @variant = variant
+            super(**attrs) # must be called after variant is set
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def colors
+            case @variant
+            when nil
+                'ring-border bg-muted-background text-text [&>svg]:opacity-80'
+            when :warning
+                'ring-warning/20 bg-warning/10 text-warning [&>svg]:text-warning/80'
+            when :success
+                'ring-success/20 bg-success/10 text-success [&>svg]:text-success/80'
+            when :destructive
+                'ring-destructive/10 dark:ring-destructive/20 text-destructive bg-destructive/10 [&>svg]:text-destructive/80'
+            end
+        end
+
+        def default_attrs
+            base_classes = 'relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8'
+            {
+                class: tokens(base_classes, colors),
+            }
+        end
+    end
+end

data/lib/phlex_ui/alert_dialog/action.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class AlertDialog::Action < Base
+        def template(&)
+            render PhlexUI::Button.new(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                variant: :primary,
+            }
+        end
+    end
+end

data/lib/phlex_ui/alert_dialog/cancel.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class AlertDialog::Cancel < Base
+        def template(&)
+            render PhlexUI::Button.new(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                variant: :outline,
+                data: { 
+                    action: 'click->dismissable#dismiss' 
+                }, 
+                class: 'mt-2 sm:mt-0'
+            }
+        end
+    end
+end

data/lib/phlex_ui/alert_dialog/content.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class AlertDialog::Content < Base
+        def template(&)
+            template_tag(**attrs) do
+                div(data: { controller: 'dismissable' }) do
+                    background
+                    container(&)
+                end
+            end
+        end
+
+        def background
+            div(
+                data_state: "open",
+                class:
+                    "fixed 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",
+                style: "pointer-events:auto",
+                data_aria_hidden: "true",
+                aria_hidden: "true"
+            )
+        end
+
+        def container(&)
+            div(
+                role: "alertdialog",
+                data_state: "open",
+                class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg 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",
+                style: "pointer-events:auto",
+                &
+            )
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { 
+                    alert_dialog_target: "content" 
+                }
+            }
+        end
+    end
+end

data/lib/phlex_ui/alert_dialog/description.rb

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

data/lib/phlex_ui/alert_dialog/footer.rb

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

data/lib/phlex_ui/alert_dialog/header.rb

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

data/lib/phlex_ui/alert_dialog/title.rb

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

data/lib/phlex_ui/alert_dialog/trigger.rb

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

data/lib/phlex_ui/alert_dialog.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class AlertDialog < Base
+        def initialize(open: false, **attrs)
+            @open = open
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: {
+                    controller: 'alert-dialog',
+                    alert_dialog_open_value: @open 
+                },
+                class: 'inline-block'
+            }
+        end
+    end
+end

data/lib/phlex_ui/aspect_ratio.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class AspectRatio < Base
+        def initialize(aspect_ratio: "16/9", **attrs)
+            raise "aspect_ratio must be in the format of a string with a slash in the middle (eg. '16/9', '1/1')" unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")
+
+            @aspect_ratio = aspect_ratio
+            super(**attrs)
+        end
+
+        def template(&)
+            div(
+                class: "relative w-full",
+                style: "padding-bottom: #{padding_bottom}%;",
+            ) do
+                div(**attrs, &)
+            end
+        end
+
+        private
+
+        def padding_bottom
+            @aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
+        end
+
+        def default_attrs
+            {
+                class: "bg-muted-background absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"
+            }
+        end
+    end
+end

data/lib/phlex_ui/avatar/fallback.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Avatar::Fallback < Base
+        def template(&)
+            span(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "flex h-full w-full items-center justify-center rounded-full bg-muted-background"
+            }
+        end
+    end
+end

data/lib/phlex_ui/avatar/image.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Avatar::Image < Base
+        def initialize(src:, alt: '', **attrs)
+            @src = src
+            @alt = alt
+            super(**attrs)
+        end
+
+        def template
+            img(**attrs)
+        end
+
+        private
+
+        def default_attrs
+            {
+                loading: "lazy",
+                class: "aspect-square h-full w-full",
+                alt: @alt,
+                src: @src
+            }
+        end
+    end
+end

data/lib/phlex_ui/avatar.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Avatar < Base
+        SIZES = {
+            xs: "h-4 w-4 text-[0.5rem]",
+            sm: "h-6 w-6 text-xs",
+            md: "h-10 w-10 text-base",
+            lg: "h-14 w-14 text-xl",
+            xl: "h-20 w-20 text-3xl"
+        }
+
+        def initialize(size: :md, src: nil, alt: nil, initials: nil, **attrs)
+            @size = size
+            @src = src
+            @alt = alt
+            @initials = initials
+            @size_classes = SIZES[@size]
+            super(**attrs)
+        end
+
+        def template(&block)
+            if block_given?
+                span(**attrs, &block)
+            else
+                span(**attrs) do
+                    render_image if @src
+                    render_initials
+                end
+            end
+        end
+
+        private
+
+        def render_image
+            render ::PhlexUI::Avatar::Image.new(src: @src, alt: @alt)
+        end
+
+        def render_initials
+            render ::PhlexUI::Avatar::Fallback.new { @initials }
+        end
+
+        def default_attrs
+            {
+                class: tokens("relative flex shrink-0 overflow-hidden rounded-full", @size_classes)
+            }
+        end
+    end
+end

data/lib/phlex_ui/badge.rb

@@ -2,75 +2,59 @@
 
 module PhlexUI
     class Badge < Base
-        def initialize(variant: :primary, size: :md, **kwargs)
+        SIZES = {
+            sm: "px-1.5 py-0.5 text-xs",
+            md: "px-2 py-1 text-xs",
+            lg: "px-3 py-1 text-sm"
+        }
+
+        COLORS = {
+            primary: "text-primary bg-primary-50 dark:bg-primary-400/20 ring-primary-600/20",
+            secondary: "text-text bg-muted-background ring-border",
+            outline: "text-text bg-background ring-border",
+            destructive: "text-destructive-600 bg-destructive-50 dark:bg-destructive-400/20 dark:text-destructive-400 ring-destructive-600/20",
+            success: "text-success-600 bg-success-50 dark:bg-success-400/20 dark:text-success-400 ring-success-600/20",
+            warning: "text-warning-600 bg-warning-50 dark:bg-warning-400/20 dark:text-warning-400 ring-warning-600/20",
+            slate: "text-slate-600 bg-slate-50 dark:bg-slate-400/20 dark:text-slate-400 ring-slate-600/20",
+            gray: "text-gray-600 bg-gray-50 dark:bg-gray-400/20 dark:text-gray-400 ring-gray-600/20",
+            zinc: "text-zinc-600 bg-zinc-50 dark:bg-zinc-400/20 dark:text-zinc-400 ring-zinc-600/20",
+            neutral: "text-neutral-600 bg-neutral-50 dark:bg-neutral-400/20 dark:text-neutral-400 ring-neutral-600/20",
+            stone: "text-stone-600 bg-stone-50 dark:bg-stone-400/20 dark:text-stone-400 ring-stone-600/20",
+            red: "text-red-600 bg-red-50 dark:bg-red-400/20 dark:text-red-400 ring-red-600/20",
+            orange: "text-orange-600 bg-orange-50 dark:bg-orange-400/20 dark:text-orange-400 ring-orange-600/20",
+            amber: "text-amber-600 bg-amber-50 dark:bg-amber-400/20 dark:text-amber-400 ring-amber-600/20",
+            yellow: "text-yellow-600 bg-yellow-50 dark:bg-yellow-400/20 dark:text-yellow-400 ring-yellow-600/20",
+            lime: "text-lime-600 bg-lime-50 dark:bg-lime-400/20 dark:text-lime-400 ring-lime-600/20",
+            green: "text-green-600 bg-green-50 dark:bg-green-400/20 dark:text-green-400 ring-green-600/20",
+            emerald: "text-emerald-600 bg-emerald-50 dark:bg-emerald-400/20 dark:text-emerald-400 ring-emerald-600/20",
+            teal: "text-teal-600 bg-teal-50 dark:bg-teal-400/20 dark:text-teal-400 ring-teal-600/20",
+            cyan: "text-cyan-600 bg-cyan-50 dark:bg-cyan-400/20 dark:text-cyan-400 ring-cyan-600/20",
+            sky: "text-sky-600 bg-sky-50 dark:bg-sky-400/20 dark:text-sky-400 ring-sky-600/20",
+            blue: "text-blue-600 bg-blue-50 dark:bg-blue-400/20 dark:text-blue-400 ring-blue-600/20",
+            indigo: "text-indigo-600 bg-indigo-50 dark:bg-indigo-400/20 dark:text-indigo-400 ring-indigo-600/20",
+            violet: "text-violet-600 bg-violet-50 dark:bg-violet-400/20 dark:text-violet-400 ring-violet-600/20",
+            purple: "text-purple-600 bg-purple-50 dark:bg-purple-400/20 dark:text-purple-400 ring-purple-600/20",
+            fuchsia: "text-fuchsia-600 bg-fuchsia-50 dark:bg-fuchsia-400/20 dark:text-fuchsia-400 ring-fuchsia-600/20",
+            pink: "text-pink-600 bg-pink-50 dark:bg-pink-400/20 dark:text-pink-400 ring-pink-600/20",
+            rose: "text-rose-600 bg-rose-50 dark:bg-rose-400/20 dark:text-rose-400 ring-rose-600/20"
+        }
+
+        def initialize(variant: :primary, size: :md, **args)
             @variant = variant
             @size = size
-            @kwargs = kwargs
+            super(**args)
         end
 
         def template(&)
-            case @variant
-            when :primary
-                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", size_classes, @kwargs[:class]), &)
-            when :secondary
-                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", size_classes, @kwargs[:class]), &)
-            when :outline
-                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground", size_classes, @kwargs[:class]), &)
-            when :destructive
-                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", size_classes, @kwargs[:class]), &)
-            when :slate
-                div(class: tokens("inline-flex items-center rounded-md bg-slate-100 font-medium text-slate-600 bg-slate-100/80 dark:bg-slate-400/10 dark:text-slate-400", size_classes, @kwargs[:class]), &)
-            when :gray
-                div(class: tokens("inline-flex items-center rounded-md bg-gray-100 font-medium text-gray-600 bg-gray-100/80 dark:bg-gray-400/10 dark:text-gray-400", size_classes, @kwargs[:class]), &)
-            when :zinc
-                div(class: tokens("inline-flex items-center rounded-md bg-zinc-100 font-medium text-zinc-600 bg-zinc-100/80 dark:bg-zinc-400/10 dark:text-zinc-400", size_classes, @kwargs[:class]), &)
-            when :neutral
-                div(class: tokens("inline-flex items-center rounded-md bg-neutral-100 font-medium text-neutral-600 bg-neutral-100/80 dark:bg-neutral-400/10 dark:text-neutral-400", size_classes, @kwargs[:class]), &)
-            when :stone
-                div(class: tokens("inline-flex items-center rounded-md bg-stone-100 font-medium text-stone-600 bg-stone-100/80 dark:bg-stone-400/10 dark:text-stone-400", size_classes, @kwargs[:class]), &)
-            when :red
-                div(class: tokens("inline-flex items-center rounded-md bg-red-100 font-medium text-red-600 bg-red-100/80 dark:bg-red-400/10 dark:text-red-400", size_classes, @kwargs[:class]), &)
-            when :orange
-                div(class: tokens("inline-flex items-center rounded-md bg-orange-100 font-medium text-orange-600 bg-orange-100/80 dark:bg-orange-400/10 dark:text-orange-400", size_classes, @kwargs[:class]), &)
-            when :amber
-                div(class: tokens("inline-flex items-center rounded-md bg-amber-100 font-medium text-amber-600 bg-amber-100/80 dark:bg-amber-400/10 dark:text-amber-400", size_classes, @kwargs[:class]), &)
-            when :yellow
-                div(class: tokens("inline-flex items-center rounded-md bg-yellow-100 font-medium text-yellow-600 bg-yellow-100/80 dark:bg-yellow-400/10 dark:text-yellow-400", size_classes, @kwargs[:class]), &)
-            when :lime
-                div(class: tokens("inline-flex items-center rounded-md bg-lime-100 font-medium text-lime-600 bg-lime-100/80 dark:bg-lime-400/10 dark:text-lime-400", size_classes, @kwargs[:class]), &)
-            when :green
-                div(class: tokens("inline-flex items-center rounded-md bg-green-100 font-medium text-green-600 bg-green-100/80 dark:bg-green-400/10 dark:text-green-400", size_classes, @kwargs[:class]), &)
-            when :emerald
-                div(class: tokens("inline-flex items-center rounded-md bg-emerald-100 font-medium text-emerald-600 bg-emerald-100/80 dark:bg-emerald-400/10 dark:text-emerald-400", size_classes, @kwargs[:class]), &)
-            when :teal
-                div(class: tokens("inline-flex items-center rounded-md bg-teal-100 font-medium text-teal-600 bg-teal-100/80 dark:bg-teal-400/10 dark:text-teal-400", size_classes, @kwargs[:class]), &)
-            when :cyan
-                div(class: tokens("inline-flex items-center rounded-md bg-cyan-100 font-medium text-cyan-600 bg-cyan-100/80 dark:bg-cyan-400/10 dark:text-cyan-400", size_classes, @kwargs[:class]), &)
-            when :sky
-                div(class: tokens("inline-flex items-center rounded-md bg-sky-100 font-medium text-sky-600 bg-sky-100/80 dark:bg-sky-400/10 dark:text-sky-400", size_classes, @kwargs[:class]), &)
-            when :blue
-                div(class: tokens("inline-flex items-center rounded-md bg-blue-100 font-medium text-blue-600 bg-blue-100/80 dark:bg-blue-400/10 dark:text-blue-400", size_classes, @kwargs[:class]), &)
-            when :indigo
-                div(class: tokens("inline-flex items-center rounded-md bg-indigo-100 font-medium text-indigo-600 bg-indigo-100/80 dark:bg-indigo-400/10 dark:text-indigo-400", size_classes, @kwargs[:class]), &)
-            when :violet
-                div(class: tokens("inline-flex items-center rounded-md bg-violet-100 font-medium text-violet-600 bg-violet-100/80 dark:bg-violet-400/10 dark:text-violet-400", size_classes, @kwargs[:class]), &)
-            when :purple
-                div(class: tokens("inline-flex items-center rounded-md bg-purple-100 font-medium text-purple-600 bg-purple-100/80 dark:bg-purple-400/10 dark:text-purple-400", size_classes, @kwargs[:class]), &)
-            when :fuchsia
-                div(class: tokens("inline-flex items-center rounded-md bg-fuchsia-100 font-medium text-fuchsia-600 bg-fuchsia-100/80 dark:bg-fuchsia-400/10 dark:text-fuchsia-400", size_classes, @kwargs[:class]), &)
-            when :pink
-                div(class: tokens("inline-flex items-center rounded-md bg-pink-100 font-medium text-pink-600 bg-pink-100/80 dark:bg-pink-400/10 dark:text-pink-400", size_classes, @kwargs[:class]), &)
-            when :rose
-                div(class: tokens("inline-flex items-center rounded-md bg-rose-100 font-medium text-rose-600 bg-rose-100/80 dark:bg-rose-400/10 dark:text-rose-400", size_classes, @kwargs[:class]), &)
-            end
+            span(**attrs, &)
         end
 
-        def size_classes
-            case @size
-            when :sm then "px-1.5 py-0.5 text-xs"
-            when :md then "px-2 py-1 text-xs"
-            when :lg then "px-3 py-1 text-sm"
-            end
+        private
+
+        def default_attrs
+            {
+                class: tokens("inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant]),
+            }
         end
     end
 end