kiso 0.2.2.pre → 0.4.0.pre

data/lib/kiso/configuration.rb

@@ -23,9 +23,49 @@ module Kiso
     #   Applied once at boot by {ThemeOverrides.apply!}.
     attr_reader :theme
 
+    # @return [Symbol] the active app theme directory name.
+    #   Theme files are loaded from +app/themes/<name>/+. Defaults to
+    #   +:default+, meaning +app/themes/default/+.
+    #
+    # @example Switch to a custom theme
+    #   Kiso.configure do |config|
+    #     config.app_theme = :modern
+    #   end
+    attr_accessor :app_theme
+
     def initialize
       @icons = default_icons
       @theme = {}
+      @app_theme = :default
+    end
+
+    # Resolves the active app theme directory path relative to the given root.
+    #
+    # @param app_root [Pathname] the Rails application root
+    # @return [Pathname] the active theme directory (e.g. +app/themes/default+)
+    def app_theme_path(app_root)
+      app_root.join("app/themes", app_theme.to_s)
+    end
+
+    # Applies a pre-built style preset to all components.
+    # Presets populate +@theme+ before {ThemeOverrides.apply!} runs,
+    # so host-app overrides set after this call take priority.
+    #
+    # @param name [Symbol, String] the preset name (e.g. +:rounded+, +:sharp+)
+    # @raise [ArgumentError] if the preset does not exist
+    # @return [void]
+    #
+    # @example
+    #   Kiso.configure do |config|
+    #     config.apply_preset(:rounded)
+    #     # Per-component overrides still work on top of the preset:
+    #     config.theme[:button] = { base: "shadow-lg" }
+    #   end
+    def apply_preset(name)
+      preset = Kiso::Presets.load(name)
+      preset.each do |component, overrides|
+        @theme[component] = (@theme[component] || {}).merge(overrides)
+      end
     end
 
     private

data/lib/kiso/engine.rb

@@ -10,6 +10,11 @@ module Kiso
   class Engine < ::Rails::Engine
     isolate_namespace Kiso
 
+    # Loads Kiso's locale files so host apps can override translations.
+    initializer "kiso.i18n" do
+      config.i18n.load_path += Dir[root.join("config/locales/**/*.yml")]
+    end
+
     # Configures ClassVariants to use TailwindMerge for class deduplication.
     # This ensures conflicting Tailwind utilities are resolved correctly
     # when merging base, variant, and override classes.
@@ -27,10 +32,12 @@ module Kiso
       Kiso::ThemeOverrides.apply!
     end
 
-    # Makes {ComponentHelper} and {IconHelper} available in all views.
+    # Makes {ComponentHelper}, {AppComponentHelper}, and {IconHelper} available in all views.
     initializer "kiso.helpers" do
       ActiveSupport.on_load(:action_view) do
+        include Kiso::UiContextHelper
         include Kiso::ComponentHelper
+        include Kiso::AppComponentHelper
         include Kiso::IconHelper
         include Kiso::ThemeHelper
       end
@@ -96,6 +103,103 @@ module Kiso
       end
     end
 
