kiso 0.3.0.pre → 0.4.1.pre

data/lib/kiso/themes/layout.rb

@@ -0,0 +1,78 @@
+module Kiso
+  module Themes
+    # Root application wrapper. Provides base structure and sets
+    # `text-foreground` for dark mode inheritance.
+    #
+    # @example
+    #   App.render
+    #   App.render(center: true)
+    #
+    # Variants:
+    # - +center+ — centers content vertically and horizontally (e.g., login pages)
+    App = ClassVariants.build(
+      base: "bg-background text-foreground antialiased",
+      variants: {
+        center: {
+          true => "min-h-screen flex items-center justify-center",
+          false => ""
+        }
+      },
+      defaults: {center: false}
+    )
+
+    # Content containment with consistent max-width and padding.
+    #
+    # @example
+    #   Container.render(size: :default)
+    #
+    # Variants:
+    # - +size+ — :narrow, :default, :wide, :full
+    #
+    # Nuxt UI base: w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8
+    Container = ClassVariants.build(
+      base: "mx-auto w-full px-4 sm:px-6 lg:px-8",
+      variants: {
+        size: {
+          narrow: "max-w-3xl",
+          default: "max-w-7xl",
+          wide: "max-w-screen-2xl",
+          full: "max-w-full"
+        }
+      },
+      defaults: {size: :default}
+    )
+
+    # Site/app header. Semantic `<header>` element.
+    #
+    # @example
+    #   Header.render
+    #
+    # No variants — purely structural.
+    #
+    # Nuxt UI base: bg-default/75 backdrop-blur border-b border-default
+    #   h-(--ui-header-height) sticky top-0 z-50
+    Header = ClassVariants.build(
+      base: "bg-background/75 backdrop-blur border-b border-border sticky top-0 z-50"
+    )
+
+    # Site/app footer. Semantic `<footer>` element.
+    #
+    # @example
+    #   Footer.render
+    #
+    # No variants — purely structural.
+    Footer = ClassVariants.build(
+      base: ""
+    )
+
+    # Primary content area wrapper. Semantic `<main>` element.
+    #
+    # @example
+    #   Main.render
+    #
+    # No variants — purely structural.
+    Main = ClassVariants.build(
+      base: "flex-1"
+    )
+  end
+end

data/lib/kiso/themes/page.rb

