phlex_kit 0.2.0

data/app/components/phlex_kit/empty/empty_content.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class EmptyContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-empty-content" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/empty/empty_description.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class EmptyDescription < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-empty-description" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/empty/empty_header.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class EmptyHeader < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-empty-header" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/empty/empty_media.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # The icon/avatar slot inside an Empty state. variant: :icon gives the tinted
+  # rounded chip; :default is bare. Ported from ruby_ui's RubyUI::EmptyMedia.
+  class EmptyMedia < BaseComponent
+    VARIANTS = { default: nil, icon: "icon" }.freeze
+    def initialize(variant: :default, **attrs)
+      @variant = variant.to_sym
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: ["pk-empty-media", VARIANTS.fetch(@variant)].compact.join(" ") }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/empty/empty_title.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class EmptyTitle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-empty-title" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/form/form.css

@@ -0,0 +1,15 @@
+/* Co-located with form.rb — UI::Form. Form-level layout (ruby_ui applies
+   `space-y-*` on the <form>): `.pk-form` stacks fields with rhythm;
+   `.pk-form-actions` lays the submit/cancel row out horizontally. Field-level
+   styles live with form_field.rb. Theme tokens come from the global
+   stylesheet. */
+.pk-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.pk-form-actions {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}

data/app/components/phlex_kit/form/form.rb

