shadcn-phlex 0.1.0

data/lib/shadcn/ui/text_field.rb

@@ -0,0 +1,146 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Compound field component: Field + Label + Input + FieldDescription + FieldError
+    #
+    # Usage:
+    #   render Shadcn::UI::TextField.new(
+    #     label: "Email",
+    #     name: "user[email]",
+    #     type: "email",
+    #     description: "We'll never share your email.",
+    #     error: "is required",
+    #     required: true,
+    #     placeholder: "you@example.com"
+    #   )
+    class TextField < Base
+      def initialize(label: nil, name: nil, type: "text", description: nil, error: nil, required: false, disabled: false, id: nil, **input_attrs)
+        @label = label
+        @name = name
+        @type = type
+        @description = description
+        @error = error
+        @required = required
+        @disabled = disabled
+        @id = id || generate_id(name)
+        @input_attrs = input_attrs
+      end
+
+      def view_template
+        render Field.new(disabled: @disabled) do
+          if @label
+            render Label.new(for: @id) do
+              plain @label
+              if @required
+                span(class: "text-destructive") { " *" }
+              end
+            end
+          end
+
+          render Input.new(
+            type: @type,
+            name: @name,
+            id: @id,
+            required: @required || nil,
+            disabled: @disabled || nil,
+            aria_invalid: @error ? "true" : nil,
+            aria_describedby: description_id,
+            **@input_attrs
+          )
+
+          if @description && !@error
+            render FieldDescription.new(id: description_id) {
+              plain @description
+            }
+          end
+
+          if @error
+            render FieldError.new { plain @error }
+          end
+        end
+      end
+
+      private
+
+      def generate_id(name)
+        return nil unless name
+        name.to_s.gsub(/[\[\]]/, "_").gsub(/_+/, "_").chomp("_")
+      end
+
+      def description_id
+        return nil unless @description && @id
+        "#{@id}_description"
+      end
+    end
+
+    # Compound field component: Field + Label + Textarea + FieldDescription + FieldError
+    #
+    # Usage:
+    #   render Shadcn::UI::TextareaField.new(
+    #     label: "Message",
+    #     name: "contact[message]",
+    #     description: "Max 500 characters.",
+    #     error: "can't be blank",
+    #     required: true,
+    #     rows: 4
+    #   )
+    class TextareaField < Base
+      def initialize(label: nil, name: nil, description: nil, error: nil, required: false, disabled: false, id: nil, **textarea_attrs)
+        @label = label
+        @name = name
+        @description = description
+        @error = error
+        @required = required
+        @disabled = disabled
+        @id = id || generate_id(name)
+        @textarea_attrs = textarea_attrs
+      end
+
+      def view_template
+        render Field.new(disabled: @disabled) do
+          if @label
+            render Label.new(for: @id) do
+              plain @label
+              if @required
+                span(class: "text-destructive") { " *" }
+              end
+            end
+          end
+
+          render Textarea.new(
+            name: @name,
+            id: @id,
+            required: @required || nil,
+            disabled: @disabled || nil,
+            aria_invalid: @error ? "true" : nil,
+            aria_describedby: description_id,
+            **@textarea_attrs
+          )
+
+          if @description && !@error
+            render FieldDescription.new(id: description_id) {
+              plain @description
+            }
+          end
+
+          if @error
+            render FieldError.new { plain @error }
+          end
+        end
+      end
+
+      private
+
+      def generate_id(name)
+        return nil unless name
+        name.to_s.gsub(/[\[\]]/, "_").gsub(/_+/, "_").chomp("_")
+      end
+
+      def description_id
+        return nil unless @description && @id
+        "#{@id}_description"
+      end
+    end
+  end
+end

