biggerui 1.0.4 → 1.0.6

package/dist/biggerui.css

@@ -1,28 +1,37 @@
 :root {
-  /* Colors */
-  --primary-color: #4338ca;
-  --primary-color-hover: #3d33b8;
-  --primary-color-alpha: rgba(67, 56, 202, 0.4);
+  /* Absolute Colors */
+  --primary-color: oklch(0.4568 0.2146 277); /* #4338ca */
+  --destructive-color: oklch(0.444 0.1610 27); /*#991b1b */
+  --text-color: oklch(0.985 0 0); /* #fafafa; */
+  --background-color-white: oklch(1 0 0); /* #fff; */
+  --background-color-black: oklch(0.2046 0 0); /* #171717;*/
+  --border-color-white: oklch(1 0 0);
+  --border-color-black: oklch(0.2046 0 0); /* #171717;*/
+  --shadow-color: oklch(0.1448 0 0 / 5%); /* rgba(10, 10, 10, 0.05); */
 
-  --destructive-color: #991b1b;
-  --destructive-color-hover: #8a1919;
-  --destructive-color-alpha: rgba(153, 27, 27, 0.4);
+  /* Relative colors */
+  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.03) calc(c - 0.02) h );  /*#3d33b8 */
+  --primary-color-alpha: oklch(from var(--primary-color) l c h / 40%); /* rgba(67, 56, 202, 0.4); */
 
-  --text-color: #fafafa;
-  --text-color-secondary: #d4d4d4;
-  --text-color-placeholder: #737373;
-  --text-color-error: #fecaca;
+  --destructive-color-hover: oklch(from var(--destructive-color) calc(l - 0.03) calc(c - 0.02) h ); /* #8a1919 */
+  --destructive-color-alpha: oklch(from var(--destructive-color) l c h / 40%); /* rgba(153, 27, 27, 0.4); */
 
-  --background-color: #171717;
-  --background-color-light: rgba(250, 250, 250, 0.05);
-  --background-color-light-hover: rgba(250, 250, 250, 0.08);
-  --background-color-overlay: rgba(0, 0, 0, 0.5);
+  --text-color-secondary: oklch(from var(--text-color) calc(l - 0.115) c h ); /* #d4d4d4 */
+  --text-color-placeholder: oklch(from var(--text-color) calc(l - 0.430) c h ); /* #737373 */
+  --text-color-error: oklch(from var(--destructive-color) calc(l + 0.44) calc(c - 0.1) h ); /* #fecaca */
 
-  --border-color: rgba(250, 250, 250, 0.15);
-  --border-color-dark: #404040;
+  --background-color-silver: oklch(from var(--background-color-white) calc(l - 0.03) c h ); /*#f5f5f5 */
 
-  --shadow-color: rgba(10, 10, 10, 0.05);
-  --shadow-color-dark: rgba(10, 10, 10, 0.1);
+  --background-color-light: oklch(from var(--background-color-white) calc(l - 0.015) c h / 5%); /* rgba(250, 250, 250, 0.05); */
+  --background-color-light-hover: oklch(from var(--background-color-white) l c h / 8%); /* rgba(250, 250, 250, 0.08); */
+  --background-color-overlay: oklch(from var(--background-color-black) l c h / 5%); /*  rgba(0, 0, 0, 0.5); */
+
+  --border-color: oklch(from var(--border-color-white) l c h / 15%); /* rgba(250, 250, 250, 0.15); */
+  --border-color-silver: oklch(from var(--border-color-white) calc(l - 0.03) c h ); /* #f5f5f5 */
+  --border-color-dark: oklch(from var(--border-color-black) calc(l + 0.17) c h ); /* #404040; */
+
+  --shadow-color-light: oklch(from var(--shadow-color) calc(l + 0.1448) c h / 45%); /*rgba(115, 115, 115, 0.45);*/
+  --shadow-color-dark: oklch(from var(--shadow-color) l c h / 10%); /* rgba(10, 10, 10, 0.1);
 
   /* Spacing */
   --spacing-xs: 4px;
@@ -57,8 +66,10 @@
   --transition-fast: 150ms;
   --transition-normal: 250ms;
   --transition-slow: 350ms;
+
+  --progress: 0;
 }
