@granularjs/ui 0.1.3 → 0.3.0

package/src/theme/styles.js

@@ -112,6 +112,7 @@ const css = `
   --g-ui-gray-100: #f2f4f7;
   --g-ui-gray-200: #e4e7ec;
   --g-ui-gray-300: #cdd1d9;
+  --g-ui-gray-350: #b2b7c3;
   --g-ui-gray-400: #98a2b3;
   --g-ui-gray-500: #667085;
   --g-ui-gray-600: #475467;
@@ -409,6 +410,11 @@ const css = `
   --g-ui-primary-strong: var(--g-ui-primary-active);
   --g-ui-shadow: var(--g-ui-shadow-md);
   
+  /* Overlays (themeable) */
+  --g-ui-overlay-light: rgba(0,0,0,0.4);
+  --g-ui-overlay-normal: rgba(0,0,0,0.6);
+  --g-ui-overlay-dark: rgba(0,0,0,0.8);
+
   /* Misc */
   --g-ui-radius: 4px;
   --g-ui-font: 'Inter', 'Arimo', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -504,7 +510,7 @@ const css = `
   --g-ui-text: var(--g-ui-fg);
   --g-ui-muted: var(--g-ui-fg-muted);
   
-  --g-ui-border: var(--g-ui-gray-200);
+  --g-ui-border: var(--g-ui-gray-350);
   --g-ui-border-subtle: var(--g-ui-gray-100);
   --g-ui-border-muted: var(--g-ui-gray-200);
   --g-ui-border-emphasized: var(--g-ui-gray-300);
@@ -629,6 +635,13 @@ const css = `
   --g-ui-shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   --g-ui-shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
 }
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -728,34 +741,34 @@ body {
   box-shadow: none;
   border: 1px solid var(--g-ui-border);
 }
-.g-ui-card-border-default { border: 1px solid var(--g-ui-border); }
-.g-ui-card-border-none { border: none; }
-.g-ui-card-border-light { border: 1px solid var(--g-ui-border-light); }
-.g-ui-card-border-dark { border: 1px solid var(--g-ui-border-dark); }
-.g-ui-card-border-primary { border: 1px solid var(--g-ui-primary); }
-.g-ui-card-border-success { border: 1px solid var(--g-ui-success); }
-.g-ui-card-border-danger { border: 1px solid var(--g-ui-danger); }
-.g-ui-card-border-warning { border: 1px solid var(--g-ui-warning); }
-.g-ui-card-border-info { border: 1px solid var(--g-ui-info); }
-.g-ui-card-border-subtle { border: 1px solid var(--g-ui-border-subtle); }
-.g-ui-card-border-emphasized { border: 1px solid var(--g-ui-border-emphasized); }
-.g-ui-card-border-inverted { border: 1px solid var(--g-ui-border-inverted); }
-.g-ui-card-border-error { border: 1px solid var(--g-ui-border-error); }
-.g-ui-card-border-warning { border: 1px solid var(--g-ui-border-warning); }
-.g-ui-card-border-success { border: 1px solid var(--g-ui-border-success); }
-.g-ui-card-border-info { border: 1px solid var(--g-ui-border-info); }
-
-.g-ui-card-padding-xs { padding: var(--g-ui-space-10); }
-.g-ui-card-padding-sm { padding: var(--g-ui-space-14); }
-.g-ui-card-padding-md { padding: var(--g-ui-space-18); }
-.g-ui-card-padding-lg { padding: var(--g-ui-space-24); }
-.g-ui-card-radius-sm { border-radius: 8px; }
-.g-ui-card-radius-md { border-radius: 10px; }
-.g-ui-card-radius-lg { border-radius: 14px; }
-.g-ui-card-shadow-none { box-shadow: none; }
-.g-ui-card-shadow-sm { box-shadow: var(--g-ui-shadow-sm); }
-.g-ui-card-shadow-md { box-shadow: var(--g-ui-shadow-md); }
-.g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
+body .g-ui-card-border-default { border: 1px solid var(--g-ui-border); }
+body .g-ui-card-border-none { border: none; }
+body .g-ui-card-border-light { border: 1px solid var(--g-ui-border-light); }
+body .g-ui-card-border-dark { border: 1px solid var(--g-ui-border-dark); }
+body .g-ui-card-border-primary { border: 1px solid var(--g-ui-primary); }
+body .g-ui-card-border-success { border: 1px solid var(--g-ui-success); }
+body .g-ui-card-border-danger { border: 1px solid var(--g-ui-danger); }
+body .g-ui-card-border-warning { border: 1px solid var(--g-ui-warning); }
+body .g-ui-card-border-info { border: 1px solid var(--g-ui-info); }
+body .g-ui-card-border-subtle { border: 1px solid var(--g-ui-border-subtle); }
+body .g-ui-card-border-emphasized { border: 1px solid var(--g-ui-border-emphasized); }
+body .g-ui-card-border-inverted { border: 1px solid var(--g-ui-border-inverted); }
+body .g-ui-card-border-error { border: 1px solid var(--g-ui-border-error); }
+body .g-ui-card-border-warning { border: 1px solid var(--g-ui-border-warning); }
+body .g-ui-card-border-success { border: 1px solid var(--g-ui-border-success); }
+body .g-ui-card-border-info { border: 1px solid var(--g-ui-border-info); }
+
+body .g-ui-card-padding-xs { padding: var(--g-ui-space-10); }
+body .g-ui-card-padding-sm { padding: var(--g-ui-space-14); }
+body .g-ui-card-padding-md { padding: var(--g-ui-space-18); }
+body .g-ui-card-padding-lg { padding: var(--g-ui-space-24); }
+body .g-ui-card-radius-sm { border-radius: 8px; }
+body .g-ui-card-radius-md { border-radius: 10px; }
+body .g-ui-card-radius-lg { border-radius: 14px; }
+body .g-ui-card-shadow-none { box-shadow: none; }
+body .g-ui-card-shadow-sm { box-shadow: var(--g-ui-shadow-sm); }
+body .g-ui-card-shadow-md { box-shadow: var(--g-ui-shadow-md); }
+body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
 .g-ui-card-title {
   margin-bottom: var(--g-ui-space-8);
   font-weight: 600;
@@ -1002,15 +1015,15 @@ body {
 .g-ui-modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.6);
+  background: var(--g-ui-overlay-normal);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
 }
