shadcn-phlex 0.1.0

data/lib/shadcn/ui/input_group.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui InputGroup
+    class InputGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex h-9 w-full items-center rounded-md border border-input bg-transparent shadow-xs",
+          "transition-[color,box-shadow]",
+          "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+          "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+          "[&>input]:border-0 [&>input]:bg-transparent [&>input]:shadow-none [&>input]:ring-0 [&>input]:focus-visible:ring-0 [&>input]:focus-visible:border-0",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "input-group", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/input_otp.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui InputOTP
+    # One-time password input with individual digit boxes
+    class InputOTP < Base
+      def initialize(max_length: 6, **attrs)
+        @max_length = max_length
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex items-center gap-2 has-[:disabled]:opacity-50",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "input-otp",
+          data_input_otp_container: true,
+          class: classes
+        )
+      end
+    end
+
+    class InputOTPGroup < 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", @attrs.delete(:class))
+        @attrs.merge(data_slot: "input-otp-group", class: classes)
+      end
+    end
+
+    class InputOTPSlot < Base
+      def initialize(index: 0, active: false, **attrs)
+        @index = index
+        @active = active
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          if block_given?
+            yield
+          else
+            # Caret when active
+            if @active
+              div(class: "pointer-events-none absolute inset-0 flex items-center justify-center") do
+                div(class: "h-4 w-px animate-caret-blink bg-foreground duration-1000")
+              end
+            end
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all",
+          "first:rounded-l-md first:border-l last:rounded-r-md",
+          @active ? "z-10 ring-2 ring-ring" : "",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "input-otp-slot",
+          data_index: @index,
+          data_active: @active,
+          class: classes
+        )
+      end
+    end
+
+    class InputOTPSeparator < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs) do
+          # Dot separator
+          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: "size-4") do |s|
+            s.circle(cx: "12.1", cy: "12.1", r: "1")
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "input-otp-separator", role: "separator")
+      end
+    end
+  end
+end

data/lib/shadcn/ui/item.rb

@@ -0,0 +1,115 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Item
+    # Versatile content display component (media, content, actions)
+    class Item < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex items-start gap-3 rounded-lg p-3",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "item", class: classes)
+      end
+    end
+
+    class ItemMedia < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex shrink-0 items-center justify-center [&_svg]:size-5 [&_svg]:text-muted-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "item-media", class: classes)
+      end
+    end
+
+    class ItemContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex min-w-0 flex-1 flex-col gap-1", @attrs.delete(:class))
+        @attrs.merge(data_slot: "item-content", class: classes)
+      end
+    end
+
+    class ItemTitle < 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-medium leading-none", @attrs.delete(:class))
+        @attrs.merge(data_slot: "item-title", class: classes)
+      end
+    end
+
+    class ItemDescription < 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: "item-description", class: classes)
+      end
+    end
+
+    class ItemActions < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex shrink-0 items-center gap-1", @attrs.delete(:class))
+        @attrs.merge(data_slot: "item-actions", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/kbd.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Kbd
+    class Kbd < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        kbd(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1",
+          "rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
+          "[&_svg:not([class*='size-'])]:size-3",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "kbd", class: classes)
+      end
+    end
+
+    class KbdGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        kbd(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("inline-flex items-center gap-1", @attrs.delete(:class))
+        @attrs.merge(data_slot: "kbd-group", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/label.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Label
+    class Label < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        label(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex items-center gap-2 text-sm leading-none font-medium select-none",
+          "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "label", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/menubar.rb

@@ -0,0 +1,345 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Menubar
+    class Menubar < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "menubar",
+          data_controller: "shadcn--menubar",
+          role: "menubar",
+          class: classes
+        )
+      end
+    end
+
+    class MenubarMenu < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "menubar-menu")
+      end
+    end
+
+    class MenubarTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        button(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none cursor-default",
+          "focus:bg-accent focus:text-accent-foreground",
+          "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "menubar-trigger",
+          data_shadcn__menubar_target: "trigger",
+          data_action: "click->shadcn--menubar#toggleMenu mouseenter->shadcn--menubar#enterTrigger",
+          type: "button",
+          class: classes
+        )
+      end
+    end
+
+    class MenubarContent < 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-[12rem] 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",
+          "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",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "menubar-content",
+          data_shadcn__menubar_target: "content",
+          role: "menu",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class MenubarItem < 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",
+          "[&_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: "menubar-item",
+          data_shadcn__menubar_target: "item",
+          data_action: "click->shadcn--menubar#selectItem",
+          data_variant: @variant,
+          role: "menuitem",
+          tabindex: "-1",
+          class: classes
+        )
+        result[:data_inset] = true if @inset
+        result
+      end
+    end
+
+    class MenubarCheckboxItem < 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", class: "size-4"
+              ) { |s| s.path(d: "M20 6 9 17l-5-5") }
+            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",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "menubar-checkbox-item",
+          role: "menuitemcheckbox",
+          aria_checked: @checked,
+          class: classes
+        )
+      end
+    end
+
+    class MenubarRadioGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "menubar-radio-group", role: "group")
+      end
+    end
+
+    class MenubarRadioItem < 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"
+              ) { |s| s.circle(cx: "12", cy: "12", r: "10") }
+            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",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "menubar-radio-item",
+          role: "menuitemradio",
+          aria_checked: @checked,
+          class: classes
+        )
+      end
+    end
+
+    class MenubarLabel < 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: "menubar-label", class: classes)
+        result[:data_inset] = true if @inset
+        result
+      end
+    end
+
+    class MenubarSeparator < 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-muted", @attrs.delete(:class))
+        @attrs.merge(data_slot: "menubar-separator", role: "separator", class: classes)
+      end
+    end
+
+    class MenubarShortcut < 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: "menubar-shortcut", class: classes)
+      end
+    end
+
+    class MenubarSubTrigger < Base
+      def initialize(inset: false, **attrs)
+        @inset = inset
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          yield if block_given?
+          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-auto size-4"
+          ) { |s| s.path(d: "m9 18 6-6-6-6") }
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex cursor-default items-center 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",
+          @attrs.delete(:class)
+        )
+        result = @attrs.merge(data_slot: "menubar-sub-trigger", class: classes)
+        result[:data_inset] = true if @inset
+        result
+      end
+    end
+
+    class MenubarSubContent < 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-[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: "menubar-sub-content", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/native_select.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui NativeSelect
+    class NativeSelect < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        select(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "border-input flex h-9 w-full items-center rounded-md border bg-transparent px-3 py-1 text-base 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 md:text-sm",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "dark:bg-input/30",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "native-select", class: classes)
+      end
+    end
+  end
+end