+    # Watches lib/kiso/themes/ in development and reloads changed theme
+    # constants so you don't have to restart the server after every tweak.
+    # Uses Rails' built-in FileUpdateChecker (same mechanism as route reloading).
+    initializer "kiso.theme_reloading" do |app|
+      if Rails.env.development? || Rails.env.test?
+        theme_dir = root.join("lib/kiso/themes")
+        theme_files = Dir[theme_dir.join("*.rb")]
+
+        reloader = app.config.file_watcher.new(theme_files) do
+          # Suppress "already initialized constant" warnings during reload.
+          # Theme files assign to constants (Badge = ClassVariants.build(...))
+          # which is intentional — we want to replace the old instance.
+          verbose, $VERBOSE = $VERBOSE, nil
+          begin
+            theme_files.each { |file| load file }
+          ensure
+            $VERBOSE = verbose
+          end
+          Kiso::ThemeOverrides.reset!
+          Kiso::ThemeOverrides.apply!
+        end
+
+        app.reloaders << reloader
+
+        ActiveSupport::Reloader.to_prepare do
+          reloader.execute_if_updated
+        end
+      end
+    end
+
+    # Loads the active app theme from +app/themes/<name>/+.
+    #
+    # Theme files define constants under the +AppThemes::+ namespace
+    # (e.g. +AppThemes::StatusBadge+) and are loaded via +require+ at
+    # boot. The active theme is determined by {Configuration#app_theme}
+    # (defaults to +:default+).
+    #
+    # No-op when +app/themes/+ doesn't exist. Raises a helpful error
+    # when the configured theme directory is missing.
+    initializer "kiso.app_themes", after: :load_config_initializers do |app|
+      themes_root = app.root.join("app/themes")
+      next unless themes_root.directory?
+
+      # Tell Zeitwerk to ignore app/themes/ — we manage loading ourselves.
+      # Rails auto-discovers app/* subdirectories and adds them to Zeitwerk,
+      # which would expect Default::StatusBadge (matching the directory name)
+      # instead of AppThemes::StatusBadge.
+      Rails.autoloaders.main.ignore(themes_root.to_s)
+
+      active_path = Kiso.config.app_theme_path(app.root)
+
+      unless active_path.directory?
+        available = Dir.children(themes_root.to_s)
+          .select { |d| File.directory?(themes_root.join(d)) }
+          .sort
+
+        msg = "Kiso app theme :#{Kiso.config.app_theme} not found. " \
+              "Expected directory: #{active_path}"
+        msg += if available.any?
+          "\nAvailable themes: #{available.map { |d| ":#{d}" }.join(", ")}"
+        else
+          "\nNo theme directories found in #{themes_root}. " \
+          "Run: bin/rails generate kiso:component your_component"
+        end
+        raise Kiso::Error, msg
+      end
+
+      Object.const_set(:AppThemes, Module.new) unless Object.const_defined?(:AppThemes)
+
+      Dir[active_path.join("**/*.rb")].sort.each { |file| load file }
+    end
+
+    # Watches the active app theme directory in development and reloads
+    # changed theme constants. Uses directory-based watching so new files
+    # added after boot are picked up automatically.
+    initializer "kiso.app_theme_reloading" do |app|
+      next unless Rails.env.development? || Rails.env.test?
+
+      active_path = Kiso.config.app_theme_path(app.root)
+      next unless active_path.directory?
+
+      reloader = app.config.file_watcher.new([], {active_path.to_s => ["rb"]}) do
+        verbose, $VERBOSE = $VERBOSE, nil
+        begin
+          Dir[active_path.join("**/*.rb")].sort.each { |file| load file }
+        ensure
+          $VERBOSE = verbose
+        end
+      end
+
+      app.reloaders << reloader
+
+      ActiveSupport::Reloader.to_prepare do
+        reloader.execute_if_updated
+      end
+    end
+
     # Registers Kiso's component previews with Lookbook when available.
     initializer "kiso.lookbook", after: :load_config_initializers do
       if defined?(Lookbook)

