phlex_kit 0.2.0

data/app/components/phlex_kit/button/button.css

@@ -0,0 +1,72 @@
+/* Co-located with button.rb — UI::Button. ruby_ui's Tailwind replaced with
+   vanilla CSS on the palette tokens, at full variant/size parity. Geometry from
+   ruby_ui (inline-flex centred, rounded-md, h-9 default, font-medium, focus ring,
+   filled variants). Theme tokens come from the global stylesheet. */
+.pk-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  gap: .375rem;
+  height: 2rem;
+  padding: .25rem .625rem;
+  border: 1px solid transparent;
+  border-radius: var(--pk-radius);
+  font: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+.pk-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-button:disabled, .pk-button[disabled], .pk-button[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: .5;
+}
+
+/* Sizes (md is the base above). */
+.pk-button.sm { height: 1.75rem; padding: .25rem .5rem; font-size: .75rem; }
+.pk-button.lg { height: 2.5rem; padding: .375rem 1rem; font-size: .875rem; }
+.pk-button.xl { height: 3rem; padding: .625rem 1.5rem; font-size: 1rem; }
+
+/* Icon-only square buttons. */
+.pk-button.icon { width: 2rem; padding: 0; }
+.pk-button.icon.sm { width: 1.75rem; }
+.pk-button.icon.lg { width: 2.5rem; }
+.pk-button.icon.xl { width: 3rem; }
+
+/* Variants. */
+.pk-button.primary {
+  background: var(--pk-brand);
+  color: var(--pk-brand-ink);
+  border-color: var(--pk-brand);
+}
+.pk-button.primary:hover { background: color-mix(in oklab, var(--pk-brand) 90%, transparent); border-color: transparent; }
+
+.pk-button.secondary { background: var(--pk-surface-2); color: var(--pk-text); }
+.pk-button.secondary:hover { background: color-mix(in oklab, var(--pk-surface-2) 80%, transparent); }
+
+.pk-button.destructive {
+  background: var(--pk-red);
+  color: var(--pk-brand-ink);
+  border-color: var(--pk-red);
+}
+.pk-button.destructive:hover { background: color-mix(in oklab, var(--pk-red) 88%, black); }
+
+.pk-button.outline { background: color-mix(in oklab, var(--pk-input) 30%, transparent); color: var(--pk-text); border-color: var(--pk-input); }
+.pk-button.outline:hover { background: var(--pk-accent); }
+
+.pk-button.ghost { background: transparent; border-color: transparent; color: var(--pk-text); }
+.pk-button.ghost:hover { background: var(--pk-accent); }
+
+.pk-button.link {
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border-color: transparent;
+  color: var(--pk-brand);
+}
+.pk-button.link:hover { text-decoration: underline; }

data/app/components/phlex_kit/button/button.rb

