@kosmeo-ui/react 0.2.0 → 1.0.0

package/dist/components/layout/card/styles.css

@@ -1,9 +1,9 @@
 /* Card Component Styles */
 .k-card {
-  background: var(--background-color);
+  background: var(--k-background-color);
   border-radius: 0.9375rem;
   transition: all 0.3s ease;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
 }
 
 .k-card-align-left {
@@ -15,12 +15,12 @@
 }
 
 .k-card-hoverable {
-  box-shadow: 0 0.3125rem 0.9375rem var(--shadow-color);
+  box-shadow: 0 0.3125rem 0.9375rem var(--k-shadow-color);
 }
 
 .k-card-hoverable:hover {
   transform: translateY(-0.3125rem);
-  box-shadow: 0 0.9375rem 1.875rem var(--shadow-color-hover);
+  box-shadow: 0 0.9375rem 1.875rem var(--k-shadow-color-hover);
 }
 
 .k-card-header {
@@ -29,7 +29,7 @@
   gap: 0.5rem;
   padding-bottom: 0.75rem;
   margin-bottom: 1rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
 }
 
 .k-card-header-row {
@@ -58,7 +58,7 @@
 
 .k-card-progress-label {
   font-size: 0.8125rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   opacity: 0.7;
 }
 
@@ -72,7 +72,7 @@
   gap: 0.5rem;
   padding-top: 0.75rem;
   margin-top: 1rem;
-  border-top: 0.0625rem solid var(--border-color);
+  border-top: 0.0625rem solid var(--k-border-color);
 }
 
 /* Padding Variants */
@@ -116,67 +116,67 @@
 
 /* Color Variants */
 .k-card-primary {
-  border-color: var(--primary-color);
+  border-color: var(--k-primary-color);
 }
 
 .k-card-primary.k-card-hoverable:hover {
-  border-color: var(--primary-color-hover);
+  border-color: var(--k-primary-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--primary-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-primary-color);
 }
 
 .k-card-secondary {
-  border-color: var(--secondary-color);
+  border-color: var(--k-secondary-color);
 }
 
 .k-card-secondary.k-card-hoverable:hover {
-  border-color: var(--secondary-color-hover);
+  border-color: var(--k-secondary-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--secondary-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-secondary-color);
 }
 
 .k-card-light {
-  border-color: var(--light-color);
+  border-color: var(--k-light-color);
 }
 
 .k-card-light.k-card-hoverable:hover {
-  border-color: var(--light-color-hover);
+  border-color: var(--k-light-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--light-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-light-color);
 }
 
 .k-card-danger {
-  border-color: var(--danger-color);
+  border-color: var(--k-danger-color);
 }
 
 .k-card-danger.k-card-hoverable:hover {
-  border-color: var(--danger-color-hover);
+  border-color: var(--k-danger-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--danger-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-danger-color);
 }
 
 .k-card-warning {
-  border-color: var(--warning-color);
+  border-color: var(--k-warning-color);
 }
 
 .k-card-warning.k-card-hoverable:hover {
-  border-color: var(--warning-color-hover);
+  border-color: var(--k-warning-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--warning-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-warning-color);
 }
 
 .k-card-success {
-  border-color: var(--success-color);
+  border-color: var(--k-success-color);
 }
 
 .k-card-success.k-card-hoverable:hover {
-  border-color: var(--success-color-hover);
+  border-color: var(--k-success-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--success-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-success-color);
 }

package/dist/components/layout/col/styles.css

@@ -23,5 +23,5 @@
 .k-col-divider-solid-top {
   margin-top: 0.5rem;
   padding-top: 0.5rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }

package/dist/components/layout/page/styles.css