data/lib/kiso/presets/rounded.rb

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module Kiso
+  module Presets
+    # Pill-shaped buttons, fully rounded badges, more rounded cards/inputs.
+    # Applies rounded-full where possible, rounded-2xl on containers.
+    #
+    # Components left unchanged:
+    # - Avatar, Switch, Slider, RadioGroup — already rounded-full
+    # - Checkbox — uses rounded-[4px] for checkmark alignment
+    # - Shared::CHECKABLE_ITEM — uses rounded-sm for menu items (structural)
+    ROUNDED = {
+      # Buttons: rounded-md → rounded-full (pill shape)
+      button: {
+        variants: {
+          size: {
+            xs: "rounded-full",
+            sm: "rounded-full",
+            md: "rounded-full",
+            lg: "rounded-full",
+            xl: "rounded-full"
+          }
+        }
+      },
+
+      # Badges: already rounded-full — no change needed
+
+      # Card: rounded-xl → rounded-2xl
+      card: {base: "rounded-2xl"},
+
+      # StatsCard: rounded-xl → rounded-2xl
+      stats_card: {base: "rounded-2xl"},
+
+      # Input: rounded-md → rounded-full
+      input: {base: "rounded-full"},
+
+      # Textarea: rounded-md → rounded-xl (full doesn't work for multiline)
+      textarea: {base: "rounded-xl"},
+
+      # Select trigger: rounded-md → rounded-full
+      select_trigger: {base: "rounded-full"},
+
+      # Select content: rounded-md → rounded-xl
+      select_content: {base: "rounded-xl"},
+
+      # SelectNative: rounded-md → rounded-full
+      select_native: {base: "rounded-full"},
+
+      # InputGroup: rounded-md → rounded-full
+      input_group: {base: "rounded-full"},
+
+      # InputOTP slot: first:rounded-l-md last:rounded-r-md → first:rounded-l-xl last:rounded-r-xl
+      input_otp_slot: {base: "first:rounded-l-xl last:rounded-r-xl"},
+
+      # Toggle: rounded-md → rounded-full
+      toggle: {base: "rounded-full"},
+
+      # ToggleGroup: rounded-md → rounded-full
+      toggle_group: {base: "rounded-full"},
+
+      # ToggleGroupItem: first:rounded-l-md last:rounded-r-md → first:rounded-l-full last:rounded-r-full
+      toggle_group_item: {base: "first:rounded-l-full last:rounded-r-full"},
+
+      # Combobox input wrapper: rounded-md → rounded-full
+      combobox_input: {base: "rounded-full"},
+
+      # Combobox content: rounded-md → rounded-xl
+      combobox_content: {base: "rounded-xl"},
+
+      # Combobox chips (multi-select): rounded-md → rounded-xl
+      combobox_chips: {base: "rounded-xl"},
+
+      # Dialog content: rounded-lg → rounded-2xl
+      dialog_content: {base: "rounded-2xl"},
+
+      # AlertDialog content: rounded-lg → rounded-2xl
+      alert_dialog_content: {base: "rounded-2xl"},
+
+      # AlertDialog media: rounded-md → rounded-xl
+      alert_dialog_media: {base: "rounded-xl"},
+
+      # Alert: rounded-lg → rounded-2xl
+      alert: {base: "rounded-2xl"},
+
+      # Command: rounded-md → rounded-xl
+      command: {base: "rounded-xl"},
+
+      # CommandDialog content: rounded-lg → rounded-2xl
+      command_dialog_content: {base: "rounded-2xl"},
+
+      # Popover: rounded-md → rounded-xl
+      popover_content: {base: "rounded-xl"},
+
+      # DropdownMenu content: rounded-md → rounded-xl
+      dropdown_menu_content: {base: "rounded-xl"},
+
+      # DropdownMenu sub-content: rounded-md → rounded-xl
+      dropdown_menu_sub_content: {base: "rounded-xl"},
+
+      # Kbd: rounded-sm → rounded-md
+      kbd: {base: "rounded-md"},
+
+      # Skeleton: rounded-md → rounded-xl
+      skeleton: {base: "rounded-xl"},
+
+      # Pagination: rounded-md → rounded-full
+      pagination_link: {base: "rounded-full"},
+      pagination_previous: {base: "rounded-full"},
+      pagination_next: {base: "rounded-full"},
+
+      # Empty: rounded-lg → rounded-2xl
+      empty: {base: "rounded-2xl"},
+
+      # Empty media icon variant: rounded-lg → rounded-xl
+      empty_media: {
+        variants: {
+          variant: {
+            icon: "rounded-xl"
+          }
+        }
+      },
+
+      # ColorModeButton: rounded-md → rounded-full
+      color_mode_button: {base: "rounded-full"},
+
+      # Nav section title: rounded-md → rounded-full
+      nav_section_title: {base: "rounded-full"},
+
+      # Nav item: rounded-md → rounded-full
+      nav_item: {base: "rounded-full"},
+
+      # Nav item badge: rounded-md → rounded-full
+      nav_item_badge: {base: "rounded-full"}
+    }.freeze
+  end
+end

