@parrot-co/parrot-ui 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/styles.css

@@ -248,6 +248,7 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-light: 300;
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;
@@ -258,6 +259,7 @@
     --radius-2xl: 1rem;
     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -274,6 +276,7 @@
     }
     --color-text-dark: var(--color-gray-950);
     --color-text-light: var(--color-gray-500);
+    --color-text-muted: var(--color-gray-400);
     --color-border: var(--color-gray-200);
     --color-border-muted: color-mix(
     in oklch,
@@ -543,6 +546,9 @@
   .table {
     display: table;
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-full {
     width: 100%;
   }
@@ -609,9 +615,15 @@
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -619,12 +631,36 @@
   .border-border-subtle {
     border-color: var(--color-border-subtle);
   }
+  .bg-\[var\(--color-surface-sunken\)\] {
+    background-color: var(--color-surface-sunken);
+  }
   .bg-surface-raised {
     background-color: var(--color-surface-raised);
   }
+  .bg-white\/20 {
+    background-color: color-mix(in srgb, #fff 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-16 {
+    padding: calc(var(--spacing) * 16);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -645,6 +681,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .leading-normal {
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
@@ -657,6 +696,25 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-\(--color-primary\) {
+    color: var(--color-primary);
+  }
+  .text-\(--color-text-dark\) {
+    color: var(--color-text-dark);
+  }
+  .text-\(--color-text-light\) {
+    color: var(--color-text-light);
+  }
+  .text-\[var\(--color-critical\)\] {
+    color: var(--color-critical);
+  }
+  .text-\[var\(--color-text-light\)\] {
+    color: var(--color-text-light);
+  }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
@@ -1645,6 +1703,79 @@
     }
   }
 }
+@layer components {
+  .prt-pin {
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  .prt-pin-otp {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .prt-pin-group {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .prt-pin-slot {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--input-height);
+    height: var(--input-height);
+    border: 1px solid var(--color-border);
+    border-radius: var(--prt-radius);
+    background: var(--color-surface-raised);
+    color: var(--color-gray-900);
+    font-size: var(--input-font);
+    font-variant-numeric: tabular-nums;
+    transition: border-color 100ms ease, box-shadow 100ms ease;
+    &[data-active] {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px var(--color-focus-ring);
+      z-index: 1;
+    }
+    &[data-invalid] {
+      border-color: var(--color-critical);
+    }
+    &[data-invalid][data-active] {
+      box-shadow: 0 0 0 3px var(--color-focus-ring-critical);
+    }
+  }
+  .prt-pin-placeholder {
+    color: var(--color-gray-400);
+  }
+  .prt-pin-caret {
+    position: absolute;
+    width: 1px;
+    height: 50%;
+    background: var(--color-primary);
+    animation: prt-pin-caret-blink 1s steps(1) infinite;
+  }
+  @keyframes prt-pin-caret-blink {
+    0%, 49% {
+      opacity: 1;
+    }
+    50%, 100% {
+      opacity: 0;
+    }
+  }
+  .prt-pin-separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-gray-400);
+    user-select: none;
+    pointer-events: none;
+  }
+}
 @layer components {
   .prt-modal-underlay {
     position: fixed;
@@ -1658,11 +1789,11 @@
   }
   .prt-modal-container {
     display: inline-flex;
-    &[data-variant="modal"] {
+    &[data-layout="modal"] {
       align-self: center;
       justify-self: center;
     }
-    &[data-variant="drawer"] {
+    &[data-layout="drawer"] {
       justify-self: end;
     }
   }
@@ -1823,8 +1954,9 @@
     height: var(--base-radio-size);
     width: var(--base-radio-size);
     &[data-checked="true"] {
-      border-color: var(--c-solid-hover, var(--color-primary));
+      border-color: var(--variant-hover, var(--color-primary));
       border-width: thick;
+      background-color: transparent;
     }
     &[data-size="sm"] {
       --base-radio-size: calc(var(--spacing) * 4);
@@ -1873,7 +2005,7 @@
     }
     &[data-selected] {
       .prt-switch {
-        background-color: var(--c-text, var(--color-primary));
+        background-color: var(--variant-hover, var(--color-primary));
       }
       .prt-switch-thumb {
         transform: translateX(100%);
@@ -1962,7 +2094,8 @@
     }
     & .selector {
       flex-shrink: 0;
-      color: var(--c-solid);
+      color: var(--variant-bg);
+      background: transparent;
     }
   }
 }
@@ -2112,6 +2245,7 @@
     flex: 1;
     align-items: center;
     padding: 4px 0;
+    background-color: transparent;
   }
   .prt-date-input-segment {
     outline: none;
@@ -2132,8 +2266,8 @@
       padding: 0 4px;
     }
     &:focus {
-      background: var(--c-solid-hover);
-      color: var(--c-on-solid);
+      background: var(--variant-hover);
+      color: var(--variant-fg);
     }
   }
   .prt-calendar-wrapper {
@@ -2146,6 +2280,7 @@
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--color-border-subtle);
     padding: 12px 16px;
+    color: inherit;
   }
   .prt-calendar-header {
     display: flex;
@@ -2191,7 +2326,7 @@
       background-color: var(--color-gray-100);
     }
     &[data-focus-visible] {
-      color: var(--c-on-solid);
+      color: var(--variant-fg);
       box-shadow: 0 0 0 3px var(--color-focus-ring);
       border: 1.5px solid var(--color-border);
     }
@@ -2203,8 +2338,8 @@
       cursor: not-allowed;
     }
     &[data-selected] {
-      background-color: var(--c-solid-hover);
-      color: var(--c-on-solid);
+      background-color: var(--variant-hover);
+      color: var(--variant-fg);
     }
   }
   .date-field-control {
@@ -2221,8 +2356,8 @@
       color: var(--color-gray-900);
     }
     &[data-selection-start], &[data-selection-end] {
-      background-color: var(--c-solid-hover);
-      color: var(--c-on-solid);
+      background-color: var(--variant-hover);
+      color: var(--variant-fg);
     }
     &[data-selection-start] {
       border-start-start-radius: var(--radius-full);
@@ -2239,7 +2374,8 @@
     gap: calc(var(--spacing) * 2);
   }
   .prt-date-range-sep {
-    color: var(--c-solid);
+    color: var(--variant-bg);
+    background: transparent;
   }
   .prt-date-picker-trigger {
     display: inline-flex;
@@ -2285,7 +2421,7 @@
     }
     .prt-slider-track-fill {
       height: var(--base-track-height);
-      background: var(--c-solid-hover);
+      background: var(--variant-hover);
       border-radius: calc(var(--base-track-height) / 2);
     }
     .prt-slider-thumb {
@@ -2297,7 +2433,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--c-solid-hover);
+      background: var(--variant-hover);
       transform: none !important;
       box-shadow: var(--shadow-sm);
       .prt-slider-thumb-inner {
@@ -2493,21 +2629,35 @@
     width: 100%;
     border: 1px solid var(--color-border);
     border-radius: var(--prt-radius, var(--radius-lg));
+    background: var(--color-surface);
     overflow: clip;
     outline: none;
     font-size: var(--text-sm);
+    color: var(--color-text-dark);
+    &[data-focus-visible] {
+      outline: 2px solid var(--color-focus-ring);
+      outline-offset: 2px;
+    }
   }
   .prt-table-column {
     text-align: left;
-    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
     font-weight: 500;
-    color: var(--color-gray-700);
+    font-size: var(--text-xs);
+    letter-spacing: 0.02em;
+    color: var(--color-text-light);
     border-bottom: 1px solid var(--color-border);
-    background: var(--color-gray-100);
+    background: var(--color-surface-sunken);
     outline: none;
     cursor: default;
-    &[data-sort-direction] {
-      color: var(--color-gray-900);
+    white-space: nowrap;
+    transition: color 120ms ease;
+    &[aria-sort]:not([aria-sort="none"]), &[data-sort-direction] {
+      color: var(--color-text-dark);
+    }
+    &[data-allows-sorting]:hover {
+      color: var(--color-text-dark);
+      cursor: pointer;
     }
     &[data-focus-visible] {
       outline: 2px solid var(--color-focus-ring);
@@ -2522,24 +2672,39 @@
   .prt-table-sort-indicator {
     display: inline-flex;
     align-items: center;
+    color: var(--color-primary);
   }
   .prt-table-row {
     outline: none;
-    color: var(--color-gray-900);
+    color: var(--color-text-dark);
+    transition: background-color 120ms ease;
     &[data-hovered] {
       background: var(--color-surface-hover);
     }
     &[data-selected] {
-      background: var(--c-bg-subtle, var(--color-gray-100));
+      background: color-mix(in srgb, oklch(54.6% 0.245 262.881) 8%, #fff);
+      @supports (color: color-mix(in lab, red, red)) {
+        background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface));
+      }
+      &[data-hovered] {
+        background: color-mix(in srgb, oklch(54.6% 0.245 262.881) 12%, #fff);
+        @supports (color: color-mix(in lab, red, red)) {
+          background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface));
+        }
+      }
     }
     &[data-focus-visible] {
       outline: 2px solid var(--color-focus-ring);
       outline-offset: -2px;
     }
+    &[data-disabled] {
+      color: var(--color-text-muted);
+    }
   }
   .prt-table-cell {
-    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
-    border-bottom: 1px solid var(--color-border);
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
+    border-bottom: 1px solid var(--color-border-subtle);
+    vertical-align: middle;
     outline: none;
     .prt-table-row:last-child & {
       border-bottom: none;
@@ -2549,6 +2714,16 @@
       outline-offset: -2px;
     }
   }
+  .prt-table-column.prt-table-selection, .prt-table-cell.prt-table-selection {
+    width: 1%;
+    padding-inline: calc(var(--spacing) * 3.5) 0;
+    white-space: nowrap;
+  }
+  .prt-table-empty {
+    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
+    text-align: center;
+    color: var(--color-text-light);
+  }
 }
 @layer components {
   .prt-timeline-item {
@@ -2603,6 +2778,8 @@
     padding: calc(var(--spacing) * 3);
     border-radius: var(--prt-radius);
     outline: none;
+    background-color: transparent;
+    color: inherit;
     .prt-file-uploader-trigger {
       all: unset;
       display: flex;
@@ -2610,17 +2787,14 @@
       cursor: pointer;
       color: inherit;
     }
+    .prt-file-uploader-content {
+      color: var(--variant-bg);
+      background: transparent;
+    }
     &[data-drop-target] {
       box-shadow: 0 0 0 3px var(--color-focus-ring);
       border-color: var(--color-border);
-      background-color: var(--c-bg-subtle);
-      color: var(--c-solid);
-    }
-    &[data-state="idle"] {
-      color: var(--c-solid);
-    }
-    &[data-state="loading"] {
-      color: var(--c-solid);
+      background-color: var(--variant-bg);
     }
     &[data-state="success"] {
       border-color: var(--color-success);
@@ -2744,6 +2918,237 @@
     }
   }
 }
