@zvk/ui 0.1.0 → 0.1.1

package/dist/styles.css

@@ -10,6 +10,10 @@
     --liano-font-size-sm: 0.875rem;
     --liano-font-size-md: 0.9375rem;
     --liano-font-size-lg: 1rem;
+    --liano-font-size-base: 1rem;
+    --liano-font-size-xl: 1.125rem;
+    --liano-font-size-2xl: 1.5rem;
+    --liano-font-size-3xl: 1.875rem;
     --liano-line-height-tight: 1.2;
     --liano-line-height-normal: 1.5;
 
@@ -31,6 +35,18 @@
     --liano-shadow-xs: 0 1px 1px rgb(15 23 42 / 0.06);
     --liano-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08), 0 8px 24px rgb(15 23 42 / 0.04);
     --liano-shadow-md: 0 12px 32px rgb(15 23 42 / 0.10);
+    --liano-shadow-lg: 0 18px 48px rgb(15 23 42 / 0.14);
+
+    --liano-container-sm: 40rem;
+    --liano-container-md: 48rem;
+    --liano-container-lg: 64rem;
+    --liano-container-xl: 80rem;
+
+    --liano-z-index-overlay: 1000;
+    --liano-z-index-popover: 1100;
+    --liano-z-popover: var(--liano-z-index-popover);
+    --liano-z-index-tooltip: 1200;
+    --liano-z-index-toast: 1300;
 
     --liano-opacity-disabled: 0.56;
     --liano-duration-fast: 120ms;
@@ -53,15 +69,23 @@
     --liano-color-surface: #ffffff;
     --liano-color-surface-raised: #ffffff;
     --liano-color-border: #d9e0ea;
+    --liano-color-border-subtle: #e7ecf3;
     --liano-color-border-strong: #b8c4d4;
+    --liano-color-accent: #eef4ff;
     --liano-color-ring: #2563eb;
     --liano-color-primary: #1d4ed8;
     --liano-color-primary-hover: #1e40af;
     --liano-color-primary-foreground: #ffffff;
+    --liano-color-primary-soft: #eff6ff;
+    --liano-color-primary-border: #bfdbfe;
     --liano-color-success: #0f8a6a;
+    --liano-color-success-border: #9adbc7;
     --liano-color-warning: #b86f00;
+    --liano-color-warning-border: #f3cf7c;
     --liano-color-destructive: #c62828;
+    --liano-color-destructive-border: #f2a4a4;
     --liano-color-info: #087ea4;
+    --liano-color-info-border: #94dcef;
     --liano-control-background: #ffffff;
     --liano-control-hover: #f8fafc;
     --liano-control-active: #eef4ff;
@@ -76,15 +100,23 @@
     --liano-color-surface: #111821;
     --liano-color-surface-raised: #151e2a;
     --liano-color-border: #293445;
+    --liano-color-border-subtle: #202a38;
     --liano-color-border-strong: #3b4a5f;
+    --liano-color-accent: #1b2f50;
     --liano-color-ring: #69a3ff;
     --liano-color-primary: #6ea2ff;
     --liano-color-primary-hover: #91b8ff;
     --liano-color-primary-foreground: #07101f;
+    --liano-color-primary-soft: #10233f;
+    --liano-color-primary-border: #315f9f;
     --liano-color-success: #3dd6aa;
+    --liano-color-success-border: #206b5b;
     --liano-color-warning: #f5bd4f;
+    --liano-color-warning-border: #755015;
     --liano-color-destructive: #ff6b6b;
+    --liano-color-destructive-border: #80363a;
     --liano-color-info: #58d5f7;
+    --liano-color-info-border: #246f85;
     --liano-control-background: #111821;
     --liano-control-hover: #172233;
     --liano-control-active: #1b2f50;
@@ -212,6 +244,12 @@
     font-size: var(--liano-font-size-md);
   }
 
+  :where(.liano-button[data-size="icon"]) {
+    --liano-button-padding-x: 0;
+    aspect-ratio: 1;
+    min-width: var(--liano-button-height);
+  }
+
   :where(.liano-button[data-variant="primary"]) {
     --liano-button-bg: var(--liano-color-primary);
     --liano-button-fg: var(--liano-color-primary-foreground);
@@ -1754,6 +1792,43 @@
     cursor: not-allowed;
     opacity: var(--liano-opacity-disabled);
   }
+
+  :where(.liano-select__group) {
+    display: grid;
+    gap: var(--liano-space-1);
+    padding-block: var(--liano-space-1);
+  }
+
+  :where(.liano-select__label) {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    font-weight: 600;
+    padding: var(--liano-space-1) var(--liano-space-2);
+  }
+
+  :where(.liano-select__separator) {
+    background: var(--liano-color-border);
+    block-size: 1px;
+    margin-block: var(--liano-space-1);
+  }
+
+  :where(.liano-select__clear) {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--liano-radius-sm);
+    color: var(--liano-color-muted-foreground);
+    cursor: pointer;
+    font: inherit;
+    padding: var(--liano-space-2);
+    text-align: start;
+  }
+
+  :where(.liano-select__clear:hover:not(:disabled), .liano-select__clear:focus-visible) {
+    background: var(--liano-control-hover);
+    color: var(--liano-color-foreground);
+    outline: 0;
+  }
 }
 
 
