uikit_rails 0.1.0

data/lib/uikit_rails/templates/components/button/button.css

@@ -0,0 +1,125 @@
+/* ============================================
+ * UikitRails — Button
+ *
+ * Variants: default, destructive, outline, secondary, ghost, link
+ * Sizes:    sm, md, lg, icon
+ * ============================================ */
+
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-family: var(--ui-font-family);
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+  text-decoration: none;
+  line-height: 1;
+}
+
+.ui-btn:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+.ui-btn:disabled,
+.ui-btn[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* --- Variants --- */
+
+.ui-btn--default {
+  background-color: var(--ui-primary);
+  color: var(--ui-primary-foreground);
+}
+
+.ui-btn--default:hover {
+  background-color: color-mix(in srgb, var(--ui-primary) 90%, transparent);
+}
+
+.ui-btn--destructive {
+  background-color: var(--ui-destructive);
+  color: var(--ui-destructive-foreground);
+}
+
+.ui-btn--destructive:hover {
+  background-color: color-mix(in srgb, var(--ui-destructive) 90%, transparent);
+}
+
+.ui-btn--outline {
+  border-color: var(--ui-border);
+  background-color: var(--ui-background);
+  color: var(--ui-foreground);
+}
+
+.ui-btn--outline:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-btn--secondary {
+  background-color: var(--ui-secondary);
+  color: var(--ui-secondary-foreground);
+}
+
+.ui-btn--secondary:hover {
+  background-color: color-mix(in srgb, var(--ui-secondary) 80%, transparent);
+}
+
+.ui-btn--ghost {
+  background-color: transparent;
+  color: var(--ui-foreground);
+}
+
+.ui-btn--ghost:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-btn--link {
+  background-color: transparent;
+  color: var(--ui-primary);
+  text-underline-offset: 4px;
+}
+
+.ui-btn--link:hover {
+  text-decoration: underline;
+}
+
+/* --- Sizes --- */
+
+.ui-btn--sm {
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  font-size: var(--ui-font-size-xs);
+  border-radius: var(--ui-radius);
+}
+
+.ui-btn--md {
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-btn--lg {
+  height: 2.75rem;
+  padding: 0 2rem;
+  font-size: var(--ui-font-size-base);
+  border-radius: var(--ui-radius);
+}
+
+.ui-btn--icon {
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 0;
+}

data/lib/uikit_rails/templates/components/button/component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Ui
+  module Button
+    # Button component with multiple variants and sizes.
+    class Component < Ui::BaseComponent
+      VARIANTS = %i[default destructive outline secondary ghost link].freeze
+      SIZES = %i[sm md lg icon].freeze
+
+      attr_reader :variant, :size, :tag, :html_attrs
+
+      def initialize(variant: :default, size: :md, tag: :button, **html_attrs)
+        @variant = variant.to_sym
+        @size = size.to_sym
+        @tag = tag
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(tag, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        defaults = {
+          class: computed_classes,
+          type: (tag == :button ? "button" : nil)
+        }.compact
+
+        merge_attrs(defaults, html_attrs)
+      end
+
+      def computed_classes
+        class_names(
+          "ui-btn",
+          "ui-btn--#{variant}",
+          "ui-btn--#{size}"
+        )
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/button/preview.yml

@@ -0,0 +1,106 @@
+description: A clickable button with multiple variants and sizes. Renders as a <button> by default or as an <a> tag for links.
+
+sections:
+  - title: Variants
+    examples:
+      - title: Default
+        code: |
+          <%= render Ui::Button::Component.new do %>
+            Click me
+          <% end %>
+
+      - title: Secondary
+        code: |
+          <%= render Ui::Button::Component.new(variant: :secondary) do %>
+            Secondary
+          <% end %>
+
+      - title: Destructive
+        code: |
+          <%= render Ui::Button::Component.new(variant: :destructive) do %>
+            Delete
+          <% end %>
+
+      - title: Outline
+        code: |
+          <%= render Ui::Button::Component.new(variant: :outline) do %>
+            Outline
+          <% end %>
+
+      - title: Ghost
+        code: |
+          <%= render Ui::Button::Component.new(variant: :ghost) do %>
+            Ghost
+          <% end %>
+
+      - title: Link
+        code: |
+          <%= render Ui::Button::Component.new(variant: :link) do %>
+            Link
+          <% end %>
+
+  - title: Sizes
+    examples:
+      - title: Small
+        code: |
+          <%= render Ui::Button::Component.new(size: :sm) do %>
+            Small
+          <% end %>
+
+      - title: Medium (default)
+        code: |
+          <%= render Ui::Button::Component.new(size: :md) do %>
+            Medium
+          <% end %>
+
+      - title: Large
+        code: |
+          <%= render Ui::Button::Component.new(size: :lg) do %>
+            Large
+          <% end %>
+
+      - title: Icon
+        code: |
+          <%= render Ui::Button::Component.new(size: :icon) do %>
+            &#9733;
+          <% end %>
+
+  - title: As a Link
+    examples:
+      - title: Link with default style
+        code: |
+          <%= render Ui::Button::Component.new(tag: :a, href: "/dashboard") do %>
+            Go to Dashboard
+          <% end %>
+
+      - title: Link with outline style
+        code: |
+          <%= render Ui::Button::Component.new(tag: :a, href: "#", variant: :outline) do %>
+            Learn more
+          <% end %>
+
+  - title: Disabled State
+    examples:
+      - title: Disabled default
+        code: |
+          <%= render Ui::Button::Component.new(disabled: true) do %>
+            Disabled
+          <% end %>
+
+      - title: Disabled destructive
+        code: |
+          <%= render Ui::Button::Component.new(variant: :destructive, disabled: true) do %>
+            Can't delete
+          <% end %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Button::Component.new(
+            variant: :secondary,
+            class: "my-custom-class",
+            data: { turbo: false, controller: "my-controller" }
+          ) do %>
+            Custom
+          <% end %>

data/lib/uikit_rails/templates/components/card/USAGE

@@ -0,0 +1,33 @@
+Basic card:
+
+  <%= render Ui::Card::Component.new do |card| %>
+    <% card.with_title do %>Title<% end %>
+    <p>Body content</p>
+  <% end %>
+
+With title and description:
+
+  <%= render Ui::Card::Component.new do |card| %>
+    <% card.with_title do %>Title<% end %>
+    <% card.with_description do %>Description text<% end %>
+    <p>Body</p>
+  <% end %>
+
+With footer:
+
+  <%= render Ui::Card::Component.new do |card| %>
+    <% card.with_title do %>Title<% end %>
+    <p>Content</p>
+    <% card.with_footer do %>Footer content<% end %>
+  <% end %>
+
+With custom header:
+
+  <%= render Ui::Card::Component.new do |card| %>
+    <% card.with_header do %><strong>Custom header</strong><% end %>
+    <p>Content</p>
+  <% end %>
+
+With custom attributes:
+
+  <%= render Ui::Card::Component.new(class: "extra", data: { controller: "card" }) do %>Content<% end %>

data/lib/uikit_rails/templates/components/card/card.css

@@ -0,0 +1,63 @@
+/* ============================================
+ * UikitRails — Card
+ *
+ * Versatile container for grouping related content
+ * with optional header, title, description, and footer.
+ * ============================================ */
+
+.ui-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  font-family: var(--ui-font-family);
+  overflow: hidden;
+}
+
+/* --- Header --- */
+
+.ui-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1.5rem 1.5rem 0;
+}
+
+/* --- Title --- */
+
+.ui-card__title {
+  margin: 0;
+  font-size: var(--ui-font-size-base);
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--ui-foreground);
+}
+
+/* --- Description --- */
+
+.ui-card__description {
+  margin: 0;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  line-height: 1.5;
+}
+
+/* --- Body --- */
+
+.ui-card__body {
+  padding: 1.5rem;
+  font-size: var(--ui-font-size-sm);
+  flex: 1;
+}
+
+/* --- Footer --- */
+
+.ui-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 1.5rem 1.5rem;
+}

