better_ui_tmp 0.5.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b370e55c35253eeefbfa27fe947aea1c74e7a7115e72d9a0c43bb09bfbe5b9a0
+  data.tar.gz: 9484aba630493310cc2d20b37b0bdd28494beffda71a46e99a1174231b6c79b4
+SHA512:
+  metadata.gz: '0539f8b11cb63a43f27296f37465ecb1453ecafb630941c698a02482ab0fd0cd1d2d077b4254eb404419898c600760dda6f0d503066fbe2a14d947313a5855d2'
+  data.tar.gz: 67bcb75e8a59102f5818141188c7d59a00fab0b47efb671421a7e079f56dfb91e1f48668c0aaae07afb2332a3604183367c99b393a253f3777b522fe7cf404fa

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright alessiobussolari
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,211 @@
+# Better UI
+
+[![Gem Version](https://badge.fury.io/rb/better_ui.svg)](https://badge.fury.io/rb/better_ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A comprehensive UI component library for Rails applications built with ViewComponent and Tailwind CSS, following BEM methodology.
+
+![Better UI Components](https://via.placeholder.com/800x400?text=Better+UI+Components)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Installation](#installation)
+  - [Basic Installation](#basic-installation)
+  - [Advanced Installation Options](#advanced-installation-options)
+  - [Tailwind CSS Configuration](#tailwind-css-configuration)
+- [Documentation](#documentation)
+- [Usage](#usage)
+- [Customization](#customization)
+- [Components](#components)
+- [Testing](#testing)
+- [Contributing](#contributing)
+- [License](#license)
+- [Resources](#resources)
+
+## Overview
+
+Better UI is a Rails gem that provides a collection of reusable UI components built with ViewComponent and Tailwind CSS. It follows the BEM (Block Element Modifier) methodology to ensure consistent naming and styling conventions.
+
+Key features:
+- **Modern Sass Architecture**: Uses `@use` and `@forward` instead of deprecated `@import`
+- **Modular Components**: Each component is isolated and can be used independently
+- **Customizable**: Override components styles with your own customizations
+- **Interactive Documentation**: Built-in documentation viewer with Lookbook
+- **Responsive Design**: All components are responsive by default
+- **Accessibility**: Components are designed with accessibility in mind
+
+For more detailed information, see the [components documentation](COMPONENTS.md).
+
+## Installation
+
+### Basic Installation
+
+1. Add the gem to your Gemfile:
+
+```ruby
+gem 'better_ui'
+```
+
+2. Run bundle install:
+
+```bash
+bundle install
+```
+
+3. Run the installer:
+
+```bash
+bin/rails generate better_ui:install
+```
+
+The installer will:
+- Mount the Better UI engine at `/better_ui`
+- Add the necessary assets to your application
+- Create a configuration file at `config/initializers/better_ui.rb`
+- Generate customizable stylesheets in `app/assets/stylesheets/components/`
+
+### Advanced Installation Options
+
+You can customize the installation process with the following options:
+
+```bash
+# Skip mounting the engine in routes
+bin/rails generate better_ui:install --skip-routes
+
+# Skip generating stylesheets
+bin/rails generate better_ui:install --skip-stylesheets
+
+# Skip creating the configuration file
+bin/rails generate better_ui:install --skip-config
+
+# All options together
+bin/rails generate better_ui:install --skip-routes --skip-stylesheets --skip-config
+```
+
+### Tailwind CSS Configuration
+
+Better UI requires Tailwind CSS to be properly configured in your application. If you haven't already set up Tailwind CSS, follow these steps:
+
+1. Install Tailwind CSS in your Rails application:
+
+```bash
+bin/rails tailwindcss:install
+```
+
+2. Configure Tailwind to include Better UI's components:
+
+In your `tailwind.config.js` file, add:
+
+```javascript
+module.exports = {
+  content: [
+    './app/views/**/*.{html,html.erb,erb}',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/components/**/*.{rb,html,html.erb,erb}',
+    // Add this line for Better UI components
+    './app/components/better_ui/**/*.{rb,html,html.erb,erb}'
+  ],
+  // other configurations...
+}
+```
+
+For more detailed installation instructions, see [INSTALLATION.md](INSTALLATION.md).
+
+## Documentation
+
+After installation, you can access the interactive documentation at:
+
+```
+http://localhost:3000/better_ui
+```
+
+This provides:
+- Interactive component previews
+- Component API documentation
+- Usage examples and code snippets
+- Styling reference
+
+## Usage
+
+Using Better UI components in your views is straightforward:
+
+```erb
+<%# Basic button %>
+<%= render BetterUi::General::ButtonComponent.new(label: 'Click me') %>
+
+<%# Button with more options %>
+<%= render BetterUi::General::ButtonComponent.new(
+  label: 'Submit',
+  variant: 'primary',
+  size: 'large',
+  icon_left: 'check',
+  data: { turbo: false }
+) %>
+
+<%# Panel component %>
+<%= render BetterUi::General::PanelComponent.new(title: 'User Details') do %>
+  <p>This is the panel content</p>
+<% end %>
+```
+
+For more detailed usage instructions, see [USAGE.md](USAGE.md).
+
+## Customization
+
+Better UI is designed to be highly customizable:
+
+1. **Style Customization**: Edit the generated override files in `app/assets/stylesheets/components/`
+2. **Component Configuration**: Configure default options in `config/initializers/better_ui.rb`
+3. **Component Extensions**: Extend existing components or create your own
+
+Example of customizing a component style:
+
+```scss
+// app/assets/stylesheets/components/_button_overrides.scss
+@layer components {
+  .bui-button {
+    &--primary {
+      @apply bg-indigo-600 hover:bg-indigo-700;
+    }
+  }
+}
+```
+
+For more detailed customization instructions, see [CUSTOMIZATION.md](CUSTOMIZATION.md).
+
+## Components
+
+Better UI includes a wide range of components categorized into:
+
+- **General Components**: Basic UI elements like buttons, badges, icons
+- **Application Components**: Complex UI elements like cards, alerts, sidebars
+- **Website Components**: Components specifically designed for websites
+
+For a full list of available components and their documentation, see [COMPONENTS.md](COMPONENTS.md).
+
+## Testing
+
+Better UI components are thoroughly tested. You can run the test suite with:
+
+```bash
+bin/rails test
+```
+
+For more detailed testing instructions, see [TESTING.md](TESTING.md).
+
+## Contributing
+
+Contributions are welcome! Please check out our [contribution guidelines](CONTRIBUTING.md).
+
+## License
+
+Better UI is available as open source under the terms of the [MIT License](LICENSE).
+
+## Resources
+
+- [Troubleshooting Guide](TROUBLESHOOTING.md)
+- [FAQs](FAQ.md)
+- [Changelog](CHANGELOG.md)
+- [Roadmap](ROADMAP.md)

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/builds/application.js

@@ -0,0 +1 @@
+

data/app/assets/builds/better_ui.css

@@ -0,0 +1 @@
+@charset "UTF-8";@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}html,body{@apply font-sans text-gray-900 leading-normal;}@layer components{.bui-button{@apply inline-flex items-center justify-center font-medium transition-colors duration-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;}.bui-button__icon{@apply flex-shrink-0;}.bui-button__icon--left{@apply mr-2;}.bui-button__icon--right{@apply ml-2;}.bui-button__text{@apply flex-grow;}.bui-button--default{@apply bg-black text-white hover:bg-gray-900 focus:ring-gray-900;}.bui-button--white{@apply bg-white text-black hover:bg-gray-100 focus:ring-gray-400;}.bui-button--red{@apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;}.bui-button--rose{@apply bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500;}.bui-button--orange{@apply bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500;}.bui-button--green{@apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;}.bui-button--blue{@apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;}.bui-button--yellow{@apply bg-yellow-500 text-black hover:bg-yellow-600 focus:ring-yellow-500;}.bui-button--violet{@apply bg-violet-500 text-white hover:bg-violet-600 focus:ring-violet-500;}.bui-button--small{@apply px-2.5 py-1.5 text-xs;}.bui-button--medium{@apply px-4 py-2 text-sm;}.bui-button--large{@apply px-6 py-3 text-base;}.bui-button--radius-none{@apply rounded-none;}.bui-button--radius-small{@apply rounded-md;}.bui-button--radius-medium{@apply rounded-lg;}.bui-button--radius-large{@apply rounded-xl;}.bui-button--radius-full{@apply rounded-full;}.bui-button--disabled{@apply opacity-50 cursor-not-allowed;}.bui-button--full-width{@apply w-full;}}@layer components{.bui-panel{@apply border shadow-sm;}.bui-panel__header{@apply px-4 py-3 border-b;}.bui-panel__body{@apply p-4;}.bui-panel__footer{@apply px-4 py-3 border-t;}.bui-panel__title{@apply text-lg font-medium;}.bui-panel--default{@apply bg-black text-white border-gray-900;}.bui-panel--default .bui-panel__header,.bui-panel--default .bui-panel__footer{@apply bg-gray-900;}.bui-panel--white{@apply bg-white text-black border-gray-200;}.bui-panel--white .bui-panel__header,.bui-panel--white .bui-panel__footer{@apply bg-gray-50;}.bui-panel--red{@apply bg-red-50 text-red-900 border-red-200;}.bui-panel--red .bui-panel__header{@apply bg-red-100 text-red-800;}.bui-panel--red .bui-panel__footer{@apply bg-red-100;}.bui-panel--padding-none .bui-panel__body{@apply p-0;}.bui-panel--padding-small .bui-panel__body{@apply p-2;}.bui-panel--padding-medium .bui-panel__body{@apply p-4;}.bui-panel--padding-large .bui-panel__body{@apply p-6;}.bui-panel--radius-none{@apply rounded-none;}.bui-panel--radius-small{@apply rounded-md;}.bui-panel--radius-medium{@apply rounded-lg;}.bui-panel--radius-large{@apply rounded-xl;}}@layer components{.bui-table{@apply w-full border-collapse;}.bui-table__container{@apply overflow-hidden border shadow-sm;}.bui-table__caption{@apply p-4 font-medium text-left;}.bui-table__header,.bui-table__footer{@apply bg-gray-50;}.bui-table__cell{@apply px-4 py-3 text-sm text-gray-700;}.bui-table__cell--header{@apply bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500 font-medium;}.bui-table__cell--footer{@apply font-medium;}.bui-table__row{@apply border-b border-gray-200;}.bui-table--default{@apply bg-white text-gray-900 border-gray-200;}.bui-table--red{@apply bg-red-50 text-red-900 border-red-200;}.bui-table--red .bui-table__header,.bui-table--red .bui-table__footer{@apply bg-red-100;}.bui-table--red .bui-table__cell--header{@apply bg-red-100 text-red-800;}.bui-table--blue{@apply bg-blue-50 text-blue-900 border-blue-200;}.bui-table--blue .bui-table__header,.bui-table--blue .bui-table__footer{@apply bg-blue-100;}.bui-table--blue .bui-table__cell--header{@apply bg-blue-100 text-blue-800;}.bui-table--green{@apply bg-green-50 text-green-900 border-green-200;}.bui-table--green .bui-table__header,.bui-table--green .bui-table__footer{@apply bg-green-100;}.bui-table--green .bui-table__cell--header{@apply bg-green-100 text-green-800;}.bui-table--striped .bui-table__row:nth-child(2n){@apply bg-gray-50;}.bui-table--hoverable .bui-table__row:hover{@apply bg-gray-100;}.bui-table--bordered,.bui-table--bordered .bui-table__cell{@apply border;}.bui-table--compact .bui-table__cell{@apply px-2 py-1 text-xs;}.bui-table--radius-none,.bui-table--radius-none .bui-table__container{@apply rounded-none;}.bui-table--radius-small{@apply rounded-md;}.bui-table--radius-small .bui-table__container{@apply rounded-md overflow-hidden;}.bui-table--radius-medium{@apply rounded-lg;}.bui-table--radius-medium .bui-table__container{@apply rounded-lg overflow-hidden;}.bui-table--radius-large{@apply rounded-xl;}.bui-table--radius-large .bui-table__container{@apply rounded-xl overflow-hidden;}}@layer components{.bui-badge{@apply inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium;}.bui-badge__icon{@apply flex-shrink-0;}.bui-badge__icon--left{@apply -ml-0.5 mr-1.5;}.bui-badge__icon--right{@apply -mr-0.5 ml-1.5;}.bui-badge__text{@apply whitespace-nowrap;}.bui-badge__dot{@apply h-2 w-2 rounded-full mr-1.5;}.bui-badge--default{@apply bg-gray-100 text-gray-800;}.bui-badge--default .bui-badge__dot{@apply bg-gray-500;}.bui-badge--white{@apply bg-white text-gray-800 border border-gray-200;}.bui-badge--white .bui-badge__dot{@apply bg-gray-400;}.bui-badge--red{@apply bg-red-100 text-red-800;}.bui-badge--red .bui-badge__dot{@apply bg-red-500;}.bui-badge--rose{@apply bg-rose-100 text-rose-800;}.bui-badge--rose .bui-badge__dot{@apply bg-rose-500;}.bui-badge--orange{@apply bg-orange-100 text-orange-800;}.bui-badge--orange .bui-badge__dot{@apply bg-orange-500;}.bui-badge--green{@apply bg-green-100 text-green-800;}.bui-badge--green .bui-badge__dot{@apply bg-green-500;}.bui-badge--blue{@apply bg-blue-100 text-blue-800;}.bui-badge--blue .bui-badge__dot{@apply bg-blue-500;}.bui-badge--yellow{@apply bg-yellow-100 text-yellow-800;}.bui-badge--yellow .bui-badge__dot{@apply bg-yellow-500;}.bui-badge--violet{@apply bg-violet-100 text-violet-800;}.bui-badge--violet .bui-badge__dot{@apply bg-violet-500;}.bui-badge--small{@apply text-xs px-2 py-0.5;}.bui-badge--medium{@apply text-sm px-2.5 py-0.5;}.bui-badge--large{@apply text-sm px-3 py-1;}.bui-badge--pill{@apply rounded-full;}.bui-badge--square{@apply rounded-md;}.bui-badge--outline{@apply bg-transparent border;}.bui-badge--outline.bui-badge--red{@apply border-red-500 text-red-700 bg-transparent;}.bui-badge--outline.bui-badge--green{@apply border-green-500 text-green-700 bg-transparent;}.bui-badge--outline.bui-badge--blue{@apply border-blue-500 text-blue-700 bg-transparent;}.bui-badge--outline.bui-badge--yellow{@apply border-yellow-500 text-yellow-700 bg-transparent;}.bui-badge--outline.bui-badge--violet{@apply border-violet-500 text-violet-700 bg-transparent;}.bui-badge--outline.bui-badge--orange{@apply border-orange-500 text-orange-700 bg-transparent;}.bui-badge--outline.bui-badge--rose{@apply border-rose-500 text-rose-700 bg-transparent;}}@layer components{.bui-avatar{@apply inline-flex items-center justify-center relative;}.bui-avatar__image{@apply object-cover;}.bui-avatar__placeholder{@apply flex items-center justify-center font-medium text-white uppercase;}.bui-avatar__status{@apply absolute bottom-0 right-0 block rounded-full ring-2 ring-white;}.bui-avatar__status--online{@apply bg-green-400;}.bui-avatar__status--offline{@apply bg-gray-400;}.bui-avatar__status--busy{@apply bg-red-400;}.bui-avatar__status--away{@apply bg-yellow-400;}.bui-avatar__presence{@apply absolute block rounded-full ring-2 ring-white;}.bui-avatar__badge{@apply absolute -top-1 -right-1 flex items-center justify-center;}.bui-avatar--xs{@apply h-6 w-6;}.bui-avatar--xs .bui-avatar__placeholder{@apply text-xs;}.bui-avatar--xs .bui-avatar__status{@apply h-1.5 w-1.5;}.bui-avatar--xs .bui-avatar__badge{@apply h-4 w-4 text-[.6rem];}.bui-avatar--sm{@apply h-8 w-8;}.bui-avatar--sm .bui-avatar__placeholder{@apply text-xs;}.bui-avatar--sm .bui-avatar__status{@apply h-2 w-2;}.bui-avatar--sm .bui-avatar__badge{@apply h-5 w-5 text-xs;}.bui-avatar--md{@apply h-10 w-10;}.bui-avatar--md .bui-avatar__placeholder{@apply text-sm;}.bui-avatar--md .bui-avatar__status{@apply h-2.5 w-2.5;}.bui-avatar--md .bui-avatar__badge{@apply h-6 w-6 text-xs;}.bui-avatar--lg{@apply h-12 w-12;}.bui-avatar--lg .bui-avatar__placeholder{@apply text-base;}.bui-avatar--lg .bui-avatar__status{@apply h-3 w-3;}.bui-avatar--lg .bui-avatar__badge{@apply h-7 w-7 text-sm;}.bui-avatar--xl{@apply h-16 w-16;}.bui-avatar--xl .bui-avatar__placeholder{@apply text-lg;}.bui-avatar--xl .bui-avatar__status{@apply h-4 w-4;}.bui-avatar--xl .bui-avatar__badge{@apply h-8 w-8 text-sm;}.bui-avatar--gray .bui-avatar__placeholder{@apply bg-gray-500;}.bui-avatar--red .bui-avatar__placeholder{@apply bg-red-500;}.bui-avatar--blue .bui-avatar__placeholder{@apply bg-blue-500;}.bui-avatar--green .bui-avatar__placeholder{@apply bg-green-500;}.bui-avatar--violet .bui-avatar__placeholder{@apply bg-violet-500;}.bui-avatar--orange .bui-avatar__placeholder{@apply bg-orange-500;}.bui-avatar--yellow .bui-avatar__placeholder{@apply bg-yellow-500 text-yellow-900;}.bui-avatar--circle,.bui-avatar--circle .bui-avatar__image,.bui-avatar--circle .bui-avatar__placeholder{@apply rounded-full;}.bui-avatar--square,.bui-avatar--square .bui-avatar__image,.bui-avatar--square .bui-avatar__placeholder{@apply rounded-md;}.bui-avatar--group{@apply -ml-2 first:ml-0;}.bui-avatar-group{@apply flex;}.bui-avatar-group .bui-avatar{@apply border-2 border-white;}}@layer components{.bui-icon{@apply inline-flex items-center justify-center;}.bui-icon--xs{@apply h-3 w-3;}.bui-icon--xs svg{@apply h-3 w-3;}.bui-icon--sm{@apply h-4 w-4;}.bui-icon--sm svg{@apply h-4 w-4;}.bui-icon--md{@apply h-5 w-5;}.bui-icon--md svg{@apply h-5 w-5;}.bui-icon--lg{@apply h-6 w-6;}.bui-icon--lg svg{@apply h-6 w-6;}.bui-icon--xl{@apply h-8 w-8;}.bui-icon--xl svg{@apply h-8 w-8;}.bui-icon--default{@apply text-gray-500;}.bui-icon--white{@apply text-white;}.bui-icon--red{@apply text-red-500;}.bui-icon--rose{@apply text-rose-500;}.bui-icon--orange{@apply text-orange-500;}.bui-icon--green{@apply text-green-500;}.bui-icon--blue{@apply text-blue-500;}.bui-icon--yellow{@apply text-yellow-500;}.bui-icon--violet{@apply text-violet-500;}.bui-icon--solid{@apply rounded-full p-2 bg-gray-100;}.bui-icon--solid-primary{@apply rounded-full p-2 text-white;}.bui-icon--solid-primary.bui-icon--red{@apply bg-red-500;}.bui-icon--solid-primary.bui-icon--rose{@apply bg-rose-500;}.bui-icon--solid-primary.bui-icon--orange{@apply bg-orange-500;}.bui-icon--solid-primary.bui-icon--green{@apply bg-green-500;}.bui-icon--solid-primary.bui-icon--blue{@apply bg-blue-500;}.bui-icon--solid-primary.bui-icon--yellow{@apply bg-yellow-500;}.bui-icon--solid-primary.bui-icon--violet{@apply bg-violet-500;}.bui-icon--spin{@apply animate-spin;}.bui-icon--pulse{@apply animate-pulse;}.bui-icon--fixed-width{@apply w-5;}}@layer components{.bui-link{@apply inline-flex items-center transition-colors duration-200;}.bui-link__icon{@apply flex-shrink-0;}.bui-link__icon--left{@apply mr-1.5;}.bui-link__icon--right{@apply ml-1.5;}.bui-link__text{@apply inline;}.bui-link--default{@apply text-gray-700 hover:text-gray-900;}.bui-link--white{@apply text-white hover:text-gray-100;}.bui-link--red{@apply text-red-600 hover:text-red-700;}.bui-link--rose{@apply text-rose-600 hover:text-rose-700;}.bui-link--orange{@apply text-orange-600 hover:text-orange-700;}.bui-link--green{@apply text-green-600 hover:text-green-700;}.bui-link--blue{@apply text-blue-600 hover:text-blue-700;}.bui-link--yellow{@apply text-yellow-600 hover:text-yellow-700;}.bui-link--violet{@apply text-violet-600 hover:text-violet-700;}.bui-link--underlined{@apply underline decoration-1 underline-offset-2;}.bui-link--hover-underlined{@apply no-underline hover:underline decoration-1 underline-offset-2;}.bui-link--bold{@apply font-semibold;}.bui-link--sm{@apply text-sm;}.bui-link--base{@apply text-base;}.bui-link--lg{@apply text-lg;}.bui-link--active{@apply font-medium;}.bui-link--disabled{@apply pointer-events-none opacity-50;}.bui-link--button{@apply appearance-none bg-transparent border-none p-0 cursor-pointer;}}@layer components{.bui-heading{@apply font-bold text-gray-900 leading-tight;}.bui-heading--1{@apply text-3xl sm:text-4xl;}.bui-heading--2{@apply text-2xl sm:text-3xl;}.bui-heading--3{@apply text-xl sm:text-2xl;}.bui-heading--4{@apply text-lg sm:text-xl;}.bui-heading--5{@apply text-base sm:text-lg;}.bui-heading--6{@apply text-sm sm:text-base;}.bui-heading--default{@apply text-gray-900;}.bui-heading--white{@apply text-white;}.bui-heading--red{@apply text-red-600;}.bui-heading--rose{@apply text-rose-600;}.bui-heading--orange{@apply text-orange-600;}.bui-heading--green{@apply text-green-600;}.bui-heading--blue{@apply text-blue-600;}.bui-heading--yellow{@apply text-yellow-600;}.bui-heading--violet{@apply text-violet-600;}.bui-heading--left{@apply text-left;}.bui-heading--center{@apply text-center;}.bui-heading--right{@apply text-right;}}@layer components{.bui-breadcrumb{@apply flex items-center flex-wrap;}.bui-breadcrumb__list{@apply flex flex-wrap items-center;}.bui-breadcrumb__item{@apply flex items-center;}.bui-breadcrumb__separator{@apply mx-2;}.bui-breadcrumb__separator--default{@apply text-gray-500;}.bui-breadcrumb__separator--white{@apply text-gray-400;}.bui-breadcrumb__separator--red{@apply text-red-300;}.bui-breadcrumb__separator--rose{@apply text-rose-300;}.bui-breadcrumb__separator--orange{@apply text-orange-300;}.bui-breadcrumb__separator--green{@apply text-green-300;}.bui-breadcrumb__separator--blue{@apply text-blue-300;}.bui-breadcrumb__separator--yellow{@apply text-yellow-600;}.bui-breadcrumb__separator--violet{@apply text-violet-300;}.bui-breadcrumb--small{@apply text-xs;}.bui-breadcrumb--medium{@apply text-sm;}.bui-breadcrumb--large{@apply text-base;}.bui-breadcrumb--default{@apply text-white;}.bui-breadcrumb--white{@apply text-black;}.bui-breadcrumb--red,.bui-breadcrumb--rose,.bui-breadcrumb--orange,.bui-breadcrumb--green,.bui-breadcrumb--blue{@apply text-white;}.bui-breadcrumb--yellow{@apply text-black;}.bui-breadcrumb--violet{@apply text-white;}}@layer components{.bui-spinner{@apply inline-flex flex-col items-center justify-center;}.bui-spinner__animation{@apply inline-block rounded-full animate-spin;border-top-color:transparent}.bui-spinner__label{@apply mt-2 text-center;}.bui-spinner__content{@apply mt-4;}.bui-spinner--small .bui-spinner__animation{@apply w-5 h-5 border-2;}.bui-spinner--medium .bui-spinner__animation{@apply w-8 h-8 border-3;}.bui-spinner--large .bui-spinner__animation{@apply w-12 h-12 border-4;}.bui-spinner--default .bui-spinner__animation{@apply border-gray-200 border-t-gray-800;}.bui-spinner--default .bui-spinner__label{@apply text-gray-800;}.bui-spinner--white .bui-spinner__animation{@apply border-gray-100 border-t-white;}.bui-spinner--white .bui-spinner__label{@apply text-white;}.bui-spinner--red .bui-spinner__animation{@apply border-red-100 border-t-red-600;}.bui-spinner--red .bui-spinner__label{@apply text-red-600;}.bui-spinner--rose .bui-spinner__animation{@apply border-rose-100 border-t-rose-600;}.bui-spinner--rose .bui-spinner__label{@apply text-rose-600;}.bui-spinner--orange .bui-spinner__animation{@apply border-orange-100 border-t-orange-500;}.bui-spinner--orange .bui-spinner__label{@apply text-orange-500;}.bui-spinner--green .bui-spinner__animation{@apply border-green-100 border-t-green-600;}.bui-spinner--green .bui-spinner__label{@apply text-green-600;}.bui-spinner--blue .bui-spinner__animation{@apply border-blue-100 border-t-blue-600;}.bui-spinner--blue .bui-spinner__label{@apply text-blue-600;}.bui-spinner--yellow .bui-spinner__animation{@apply border-yellow-100 border-t-yellow-500;}.bui-spinner--yellow .bui-spinner__label{@apply text-yellow-500;}.bui-spinner--violet .bui-spinner__animation{@apply border-violet-100 border-t-violet-600;}.bui-spinner--violet .bui-spinner__label{@apply text-violet-600;}.bui-spinner--fullscreen{@apply fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50;}}@layer components{.bui-card{@apply bg-white border shadow-sm overflow-hidden;}.bui-card__content{@apply p-4;}.bui-card__header{@apply p-4 border-b;}.bui-card__footer{@apply p-4 border-t;}.bui-card__body{@apply flex flex-col;}.bui-card__title{@apply text-lg font-medium;}.bui-card__value{@apply text-2xl font-bold mt-2;}.bui-card__value--reference{@apply text-sm text-gray-500 mt-1;}.bui-card__trend{@apply mt-2 inline-flex items-center px-2 py-1 text-xs font-medium rounded;}.bui-card--radius-none{@apply rounded-none;}.bui-card--radius-small{@apply rounded-md;}.bui-card--radius-medium{@apply rounded-lg;}.bui-card--radius-large{@apply rounded-xl;}.bui-card--radius-full{@apply rounded-full;}}@layer utilities{.spacing-responsive{@apply px-4 py-6 md:px-6 md:py-8 lg:px-8 lg:py-10;}.text-shadow{@apply shadow-sm;}.card-shadow{@apply shadow-md hover:shadow-lg transition-shadow duration-200;}}

data/app/assets/stylesheets/better_ui.scss

@@ -0,0 +1,3 @@
+// File principale che importa tutti i moduli
+// Base che importa Tailwind
+@use "tailwindcss";

data/app/components/better_ui/application/main/component.html.erb

@@ -0,0 +1,5 @@
+<main class="<%= container_classes %>">
+  <div class="<%= inner_container_classes %>">
+    <%= content %>
+  </div>
+</main>

data/app/components/better_ui/application/main/component.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Main
+      class Component < ViewComponent::Base
+        attr_reader :padding, :inner_padding, :rounded, :shadow, :with_sidebar, :with_navbar, :classes
+
+        # @param padding [Boolean] Se applicare il padding al contenitore principale
+        # @param inner_padding [Boolean] Se applicare il padding al contenitore interno
+        # @param rounded [Symbol] Tipo di border-radius del contenitore interno (:none, :small, :medium, :large, :full), default :small
+        # @param shadow [Symbol] Tipo di ombra del contenitore interno (:none, :sm, :md, :lg), default :md
+        # @param with_sidebar [Boolean] Se lasciare lo spazio per la sidebar
+        # @param with_navbar [Boolean] Se lasciare lo spazio per la navbar
+        # @param classes [String] Classi CSS aggiuntive per il contenitore principale
+        def initialize(
+          padding: true, 
+          inner_padding: true, 
+          rounded: :small, 
+          shadow: :md, 
+          with_sidebar: true, 
+          with_navbar: true, 
+          classes: nil
+        )
+          @padding = padding
+          @inner_padding = inner_padding
+          @rounded = rounded.to_sym
+          @shadow = shadow.to_sym
+          @with_sidebar = with_sidebar
+          @with_navbar = with_navbar
+          @classes = classes
+        end
+
+        def container_classes
+          base_classes = %w[w-full min-h-screen]
+          
+          # Gestione layout per sidebar e navbar
+          if with_sidebar && with_navbar
+            base_classes << "pl-64 pt-16" # Spazio per sidebar + navbar
+          elsif with_sidebar
+            base_classes << "pl-64" # Solo sidebar
+          elsif with_navbar
+            base_classes << "pt-16" # Solo navbar
+          end
+          
+          # Padding del contenitore principale
+          base_classes << (padding ? "p-6" : "p-0")
+          
+          # Classi aggiuntive
+          base_classes << classes if classes.present?
+          
+          base_classes.compact.join(" ")
+        end
+
+        def inner_container_classes
+          base_classes = %w[w-full]
+          
+          # Padding interno
+          base_classes << (inner_padding ? "p-6" : "p-0")
+          
+          # Background
+          base_classes << "bg-white"
+          
+          # Border radius
+          case rounded
+          when :none
+            # Nessun border radius
+          when :small
+            base_classes << "rounded-lg"
+          when :medium
+            base_classes << "rounded-xl"
+          when :large
+            base_classes << "rounded-2xl"
+          when :full
+            base_classes << "rounded-full"
+          else
+            base_classes << "rounded-lg" # Default
+          end
+          
+          # Shadow
+          case shadow
+          when :none
+            # Nessuna ombra
+          when :sm
+            base_classes << "shadow-sm"
+          when :md
+            base_classes << "shadow-md"
+          when :lg
+            base_classes << "shadow-lg"
+          else
+            base_classes << "shadow-md" # Default
+          end
+          
+          base_classes.compact.join(" ")
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/application/navbar/component.html.erb

@@ -0,0 +1,219 @@
+<nav class="<%= container_classes %>">
+  <!-- Left Section: Brand + Breadcrumb -->
+  <div class="flex items-center space-x-4">
+    <!-- Brand Section -->
+    <% if has_brand? %>
+      <div class="flex items-center space-x-3">
+        <% if brand[:href].present? %>
+          <a href="<%= brand[:href] %>" class="flex items-center space-x-3 hover:opacity-75 transition-opacity duration-150">
+        <% else %>
+          <div class="flex items-center space-x-3">
+        <% end %>
+        
+        <% if brand[:logo].present? %>
+          <div class="flex-shrink-0">
+            <% if brand[:logo].is_a?(Hash) %>
+              <%= bui_avatar(**brand[:logo]) %>
+            <% else %>
+              <%= brand[:logo].html_safe %>
+            <% end %>
+          </div>
+        <% end %>
+        
+        <% if brand[:title].present? %>
+          <div class="text-lg font-semibold">
+            <%= brand[:title] %>
+          </div>
+        <% end %>
+        
+        <% if brand[:href].present? %>
+          </a>
+        <% else %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <!-- Breadcrumb Section -->
+    <% if has_breadcrumb? %>
+      <div class="hidden sm:flex items-center">
+        <div class="text-gray-300 mx-2">|</div>
+        <%= render_breadcrumb %>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Center Section: Navigation Items -->
+  <% if has_navigation? %>
+    <div class="hidden md:flex items-center space-x-6">
+      <% navigation_items.each do |item| %>
+        <% if item[:href].present? %>
+          <a 
+            href="<%= item[:href] %>" 
+            class="<%= item[:active] ? 'text-gray-900 font-medium border-b-2 border-gray-900' : 'text-gray-600 hover:text-gray-900 transition-colors duration-150' %>"
+          >
+            <% if item[:icon].present? %>
+              <span class="inline-flex items-center">
+                <%= bui_icon(item[:icon], size: :small) %>
+                <span class="ml-2"><%= item[:label] %></span>
+              </span>
+            <% else %>
+              <%= item[:label] %>
+            <% end %>
+          </a>
+        <% else %>
+          <div class="<%= item[:active] ? 'text-gray-900 font-medium' : 'text-gray-600' %>">
+            <% if item[:icon].present? %>
+              <span class="inline-flex items-center">
+                <%= bui_icon(item[:icon], size: :small) %>
+                <span class="ml-2"><%= item[:label] %></span>
+              </span>
+            <% else %>
+              <%= item[:label] %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <!-- Right Section: Actions -->
+  <div class="flex items-center space-x-3">
+    <% if has_actions? %>
+      <% actions.each do |action| %>
+        <div class="flex-shrink-0">
+          <% if action[:type] == :button %>
+            <% if action[:href].present? %>
+              <a 
+                href="<%= action[:href] %>" 
+                class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 <%= action[:theme] == :primary ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' %>"
+              >
+                <% if action[:icon].present? %>
+                  <%= bui_icon(action[:icon], size: :small) %>
+                  <% if action[:label].present? %>
+                    <span class="ml-2"><%= action[:label] %></span>
+                  <% end %>
+                <% else %>
+                  <%= action[:label] %>
+                <% end %>
+              </a>
+            <% else %>
+              <button 
+                type="button"
+                class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 <%= action[:theme] == :primary ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' %>"
+                <% if action[:data].present? %>
+                  <% action[:data].each do |key, value| %>
+                    data-<%= key %>="<%= value %>"
+                  <% end %>
+                <% end %>
+              >
+                <% if action[:icon].present? %>
+                  <%= bui_icon(action[:icon], size: :small) %>
+                  <% if action[:label].present? %>
+                    <span class="ml-2"><%= action[:label] %></span>
+                  <% end %>
+                <% else %>
+                  <%= action[:label] %>
+                <% end %>
+              </button>
+            <% end %>
+          <% elsif action[:type] == :avatar %>
+            <% if action[:href].present? %>
+              <a href="<%= action[:href] %>" class="flex-shrink-0 hover:opacity-75 transition-opacity duration-150">
+            <% end %>
+            
+            <% if action[:avatar].is_a?(Hash) %>
+              <%= bui_avatar(**action[:avatar]) %>
+            <% else %>
+              <%= action[:avatar].html_safe %>
+            <% end %>
+            
+            <% if action[:href].present? %>
+              </a>
+            <% end %>
+          <% elsif action[:type] == :icon %>
+            <% if action[:href].present? %>
+              <a 
+                href="<%= action[:href] %>" 
+                class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
+              >
+                <%= bui_icon(action[:icon], size: :medium) %>
+              </a>
+            <% else %>
+              <button 
+                type="button"
+                class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
+                <% if action[:data].present? %>
+                  <% action[:data].each do |key, value| %>
+                    data-<%= key %>="<%= value %>"
+                  <% end %>
+                <% end %>
+              >
+                <%= bui_icon(action[:icon], size: :medium) %>
+              </button>
+            <% end %>
+          <% else %>
+            <!-- Custom content -->
+            <%= action[:content].html_safe if action[:content].present? %>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <!-- Mobile menu button (if has navigation) -->
+    <% if has_navigation? %>
+      <div class="md:hidden">
+        <button 
+          type="button" 
+          class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
+          data-toggle="mobile-menu"
+        >
+          <%= bui_icon("menu", size: :medium) %>
+        </button>
+      </div>
+    <% end %>
+  </div>
+</nav>
+
+<!-- Mobile Navigation Menu (hidden by default) -->
+<% if has_navigation? %>
+  <div class="md:hidden hidden border-t border-gray-200" data-mobile-menu>
+    <div class="px-4 py-3 space-y-2">
+      <% navigation_items.each do |item| %>
+        <% if item[:href].present? %>
+          <a 
+            href="<%= item[:href] %>" 
+            class="<%= item[:active] ? 'block px-3 py-2 text-sm font-medium text-gray-900 bg-gray-100 rounded-md' : 'block px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors duration-150' %>"
+          >
+            <% if item[:icon].present? %>
+              <span class="inline-flex items-center">
+                <%= bui_icon(item[:icon], size: :small) %>
+                <span class="ml-2"><%= item[:label] %></span>
+              </span>
+            <% else %>
+              <%= item[:label] %>
+            <% end %>
+          </a>
+        <% else %>
+          <div class="<%= item[:active] ? 'block px-3 py-2 text-sm font-medium text-gray-900' : 'block px-3 py-2 text-sm font-medium text-gray-600' %>">
+            <% if item[:icon].present? %>
+              <span class="inline-flex items-center">
+                <%= bui_icon(item[:icon], size: :small) %>
+                <span class="ml-2"><%= item[:label] %></span>
+              </span>
+            <% else %>
+              <%= item[:label] %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+      
+      <!-- Breadcrumb in mobile if present -->
+      <% if has_breadcrumb? %>
+        <div class="pt-3 border-t border-gray-200">
+          <%= render_breadcrumb %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>