shadcn_view_components 0.2.0

data/app/components/shadcn/switch.rb

@@ -0,0 +1,79 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Switch < BaseComponent
+    include NativeCheckedState
+
+    NATIVE_STATE_CLASS = "not-checked:bg-input dark:not-checked:bg-input/80 checked:bg-primary disabled:cursor-not-allowed disabled:opacity-50"
+    # 契約タグは SwitchPrimitive.Root。ネイティブな input[type=checkbox][role=switch] として
+    # 描く(JS無しで動作 — 05-stimulus-hotwire §3)。ツマミは input の兄弟に置き、
+    # peer-checked: で移動させる(契約の data-[state] ユーティリティを peer-checked 系に
+    # キーし直した装飾を追加している)
+    sig { override.returns(String) }
+    def default_tag
+      "input"
+    end
+
+    # upstream は size(default/sm)を data-size 属性として描画する
+    sig do
+      params(
+        size: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(size: self.class.property_default(:size), **args)
+      @size = T.let(normalize_property(:size, size), String)
+      super(**args)
+    end
+
+    sig { returns(String) }
+    attr_reader :size
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(size: @size)
+    end
+
+    sig { override.returns(String) }
+    def call
+      content_tag(:span, class: "relative inline-flex") do
+        safe_join([input_element, thumb_element])
+      end
+    end
+
+    private
+
+    sig { returns(String) }
+    def input_element
+      attributes = html_attributes.merge(type: "checkbox", role: "switch")
+      # ネイティブチェックボックスのウィジェット描画(appearance:auto)はCSSの
+      # 背景/角丸の上にOS標準の箱を塗る(dark時は白箱として視覚差になる)ため消す。
+      # 契約の data-[state] 系背景クラスを素の要素に効かせるために必要
+      attributes[:class] = [attributes[:class], "appearance-none", NATIVE_STATE_CLASS].compact.join(" ")
+      merge_native_checked_state(attributes, checked: native_checked?(@html_args))
+      void_tag("input", **attributes)
+    end
+
+    sig { returns(String) }
+    def thumb_element
+      thumb_class = T.cast(contract_slot("switch-thumb").dig(:static_attributes, :class), T.nilable(String))
+      # 契約のツマミサイズ(group-data-[size]/switch:size-*)はルートをgroupとする
+      # 子孫向けユーティリティのため、ネイティブinput構成ではツマミが兄弟になるので
+      # 発火しない。sizeはコンポーネント側で明示する(契約のdata-size値と同じ)
+      size_class = @size == "sm" ? "size-3" : "size-4"
+      decoration = [
+        "pointer-events-none absolute left-0.5 top-1/2 -translate-y-1/2 translate-x-0",
+        "peer-checked:translate-x-[calc(100%-2px)] peer-not-checked:translate-x-0",
+        "dark:peer-checked:bg-primary-foreground dark:peer-not-checked:bg-foreground transition-transform",
+        size_class
+      ].join(" ")
+      content_tag(
+        :span,
+        data: { slot: "switch-thumb" }.merge(native_checked_data(checked: native_checked?(@html_args))),
+        aria: { hidden: "true" },
+        class: [thumb_class, decoration].compact.join(" ")
+      ) { "".html_safe }
+    end
+  end
+end

data/app/components/shadcn/table.rb

@@ -0,0 +1,46 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Table < BaseComponent
+    # upstream は table を overflow-x-auto のラッパーdivで挟む構造。
+    # 契約のルート(table-container)は cn を経ない静的クラス(static_attributes["class"])を持ち、
+    # 契約クラス(combinations)は内側の table 要素が持つ(CLASSES_SLOT = "table")
+    sig { override.returns(String) }
+    def call
+      content_tag(:div, class: container_class, data: { slot: contract_root_slot[:name] }) do
+        content_tag(:table, **table_attributes) { content }
+      end
+    end
+
+    private
+
+    sig { returns(T.nilable(String)) }
+    def container_class
+      T.cast(contract_root_slot[:static_attributes], T::Hash[Symbol, T.untyped])[:class]
+    end
+
+    # 内側の table に契約クラスを適用する。ラッパーの静的クラスは混ぜない
+    sig { returns(T::Hash[Symbol, T.untyped]) }
+    def table_attributes
+      attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+      merge_nested(attributes, :data, { slot: self.class.contract.const_get(:CLASSES_SLOT) })
+      merge_nested(attributes, :aria, {})
+      attributes
+    end
+
+    class Header < BaseComponent; end
+
+    class Body < BaseComponent; end
+
+    class Footer < BaseComponent; end
+
+    class Head < BaseComponent; end
+
+    class Row < BaseComponent; end
+
+    class Cell < BaseComponent; end
+
+    class Caption < BaseComponent; end
+  end
+end

data/app/components/shadcn/tabs.rb

@@ -0,0 +1,119 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ARIA tabs パターン + roving tabindex(10-roadmap Phase 2 / 05 §4)。
+  # 選択状態は data-state で持ち、パネルの表示切替もコントローラが行う
+  # JS無効時フォールバック: Readable(SSRされた全パネルが展開された状態で出力される)
+  class Tabs < BaseComponent
+    CONTROLLER = "shadcn--tabs"
+
+    sig { params(orientation: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(orientation: self.class.property_default(:orientation), **args)
+      assign_accessibility_root_id(args, prefix: "tabs")
+      @orientation = T.let(normalize_property(:orientation, orientation), String)
+      super(**args)
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(
+        controller: CONTROLLER,
+        orientation: @orientation
+      )
+    end
+
+    class List < BaseComponent
+      sig do
+        params(
+          variant: T.any(Symbol, String),
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(variant: ShadcnViewComponents::Contracts::Tabs::List::DEFAULTS.fetch(:variant), **args)
+        @variant = T.let(normalize_option(:variant, variant), Symbol)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, VariantOption]) }
+      def variant_options
+        { variant: @variant }
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_nested(attributes, :data, { variant: @variant })
+        attributes[:role] = "tablist"
+        attributes
+      end
+    end
+
+    class Trigger < BaseComponent
+      CONTROLLER = "shadcn--tabs"
+
+      sig do
+        params(
+          value: String,
+          active: T::Boolean,
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(value:, active: false, **args)
+        raw_value = T.let(T.unsafe(value), T.untyped)
+        raise ArgumentError, "value must be a non-empty String" unless raw_value.is_a?(String) && !raw_value.strip.empty?
+
+        @value = T.let(value, String)
+        @active = active
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        # base-nova は選択状態を data-active(属性の存在)で表現する
+        state_attributes = @active ? { active: "" } : {}
+        merge_nested(attributes, :data, {
+          value: @value
+        }.compact.merge(state_attributes))
+        merge_nested(attributes, :aria, { selected: @active.to_s })
+        attributes[:role] = "tab"
+        attributes[:tabindex] = @active ? 0 : -1
+        attributes[:type] = "button" unless attributes.key?(:type) || tag == "a"
+        attributes
+      end
+
+      # contract_data_attributes の slot に action を足す(ルートが button のため)
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def contract_data_attributes
+        super.merge(
+          action: "click->#{CONTROLLER}#select keydown->#{CONTROLLER}#navigate"
+        )
+      end
+    end
+
+    class Content < BaseComponent
+      sig { params(value: String, args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(value:, **args)
+        raw_value = T.let(T.unsafe(value), T.untyped)
+        raise ArgumentError, "value must be a non-empty String" unless raw_value.is_a?(String) && !raw_value.strip.empty?
+
+        @value = T.let(value, String)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_nested(attributes, :data, { value: @value }.compact)
+        attributes[:role] = "tabpanel"
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/textarea.rb

@@ -0,0 +1,7 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Textarea < BaseComponent
+  end
+end

data/app/components/shadcn/toggle.rb

@@ -0,0 +1,66 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Toggle < BaseComponent
+    # 契約タグは TogglePrimitive.Root。button + data-state + 小コントローラ
+    # (shadcn--toggle)で開閉する(05-stimulus-hotwire §3「toggle = button + data-state」)
+    # JS無効時フォールバック: Readable(押下状態は変わらないが内容の読み取りに支障無し)
+    CONTROLLER = "shadcn--toggle"
+
+    # 契約タグは TogglePrimitive.Root。ネイティブな button として描く
+    sig { override.returns(String) }
+    def default_tag
+      "button"
+    end
+
+    # state(on/off)は初期状態。以降はコントローラが data-state / aria-pressed を書き換える
+    sig do
+      params(
+        variant: T.any(Symbol, String),
+        size: T.any(Symbol, String),
+        state: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: ShadcnViewComponents::Contracts::Toggle::DEFAULTS.fetch(:variant),
+                   size: ShadcnViewComponents::Contracts::Toggle::DEFAULTS.fetch(:size),
+                   state: self.class.property_default(:state), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      @size = T.let(normalize_option(:size, size), Symbol)
+      @state = T.let(normalize_property(:state, state), String)
+      super(**args)
+    end
+
+    sig { returns(Symbol) }
+    attr_reader :variant
+
+    sig { returns(Symbol) }
+    attr_reader :size
+
+    sig { returns(String) }
+    attr_reader :state
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { variant: @variant, size: @size }
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(
+        controller: CONTROLLER,
+        state: @state,
+        action: "#{CONTROLLER}#toggle"
+      )
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      merge_nested(attributes, :aria, { pressed: (@state == "on").to_s })
+      attributes[:type] = "button" unless @html_args.key?(:type) || attributes.key?(:type)
+      attributes
+    end
+  end
+end

data/app/components/shadcn/toggle_group.rb

@@ -0,0 +1,127 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class ToggleGroup < BaseComponent
+    # JS無効時フォールバック: Readable(選択状態は変わらないが内容の読み取りに支障無し)
+
+    # 契約タグは ToggleGroupPrimitive.Root。排他制御は shadcn--toggle-group コントローラが担う
+    CONTROLLER = "shadcn--toggle-group"
+
+    # type: :single は常に1つのみ on(コントローラが排他処理)。spacing は --gap CSS変数。
+    # variant/size は upstream と同じくグループの data 属性に出力する
+    # (Item 側の装飾は group-data セレクタと Item 自身の data 属性で効く)
+    sig do
+      params(
+        type: T.any(Symbol, String),
+        spacing: T.any(Integer, Float, String),
+        variant: T.nilable(T.any(Symbol, String)),
+        size: T.nilable(T.any(Symbol, String)),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(type: self.class.property_default(:type),
+                   spacing: self.class.property_default(:spacing), variant: nil, size: nil, **args)
+      @group_type = T.let(normalize_property(:type, type), String)
+      @spacing = T.let(normalize_property(:spacing, spacing), T.any(Integer, Float))
+      # グループ自身の契約に軸は無いため、Item の許容値で検証する
+      @group_variant = T.let(variant.nil? ? nil : normalize_group_option(variant, :variant), T.nilable(Symbol))
+      @group_size = T.let(size.nil? ? nil : normalize_group_option(size, :size), T.nilable(Symbol))
+      super(**args)
+    end
+
+    sig { returns(String) }
+    attr_reader :group_type
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      attributes = super.merge(
+        controller: CONTROLLER,
+        type: @group_type
+      )
+      # upstream の Root と同じ data 属性(未指定のものは描かない)
+      attributes[:variant] = @group_variant if @group_variant
+      attributes[:size] = @group_size if @group_size
+      attributes[:spacing] = @spacing.to_s
+      attributes
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      merge_style(attributes, { "--gap": @spacing.to_s })
+      attributes
+    end
+
+    private
+
+    # グループの variant/size を Item の許容値で fail-fast 検証する
+    sig { params(value: T.untyped, prop: Symbol).returns(Symbol) }
+    def normalize_group_option(value, prop)
+      ShadcnViewComponents::Classes.normalize_option(:"toggle_group/item", prop, value)
+    end
+
+    class Item < BaseComponent
+      # 契約タグは ToggleGroupPrimitive.Item。ネイティブな button として描く。
+      # 開閉状態は親の shadcn--toggle-group コントローラが管理する(data-action で委譲)
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      # variant/size はupstreamではグループのcontextから受け取る。Ruby側では
+      # 利用者が各Itemに指定する(規約: 省略時は契約の既定値)。
+      # spacing はグループと同じ既定値2を使い、data属性に出力する
+      sig do
+        params(
+          variant: T.any(Symbol, String),
+          size: T.any(Symbol, String),
+          state: T.any(Symbol, String),
+          spacing: T.any(Integer, Float, String),
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(variant: ShadcnViewComponents::Contracts::ToggleGroup::Item::DEFAULTS.fetch(:variant),
+                     size: ShadcnViewComponents::Contracts::ToggleGroup::Item::DEFAULTS.fetch(:size),
+                     state: self.class.property_default(:state),
+                     spacing: self.class.property_default(:spacing), **args)
+        @variant = T.let(normalize_option(:variant, variant), Symbol)
+        @size = T.let(normalize_option(:size, size), Symbol)
+        @state = T.let(normalize_property(:state, state), String)
+        @spacing = T.let(normalize_property(:spacing, spacing), T.any(Integer, Float))
+        super(**args)
+      end
+
+      sig { returns(Symbol) }
+      attr_reader :variant
+
+      sig { returns(Symbol) }
+      attr_reader :size
+
+      sig { override.returns(T::Hash[Symbol, VariantOption]) }
+      def variant_options
+        { variant: @variant, size: @size }
+      end
+
+      # upstream の Item と同じ data 属性(spacing の角丸・枠線制御はここから効く)
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def contract_data_attributes
+        super.merge(
+          state: @state,
+          variant: @variant,
+          size: @size,
+          spacing: @spacing.to_s,
+          action: "#{ToggleGroup::CONTROLLER}#toggleItem"
+        )
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_nested(attributes, :aria, { pressed: (@state == "on").to_s })
+        attributes[:type] = "button" unless @html_args.key?(:type) || attributes.key?(:type)
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/tooltip.rb

@@ -0,0 +1,74 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 遅延制御付きツールチップ(05 §3「tooltip = Popover API + 遅延制御」)。
+  # JS無効時フォールバック: Readable(本文はSSR済み)
+  class Tooltip < BaseComponent
+    CONTROLLER = "shadcn--tooltip"
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(controller: CONTROLLER)
+    end
+
+    class Provider < BaseComponent
+      # delayDuration の既定は 0(upstream と同じ)
+    end
+
+    class Trigger < BaseComponent
+      include Shadcn::ButtonStyled
+
+      # 契約タグは TooltipPrimitive.Trigger(HTML名ではない)だが、upstream の
+      # トリガーは button 要素として描かれるため button にフォールバックさせる
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = apply_button_styling(super)
+        attributes[:type] = "button" unless attributes.key?(:type)
+        merge_nested(attributes, :data, {
+                       action: "mouseenter->#{CONTROLLER}#show mouseleave->#{CONTROLLER}#hide focus->#{CONTROLLER}#show blur->#{CONTROLLER}#hide"
+                     })
+        attributes
+      end
+    end
+
+    class Content < BaseComponent
+      include Shadcn::FloatingPositionOptions
+
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :top, align: :center, side_offset: 4, align_offset: 0, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # 契約スロット構成: tooltip-content(arrow は data-slot を持たない装飾要素)
+      sig { override.returns(String) }
+      def call
+        content_tag(:div, **content_attributes) do
+          safe_join([content.presence, arrow])
+        end
+      end
+
+      private
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def content_attributes
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        merge_floating_position_data(attributes, slot: "tooltip-content", state: "closed")
+        attributes[:role] = "tooltip"
+        attributes[:hidden] = true
+        attributes
+      end
+
+      # upstream の Arrow(静的クラスは契約スロット外の直書き)
+      sig { returns(String) }
+      def arrow
+        content_tag(:div, class: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground") { "".html_safe }
+      end
+    end
+  end
+end

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+pin_all_from File.expand_path("../app/assets/javascripts/shadcn", __dir__),
+             under: "@supermomonga/shadcn-view-components",
+             to: "shadcn"