-._button_1cxsm_1 {
+._button_12key_1 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -67,7 +78,8 @@
     height: 36px;
     padding: 8px 16px;
     box-sizing: border-box;
-    border-radius: 8px;
+    border-radius: 12px;
+    corner-shape: squircle;
     border: 1px solid transparent;
     font-family: "JetBrains Sans", sans-serif;
     font-size: 14px;
@@ -75,70 +87,133 @@
     line-height: 20px;
     cursor: pointer;
     user-select: none;
-    transition: background 0.15s ease-out, opacity 0.15s ease-out;
+    transition: transform 0.15s ease-out, background 0.15s ease-out, opacity 0.15s ease-out, border-radius 0.15s ease-out, padding 0.15s ease-out;
+}
+
+._button_12key_1:hover {
+  transform: translateY(-1px);
 }
 
-._fullWidth_1cxsm_21 {
+._loader_12key_26 {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-color);
+  flex-shrink: 0;
+  counter-reset: progress var(--progress);
+  transition: transform 0.05s linear;
+  transform: rotate(calc(var(--progress) * 10.8deg));
+}
+
+._loader_12key_26::after {
+  content: counter(progress);
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.8em;
+  font-variant-numeric: tabular-nums;
+  text-align: left;
+}
+
+._loader_12key_26::before {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: conic-gradient(
+      var(--text-color) calc(var(--progress) * 3.6deg),
+      transparent calc(var(--progress) * 3.6deg)
+  );
+
+  -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(50% - 4px),
+      #000 calc(50% - 3px)
+  );
+  mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - 4px),
+      #000 calc(100% - 3px)
+  );
+  transition: background 0.3s ease-out;
+  transform-origin: center;
+  scale: 0.5;
+}
+
+._fullWidth_12key_85 {
     width: 100%;
 }
 
