shadcn-phlex 0.1.0

data/lib/shadcn/ui/slider.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Slider
+    class Slider < Base
+      def initialize(value: 0, min: 0, max: 100, name: nil, **attrs)
+        @value = value
+        @min = min
+        @max = max
+        @name = name
+        @attrs = attrs
+      end
+
+      def view_template
+        span(**build_attrs) do
+          if @name
+            input(type: "hidden", name: @name, value: @value.to_s, data_shadcn__slider_target: "input")
+          end
+          pct = ((@value.to_f - @min) / (@max - @min) * 100).clamp(0, 100)
+
+          span(
+            data_slot: "slider-track",
+            data_shadcn__slider_target: "track",
+            data_action: "click->shadcn--slider#clickTrack",
+            data_orientation: "horizontal",
+            class: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+          ) do
+            span(
+              data_slot: "slider-range",
+              data_shadcn__slider_target: "range",
+              data_orientation: "horizontal",
+              class: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+              style: "left: 0; width: #{pct}%"
+            )
+          end
+
+          span(
+            data_slot: "slider-thumb",
+            data_shadcn__slider_target: "thumb",
+            data_action: "pointerdown->shadcn--slider#startDrag keydown->shadcn--slider#keydown",
+            class: "absolute block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+            style: "left: calc(#{pct}% - 8px)",
+            role: "slider",
+            tabindex: "0",
+            aria_valuemin: @min,
+            aria_valuemax: @max,
+            aria_valuenow: @value
+          )
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex w-full touch-none items-center select-none",
+          "data-[disabled]:opacity-50",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "slider",
+          data_controller: "shadcn--slider",
+          data_shadcn__slider_value_value: @value,
+          data_shadcn__slider_min_value: @min,
+          data_shadcn__slider_max_value: @max,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/sonner.rb

@@ -0,0 +1,177 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Sonner (Toast container)
+    # The JS behavior must be provided by a Stimulus controller or similar
+    # This provides the styled markup structure
+    class Toaster < Base
+      def initialize(position: "bottom-right", **attrs)
+        @position = position
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "fixed z-[100] flex max-h-screen flex-col gap-2 p-4",
+          position_classes,
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "toaster",
+          data_controller: "shadcn--toast",
+          data_shadcn__toast_target: "container",
+          data_position: @position,
+          class: classes
+        )
+      end
+
+      def position_classes
+        case @position
+        when "top-left" then "top-0 left-0"
+        when "top-center" then "top-0 left-1/2 -translate-x-1/2"
+        when "top-right" then "top-0 right-0"
+        when "bottom-left" then "bottom-0 left-0"
+        when "bottom-center" then "bottom-0 left-1/2 -translate-x-1/2"
+        when "bottom-right" then "bottom-0 right-0"
+        else "bottom-0 right-0"
+        end
+      end
+    end
+
+    class Toast < Base
+      VARIANTS = ClassVariants.build(
+        base: [
+          "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden",
+          "rounded-md border p-4 pr-6 shadow-lg transition-all",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full",
+          "data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full data-[state=open]:fade-in-0"
+        ].join(" "),
+        variants: {
+          variant: {
+            default: "border bg-background text-foreground",
+            success: "border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100",
+            error: "border-destructive/50 bg-destructive text-white",
+            warning: "border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100",
+            info: "border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100"
+          }
+        },
+        defaults: { variant: :default }
+      )
+
+      def initialize(variant: :default, **attrs)
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(VARIANTS.render(variant: @variant), @attrs.delete(:class))
+        @attrs.merge(data_slot: "toast", data_variant: @variant, role: "alert", class: classes)
+      end
+    end
+
+    class ToastTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-sm font-semibold", @attrs.delete(:class))
+        @attrs.merge(data_slot: "toast-title", class: classes)
+      end
+    end
+
+    class ToastDescription < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-sm opacity-90", @attrs.delete(:class))
+        @attrs.merge(data_slot: "toast-description", class: classes)
+      end
+    end
+
+    class ToastAction < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3",
+          "text-sm font-medium transition-colors",
+          "hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "toast-action", type: "button", class: classes)
+      end
+    end
+
+    class ToastClose < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        button(**build_attrs) do
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "14", height: "14",
+            viewbox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            class: "size-4"
+          ) do |s|
+            s.path(d: "M18 6 6 18")
+            s.path(d: "m6 6 12 12")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
+          "group-hover:opacity-100",
+          "hover:text-foreground focus:opacity-100 focus:outline-none",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "toast-close", type: "button", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/spinner.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Spinner
+    class Spinner < Base
+      def initialize(size: :default, **attrs)
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template
+        span(**build_attrs) do
+          # Animated loader SVG (Lucide Loader2 equivalent)
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24", height: "24",
+            viewbox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            class: cn("animate-spin", size_class)
+          ) do |s|
+            s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+          end
+          span(class: "sr-only") { "Loading..." }
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "inline-flex items-center justify-center text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "spinner",
+          role: "status",
+          aria_label: "Loading",
+          class: classes
+        )
+      end
+
+      def size_class
+        case @size
+        when :xs then "size-3"
+        when :sm then "size-4"
+        when :default then "size-5"
+        when :lg then "size-8"
+        else "size-5"
+        end
+      end
+    end
+  end
+end