@@ -1824,7 +1899,7 @@
   :where(.liano-accordion__trigger) {
     --liano-accordion-trigger-height: var(--liano-control-height-md);
     appearance: none;
-    background: var(--liano-surface);
+    background: var(--liano-color-surface);
     border: none;
     color: var(--liano-color-foreground);
     cursor: pointer;
@@ -2860,12 +2935,16 @@
 
   :where(.liano-dropdown-menu__item) {
     all: unset;
+    align-items: center;
     border-radius: var(--liano-radius-sm);
     cursor: default;
+    display: flex;
+    gap: var(--liano-space-2);
+    justify-content: space-between;
     padding: var(--liano-space-2) var(--liano-space-3);
-    width: 100%;
     text-align: left;
     user-select: none;
+    width: 100%;
   }
 
   :where(.liano-dropdown-menu__item:hover, .liano-dropdown-menu__item:focus-visible) {
@@ -2883,6 +2962,38 @@
     border-top: 1px solid var(--liano-color-border);
     margin: var(--liano-space-1) 0;
   }
+
+  :where(.liano-dropdown-menu__label) {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    font-weight: 600;
+    padding: var(--liano-space-1) var(--liano-space-3);
+  }
+
+  :where(.liano-dropdown-menu__shortcut) {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    margin-inline-start: auto;
+  }
+
+  :where(.liano-dropdown-menu__checkbox-item, .liano-dropdown-menu__radio-item) {
+    justify-content: start;
+  }
+
+  :where(.liano-dropdown-menu__item-indicator) {
+    color: var(--liano-color-primary);
+    inline-size: 1rem;
+    text-align: center;
+  }
+
+  :where(.liano-dropdown-menu__item-label) {
+    min-width: 0;
+  }
+
+  :where(.liano-dropdown-menu__radio-group, .liano-dropdown-menu__sub) {
+    display: grid;
+    gap: var(--liano-space-1);
+  }
 }
 
 
@@ -3049,6 +3160,13 @@
     font-weight: 600;
   }
 
+  .liano-combobox__control {
+    align-items: center;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    position: relative;
+  }
+
   .liano-combobox__input {
     background: var(--liano-color-surface);
     border: 1px solid var(--liano-color-border);
@@ -3097,18 +3215,12 @@
     border: 1px solid var(--liano-color-border);
     border-radius: var(--liano-radius-md);
     box-shadow: var(--liano-shadow-md);
-    inset-block-start: calc(100% + var(--liano-space-1));
-    inset-inline: 0;
-    padding: var(--liano-space-1);
-    position: absolute;
-    z-index: 110;
-  }
-
-  .liano-combobox__list {
     display: grid;
     gap: var(--liano-space-1);
-    max-block-size: 16rem;
+    max-block-size: min(16rem, var(--liano-floating-available-height));
     overflow: auto;
+    padding: var(--liano-space-1);
+    z-index: var(--liano-z-popover);
   }
 
   .liano-combobox__option {
@@ -3132,6 +3244,26 @@
     cursor: not-allowed;
     opacity: 0.6;
   }
+
+  .liano-combobox__clear {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--liano-radius-sm);
+    color: var(--liano-color-muted-foreground);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--liano-font-size-xs);
+    margin-inline-start: var(--liano-space-2);
+    padding: var(--liano-space-1) var(--liano-space-2);
+  }
+
+  .liano-combobox__clear:hover:not(:disabled),
+  .liano-combobox__clear:focus-visible {
+    background: var(--liano-control-hover);
+    color: var(--liano-color-foreground);
+    outline: 0;
+  }
 }
 
 
@@ -3160,12 +3292,16 @@
   }
 
   .liano-context-menu__item {
+    align-items: center;
     background: transparent;
     border: 0;
     border-radius: var(--liano-radius-sm);
     color: var(--liano-color-foreground);
     cursor: pointer;
+    display: flex;
     font: inherit;
+    gap: var(--liano-space-2);
+    justify-content: space-between;
     padding: var(--liano-space-2) var(--liano-space-3);
     text-align: start;
   }
@@ -3190,6 +3326,27 @@
     block-size: 1px;
     margin: var(--liano-space-1) 0;
   }
+
+  .liano-context-menu__label {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    font-weight: 600;
+    padding: var(--liano-space-1) var(--liano-space-3);
+  }
+
+  .liano-context-menu__checkbox-item {
+    justify-content: start;
+  }
+
+  .liano-context-menu__item-indicator {
+    color: var(--liano-color-primary);
+    inline-size: 1rem;
+    text-align: center;
+  }
+
+  .liano-context-menu__item-label {
+    min-width: 0;
+  }
 }
 
 
@@ -3242,6 +3399,10 @@
   }
 
   .liano-menubar__item {
+    align-items: center;
+    display: flex;
+    gap: var(--liano-space-2);
+    justify-content: space-between;
     padding: var(--liano-space-2) var(--liano-space-3);
     text-align: start;
   }
@@ -3262,6 +3423,19 @@
     block-size: 1px;
     margin: var(--liano-space-1) 0;
   }
+
+  .liano-menubar__label {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    font-weight: 600;
+    padding: var(--liano-space-1) var(--liano-space-3);
+  }
+
+  .liano-menubar__shortcut {
+    color: var(--liano-color-muted-foreground);
+    font-size: var(--liano-font-size-xs);
+    margin-inline-start: auto;
+  }
 }
 
 

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@zvk/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A polished, zero-runtime-dependency React component library for Liano applications.",
   "private": false,
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brandon-schabel/zvk-ui.git"
+  },
   "publishConfig": {
     "access": "public"
   },