okonomi_ui_kit 0.1.9 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc90801689c7c39688c8a5a065b77ea61eb8fd0afa45cdee03b6b66ebee974d5
-  data.tar.gz: 8a2de086a893267f851b3084d3cbd7c8d8056da5f7f577141641383ae6ac74fa
+  metadata.gz: 8c739aa7ad0484b1276eaac7162c3576923e4bafb7081b9f55b9e81fd41e5834
+  data.tar.gz: ba2a507eddfdf7e07870075ad808891b74620fc48b5910dd480b1c5bf8f85184
 SHA512:
-  metadata.gz: 26b66dae684154ebed6861acdb06759b19fdc2e9a161a4ef900006c25b20ac787b88a307baa1e6a7cf31d465d7611f59c0c7229c0abaf3a48d4189d43677eaea
-  data.tar.gz: edcdadb51037bc73eb330bcd09f80ce7dfe7a0c2d81d7b1b653cd64088fefa1f5976adf7ba39ff4421a08bce41dc3243d08edb1845f5496249f313f2f6628625
+  metadata.gz: a701e25bb9ee75907a71a4f41e2392719b4ec31e6010154fb281b2327670b2012f90625e55ea252e55313f24ab10203244e7e38f317c016040bb2802e97d45d0
+  data.tar.gz: fdef062c6cb8fa64bf5db4ff8fe71235bb86ee90112630d96a8d33f8fedceedcd1721d6eee7a3391f373292310d1f00711be2f8bcc9575b5da08eaef7ee2ca2f

data/README.md

@@ -81,7 +81,7 @@ OkonomiUiKit provides a `ui` helper that gives you access to all components:
 - **File Upload** - Drag-and-drop file uploads
 
 ### Navigation Components
-- **Dropdown** - Dropdown menus with Stimulus integration
+- **Dropdown Button** - Split button with dropdown menu
 - **Breadcrumbs** - Navigation breadcrumbs
 - **Link** - Styled links with variants
 
@@ -113,7 +113,7 @@ end
 
 ## Documentation
 
-### Guides
+### Core Guides
 
 - [Style Overrides Guide](guides/style-overrides-guide.md) - Complete guide to customizing component styles
 - [Component Guide](docs/COMPONENT_GUIDE.md) - Creating custom components
@@ -121,11 +121,53 @@ end
 
 ### Component Guides
 
+#### Core UI Components
+- [Alert](guides/components/alert.md) - Notification messages and alerts
+- [Badge](guides/components/badge.md) - Status indicators and labels
+- [Button Base](guides/components/button_base.md) - Base button component configuration
+- [Button Tag](guides/components/button_tag.md) - Button element with styling
+- [Button To](guides/components/button_to.md) - Rails button_to helper with styling
+- [Code](guides/components/code.md) - Inline and block code display
+- [Link To](guides/components/link_to.md) - Styled link components
+- [Typography](guides/components/typography.md) - Text styling with semantic HTML elements
+
+#### Layout Components
+- [Page](guides/components/page.md) - Page layout structure
+- [Table](guides/components/table.md) - Data tables with consistent styling
+
+#### Navigation Components
 - [Breadcrumbs](guides/components/breadcrumbs.md) - Navigation breadcrumb trails
+- [Dropdown Button](guides/components/dropdown_button.md) - Split button with dropdown menu
+- [Navigation](guides/components/navigation.md) - Sidebar navigation menus with groups and links
+
+#### Interactive Components
 - [Confirmation Modal](guides/components/confirmation_modal.md) - Accessible modal dialogs for user confirmations
 - [Icon](guides/components/icon.md) - SVG icon rendering with style customization
-- [Navigation](guides/components/navigation.md) - Sidebar navigation menus with groups and links
-- [Typography](guides/components/typography.md) - Text styling with semantic HTML elements
+
+#### Form Components
+- [Forms Overview](guides/components/forms.md) - Form building guide and best practices
+- [Check Box with Label](guides/components/forms/check_box_with_label.md) - Checkbox inputs with labels
+- [Collection Select](guides/components/forms/collection_select.md) - Select from a collection
+- [Date Field](guides/components/forms/date_field.md) - Date input fields
+- [DateTime Local Field](guides/components/forms/datetime_local_field.md) - Date and time inputs
+- [Email Field](guides/components/forms/email_field.md) - Email input validation
+- [Field](guides/components/forms/field.md) - Form field wrapper
+- [Field Set](guides/components/forms/field_set.md) - Group related form fields
+- [Input Base](guides/components/forms/input_base.md) - Base input configuration
+- [Label](guides/components/forms/label.md) - Form labels
+- [Multi Select](guides/components/forms/multi_select.md) - Multiple selection inputs
+- [Number Field](guides/components/forms/number_field.md) - Numeric inputs
+- [Password Field](guides/components/forms/password_field.md) - Password inputs
+- [Search Field](guides/components/forms/search_field.md) - Search input fields
+- [Select](guides/components/forms/select.md) - Select dropdowns
+- [Show If](guides/components/forms/show_if.md) - Conditional field visibility
+- [Telephone Field](guides/components/forms/telephone_field.md) - Phone number inputs
+- [Text Area](guides/components/forms/text_area.md) - Multi-line text inputs
+- [Text Field](guides/components/forms/text_field.md) - Single-line text inputs
+- [Time Field](guides/components/forms/time_field.md) - Time input fields
+- [Upload Field](guides/components/forms/upload_field.md) - File upload fields
+- [URL Field](guides/components/forms/url_field.md) - URL input validation
+
 
 ### Development
 