data/lib/uikit_rails/templates/components/card/component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag :div, **computed_attrs do %>
+  <% if header? %>
+    <div class="ui-card__header"><%= header %></div>
+  <% elsif title? || description? %>
+    <div class="ui-card__header">
+      <% if title? %><h3 class="ui-card__title"><%= title %></h3><% end %>
+      <% if description? %><p class="ui-card__description"><%= description %></p><% end %>
+    </div>
+  <% end %>
+  <% if content? %>
+    <div class="ui-card__body"><%= content %></div>
+  <% end %>
+  <% if footer? %>
+    <div class="ui-card__footer"><%= footer %></div>
+  <% end %>
+<% end %>

data/lib/uikit_rails/templates/components/card/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Ui
+  module Card
+    # Versatile container for grouping related content.
+    class Component < Ui::BaseComponent
+      renders_one :header
+      renders_one :title
+      renders_one :description
+      renders_one :footer
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-card" }, html_attrs)
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/card/preview.yml

@@ -0,0 +1,57 @@
+description: A versatile container for grouping related content with optional header, title, description, body, and footer sections.
+
+sections:
+  - title: Basic Card
+    examples:
+      - title: Simple content
+        code: |
+          <%= render Ui::Card::Component.new do |card| %>
+            <% card.with_title do %>Card Title<% end %>
+            <% card.with_description do %>A short description of the card content.<% end %>
+            <p>This is the card body content.</p>
+          <% end %>
+
+  - title: Card with Header, Title, Description & Footer
+    examples:
+      - title: Full card
+        code: |
+          <%= render Ui::Card::Component.new do |card| %>
+            <% card.with_title do %>Notifications<% end %>
+            <% card.with_description do %>You have 3 unread messages.<% end %>
+            <p>Review your latest notifications and take action.</p>
+            <% card.with_footer do %>
+              <%= render Ui::Button::Component.new(size: :sm) do %>View all<% end %>
+            <% end %>
+          <% end %>
+
+      - title: Card with custom header
+        code: |
+          <%= render Ui::Card::Component.new do |card| %>
+            <% card.with_header do %>
+              <div style="display:flex;align-items:center;justify-content:space-between;">
+                <strong>Team Members</strong>
+                <span>3 online</span>
+              </div>
+            <% end %>
+            <p>Manage your team and their permissions.</p>
+          <% end %>
+
+  - title: Card with Custom Content
+    examples:
+      - title: Custom styled card
+        code: |
+          <%= render Ui::Card::Component.new(class: "my-custom-card") do |card| %>
+            <% card.with_title do %>Settings<% end %>
+            <% card.with_description do %>Manage your account preferences.<% end %>
+            <p>Content goes here.</p>
+            <% card.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, size: :sm) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new(size: :sm) do %>Save<% end %>
+            <% end %>
+          <% end %>
+
+      - title: Minimal card
+        code: |
+          <%= render Ui::Card::Component.new do %>
+            <p>A simple card with just body content and no header or footer.</p>
+          <% end %>