+@layer components {
+  .prt-toast-region {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    gap: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 4);
+    max-width: 100vw;
+    outline: none;
+    pointer-events: none;
+  }
+  .prt-toast-region-top-left {
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .prt-toast-region-top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: column;
+    align-items: center;
+  }
+  .prt-toast-region-top-right {
+    top: 0;
+    right: 0;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  .prt-toast-region-bottom-left {
+    bottom: 0;
+    left: 0;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+  .prt-toast-region-bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+  .prt-toast-region-bottom-right {
+    bottom: 0;
+    right: 0;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+  .prt-toast {
+    pointer-events: auto;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: start;
+    gap: calc(var(--spacing) * 2);
+    width: 360px;
+    max-width: calc(100vw - calc(var(--spacing) * 8));
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
+    border-radius: var(--prt-radius, var(--radius-lg));
+    box-shadow: var(--shadow-lg);
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-dark);
+    font-size: var(--text-sm);
+    outline: none;
+  }
+  .prt-toast[data-color] {
+    background: var(--c-bg-subtle);
+    border-color: var(--c-bg-muted);
+    color: var(--c-text-strong);
+  }
+  .prt-toast[data-focus-visible] {
+    box-shadow: var(--shadow-lg), 0 0 0 3px var(--color-focus-ring);
+  }
+  .prt-toast-content {
+    display: flex;
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 2.5);
+    min-width: 0;
+  }
+  .prt-toast-icon {
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--c-text);
+  }
+  .prt-toast-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1);
+    min-width: 0;
+  }
+  .prt-toast-title {
+    font-weight: 500;
+    line-height: 1.4;
+  }
+  .prt-toast-description {
+    font-size: var(--text-xs);
+    line-height: 1.45;
+    opacity: 0.8;
+  }
+  .prt-toast-actions {
+    display: flex;
+    gap: calc(var(--spacing) * 2);
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .prt-toast-close {
+    margin-top: calc(var(--spacing) * -1);
+    margin-inline-end: calc(var(--spacing) * -1.5);
+    opacity: 0.6;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  @keyframes prt-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  @keyframes prt-toast-in-bottom {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  .prt-toast {
+    animation: prt-toast-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
+  }
+  .prt-toast[data-position^="bottom"] {
+    animation-name: prt-toast-in-bottom;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .prt-toast {
+      animation: none;
+    }
+  }
+}
+@layer components {
+  .prt-tooltip {
+    --tooltip-bg: var(--color-gray-900);
+    z-index: 60;
+    max-width: 260px;
+    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
+    border-radius: var(--prt-radius, var(--radius-md));
+    background: var(--tooltip-bg);
+    color: var(--color-gray-50);
+    box-shadow: var(--shadow-md);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: center;
+    outline: none;
+    transform-origin: var(--trigger-anchor-point);
+  }
+  .prt-tooltip-arrow svg {
+    display: block;
+    fill: var(--tooltip-bg);
+  }
+  .prt-tooltip[data-placement="bottom"] .prt-tooltip-arrow svg {
+    transform: rotate(180deg);
+  }
+  .prt-tooltip[data-placement="left"] .prt-tooltip-arrow svg {
+    transform: rotate(-90deg);
+  }
+  .prt-tooltip[data-placement="right"] .prt-tooltip-arrow svg {
+    transform: rotate(90deg);
+  }
+  @keyframes prt-tooltip-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+  @keyframes prt-tooltip-out {
+    to {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+  .prt-tooltip[data-entering] {
+    animation: prt-tooltip-in 130ms ease;
+  }
+  .prt-tooltip[data-exiting] {
+    animation: prt-tooltip-out 100ms ease;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .prt-tooltip[data-entering], .prt-tooltip[data-exiting] {
+      animation: none;
+    }
+  }
+}
+@layer components {
+  .prt-popover-content {
+    background: var(--color-surface-raised);
+    color: var(--color-text-dark);
+    border: 1px solid var(--color-border);
+    border-radius: var(--prt-radius, var(--radius-lg));
+    box-shadow: var(--shadow-sm);
+  }
+  @keyframes prt-popover-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+  }
+  @keyframes prt-popover-out {
+    to {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+  }
+  .prt-popover[data-entering] {
+    animation: prt-popover-in 140ms ease;
+  }
+  .prt-popover[data-exiting] {
+    animation: prt-popover-out 100ms ease;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .prt-popover[data-entering], .prt-popover[data-exiting] {
+      animation: none;
+    }
+  }
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;

package/package.json

@@ -10,7 +10,7 @@
     "components",
     "parrot"
   ],
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "source": "src/index.ts",
   "publishConfig": {
     "access": "public",
@@ -95,10 +95,10 @@
     "@internationalized/date": "^3.12.2",
     "@react-aria/color": "^3.2.1",
     "@react-stately/color": "^3.10.1",
+    "input-otp": "^1.4.2",
     "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
-    "react-stately": "^3.48.0",
-    "tailwind-merge": "^3.6.0"
+    "react-stately": "^3.48.0"
   },
   "packageManager": "bun@1.2.23",
   "engines": {