@@ -0,0 +1,51 @@
+module PhlexKit
+  # Button, ported from ruby_ui's RubyUI::Button (https://ruby-ui.com) to full
+  # variant/size parity. Renders a <button>; the `mix` pass-through means a
+  # caller's `class:` augments ours and a phlex-reactive `**on(:event)` bundle
+  # flows straight onto the element:
+  #
+  #   render PhlexKit::Button.new(variant: :primary, **on(:publish)) { "Approve" }
+  #
+  # For a button-styled link, put the classes on an <a> directly
+  # (`class: "pk-button outline sm"`) — that's ruby_ui's Link approach.
+  #
+  # Variants/sizes mirror ruby_ui; Tailwind is replaced with vanilla `.pk-button`
+  # CSS (button.css). `VARIANTS.fetch`/`SIZES.fetch` fail loud on a bad value.
+  class Button < BaseComponent
+    # variant => modifier class. Default is :primary (the filled brand button),
+    # matching ruby_ui.
+    VARIANTS = {
+      primary: "primary",
+      secondary: "secondary",
+      destructive: "destructive",
+      outline: "outline",
+      ghost: "ghost",
+      link: "link"
+    }.freeze
+
+    SIZES = {
+      sm: "sm",
+      md: nil,
+      lg: "lg",
+      xl: "xl"
+    }.freeze
+
+    def initialize(variant: :primary, size: :md, type: :button, icon: false, **attrs)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @type = type
+      @icon = icon
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({ type: @type, class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-button", VARIANTS.fetch(@variant), SIZES.fetch(@size), ("icon" if @icon) ].compact.join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/button_group/button_group.css

@@ -0,0 +1,8 @@
+/* Co-located with button_group.rb — UI::ButtonGroup, shadcn parity: children
+   join into one segmented control (shared borders, inner corners squared). */
+.pk-button-group { display: inline-flex; align-items: stretch; }
+.pk-button-group > * { border-radius: 0; }
+.pk-button-group > *:not(:first-child) { margin-left: -1px; }
+.pk-button-group > *:first-child { border-top-left-radius: var(--pk-radius); border-bottom-left-radius: var(--pk-radius); }
+.pk-button-group > *:last-child { border-top-right-radius: var(--pk-radius); border-bottom-right-radius: var(--pk-radius); }
+.pk-button-group > *:focus-visible { position: relative; z-index: 1; }

data/app/components/phlex_kit/button_group/button_group.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Joined row of buttons, ported from shadcn/ui's ButtonGroup: children lose
+  # their inner corners/double borders and read as one segmented control.
+  # `.pk-button-group` (button_group.css).
+  class ButtonGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-button-group", role: "group" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar.css

@@ -0,0 +1,109 @@
+/* Co-located with calendar.rb — UI::Calendar. ruby_ui's structure + Stimulus
+   kept (the controller renders week rows from <template>s; its Mustache
+   dependency replaced with a tiny interpolator); Tailwind replaced with vanilla
+   CSS on the palette tokens. Geometry from ruby_ui (p-3 card, h-7 nav buttons,
+   2rem day cells, flex week rows). Theme tokens come from the global
+   stylesheet. */
+.pk-calendar {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: .75rem;
+}
+
+.pk-calendar-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: .25rem;
+}
+.pk-calendar-title { font-size: .875rem; font-weight: 500; }
+
+.pk-calendar-prev, .pk-calendar-next {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 1px solid var(--pk-input);
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-text);
+  cursor: pointer;
+  opacity: .5;
+  transition: background-color .15s ease, opacity .15s ease;
+}
+.pk-calendar-prev { left: .25rem; }
+.pk-calendar-next { right: .25rem; }
+.pk-calendar-prev:hover, .pk-calendar-next:hover { background: var(--pk-accent); opacity: 1; }
+.pk-calendar-prev:focus-visible, .pk-calendar-next:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-calendar-prev:disabled, .pk-calendar-next:disabled { pointer-events: none; opacity: .5; }
+.pk-calendar-prev svg, .pk-calendar-next svg { width: 1rem; height: 1rem; }
+
+/* Rows are flex (the controller emits <tr class="pk-calendar-week">). */
+.pk-calendar-weekdays-row { display: flex; }
+.pk-calendar-week { display: flex; width: 100%; margin-top: .5rem; }
+.pk-calendar-weekday {
+  width: 2rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  font-size: .8rem;
+  font-weight: 400;
+  color: var(--pk-muted);
+}
+
+.pk-calendar-cell {
+  position: relative;
+  padding: 0;
+  text-align: center;
+  font-size: .875rem;
+}
+.pk-calendar-cell:has([aria-selected]) {
+  background: var(--pk-accent);
+  border-radius: calc(var(--pk-radius) - 2px);
+}
+.pk-calendar-cell:focus-within { position: relative; z-index: 20; }
+
+/* Day button states (base = current month). */
+.pk-calendar-day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+  font-weight: 400;
+  cursor: pointer;
+  transition: background-color .15s ease, color .15s ease;
+}
+.pk-calendar-day:hover { background: var(--pk-accent); }
+.pk-calendar-day:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-calendar-day.other { color: var(--pk-muted); }
+.pk-calendar-day.today { background: var(--pk-accent); }
+.pk-calendar-day.selected {
+  background: var(--pk-brand);
+  color: var(--pk-brand-ink);
+}
+.pk-calendar-day.selected:hover, .pk-calendar-day.selected:focus { background: var(--pk-brand); }
+.pk-calendar-day.disabled,
+.pk-calendar-day:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  background: transparent;
+  color: var(--pk-muted);
+  opacity: .5;
+}

data/app/components/phlex_kit/calendar/calendar.rb