data/app/assets/builds/okonomi_ui_kit/application.tailwind.css

@@ -79,7 +79,6 @@
     --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-indigo-900: oklch(35.9% 0.144 278.697);
-    --color-indigo-950: oklch(25.7% 0.09 281.288);
     --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-200: oklch(90.2% 0.063 306.703);
@@ -90,7 +89,6 @@
     --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-purple-900: oklch(38.1% 0.176 304.987);
-    --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-rose-200: oklch(89.2% 0.058 10.001);
     --color-rose-900: oklch(41% 0.159 10.272);
     --color-slate-100: oklch(96.8% 0.007 247.896);
@@ -134,8 +132,6 @@
     --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;
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
@@ -161,29 +157,40 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-default-50: var(--color-gray-50);
-    --color-default-300: var(--color-gray-300);
+    --color-default-100: var(--color-gray-100);
     --color-default-500: var(--color-gray-500);
     --color-default-600: var(--color-gray-600);
     --color-default-700: var(--color-gray-700);
     --color-default-900: var(--color-gray-900);
     --color-primary-50: var(--color-indigo-50);
+    --color-primary-100: var(--color-indigo-100);
+    --color-primary-500: var(--color-indigo-500);
     --color-primary-600: var(--color-indigo-600);
     --color-primary-700: var(--color-indigo-700);
     --color-secondary-50: var(--color-purple-50);
+    --color-secondary-100: var(--color-purple-100);
+    --color-secondary-500: var(--color-purple-500);
     --color-secondary-600: var(--color-purple-600);
     --color-secondary-700: var(--color-purple-700);
     --color-success-50: var(--color-green-50);
+    --color-success-100: var(--color-green-100);
+    --color-success-500: var(--color-green-500);
     --color-success-600: var(--color-green-600);
     --color-success-700: var(--color-green-700);
     --color-danger-50: var(--color-red-50);
     --color-danger-100: var(--color-red-100);
     --color-danger-400: var(--color-red-400);
+    --color-danger-500: var(--color-red-500);
     --color-danger-600: var(--color-red-600);
     --color-danger-700: var(--color-red-700);
     --color-warning-50: var(--color-amber-50);
+    --color-warning-100: var(--color-amber-100);
+    --color-warning-500: var(--color-amber-500);
     --color-warning-600: var(--color-amber-600);
     --color-warning-700: var(--color-amber-700);
     --color-info-50: var(--color-sky-50);
+    --color-info-100: var(--color-sky-100);
+    --color-info-500: var(--color-sky-500);
     --color-info-600: var(--color-sky-600);
     --color-info-700: var(--color-sky-700);
   }
@@ -375,9 +382,6 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -459,8 +463,11 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .mt-0 {
-    margin-top: calc(var(--spacing) * 0);
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
   }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
@@ -486,9 +493,15 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -516,6 +529,12 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .-ml-px {
+    margin-left: -1px;
+  }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -555,6 +574,10 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -575,6 +598,9 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -608,6 +634,9 @@
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
@@ -662,6 +691,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -707,21 +739,14 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
+  .origin-top-right {
+    transform-origin: top right;
   }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