data/lib/uikit_rails/templates/components/checkbox/USAGE

@@ -0,0 +1,19 @@
+Basic checkbox:
+
+  <%= render Ui::Checkbox::Component.new(name: "agree") %>
+
+With label:
+
+  <%= render Ui::Checkbox::Component.new(label: "Accept terms", name: "terms", id: "terms") %>
+
+Checked by default:
+
+  <%= render Ui::Checkbox::Component.new(label: "Enabled", checked: true, name: "enabled", id: "enabled") %>
+
+Disabled:
+
+  <%= render Ui::Checkbox::Component.new(label: "Disabled", disabled: true, name: "off", id: "off") %>
+
+With custom attributes:
+
+  <%= render Ui::Checkbox::Component.new(label: "Toggle", name: "flag", id: "flag", data: { action: "change->ctrl#run" }) %>

data/lib/uikit_rails/templates/components/checkbox/checkbox.css

@@ -0,0 +1,67 @@
+/* ============================================
+ * UikitRails — Checkbox
+ *
+ * Custom styled checkbox with optional label.
+ * ============================================ */
+
+.ui-checkbox__wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--ui-border);
+  border-radius: calc(var(--ui-radius) * 0.5);
+  background-color: var(--ui-background);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+}
+
+.ui-checkbox:checked {
+  background-color: var(--ui-primary);
+  border-color: var(--ui-primary);
+}
+
+.ui-checkbox:checked::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--ui-primary-foreground);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.ui-checkbox:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+.ui-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-checkbox:disabled + .ui-checkbox__label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-checkbox__label {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  cursor: pointer;
+  user-select: none;
+}