@@ -0,0 +1,47 @@
+module PhlexKit
+  # Calendar (month grid with day selection), ported from ruby_ui's
+  # RubyUI::Calendar. Renders the header (title + prev/next), the <table> the
+  # phlex-kit--calendar controller fills, and the <template>s it clones per day
+  # state (upstream's Mustache dependency is replaced with a tiny {{key}}
+  # interpolator in the controller). Pass `input_id:` a CSS selector (e.g.
+  # "#due-date") to push the picked date into a phlex-kit--calendar-input outlet —
+  # that's how PhlexKit::DatePicker binds it to an Input. Tailwind → vanilla
+  # `.pk-calendar*` (calendar.css).
+  class Calendar < BaseComponent
+    def initialize(selected_date: nil, min_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+      @selected_date = selected_date
+      @min_date = min_date
+      @input_id = input_id
+      @date_format = date_format
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix(calendar_attrs, @attrs)) do
+        render CalendarHeader.new do
+          render CalendarTitle.new
+          render CalendarPrev.new
+          render CalendarNext.new
+        end
+        render CalendarBody.new # Where the calendar is rendered (Weekdays and Days)
+        render CalendarWeekdays.new # Template for the weekdays
+        render CalendarDays.new # Templates for the day states
+      end
+    end
+
+    private
+
+    def calendar_attrs
+      {
+        class: "pk-calendar",
+        data: {
+          controller: "phlex-kit--calendar",
+          phlex_kit__calendar_selected_date_value: @selected_date&.to_s,
+          phlex_kit__calendar_min_date_value: @min_date&.to_s,
+          phlex_kit__calendar_format_value: @date_format,
+          phlex_kit__calendar_phlex_kit__calendar_input_outlet: @input_id
+        }
+      }
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_body.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # The <table> the controller renders the weekday header + day grid into.
+  # See calendar.rb.
+  class CalendarBody < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      table(**mix({ class: "pk-calendar-body", data: { phlex_kit__calendar_target: "calendar" } }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_days.rb

@@ -0,0 +1,98 @@
+module PhlexKit
+  # <template>s for the five day states (disabled / selected / today / current
+  # month / other month). The controller picks one per day and interpolates
+  # {{day}} / {{dayDate}}. See calendar.rb.
+  class CalendarDays < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render_disabled_date_template
+      render_selected_date_template
+      render_today_date_template
+      render_current_month_date_template
+      render_other_month_date_template
+    end
+
+    private
+
+    def render_disabled_date_template
+      date_template("disabledDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          name: "day",
+          class: "pk-calendar-day disabled",
+          disabled: true,
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button",
+          aria_disabled: "true"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_selected_date_template
+      date_template("selectedDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->phlex-kit--calendar#selectDay",
+          name: "day",
+          class: "pk-calendar-day selected",
+          role: "gridcell",
+          tabindex: "0",
+          type: "button",
+          aria_selected: "true"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_today_date_template
+      date_template("todayDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->phlex-kit--calendar#selectDay",
+          name: "day",
+          class: "pk-calendar-day today",
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_current_month_date_template
+      date_template("currentMonthDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->phlex-kit--calendar#selectDay",
+          name: "day",
+          class: "pk-calendar-day",
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_other_month_date_template
+      date_template("otherMonthDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->phlex-kit--calendar#selectDay",
+          name: "day",
+          class: "pk-calendar-day other",
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def date_template(target, &block)
+      template(data: { phlex_kit__calendar_target: target }) do
+        td(class: "pk-calendar-cell", role: "presentation", &block)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_header.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Header row of a PhlexKit::Calendar — centers the CalendarTitle, with
+  # CalendarPrev/CalendarNext pinned to its edges. See calendar.rb.
+  class CalendarHeader < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-calendar-header" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_next.rb

@@ -0,0 +1,40 @@
+module PhlexKit
+  # Next-month button, pinned to the header's right edge. See calendar.rb.
+  class CalendarNext < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        name: "next-month",
+        class: "pk-calendar-next",
+        aria: { label: "Go to next month" },
+        data: { action: "click->phlex-kit--calendar#nextMonth" }
+      }, @attrs)) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "15",
+        height: "15",
+        viewbox: "0 0 15 15",
+        fill: "none",
+        "aria-hidden": "true"
+      ) do |s|
+        s.path(
+          d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_prev.rb

@@ -0,0 +1,40 @@
+module PhlexKit
+  # Previous-month button, pinned to the header's left edge. See calendar.rb.
+  class CalendarPrev < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        name: "previous-month",
+        class: "pk-calendar-prev",
+        aria: { label: "Go to previous month" },
+        data: { action: "click->phlex-kit--calendar#prevMonth" }
+      }, @attrs)) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "15",
+        height: "15",
+        viewbox: "0 0 15 15",
+        fill: "none",
+        "aria-hidden": "true"
+      ) do |s|
+        s.path(
+          d: "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_title.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # "Month Year" heading — rewritten by the controller as you navigate.
+  # See calendar.rb.
+  class CalendarTitle < BaseComponent
+    def initialize(default: "Month Year", **attrs)
+      @default = default
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-calendar-title",
+        role: "presentation",
+        aria: { live: "polite" },
+        data: { phlex_kit__calendar_target: "title" }
+      }, @attrs)) { @default }
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar_weekdays.rb