-._default_1cxsm_25 {
+._default_12key_89 {
     background: var(--primary-color);
     color: var(--text-color);
     box-shadow: 0px 1px 2px var(--shadow-color);
 }
-._default_1cxsm_25:hover {
+._default_12key_89:hover {
     background: var(--primary-color-hover);
 }
 
-._destructive_1cxsm_34 {
+._destructive_12key_98 {
     background: var(--destructive-color);
     color: var(--text-color-error);
     box-shadow: 0px 1px 2px var(--shadow-color);
 }
-._destructive_1cxsm_34:hover {
+._destructive_12key_98:hover {
     background: var(--destructive-color-hover);
 }
 
-._secondary_1cxsm_43 {
+._secondary_12key_107 {
     background: var(--background-color-light);
     border-color: var(--border-color);
     color: var(--text-color);
     box-shadow: 0px 1px 2px var(--shadow-color);
 }
-._secondary_1cxsm_43:hover {
+._secondary_12key_107:hover {
     background: var(--background-color-light-hover);
 }
 
-._default_1cxsm_25 {
+._default_12key_89 {
     height: 36px;
     padding: 8px 16px;
 }
 
-._sm_1cxsm_58 {
+._sm_12key_122 {
     height: 32px;
     padding: 6px 12px;
 }
 
-._lg_1cxsm_63 {
+._lg_12key_127 {
     height: 40px;
     padding: 10px 20px;
 }
 
-._iconLeft_1cxsm_68,
-._iconRight_1cxsm_69 {
+._iconLeft_12key_132,
+._iconRight_12key_133 {
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }
 
-._disabled_1cxsm_76 {
+._disabled_12key_140 {
     opacity: 0.5;
     cursor: not-allowed;
 }
 
-._label_1cxsm_81 {
+._label_12key_145 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -243,7 +318,7 @@
         transform: scale(1.25);
     }
 }
-._overlay_oc9ef_1 {
+._overlay_1narp_1 {
     position: fixed;
     inset: 0;
     background: var(--background-color-overlay);
@@ -253,14 +328,14 @@
     justify-content: center;
 }
 
-._content_oc9ef_11 {
+._content_1narp_11 {
     position: relative;
     width: min(720px, 100% - 32px);
     max-height: calc(100vh - 64px);
     padding: 24px;
     box-sizing: border-box;
 
-    background: var(--background-color);
+    background: var(--background-color-black);
     border-radius: 16px;
     border: 1px solid var(--border-color-dark);
     box-shadow: 0px 4px 6px -4px var(--shadow-color-dark);
@@ -271,7 +346,7 @@
     gap: 24px;
 }
 
-._header_oc9ef_29 {
+._header_1narp_29 {
     align-self: stretch;
     border-bottom: 0.5px solid var(--border-color-dark);
     display: flex;
@@ -280,7 +355,7 @@
     padding-bottom: 12px;
 }
 
-._title_oc9ef_38 {
+._title_1narp_38 {
     flex: 1;
     max-width: 1280px;
     font-family: "JetBrains Sans", sans-serif;
@@ -290,7 +365,7 @@
     color: var(--text-color);
 }
 
-._body_oc9ef_48 {
+._body_1narp_48 {
     align-self: stretch;
     display: flex;
     flex-direction: column;
@@ -300,7 +375,7 @@
     color: var(--text-color);
 }
 
-._footer_oc9ef_58 {
+._footer_1narp_58 {
     align-self: stretch;
     padding-top: 32px;
     display: flex;
@@ -308,7 +383,7 @@
     align-items: flex-start;
 }
 
-._closeButton_oc9ef_66 {
+._closeButton_1narp_66 {
     position: absolute;
     top: 12px;
     right: 12px;
@@ -323,14 +398,14 @@
     cursor: pointer;
 }
 
-._closeIcon_oc9ef_81 {
+._closeIcon_1narp_81 {
     position: relative;
     width: 16px;
     height: 16px;
 }
 
-._closeIcon_oc9ef_81::before,
-._closeIcon_oc9ef_81::after {
+._closeIcon_1narp_81::before,
+._closeIcon_1narp_81::after {
     content: "";
     position: absolute;
     left: 7px;
@@ -341,11 +416,11 @@
     border-radius: 2px;
 }
 
-._closeIcon_oc9ef_81::before {
+._closeIcon_1narp_81::before {
     transform: rotate(45deg);
 }
 
-._closeIcon_oc9ef_81::after {
+._closeIcon_1narp_81::after {
     transform: rotate(-45deg);
 }
 ._wrapper_x822s_1 {
@@ -432,7 +507,7 @@
   line-height: 16px;
   color: var(--text-color-error);
 }
-._wrapper_f03cq_1 {
+._wrapper_12upp_1 {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -440,7 +515,7 @@
     position: relative;
 }
 
-._label_f03cq_9 {
+._label_12upp_9 {
     width: 100%;
     color: var(--text-color);
     font-size: 14px;
@@ -450,7 +525,7 @@
     margin-bottom: 8px;
 }
 
-._trigger_f03cq_19 {
+._trigger_12upp_19 {
     width: 100%;
     height: 36px;
     padding: 4px 12px;
@@ -467,11 +542,11 @@
     outline: none;
 }
 
-._triggerOpen_f03cq_36 {
+._triggerOpen_12upp_36 {
     border-color: var(--primary-color);
 }
 
-._value_f03cq_40 {
+._value_12upp_40 {
     flex: 1 1 0;
     display: inline-flex;
     align-items: center;
@@ -483,7 +558,7 @@
     text-align: left;
 }
 
-._placeholder_f03cq_52 {
+._placeholder_12upp_52 {
     flex: 1 1 0;
     font-family: "JetBrains Sans", sans-serif;
     font-size: 14px;
@@ -492,19 +567,19 @@
     text-align: left;
 }
 
-._hint_f03cq_61 {
+._hint_12upp_61 {
     opacity: 0.6;
     font-size: 12px;
     line-height: 16px;
 }
 
-._icon_f03cq_67 {
+._icon_12upp_67 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 
-._dropdown_f03cq_73 {
+._dropdown_12upp_73 {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
@@ -512,8 +587,8 @@
     z-index: 50;
 }
 
-._dropdownInner_f03cq_81 {
-    background: var(--background-color);
+._dropdownInner_12upp_81 {
+    background: var(--background-color-black);
     border-radius: 8px;
     border: 1px solid var(--border-color-dark);
     box-shadow: 0px 2px 4px -2px var(--shadow-color-dark);
@@ -522,7 +597,7 @@
     overflow-y: auto;
 }
 
-._option_f03cq_91 {
+._option_12upp_91 {
     width: 100%;
     padding: 6px 8px;
     border-radius: 6px;
@@ -536,22 +611,22 @@
     cursor: pointer;
 }
 
-._option_f03cq_91:hover {
+._option_12upp_91:hover {
     background: var(--background-color-light);
 }
 
-._optionActive_f03cq_109 {
+._optionActive_12upp_109 {
     background: var(--primary-color);
 }
 
-._optionLabel_f03cq_113 {
+._optionLabel_12upp_113 {
     font-family: "JetBrains Sans", sans-serif;
     font-size: 14px;
     line-height: 20px;
     color: var(--text-color);
 }
 
-._optionHint_f03cq_120 {
+._optionHint_12upp_120 {
     opacity: 0.6;
     font-family: "JetBrains Sans", sans-serif;
     font-size: 12px;

package/dist/biggerui.es.js

@@ -3,20 +3,22 @@ import * as React from 'react';
 import { createContext, useRef, useLayoutEffect, useEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, useState, Fragment as Fragment$1, createElement, forwardRef, Component } from 'react';
 import { createPortal } from 'react-dom';
 
-const button = "_button_1cxsm_1";
-const fullWidth = "_fullWidth_1cxsm_21";
-const destructive = "_destructive_1cxsm_34";
-const secondary = "_secondary_1cxsm_43";
-const sm = "_sm_1cxsm_58";
-const lg = "_lg_1cxsm_63";
-const iconLeft = "_iconLeft_1cxsm_68";
-const iconRight = "_iconRight_1cxsm_69";
-const disabled = "_disabled_1cxsm_76";
-const label$3 = "_label_1cxsm_81";
+const button = "_button_12key_1";
+const loader = "_loader_12key_26";
+const fullWidth = "_fullWidth_12key_85";
+const destructive = "_destructive_12key_98";
+const secondary = "_secondary_12key_107";
+const sm = "_sm_12key_122";
+const lg = "_lg_12key_127";
+const iconLeft = "_iconLeft_12key_132";
+const iconRight = "_iconRight_12key_133";
+const disabled = "_disabled_12key_140";
+const label$3 = "_label_12key_145";
 const styles$5 = {
 	button: button,
+	loader: loader,
 	fullWidth: fullWidth,
-	"default": "_default_1cxsm_25",
+	"default": "_default_12key_89",
 	destructive: destructive,
 	secondary: secondary,
 	sm: sm,
@@ -35,19 +37,23 @@ function Button({
   className = "",
   disabled = false,
   children,
+  loading = false,
+  progress = 0,
   ...props
 }) {
   const classes = [
     styles$5.button,
     styles$5[color],
     styles$5[size],
+    loading ? styles$5.loading : "",
     disabled ? styles$5.disabled : "",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("button", { className: classes, disabled, ...props, children: [
     leftIcon && /* @__PURE__ */ jsx("span", { className: styles$5.iconLeft, children: leftIcon }),
     /* @__PURE__ */ jsx("span", { className: styles$5.label, children }),
-    rightIcon && /* @__PURE__ */ jsx("span", { className: styles$5.iconRight, children: rightIcon })
+    rightIcon && /* @__PURE__ */ jsx("span", { className: styles$5.iconRight, children: rightIcon }),
+    loading && /* @__PURE__ */ jsx("span", { style: { "--progress": progress }, className: styles$5.loader })
   ] });
 }
 
@@ -8710,7 +8716,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             this.eventHandlers = new Map();
             this.hasTreeAnimated = false;
-            this.layoutVersion = 0;
             // Note: Currently only running on root node
             this.updateScheduled = false;
             this.scheduleUpdate = () => this.update();
@@ -8737,7 +8742,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * Frame calculations
              */
             this.resolvedRelativeTargetAt = 0.0;
-            this.linkedParentVersion = 0;
             this.hasProjected = false;
             this.isVisible = true;
             this.animationProgress = 0;
@@ -9091,7 +9095,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const prevLayout = this.layout;
             this.layout = this.measure(false);
-            this.layoutVersion++;
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
@@ -9311,23 +9314,25 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.layout || !(layout || layoutId))
                 return;
             this.resolvedRelativeTargetAt = frameData.timestamp;
-            const relativeParent = this.getClosestProjectingParent();
-            if (relativeParent &&
-                this.linkedParentVersion !== relativeParent.layoutVersion &&
-                !relativeParent.options.layoutRoot) {
-                this.removeRelativeTarget();
-            }
             /**
              * If we don't have a targetDelta but do have a layout, we can attempt to resolve
              * a relativeParent. This will allow a component to perform scale correction
              * even if no animation has started.
              */
             if (!this.targetDelta && !this.relativeTarget) {
-                if (relativeParent && relativeParent.layout) {
-                    this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
+                const relativeParent = this.getClosestProjectingParent();
+                if (relativeParent &&
+                    relativeParent.layout &&
+                    this.animationProgress !== 1) {
+                    this.relativeParent = relativeParent;
+                    this.forceRelativeParentToResolveTarget();
+                    this.relativeTarget = createBox();
+                    this.relativeTargetOrigin = createBox();
+                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
+                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
                 else {
-                    this.removeRelativeTarget();
+                    this.relativeParent = this.relativeTarget = undefined;
                 }
             }
             /**
@@ -9377,13 +9382,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             if (this.attemptToResolveRelativeTarget) {
                 this.attemptToResolveRelativeTarget = false;
+                const relativeParent = this.getClosestProjectingParent();
                 if (relativeParent &&
                     Boolean(relativeParent.resumingFrom) ===
                         Boolean(this.resumingFrom) &&
                     !relativeParent.options.layoutScroll &&
                     relativeParent.target &&
                     this.animationProgress !== 1) {
-                    this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
+                    this.relativeParent = relativeParent;
+                    this.forceRelativeParentToResolveTarget();
+                    this.relativeTarget = createBox();
+                    this.relativeTargetOrigin = createBox();
+                    calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
+                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
                 else {
                     this.relativeParent = this.relativeTarget = undefined;
@@ -9409,18 +9420,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.options.layoutRoot) &&
                 this.layout);
         }
-        createRelativeTarget(relativeParent, layout, parentLayout) {
-            this.relativeParent = relativeParent;
-            this.linkedParentVersion = relativeParent.layoutVersion;
-            this.forceRelativeParentToResolveTarget();
-            this.relativeTarget = createBox();
-            this.relativeTargetOrigin = createBox();
-            calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
-            copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
-        }
-        removeRelativeTarget() {
-            this.relativeParent = this.relativeTarget = undefined;
-        }
         calcProjection() {
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
@@ -10413,13 +10412,13 @@ const featureBundle = {
 
 const motion = /*@__PURE__*/ createMotionProxy(featureBundle, createDomVisualElement);
 
-const overlay = "_overlay_oc9ef_1";
-const content = "_content_oc9ef_11";
-const header = "_header_oc9ef_29";
-const title = "_title_oc9ef_38";
-const body = "_body_oc9ef_48";
-const footer = "_footer_oc9ef_58";
-const closeButton = "_closeButton_oc9ef_66";
+const overlay = "_overlay_1narp_1";
+const content = "_content_1narp_11";
+const header = "_header_1narp_29";
+const title = "_title_1narp_38";
+const body = "_body_1narp_48";
+const footer = "_footer_1narp_58";
+const closeButton = "_closeButton_1narp_66";
 const styles$3 = {
 	overlay: overlay,
 	content: content,
@@ -10569,20 +10568,20 @@ const Input = ({
   ] });
 };
 
-const wrapper$1 = "_wrapper_f03cq_1";
-const label$1 = "_label_f03cq_9";
-const trigger = "_trigger_f03cq_19";
-const triggerOpen = "_triggerOpen_f03cq_36";
-const value = "_value_f03cq_40";
-const placeholder = "_placeholder_f03cq_52";
-const hint = "_hint_f03cq_61";
-const icon = "_icon_f03cq_67";
-const dropdown = "_dropdown_f03cq_73";
-const dropdownInner = "_dropdownInner_f03cq_81";
-const option = "_option_f03cq_91";
-const optionActive = "_optionActive_f03cq_109";
-const optionLabel = "_optionLabel_f03cq_113";
-const optionHint = "_optionHint_f03cq_120";
+const wrapper$1 = "_wrapper_12upp_1";
+const label$1 = "_label_12upp_9";
+const trigger = "_trigger_12upp_19";
+const triggerOpen = "_triggerOpen_12upp_36";
+const value = "_value_12upp_40";
+const placeholder = "_placeholder_12upp_52";
+const hint = "_hint_12upp_61";
+const icon = "_icon_12upp_67";
+const dropdown = "_dropdown_12upp_73";
+const dropdownInner = "_dropdownInner_12upp_81";
+const option = "_option_12upp_91";
+const optionActive = "_optionActive_12upp_109";
+const optionLabel = "_optionLabel_12upp_113";
+const optionHint = "_optionHint_12upp_120";
 const styles$1 = {
 	wrapper: wrapper$1,
 	label: label$1,