phlex_kit 0.2.0

data/app/components/phlex_kit/carousel/carousel.css

@@ -0,0 +1,41 @@
+/* Co-located with carousel.rb — UI::Carousel. ruby_ui's structure kept
+   (viewport > flex track > basis-100% items, gap via negative margin + padding);
+   embla-carousel dropped, so the track is translated by the phlex-kit--carousel
+   controller and transitions here. Geometry from ruby_ui (1rem slide gap, 2rem
+   round edge buttons at -3rem). Theme tokens come from the global stylesheet. */
+.pk-carousel { position: relative; }
+.pk-carousel-viewport { overflow: hidden; cursor: grab; }
+.pk-carousel-viewport.dragging { cursor: grabbing; user-select: none; }
+/* Let the free axis keep scrolling the page on touch. */
+.pk-carousel.is-horizontal .pk-carousel-viewport { touch-action: pan-y; }
+.pk-carousel.is-vertical .pk-carousel-viewport { touch-action: pan-x; }
+.pk-carousel-item img { -webkit-user-drag: none; }
+
+.pk-carousel-track {
+  display: flex;
+  transition: transform .3s ease;
+  will-change: transform;
+}
+.pk-carousel.is-horizontal .pk-carousel-track { margin-left: -1rem; }
+.pk-carousel.is-vertical .pk-carousel-track { flex-direction: column; margin-top: -1rem; }
+
+.pk-carousel-item {
+  min-width: 0;
+  flex: 0 0 100%;
+}
+.pk-carousel.is-horizontal .pk-carousel-item { padding-left: 1rem; }
+.pk-carousel.is-vertical .pk-carousel-item { padding-top: 1rem; }
+
+/* Edge buttons (an outline icon .pk-button; same specificity, later in the
+   manifest, so these round overrides win). */
+.pk-button.pk-carousel-previous, .pk-button.pk-carousel-next {
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+}
+.pk-carousel.is-horizontal .pk-carousel-previous { left: -3rem; top: 50%; transform: translateY(-50%); }
+.pk-carousel.is-horizontal .pk-carousel-next { right: -3rem; top: 50%; transform: translateY(-50%); }
+.pk-carousel.is-vertical .pk-carousel-previous { top: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
+.pk-carousel.is-vertical .pk-carousel-next { bottom: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
+.pk-carousel-previous svg, .pk-carousel-next svg { width: 1rem; height: 1rem; }

data/app/components/phlex_kit/carousel/carousel.rb

@@ -0,0 +1,37 @@
+module PhlexKit
+  # Carousel, ported from ruby_ui's RubyUI::Carousel. Upstream drives an
+  # embla-carousel instance; that npm dependency is dropped — the
+  # phlex-kit--carousel controller is a small translate-based engine (loop,
+  # x/y axis from the options value, arrow keys, pointer drag/swipe, button
+  # disabled state), so only @hotwired/stimulus is needed. Compose Carousel(orientation:) >
+  # CarouselContent > CarouselItem(s), plus CarouselPrevious / CarouselNext.
+  # Tailwind → vanilla `.pk-carousel*` (carousel.css).
+  class Carousel < BaseComponent
+    ORIENTATIONS = { horizontal: "is-horizontal", vertical: "is-vertical" }.freeze
+
+    def initialize(orientation: :horizontal, options: {}, **attrs)
+      @orientation = orientation.to_sym
+      @options = options
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: [ "pk-carousel", ORIENTATIONS.fetch(@orientation) ].join(" "),
+        role: "region",
+        aria: { roledescription: "carousel" },
+        data: {
+          controller: "phlex-kit--carousel",
+          phlex_kit__carousel_options_value: JSON.generate(default_options.merge(@options)),
+          action: "keydown.right->phlex-kit--carousel#scrollNext:prevent keydown.left->phlex-kit--carousel#scrollPrev:prevent"
+        }
+      }, @attrs), &)
+    end
+
+    private
+
+    def default_options
+      { axis: (@orientation == :horizontal) ? "x" : "y" }
+    end
+  end
+end

data/app/components/phlex_kit/carousel/carousel_content.rb

@@ -0,0 +1,16 @@
+module PhlexKit
+  # The clipping viewport + sliding track holding the CarouselItems. The
+  # controller translates the track; orientation styling comes from the parent
+  # .pk-carousel's is-horizontal/is-vertical modifier. See carousel.rb.
+  class CarouselContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(class: "pk-carousel-viewport", data: { phlex_kit__carousel_target: "viewport" }) do
+        div(**mix({ class: "pk-carousel-track" }, @attrs), &)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/carousel/carousel_item.rb

@@ -0,0 +1,17 @@
+module PhlexKit
+  # One slide in a PhlexKit::CarouselContent. Full-width/-height by default
+  # (basis 100%); override with `class:` for multi-up layouts. See carousel.rb.
+  class CarouselItem < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        role: "group",
+        aria: { roledescription: "slide" },
+        class: "pk-carousel-item"
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/carousel/carousel_next.rb

