shadcn-phlex 0.1.0

data/lib/shadcn/ui/radio_group.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui RadioGroup
+    class RadioGroup < Base
+      def initialize(name: nil, value: nil, **attrs)
+        @name = name
+        @value = value
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          if @name
+            input(type: "hidden", name: @name, value: @value.to_s, data_shadcn__radio_group_target: "input")
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("grid gap-3", @attrs.delete(:class))
+        attrs = @attrs.merge(
+          data_slot: "radio-group",
+          data_controller: "shadcn--radio-group",
+          role: "radiogroup",
+          class: classes
+        )
+        attrs[:data_shadcn__radio_group_value_value] = @value.to_s if @value
+        attrs
+      end
+    end
+
+    class RadioGroupItem < Base
+      def initialize(value:, checked: false, **attrs)
+        @value = value
+        @checked = checked
+        @attrs = attrs
+      end
+
+      def view_template
+        button(**build_attrs) do
+          span(
+            data_shadcn__radio_group_target: "indicator",
+            data_value: @value,
+            hidden: !@checked,
+            class: "relative flex items-center justify-center"
+          ) do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "8", height: "8",
+              viewbox: "0 0 24 24",
+              fill: "currentColor",
+              class: "size-2.5 fill-primary"
+            ) do |s|
+              s.circle(cx: "12", cy: "12", r: "10")
+            end
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "aspect-square size-4 shrink-0 rounded-full border border-input shadow-xs",
+          "transition-shadow outline-none",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "data-[state=checked]:border-primary",
+          "dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "radio-group-item",
+          data_shadcn__radio_group_target: "item",
+          data_action: "click->shadcn--radio-group#select keydown->shadcn--radio-group#keydown",
+          data_state: @checked ? "checked" : "unchecked",
+          data_value: @value,
+          role: "radio",
+          type: "button",
+          aria_checked: @checked,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/resizable.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Resizable
+    # Panel groups with drag handles
+    class ResizablePanelGroup < Base
+      def initialize(direction: :horizontal, **attrs)
+        @direction = direction
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex h-full w-full",
+          @direction == :vertical ? "flex-col" : "flex-row",
+          "data-[panel-group-direction=vertical]:flex-col",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "resizable-panel-group",
+          data_panel_group: true,
+          data_panel_group_direction: @direction,
+          class: classes
+        )
+      end
+    end
+
+    class ResizablePanel < Base
+      def initialize(default_size: nil, min_size: nil, max_size: nil, **attrs)
+        @default_size = default_size
+        @min_size = min_size
+        @max_size = max_size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        style_parts = []
+        style_parts << "flex: #{@default_size} 1 0%" if @default_size
+        style_parts << "min-width: #{@min_size}%" if @min_size
+        style_parts << "max-width: #{@max_size}%" if @max_size
+
+        classes = cn("flex-1 overflow-auto", @attrs.delete(:class))
+        result = @attrs.merge(data_slot: "resizable-panel", data_panel: true, class: classes)
+        result[:style] = style_parts.join("; ") unless style_parts.empty?
+        result
+      end
+    end
+
+    class ResizableHandle < Base
+      def initialize(with_handle: false, **attrs)
+        @with_handle = with_handle
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          if @with_handle
+            div(class: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border") do
+              svg(xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10",
+                  viewbox: "0 0 24 24", fill: "none", stroke: "currentColor",
+                  stroke_width: "2", class: "size-2.5") do |s|
+                s.path(d: "M9 5v14")
+                s.path(d: "M15 5v14")
+              end
+            end
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex w-px items-center justify-center bg-border",
+          "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+          "data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1",
+          "data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2",
+          "data-[panel-group-direction=vertical]:after:translate-x-0",
+          "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "resizable-handle",
+          data_panel_resize_handle: true,
+          role: "separator",
+          tabindex: "0",
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/scroll_area.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui ScrollArea
+    class ScrollArea < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          div(
+            data_slot: "scroll-area-viewport",
+            data_shadcn__scroll_area_target: "viewport",
+            class: "size-full overflow-auto rounded-[inherit]",
+            &block
+          )
+          render ScrollBar.new
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("relative overflow-hidden", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "scroll-area",
+          data_controller: "shadcn--scroll-area",
+          class: classes
+        )
+      end
+    end
+
+    class ScrollBar < Base
+      def initialize(orientation: :vertical, **attrs)
+        @orientation = orientation
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs) do
+          div(
+            data_slot: "scroll-area-thumb",
+            data_shadcn__scroll_area_target: "thumb",
+            data_action: "pointerdown->shadcn--scroll-area#startDrag",
+            class: "relative flex-1 rounded-full bg-border"
+          )
+        end
+      end
+
+      private
+
+      def build_attrs
+        orientation_classes = if @orientation == :vertical
+          "h-full w-2.5 border-l border-l-transparent"
+        else
+          "h-2.5 flex-col border-t border-t-transparent"
+        end
+
+        classes = cn(
+          "flex touch-none p-px transition-colors select-none",
+          orientation_classes,
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "scroll-area-scrollbar",
+          data_shadcn__scroll_area_target: "scrollbar",
+          data_orientation: @orientation,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/select.rb

@@ -0,0 +1,235 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Select
+    class Select < Base
+      def initialize(name: nil, **attrs)
+        @name = name
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          if @name
+            input(type: "hidden", name: @name, value: "", data_shadcn__select_target: "input")
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "select",
+          data_controller: "shadcn--select",
+          data_action: "click@window->shadcn--select#hide keydown.esc@window->shadcn--select#hideOnEscape keydown->shadcn--select#navigate"
+        )
+      end
+    end
+
+    class SelectTrigger < Base
+      def initialize(size: :default, **attrs)
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs) do
+          yield if block_given?
+          # ChevronDown 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: "size-4 opacity-50 shrink-0"
+          ) do |s|
+            s.path(d: "m6 9 6 6 6-6")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
+          "transition-[color,box-shadow] outline-none",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8",
+          "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+          "dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "select-trigger",
+          data_shadcn__select_target: "trigger",
+          data_action: "click->shadcn--select#toggle",
+          data_size: @size,
+          type: "button",
+          role: "combobox",
+          class: classes
+        )
+      end
+    end
+
+    class SelectValue < Base
+      def initialize(placeholder: nil, **attrs)
+        @placeholder = placeholder
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs) do
+          if block_given?
+            yield
+          elsif @placeholder
+            plain @placeholder
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "select-value",
+          data_shadcn__select_target: "value"
+        )
+      end
+    end
+
+    class SelectContent < Base
+      def initialize(position: :popper, **attrs)
+        @position = position
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        popper_classes = @position == :popper ?
+          "max-h-[min(var(--radix-select-content-available-height),24rem)]" : ""
+
+        classes = cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md origin-(--radix-select-content-transform-origin)",
+          "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",
+          popper_classes,
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "select-content",
+          data_shadcn__select_target: "content",
+          data_position: @position,
+          role: "listbox",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class SelectItem < Base
+      def initialize(value:, **attrs)
+        @value = value
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          yield if block_given?
+          span(class: "absolute right-2 flex size-3.5 items-center justify-center") do
+            # Check icon rendered when selected via data-state
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "select-item",
+          data_shadcn__select_target: "item",
+          data_action: "click->shadcn--select#selectItem",
+          data_value: @value,
+          role: "option",
+          tabindex: "-1",
+          class: classes
+        )
+      end
+    end
+
+    class SelectGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "select-group", role: "group")
+      end
+    end
+
+    class SelectLabel < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("px-2 py-1.5 text-xs text-muted-foreground font-medium", @attrs.delete(:class))
+        @attrs.merge(data_slot: "select-label", class: classes)
+      end
+    end
+
+    class SelectSeparator < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("pointer-events-none -mx-1 my-1 h-px bg-muted", @attrs.delete(:class))
+        @attrs.merge(data_slot: "select-separator", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/separator.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Separator
+    class Separator < Base
+      def initialize(orientation: :horizontal, decorative: true, **attrs)
+        @orientation = orientation
+        @decorative = decorative
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+          @attrs.delete(:class)
+        )
+
+        result = @attrs.merge(
+          data_slot: "separator",
+          data_orientation: @orientation,
+          role: @decorative ? "none" : "separator",
+          class: classes
+        )
+        result[:aria_orientation] = @orientation.to_s unless @decorative
+        result
+      end
+    end
+  end
+end