shadcn_phlexcomponents 0.1.9 → 0.1.14

data/lib/shadcn_phlexcomponents/components/sheet.rb

@@ -0,0 +1,243 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Sheet < Base
+    class_variants(base: "inline-flex max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "sheet-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      SheetTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      SheetContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def header(**attributes, &)
+      SheetHeader(**attributes, &)
+    end
+
+    def title(**attributes, &)
+      SheetTitle(aria_id: @aria_id, **attributes, &)
+    end
+
+    def description(**attributes, &)
+      SheetDescription(aria_id: @aria_id, **attributes, &)
+    end
+
+    def footer(**attributes, &)
+      SheetFooter(**attributes, &)
+    end
+
+    def close(**attributes, &)
+      SheetClose(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "dialog",
+          dialog_is_open_value: @open.to_s
+        }
+      }  
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        overlay("dialog")
+        
+        yield
+      end
+    end
+  end
+
+  class SheetTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        data: { 
+          as_child: @as_child.to_s,
+          dialog_target: "trigger",
+          action: "click->dialog#open"
+        },
+      }
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+  end
+
+  class SheetContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4
+        shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500
+        pointer-events-auto outline-none
+      HEREDOC
+      variants: {
+        side: {
+          top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          left: "h-screen data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 w-3/4 border-r sm:max-w-sm",
+          right: "h-screen data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 w-3/4 border-l sm:max-w-sm",
+          bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+        },
+      },
+      defaults: {
+        side: :right,
+      },
+    )
+
+    def initialize(side: :right, aria_id: nil, **attributes)
+      @class_variants = { side: side }
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(style: { display: "none" }, **@attributes) do
+        yield
+
+        button(
+          class: <<~HEREDOC,
+            ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs
+            opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden
+            disabled:pointer-events-none
+          HEREDOC
+          data: { action: "click->dialog#close" },
+        ) do
+          icon("x", class: "size-4")
+          span(class: "sr-only") { "close" }
+        end
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        aria: {
+          describedby: "#{@aria_id}-description",
+          labelledby: "#{@aria_id}-title",
+        },
+        data: {
+          state: "closed",
+          dialog_target: "content"
+        },
+      }
+    end
+  end
+
+  class SheetHeader < Base
+    class_variants(base: "flex flex-col gap-1.5 p-4")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class SheetTitle < Base
+    class_variants(base: "text-foreground font-semibold")
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-title",
+      }
+    end
+
+    def view_template(&)
+      h2(**@attributes, &)
+    end
+  end
+
+  class SheetDescription < Base
+    class_variants(base: "text-muted-foreground text-sm")
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-description",
+      }
+    end
+
+    def view_template(&)
+      p(**@attributes, &)
+    end
+  end
+
+  class SheetFooter < Base
+    class_variants(base: "mt-auto flex flex-col gap-2 p-4")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class SheetClose < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        data: {
+          action: "click->dialog#close",
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/{skeleton/skeleton.rb → skeleton.rb}

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Skeleton < Base
-    STYLES = "animate-pulse rounded-md bg-primary/10"
+    class_variants(base: "bg-accent animate-pulse rounded-md")
 
     def view_template(&)
       div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/slider.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Slider < Base
+    def initialize(name: nil, value: nil, id: nil, range: false, orientation: :horizontal, step: 1, min: 0, max: 100, disabled: false, options: false, **attributes)
+      if range
+        if name && !name.is_a?(Array)
+          raise ArgumentError, "Expected an array for \"name\", got #{name.class}"
+        end
+
+        if value && !value.is_a?(Array)
+          raise ArgumentError, "Expected an array for \"value\", got #{value.class}"
+        end
+      end
+      @range = range
+      @name = range && name ? name[0] : name
+      @end_name = range && name ? name[1] : nil
+      @value = range && value ? value[0] : value
+      @end_value = range && value ? value[1] : nil
+      @id = id
+      @orientation = orientation
+      @step = step
+      @min = min
+      @max = max
+      @disabled = disabled
+      @options = options
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "slider",
+          range: @range.to_s,
+          options: @options.to_json,
+          value: @value,
+          end_value: @end_value,
+          orientation: @orientation,
+          step: @step,
+          min: @min,
+          max: @max,
+          disabled: @disabled.to_s,
+          id: @id,
+        },
+      }
+    end
+
+    def view_template
+      div(class: "py-[6px]") do
+        div(**@attributes) do
+          input(
+            type: :hidden,
+            name: @name,
+            value: @value,
+            data: { slider_target: "hiddenInput" },
+          )
+
+          if @range
+            input(
+              type: :hidden,
+              name: @end_name,
+              value: @end_value,
+              data: { slider_target: "endHiddenInput" },
+            )
+          end
+
+          div(data: { slider_target: "slider" })
+        end
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/switch.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Switch < Base
+    class_variants(
+      base: <<~HEREDOC,
+        peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring
+        focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem]
+        w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all
+        outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative
+      HEREDOC
+    )
+
+    def initialize(name: nil, value: "1", unchecked_value: "0", checked: false, include_hidden: true, disabled: false, **attributes)
+      @name = name
+      @value = value
+      @unchecked_value = unchecked_value
+      @checked = checked
+      @include_hidden = include_hidden
+      @disabled = disabled
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        span(
+          class: <<~HEREDOC,
+            bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground
+            pointer-events-none block size-4 rounded-full ring-0 transition-transform
+            data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0
+          HEREDOC
+          data: {
+            switch_target: "thumb",
+            state: @checked ? "checked" : "unchecked",
+          },
+        )
+
+        if @include_hidden
+          input(name: @name, type: "hidden", value: @unchecked_value, autocomplete: "off")
+        end
+
+        input(
+          type: "checkbox",
+          value: @value,
+          class: "-translate-x-full pointer-events-none absolute m-0 top-0 left-0 size-4 opacity-0",
+          name: @name,
+          disabled: @disabled,
+          tabindex: -1,
+          checked: @checked,
+          aria: { hidden: "true" },
+          data: {
+            switch_target: "input",
+          },
+        )
+      end
+    end
+
+    def default_attributes
+      {
+        type: "button",
+        role: "switch",
+        disabled: @disabled,
+        aria: {
+          checked: @checked.to_s,
+        },
+        data: {
+          state: @checked ? "checked" : "unchecked",
+          controller: "switch",
+          action: "click->switch#toggle",
+          switch_is_checked_value: @checked.to_s,
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/table.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Table < Base
+    class_variants(base: "w-full caption-bottom text-sm")
+
+    def initialize(**attributes)
+      @columns = []
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(class: "relative w-full overflow-x-auto") do
+        table(**@attributes, &)
+      end
+    end
+
+    def caption(**attributes, &)
+      TableCaption(**attributes, &)
+    end
+
+    def header(**attributes, &)
+      TableHeader(**attributes, &)
+    end
+
+    def row(**attributes, &)
+      TableRow(**attributes, &)
+    end
+
+    def head(**attributes, &)
+      TableHead(**attributes, &)
+    end
+
+    def body(**attributes, &)
+      TableBody(**attributes, &)
+    end
+
+    def cell(**attributes, &)
+      TableCell(**attributes, &)
+    end
+
+    def footer(**attributes, &)
+      TableFooter(**attributes, &)
+    end
+
+    def rows(rows, &)
+      @rows = rows
+
+      vanish(&)
+
+      thead(class: TableHeader.new.class_variants) do
+        tr(class: TableRow.new.class_variants) do
+          @columns.each do |column|
+            th(class: TAILWIND_MERGER.merge("#{TableHead.new.class_variants} #{column[:head_class]}")) { column[:header] }
+          end
+        end
+      end
+
+      tbody(class: TableBody.new.class_variants) do
+        @rows.each do |row|
+          tr(class: TableRow.new.class_variants) do
+            @columns.each do |column|
+              td(class: TAILWIND_MERGER.merge("#{TableCell.new.class_variants} #{column[:cell_class]}")) do
+                column[:content].call(row)
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def column(header, head_class: nil, cell_class: nil, &content)
+      @columns << { header:, head_class:, cell_class:, content: }
+      nil
+    end
+  end
+
+  class TableCaption < Base
+    class_variants(base: "text-muted-foreground mt-4 text-sm")
+
+    def view_template(&)
+      caption(**@attributes, &)
+    end
+  end
+
+  class TableHeader < Base
+    class_variants(base: "[&_tr]:border-b")
+
+    def view_template(&)
+      thead(**@attributes, &)
+    end
+  end
+
+  class TableRow < Base
+    class_variants(base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors")
+
+    def view_template(&)
+      tr(**@attributes, &)
+    end
+  end
+
+  class TableHead < Base
+    class_variants(
+      base: <<~HEREDOC,
+        text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0
+        [&>[role=checkbox]]:translate-y-[2px]"
+      HEREDOC
+    )
+
+    def view_template(&)
+      th(**@attributes, &)
+    end
+  end
+
+  class TableBody < Base
+    class_variants(base: "[&_tr:last-child]:border-0")
+
+    def view_template(&)
+      tbody(**@attributes, &)
+    end
+  end
+
+  class TableCell < Base
+    class_variants(
+      base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+    )
+
+    def view_template(&)
+      td(**@attributes, &)
+    end
+  end
+
+  class TableFooter < Base
+    class_variants(base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0")
+
+    def view_template(&)
+      tfoot(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/tabs.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Tabs < Base
+    class_variants(base: "flex flex-col gap-2")
+
+    def initialize(value: nil, dir: "ltr", **attributes)
+      @dir = dir
+      @value = value
+      @aria_id = "tabs-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def list(**attributes, &)
+      TabsList(**attributes, &)
+    end
+
+    def trigger(**attributes, &)
+      TabsTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      TabsContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        dir: @dir,
+        data: {
+          controller: "tabs",
+          tabs_active_value: @value,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class TabsList < Base
+    class_variants(
+      base: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+    )
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "tablist",
+        tabindex: "-1",
+        aria: {
+          orientation: "horizontal",
+        },
+      }
+    end
+  end
+
+  class TabsTrigger < Base
+    class_variants(
+      base: <<~HEREDOC,
+        data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring
+        focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input
+        dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground 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 transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1
+        disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none
+        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+      HEREDOC
+    )
+
+    def initialize(value: nil, aria_id: nil, **attributes)
+      @value = value
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-trigger-#{@value}",
+        role: "tab",
+        tabindex: "-1",
+        aria: {
+          controls: "#{@aria_id}-content-#{@value}",
+          selected: false,
+        },
+        data: {
+          tabs_target: "trigger",
+          value: @value,
+          state: "inactive",
+          action: <<~HEREDOC,
+            click->tabs#setActiveTab
+            keydown.left->tabs#setActiveTab:prevent
+            keydown.right->tabs#setActiveTab:prevent
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class TabsContent < Base
+    class_variants(base: "flex-1 outline-none")
+
+    def initialize(value: nil, aria_id: nil, **attributes)
+      @value = value
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content-#{@value}",
+        role: "tabpanel",
+        tabindex: "0",
+        aria: {
+          labelledby: "#{@aria_id}-trigger-#{@value}",
+        },
+        data: {
+          value: @value,
+          tabs_target: "content",
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/textarea.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Textarea < Base
+    class_variants(
+      base: <<~HEREDOC,
+        border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+        dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2
+        text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+        disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+      HEREDOC
+    )
+
+    def initialize(value: nil, **attributes)
+      @value = value
+      super(**attributes)
+    end
+
+    def view_template(&)
+      textarea(**@attributes) { @value }
+    end
+  end
+end