@@ -0,0 +1,39 @@
+module PhlexKit
+  # Next-slide button — the CarouselPrevious counterpart on the trailing edge.
+  # See carousel.rb.
+  class CarouselNext < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render Button.new(variant: :outline, icon: true, disabled: true, **mix({
+        class: "pk-carousel-next",
+        data: { action: "click->phlex-kit--carousel#scrollNext", phlex_kit__carousel_target: "nextButton" }
+      }, @attrs)) do
+        icon
+        span(class: "pk-sr-only") { "Next slide" }
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+      ) do |s|
+        s.path(d: "M5 12h14")
+        s.path(d: "m12 5 7 7-7 7")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/carousel/carousel_previous.rb

@@ -0,0 +1,40 @@
+module PhlexKit
+  # Previous-slide button — an outline icon PhlexKit::Button anchored outside the
+  # track edge (rotated 90° for vertical carousels). Starts disabled; the
+  # controller enables it once there is somewhere to scroll. See carousel.rb.
+  class CarouselPrevious < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render Button.new(variant: :outline, icon: true, disabled: true, **mix({
+        class: "pk-carousel-previous",
+        data: { action: "click->phlex-kit--carousel#scrollPrev", phlex_kit__carousel_target: "prevButton" }
+      }, @attrs)) do
+        icon
+        span(class: "pk-sr-only") { "Previous slide" }
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+      ) do |s|
+        s.path(d: "m12 19-7-7 7-7")
+        s.path(d: "M19 12H5")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/chart/chart.css

@@ -0,0 +1,9 @@
+/* Co-located with chart.rb — UI::Chart (thin wrapper; the host supplies the
+   charting library). The canvas just fills its container — sizing is the chart
+   library's job once the host wires one up. Theme tokens come from the global
+   stylesheet (the controller reads them for chart.js defaults). */
+.pk-chart {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}

data/app/components/phlex_kit/chart/chart.rb