@@ -825,6 +850,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -988,10 +1016,18 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-l-md {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
   .rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-r-md {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
   .rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -1016,6 +1052,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1132,9 +1172,6 @@
   .border-yellow-600 {
     border-color: var(--color-yellow-600);
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1153,9 +1190,6 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
-  .bg-danger-50 {
-    background-color: var(--color-danger-50);
-  }
   .bg-danger-100 {
     background-color: var(--color-danger-100);
   }
@@ -1201,9 +1235,6 @@
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
@@ -1213,15 +1244,9 @@
   .bg-indigo-600 {
     background-color: var(--color-indigo-600);
   }
-  .bg-indigo-950 {
-    background-color: var(--color-indigo-950);
-  }
   .bg-info-600 {
     background-color: var(--color-info-600);
   }
-  .bg-primary-50 {
-    background-color: var(--color-primary-50);
-  }
   .bg-primary-600 {
     background-color: var(--color-primary-600);
   }
@@ -1252,15 +1277,9 @@
   .bg-slate-800 {
     background-color: var(--color-slate-800);
   }
-  .bg-success-50 {
-    background-color: var(--color-success-50);
-  }
   .bg-success-600 {
     background-color: var(--color-success-600);
   }
-  .bg-warning-50 {
-    background-color: var(--color-warning-50);
-  }
   .bg-warning-600 {
     background-color: var(--color-warning-600);
   }
@@ -1297,6 +1316,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-\[1px\] {
+    padding: 1px;
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1315,9 +1337,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1339,9 +1358,6 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-5 {
-    padding-block: calc(var(--spacing) * 5);
-  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1500,9 +1516,6 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[\#custom-color\] {
-    color: #custom-color;
-  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -1575,12 +1588,6 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
-  .text-indigo-100 {
-    color: var(--color-indigo-100);
-  }
-  .text-indigo-500 {
-    color: var(--color-indigo-500);
-  }
   .text-indigo-600 {
     color: var(--color-indigo-600);
   }
@@ -1590,9 +1597,6 @@
   .text-info-600 {
     color: var(--color-info-600);
   }
-  .text-pink-500 {
-    color: var(--color-pink-500);
-  }
   .text-primary-600 {
     color: var(--color-primary-600);
   }
@@ -1724,6 +1728,9 @@
   .ring-danger-400 {
     --tw-ring-color: var(--color-danger-400);
   }
+  .ring-gray-200 {
+    --tw-ring-color: var(--color-gray-200);
+  }
   .ring-gray-300 {
     --tw-ring-color: var(--color-gray-300);
   }
@@ -1821,13 +1828,6 @@
       }
     }
   }
-  .group-hover\:text-red-500 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: var(--color-red-500);
-      }
-    }
-  }
   .focus-within\:ring-1 {
     &:focus-within {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2105,13 +2105,6 @@
       }
     }
   }
-  .hover\:text-indigo-900 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-indigo-900);
-      }
-    }
-  }
   .hover\:text-primary-600 {
     &:hover {
       @media (hover: hover) {
@@ -2133,13 +2126,6 @@
       }
     }
   }
-  .hover\:text-red-900 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-red-900);
-      }
-    }
-  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -2230,11 +2216,86 @@
       outline-style: none;
     }
   }
+  .active\:bg-danger-100 {
+    &:active {
+      background-color: var(--color-danger-100);
+    }
+  }
+  .active\:bg-danger-500 {
+    &:active {
+      background-color: var(--color-danger-500);
+    }
+  }
+  .active\:bg-default-100 {
+    &:active {
+      background-color: var(--color-default-100);
+    }
+  }
+  .active\:bg-default-500 {
+    &:active {
+      background-color: var(--color-default-500);
+    }
+  }
+  .active\:bg-gray-100 {
+    &:active {
+      background-color: var(--color-gray-100);
+    }
+  }
+  .active\:bg-info-100 {
+    &:active {
+      background-color: var(--color-info-100);
+    }
+  }
+  .active\:bg-info-500 {
+    &:active {
+      background-color: var(--color-info-500);
+    }
+  }
+  .active\:bg-primary-100 {
+    &:active {
+      background-color: var(--color-primary-100);
+    }
+  }
+  .active\:bg-primary-500 {
+    &:active {
+      background-color: var(--color-primary-500);
+    }
+  }
   .active\:bg-red-800 {
     &:active {
       background-color: var(--color-red-800);
     }
   }
+  .active\:bg-secondary-100 {
+    &:active {
+      background-color: var(--color-secondary-100);
+    }
+  }
+  .active\:bg-secondary-500 {
+    &:active {
+      background-color: var(--color-secondary-500);
+    }
+  }
+  .active\:bg-success-100 {
+    &:active {
+      background-color: var(--color-success-100);
+    }
+  }
+  .active\:bg-success-500 {
+    &:active {
+      background-color: var(--color-success-500);
+    }
+  }
+  .active\:bg-warning-100 {
+    &:active {
+      background-color: var(--color-warning-100);
+    }
+  }
+  .active\:bg-warning-500 {
+    &:active {
+      background-color: var(--color-warning-500);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;