RubyGems - phlex_kit - Versions diffs - 0.2.0 - Mend

phlex_kit 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (405) hide show

data/app/components/phlex_kit/select/select_value.rb ADDED Viewed

@@ -0,0 +1,21 @@
+module PhlexKit
+  # The text shown in a PhlexKit::SelectTrigger — the selected item's label (yielded
+  # block) or the `placeholder:` when nothing is chosen. The Stimulus controller
+  # rewrites this element's text on selection. See select.rb.
+  class SelectValue < BaseComponent
+    def initialize(placeholder: nil, **attrs)
+      @placeholder = placeholder
+      @attrs = attrs
+    end
+    def view_template(&block)
+      span(**mix({ class: "pk-select-value", data: { phlex_kit__select_target: "value" } }, @attrs)) do
+        if block
+          yield
+        elsif @placeholder
+          plain @placeholder
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/separator/separator.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* Co-located with separator.rb — UI::Separator. ruby_ui's Tailwind
+   (`shrink-0 bg-border` + `h-[1px] w-full` / `h-full w-[1px]`) as vanilla CSS on
+   the palette tokens. Theme tokens come from the global stylesheet. */
+.pk-separator { flex-shrink: 0; background: var(--pk-border); border: 0; }
+.pk-separator.horizontal { height: 1px; width: 100%; }
+.pk-separator.vertical { height: 100%; width: 1px; }

data/app/components/phlex_kit/separator/separator.rb ADDED Viewed

@@ -0,0 +1,30 @@
+module PhlexKit
+  # Visual/semantic divider, ported from ruby_ui's RubyUI::Separator. `as:` picks
+  # the element (div/hr), `orientation:` is horizontal (default) or vertical, and
+  # `decorative:` toggles the a11y role (none vs separator). Presentational; attrs
+  # pass through via `mix`. A bad orientation fails loud (ArgumentError), mirroring
+  # the kit's fail-loud selectors.
+  class Separator < BaseComponent
+    ORIENTATIONS = %i[horizontal vertical].freeze
+    def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs)
+      @as = as
+      @orientation = orientation.to_sym
+      unless ORIENTATIONS.include?(@orientation)
+        raise ArgumentError, "Invalid orientation: #{orientation.inspect}"
+      end
+      @decorative = decorative
+      @attrs = attrs
+    end
+    def view_template(&block)
+      send(@as, **mix({ role: (@decorative ? "none" : "separator"), class: classes }, @attrs), &block)
+    end
+    private
+    def classes
+      [ "pk-separator", @orientation.to_s ].join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/sheet/sheet.css ADDED Viewed