-.g-ui-modal-overlay-light { background: rgba(0,0,0,0.4); }
-.g-ui-modal-overlay-normal { background: rgba(0,0,0,0.6); }
-.g-ui-modal-overlay-dark { background: rgba(0,0,0,0.8); }
+.g-ui-modal-overlay-light { background: var(--g-ui-overlay-light); }
+.g-ui-modal-overlay-normal { background: var(--g-ui-overlay-normal); }
+.g-ui-modal-overlay-dark { background: var(--g-ui-overlay-dark); }
 .g-ui-modal-centered { align-items: center; justify-content: center; }
 .g-ui-modal-top { align-items: flex-start; justify-content: center; padding-top: var(--g-ui-space-40); }
 .g-ui-modal-position-top-left { align-items: flex-start; justify-content: flex-start; padding: var(--g-ui-space-40) var(--g-ui-space-20); }
@@ -1159,7 +1172,7 @@ body {
   width: var(--g-ui-switch-thumb, 14px);
   height: var(--g-ui-switch-thumb, 14px);
   border-radius: 50%;
-  background: #fff;
+  background: var(--g-ui-white);
   top: var(--g-ui-switch-offset, 2px);
   left: var(--g-ui-switch-offset, 2px);
   transition: transform .15s ease;
@@ -1200,6 +1213,12 @@ body {
 .g-ui-select-caret {
   color: var(--g-ui-muted);
   font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-ui-select-caret svg{
+  fill: var(--g-ui-muted);
 }
 .g-ui-select-dropdown {
   position: absolute;
@@ -1311,18 +1330,18 @@ body {
   font-size: 13px;
 }
 .g-ui-table-with-border {
-  border: 1px solid var(--g-ui-border-muted);
+  border: 1px solid var(--g-ui-border);
+  outline: 1px solid var(--g-ui-border);
   border-radius: var(--g-ui-radius);
   overflow: hidden;
 }
 .g-ui-table th,
 .g-ui-table td {
-  border-bottom: 1px solid var(--g-ui-border-muted);
   padding: var(--g-ui-space-10) var(--g-ui-space-12);
   text-align: left;
 }
 .g-ui-table th {
-  font-weight: 500;
+  font-weight: 800;
   color: var(--g-ui-muted);
 }
 .g-ui-table-column-borders th,
@@ -1333,6 +1352,13 @@ body {
 .g-ui-table-column-borders td:last-child {
   border-right: 0;
 }
+.g-ui-table-row-borders th,
+.g-ui-table-row-borders td {
+  border-bottom: 1px solid var(--g-ui-border);
+}
+.g-ui-table-row-borders tbody tr:last-child td {
+  border-bottom: 0;
+}
 .g-ui-table-striped tbody tr:nth-child(odd) { background: var(--g-ui-bg-subtle); }
 .g-ui-table-hover tbody tr:hover { background: var(--g-ui-bg-muted); }
 
@@ -1427,9 +1453,9 @@ body {
   inset: 0;
   z-index: 998;
 }
-.g-ui-drawer-overlay-normal { background: rgba(0,0,0,0.6); }
-.g-ui-drawer-overlay-light { background: rgba(0,0,0,0.4); }
-.g-ui-drawer-overlay-dark { background: rgba(0,0,0,0.8); }
+.g-ui-drawer-overlay-normal { background: var(--g-ui-overlay-normal); }
+.g-ui-drawer-overlay-light { background: var(--g-ui-overlay-light); }
+.g-ui-drawer-overlay-dark { background: var(--g-ui-overlay-dark); }
 .g-ui-drawer {
   position: fixed;
   top: 0;
@@ -1494,7 +1520,7 @@ body {
   margin-left: auto;
   border: 0;
   background: transparent;
-  color: var(--g-ui-muted);
+  color: var(--g-ui-fg-muted);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -1512,6 +1538,7 @@ body {
 .g-ui-notification-close svg{
   width: 24px;
   height: 24px;
+  fill: var(--g-ui-fg-muted);
 }
 
 .g-ui-notification-title { font-weight: 500; font-size: 13px; line-height: 1.35; }
@@ -1574,6 +1601,7 @@ body {
   border-radius: 10px;
 }
 
+
 .g-ui-textarea {
   min-height: 120px;
   resize: vertical;
@@ -1595,24 +1623,25 @@ body {
 .g-ui-number-field-controls {
   display: flex;
   flex-direction: column;
-  gap: var(--g-ui-space-2);
   margin-left: auto;
+  width: 30px;
 }
 .g-ui-number-field-control {
-  width: 18px;
-  height: 18px;
-  border-radius: 6px;
+  width: 100%;
+  height: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--g-ui-border);
-  background: var(--g-ui-bg);
+  background: transparent;
   color: var(--g-ui-text);
   cursor: pointer;
   user-select: none;
   font-size: 12px;
   line-height: 1;
 }
+.g-ui-number-field-control:first-child {
+  border-bottom: 1px solid var(--g-ui-border);
+}
 .g-ui-number-field-control:hover {
   background: var(--g-ui-bg-subtle);
 }
@@ -1880,10 +1909,10 @@ body {
 .g-ui-slider {
   width: 100%;
   --g-ui-slider-size: 8px;
-  height: calc(var(--g-ui-slider-size) * 2);
-  padding: 0 var(--g-ui-slider-size);
-  display: flex;
-  align-items: center;
+  /* height: calc(var(--g-ui-slider-size) * 2); */
+  padding: 0 var(--g-ui-space-10);
+  /* display: flex; */
+  /* align-items: center; */
   position: relative;
 }
 .g-ui-range-slider {
@@ -1923,13 +1952,16 @@ body {
 }
 .g-ui-slider-marks {
   position: absolute;
-  top: calc(100% + var(--g-ui-space-10));
+  top: calc(100% - var(--g-ui-space-8));
   left:10px;
   right:15px;
-  height: 18px;
+  height: 12px;
   box-sizing: border-box;
   padding: 0 var(--g-ui-slider-size);
 }
+.g-ui-slider-marks-placeholder {
+  height: 18px;
+}
 .g-ui-slider-mark {
   position: absolute;
   top: 0;
@@ -2100,6 +2132,32 @@ body {
   display: flex;
   flex-direction: column;
   gap: 0;
+  position: relative;
+}
+.g-ui-timeline-track-segment {
+  position: absolute;
+  left: 8px;
+  width: 4px;
+  background: var(--g-ui-border-muted);
+  border-radius: 2px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.g-ui-timeline-track-segment .g-ui-timeline-track-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 0%;
+  min-height: 0;
+  background: var(--g-ui-primary);
+  border-radius: 2px;
+  transition: height 0.25s ease;
+  z-index: 1;
+}
+.g-ui-timeline-has-track .g-ui-timeline-item::before {
+  display: none;
 }
 .g-ui-timeline-item {
   display: grid;
@@ -2108,6 +2166,7 @@ body {
   align-items: start;
   position: relative;
   padding-bottom: var(--g-ui-space-24);
+  z-index: 1;
 }
 .g-ui-timeline-item:last-child {
   padding-bottom: 0;
@@ -2129,10 +2188,30 @@ body {
   height: 20px;
   border-radius: 50%;
   background: var(--g-ui-bg);
-  border: 4px solid var(--g-ui-primary);
+  border: 4px solid var(--g-ui-border-muted);
   margin-top: 0;
   position: relative;
   z-index: 1;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.g-ui-timeline-item-completed .g-ui-timeline-dot {
+  border-color: var(--g-ui-primary);
+  background: var(--g-ui-primary);
+}
+.g-ui-timeline-item-active .g-ui-timeline-dot {
+  border-color: var(--g-ui-primary);
+  background: var(--g-ui-bg);
+  box-shadow: 0 0 0 2px var(--g-ui-bg), 0 0 0 4px var(--g-ui-primary);
+}
+.g-ui-timeline-item-future .g-ui-timeline-dot {
+  border-color: var(--g-ui-border-muted);
+  background: var(--g-ui-bg);
+}
+.g-ui-timeline-clickable .g-ui-timeline-item {
+  cursor: pointer;
+}
+.g-ui-timeline-clickable .g-ui-timeline-item:hover .g-ui-timeline-dot {
+  border-color: var(--g-ui-primary-muted, var(--g-ui-primary));
 }
 .g-ui-timeline-content {
   display: flex;
@@ -2938,16 +3017,43 @@ body {
 }
 
 .g-ui-progress-ring {
+  position: relative;
   width: 48px;
   height: 48px;
   border-radius: 50%;
+  flex-shrink: 0;
+}
+.g-ui-progress-ring-hole {
+  position: absolute;
+  inset: 8px;
+  border-radius: 50%;
+  background: var(--g-ui-bg);
+}
+.g-ui-progress-ring-primary { --g-ui-progress-ring-fill: var(--g-ui-primary); }
+.g-ui-progress-ring-success { --g-ui-progress-ring-fill: var(--g-ui-success); }
+.g-ui-progress-ring-danger { --g-ui-progress-ring-fill: var(--g-ui-danger); }
+.g-ui-progress-ring-warning { --g-ui-progress-ring-fill: var(--g-ui-warning); }
+.g-ui-progress-ring:not(.g-ui-progress-ring-indeterminate) {
+  background: conic-gradient(
+    var(--g-ui-progress-ring-fill, var(--g-ui-primary)) 0deg calc(var(--g-ui-progress-ring-value, 0) * 3.6deg),
+    var(--g-ui-border-muted) calc(var(--g-ui-progress-ring-value, 0) * 3.6deg) 360deg
+  );
+}
+.g-ui-progress-ring-indeterminate {
   border: 4px solid var(--g-ui-border-muted);
-  border-top-color: var(--g-ui-primary);
+  border-top-color: var(--g-ui-progress-ring-fill, var(--g-ui-primary));
   animation: g-ui-spin 1s linear infinite;
 }
+.g-ui-progress-ring-indeterminate .g-ui-progress-ring-hole {
+  inset: 4px;
+}
 .g-ui-progress-ring-size-sm { width: 32px; height: 32px; }
+.g-ui-progress-ring-size-sm .g-ui-progress-ring-hole { inset: 6px; }
+.g-ui-progress-ring-size-sm.g-ui-progress-ring-indeterminate .g-ui-progress-ring-hole { inset: 3px; }
 .g-ui-progress-ring-size-md { width: 48px; height: 48px; }
 .g-ui-progress-ring-size-lg { width: 64px; height: 64px; }
+.g-ui-progress-ring-size-lg .g-ui-progress-ring-hole { inset: 10px; }
+.g-ui-progress-ring-size-lg.g-ui-progress-ring-indeterminate .g-ui-progress-ring-hole { inset: 5px; }
 
 .g-ui-toast-close {
   margin-left: auto;
@@ -2956,6 +3062,11 @@ body {
   color: var(--g-ui-muted);
   cursor: pointer;
 }
+.g-ui-toast-close svg {
+  width: 16px;
+  height: 16px;
+  fill: var(--g-ui-muted);
+}
 
 .g-ui-toast-row {
   display: flex;
@@ -2963,6 +3074,43 @@ body {
   gap: var(--g-ui-space-8);
 }
 
+.g-ui-autocomplete {
+  position: relative;
+  width: 100%;
+}
+.g-ui-autocomplete-dropdown {
+  position: absolute;
+  top: calc(100% + var(--g-ui-space-4));
+  left: 0;
+  right: 0;
+  z-index: 100;
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  background: var(--g-ui-bg-panel);
+  box-shadow: var(--g-ui-shadow-md);
+}
+.g-ui-autocomplete-list {
+  overflow: auto;
+  padding: var(--g-ui-space-4);
+}
+.g-ui-autocomplete-item {
+  padding: var(--g-ui-space-6) var(--g-ui-space-8);
+  border-radius: var(--g-ui-radius);
+  cursor: pointer;
+  font-size: var(--g-ui-font-size-sm);
+}
+.g-ui-autocomplete-item:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-autocomplete-item-active {
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+}
+.g-ui-autocomplete-disabled {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
 .g-ui-select-search {
   display: flex;
   flex-direction: column;
@@ -2980,6 +3128,7 @@ body {
   justify-content: center;
   color: var(--g-ui-muted);
   font-size: 16px;
+  fill: var(--g-ui-muted);
 }
 .g-ui-search-input-left-section svg {
   width: 100%;
@@ -3024,8 +3173,15 @@ body {
 
 .g-ui-range-picker {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--g-ui-space-12);
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--g-ui-space-8);
+  align-items: center;
+}
+.g-ui-range-picker-separator {
+  color: var(--g-ui-fg-muted);
+  font-size: var(--g-ui-font-size-sm);
+  line-height: 1;
+  flex-shrink: 0;
 }
 
 .g-ui-toast-auto {
@@ -3157,7 +3313,7 @@ body {
 .g-ui-loading-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(15,17,21,0.6);
+  background: var(--g-ui-overlay-normal);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3677,7 +3833,7 @@ body {
   position: fixed;
   inset: 0;
   z-index: 998;
-  background: rgba(0,0,0,0.6);
+  background: var(--g-ui-overlay-normal);
   opacity: 0;
   pointer-events: none;
   transition: opacity .22s ease, backdrop-filter .22s ease;

package/types/components/Autocomplete.d.ts

@@ -0,0 +1 @@
+export function Autocomplete(...args: any[]): any;

package/types/components/RadioGroup.d.ts

@@ -1 +1,2 @@
 export function RadioGroup(...args: any[]): any;
+export const radioGroupContext: any;

package/types/components/SwitchGroup.d.ts

@@ -1 +1,2 @@
 export function SwitchGroup(...args: any[]): any;
+export const switchGroupContext: any;

package/types/index.d.ts

@@ -70,6 +70,7 @@ export { SearchInput } from "./components/SearchInput.js";
 export { CopyButton } from "./components/CopyButton.js";
 export { ProgressRing } from "./components/ProgressRing.js";
 export { Toast } from "./components/Toast.js";
+export { Autocomplete } from "./components/Autocomplete.js";
 export { SelectSearch } from "./components/SelectSearch.js";
 export { SwitchGroup } from "./components/SwitchGroup.js";
 export { RangePicker } from "./components/RangePicker.js";

package/types/theme/icons.d.ts

@@ -8,3 +8,4 @@ export const plusSvg: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\"
 export const editSvg: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm280-360v-80h240v80H480Zm0 160v-80h320v80H480Zm0 160v-80h320v80H480ZM360-360v-80h80v80h-80Zm0 160v-80h80v80h-80Zm0 160v-80h80v80h-80Zm160-320h280l-36-37 37-37v74H520Zm-160 0h80v-80h-80v80ZM120-600v-160l160-160h160l-80 80H200v240h-80Zm80-240v-80 80Z\"/></svg>";
 export const deleteSvg: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\"><path d=\"M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z\"/></svg>";
 export const calendarTodaySvg: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\"><path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z\"/></svg>";
+export const keyboardArrowDownSvg: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\"/></svg>";