shadcn-phlex 0.1.0

data/lib/shadcn/ui/alert_dialog.rb

@@ -0,0 +1,220 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui AlertDialog
+    class AlertDialog < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "alert-dialog",
+          data_controller: "shadcn--dialog",
+          data_shadcn__dialog_close_on_overlay_value: false
+        )
+      end
+    end
+
+    class AlertDialogTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(
+          data_slot: "alert-dialog-trigger",
+          data_shadcn__dialog_target: "trigger",
+          data_action: "click->shadcn--dialog#show",
+          role: "button",
+          style: "display: inline-block"
+        )
+      end
+    end
+
+    class AlertDialogOverlay < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        div(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "fixed inset-0 z-50 bg-black/50",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "alert-dialog-overlay",
+          data_shadcn__dialog_target: "overlay",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class AlertDialogContent < Base
+      def initialize(size: :default, **attrs)
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        render AlertDialogOverlay.new
+
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]",
+          "translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200",
+          "data-[size=sm]:max-w-xs",
+          "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-[size=default]:sm:max-w-lg",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "alert-dialog-content",
+          data_shadcn__dialog_target: "content",
+          data_size: @size,
+          role: "alertdialog",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+
+    class AlertDialogHeader < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center",
+          "sm:group-data-[size=default]/alert-dialog-content:place-items-start",
+          "sm:group-data-[size=default]/alert-dialog-content:text-left",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "alert-dialog-header", class: classes)
+      end
+    end
+
+    class AlertDialogFooter < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex flex-col-reverse gap-2",
+          "group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2",
+          "sm:flex-row sm:justify-end",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "alert-dialog-footer", class: classes)
+      end
+    end
+
+    class AlertDialogTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h2(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("text-lg font-semibold", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "alert-dialog-title",
+          data_shadcn__dialog_target: "title",
+          class: classes
+        )
+      end
+    end
+
+    class AlertDialogDescription < 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: "alert-dialog-description",
+          data_shadcn__dialog_target: "description",
+          class: classes
+        )
+      end
+    end
+
+    class AlertDialogAction < Base
+      def initialize(variant: :default, size: :default, **attrs)
+        @variant = variant
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        render Button.new(variant: @variant, size: @size, data_slot: "alert-dialog-action", **@attrs, &block)
+      end
+    end
+
+    class AlertDialogCancel < Base
+      def initialize(variant: :outline, size: :default, **attrs)
+        @variant = variant
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        render Button.new(variant: @variant, size: @size, data_slot: "alert-dialog-cancel", data_action: "click->shadcn--dialog#hide", **@attrs, &block)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/aspect_ratio.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui AspectRatio
+    # Uses the padding-bottom trick with absolute-positioned children
+    class AspectRatio < Base
+      def initialize(ratio: 1.0, **attrs)
+        @ratio = ratio
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          div(style: "position: absolute; inset: 0;", &block)
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("relative w-full", @attrs.delete(:class))
+        style = "position: relative; padding-bottom: #{(1.0 / @ratio * 100).round(4)}%"
+        existing_style = @attrs.delete(:style)
+        style = "#{existing_style}; #{style}" if existing_style
+
+        @attrs.merge(
+          data_slot: "aspect-ratio",
+          class: classes,
+          style: style
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/avatar.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Avatar
+    # Sizes: default, sm, lg
+    class Avatar < Base
+      def initialize(size: :default, **attrs)
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none",
+          "data-[size=lg]:size-10 data-[size=sm]:size-6",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "avatar", data_size: @size, class: classes)
+      end
+    end
+
+    class AvatarImage < Base
+      def initialize(src:, alt: "", **attrs)
+        @src = src
+        @alt = alt
+        @attrs = attrs
+      end
+
+      def view_template
+        img(**build_attrs)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("aspect-square size-full", @attrs.delete(:class))
+        @attrs.merge(data_slot: "avatar-image", src: @src, alt: @alt, class: classes)
+      end
+    end
+
+    class AvatarFallback < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground",
+          "group-data-[size=sm]/avatar:text-xs",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "avatar-fallback", class: classes)
+      end
+    end
+
+    class AvatarBadge < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full",
+          "bg-primary text-primary-foreground ring-2 ring-background select-none",
+          "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+          "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+          "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "avatar-badge", class: classes)
+      end
+    end
+
+    class AvatarGroup < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "avatar-group", class: classes)
+      end
+    end
+
+    class AvatarGroupCount < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "relative flex size-8 shrink-0 items-center justify-center rounded-full",
+          "bg-muted text-sm text-muted-foreground ring-2 ring-background",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "avatar-group-count", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/badge.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Badge
+    # Variants: default, secondary, destructive, outline, ghost, link
+    class Badge < Base
+      VARIANTS = ClassVariants.build(
+        base: [
+          "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap",
+          "transition-[color,box-shadow]",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          "[&>svg]:pointer-events-none [&>svg]:size-3"
+        ].join(" "),
+        variants: {
+          variant: {
+            default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+            outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 [a&]:hover:underline"
+          }
+        },
+        defaults: {
+          variant: :default
+        }
+      )
+
+      def initialize(variant: :default, **attrs)
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(VARIANTS.render(variant: @variant), @attrs.delete(:class))
+        @attrs.merge(data_slot: "badge", class: classes)
+      end
+    end
+  end
+end