data/lib/kiso/presets/sharp.rb

@@ -0,0 +1,178 @@
+# frozen_string_literal: true
+
+module Kiso
+  module Presets
+    # No border-radius anywhere — geometric, brutalist aesthetic.
+    # Applies rounded-none to every component that has border-radius.
+    SHARP = {
+      # Buttons: rounded-md → rounded-none
+      button: {
+        variants: {
+          size: {
+            xs: "rounded-none",
+            sm: "rounded-none",
+            md: "rounded-none",
+            lg: "rounded-none",
+            xl: "rounded-none"
+          }
+        }
+      },
+
+      # Badges: rounded-full → rounded-none
+      badge: {
+        variants: {
+          size: {
+            xs: "rounded-none",
+            sm: "rounded-none",
+            md: "rounded-none",
+            lg: "rounded-none",
+            xl: "rounded-none"
+          }
+        }
+      },
+
+      # Card: rounded-xl → rounded-none
+      card: {base: "rounded-none"},
+
+      # StatsCard: rounded-xl → rounded-none
+      stats_card: {base: "rounded-none"},
+
+      # Input: rounded-md → rounded-none
+      input: {base: "rounded-none"},
+
+      # Textarea: rounded-md → rounded-none
+      textarea: {base: "rounded-none"},
+
+      # Select trigger: rounded-md → rounded-none
+      select_trigger: {base: "rounded-none"},
+
+      # Select content: rounded-md → rounded-none
+      select_content: {base: "rounded-none"},
+
+      # SelectNative: rounded-md → rounded-none
+      select_native: {base: "rounded-none"},
+
+      # InputGroup: rounded-md → rounded-none
+      input_group: {base: "rounded-none"},
+
+      # InputOTP slot: rounded-l-md/rounded-r-md → rounded-none
+      input_otp_slot: {base: "first:rounded-l-none last:rounded-r-none"},
+
+      # Toggle: rounded-md → rounded-none
+      toggle: {base: "rounded-none"},
+
+      # ToggleGroup: rounded-md → rounded-none
+      toggle_group: {base: "rounded-none"},
+
+      # ToggleGroupItem: rounded-l-md/rounded-r-md → rounded-none
+      toggle_group_item: {base: "first:rounded-l-none last:rounded-r-none"},
+
+      # Combobox input wrapper: rounded-md → rounded-none
+      combobox_input: {base: "rounded-none"},
+
+      # Combobox content: rounded-md → rounded-none
+      combobox_content: {base: "rounded-none"},
+
+      # Combobox chips (multi-select): rounded-md → rounded-none
+      combobox_chips: {base: "rounded-none"},
+
+      # Dialog content: rounded-lg → rounded-none
+      dialog_content: {base: "rounded-none"},
+
+      # AlertDialog content: rounded-lg → rounded-none
+      alert_dialog_content: {base: "rounded-none"},
+
+      # AlertDialog media: rounded-md → rounded-none
+      alert_dialog_media: {base: "rounded-none"},
+
+      # Alert: rounded-lg → rounded-none
+      alert: {base: "rounded-none"},
+
+      # Command: rounded-md → rounded-none
+      command: {base: "rounded-none"},
+
+      # CommandDialog content: rounded-lg → rounded-none
+      command_dialog_content: {base: "rounded-none"},
+
+      # DashboardNavbarToggle: rounded-md → rounded-none
+      dashboard_navbar_toggle: {base: "rounded-none"},
+
+      # DashboardSidebarCollapse: rounded-md → rounded-none
+      dashboard_sidebar_collapse: {base: "rounded-none"},
+
+      # DashboardSidebarToggle: rounded-md → rounded-none
+      dashboard_sidebar_toggle: {base: "rounded-none"},
+
+      # Popover: rounded-md → rounded-none
+      popover_content: {base: "rounded-none"},
+
+      # DropdownMenu content: rounded-md → rounded-none
+      dropdown_menu_content: {base: "rounded-none"},
+
+      # DropdownMenu sub-content: rounded-md → rounded-none
+      dropdown_menu_sub_content: {base: "rounded-none"},
+
+      # Kbd: rounded-sm → rounded-none
+      kbd: {base: "rounded-none"},
+
+      # Skeleton: rounded-md → rounded-none
+      skeleton: {base: "rounded-none"},
+
+      # Checkbox: rounded-[4px] → rounded-none
+      checkbox: {base: "rounded-none"},
+
+      # Avatar: rounded-full → rounded-none
+      avatar: {base: "rounded-none"},
+      avatar_badge: {base: "rounded-none"},
+      avatar_fallback: {base: "rounded-none"},
+      avatar_group_count: {base: "rounded-none"},
+      avatar_image: {base: "rounded-none"},
+
+      # Switch track: rounded-full → rounded-none
+      switch_track: {base: "rounded-none"},
+      switch_thumb: {base: "rounded-none"},
+
+      # Slider: rounded-full → rounded-none
+      slider_track: {base: "rounded-none"},
+      slider_thumb: {base: "rounded-none"},
+
+      # RadioGroup indicator: rounded-full → rounded-none
+      radio_group_item: {base: "rounded-none"},
+
+      # Pagination: rounded-md → rounded-none
+      pagination_link: {base: "rounded-none"},
+      pagination_previous: {base: "rounded-none"},
+      pagination_next: {base: "rounded-none"},
+
+      # Empty: rounded-lg → rounded-none
+      empty: {base: "rounded-none"},
+
+      # Empty media icon variant: rounded-lg → rounded-none
+      empty_media: {
+        variants: {
+          variant: {
+            icon: "rounded-none"
+          }
+        }
+      },
+
+      # Alert close: rounded-md → rounded-none
+      alert_close: {base: "rounded-none"},
+
+      # Dialog close: rounded-xs → rounded-none
+      dialog_close: {base: "rounded-none"},
+
+      # ColorModeButton: rounded-md → rounded-none
+      color_mode_button: {base: "rounded-none"},
+
+      # Nav section title: rounded-md → rounded-none
+      nav_section_title: {base: "rounded-none"},
+
+      # Nav item: rounded-md → rounded-none
+      nav_item: {base: "rounded-none"},
+
+      # Nav item badge: rounded-md → rounded-none
+      nav_item_badge: {base: "rounded-none"}
+    }.freeze
+  end
+end