@@ -0,0 +1,27 @@
+module PhlexKit
+  # Form shell, ported from ruby_ui's RubyUI::Form. A plain <form> that stacks
+  # PhlexKit::FormFields with rhythm (`.pk-form`, form.css — plus
+  # `.pk-form-actions` for the submit/cancel row). Live validation lives on each
+  # FormField (see form_field.rb), so this stays markup-only:
+  #
+  #   render PhlexKit::Form.new(action: "/reviews", method: "post") do
+  #     render PhlexKit::FormField.new do
+  #       render PhlexKit::FormFieldLabel.new(for: "email") { "Email" }
+  #       render PhlexKit::Input.new(type: :email, id: "email", name: "email", required: true)
+  #       render PhlexKit::FormFieldError.new
+  #     end
+  #     div(class: "pk-form-actions") { render PhlexKit::Button.new(type: :submit) { "Save" } }
+  #   end
+  #
+  # With Rails form helpers, put the class on the builder instead:
+  # `form_with(..., class: "pk-form")`.
+  class Form < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      form(**mix({ class: "pk-form" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/form_field/form_field.css

@@ -0,0 +1,31 @@
+/* Co-located with form_field.rb — UI::FormField (+ Label / Hint / Error).
+   ruby_ui's structure kept (a vertical stack: label, control, hint, error); only
+   the styling is ours, vanilla CSS on the palette tokens. Geometry from ruby_ui
+   (flex-col gap-2, text-sm, empty:hidden, text-muted-foreground / text-destructive).
+   Theme tokens come from the global stylesheet. */
+.pk-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+.pk-form-field-label {
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.1;
+}
+.pk-form-field-label:empty { display: none; }
+.pk-form-field-hint {
+  margin: 0;
+  font-size: .875rem;
+  color: var(--pk-muted);
+}
+.pk-form-field-hint:empty { display: none; }
+.pk-form-field-error {
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 500;
+  color: var(--pk-red);
+}
+.pk-form-field-error:empty { display: none; }
+
+/* Form-level layout (.pk-form / .pk-form-actions) lives with form.rb. */

data/app/components/phlex_kit/form_field/form_field.rb

@@ -0,0 +1,31 @@
+module PhlexKit
+  # Form field group, ported from ruby_ui's RubyUI::FormField: a vertical stack
+  # grouping a FormFieldLabel + a control (PhlexKit::Input / Textarea / NativeSelect /
+  # Checkbox / RadioButton …) + an optional FormFieldHint / FormFieldError.
+  # Carries the phlex-kit--form-field controller for live validation: the kit's
+  # controls register as its input target, and once the browser first flags the
+  # control invalid (a submit attempt) — or the error renders with server
+  # content — the FormFieldError live-updates as the user types, with
+  # per-constraint messages via data-* on the control (data-value-missing,
+  # data-type-mismatch, data-too-short, …). Compose inside PhlexKit::Form (form.rb).
+  #
+  # This replaces the legacy `.field` wrapper in converted views — and crucially
+  # does NOT carry `.field`'s descendant `input/select/textarea` styling (whose
+  # specificity would otherwise override `.pk-input` &c.), so the kit's controls
+  # render with their own look. Multi-part, like PhlexKit::Card:
+  #
+  #   render PhlexKit::FormField.new do
+  #     render PhlexKit::FormFieldLabel.new(for: "user_email") { "Email" }
+  #     render PhlexKit::Input.new(type: :email, id: "user_email", name: "user[email]")
+  #     render PhlexKit::FormFieldError.new { "is invalid" }
+  #   end
+  class FormField < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-form-field", data: { controller: "phlex-kit--form-field" } }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/form_field/form_field_error.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Validation error text for a PhlexKit::FormField, styled with the destructive token
+  # and hidden when empty. Render it empty for live client-side messages (the
+  # phlex-kit--form-field controller fills it once the control goes invalid), or
+  # with server-rendered model errors — non-empty content arms validation on
+  # connect. See form_field.rb.
+  class FormFieldError < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      p(**mix({
+        class: "pk-form-field-error",
+        data: { phlex_kit__form_field_target: "error" }
+      }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/form_field/form_field_hint.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Muted helper text under a PhlexKit::FormField control. Hidden when empty.
+  # See form_field.rb.
+  class FormFieldHint < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      p(**mix({ class: "pk-form-field-hint" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/form_field/form_field_label.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Label for a PhlexKit::FormField control. Pass `for:` to bind it to the control's id
+  # (e.g. `for: f.field_id(:email)`). Hidden when empty. See form_field.rb.
+  class FormFieldLabel < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      label(**mix({ class: "pk-form-field-label" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/hover_card/hover_card.css

@@ -0,0 +1,8 @@
+/* Co-located with hover_card.rb. Tokens from the global stylesheet. */
+.pk-hover-card { position: relative; display: inline-block; }
+.pk-hover-card-trigger { display: inline-block; }
+.pk-hover-card-content {
+  position: absolute; z-index: 50; top: calc(100% + .5rem); left: 0; width: 16rem;
+  border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px); background: var(--pk-surface);
+  color: var(--pk-text); padding: 1rem; box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
+}

data/app/components/phlex_kit/hover_card/hover_card.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Hover/focus-triggered floating card, positioned with CSS. Ported from ruby_ui's
+  # RubyUI::HoverCard. Compose HoverCard > (HoverCardTrigger + HoverCardContent).
+  class HoverCard < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-hover-card", data: { controller: "phlex-kit--hover-card", action: "mouseenter->phlex-kit--hover-card#show mouseleave->phlex-kit--hover-card#hide focusin->phlex-kit--hover-card#show focusout->phlex-kit--hover-card#hide" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/hover_card/hover_card_content.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class HoverCardContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-hover-card-content pk-hidden", data: { phlex_kit__hover_card_target: "content", state: "closed" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/hover_card/hover_card_trigger.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class HoverCardTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-hover-card-trigger", data: { phlex_kit__hover_card_target: "trigger" } }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/input/input.css

@@ -0,0 +1,29 @@
+/* Co-located with input.rb — UI::Input. ruby_ui's Tailwind input replaced with
+   our own vanilla CSS: the geometry is ruby_ui's (h-9 / rounded-md / px-3 py-1 /
+   text-sm / shadow-xs / ring-on-focus), realised against this app's palette
+   tokens. Not styled to match the legacy `.field input`; this is the kit's own
+   look and will be revisited in the visual redesign. Theme tokens come from the
+   global stylesheet. */
+.pk-input {
+  height: 2rem;
+  width: 100%;
+  border-radius: var(--pk-radius);
+  border: 1px solid var(--pk-input);
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
+  color: var(--pk-text);
+  padding: .25rem .625rem;
+  font: inherit;
+  font-size: .875rem;
+  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+.pk-input::placeholder { color: var(--pk-muted); }
+.pk-input:focus-visible {
+  outline: none;
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-input:disabled { cursor: not-allowed; opacity: .5; }
+.pk-input[aria-invalid="true"] {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 30%, transparent);
+}

data/app/components/phlex_kit/input/input.rb

@@ -0,0 +1,34 @@
+module PhlexKit
+  # Form text input, ported from ruby_ui's RubyUI::Input (https://ruby-ui.com).
+  # ruby_ui's Tailwind strings are replaced with plain `.pk-input` CSS
+  # (input.css) on the app's design tokens. Like upstream, it registers as a
+  # phlex-kit--form-field input target — live validation kicks in when wrapped
+  # in a PhlexKit::FormField, and Stimulus ignores the wiring otherwise.
+  #
+  # `type:` picks the HTML input type (:text, :email, :password, :number, …);
+  # everything else — `name:`, `value:`, `id:`, `placeholder:`, `required:`,
+  # `**on(...)` — rides the `mix` pass-through onto the <input>, so a caller's
+  # `class:` augments rather than clobbers ours. This is a presentational
+  # primitive, NOT a Rails form-builder helper: in a Phlex view you supply the
+  # name/value yourself, exactly as Admin::ReviewRow composes PhlexKit::Button.
+  #
+  # No VARIANTS: an input is an input. Sizing/state live in CSS (:focus,
+  # :disabled, [aria-invalid]).
+  class Input < BaseComponent
+    def initialize(type: :text, **attrs)
+      @type = type
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        type: @type,
+        class: "pk-input",
+        data: {
+          phlex_kit__form_field_target: "input",
+          action: "input->phlex-kit--form-field#onInput invalid->phlex-kit--form-field#onInvalid"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/input_group/input_group.css

@@ -0,0 +1,35 @@
+/* Co-located with input_group.rb — UI::InputGroup, shadcn parity: the shell
+   carries the border/fill and focus ring; the inner .pk-input goes naked. */
+.pk-input-group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid var(--pk-input);
+  border-radius: var(--pk-radius);
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.pk-input-group:focus-within {
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-input-group .pk-input {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  flex: 1;
+}
+.pk-input-group .pk-input:focus-visible { outline: none; box-shadow: none; border: 0; }
+.pk-input-group-addon {
+  display: flex;
+  align-items: center;
+  gap: .25rem;
+  flex: none;
+  padding: 0 .625rem;
+  color: var(--pk-muted);
+  font-size: .875rem;
+}
+.pk-input-group-addon.start { padding-right: 0; }
+.pk-input-group-addon.end { padding-left: 0; }
+.pk-input-group-addon svg { width: 1rem; height: 1rem; }
+.pk-input-group-text { color: var(--pk-muted); }

data/app/components/phlex_kit/input_group/input_group.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Input with attached addons, ported from shadcn/ui's InputGroup: a bordered
+  # shell that focuses as one control; compose InputGroupAddon(align:) around a
+  # plain PhlexKit::Input (its own border/bg collapse inside the group).
+  # `.pk-input-group*` (input_group.css).
+  class InputGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-input-group", role: "group" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/input_group/input_group_addon.rb

@@ -0,0 +1,16 @@
+module PhlexKit
+  # Leading/trailing addon inside an InputGroup — icons, text or small buttons.
+  # See input_group.rb.
+  class InputGroupAddon < BaseComponent
+    ALIGNS = { start: "start", end: "end" }.freeze
+
+    def initialize(align: :start, **attrs)
+      @align = align.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-input-group-addon #{ALIGNS.fetch(@align)}" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/input_group/input_group_text.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Muted text inside an InputGroupAddon (e.g. a unit or prefix). See input_group.rb.
+  class InputGroupText < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = span(**mix({ class: "pk-input-group-text" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/input_otp/input_otp.css

@@ -0,0 +1,32 @@
+/* Co-located with input_otp.rb — UI::InputOTP, shadcn parity: joined cells
+   (shared borders, outer corners rounded), ring on the active cell. */
+.pk-input-otp { display: flex; align-items: center; gap: .5rem; }
+.pk-input-otp-group { display: flex; align-items: center; }
+.pk-input-otp-slot {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--pk-input);
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+  text-align: center;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.pk-input-otp-slot:not(:first-child) { margin-left: -1px; }
+.pk-input-otp-group .pk-input-otp-slot:first-child {
+  border-top-left-radius: var(--pk-radius);
+  border-bottom-left-radius: var(--pk-radius);
+}
+.pk-input-otp-group .pk-input-otp-slot:last-child {
+  border-top-right-radius: var(--pk-radius);
+  border-bottom-right-radius: var(--pk-radius);
+}
+.pk-input-otp-slot:focus {
+  position: relative;
+  z-index: 1;
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-input-otp-separator { color: var(--pk-muted); }

data/app/components/phlex_kit/input_otp/input_otp.rb

@@ -0,0 +1,29 @@
+module PhlexKit
+  # One-time-code input, ported from shadcn/ui's InputOTP (the input-otp npm
+  # lib is replaced by the phlex-kit--input-otp controller: per-slot typing with
+  # auto-advance, backspace retreat, paste distribution, arrow movement). The
+  # hidden input carries the joined value under `name:`. Compose InputOtp >
+  # InputOtpGroup(InputOtpSlot…) [+ InputOtpSeparator + more groups]; slot
+  # count must total `length:`. `.pk-input-otp*` (input_otp.css).
+  class InputOtp < BaseComponent
+    def initialize(length: 6, name: nil, value: nil, **attrs)
+      @length = length
+      @name = name
+      @value = value
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        class: "pk-input-otp",
+        data: {
+          controller: "phlex-kit--input-otp",
+          phlex_kit__input_otp_length_value: @length
+        }
+      }, @attrs)) do
+        input(type: :hidden, name: @name, value: @value, data: { phlex_kit__input_otp_target: "value" }) if @name
+        yield if block
+      end
+    end
+  end
+end

data/app/components/phlex_kit/input_otp/input_otp_group.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Joined run of OTP slots. See input_otp.rb.
+  class InputOtpGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-input-otp-group" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/input_otp/input_otp_separator.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Divider between OTP groups. See input_otp.rb.
+  class InputOtpSeparator < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template = div(**mix({ class: "pk-input-otp-separator", role: "separator" }, @attrs)) { "-" }
+  end
+end

data/app/components/phlex_kit/input_otp/input_otp_slot.rb

@@ -0,0 +1,27 @@
+module PhlexKit
+  # One character cell of an InputOtp. See input_otp.rb.
+  class InputOtpSlot < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        type: :text,
+        inputmode: "numeric",
+        autocomplete: "one-time-code",
+        maxlength: "1",
+        class: "pk-input-otp-slot",
+        data: {
+          phlex_kit__input_otp_target: "slot",
+          action: [
+            "input->phlex-kit--input-otp#onInput",
+            "keydown->phlex-kit--input-otp#onKeydown",
+            "paste->phlex-kit--input-otp#onPaste",
+            "focus->phlex-kit--input-otp#onFocus"
+          ].join(" ")
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/item/item.css

@@ -0,0 +1,32 @@
+/* Co-located with item.rb — UI::Item family, shadcn parity. */
+.pk-item {
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--pk-radius);
+  padding: .625rem .875rem;
+  font-size: .875rem;
+}
+.pk-item.outline { border-color: var(--pk-border); }
+.pk-item.muted { background: var(--pk-surface-2); }
+.pk-item-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--pk-muted);
+}
+.pk-item-media svg { width: 1rem; height: 1rem; }
+.pk-item-content { display: flex; flex: 1; flex-direction: column; gap: .125rem; min-width: 0; }
+.pk-item-title { font-weight: 500; line-height: 1.25; }
+.pk-item-description {
+  color: var(--pk-muted);
+  font-size: .875rem;
+  line-height: 1.375;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pk-item-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
+.pk-item-group { display: flex; flex-direction: column; width: 100%; gap: .5rem; }

data/app/components/phlex_kit/item/item.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # List row, ported from shadcn/ui's Item: a flex row of ItemMedia +
+  # ItemContent(ItemTitle + ItemDescription) + ItemActions, optionally grouped
+  # in an ItemGroup. variant :outline draws a bordered card row.
+  # `.pk-item*` (item.css).
+  class Item < BaseComponent
+    VARIANTS = { default: nil, outline: "outline", muted: "muted" }.freeze
+
+    def initialize(variant: :default, **attrs)
+      @variant = variant.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: [ "pk-item", VARIANTS.fetch(@variant) ].compact.join(" ") }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/item/item_actions.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Trailing actions slot of an Item. See item.rb.
+  class ItemActions < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-item-actions" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/item/item_content.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Title/description column of an Item. See item.rb.
+  class ItemContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-item-content" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/item/item_description.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See item.rb.
+  class ItemDescription < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-item-description" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/item/item_group.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Stack of Items. See item.rb.
+  class ItemGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-item-group", role: "list" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/item/item_media.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Leading icon/avatar slot of an Item. See item.rb.
+  class ItemMedia < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-item-media" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/item/item_title.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See item.rb.
+  class ItemTitle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-item-title" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/kbd/kbd.css

@@ -0,0 +1,17 @@
+/* Co-located with kbd.rb — UI::Kbd (+ KbdGroup), shadcn parity. */
+.pk-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 .25rem;
+  border-radius: calc(var(--pk-radius) - 4px);
+  background: var(--pk-surface-2);
+  color: var(--pk-muted);
+  font-family: inherit;
+  font-size: .75rem;
+  font-weight: 500;
+}
+.pk-kbd-group { display: inline-flex; align-items: center; gap: .25rem; font-family: inherit; }

data/app/components/phlex_kit/kbd/kbd.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Keyboard-key chip, ported from shadcn/ui's Kbd. The kit's ShortcutKey
+  # predates it (ruby_ui naming) — Kbd is the shadcn-parity spelling; group
+  # several in a KbdGroup. `.pk-kbd` (kbd.css).
+  class Kbd < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      kbd(**mix({ class: "pk-kbd" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/kbd/kbd_group.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Row of Kbd chips (e.g. ⌘ + K). See kbd.rb.
+  class KbdGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      kbd(**mix({ class: "pk-kbd-group" }, @attrs), &)
+    end
+  end
+end