shadcn-phlex 0.1.0

data/lib/shadcn/ui/dropdown_menu.rb

@@ -0,0 +1,384 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui DropdownMenu
+    # Requires JS for open/close behavior
+    class DropdownMenu < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "dropdown-menu",
+          data_controller: "shadcn--dropdown-menu",
+          data_action: "click@window->shadcn--dropdown-menu#hide keydown.esc@window->shadcn--dropdown-menu#hideOnEscape keydown->shadcn--dropdown-menu#navigate"
+        )
+      end
+    end
+
+    class DropdownMenuTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "dropdown-menu-trigger",
+          data_shadcn__dropdown_menu_target: "trigger",
+          data_action: "click->shadcn--dropdown-menu#toggle",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class DropdownMenuContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem]",
+          "overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "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: "dropdown-menu-content",
+          data_shadcn__dropdown_menu_target: "content",
+          role: "menu",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class DropdownMenuGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "dropdown-menu-group", role: "group")
+      end
+    end
+
+    class DropdownMenuItem < Base
+      def initialize(inset: false, variant: :default, **attrs)
+        @inset = inset
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+          "focus:bg-accent focus:text-accent-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "data-[inset]:pl-8",
+          "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
+          "dark:data-[variant=destructive]:focus:bg-destructive/20",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(
+          data_slot: "dropdown-menu-item",
+          data_shadcn__dropdown_menu_target: "item",
+          data_action: "click->shadcn--dropdown-menu#selectItem",
+          data_variant: @variant,
+          role: "menuitem",
+          tabindex: "-1",
+          class: classes
+        )
+        result[:data_inset] = true if @inset
+        result
+      end
+    end
+
+    class DropdownMenuCheckboxItem < Base
+      def initialize(checked: false, **attrs)
+        @checked = checked
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+            if @checked
+              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: "M20 6 9 17l-5-5")
+              end
+            end
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm",
+          "outline-hidden select-none",
+          "focus:bg-accent focus:text-accent-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "dropdown-menu-checkbox-item",
+          data_shadcn__dropdown_menu_target: "item",
+          data_action: "click->shadcn--dropdown-menu#selectItem",
+          role: "menuitemcheckbox",
+          aria_checked: @checked,
+          tabindex: "-1",
+          class: classes
+        )
+      end
+    end
+
+    class DropdownMenuRadioGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "dropdown-menu-radio-group", role: "group")
+      end
+    end
+
+    class DropdownMenuRadioItem < Base
+      def initialize(checked: false, **attrs)
+        @checked = checked
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+            if @checked
+              svg(
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "8", height: "8",
+                viewbox: "0 0 24 24",
+                fill: "currentColor",
+                class: "size-2"
+              ) do |s|
+                s.circle(cx: "12", cy: "12", r: "10")
+              end
+            end
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm",
+          "outline-hidden select-none",
+          "focus:bg-accent focus:text-accent-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "dropdown-menu-radio-item",
+          data_shadcn__dropdown_menu_target: "item",
+          data_action: "click->shadcn--dropdown-menu#selectItem",
+          role: "menuitemradio",
+          aria_checked: @checked,
+          tabindex: "-1",
+          class: classes
+        )
+      end
+    end
+
+    class DropdownMenuLabel < Base
+      def initialize(inset: false, **attrs)
+        @inset = inset
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(data_slot: "dropdown-menu-label", class: classes)
+        result[:data_inset] = true if @inset
+        result
+      end
+    end
+
+    class DropdownMenuSeparator < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("-mx-1 my-1 h-px bg-border", @attrs.delete(:class))
+        @attrs.merge(data_slot: "dropdown-menu-separator", role: "separator", class: classes)
+      end
+    end
+
+    class DropdownMenuShortcut < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("ml-auto text-xs tracking-widest text-muted-foreground", @attrs.delete(:class))
+        @attrs.merge(data_slot: "dropdown-menu-shortcut", class: classes)
+      end
+    end
+
+    class DropdownMenuSubTrigger < Base
+      def initialize(inset: false, **attrs)
+        @inset = inset
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          yield if block_given?
+          # ChevronRight icon
+          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: "ml-auto size-4"
+          ) do |s|
+            s.path(d: "m9 18 6-6-6-6")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+          "focus:bg-accent focus:text-accent-foreground",
+          "data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(
+          data_slot: "dropdown-menu-sub-trigger",
+          data_shadcn__dropdown_menu_target: "subTrigger",
+          class: classes
+        )
+        result[:data_inset] = true if @inset
+        result
+      end
+    end
+
+    class DropdownMenuSubContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+          "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: "dropdown-menu-sub-content",
+          data_shadcn__dropdown_menu_target: "subContent",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/empty.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Empty state
+    class Empty < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex min-h-[200px] flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8 text-center",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "empty", class: classes)
+      end
+    end
+
+    class EmptyMedia < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex items-center justify-center [&_svg]:size-12 [&_svg]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "empty-media", class: classes)
+      end
+    end
+
+    class EmptyTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h3(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-lg font-semibold", @attrs.delete(:class))
+        @attrs.merge(data_slot: "empty-title", class: classes)
+      end
+    end
+
+    class EmptyDescription < 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 max-w-sm", @attrs.delete(:class))
+        @attrs.merge(data_slot: "empty-description", class: classes)
+      end
+    end
+
+    class EmptyActions < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex items-center gap-2", @attrs.delete(:class))
+        @attrs.merge(data_slot: "empty-actions", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/field.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Field
+    # Form field composition: label, control, description, error message
+    class Field < Base
+      def initialize(disabled: false, **attrs)
+        @disabled = disabled
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/field grid gap-2",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "field",
+          data_disabled: @disabled || nil,
+          class: classes
+        )
+      end
+    end
+
+    class FieldControl < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "field-control")
+      end
+    end
+
+    class FieldDescription < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        p(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-muted-foreground text-sm", @attrs.delete(:class))
+        @attrs.merge(data_slot: "field-description", class: classes)
+      end
+    end
+
+    class FieldError < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        p(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-destructive text-sm font-medium", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "field-error",
+          role: "alert",
+          class: classes
+        )
+      end
+    end
+
+    class Fieldset < Base
+      def initialize(disabled: false, **attrs)
+        @disabled = disabled
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        fieldset(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "grid gap-6 rounded-lg border p-4 disabled:opacity-50",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(data_slot: "fieldset", class: classes)
+        result[:disabled] = true if @disabled
+        result
+      end
+    end
+
+    class FieldsetLegend < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        legend(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-sm font-medium leading-none", @attrs.delete(:class))
+        @attrs.merge(data_slot: "fieldset-legend", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/hover_card.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui HoverCard
+    class HoverCard < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "hover-card",
+          data_controller: "shadcn--hover-card"
+        )
+      end
+    end
+
+    class HoverCardTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        a(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "hover-card-trigger",
+          data_shadcn__hover_card_target: "trigger",
+          data_action: "mouseenter->shadcn--hover-card#triggerEnter mouseleave->shadcn--hover-card#triggerLeave"
+        )
+      end
+    end
+
+    class HoverCardContent < 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-64 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: "hover-card-content",
+          data_shadcn__hover_card_target: "content",
+          data_action: "mouseenter->shadcn--hover-card#contentEnter mouseleave->shadcn--hover-card#contentLeave",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/input.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Input
+    class Input < Base
+      def initialize(type: "text", **attrs)
+        @type = type
+        @attrs = attrs
+      end
+
+      def view_template
+        input(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs",
+          "transition-[color,box-shadow] outline-none",
+          "selection:bg-primary selection:text-primary-foreground",
+          "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "md:text-sm",
+          "dark:bg-input/30",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "input", type: @type, class: classes)
+      end
+    end
+  end
+end