shadcn-phlex 0.1.0

data/lib/shadcn/ui/button_group.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui ButtonGroup
+    class ButtonGroup < Base
+      def initialize(orientation: :horizontal, **attrs)
+        @orientation = orientation
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "inline-flex items-center gap-0 -space-x-px shadow-xs",
+          "data-[orientation=vertical]:flex-col data-[orientation=vertical]:space-x-0 data-[orientation=vertical]:-space-y-px",
+          "[&_[data-slot=button]]:rounded-none [&_[data-slot=button]]:shadow-none",
+          "[&_[data-slot=button]:first-child]:rounded-s-md [&_[data-slot=button]:last-child]:rounded-e-md",
+          "data-[orientation=vertical]:[&_[data-slot=button]:first-child]:rounded-se-none data-[orientation=vertical]:[&_[data-slot=button]:first-child]:rounded-ss-md",
+          "data-[orientation=vertical]:[&_[data-slot=button]:last-child]:rounded-es-md data-[orientation=vertical]:[&_[data-slot=button]:last-child]:rounded-ee-none",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "button-group",
+          data_orientation: @orientation,
+          role: "group",
+          class: classes
+        )
+      end
+    end
+
+    class ButtonGroupText < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "inline-flex items-center justify-center border px-3 text-sm font-medium",
+          "border-input bg-background text-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "button-group-text", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/card.rb

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Card
+    # Sub-components: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter
+    class Card < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "card", class: classes)
+      end
+    end
+
+    class CardHeader < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+          "has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "card-header", class: classes)
+      end
+    end
+
+    class CardTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("leading-none font-semibold", @attrs.delete(:class))
+        @attrs.merge(data_slot: "card-title", class: classes)
+      end
+    end
+
+    class CardDescription < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-muted-foreground text-sm", @attrs.delete(:class))
+        @attrs.merge(data_slot: "card-description", class: classes)
+      end
+    end
+
+    class CardAction < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", @attrs.delete(:class))
+        @attrs.merge(data_slot: "card-action", class: classes)
+      end
+    end
+
+    class CardContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("px-6", @attrs.delete(:class))
+        @attrs.merge(data_slot: "card-content", class: classes)
+      end
+    end
+
+    class CardFooter < 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 px-6 [.border-t]:pt-6", @attrs.delete(:class))
+        @attrs.merge(data_slot: "card-footer", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/checkbox.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Checkbox
+    class Checkbox < Base
+      def initialize(checked: false, name: nil, **attrs)
+        @checked = checked
+        @name = name
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        label(data_controller: "shadcn--checkbox", data_shadcn__checkbox_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__checkbox_target: "input")
+          end
+          button(**build_attrs) do
+            span(
+              data_slot: "checkbox-indicator",
+              data_shadcn__checkbox_target: "indicator",
+              hidden: !@checked,
+              class: "grid place-content-center text-current transition-none"
+            ) 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",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                class: "size-3.5"
+              ) do |s|
+                s.path(d: "M20 6 9 17l-5-5")
+              end
+            end
+          end
+          if block
+            span(data_slot: "checkbox-label", 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 size-4 shrink-0 rounded-[4px] 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+          "dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "checkbox",
+          data_shadcn__checkbox_target: "button",
+          data_action: "click->shadcn--checkbox#toggle",
+          data_state: @checked ? "checked" : "unchecked",
+          role: "checkbox",
+          type: "button",
+          aria_checked: @checked,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/collapsible.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Collapsible
+    # Uses data-state="open"/"closed" for JS interactivity
+    class Collapsible < Base
+      def initialize(open: false, **attrs)
+        @open = open
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "collapsible",
+          data_state: @open ? "open" : "closed",
+          data_controller: "shadcn--collapsible",
+          data_shadcn__collapsible_open_value: @open
+        )
+      end
+    end
+
+    class CollapsibleTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "collapsible-trigger",
+          data_shadcn__collapsible_target: "trigger",
+          data_action: "click->shadcn--collapsible#toggle",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class CollapsibleContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "overflow-hidden",
+          "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "collapsible-content",
+          data_shadcn__collapsible_target: "content",
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/combobox.rb

@@ -0,0 +1,229 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Combobox
+    # Searchable select with filtering
+    # Wired to shadcn--combobox Stimulus controller
+    class Combobox < 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__combobox_target: "hiddenInput")
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("relative", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "combobox",
+          data_controller: "shadcn--combobox",
+          data_action: "click@window->shadcn--combobox#hide keydown.esc@window->shadcn--combobox#hideOnEscape keydown->shadcn--combobox#keydown",
+          class: classes
+        )
+      end
+    end
+
+    class ComboboxTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs) do
+          yield if block_given?
+          # ChevronsUpDown 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", class: "ml-2 size-4 shrink-0 opacity-50") do |s|
+            s.path(d: "m7 15 5 5 5-5")
+            s.path(d: "m7 9 5-5 5 5")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3",
+          "text-sm shadow-xs transition-[color,box-shadow] outline-none whitespace-nowrap",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "dark:bg-input/30",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "combobox-trigger",
+          data_action: "click->shadcn--combobox#toggle",
+          type: "button",
+          role: "combobox",
+          class: classes
+        )
+      end
+    end
+
+    class ComboboxValue < Base
+      def initialize(placeholder: "Select...", **attrs)
+        @placeholder = placeholder
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs) do
+          if block_given?
+            yield
+          else
+            plain @placeholder
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "combobox-value",
+          data_shadcn__combobox_target: "value"
+        )
+      end
+    end
+
+    class ComboboxContent < 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-full min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "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: "combobox-content",
+          data_shadcn__combobox_target: "content",
+          role: "listbox",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class ComboboxInput < Base
+      def initialize(placeholder: "Search...", **attrs)
+        @placeholder = placeholder
+        @attrs = attrs
+      end
+
+      def view_template
+        div(class: "flex items-center border-b px-3") 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", class: "mr-2 size-4 shrink-0 opacity-50") do |s|
+            s.circle(cx: "11", cy: "11", r: "8")
+            s.path(d: "m21 21-4.3-4.3")
+          end
+          input(**build_attrs)
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none",
+          "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "combobox-input",
+          data_shadcn__combobox_target: "input",
+          data_action: "input->shadcn--combobox#filter keydown->shadcn--combobox#keydown",
+          type: "text",
+          placeholder: @placeholder,
+          class: classes
+        )
+      end
+    end
+
+    class ComboboxEmpty < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          if block_given?
+            yield
+          else
+            plain "No results found."
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("py-6 text-center text-sm text-muted-foreground", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "combobox-empty",
+          data_shadcn__combobox_target: "empty",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class ComboboxItem < 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(
+          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+          "outline-hidden select-none",
+          "data-[state=checked]:font-medium",
+          "focus:bg-accent focus:text-accent-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "combobox-item",
+          data_shadcn__combobox_target: "item",
+          data_action: "click->shadcn--combobox#selectItem",
+          data_value: @value,
+          role: "option",
+          tabindex: "-1",
+          class: classes
+        )
+      end
+    end
+  end
+end