data/lib/shadcn/ui/breadcrumb.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Breadcrumb
+    class Breadcrumb < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        nav(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        @attrs.merge(data_slot: "breadcrumb", aria_label: "breadcrumb")
+      end
+    end
+
+    class BreadcrumbList < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        ol(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "breadcrumb-list", class: classes)
+      end
+    end
+
+    class BreadcrumbItem < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        li(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("inline-flex items-center gap-1.5", @attrs.delete(:class))
+        @attrs.merge(data_slot: "breadcrumb-item", class: classes)
+      end
+    end
+
+    class BreadcrumbLink < Base
+      def initialize(href: "#", **attrs)
+        @href = href
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        a(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("transition-colors hover:text-foreground", @attrs.delete(:class))
+        @attrs.merge(data_slot: "breadcrumb-link", href: @href, class: classes)
+      end
+    end
+
+    class BreadcrumbPage < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        span(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("font-normal text-foreground", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "breadcrumb-page",
+          role: "link",
+          aria_disabled: "true",
+          aria_current: "page",
+          class: classes
+        )
+      end
+    end
+
+    class BreadcrumbSeparator < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        li(**build_attrs) do
+          if block_given?
+            yield
+          else
+            # Default ChevronRight icon
+            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: "m9 18 6-6-6-6")
+            end
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("[&>svg]:size-3.5", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "breadcrumb-separator",
+          role: "presentation",
+          aria_hidden: "true",
+          class: classes
+        )
+      end
+    end
+
+    class BreadcrumbEllipsis < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template
+        span(**build_attrs) 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",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            class: "size-4"
+          ) do |s|
+            s.circle(cx: "12", cy: "12", r: "1")
+            s.circle(cx: "19", cy: "12", r: "1")
+            s.circle(cx: "5", cy: "12", r: "1")
+          end
+          span(class: "sr-only") { "More" }
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("flex size-9 items-center justify-center", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "breadcrumb-ellipsis",
+          role: "presentation",
+          aria_hidden: "true",
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/button.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Button
+    # Variants: default, destructive, outline, secondary, ghost, link
+    # Sizes: default, xs, sm, lg, icon, icon_xs, icon_sm, icon_lg
+    class Button < Base
+      VARIANTS = ClassVariants.build(
+        base: [
+          "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap",
+          "transition-all outline-none",
+          "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",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        ].join(" "),
+        variants: {
+          variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline"
+          },
+          size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            icon_xs: "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+            icon_sm: "size-8 rounded-md",
+            icon_lg: "size-10 rounded-md"
+          }
+        },
+        defaults: {
+          variant: :default,
+          size: :default
+        }
+      )
+
+      def initialize(variant: :default, size: :default, tag: :button, **attrs)
+        @variant = variant
+        @size = size
+        @tag = tag
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        send(@tag, **build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(VARIANTS.render(variant: @variant, size: @size), @attrs.delete(:class))
+        @attrs.merge(data_slot: "button", class: classes)
+      end
+    end
+  end
+end