data/lib/shadcn/ui/switch.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Switch
+    # Sizes: default, sm
+    class Switch < Base
+      def initialize(checked: false, size: :default, name: nil, **attrs)
+        @checked = checked
+        @size = size
+        @name = name
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        label(
+          data_controller: "shadcn--switch",
+          data_shadcn__switch_checked_value: @checked.to_s,
+          class: "inline-flex items-center gap-2 cursor-pointer"
+        ) do
+          if @name
+            input(type: "hidden", name: @name, value: @checked ? "1" : "0", data_shadcn__switch_target: "input")
+          end
+          button(**build_attrs) do
+            span(**thumb_attrs)
+          end
+          if block
+            span(class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", &block)
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs",
+          "transition-all outline-none",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "data-[size=default]:h-[1.15rem] data-[size=default]:w-8",
+          "data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+          "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+          "dark:data-[state=unchecked]:bg-input/80",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "switch",
+          data_shadcn__switch_target: "button",
+          data_action: "click->shadcn--switch#toggle",
+          data_state: @checked ? "checked" : "unchecked",
+          data_size: @size,
+          role: "switch",
+          type: "button",
+          aria_checked: @checked,
+          class: classes
+        )
+      end
+
+      def thumb_attrs
+        {
+          data_slot: "switch-thumb",
+          data_shadcn__switch_target: "thumb",
+          data_state: @checked ? "checked" : "unchecked",
+          class: cn(
+            "pointer-events-none block rounded-full bg-background ring-0 transition-transform",
+            "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3",
+            "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+            "dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          )
+        }
+      end
+    end
+  end
+end

data/lib/shadcn/ui/table.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Table
+    class Table < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(data_slot: "table-container", class: "relative w-full overflow-x-auto") do
+          table(**build_attrs, &block)
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("w-full caption-bottom text-sm", @attrs.delete(:class))
+        @attrs.merge(data_slot: "table", class: classes)
+      end
+    end
+
+    class TableHeader < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        thead(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("[&_tr]:border-b", @attrs.delete(:class))
+        @attrs.merge(data_slot: "table-header", class: classes)
+      end
+    end
+
+    class TableBody < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        tbody(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("[&_tr:last-child]:border-0", @attrs.delete(:class))
+        @attrs.merge(data_slot: "table-body", class: classes)
+      end
+    end
+
+    class TableFooter < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        tfoot(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", @attrs.delete(:class))
+        @attrs.merge(data_slot: "table-footer", class: classes)
+      end
+    end
+
+    class TableRow < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        tr(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "table-row", class: classes)
+      end
+    end
+
+    class TableHead < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        th(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap",
+          "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "table-head", class: classes)
+      end
+    end
+
+    class TableCell < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        td(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "table-cell", class: classes)
+      end
+    end
+
+    class TableCaption < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        caption(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-muted-foreground mt-4 text-sm", @attrs.delete(:class))
+        @attrs.merge(data_slot: "table-caption", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/tabs.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Tabs
+    # Wired to shadcn--tabs Stimulus controller
+    class Tabs < Base
+      def initialize(value: nil, orientation: :horizontal, **attrs)
+        @value = value
+        @orientation = orientation
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(
+          data_slot: "tabs",
+          data_orientation: @orientation,
+          data_controller: "shadcn--tabs",
+          data_shadcn__tabs_orientation_value: @orientation,
+          class: classes
+        )
+        result[:data_shadcn__tabs_value_value] = @value if @value
+        result
+      end
+    end
+
+    class TabsList < Base
+      VARIANTS = ClassVariants.build(
+        base: [
+          "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground",
+          "group-data-[orientation=horizontal]/tabs:h-9",
+          "group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+          "data-[variant=line]:rounded-none"
+        ].join(" "),
+        variants: {
+          variant: {
+            default: "bg-muted",
+            line: "gap-1 bg-transparent"
+          }
+        },
+        defaults: { variant: :default }
+      )
+
+      def initialize(variant: :default, **attrs)
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(VARIANTS.render(variant: @variant), @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "tabs-list",
+          data_variant: @variant,
+          data_shadcn__tabs_target: "list",
+          role: "tablist",
+          class: classes
+        )
+      end
+    end
+
+    class TabsTrigger < Base
+      def initialize(value:, **attrs)
+        @value = value
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          # Base
+          "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5",
+          "rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap",
+          "text-foreground/60 transition-all",
+          "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+          "hover:text-foreground",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          # Default variant active state
+          "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm",
+          "group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          "dark:text-muted-foreground dark:hover:text-foreground",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          # Line variant overrides
+          "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+          "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+          # Active state
+          "data-[state=active]:bg-background data-[state=active]:text-foreground",
+          "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+          # After pseudo-element (line indicator)
+          "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity",
+          "group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5",
+          "group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5",
+          "group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "tabs-trigger",
+          data_value: @value,
+          data_shadcn__tabs_target: "trigger",
+          data_action: "click->shadcn--tabs#select keydown->shadcn--tabs#keydown",
+          role: "tab",
+          type: "button",
+          class: classes
+        )
+      end
+    end
+
+    class TabsContent < Base
+      def initialize(value:, **attrs)
+        @value = value
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex-1 outline-none", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "tabs-content",
+          data_value: @value,
+          data_shadcn__tabs_target: "content",
+          role: "tabpanel",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+  end
+end