data/lib/shadcn/ui/textarea.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Textarea
+    class Textarea < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        textarea(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2",
+          "text-base shadow-xs transition-[color,box-shadow] outline-none",
+          "placeholder:text-muted-foreground",
+          "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",
+          "md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "textarea", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/theme_toggle.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Dark mode toggle button
+    # Wired to shadcn--dark-mode Stimulus controller
+    # Renders a button with sun/moon SVG icons that swap based on dark mode state
+    class ThemeToggle < Base
+      def initialize(variant: :ghost, size: :icon, **attrs)
+        @variant = variant
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(
+          data_controller: "shadcn--dark-mode",
+          data_shadcn__dark_mode_mode_value: "system"
+        ) do
+          render Button.new(
+            variant: @variant,
+            size: @size,
+            data_action: "click->shadcn--dark-mode#toggle",
+            **@attrs
+          ) do
+            if block_given?
+              yield
+            else
+              # Sun icon (visible in dark mode, triggers switch to light)
+              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 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+              ) do |s|
+                s.circle(cx: "12", cy: "12", r: "4")
+                s.path(d: "M12 2v2")
+                s.path(d: "M12 20v2")
+                s.path(d: "m4.93 4.93 1.41 1.41")
+                s.path(d: "m17.66 17.66 1.41 1.41")
+                s.path(d: "M2 12h2")
+                s.path(d: "M20 12h2")
+                s.path(d: "m6.34 17.66-1.41 1.41")
+                s.path(d: "m19.07 4.93-1.41 1.41")
+              end
+
+              # Moon icon (visible in light mode, triggers switch to dark)
+              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: "absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+              ) do |s|
+                s.path(d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z")
+              end
+
+              span(class: "sr-only") { "Toggle theme" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/shadcn/ui/toggle.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Toggle
+    # Variants: default, outline
+    # Sizes: default, sm, lg
+    class Toggle < Base
+      VARIANTS = ClassVariants.build(
+        base: [
+          "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap",
+          "transition-[color,box-shadow] outline-none",
+          "hover:bg-muted hover:text-muted-foreground",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        ].join(" "),
+        variants: {
+          variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+          },
+          size: {
+            default: "h-9 px-2 min-w-9",
+            sm: "h-8 px-1.5 min-w-8",
+            lg: "h-10 px-2.5 min-w-10"
+          }
+        },
+        defaults: {
+          variant: :default,
+          size: :default
+        }
+      )
+
+      def initialize(variant: :default, size: :default, pressed: false, **attrs)
+        @variant = variant
+        @size = size
+        @pressed = pressed
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(VARIANTS.render(variant: @variant, size: @size), @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "toggle",
+          data_controller: "shadcn--toggle",
+          data_shadcn__toggle_target: "button",
+          data_action: "click->shadcn--toggle#toggle",
+          data_shadcn__toggle_pressed_value: @pressed,
+          data_state: @pressed ? "on" : "off",
+          type: "button",
+          aria_pressed: @pressed,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/toggle_group.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui ToggleGroup
+    class ToggleGroup < Base
+      def initialize(variant: :default, size: :default, spacing: 1, **attrs)
+        @variant = variant
+        @size = size
+        @spacing = spacing
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        spacing_classes = if @spacing == 0
+          "gap-0 -space-x-px [&_[data-slot=toggle]:first-child]:rounded-l-md [&_[data-slot=toggle]:last-child]:rounded-r-md [&_[data-slot=toggle]:not(:first-child):not(:last-child)]:rounded-none"
+        else
+          "gap-1"
+        end
+
+        classes = cn(
+          "flex items-center",
+          spacing_classes,
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "toggle-group",
+          data_controller: "shadcn--toggle-group",
+          data_shadcn__toggle_group_type_value: "single",
+          data_variant: @variant,
+          data_size: @size,
+          data_spacing: @spacing,
+          role: "group",
+          class: classes
+        )
+      end
+    end
+
+    class ToggleGroupItem < Base
+      def initialize(value:, variant: :default, size: :default, pressed: false, **attrs)
+        @value = value
+        @variant = variant
+        @size = size
+        @pressed = pressed
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(Toggle::VARIANTS.render(variant: @variant, size: @size), @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "toggle-group-item",
+          data_shadcn__toggle_group_target: "item",
+          data_action: "click->shadcn--toggle-group#toggle keydown->shadcn--toggle-group#keydown",
+          data_value: @value,
+          data_state: @pressed ? "on" : "off",
+          type: "button",
+          aria_pressed: @pressed,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/tooltip.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Tooltip
+    class Tooltip < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "tooltip",
+          data_controller: "shadcn--tooltip"
+        )
+      end
+    end
+
+    class TooltipTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "tooltip-trigger",
+          data_shadcn__tooltip_target: "trigger",
+          data_action: "mouseenter->shadcn--tooltip#mouseEnter mouseleave->shadcn--tooltip#mouseLeave focusin->shadcn--tooltip#focusIn focusout->shadcn--tooltip#focusOut",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class TooltipContent < 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-fit rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background",
+          "animate-in fade-in-0 zoom-in-95",
+          "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",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "tooltip-content",
+          data_shadcn__tooltip_target: "content",
+          data_action: "mouseenter->shadcn--tooltip#contentMouseEnter mouseleave->shadcn--tooltip#contentMouseLeave",
+          role: "tooltip",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/typography.rb

@@ -0,0 +1,217 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Typography components
+    # Heading, Paragraph, Blockquote, InlineCode, Lead, Muted, etc.
+
+    class TypographyH1 < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h1(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-h1", class: classes)
+      end
+    end
+
+    class TypographyH2 < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h2(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-h2", class: classes)
+      end
+    end
+
+    class TypographyH3 < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h3(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("scroll-m-20 text-2xl font-semibold tracking-tight", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-h3", class: classes)
+      end
+    end
+
+    class TypographyH4 < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h4(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("scroll-m-20 text-xl font-semibold tracking-tight", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-h4", class: classes)
+      end
+    end
+
+    class TypographyP < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        p(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("leading-7 [&:not(:first-child)]:mt-6", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-p", class: classes)
+      end
+    end
+
+    class TypographyBlockquote < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        blockquote(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("mt-6 border-l-2 pl-6 italic", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-blockquote", class: classes)
+      end
+    end
+
+    class TypographyInlineCode < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        code(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "typography-inline-code", class: classes)
+      end
+    end
+
+    class TypographyLead < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        p(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-xl text-muted-foreground", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-lead", class: classes)
+      end
+    end
+
+    class TypographyLarge < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-lg font-semibold", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-large", class: classes)
+      end
+    end
+
+    class TypographySmall < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        small(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-sm font-medium leading-none", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-small", class: classes)
+      end
+    end
+
+    class TypographyMuted < 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: "typography-muted", class: classes)
+      end
+    end
+
+    class TypographyList < Base
+      def initialize(ordered: false, **attrs)
+        @ordered = ordered
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        tag = @ordered ? :ol : :ul
+        send(tag, **build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("my-6 ml-6 list-disc [&>li]:mt-2", @attrs.delete(:class))
+        @attrs.merge(data_slot: "typography-list", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Shadcn
+  VERSION = "0.1.0"
+end

data/lib/shadcn-phlex.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# Bundler auto-requires based on gem name: shadcn-phlex → shadcn/phlex
+# This shim redirects to the actual entry point at lib/shadcn.rb
+# so users don't need `require: "shadcn"` in their Gemfile.
+require_relative "shadcn"