data/lib/kiso/presets.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Kiso
+  # Loads pre-built style presets that override ClassVariants for all
+  # components at boot time. Presets are monolithic, not composable —
+  # each preset is a complete, coherent set of overrides.
+  #
+  # @example Loading a preset
+  #   Kiso.configure do |config|
+  #     config.apply_preset(:rounded)
+  #   end
+  #
+  # @see Configuration#apply_preset
+  module Presets
+    PRESET_DIR = File.expand_path("presets", __dir__).freeze
+
+    class << self
+      # Loads a preset by name and returns its override hash.
+      #
+      # @param name [Symbol, String] the preset name (e.g. +:rounded+, +:sharp+)
+      # @return [Hash{Symbol => Hash}] component overrides keyed by component name
+      # @raise [ArgumentError] if the preset does not exist
+      def load(name)
+        name = name.to_sym
+        file = File.join(PRESET_DIR, "#{name}.rb")
+
+        unless File.exist?(file)
+          available = available_presets
+          msg = "Unknown preset :#{name}."
+          msg += " Available presets: #{available.map { |p| ":#{p}" }.join(", ")}" if available.any?
+          raise ArgumentError, msg
+        end
+
+        require file
+        const_name = name.to_s.upcase
+        const_get(const_name)
+      end
+
+      # Lists all available preset names.
+      #
+      # @return [Array<Symbol>] sorted list of preset names
+      def available_presets
+        Dir[File.join(PRESET_DIR, "*.rb")]
+          .map { |f| File.basename(f, ".rb").to_sym }
+          .sort
+      end
+    end
+  end
+end

