@openwarelabs/ui 0.1.0 → 0.2.0

package/dist/styles.css

@@ -82,6 +82,7 @@
     --ow-key-ground: var(--ow-gray-50);
     --ow-track: var(--ow-gray-100);
     --ow-thumb: #ffffff;
+    --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
     --ow-code-block: #15171c;
@@ -158,6 +159,7 @@
     --ow-key-ground: #22262e;
     --ow-track: #14161b;
     --ow-thumb: #2f3541;
+    --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
     --ow-code-block-border: #2c313a;
@@ -230,6 +232,7 @@
         --ow-key-ground: #22262e;
         --ow-track: #14161b;
         --ow-thumb: #2f3541;
+        --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
         --ow-code-block-border: #2c313a;
@@ -467,6 +470,7 @@
    back into it. useFloating sets data-side and --ow-floating-origin; usePresence sets data-state. */
 .ow-floating {
     --ow-floating-shift: -4px;
+    --ow-floating-shift-x: 0px;
     transform-origin: var(--ow-floating-origin, top center);
 }
 
@@ -474,6 +478,16 @@
     --ow-floating-shift: 4px;
 }
 
+.ow-floating[data-side="left"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: 4px;
+}
+
+.ow-floating[data-side="right"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: -4px;
+}
+
 .ow-floating[data-state="open"] {
     animation: ow-floating-in var(--ow-duration-base) var(--ow-ease-emphasized);
 }
@@ -486,14 +500,14 @@
 @keyframes ow-floating-in {
     from {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.96);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.96);
     }
 }
 
 @keyframes ow-floating-out {
     to {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.97);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.97);
     }
 }
 
@@ -869,7 +883,7 @@
     border-bottom-right-radius: 0;
 }
 
-/* CloseButton: Commandr's dialog close, a quiet square that darkens on hover. */
+/* CloseButton: a quiet square that darkens on hover, for dialogs and panels. */
 .ow-close-button {
     display: inline-flex;
     flex-shrink: 0;
@@ -909,7 +923,7 @@
 }
 
 /* components/SegmentedControl/SegmentedControl.css */
-/* SegmentedControl and segmented Tabs: Commandr's journey switcher, a well with the chosen segment raised. */
+/* SegmentedControl and segmented Tabs: a well with the chosen segment raised. */
 .ow-segmented,
 .ow-tabs--segmented .ow-tabs__list {
     position: relative;
@@ -922,6 +936,8 @@
     border-radius: var(--ow-radius-container);
     background: var(--ow-track);
     padding: var(--ow-space-2xs);
+    /* A hairline edge, so the well shows on the canvas as well as on a surface. */
+    box-shadow: inset 0 0 0 1px var(--ow-border);
 }
 
 .ow-segmented--full {
@@ -1225,6 +1241,8 @@
 .ow-input-group {
     display: flex;
     width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
     height: 40px;
     align-items: center;
     gap: var(--ow-space-sm);
@@ -1271,6 +1289,8 @@
 }
 
 .ow-input-group__input {
+    /* A percentage width lets the field's minimum size come from its start and end content alone. */
+    width: 100%;
     min-width: 0;
     height: 100%;
     flex: 1;
@@ -1877,7 +1897,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ow-radius-pill);
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: var(--ow-shadow-control);
     transform: translateX(2px);
     transition:
@@ -1899,7 +1919,7 @@
 }
 
 /* components/Slider/Slider.css */
-/* Slider: native range inputs over a drawn track. The thumb is the switch's knob: white, round, with a soft shadow. */
+/* Slider: native range inputs over a drawn track. The thumb is the switch's knob (ow-knob): round, with a soft shadow. */
 .ow-slider {
     display: grid;
     gap: var(--ow-space-sm);
@@ -1990,7 +2010,7 @@
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2003,7 +2023,7 @@
     height: 18px;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2209,7 +2229,7 @@
 }
 
 /* components/FileDropZone/FileDropZone.css */
-/* FileDropZone: Commandr's folder drop zone, a dashed well that turns primary while something is dragged over it. */
+/* FileDropZone: a dashed well that turns primary while something is dragged over it. */
 .ow-dropzone {
     display: flex;
     min-height: 128px;
@@ -2551,7 +2571,7 @@
     transition: width var(--ow-duration-slow) var(--ow-ease-standard);
 }
 