@@ -0,0 +1,295 @@
+module Kiso
+  module Themes
+    # Page layout wrapper with optional left/right sidebar grid.
+    #
+    # Provides a responsive grid that switches from stacked (mobile) to
+    # a 10-column grid (desktop). Left and right sidebars each take 2
+    # columns, the center adjusts automatically.
+    #
+    # @example
+    #   Page.render
+    #
+    # Sub-parts: {PageLeft}, {PageCenter}, {PageRight}
+    #
+    # Nuxt UI base: flex flex-col lg:grid lg:grid-cols-10 lg:gap-10
+    Page = ClassVariants.build(
+      base: "flex flex-col lg:grid lg:grid-cols-10 lg:gap-10"
+    )
+
+    # Left sidebar slot — 2 columns on desktop.
+    #
+    # Nuxt UI: lg:col-span-2
+    PageLeft = ClassVariants.build(
+      base: "lg:col-span-2"
+    )
+
+    # Center content area — adjusts span based on sidebar presence.
+    #
+    # Nuxt UI: lg:col-span-8 (default), lg:col-span-6 (both sidebars),
+    # lg:col-span-10 (no sidebars)
+    PageCenter = ClassVariants.build(
+      base: "lg:col-span-8"
+    )
+
+    # Right sidebar slot — 2 columns, ordered first on mobile, last on desktop.
+    #
+    # Nuxt UI: lg:col-span-2 order-first lg:order-last
+    PageRight = ClassVariants.build(
+      base: "lg:col-span-2 order-first lg:order-last"
+    )
+
+    # Page header with title, description, and links.
+    #
+    # Section header for page-level content with border-bottom divider.
+    # Supports headline, title, description, and action links.
+    #
+    # @example
+    #   PageHeader.render
+    #
+    # Sub-parts: {PageHeaderHeadline}, {PageHeaderTitle},
+    # {PageHeaderDescription}, {PageHeaderLinks}
+    #
+    # Nuxt UI base: relative border-b border-default py-8
+    PageHeader = ClassVariants.build(
+      base: "relative border-b border-border py-8 text-foreground"
+    )
+
+    # Inner wrapper for page header content — flex row on desktop.
+    #
+    # Nuxt UI: flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4
+    PageHeaderWrapper = ClassVariants.build(
+      base: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4"
+    )
+
+    # Headline eyebrow text above the page header title.
+    #
+    # Nuxt UI: mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5
+    PageHeaderHeadline = ClassVariants.build(
+      base: "mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5"
+    )
+
+    # Page header title — large bold heading.
+    #
+    # Nuxt UI: text-3xl sm:text-4xl text-pretty font-bold text-highlighted
+    PageHeaderTitle = ClassVariants.build(
+      base: "text-3xl sm:text-4xl text-pretty font-bold text-foreground"
+    )
+
+    # Page header description text.
+    #
+    # Nuxt UI: text-lg text-pretty text-muted
+    PageHeaderDescription = ClassVariants.build(
+      base: "mt-4 text-lg text-pretty text-muted-foreground"
+    )
+
+    # Action links container in page header.
+    #
+    # Nuxt UI: flex flex-wrap items-center gap-1.5
+    PageHeaderLinks = ClassVariants.build(
+      base: "flex flex-wrap items-center gap-1.5"
+    )
+
+    # Page body — main content wrapper with vertical spacing.
+    #
+    # Nuxt UI base: mt-8 pb-24 space-y-12
+    PageBody = ClassVariants.build(
+      base: "mt-8 pb-24 space-y-12"
+    )
+
+    # Content section with consistent vertical spacing and optional title.
+    #
+    # Supports horizontal and vertical orientations. Horizontal uses a
+    # 2-column grid for side-by-side content. Vertical centers text.
+    #
+    # @example
+    #   PageSection.render(orientation: :vertical)
+    #
+    # Sub-parts: {PageSectionWrapper}, {PageSectionHeader},
+    # {PageSectionTitle}, {PageSectionDescription}, {PageSectionBody},
+    # {PageSectionLinks}
+    #
+    # Nuxt UI base: relative isolate
+    PageSection = ClassVariants.build(
+      base: "relative isolate text-foreground",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: ""
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section inner container — switches to grid on desktop.
+    #
+    # Nuxt UI: flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16
+    PageSectionContainer = ClassVariants.build(
+      base: "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+      variants: {
+        orientation: {
+          horizontal: "lg:grid-cols-2 lg:items-center",
+          vertical: ""
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section text/content wrapper.
+    PageSectionWrapper = ClassVariants.build(
+      base: "",
+      variants: {
+        order: {
+          first: "",
+          last: "order-last"
+        }
+      },
+      defaults: {order: :first}
+    )
+
+    # Section header for title/description/links grouping.
+    PageSectionHeader = ClassVariants.build(
+      base: ""
+    )
+
+    # Section headline eyebrow text.
+    #
+    # Nuxt UI: mb-3 font-semibold text-primary flex items-center gap-1.5
+    PageSectionHeadline = ClassVariants.build(
+      base: "mb-3 font-semibold text-primary flex items-center gap-1.5",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: "justify-center"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section title — large bold heading.
+    #
+    # Nuxt UI: text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted
+    PageSectionTitle = ClassVariants.build(
+      base: "text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-foreground",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: "text-center"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section description text.
+    #
+    # Nuxt UI: text-base sm:text-lg text-muted
+    PageSectionDescription = ClassVariants.build(
+      base: "mt-6 text-base sm:text-lg text-muted-foreground",
+      variants: {
+        orientation: {
+          horizontal: "text-pretty",
+          vertical: "text-center text-balance"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Section body for additional content.
+    PageSectionBody = ClassVariants.build(
+      base: "mt-8"
+    )
+
+    # Section action links container.
+    #
+    # Nuxt UI: flex flex-wrap gap-x-6 gap-y-3
+    PageSectionLinks = ClassVariants.build(
+      base: "mt-8 flex flex-wrap gap-x-6 gap-y-3",
+      variants: {
+        orientation: {
+          horizontal: "",
+          vertical: "justify-center"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Responsive grid for page cards/features.
+    #
+    # Nuxt UI base: relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
+    PageGrid = ClassVariants.build(
+      base: "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+    )
+
+    # Content card for grid/column layouts.
+    #
+    # Supports outline, soft, subtle, and ghost variants.
+    # Ghost variant has no background or border for minimal styling.
+    #
+    # @example
+    #   PageCard.render(variant: :outline)
+    #
+    # Sub-parts: {PageCardHeader}, {PageCardBody}, {PageCardFooter},
+    # {PageCardIcon}, {PageCardTitle}, {PageCardDescription}
+    #
+    # Nuxt UI base: relative flex rounded-lg
+    PageCard = ClassVariants.build(
+      base: "relative flex rounded-lg text-foreground",
+      variants: {
+        variant: {
+          outline: "bg-background ring ring-inset ring-border",
+          soft: "bg-elevated/50",
+          subtle: "bg-elevated/50 ring ring-inset ring-border",
+          ghost: ""
+        }
+      },
+      defaults: {variant: :outline}
+    )
+
+    # Page card inner container with padding.
+    #
+    # Nuxt UI: relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6
+    PageCardContainer = ClassVariants.build(
+      base: "relative flex flex-col flex-1 gap-x-8 gap-y-4 p-4 sm:p-6"
+    )
+
+    # Page card content wrapper.
+    PageCardWrapper = ClassVariants.build(
+      base: "flex flex-col flex-1 items-start"
+    )
+
+    # Page card header area.
+    PageCardHeader = ClassVariants.build(
+      base: "mb-4"
+    )
+
+    # Page card body — grows to fill available space.
+    PageCardBody = ClassVariants.build(
+      base: "flex-1"
+    )
+
+    # Page card footer area.
+    PageCardFooter = ClassVariants.build(
+      base: "pt-4 mt-auto"
+    )
+
+    # Page card leading icon.
+    #
+    # Nuxt UI: size-5 shrink-0 text-primary
+    PageCardIcon = ClassVariants.build(
+      base: "inline-flex items-center mb-2.5 [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:text-primary"
+    )
+
+    # Page card title text.
+    #
+    # Nuxt UI: text-base text-pretty font-semibold text-highlighted
+    PageCardTitle = ClassVariants.build(
+      base: "text-base text-pretty font-semibold text-foreground"
+    )
+
+    # Page card description text.
+    #
+    # Nuxt UI: text-[15px] text-pretty text-muted
+    PageCardDescription = ClassVariants.build(
+      base: "mt-1 text-sm text-pretty text-muted-foreground"
+    )
+  end
+end

data/lib/kiso/themes/skeleton.rb

@@ -0,0 +1,16 @@
+module Kiso
+  module Themes
+    # Placeholder element displayed while content is loading.
+    #
+    # @example
+    #   Skeleton.render
+    #
+    # No variants — dimensions set by consumer via css_classes.
+    #
+    # shadcn base: animate-pulse rounded-md bg-accent
+    # Nuxt UI base: animate-pulse rounded-md bg-elevated
+    Skeleton = ClassVariants.build(
+      base: "animate-pulse rounded-md bg-elevated"
+    )
+  end
+end

data/lib/kiso/version.rb

@@ -2,5 +2,5 @@
 
 module Kiso
   # @return [String] the current gem version
-  VERSION = "0.3.0.pre"
+  VERSION = "0.4.1.pre"
 end

data/lib/kiso.rb

@@ -4,6 +4,7 @@ require "class_variants"
 require "tailwind_merge"
 require "kiso/version"
 require "kiso/configuration"
+require "kiso/presets"
 require "kiso/theme_overrides"
 require "kiso/propshaft_tailwind_stub_filter"
 require "kiso/engine"
@@ -45,8 +46,11 @@ require "kiso/themes/color_mode_button"
 require "kiso/themes/color_mode_select"
 require "kiso/themes/dashboard"
 require "kiso/themes/nav"
+require "kiso/themes/page"
 require "kiso/themes/avatar"
+require "kiso/themes/skeleton"
 require "kiso/themes/slider"
+require "kiso/themes/layout"
 require "kiso/icons"
 
 # Kiso — a Rails engine providing UI components inspired by shadcn/ui and Nuxt UI.
@@ -72,6 +76,9 @@ require "kiso/icons"
 # @see ComponentHelper#kui
 # @see Themes
 module Kiso
+  # Base error class for Kiso engine errors.
+  class Error < StandardError; end
+
   class << self
     # @return [Configuration] the global configuration instance
     def configuration

data/lib/tasks/kiso.rake

@@ -0,0 +1,36 @@
+# Generates CSS stub files for Kiso's palette files in the host app.
+#
+# tailwindcss-rails creates a stub at app/assets/builds/tailwind/kiso.css
+# for engine.css, but it doesn't handle subdirectories. Palette files at
+# app/assets/tailwind/kiso/palettes/*.css inside the gem are invisible to
+# the host app's Tailwind CLI without stubs.
+#
+# This task creates matching stubs so host apps can import palettes with:
+#   @import "../builds/tailwind/kiso/palettes/blue.css";
+
+namespace :kiso do
+  desc "Generate CSS stubs for Kiso palette files"
+  task palettes: :environment do
+    palette_dir = Kiso::Engine.root.join("app/assets/tailwind/kiso/palettes")
+    next unless palette_dir.directory?
+
+    output_dir = Rails.root.join("app/assets/builds/tailwind/kiso/palettes")
+    FileUtils.mkdir_p(output_dir)
+
+    Dir[palette_dir.join("*.css")].each do |source|
+      name = File.basename(source)
+      stub_path = output_dir.join(name)
+      File.write(stub_path, <<~CSS)
+        /* DO NOT MODIFY THIS FILE, it was auto-generated by kiso */
+
+        @import "#{source}";
+      CSS
+    end
+  end
+end
+
+# Hook into tailwindcss-rails build pipeline so palette stubs are
+# generated before the Tailwind CLI runs.
+if Rake::Task.task_defined?("tailwindcss:engines")
+  Rake::Task["tailwindcss:engines"].enhance(["kiso:palettes"])
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kiso
 version: !ruby/object:Gem::Version
-  version: 0.3.0.pre
+  version: 0.4.1.pre
 platform: ruby
 authors:
 - Steve Clarke
@@ -86,11 +86,19 @@ files:
 - app/assets/tailwind/kiso/dialog.css
 - app/assets/tailwind/kiso/engine.css
 - app/assets/tailwind/kiso/input-otp.css
+- app/assets/tailwind/kiso/palettes/blue.css
+- app/assets/tailwind/kiso/palettes/green.css
+- app/assets/tailwind/kiso/palettes/orange.css
+- app/assets/tailwind/kiso/palettes/violet.css
+- app/assets/tailwind/kiso/palettes/zinc.css
 - app/assets/tailwind/kiso/radio-group.css
 - app/assets/tailwind/kiso/slider.css
+- app/helpers/kiso/app_component_helper.rb
 - app/helpers/kiso/component_helper.rb
 - app/helpers/kiso/icon_helper.rb
 - app/helpers/kiso/theme_helper.rb
+- app/helpers/kiso/ui_context_helper.rb
+- app/javascript/controllers/kiso/alert_controller.js
 - app/javascript/controllers/kiso/combobox_controller.js
 - app/javascript/controllers/kiso/command_controller.js
 - app/javascript/controllers/kiso/command_dialog_controller.js
@@ -113,6 +121,7 @@ files:
 - app/javascript/kiso/vendor/floating-ui-dom.js
 - app/views/kiso/components/_alert.html.erb
 - app/views/kiso/components/_alert_dialog.html.erb
+- app/views/kiso/components/_app.html.erb
 - app/views/kiso/components/_aspect_ratio.html.erb
 - app/views/kiso/components/_avatar.html.erb
 - app/views/kiso/components/_badge.html.erb
@@ -124,6 +133,7 @@ files:
 - app/views/kiso/components/_color_mode_select.html.erb
 - app/views/kiso/components/_combobox.html.erb
 - app/views/kiso/components/_command.html.erb
+- app/views/kiso/components/_container.html.erb
 - app/views/kiso/components/_dashboard_group.html.erb
 - app/views/kiso/components/_dashboard_navbar.html.erb
 - app/views/kiso/components/_dashboard_panel.html.erb
@@ -135,18 +145,28 @@ files:
 - app/views/kiso/components/_field.html.erb
 - app/views/kiso/components/_field_group.html.erb
 - app/views/kiso/components/_field_set.html.erb
+- app/views/kiso/components/_footer.html.erb
+- app/views/kiso/components/_header.html.erb
 - app/views/kiso/components/_input.html.erb
 - app/views/kiso/components/_input_group.html.erb
 - app/views/kiso/components/_input_otp.html.erb
 - app/views/kiso/components/_kbd.html.erb
 - app/views/kiso/components/_label.html.erb
+- app/views/kiso/components/_main.html.erb
 - app/views/kiso/components/_nav.html.erb
+- app/views/kiso/components/_page.html.erb
+- app/views/kiso/components/_page_body.html.erb
+- app/views/kiso/components/_page_card.html.erb
+- app/views/kiso/components/_page_grid.html.erb
+- app/views/kiso/components/_page_header.html.erb
+- app/views/kiso/components/_page_section.html.erb
 - app/views/kiso/components/_pagination.html.erb
 - app/views/kiso/components/_popover.html.erb
 - app/views/kiso/components/_radio_group.html.erb
 - app/views/kiso/components/_select.html.erb
 - app/views/kiso/components/_select_native.html.erb
 - app/views/kiso/components/_separator.html.erb
+- app/views/kiso/components/_skeleton.html.erb
 - app/views/kiso/components/_slider.html.erb
 - app/views/kiso/components/_stats_card.html.erb
 - app/views/kiso/components/_stats_grid.html.erb
@@ -155,6 +175,7 @@ files:
 - app/views/kiso/components/_textarea.html.erb
 - app/views/kiso/components/_toggle.html.erb
 - app/views/kiso/components/_toggle_group.html.erb
+- app/views/kiso/components/alert/_actions.html.erb
 - app/views/kiso/components/alert/_description.html.erb
 - app/views/kiso/components/alert/_title.html.erb
 - app/views/kiso/components/alert_dialog/_action.html.erb
@@ -247,6 +268,26 @@ files:
 - app/views/kiso/components/nav/_item.html.erb
 - app/views/kiso/components/nav/_section.html.erb
 - app/views/kiso/components/nav/_section_title.html.erb
+- app/views/kiso/components/page/_center.html.erb
+- app/views/kiso/components/page/_left.html.erb
+- app/views/kiso/components/page/_right.html.erb
+- app/views/kiso/components/page_card/_body.html.erb
+- app/views/kiso/components/page_card/_description.html.erb
+- app/views/kiso/components/page_card/_footer.html.erb
+- app/views/kiso/components/page_card/_header.html.erb
+- app/views/kiso/components/page_card/_icon.html.erb
+- app/views/kiso/components/page_card/_title.html.erb
+- app/views/kiso/components/page_header/_description.html.erb
+- app/views/kiso/components/page_header/_headline.html.erb
+- app/views/kiso/components/page_header/_links.html.erb
+- app/views/kiso/components/page_header/_title.html.erb
+- app/views/kiso/components/page_section/_body.html.erb
+- app/views/kiso/components/page_section/_description.html.erb
+- app/views/kiso/components/page_section/_header.html.erb
+- app/views/kiso/components/page_section/_headline.html.erb
+- app/views/kiso/components/page_section/_links.html.erb
+- app/views/kiso/components/page_section/_title.html.erb
+- app/views/kiso/components/page_section/_wrapper.html.erb
 - app/views/kiso/components/pagination/_content.html.erb
 - app/views/kiso/components/pagination/_ellipsis.html.erb
 - app/views/kiso/components/pagination/_item.html.erb
@@ -282,6 +323,13 @@ files:
 - config/deploy.docs.yml
 - config/deploy.yml
 - config/importmap.rb
+- config/locales/en.yml
+- lib/generators/kiso/component/USAGE
+- lib/generators/kiso/component/component_generator.rb
+- lib/generators/kiso/component/templates/partial.html.erb.tt
+- lib/generators/kiso/component/templates/sub_part_partial.html.erb.tt
+- lib/generators/kiso/component/templates/sub_part_theme.rb.tt
+- lib/generators/kiso/component/templates/theme.rb.tt
 - lib/kiso.rb
 - lib/kiso/cli.rb
 - lib/kiso/cli/base.rb
@@ -290,6 +338,9 @@ files:
 - lib/kiso/cli/make.rb
 - lib/kiso/configuration.rb
 - lib/kiso/engine.rb
+- lib/kiso/presets.rb
+- lib/kiso/presets/rounded.rb
+- lib/kiso/presets/sharp.rb
 - lib/kiso/propshaft_tailwind_stub_filter.rb
 - lib/kiso/theme_overrides.rb
 - lib/kiso/themes/alert.rb
@@ -317,7 +368,9 @@ files:
 - lib/kiso/themes/input_otp.rb
 - lib/kiso/themes/kbd.rb
 - lib/kiso/themes/label.rb
+- lib/kiso/themes/layout.rb
 - lib/kiso/themes/nav.rb
+- lib/kiso/themes/page.rb
 - lib/kiso/themes/pagination.rb
 - lib/kiso/themes/popover.rb
 - lib/kiso/themes/radio_group.rb
@@ -325,6 +378,7 @@ files:
 - lib/kiso/themes/select_native.rb
 - lib/kiso/themes/separator.rb
 - lib/kiso/themes/shared.rb
+- lib/kiso/themes/skeleton.rb
 - lib/kiso/themes/slider.rb
 - lib/kiso/themes/stats_card.rb
 - lib/kiso/themes/switch.rb
@@ -333,6 +387,7 @@ files:
 - lib/kiso/themes/toggle.rb
 - lib/kiso/themes/toggle_group.rb
 - lib/kiso/version.rb
+- lib/tasks/kiso.rake
 homepage: https://github.com/steveclarke/kiso
 licenses:
 - MIT
@@ -343,6 +398,14 @@ metadata:
   bug_tracker_uri: https://github.com/steveclarke/kiso/issues
   rubygems_mfa_required: 'true'
   allowed_push_host: https://rubygems.org
+post_install_message: |
+  Kiso installed successfully!
+
+  To get AI-assisted Kiso development with Claude Code, install the skill:
+
+    npx skills add steveclarke/kiso/skills/kiso
+
+  Learn more: https://kisoui.com/getting-started
 rdoc_options: []
 require_paths:
 - lib