data/lib/kiso/theme_overrides.rb

@@ -32,7 +32,11 @@ module Kiso
         validate_keys!(overrides.keys)
 
         overrides.each do |key, options|
-          resolve_constant(key).merge(**options)
+          # Extract ui: before passing to ClassVariants#merge (it doesn't
+          # understand ui:). The ui: values stay in config for runtime access
+          # by ComponentHelper#kiso_merge_ui_layers.
+          cv_options = options.except(:ui)
+          resolve_constant(key).merge(**cv_options) unless cv_options.empty?
         end
 
         @applied = true

data/lib/kiso/themes/alert.rb

@@ -1,9 +1,10 @@
 module Kiso
   module Themes
-    # Contextual alert banner with optional icon, title, and description.
+    # Contextual alert banner with optional icon, title, description,
+    # actions, and close button.
     #
-    # Uses CSS Grid with +has-[>svg]+ to auto-allocate a column for the icon
-    # when an SVG is present as a direct child.
+    # Uses flexbox layout with an optional icon, a content wrapper, and
+    # an optional close button.
     #
     # @example
     #   Alert.render(color: :error, variant: :soft)
@@ -12,12 +13,9 @@ module Kiso
     # - +color+ — :primary (default), :secondary, :success, :info, :warning, :error, :neutral
     # - +variant+ — :solid, :outline, :soft (default), :subtle
     #
-    # Sub-parts: {AlertTitle}, {AlertDescription}
+    # Sub-parts: {AlertWrapper}, {AlertTitle}, {AlertDescription}, {AlertActions}, {AlertClose}
     Alert = ClassVariants.build(
-      base: "relative w-full rounded-lg px-4 py-3 text-sm " \
-            "grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] " \
-            "has-[>svg]:gap-x-3 gap-y-0.5 items-start " \
-            "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+      base: "relative overflow-hidden w-full rounded-lg p-4 flex items-start gap-2.5 text-sm",
       variants: {
         variant: {
           solid: "",
@@ -67,14 +65,29 @@ module Kiso
       defaults: {color: :primary, variant: :soft}
     )
 
-    # Alert title text. Rendered in the second grid column (after the icon column).
+    # Flex wrapper for alert content (title, description, actions).
+    AlertWrapper = ClassVariants.build(
+      base: "min-w-0 flex-1 flex flex-col"
+    )
+
+    # Alert title text.
     AlertTitle = ClassVariants.build(
-      base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
+      base: "line-clamp-1 min-h-4 font-medium tracking-tight"
     )
 
     # Alert body text. Inherits parent text color for contrast on colored backgrounds.
     AlertDescription = ClassVariants.build(
-      base: "col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed"
+      base: "mt-1 first:mt-0 space-y-1 text-sm [&_p]:leading-relaxed"
+    )
+
+    # Container for action buttons inside an alert.
+    AlertActions = ClassVariants.build(
+      base: "flex flex-wrap gap-1.5 shrink-0 mt-2.5"
+    )
+
+    # Close button for dismissible alerts.
+    AlertClose = ClassVariants.build(
+      base: "shrink-0 -m-0.5 p-0.5 rounded-md opacity-70 hover:opacity-100 transition-opacity cursor-pointer"
     )
   end
 end