-/* Unknown length: a segment sliding across, like Commandr's licence check. */
+/* Unknown length: a segment sliding across. */
 .ow-progress__track--indeterminate .ow-progress__fill {
     width: 37%;
     animation: ow-progress-slide 1.3s var(--ow-ease-standard) infinite;
@@ -2613,7 +2633,7 @@
 }
 
 /* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, above the child (or below when there's no room). */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
     display: inline-flex;
 }
@@ -2769,7 +2789,7 @@
     box-shadow: none;
 }
 
-/* The ✕ sits on the corner, as in Commandr. */
+/* The ✕ sits on the corner. */
 .ow-toaster.ow-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
     width: 22px;
     height: 22px;
@@ -3788,7 +3808,7 @@
 }
 
 /* components/Accordion/Accordion.css */
-/* Disclosure and Accordion: Commandr's change review header, a chevron that turns as the panel opens. */
+/* Disclosure and Accordion: a header with a chevron that turns as the panel opens. */
 .ow-disclosure,
 .ow-accordion--bordered,
 .ow-accordion--separated .ow-accordion__item {
@@ -4127,7 +4147,7 @@
 }
 
 /* components/Steps/Steps.css */
-/* Steps: Commandr's setup checklist (vertical) and a compact strip (horizontal). */
+/* Steps: a setup checklist (vertical) and a compact strip (horizontal). */
 .ow-steps--vertical {
     border: 1px solid var(--ow-border);
     border-radius: var(--ow-radius-container);
@@ -4417,6 +4437,19 @@
     font-size: 13px;
 }
 
+.ow-avatar--xl {
+    width: 48px;
+    height: 48px;
+    font-size: 17px;
+}
+
+/* Any size in pixels, through --ow-avatar-size: the initials stay in proportion. */
+.ow-avatar--custom {
+    width: var(--ow-avatar-size);
+    height: var(--ow-avatar-size);
+    font-size: calc(var(--ow-avatar-size) * 0.36);
+}
+
 .ow-avatar__image {
     width: 100%;
     height: 100%;
@@ -4453,6 +4486,18 @@
     gap: var(--ow-space-md);
 }
 
+.ow-user--xl {
+    gap: var(--ow-space-lg);
+}
+
+.ow-user--xl .ow-user__name {
+    font-size: 15px;
+}
+
+.ow-user--xl .ow-user__description {
+    font-size: 13px;
+}
+
 .ow-user__text {
     display: grid;
     min-width: 0;
@@ -4993,7 +5038,7 @@
 }
 
 /* components/Stat/Stat.css */
-/* Stat: Commandr's overview card. A muted label, a big tabular number, a change and an optional trend line. */
+/* Stat: an overview card. A muted label, a big tabular number, a change and an optional trend line. */
 .ow-stat {
     display: grid;
     min-width: 0;
@@ -5103,7 +5148,7 @@
 }
 
 /* components/FileTree/FileTree.css */
-/* FileTree: Commandr's structure explorer. Monospace names, hairline guides, a tinted selected file. */
+/* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
 .ow-tree,
 .ow-tree__group {
     margin: 0;

package/dist/tailwind.css

@@ -83,6 +83,7 @@
     --color-key-ground: var(--ow-key-ground);
     --color-track: var(--ow-track);
     --color-thumb: var(--ow-thumb);
+    --color-knob: var(--ow-knob);
     --color-meter-track: var(--ow-meter-track);
     --color-progress: var(--ow-progress);
     --color-code-block: var(--ow-code-block);

package/dist/tokens.css

@@ -82,6 +82,7 @@
     --ow-key-ground: var(--ow-gray-50);
     --ow-track: var(--ow-gray-100);
     --ow-thumb: #ffffff;
+    --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
     --ow-code-block: #15171c;
@@ -158,6 +159,7 @@
     --ow-key-ground: #22262e;
     --ow-track: #14161b;
     --ow-thumb: #2f3541;
+    --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
     --ow-code-block-border: #2c313a;
@@ -230,6 +232,7 @@
         --ow-key-ground: #22262e;
         --ow-track: #14161b;
         --ow-thumb: #2f3541;
+        --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
         --ow-code-block-border: #2c313a;