@@ -0,0 +1,27 @@
+module PhlexKit
+  # <template> for the weekday header row, cloned into the CalendarBody on every
+  # render. See calendar.rb.
+  class CalendarWeekdays < BaseComponent
+    DAYS = %w[Monday Tuesday Wednesday Thursday Friday Saturday Sunday].freeze
+
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      template(data: { phlex_kit__calendar_target: "weekdaysTemplate" }) do
+        thead(**@attrs) do
+          tr(class: "pk-calendar-weekdays-row") do
+            DAYS.each { |day| render_day(day) }
+          end
+        end
+      end
+    end
+
+    private
+
+    def render_day(day)
+      th(scope: "col", class: "pk-calendar-weekday", aria: { label: day }) { day[0..1] }
+    end
+  end
+end

data/app/components/phlex_kit/card/card.css

@@ -0,0 +1,15 @@
+/* Co-located with card.rb — the UI::Card container kit (Card + Header / Title /
+   Description / Content / Footer). Namespaced .pk-card* to avoid colliding with
+   the dashboard stat-tile .card in application.css. Theme tokens come from the
+   global stylesheet; translated from ruby_ui's Tailwind:
+     rounded-xl border bg-background shadow  → border + radius + surface
+     flex flex-col space-y-1.5 p-6           → header column + gap + pad
+     font-semibold leading-none tracking-tight → title
+     text-sm text-muted-foreground           → description
+     p-6 pt-0 / items-center p-6 pt-0         → content / footer (top pad sits in header) */
+.pk-card { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
+.pk-card-header { display: flex; flex-direction: column; gap: .375rem; padding: 1.5rem; }
+.pk-card-title { margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
+.pk-card-description { margin: 0; font-size: .85rem; color: var(--pk-muted); }
+.pk-card-content { padding: 0 1.5rem 1.5rem; }
+.pk-card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.5rem 1.5rem; }

data/app/components/phlex_kit/card/card.rb

@@ -0,0 +1,29 @@
+module PhlexKit
+  # Container card kit, ported from ruby_ui's Card (https://ruby-ui.com). Six
+  # presentational parts — Card + CardHeader / CardTitle / CardDescription /
+  # CardContent / CardFooter — each wrapping its children in an element with a
+  # base class and passing arbitrary attrs straight through via `mix` (so a
+  # caller `class:` augments rather than clobbers, exactly like PhlexKit::Button).
+  #
+  # Styles are namespaced `.pk-card*` in card.css rather than `.card`: this app
+  # already uses `.card` for the dashboard stat tiles (application.css), which are
+  # a different, padded component. Compose the parts:
+  #
+  #   render PhlexKit::Card.new do
+  #     render PhlexKit::CardHeader.new do
+  #       render PhlexKit::CardTitle.new { "Title" }
+  #       render PhlexKit::CardDescription.new { "Subtitle" }
+  #     end
+  #     render PhlexKit::CardContent.new { "…" }
+  #     render PhlexKit::CardFooter.new { render PhlexKit::Button.new { "Action" } }
+  #   end
+  class Card < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-card" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/card/card_content.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Body region of a PhlexKit::Card. See card.rb.
+  class CardContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-card-content" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/card/card_description.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Muted subtitle under a PhlexKit::CardTitle — a <p>. See card.rb.
+  class CardDescription < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      p(**mix({ class: "pk-card-description" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/card/card_footer.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Footer region of a PhlexKit::Card — typically a row of PhlexKit::Buttons. See card.rb.
+  class CardFooter < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-card-footer" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/card/card_header.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Header region of PhlexKit::Card — stacks a CardTitle + CardDescription. See card.rb.
+  class CardHeader < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-card-header" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/card/card_title.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Title line of a PhlexKit::Card header — an <h3>. See card.rb.
+  class CardTitle < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      h3(**mix({ class: "pk-card-title" }, @attrs), &block)
+    end
+  end
+end