data/lib/uikit_rails/templates/components/checkbox/component.html.erb

@@ -0,0 +1,6 @@
+<div class="ui-checkbox__wrapper">
+  <input <%= tag.attributes(input_attrs) %> />
+  <% if label %>
+    <label class="ui-checkbox__label" for="<%= input_id %>"><%= label %></label>
+  <% end %>
+</div>

data/lib/uikit_rails/templates/components/checkbox/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Ui
+  module Checkbox
+    # Styled checkbox with optional label.
+    class Component < Ui::BaseComponent
+      attr_reader :label, :html_attrs
+
+      def initialize(label: nil, **html_attrs)
+        @label = label
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def input_attrs
+        merge_attrs({ class: "ui-checkbox", type: "checkbox" }, html_attrs)
+      end
+
+      def input_id
+        html_attrs[:id] || html_attrs[:name]
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/checkbox/preview.yml

@@ -0,0 +1,43 @@
+description: A styled checkbox with an optional label. Supports checked, disabled, and all standard HTML input attributes.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Without label
+        code: |
+          <%= render Ui::Checkbox::Component.new(name: "terms") %>
+
+      - title: With label
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Accept terms and conditions", name: "terms", id: "terms") %>
+
+  - title: States
+    examples:
+      - title: Checked
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Checked by default", checked: true, name: "notify", id: "notify") %>
+
+      - title: Disabled
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Disabled checkbox", disabled: true, name: "disabled_cb", id: "disabled_cb") %>
+
+      - title: Disabled and checked
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Disabled checked", disabled: true, checked: true, name: "disabled_checked", id: "disabled_checked") %>
+
+  - title: Form Integration
+    examples:
+      - title: With value
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Subscribe to newsletter", name: "subscribe", value: "1", id: "subscribe") %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Checkbox::Component.new(
+            label: "Enable feature",
+            name: "feature",
+            id: "feature",
+            data: { controller: "feature-toggle", action: "change->feature-toggle#toggle" }
+          ) %>

data/lib/uikit_rails/templates/components/collapsible/USAGE

@@ -0,0 +1,31 @@
+Basic collapsible:
+
+  <%= render Ui::Collapsible::Component.new do |collapsible| %>
+    <% collapsible.with_trigger do %>
+      <span>Toggle content</span>
+    <% end %>
+    <p>Hidden content revealed on click.</p>
+  <% end %>
+
+Open by default:
+
+  <%= render Ui::Collapsible::Component.new(open: true) do |collapsible| %>
+    <% collapsible.with_trigger do %>
+      <span>Already open</span>
+    <% end %>
+    <p>This content is visible on load.</p>
+  <% end %>
+
+Slots:
+  trigger — Clickable area that toggles visibility
+  content — Main body (default slot), shown/hidden on toggle
+
+Props:
+  open (boolean, default: false) — Whether the content starts expanded
+
+With custom attributes:
+
+  <%= render Ui::Collapsible::Component.new(class: "extra", data: { section: "faq" }) do |collapsible| %>
+    <% collapsible.with_trigger do %>Question?<% end %>
+    <p>Answer.</p>
+  <% end %>