@@ -1,8 +1,11 @@
 .k-page {
+  --k-page-padding: 0px;
+  --k-page-gap: 0px;
   display: flex;
   flex-direction: column;
   width: 100%;
   box-sizing: border-box;
+  gap: var(--k-page-gap);
 }
 
 .k-page-fill {
@@ -11,15 +14,32 @@
 }
 
 .k-page-padded {
-  padding: 1.5rem;
+  --k-page-padding: 1.5rem;
+  padding: var(--k-page-padding);
+}
+
+/* A fill page has a fixed height, so content taller than it spills past the
+   bottom padding and ends flush with the view. A spacer after the content
+   stands in for that padding: it follows the content when it overflows, so
+   the scroll area still ends with the space. Its margin cancels the gap
+   before it; it keeps a real height, as an empty box adds no scroll area. */
+.k-page-fill.k-page-padded {
+  padding-bottom: 0;
+}
+
+.k-page-fill.k-page-padded::after {
+  content: "";
+  flex: none;
+  height: var(--k-page-padding);
+  margin-top: calc(-1 * var(--k-page-gap));
 }
 
 .k-page-gap-sm {
-  gap: 0.75rem;
+  --k-page-gap: 0.75rem;
 }
 
 .k-page-gap-md {
-  gap: 1.5rem;
+  --k-page-gap: 1.5rem;
 }
 
 .k-page-max-narrow {
@@ -45,9 +65,9 @@
 
 @media (max-width: 640px) {
   .k-page-padded {
-    padding: 1rem;
+    --k-page-padding: 1rem;
   }
   .k-page-gap-md {
-    gap: 1rem;
+    --k-page-gap: 1rem;
   }
 }

package/dist/components/layout/sectionHeader/styles.css

@@ -11,13 +11,13 @@
 
 .k-section-header-divider {
   padding-bottom: 1rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
   margin-bottom: 1.5rem;
 }
 
 .k-section-header-preface {
   font-size: 0.875rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-section-header-row {
@@ -82,7 +82,7 @@
 
 .k-section-header-subtitle {
   font-size: 0.8125rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-section-header-badges {

package/dist/components/navigation/breadcrumbs/styles.css

@@ -7,12 +7,12 @@
 }
 
 .k-breadcrumb-item {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-breadcrumb-item a {
   text-decoration: none;
-  color: var(--text-color-link);
+  color: var(--k-text-color-link);
 }
 
 .k-breadcrumb-item a:hover {
@@ -20,23 +20,23 @@
 }
 
 .k-breadcrumb-item span {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-breadcrumb-item + .k-breadcrumb-item::before {
   content: "/";
   margin: 0 0.5rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-breadcrumb-item-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-breadcrumb-item-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-breadcrumb-item-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }

package/dist/components/navigation/pagination/styles.css

@@ -4,12 +4,12 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem 1.5rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-pagination-summary {
   margin: 0;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -26,10 +26,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
-  background-color: var(--background-color-light);
-  color: var(--text-color);
+  background-color: var(--k-background-color-light);
+  color: var(--k-text-color);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
   transition:
@@ -38,19 +38,19 @@
 }
 
 .k-pagination-button:not(:disabled):hover {
-  background-color: var(--background-color-hover);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-pagination-button:focus-visible {
-  outline: 0.125rem solid var(--border-color-active);
+  outline: 0.125rem solid var(--k-border-color-active);
   outline-offset: 0.125rem;
 }
 
 .k-pagination-button-current,
 .k-pagination-button-current:not(:disabled):hover {
-  border-color: var(--primary-color);
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  border-color: var(--k-primary-color);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
   font-weight: 600;
 }
 
@@ -60,7 +60,7 @@
 }
 
 .k-pagination-gap {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   text-align: center;
 }
 
@@ -68,13 +68,13 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   white-space: nowrap;
 }
 
 /* Sizes: every button stays at least 32px, above the 24px target minimum. */
 .k-pagination-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-pagination-sm .k-pagination-button,
@@ -85,7 +85,7 @@
 }
 
 .k-pagination-md {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-pagination-md .k-pagination-button,
@@ -96,7 +96,7 @@
 }
 
 .k-pagination-lg {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-pagination-lg .k-pagination-button,

package/dist/components/navigation/sidebar/styles.css

@@ -16,7 +16,7 @@
   letter-spacing: 0.05em;
   /* 50% white: the weakest overlay that keeps small text above 4.5:1 on the
      sidebar's dark background. */
-  color: var(--overlay-light-strong);
+  color: var(--k-overlay-light-strong);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -26,7 +26,7 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.6rem 1.5rem;
-  color: var(--text-color-light);
+  color: var(--k-text-color-light);
   text-decoration: none;
   font-size: 0.875rem;
   transition:
@@ -37,18 +37,18 @@
 }
 
 .k-sidebar-nav-link:hover {
-  background-color: var(--overlay-light-weak);
+  background-color: var(--k-overlay-light-weak);
 }
 
 /* Browser default focus rings can vanish on the dark background. */
 .k-sidebar-nav-link:focus-visible {
-  outline: 2px solid var(--text-color-light);
+  outline: 2px solid var(--k-text-color-light);
   outline-offset: -2px;
 }
 
 .k-sidebar-nav-link.active {
-  background-color: var(--overlay-light-medium);
-  color: var(--text-color-light);
+  background-color: var(--k-overlay-light-medium);
+  color: var(--k-text-color-light);
   font-weight: 600;
 }
 

package/dist/components/navigation/stepper/styles.css

@@ -38,14 +38,14 @@
   height: 2rem;
   min-width: 2rem;
   border-radius: 50%;
-  border: 0.125rem solid var(--border-color);
+  border: 0.125rem solid var(--k-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.875rem;
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--k-background-color);
+  color: var(--k-text-color);
   transition:
     background 0.15s ease,
     border-color 0.15s ease,
@@ -60,7 +60,7 @@
 
 .k-stepper-connector {
   position: absolute;
-  background: var(--border-color);
+  background: var(--k-border-color);
 }
 
 .k-stepper-horizontal .k-stepper-connector {
@@ -78,24 +78,24 @@
 }
 
 .k-stepper-step-active .k-stepper-marker {
-  border-color: var(--primary-color);
-  background: var(--primary-color);
-  color: var(--text-color-light);
+  border-color: var(--k-primary-color);
+  background: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-complete .k-stepper-marker {
-  border-color: var(--success-color);
-  background: var(--success-color);
-  color: var(--text-color-light);
+  border-color: var(--k-success-color);
+  background: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-error .k-stepper-marker {
-  border-color: var(--danger-color);
-  background: var(--danger-color);
-  color: var(--text-color-light);
+  border-color: var(--k-danger-color);
+  background: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-complete .k-stepper-connector,
 .k-stepper-step-active .k-stepper-connector {
-  background: var(--primary-color);
+  background: var(--k-primary-color);
 }

package/dist/components/navigation/tabButton/styles.css

@@ -1,6 +1,6 @@
 .k-tab-button {
-  background: var(--background-color);
-  border: 0.0625rem solid var(--border-color);
+  background: var(--k-background-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-bottom: 0.125rem solid transparent;
   border-radius: 0.375rem 0.375rem 0 0;
   padding: 0.5rem 1rem;
@@ -15,126 +15,126 @@
 /* Size variations */
 .k-tab-button-sm {
   padding: 0.375rem 0.75rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-tab-button-md {
   padding: 0.5rem 1rem;
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-tab-button-lg {
   padding: 0.625rem 1.25rem;
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }
 
 /* Variant styles - all keep white background, only text and border colors change */
 .k-tab-button-primary {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-primary:hover:not(.k-tab-button-disabled) {
-  color: var(--primary-color-text);
-  background-color: var(--background-color);
+  color: var(--k-primary-color-text);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-primary.k-tab-button-active {
-  color: var(--primary-color-text);
-  background-color: var(--background-color);
-  border-bottom-color: var(--primary-color);
-  border-color: var(--primary-color) var(--primary-color) transparent
-    var(--primary-color);
+  color: var(--k-primary-color-text);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-primary-color);
+  border-color: var(--k-primary-color) var(--k-primary-color) transparent
+    var(--k-primary-color);
 }
 
 .k-tab-button-secondary {
-  color: var(--text-color-secondary);
-  background-color: var(--background-color);
+  color: var(--k-text-color-secondary);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-secondary:hover:not(.k-tab-button-disabled) {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-secondary.k-tab-button-active {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--secondary-color);
-  border-color: var(--secondary-color) var(--secondary-color) transparent
-    var(--secondary-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-secondary-color);
+  border-color: var(--k-secondary-color) var(--k-secondary-color) transparent
+    var(--k-secondary-color);
 }
 
 .k-tab-button-success {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-success:hover:not(.k-tab-button-disabled) {
-  color: var(--success-color);
-  background-color: var(--background-color);
+  color: var(--k-success-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-success.k-tab-button-active {
-  color: var(--success-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--success-color);
-  border-color: var(--success-color) var(--success-color) transparent
-    var(--success-color);
+  color: var(--k-success-color);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-success-color);
+  border-color: var(--k-success-color) var(--k-success-color) transparent
+    var(--k-success-color);
 }
 
 .k-tab-button-danger {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-danger:hover:not(.k-tab-button-disabled) {
-  color: var(--danger-color-text);
-  background-color: var(--background-color);
+  color: var(--k-danger-color-text);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-danger.k-tab-button-active {
-  color: var(--danger-color-text);
-  background-color: var(--background-color);
-  border-bottom-color: var(--danger-color);
-  border-color: var(--danger-color) var(--danger-color) transparent
-    var(--danger-color);
+  color: var(--k-danger-color-text);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-danger-color);
+  border-color: var(--k-danger-color) var(--k-danger-color) transparent
+    var(--k-danger-color);
 }
 
 .k-tab-button-warning {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-warning:hover:not(.k-tab-button-disabled) {
-  color: var(--warning-color-text);
-  background-color: var(--background-color);
+  color: var(--k-warning-color-text);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-warning.k-tab-button-active {
-  color: var(--warning-color-text);
-  background-color: var(--background-color);
-  border-bottom-color: var(--warning-color);
-  border-color: var(--warning-color) var(--warning-color) transparent
-    var(--warning-color);
+  color: var(--k-warning-color-text);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-warning-color);
+  border-color: var(--k-warning-color) var(--k-warning-color) transparent
+    var(--k-warning-color);
 }
 
 .k-tab-button-light {
-  color: var(--text-color-secondary);
-  background-color: var(--background-color);
+  color: var(--k-text-color-secondary);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-light:hover:not(.k-tab-button-disabled) {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
 }
 
 .k-tab-button-light.k-tab-button-active {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  border-bottom-color: var(--border-color);
-  border-color: var(--border-color) var(--border-color) transparent
-    var(--border-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
+  border-bottom-color: var(--k-border-color);
+  border-color: var(--k-border-color) var(--k-border-color) transparent
+    var(--k-border-color);
 }
 
 /* Disabled state */