shadcn-phlex 0.1.0

data/lib/shadcn/ui/navigation_menu.rb

@@ -0,0 +1,238 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui NavigationMenu
+    class NavigationMenu < Base
+      def initialize(viewport: true, **attrs)
+        @viewport = viewport
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        nav(**build_attrs) do
+          yield if block_given?
+          render NavigationMenuViewport.new if @viewport
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "navigation-menu",
+          data_controller: "shadcn--navigation-menu",
+          data_viewport: @viewport,
+          class: classes
+        )
+      end
+    end
+
+    class NavigationMenuList < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        ul(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group flex flex-1 list-none items-center justify-center gap-1",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "navigation-menu-list", class: classes)
+      end
+    end
+
+    class NavigationMenuItem < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        li(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("relative", @attrs.delete(:class))
+        @attrs.merge(data_slot: "navigation-menu-item", class: classes)
+      end
+    end
+
+    class NavigationMenuTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs) do
+          yield if block_given?
+          plain " "
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "12", height: "12",
+            viewbox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            class: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            aria_hidden: "true"
+          ) do |s|
+            s.path(d: "m6 9 6 6 6-6")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium",
+          "transition-[color,box-shadow] outline-none",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus:bg-accent focus:text-accent-foreground",
+          "focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "navigation-menu-trigger",
+          data_shadcn__navigation_menu_target: "trigger",
+          data_action: "mouseenter->shadcn--navigation-menu#enterTrigger mouseleave->shadcn--navigation-menu#leaveTrigger click->shadcn--navigation-menu#clickTrigger keydown->shadcn--navigation-menu#keydown",
+          type: "button",
+          class: classes
+        )
+      end
+    end
+
+    class NavigationMenuContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "top-0 left-0 w-full p-2 pr-2.5",
+          "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+          "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+          "data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in",
+          "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out",
+          "md:absolute md:w-auto",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "navigation-menu-content",
+          data_shadcn__navigation_menu_target: "content",
+          data_action: "mouseenter->shadcn--navigation-menu#enterContent mouseleave->shadcn--navigation-menu#leaveContent keydown->shadcn--navigation-menu#contentKeydown",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class NavigationMenuViewport < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(class: "absolute top-full left-0 isolate z-50 flex justify-center") do
+          div(**build_attrs)
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "origin-top-center relative mt-1.5 w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow",
+          "data-[state=closed]:animate-out data-[state=closed]:zoom-out-95",
+          "data-[state=open]:animate-in data-[state=open]:zoom-in-90",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "navigation-menu-viewport",
+          data_shadcn__navigation_menu_target: "viewport",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class NavigationMenuLink < Base
+      def initialize(href: "#", active: false, **attrs)
+        @href = href
+        @active = active
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        a(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus:bg-accent focus:text-accent-foreground",
+          "focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+          "data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground",
+          "[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "navigation-menu-link",
+          data_shadcn__navigation_menu_target: "link",
+          data_active: @active,
+          href: @href,
+          class: classes
+        )
+      end
+    end
+
+    class NavigationMenuIndicator < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs) do
+          div(class: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md")
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+          "data-[state=hidden]:animate-out data-[state=hidden]:fade-out",
+          "data-[state=visible]:animate-in data-[state=visible]:fade-in",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "navigation-menu-indicator", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/pagination.rb

@@ -0,0 +1,224 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Pagination
+    class Pagination < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        nav(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("mx-auto flex w-full justify-center", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "pagination",
+          role: "navigation",
+          aria_label: "pagination",
+          class: classes
+        )
+      end
+    end
+
+    class PaginationContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        ul(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex flex-row items-center gap-1", @attrs.delete(:class))
+        @attrs.merge(data_slot: "pagination-content", class: classes)
+      end
+    end
+
+    class PaginationItem < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        li(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "pagination-item")
+      end
+    end
+
+    class PaginationLink < Base
+      def initialize(href: "#", active: false, size: :icon, **attrs)
+        @href = href
+        @active = active
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        a(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        size_class = case @size
+        when :icon then "size-9"
+        when :default then "h-9 px-4 py-2"
+        else "h-9 px-4 py-2"
+        end
+
+        classes = cn(
+          "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+          "transition-all cursor-pointer border border-input bg-background shadow-xs",
+          "hover:bg-accent hover:text-accent-foreground",
+          size_class,
+          @active ? "border-primary bg-primary text-primary-foreground" : "",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(
+          data_slot: "pagination-link",
+          href: @href,
+          class: classes
+        )
+        result[:aria_current] = "page" if @active
+        result
+      end
+    end
+
+    class PaginationPrevious < Base
+      def initialize(href: "#", **attrs)
+        @href = href
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        a(**build_attrs) do
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16", height: "16",
+            viewbox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            class: "size-4"
+          ) do |s|
+            s.path(d: "m15 18-6-6 6-6")
+          end
+          span { "Previous" }
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium",
+          "h-9 px-4 py-2 cursor-pointer border border-input bg-background shadow-xs",
+          "hover:bg-accent hover:text-accent-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "pagination-previous",
+          href: @href,
+          aria_label: "Go to previous page",
+          class: classes
+        )
+      end
+    end
+
+    class PaginationNext < Base
+      def initialize(href: "#", **attrs)
+        @href = href
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        a(**build_attrs) do
+          span { "Next" }
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16", height: "16",
+            viewbox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            class: "size-4"
+          ) do |s|
+            s.path(d: "m9 18 6-6-6-6")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium",
+          "h-9 px-4 py-2 cursor-pointer border border-input bg-background shadow-xs",
+          "hover:bg-accent hover:text-accent-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "pagination-next",
+          href: @href,
+          aria_label: "Go to next page",
+          class: classes
+        )
+      end
+    end
+
+    class PaginationEllipsis < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        span(**build_attrs) do
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16", height: "16",
+            viewbox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            class: "size-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
+          span(class: "sr-only") { "More pages" }
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex size-9 items-center justify-center", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "pagination-ellipsis",
+          aria_hidden: "true",
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/popover.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Popover
+    class Popover < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "popover",
+          data_controller: "shadcn--popover",
+          data_action: "click@window->shadcn--popover#hide keydown.esc@window->shadcn--popover#hideOnEscape"
+        )
+      end
+    end
+
+    class PopoverTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "popover-trigger",
+          data_shadcn__popover_target: "trigger",
+          data_action: "click->shadcn--popover#toggle",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class PopoverAnchor < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "popover-anchor",
+          data_shadcn__popover_target: "anchor"
+        )
+      end
+    end
+
+    class PopoverContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
+          "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",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "popover-content",
+          data_shadcn__popover_target: "content",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class PopoverHeader < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex flex-col gap-1", @attrs.delete(:class))
+        @attrs.merge(data_slot: "popover-header", class: classes)
+      end
+    end
+
+    class PopoverTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h4(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-sm font-medium leading-none", @attrs.delete(:class))
+        @attrs.merge(data_slot: "popover-title", class: classes)
+      end
+    end
+
+    class PopoverDescription < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        p(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-sm text-muted-foreground", @attrs.delete(:class))
+        @attrs.merge(data_slot: "popover-description", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/progress.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Progress
+    class Progress < Base
+      def initialize(value: 0, **attrs)
+        @value = value.to_i.clamp(0, 100)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs) do
+          div(
+            data_slot: "progress-indicator",
+            class: "h-full w-full flex-1 bg-primary transition-all",
+            style: "transform: translateX(-#{100 - @value}%)"
+          )
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "progress",
+          role: "progressbar",
+          aria_valuemin: 0,
+          aria_valuemax: 100,
+          aria_valuenow: @value,
+          class: classes
+        )
+      end
+    end
+  end
+end