@@ -0,0 +1,31 @@
+module PhlexKit
+  # Chart, ported from ruby_ui's RubyUI::Chart — as a thin wrapper only. ruby_ui
+  # bundles chart.js; this kit deliberately does NOT (no charting dependency).
+  # It renders the <canvas> plus the phlex-kit--chart Stimulus hook, which reads
+  # `options:` (a chart.js-shaped config hash) and then:
+  #
+  #   * if the host exposes chart.js as `window.Chart`, builds the chart with
+  #     ruby_ui's token-derived default colors (mapped to --pk-*), re-rendering
+  #     on theme change;
+  #   * otherwise dispatches "phlex-kit--chart:connect" with { canvas, options }
+  #     so the host can drive any charting library it ships.
+  #
+  #   render PhlexKit::Chart.new(options: { type: "line", data: { labels: [...],
+  #     datasets: [{ data: [...] }] } })
+  class Chart < BaseComponent
+    def initialize(options: {}, **attrs)
+      @options = options
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      canvas(**mix({
+        class: "pk-chart",
+        data: {
+          controller: "phlex-kit--chart",
+          phlex_kit__chart_options_value: JSON.generate(@options)
+        }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/checkbox/checkbox.css

@@ -0,0 +1,27 @@
+/* Co-located with checkbox.rb — UI::Checkbox. ruby_ui draws a fully custom box
+   with peer/checked Tailwind utilities; we instead let the native control render
+   and tint it with the brand token via accent-color (themes correctly on the
+   dark background, no SVG). Vanilla CSS, our own look, redesign later. Theme
+   tokens come from the global stylesheet. */
+.pk-checkbox {
+  width: 1rem;
+  height: 1rem;
+  border-radius: calc(var(--pk-radius) - 4px);
+  accent-color: var(--pk-brand);
+  cursor: pointer;
+}
+.pk-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-checkbox:disabled { cursor: not-allowed; opacity: .5; }
+
+/* A checkbox paired inline with its label (ruby_ui's `flex items-center
+   space-x-3` row). Used for checkbox lists like store-assignment; vertical
+   rhythm between rows comes from the enclosing UI::FormField's flex gap. */
+.pk-checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  font-weight: 400;
+}

data/app/components/phlex_kit/checkbox/checkbox.rb

@@ -0,0 +1,26 @@
+module PhlexKit
+  # Checkbox, ported from ruby_ui's RubyUI::Checkbox. ruby_ui pairs it with a
+  # CheckboxGroup Stimulus controller (cross-box "at least one required"
+  # coordination); that's deliberately NOT ported — it's client behaviour we
+  # don't need yet, and per the kit's convention reactivity belongs in feature
+  # components, not PhlexKit:: primitives. Like upstream it registers as a
+  # phlex-kit--form-field input target (live validation inside a FormField);
+  # `name:`/`value:`/`checked:`/`**on(...)` pass through via `mix`. Styled by
+  # `.pk-checkbox` (checkbox.css).
+  class Checkbox < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        type: :checkbox,
+        class: "pk-checkbox",
+        data: {
+          phlex_kit__form_field_target: "input",
+          action: "change->phlex-kit--form-field#onInput invalid->phlex-kit--form-field#onInvalid"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/clipboard/clipboard.css

@@ -0,0 +1,8 @@
+/* Co-located with clipboard.rb. CSS-positioned confirmation popover. Tokens global. */
+.pk-clipboard { position: relative; display: inline-block; }
+.pk-clipboard-trigger { display: inline-block; }
+.pk-clipboard-popover { position: absolute; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; }
+.pk-clipboard-popover-inner {
+  border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px); background: var(--pk-surface);
+  color: var(--pk-text); padding: .125rem .5rem; font-size: .875rem; box-shadow: 0 8px 24px rgb(0 0 0 / .3);
+}

data/app/components/phlex_kit/clipboard/clipboard.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Copy-to-clipboard with success/error confirmation popovers (CSS-positioned,
+  # no @floating-ui). Ported from ruby_ui's RubyUI::Clipboard. Compose Clipboard >
+  # (ClipboardSource + ClipboardTrigger). phlex-kit--clipboard.
+  class Clipboard < BaseComponent
+    def initialize(success: "Copied!", error: "Copy failed!", **attrs)
+      @success = success
+      @error = error
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-clipboard", data: { controller: "phlex-kit--clipboard", action: "click@window->phlex-kit--clipboard#onClickOutside" } }, @attrs)) do
+        div(&block)
+        render PhlexKit::ClipboardPopover.new(type: :success) { @success }
+        render PhlexKit::ClipboardPopover.new(type: :error) { @error }
+      end
+    end
+  end
+end

data/app/components/phlex_kit/clipboard/clipboard_popover.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  class ClipboardPopover < BaseComponent
+    TARGETS = { success: "successPopover", error: "errorPopover" }.freeze
+    def initialize(type:, **attrs)
+      @type = type.to_sym
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(class: "pk-clipboard-popover pk-hidden", data: { phlex_kit__clipboard_target: TARGETS.fetch(@type) }) do
+        div(**mix({ class: "pk-clipboard-popover-inner" }, @attrs), &block)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/clipboard/clipboard_source.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class ClipboardSource < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ data: { phlex_kit__clipboard_target: "source" } }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/clipboard/clipboard_trigger.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class ClipboardTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-clipboard-trigger", data: { phlex_kit__clipboard_target: "trigger", action: "click->phlex-kit--clipboard#copy" } }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/codeblock/codeblock.css

@@ -0,0 +1,7 @@
+/* Co-located with codeblock.rb. Plain (unhighlighted) code block. Tokens global. */
+.pk-codeblock {
+  overflow: auto; border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px);
+  background: var(--pk-surface-2); font-size: .875rem;
+}
+.pk-codeblock pre { margin: 0; padding: 1rem; }
+.pk-codeblock code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pk-text); }

data/app/components/phlex_kit/codeblock/codeblock.rb

@@ -0,0 +1,23 @@
+module PhlexKit
+  # Preformatted code block. Ported from ruby_ui's RubyUI::Codeblock, minus the
+  # server-side syntax highlighting (ruby_ui uses the `rouge` gem). Ships a plain
+  # styled <pre><code>; add rouge yourself and pass pre-highlighted HTML if wanted.
+  class Codeblock < BaseComponent
+    def initialize(code = nil, syntax: nil, **attrs)
+      @code = code
+      @syntax = syntax
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-codeblock", data: { syntax: @syntax } }, @attrs)) do
+        pre do
+          if block
+            code(&block)
+          else
+            code { @code }
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/collapsible/collapsible.css

@@ -0,0 +1,3 @@
+/* Co-located with collapsible.rb. Theme tokens from the global stylesheet. */
+.pk-collapsible-trigger { cursor: pointer; }
+.pk-collapsible-content { overflow-y: hidden; }

data/app/components/phlex_kit/collapsible/collapsible.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Show/hide a single region. Ported from ruby_ui's RubyUI::Collapsible. Compose
+  # Collapsible > (CollapsibleTrigger + CollapsibleContent). phlex-kit--collapsible.
+  class Collapsible < BaseComponent
+    def initialize(open: false, **attrs)
+      @open = open
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: "pk-collapsible", data: { controller: "phlex-kit--collapsible", phlex_kit__collapsible_open_value: @open } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/collapsible/collapsible_content.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class CollapsibleContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-collapsible-content", data: { phlex_kit__collapsible_target: "content" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/collapsible/collapsible_trigger.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class CollapsibleTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-collapsible-trigger", data: { action: "click->phlex-kit--collapsible#toggle" } }, @attrs), &)
+    end
+  end
+end