shadcn-phlex 0.1.0

data/lib/shadcn/ui/dialog.rb

@@ -0,0 +1,226 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Dialog
+    # Wired to shadcn--dialog Stimulus controller
+    class Dialog < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "dialog",
+          data_controller: "shadcn--dialog",
+          data_shadcn__dialog_open_value: false
+        )
+      end
+    end
+
+    class DialogTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "dialog-trigger",
+          data_shadcn__dialog_target: "trigger",
+          data_action: "click->shadcn--dialog#show",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class DialogOverlay < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "fixed inset-0 z-50 bg-black/50",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "dialog-overlay",
+          data_shadcn__dialog_target: "overlay",
+          data_action: "click->shadcn--dialog#clickOverlay",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class DialogContent < Base
+      def initialize(show_close_button: true, **attrs)
+        @show_close_button = show_close_button
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        render DialogOverlay.new
+
+        div(**build_attrs) do
+          yield if block_given?
+
+          if @show_close_button
+            button(
+              data_slot: "dialog-close",
+              data_shadcn__dialog_target: "close",
+              data_action: "click->shadcn--dialog#hide",
+              type: "button",
+              class: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            ) 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: "M18 6 6 18")
+                s.path(d: "m6 6 12 12")
+              end
+              span(class: "sr-only") { "Close" }
+            end
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+          "gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none",
+          "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",
+          "sm:max-w-lg",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "dialog-content",
+          data_shadcn__dialog_target: "content",
+          role: "dialog",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class DialogHeader < 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-2 text-center sm:text-left", @attrs.delete(:class))
+        @attrs.merge(data_slot: "dialog-header", class: classes)
+      end
+    end
+
+    class DialogFooter < 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-reverse gap-2 sm:flex-row sm:justify-end", @attrs.delete(:class))
+        @attrs.merge(data_slot: "dialog-footer", class: classes)
+      end
+    end
+
+    class DialogTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h2(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-lg leading-none font-semibold", @attrs.delete(:class))
+        @attrs.merge(data_slot: "dialog-title", data_shadcn__dialog_target: "title", class: classes)
+      end
+    end
+
+    class DialogDescription < 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: "dialog-description", data_shadcn__dialog_target: "description", class: classes)
+      end
+    end
+
+    class DialogClose < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "dialog-close",
+          data_action: "click->shadcn--dialog#hide",
+          type: "button"
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/direction.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Direction (RTL/LTR wrapper)
+    class Direction < Base
+      def initialize(dir: :ltr, **attrs)
+        @dir = dir
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "direction", dir: @dir.to_s)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/drawer.rb

@@ -0,0 +1,217 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Drawer
+    class Drawer < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "drawer",
+          data_controller: "shadcn--drawer"
+        )
+      end
+    end
+
+    class DrawerTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "drawer-trigger",
+          data_shadcn__drawer_target: "trigger",
+          data_action: "click->shadcn--drawer#show",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class DrawerClose < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "drawer-close",
+          data_action: "click->shadcn--drawer#hide",
+          type: "button"
+        )
+      end
+    end
+
+    class DrawerOverlay < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "fixed inset-0 z-50 bg-black/50",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "drawer-overlay",
+          data_shadcn__drawer_target: "overlay",
+          data_action: "click->shadcn--drawer#clickOverlay",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class DrawerContent < Base
+      def initialize(direction: :bottom, **attrs)
+        @direction = direction.to_sym
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        render DrawerOverlay.new
+
+        div(**build_attrs) do
+          if @direction == :bottom
+            div(class: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block")
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
+          direction_classes,
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "drawer-content",
+          data_shadcn__drawer_target: "content",
+          data_vaul_drawer_direction: @direction,
+          hidden: true,
+          class: classes
+        )
+      end
+
+      def direction_classes
+        case @direction
+        when :top
+          "inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-lg border-b"
+        when :bottom
+          "inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-lg border-t"
+        when :right
+          "inset-y-0 right-0 w-3/4 border-l sm:max-w-sm"
+        when :left
+          "inset-y-0 left-0 w-3/4 border-r sm:max-w-sm"
+        end
+      end
+    end
+
+    class DrawerHeader < 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-0.5 p-4",
+          "group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center",
+          "group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+          "md:gap-1.5 md:text-left",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "drawer-header", class: classes)
+      end
+    end
+
+    class DrawerFooter < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("mt-auto flex flex-col gap-2 p-4", @attrs.delete(:class))
+        @attrs.merge(data_slot: "drawer-footer", class: classes)
+      end
+    end
+
+    class DrawerTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h2(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("font-semibold text-foreground", @attrs.delete(:class))
+        @attrs.merge(data_slot: "drawer-title", class: classes)
+      end
+    end
+
+    class DrawerDescription < 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: "drawer-description", class: classes)
+      end
+    end
+  end
+end