shadcn_view_components 0.2.0

data/app/components/shadcn/input_otp.rb

@@ -0,0 +1,265 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 実inputを値・selection・フォーム送信の唯一の情報源にし、Slot群はその派生表示とする。
+  # inputMode=numericはソフトウェアキーボードへのhintであり、入力制限は利用者指定patternが担う。
+  class InputOTP < BaseComponent
+    CONTROLLER = "shadcn--input-otp"
+
+    module Markup
+      CONTAINER_CLASS = "cn-input-otp flex items-center has-disabled:opacity-50"
+      CONTAINER_STYLE = "position: relative; cursor: %<cursor>s; user-select: none; " \
+                        "-webkit-user-select: none; pointer-events: none"
+      DISPLAY_STYLE = "display: contents"
+      INPUT_ACTION = T.let([
+        "input->#{InputOTP::CONTROLLER}#sync",
+        "change->#{InputOTP::CONTROLLER}#sync",
+        "focus->#{InputOTP::CONTROLLER}#sync",
+        "blur->#{InputOTP::CONTROLLER}#sync",
+        "select->#{InputOTP::CONTROLLER}#sync",
+        "invalid->#{InputOTP::CONTROLLER}#sync",
+        "compositionstart->#{InputOTP::CONTROLLER}#compositionStart",
+        "compositionend->#{InputOTP::CONTROLLER}#compositionEnd"
+      ].join(" ").freeze, String)
+      INPUT_STYLE = T.let({
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        text_align: "left",
+        opacity: 1,
+        color: "transparent",
+        pointer_events: "all",
+        background: "transparent",
+        caret_color: "transparent",
+        border: "0 solid transparent",
+        outline: "0 solid transparent",
+        box_shadow: "none",
+        line_height: 1,
+        letter_spacing: "-.5em",
+        font_size: "var(--root-height, 16px)",
+        font_family: "monospace",
+        font_variant_numeric: "tabular-nums"
+      }.freeze, T::Hash[Symbol, T.untyped])
+      INPUT_OVERLAY_STYLE = "position: absolute; inset: 0; pointer-events: none"
+      NOSCRIPT_CSS_FALLBACK = <<~CSS
+        [data-input-otp] {
+          --nojs-bg: white !important;
+          --nojs-fg: black !important;
+
+          background-color: var(--nojs-bg) !important;
+          color: var(--nojs-fg) !important;
+          caret-color: var(--nojs-fg) !important;
+          letter-spacing: .25em !important;
+          text-align: center !important;
+          border: 1px solid var(--nojs-fg) !important;
+          border-radius: 4px !important;
+          width: 100% !important;
+        }
+        @media (prefers-color-scheme: dark) {
+          [data-input-otp] {
+            --nojs-bg: black !important;
+            --nojs-fg: white !important;
+          }
+        }
+      CSS
+    end
+
+    private_constant :Markup
+
+    sig do
+      params(
+        length: T.any(Integer, String),
+        value: T.nilable(String),
+        container_class: T.nilable(String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(length: self.class.property_default(:length), value: nil, container_class: nil, **args)
+      @length = T.let(normalize_property(:length, length), Integer)
+      @value = T.let(value&.slice(0, @length), T.nilable(String))
+      @container_class = T.let(container_class, T.nilable(String))
+      super(**args)
+    end
+
+    sig { override.returns(String) }
+    def call
+      safe_join([noscript_fallback, input_container])
+    end
+
+    private
+
+    sig { returns(String) }
+    def input_container
+      content_tag(
+        :div,
+        class: container_class,
+        style: format(Markup::CONTAINER_STYLE, cursor: disabled? ? "default" : "text"),
+        data: { controller: CONTROLLER, input_otp_container: "" }
+      ) do
+        safe_join([decorative_display, input_overlay])
+      end
+    end
+
+    sig { returns(String) }
+    def decorative_display
+      data = T.let({ input_otp_display: "" }, T::Hash[Symbol, T.untyped])
+      data[:disabled] = "" if disabled?
+      data[:invalid] = "" if invalid?
+
+      content_tag(:div, style: Markup::DISPLAY_STYLE, aria: { hidden: "true" }, data:) do
+        content? ? content : standard_group
+      end
+    end
+
+    sig { returns(String) }
+    def standard_group
+      render(Group.new) do
+        safe_join(Array.new(@length) { |index| standard_slot(index) })
+      end
+    end
+
+    sig { params(index: Integer).returns(String) }
+    def standard_slot(index)
+      data = T.let({}, T::Hash[Symbol, T.untyped])
+      data[:disabled] = "" if disabled?
+
+      render(Slot.new(index:, data:, aria: { invalid: invalid?.to_s })) do
+        @value.to_s[index].to_s
+      end
+    end
+
+    sig { returns(String) }
+    def input_overlay
+      content_tag(:div, style: Markup::INPUT_OVERLAY_STYLE) { input_element }
+    end
+
+    sig { returns(String) }
+    def input_element
+      attributes = html_attributes
+      attributes[:type] = "text"
+      attributes[:inputmode] = "numeric" unless attributes.key?(:inputmode)
+      attributes[:maxlength] = @length
+      attributes[:autocomplete] = "one-time-code" unless attributes.key?(:autocomplete)
+      attributes[:spellcheck] = false unless attributes.key?(:spellcheck)
+      attributes[:value] = @value unless @value.nil?
+      merge_style(attributes, Markup::INPUT_STYLE)
+      merge_input_data(attributes)
+      void_tag("input", **attributes)
+    end
+
+    sig { params(attributes: T::Hash[Symbol, T.untyped]).void }
+    def merge_input_data(attributes)
+      data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      user_action = data[:action]
+      attributes[:data] = data.merge(
+        input_otp: "",
+        action: [Markup::INPUT_ACTION, user_action].compact.join(" ")
+      )
+    end
+
+    sig { returns(String) }
+    def noscript_fallback
+      content_tag(:noscript) do
+        content_tag(:style) { raw(Markup::NOSCRIPT_CSS_FALLBACK) }
+      end
+    end
+
+    sig { returns(String) }
+    def container_class
+      ShadcnViewComponents::Classes::MERGER.merge(
+        [Markup::CONTAINER_CLASS, @container_class].compact.join(" ")
+      )
+    end
+
+    sig { returns(T::Boolean) }
+    def disabled?
+      !@html_args[:disabled].nil? && @html_args[:disabled] != false
+    end
+
+    sig { returns(T::Boolean) }
+    def invalid?
+      aria = T.cast(@html_args[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      aria[:invalid] == true || aria[:invalid].to_s == "true"
+    end
+
+    class Group < BaseComponent
+      # div
+    end
+
+    class Slot < BaseComponent
+      CARET_WRAPPER_CLASS = "pointer-events-none absolute inset-0 flex items-center justify-center"
+      CARET_CLASS = "h-4 w-px animate-caret-blink bg-foreground duration-1000"
+
+      private_constant :CARET_WRAPPER_CLASS, :CARET_CLASS
+
+      sig { params(index: T.any(Integer, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(index:, **args)
+        @index = T.let(normalize_property(:index, index), Integer)
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([character, fake_caret])
+        end
+      end
+
+      private
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap do |attributes|
+          data = T.cast(attributes[:data], T::Hash[Symbol, T.untyped])
+          data[:index] = @index
+          data[:active] = "false" unless data.key?(:active)
+        end
+      end
+
+      sig { returns(String) }
+      def character
+        content_tag(:span, data: { slot: "input-otp-character" }) { content }
+      end
+
+      sig { returns(String) }
+      def fake_caret
+        content_tag(
+          :div,
+          class: CARET_WRAPPER_CLASS,
+          hidden: true,
+          aria: { hidden: "true" },
+          data: { slot: "input-otp-caret" }
+        ) do
+          content_tag(:div, class: CARET_CLASS) { "".html_safe }
+        end
+      end
+    end
+
+    class Separator < BaseComponent
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { minus_icon }
+      end
+
+      private
+
+      sig { returns(String) }
+      def minus_icon
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          aria: { hidden: "true" }
+        ) { raw(%(<path d="M5 12h14"/>)) }
+      end
+    end
+  end
+end

data/app/components/shadcn/item.rb

@@ -0,0 +1,108 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Item < BaseComponent
+    sig do
+      params(
+        variant: T.any(Symbol, String),
+        size: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: ShadcnViewComponents::Contracts::Item::DEFAULTS.fetch(:variant),
+                   size: ShadcnViewComponents::Contracts::Item::DEFAULTS.fetch(:size), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      @size = T.let(normalize_option(:size, size), Symbol)
+      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 useRender の state は data-variant / data-size として DOM に現れる
+    # (ItemGroup の has-data-[size=sm]:gap-2.5 等がこれを参照する)
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(variant: @variant, size: @size)
+    end
+
+    class Media < BaseComponent
+      sig do
+        params(
+          variant: T.any(Symbol, String),
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(variant: ShadcnViewComponents::Contracts::Item::Media::DEFAULTS.fetch(:variant), **args)
+        @variant = T.let(normalize_option(:variant, variant), Symbol)
+        super(**args)
+      end
+
+      sig { returns(Symbol) }
+      attr_reader :variant
+
+      sig { override.returns(T::Hash[Symbol, VariantOption]) }
+      def variant_options
+        { variant: @variant }
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def contract_data_attributes
+        super.merge(variant: @variant)
+      end
+    end
+
+    # upstream は Separator(別アイテム)をラップして "my-0" を重ねる構成。
+    # 抽出器は単一アイテム内のクラスしか事前解決しないため、item側の契約には
+    # "my-0" のみが記録される。描画は upstream のDOMと同じく Separator のクラス群 +
+    # "my-0" とし、クラス検証は contains モードで行う(spec/conformance/allowances.yml 参照)
+    class Separator < BaseComponent
+      sig { override.returns(String) }
+      def call
+        content_tag(
+          :div,
+          role: "separator",
+          data: { slot: contract_root_slot[:name], orientation: "horizontal" },
+          aria: { orientation: "horizontal" },
+          class: separator_class
+        ) { content }
+      end
+
+      private
+
+      sig { returns(String) }
+      def separator_class
+        # base-nova の item-separator は Separator(別アイテム)のクラスの上に
+        # item 側の my-2 を合成する(item契約には my-2 のみ記録される)。
+        # h-px / bg-border は Separator 契約の data-horizontal: バリアントが担当し、
+        # これが無いと separator の高さが 0 になる
+        ShadcnViewComponents::Classes::MERGER.merge(
+          "#{ShadcnViewComponents::Classes.resolve(:separator)} #{self.class.classes}"
+        )
+      end
+    end
+
+    class Content < BaseComponent; end
+
+    class Actions < BaseComponent; end
+
+    class Group < BaseComponent; end
+
+    class Title < BaseComponent; end
+
+    class Description < BaseComponent; end
+
+    class Header < BaseComponent; end
+
+    class Footer < BaseComponent; end
+  end
+end

data/app/components/shadcn/kbd.rb

@@ -0,0 +1,9 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Kbd < BaseComponent
+    class Group < BaseComponent
+    end
+  end
+end

data/app/components/shadcn/label.rb

@@ -0,0 +1,12 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Label < BaseComponent
+    # 契約タグは LabelPrimitive.Root。ネイティブな label 要素として描画する
+    sig { override.returns(String) }
+    def default_tag
+      "label"
+    end
+  end
+end

data/app/components/shadcn/marker.rb

@@ -0,0 +1,37 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Marker < BaseComponent
+    # 省略時の既定値は契約の defaults から読む(リテラルで二重管理しない)
+    sig do
+      params(
+        variant: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: ShadcnViewComponents::Contracts::Marker::DEFAULTS.fetch(:variant), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      super(**args)
+    end
+
+    sig { returns(Symbol) }
+    attr_reader :variant
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { variant: @variant }
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(variant: @variant)
+    end
+
+    class Content < BaseComponent
+    end
+
+    class Icon < BaseComponent
+    end
+  end
+end

data/app/components/shadcn/menubar.rb

@@ -0,0 +1,110 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # メニューバー(10-roadmap Phase 3「menubar = 横断」)。
+  # 横並びのトリガー群と複数メニューをmenubar_controllerで一対一に管理する。
+  # 部品の描画はDropdownMenuを継承するが、状態とキーボード操作は共有しない。
+  # JS無効時フォールバック: Readable
+  class Menubar < DropdownMenu
+    CONTROLLER = "shadcn--menubar"
+
+    module ControllerIdentifier
+      extend T::Sig
+
+      private
+
+      sig { returns(String) }
+      def controller_identifier
+        Menubar::CONTROLLER
+      end
+    end
+
+    private_constant :ControllerIdentifier
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(controller: CONTROLLER)
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      attributes[:role] = "menubar"
+      merge_nested(attributes, :aria, { orientation: "horizontal" })
+      attributes
+    end
+
+    class Menu < BaseComponent
+      # トリガー+コンテンツのスコープ(div)
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:role] = "none" }
+      end
+    end
+
+    class Trigger < DropdownMenu::Trigger
+      include ControllerIdentifier
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:role] = "menuitem" }
+      end
+    end
+
+    class Portal < DropdownMenu::Portal
+      # 搬送のみの機能要素の実体化
+    end
+
+    class Content < DropdownMenu::Content
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :bottom, align: :start, side_offset: 8, align_offset: -4, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # popover=auto の ARIA menu
+    end
+
+    class Group < DropdownMenu::Group; end
+
+    class Label < DropdownMenu::Label; end
+
+    class Item < DropdownMenu::Item
+      include ControllerIdentifier
+    end
+
+    class CheckboxItem < DropdownMenu::CheckboxItem
+      include ControllerIdentifier
+
+      # 契約に indicator スロットが無いため data-slot 無しで描く
+      sig { returns(T.nilable(String)) }
+      def indicator_slot_name
+        nil
+      end
+    end
+
+    class RadioGroup < DropdownMenu::RadioGroup; end
+
+    class RadioItem < DropdownMenu::RadioItem
+      include ControllerIdentifier
+
+      # 契約に indicator スロットが無いため data-slot 無しで描く
+      sig { returns(T.nilable(String)) }
+      def indicator_slot_name
+        nil
+      end
+    end
+
+    class Separator < DropdownMenu::Separator; end
+
+    class Shortcut < DropdownMenu::Shortcut; end
+
+    class Sub < DropdownMenu::Sub; end
+
+    class SubTrigger < DropdownMenu::SubTrigger
+      include ControllerIdentifier
+    end
+
+    class SubContent < DropdownMenu::SubContent; end
+  end
+end

data/app/components/shadcn/message.rb

@@ -0,0 +1,29 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # AIチャット等のメッセージ行(Phase 4)。静的な表示構造
+  class Message < BaseComponent
+    # div
+
+    class Group < BaseComponent
+      # div
+    end
+
+    class Avatar < BaseComponent
+      # div
+    end
+
+    class Content < BaseComponent
+      # div
+    end
+
+    class Footer < BaseComponent
+      # div
+    end
+
+    class Header < BaseComponent
+      # div
+    end
+  end
+end

data/app/components/shadcn/message_scroller.rb

@@ -0,0 +1,52 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # メッセージのスクロール領域(Phase 4)。一番下への追従・ボタンによる
+  # スクロールは message_scroller_controller が担う
+  # JS無効時フォールバック: Graceful(縦スクロールはネイティブ)
+  class MessageScroller < BaseComponent
+    CONTROLLER = "shadcn--message-scroller"
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(controller: CONTROLLER)
+    end
+
+    class Provider < BaseComponent
+      # 状態のスコープ(div)。子をそのまま並べる
+    end
+
+    class Viewport < BaseComponent
+      # div(スクロール対象)
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:tabindex] = "0" }
+      end
+    end
+
+    class Content < BaseComponent
+      # div
+    end
+
+    class Item < BaseComponent
+      # div
+    end
+
+    class Button < BaseComponent
+      # 一番下へ戻るボタン
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:type] = "button" unless attributes.key?(:type)
+        merge_nested(attributes, :data, { action: "#{CONTROLLER}#scrollToBottom" })
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/native_checked_state.rb

@@ -0,0 +1,74 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # Checkbox / Radio / Switch が共有する、ネイティブ input の checked 状態を
+  # upstream 契約の data 属性へ投影するための内部実装。
+  module NativeCheckedState
+    extend T::Sig
+
+    CONTROLLER = "shadcn--checked-state"
+    CHANGE_ACTION = T.let("change->#{CONTROLLER}#sync".freeze, String)
+
+    private
+
+    sig { params(attributes: T::Hash[Symbol, T.untyped], checked: T::Boolean).void }
+    def merge_native_checked_state(attributes, checked:)
+      attributes[:data] = native_checked_data_attributes(attributes[:data], checked:)
+      normalize_explicit_aria_checked(attributes, checked:)
+    end
+
+    sig { params(raw_data: T.untyped, checked: T::Boolean).returns(T::Hash[T.untyped, T.untyped]) }
+    def native_checked_data_attributes(raw_data, checked:)
+      data = T.cast(raw_data, T.nilable(T::Hash[T.untyped, T.untyped])) || {}
+      data = data.dup
+      user_controller = delete_native_data_value(data, :controller)
+      user_action = delete_native_data_value(data, :action)
+      delete_native_data_value(data, :checked)
+      delete_native_data_value(data, :unchecked)
+      data[:controller] = compose_checked_state_tokens(CONTROLLER, user_controller)
+      data[:action] = compose_checked_state_tokens(CHANGE_ACTION, user_action)
+      data[checked ? :checked : :unchecked] = ""
+      data
+    end
+
+    sig { params(data: T::Hash[T.untyped, T.untyped], key: Symbol).returns(T.untyped) }
+    def delete_native_data_value(data, key)
+      symbol_value = data.delete(key)
+      string_value = data.delete(key.to_s)
+      symbol_value || string_value
+    end
+
+    sig { params(html_args: T::Hash[Symbol, T.untyped]).returns(T::Boolean) }
+    def native_checked?(html_args)
+      value = html_args[:checked]
+      !value.nil? && value != false
+    end
+
+    sig { params(checked: T::Boolean).returns(T::Hash[Symbol, String]) }
+    def native_checked_data(checked:)
+      checked ? { checked: "" } : { unchecked: "" }
+    end
+
+    sig { params(tokens: T.untyped).returns(String) }
+    def compose_checked_state_tokens(*tokens)
+      tokens.compact.flat_map { |token| token.to_s.split }.uniq.join(" ")
+    end
+
+    sig { params(attributes: T::Hash[Symbol, T.untyped], checked: T::Boolean).void }
+    def normalize_explicit_aria_checked(attributes, checked:)
+      aria = T.cast(attributes[:aria], T.nilable(T::Hash[T.untyped, T.untyped]))
+      if aria&.key?(:checked) || aria&.key?("checked")
+        normalized = aria.dup
+        normalized.delete("checked")
+        normalized[:checked] = checked.to_s
+        attributes[:aria] = normalized
+      end
+
+      key = :"aria-checked"
+      attributes[key] = checked.to_s if attributes.key?(key)
+    end
+  end
+
+  private_constant :NativeCheckedState
+end