@@ -0,0 +1,17 @@
+/* Co-located with sheet.rb. Theme tokens from the global stylesheet. */
+.pk-sheet-trigger { display: inline-block; }
+.pk-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }
+.pk-sheet-content {
+  position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1rem;
+  background: var(--pk-surface); color: var(--pk-text); padding: 1.5rem;
+  box-shadow: 0 10px 30px rgb(0 0 0 / .35); overflow: auto;
+}
+.pk-sheet-content.right { inset-block: 0; right: 0; height: 100%; width: min(24rem, 100%); border-left: 1px solid var(--pk-border); }
+.pk-sheet-content.left  { inset-block: 0; left: 0;  height: 100%; width: min(24rem, 100%); border-right: 1px solid var(--pk-border); }
+.pk-sheet-content.top    { inset-inline: 0; top: 0;    border-bottom: 1px solid var(--pk-border); }
+.pk-sheet-content.bottom { inset-inline: 0; bottom: 0; border-top: 1px solid var(--pk-border); }
+.pk-sheet-header { display: flex; flex-direction: column; gap: .375rem; }
+.pk-sheet-footer { display: flex; flex-direction: column-reverse; gap: .5rem; }
+.pk-sheet-title { font-size: 1.125rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
+.pk-sheet-description { font-size: .875rem; color: var(--pk-muted); }
+.pk-sheet-middle { padding-block: 1rem; }

data/app/components/phlex_kit/sheet/sheet.rb ADDED Viewed

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Side panel (drawer). Ported from ruby_ui's RubyUI::Sheet. Compose Sheet >
+  # (SheetTrigger + SheetContent(side:) > SheetHeader/Title/Description/Footer).
+  # On open the content template is cloned into <body>. phlex-kit--sheet.
+  class Sheet < BaseComponent
+    def initialize(open: false, **attrs)
+      @open = open
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ data: { controller: "phlex-kit--sheet", phlex_kit__sheet_open_value: @open.to_s } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/sheet/sheet_content.rb ADDED Viewed

@@ -0,0 +1,25 @@
+module PhlexKit
+  class SheetContent < BaseComponent
+    SIDES = { top: "top", right: "right", bottom: "bottom", left: "left" }.freeze
+    def initialize(side: :right, **attrs)
+      @side = side.to_sym
+      @attrs = attrs
+    end
+    def view_template(&block)
+      template(data: { phlex_kit__sheet_target: "content" }) do
+        div(data: { controller: "phlex-kit--sheet-content" }) do
+          div(class: "pk-sheet-backdrop", data: { action: "click->phlex-kit--sheet-content#close" })
+          div(**mix({ class: ["pk-sheet-content", SIDES.fetch(@side)].join(" ") }, @attrs)) do
+            block&.call
+            button(type: "button", class: "pk-overlay-close", data: { action: "click->phlex-kit--sheet-content#close" }) do
+              svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
+          s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z")
+        end
+              span(class: "pk-sr-only") { "Close" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/sheet/sheet_description.rb ADDED Viewed

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

data/app/components/phlex_kit/sheet/sheet_footer.rb ADDED Viewed

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

data/app/components/phlex_kit/sheet/sheet_header.rb ADDED Viewed

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

data/app/components/phlex_kit/sheet/sheet_middle.rb ADDED Viewed

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

data/app/components/phlex_kit/sheet/sheet_title.rb ADDED Viewed

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

data/app/components/phlex_kit/sheet/sheet_trigger.rb ADDED Viewed

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

data/app/components/phlex_kit/shortcut_key/shortcut_key.css ADDED Viewed

@@ -0,0 +1,17 @@
+/* Co-located with shortcut_key.rb. Theme tokens from the global stylesheet. */
+.pk-shortcut-key {
+  pointer-events: none;
+  user-select: none;
+  display: inline-flex;
+  height: 1.25rem;
+  align-items: center;
+  gap: .25rem;
+  border: 1px solid var(--pk-border);
+  border-radius: calc(var(--pk-radius) - 4px);
+  background: var(--pk-surface-2);
+  padding-inline: .375rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--pk-muted);
+}

data/app/components/phlex_kit/shortcut_key/shortcut_key.rb ADDED Viewed

@@ -0,0 +1,9 @@
+module PhlexKit
+  # Keyboard-shortcut hint, rendered as <kbd>. Ported from ruby_ui's
+  # RubyUI::ShortcutKey. Purely visual — wires no key handler.
+  class ShortcutKey < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = kbd(**mix({ class: "pk-shortcut-key" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar.css ADDED Viewed

@@ -0,0 +1,42 @@
+/* Co-located with sidebar.rb — UI::Sidebar (+ Wrapper / Header / Content / Footer
+   / Group / Menu / MenuItem / MenuButton / Inset). ruby_ui's structure at
+   collapsible:none, Tailwind → vanilla CSS on the palette tokens. The collapsible/
+   offcanvas/icon modes (+ their Stimulus/cookie/Sheet) are deliberately not ported.
+   Theme tokens come from the global stylesheet. */
+.pk-sidebar-wrapper { display: flex; min-height: 100dvh; width: 100%; }
+.pk-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 14rem;
+  flex-shrink: 0;
+  background: var(--pk-surface);
+  border-right: 1px solid var(--pk-border);
+}
+.pk-sidebar-header { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .75rem .25rem; }
+.pk-sidebar-content { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-height: 0; overflow: auto; padding: .5rem .75rem; }
+.pk-sidebar-footer { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
+.pk-sidebar-group { display: flex; flex-direction: column; gap: .125rem; }
+.pk-sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; width: 100%; }
+.pk-sidebar-menu-item { position: relative; }
+.pk-sidebar-menu-button {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  width: 100%;
+  padding: .5rem .65rem;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .9rem;
+  text-align: left;
+  cursor: pointer;
+}
+.pk-sidebar-menu-button:hover { background: var(--pk-accent); text-decoration: none; }
+.pk-sidebar-menu-button[data-active="true"] { background: var(--pk-brand); color: var(--pk-brand-ink); font-weight: 600; }
+.pk-sidebar-inset { flex: 1; min-width: 0; }

data/app/components/phlex_kit/sidebar/sidebar.rb ADDED Viewed

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Sidebar shell, ported from ruby_ui's RubyUI::Sidebar at `collapsible: :none`
+  # (the NonCollapsibleSidebar path): a static flex-column rail. Deliberately
+  # WITHOUT ruby_ui's collapsible/offcanvas Stimulus controller + cookie state +
+  # mobile Sheet (the admin sidebar is static) — those can be added later if a
+  # collapsible chrome is wanted. Compose with SidebarWrapper (the page root) +
+  # SidebarHeader / SidebarContent / SidebarMenu (+ Item / Button) / SidebarFooter,
+  # alongside a SidebarInset for the main content. Tailwind → vanilla `.pk-sidebar*`
+  # (sidebar.css).
+  class Sidebar < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_content.rb ADDED Viewed

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Scrollable middle region of a PhlexKit::Sidebar (holds the nav menu). See sidebar.rb.
+  class SidebarContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-content" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_footer.rb ADDED Viewed

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Bottom region of a PhlexKit::Sidebar (user identity + sign out). See sidebar.rb.
+  class SidebarFooter < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-footer" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_group.rb ADDED Viewed

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A cluster of menu items within SidebarContent. See sidebar.rb.
+  class SidebarGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-group" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_header.rb ADDED Viewed

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Top region of a PhlexKit::Sidebar (brand + store switcher). See sidebar.rb.
+  class SidebarHeader < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-header" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_inset.rb ADDED Viewed

@@ -0,0 +1,14 @@
+module PhlexKit
+  # The main content region beside a PhlexKit::Sidebar (renders <main>, flex-1). Pass
+  # `class: "main"` to keep the app's existing content padding/typography.
+  # See sidebar.rb.
+  class SidebarInset < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      main(**mix({ class: "pk-sidebar-inset" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu.rb ADDED Viewed

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The nav list (<ul>) inside SidebarContent. See sidebar.rb.
+  class SidebarMenu < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      ul(**mix({ class: "pk-sidebar-menu" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_button.rb ADDED Viewed

@@ -0,0 +1,17 @@
+module PhlexKit
+  # The interactive element of a SidebarMenuItem. `as:` is :button (default) or :a
+  # (pass `href:`); `active: true` marks the current page (drives the highlight via
+  # data-active — a named kwarg, not an attr, since `mix` would merge a repeated
+  # attribute rather than override). Attrs pass through via mix. See sidebar.rb.
+  class SidebarMenuButton < BaseComponent
+    def initialize(as: :button, active: false, **attrs)
+      @as = as
+      @active = active
+      @attrs = attrs
+    end
+    def view_template(&block)
+      send(@as, **mix({ class: "pk-sidebar-menu-button", "data-active": (@active ? "true" : "false") }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_menu_item.rb ADDED Viewed

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A single nav row (<li>) in a SidebarMenu. See sidebar.rb.
+  class SidebarMenuItem < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      li(**mix({ class: "pk-sidebar-menu-item" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/sidebar/sidebar_wrapper.rb ADDED Viewed

@@ -0,0 +1,13 @@
+module PhlexKit
+  # The page-level flex row that holds a PhlexKit::Sidebar + a PhlexKit::SidebarInset.
+  # See sidebar.rb.
+  class SidebarWrapper < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-wrapper" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/skeleton/skeleton.css ADDED Viewed

@@ -0,0 +1,7 @@
+/* Co-located with skeleton.rb. Theme tokens come from the global stylesheet. */
+.pk-skeleton {
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: color-mix(in oklab, var(--pk-brand, #6c8cff) 10%, transparent);
+  animation: pk-pulse 1.5s cubic-bezier(.4, 0, .6, 1) infinite;
+}
+@keyframes pk-pulse { 50% { opacity: .5; } }

data/app/components/phlex_kit/skeleton/skeleton.rb ADDED Viewed

@@ -0,0 +1,9 @@
+module PhlexKit
+  # Placeholder shimmer for loading content. Ported from ruby_ui's RubyUI::Skeleton
+  # (Tailwind `animate-pulse rounded-md bg-primary/10` → vanilla .pk-skeleton).
+  class Skeleton < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-skeleton" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/slider/slider.css ADDED Viewed

@@ -0,0 +1,52 @@
+/* Co-located with slider.rb — UI::Slider, shadcn parity on a native range
+   input: muted track, primary filled portion (--pk-slider-progress, kept in
+   sync by the controller), round bordered thumb. */
+.pk-slider {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 1rem;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.pk-slider:focus-visible { outline: none; }
+.pk-slider::-webkit-slider-runnable-track {
+  height: .375rem;
+  border-radius: 9999px;
+  background: linear-gradient(to right,
+    var(--pk-brand) var(--pk-slider-progress, 50%),
+    var(--pk-surface-2) var(--pk-slider-progress, 50%));
+}
+.pk-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.3125rem;
+  border-radius: 9999px;
+  border: 1px solid var(--pk-brand);
+  background: var(--pk-bg);
+  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
+  transition: box-shadow .15s ease;
+}
+.pk-slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-slider::-moz-range-track {
+  height: .375rem;
+  border-radius: 9999px;
+  background: var(--pk-surface-2);
+}
+.pk-slider::-moz-range-progress {
+  height: .375rem;
+  border-radius: 9999px;
+  background: var(--pk-brand);
+}
+.pk-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 1px solid var(--pk-brand);
+  background: var(--pk-bg);
+}
+.pk-slider:disabled { opacity: .5; cursor: not-allowed; }

data/app/components/phlex_kit/slider/slider.rb ADDED Viewed

@@ -0,0 +1,39 @@
+module PhlexKit
+  # Range slider, ported from shadcn/ui's Slider. Radix's slider is replaced
+  # with a styled native <input type="range"> (keyboard/touch/forms for free);
+  # the tiny phlex-kit--slider controller keeps the filled-track width in sync
+  # via a custom property. `.pk-slider` (slider.css).
+  class Slider < BaseComponent
+    def initialize(min: 0, max: 100, step: 1, value: nil, **attrs)
+      @min = min
+      @max = max
+      @step = step
+      @value = value || (@min + (@max - @min) / 2)
+      @attrs = attrs
+    end
+    def view_template
+      input(**mix({
+        type: :range,
+        min: @min,
+        max: @max,
+        step: @step,
+        value: @value,
+        class: "pk-slider",
+        style: "--pk-slider-progress: #{progress}%",
+        data: {
+          controller: "phlex-kit--slider",
+          action: "input->phlex-kit--slider#update"
+        }
+      }, @attrs))
+    end
+    private
+    def progress
+      span = (@max - @min).to_f
+      return 0 if span.zero?
+      (((@value.to_f - @min) / span) * 100).round(2)
+    end
+  end
+end

data/app/components/phlex_kit/spinner/spinner.css ADDED Viewed

@@ -0,0 +1,5 @@
+/* Co-located with spinner.rb — UI::Spinner (shadcn's spinning loader). */
+.pk-spinner { width: 1rem; height: 1rem; animation: pk-spin 1s linear infinite; }
+.pk-spinner.sm { width: .75rem; height: .75rem; }
+.pk-spinner.lg { width: 1.5rem; height: 1.5rem; }
+@keyframes pk-spin { to { transform: rotate(360deg); } }

data/app/components/phlex_kit/spinner/spinner.rb ADDED Viewed

@@ -0,0 +1,27 @@
+module PhlexKit
+  # Loading spinner, ported from shadcn/ui's Spinner (a spinning loader icon;
+  # not in ruby_ui). Sizes via SIZES.fetch. `.pk-spinner` (spinner.css).
+  class Spinner < BaseComponent
+    SIZES = { sm: "sm", md: nil, lg: "lg" }.freeze
+    def initialize(size: :md, **attrs)
+      @size = size.to_sym
+      @attrs = attrs
+    end
+    def view_template
+      svg(**mix({
+        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",
+        class: [ "pk-spinner", SIZES.fetch(@size) ].compact.join(" "),
+        role: "status",
+        aria: { label: "Loading" }
+      }, @attrs)) { |s| s.path(d: "M21 12a9 9 0 1 1-6.219-8.56") }
+    end
+  end
+end

data/app/components/phlex_kit/stars/stars.css ADDED Viewed

@@ -0,0 +1,4 @@
+/* Co-located with stars.rb — UI::Stars. The gold rating glyphs; self-colours so
+   product cards / summaries get amber stars too (the old `.review .stars` rule
+   only coloured stars inside a review). Theme tokens come from the global stylesheet. */
+.pk-stars { color: var(--pk-amber); letter-spacing: 1px; }

data/app/components/phlex_kit/stars/stars.rb ADDED Viewed

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Star rating (CUSTOM — ruby_ui has no rating component). Replaces the `stars`
+  # view helper: renders `rating` filled stars + the remainder empty, out of
+  # `max`. Presentational; attrs pass through via mix. Self-colours (amber) so it
+  # works anywhere, not just inside a review.
+  class Stars < BaseComponent
+    def initialize(rating:, max: 5, **attrs)
+      @rating = rating.to_i.clamp(0, max)
+      @max = max
+      @attrs = attrs
+    end
+    def view_template
+      span(**mix({ class: "pk-stars", title: "#{@rating}/#{@max}" }, @attrs)) do
+        plain(("★" * @rating) + ("☆" * (@max - @rating)))
+      end
+    end
+  end
+end

data/app/components/phlex_kit/switch/switch.css ADDED Viewed

@@ -0,0 +1,28 @@
+/* Co-located with switch.rb. Theme tokens from the global stylesheet. */
+.pk-switch {
+  display: inline-flex;
+  height: 1.5rem;
+  width: 2.75rem;
+  flex: none;
+  cursor: pointer;
+  align-items: center;
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background: var(--pk-border);
+  transition: background-color .15s ease;
+}
+.pk-switch:has(.pk-switch-input:checked) { background: var(--pk-brand); }
+.pk-switch:has(.pk-switch-input:disabled) { cursor: not-allowed; opacity: .5; }
+.pk-switch-input { display: none; }
+.pk-switch-thumb {
+  pointer-events: none;
+  display: block;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 9999px;
+  background: var(--pk-surface);
+  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
+  transition: transform .15s ease;
+  transform: translateX(0);
+}
+.pk-switch:has(.pk-switch-input:checked) .pk-switch-thumb { transform: translateX(1.25rem); }

data/app/components/phlex_kit/switch/switch.rb ADDED Viewed

@@ -0,0 +1,21 @@
+module PhlexKit
+  # On/off toggle rendered as a checkbox styled as a track+thumb. Ported from
+  # ruby_ui's RubyUI::Switch — pure CSS (`:has(:checked)`), no Stimulus. Emits an
+  # optional hidden field so an unchecked box still posts a value (Rails idiom).
+  class Switch < BaseComponent
+    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs)
+      @include_hidden = include_hidden
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+      @attrs = attrs
+    end
+    def view_template
+      label(**mix({ role: "switch", class: "pk-switch" }, {})) do
+        input(type: "hidden", name: @attrs[:name], value: @unchecked_value) if @include_hidden
+        input(**mix({ class: "pk-switch-input" }, @attrs).merge(type: "checkbox", value: @checked_value))
+        span(class: "pk-switch-thumb")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/table/table.css ADDED Viewed

@@ -0,0 +1,24 @@
+/* Co-located with table.rb — UI::Table (+ Header/Body/Footer/Row/Head/Cell/
+   Caption). ruby_ui's structure kept; Tailwind replaced with vanilla CSS on the
+   palette tokens. Geometry from ruby_ui (text-sm, h-10 px-2 heads, p-2 cells,
+   row bottom-border + hover). Theme tokens come from the global stylesheet. */
+.pk-table-wrapper { position: relative; width: 100%; overflow: auto; }
+.pk-table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: .875rem; }
+.pk-table-header .pk-table-row { border-bottom: 1px solid var(--pk-border); }
+.pk-table-body .pk-table-row:last-child { border-bottom: 0; }
+.pk-table-footer { border-top: 1px solid var(--pk-border); font-weight: 500; }
+.pk-table-row { border-bottom: 1px solid var(--pk-border); transition: background-color .12s ease; }
+.pk-table-row:hover { background: color-mix(in oklab, var(--pk-surface-2) 60%, transparent); }
+.pk-table-head {
+  height: 2.5rem;
+  padding: 0 .5rem;
+  text-align: left;
+  vertical-align: middle;
+  font-weight: 500;
+  color: var(--pk-muted);
+}
+.pk-table-cell { padding: .5rem; vertical-align: middle; }
+.pk-table-caption { margin-top: 1rem; font-size: .875rem; color: var(--pk-muted); }