@cladd-ui/react 0.0.16 → 0.0.17

package/styles/radius.css

@@ -0,0 +1,58 @@
+@theme {
+  --cladd-radius: 8px;
+  --cladd-radius-ratio: calc(var(--cladd-radius) / var(--spacing-cladd-md));
+  --radius-cladd: var(--cladd-radius);
+  --radius-cladd-2xs: calc(var(--cladd-radius-ratio) * var(--spacing-cladd-2xs));
+  --radius-cladd-xs: calc(var(--cladd-radius-ratio) * var(--spacing-cladd-xs));
+  --radius-cladd-sm: calc(var(--cladd-radius-ratio) * var(--spacing-cladd-sm));
+  --radius-cladd-md: var(--cladd-radius);
+  --radius-cladd-lg: calc(var(--cladd-radius-ratio) * var(--spacing-cladd-lg));
+  --radius-cladd-xl: calc(var(--cladd-radius-ratio) * var(--spacing-cladd-xl));
+  --radius-cladd-2xl: calc(var(--cladd-radius-ratio) * var(--spacing-cladd-2xl));
+
+  --radius-cladd-full-2xs: calc(var(--spacing-cladd-2xs) / 2);
+  --radius-cladd-full-xs: calc(var(--spacing-cladd-xs) / 2);
+  --radius-cladd-full-sm: calc(var(--spacing-cladd-sm) / 2);
+  --radius-cladd-full-md: calc(var(--spacing-cladd-md) / 2);
+  --radius-cladd-full-lg: calc(var(--spacing-cladd-lg) / 2);
+  --radius-cladd-full-xl: calc(var(--spacing-cladd-xl) / 2);
+  --radius-cladd-full-2xl: calc(var(--spacing-cladd-2xl) / 2);
+
+  --radius-cladd-wrap-2xs: calc(var(--radius-cladd-2xs) + 4px);
+  --radius-cladd-wrap-xs: calc(var(--radius-cladd-xs) + 4px);
+  --radius-cladd-wrap-sm: calc(var(--radius-cladd-sm) + 4px);
+  --radius-cladd-wrap-md: calc(var(--radius-cladd-md) + 4px);
+  --radius-cladd-wrap-lg: calc(var(--radius-cladd-lg) + 4px);
+  --radius-cladd-wrap-xl: calc(var(--radius-cladd-xl) + 4px);
+  --radius-cladd-wrap-2xl: calc(var(--radius-cladd-2xl) + 4px);
+
+  --radius-cladd-wrap-full-2xs: calc(var(--radius-cladd-full-2xs) + 4px);
+  --radius-cladd-wrap-full-xs: calc(var(--radius-cladd-full-xs) + 4px);
+  --radius-cladd-wrap-full-sm: calc(var(--radius-cladd-full-sm) + 4px);
+  --radius-cladd-wrap-full-md: calc(var(--radius-cladd-full-md) + 4px);
+  --radius-cladd-wrap-full-lg: calc(var(--radius-cladd-full-lg) + 4px);
+  --radius-cladd-wrap-full-xl: calc(var(--radius-cladd-full-xl) + 4px);
+  --radius-cladd-wrap-full-2xl: calc(var(--radius-cladd-full-2xl) + 4px);
+
+  --radius-cladd-focus-2xs: calc(var(--radius-cladd-2xs) + 6px);
+  --radius-cladd-focus-xs: calc(var(--radius-cladd-xs) + 6px);
+  --radius-cladd-focus-sm: calc(var(--radius-cladd-sm) + 6px);
+  --radius-cladd-focus-md: calc(var(--radius-cladd-md) + 6px);
+  --radius-cladd-focus-lg: calc(var(--radius-cladd-lg) + 6px);
+  --radius-cladd-focus-xl: calc(var(--radius-cladd-xl) + 6px);
+  --radius-cladd-focus-2xl: calc(var(--radius-cladd-2xl) + 6px);
+
+  --radius-cladd-focus-full-2xs: calc(var(--radius-cladd-full-2xs) + 6px);
+  --radius-cladd-focus-full-xs: calc(var(--radius-cladd-full-xs) + 6px);
+  --radius-cladd-focus-full-sm: calc(var(--radius-cladd-full-sm) + 6px);
+  --radius-cladd-focus-full-md: calc(var(--radius-cladd-full-md) + 6px);
+  --radius-cladd-focus-full-lg: calc(var(--radius-cladd-full-lg) + 6px);
+  --radius-cladd-focus-full-xl: calc(var(--radius-cladd-full-xl) + 6px);
+  --radius-cladd-focus-full-2xl: calc(var(--radius-cladd-full-2xl) + 6px);
+
+  --radius-cladd-popover: 24px;
+  --radius-cladd-dialog: 24px;
+  --radius-cladd-toast: 24px;
+  --radius-cladd-popup: 24px;
+  --radius-cladd-tooltip: 12px;
+}

package/styles/safe-areas.css

@@ -1,8 +1,8 @@
 :root {
-  --safe-area-left: 0px;
-  --safe-area-right: 0px;
-  --safe-area-top: 0px;
-  --safe-area-bottom: 0px;
+  --cladd-safe-area-left: 0px;
+  --cladd-safe-area-right: 0px;
+  --cladd-safe-area-top: 0px;
+  --cladd-safe-area-bottom: 0px;
 }
 
 @supports (left: env(safe-area-inset-left)) {
@@ -10,183 +10,183 @@
   #__next,
   #root,
   #app {
-    --safe-area-left: env(safe-area-inset-left);
-    --safe-area-right: env(safe-area-inset-right);
-    --safe-area-top: env(safe-area-inset-top);
-    --safe-area-bottom: env(safe-area-inset-bottom);
+    --cladd-safe-area-left: env(safe-area-inset-left);
+    --cladd-safe-area-right: env(safe-area-inset-right);
+    --cladd-safe-area-top: env(safe-area-inset-top);
+    --cladd-safe-area-bottom: env(safe-area-inset-bottom);
   }
 }
 .no-safe-areas {
-  --safe-area-left: 0px;
-  --safe-area-right: 0px;
-  --safe-area-top: 0px;
-  --safe-area-bottom: 0px;
+  --cladd-safe-area-left: 0px;
+  --cladd-safe-area-right: 0px;
+  --cladd-safe-area-top: 0px;
+  --cladd-safe-area-bottom: 0px;
 }
 .no-safe-areas-top {
-  --safe-area-top: 0px;
+  --cladd-safe-area-top: 0px;
 }
 .no-safe-areas-left {
-  --safe-area-left: 0px;
+  --cladd-safe-area-left: 0px;
 }
 .no-safe-areas-right {
-  --safe-area-right: 0px;
+  --cladd-safe-area-right: 0px;
 }
 .no-safe-areas-bottom {
-  --safe-area-bottom: 0px;
+  --cladd-safe-area-bottom: 0px;
 }
 .pl-safe {
-  padding-left: var(--safe-area-left);
+  padding-left: var(--cladd-safe-area-left);
 }
 .pr-safe {
-  padding-right: var(--safe-area-right);
+  padding-right: var(--cladd-safe-area-right);
 }
 .pt-safe {
-  padding-top: var(--safe-area-top);
+  padding-top: var(--cladd-safe-area-top);
 }
 .pb-safe {
-  padding-bottom: var(--safe-area-bottom);
+  padding-bottom: var(--cladd-safe-area-bottom);
 }
 .ml-safe {
-  margin-left: var(--safe-area-left);
+  margin-left: var(--cladd-safe-area-left);
 }
 .mr-safe {
-  margin-right: var(--safe-area-right);
+  margin-right: var(--cladd-safe-area-right);
 }
 .mt-safe {
-  margin-top: var(--safe-area-top);
+  margin-top: var(--cladd-safe-area-top);
 }
 .mb-safe {
-  margin-bottom: var(--safe-area-bottom);
+  margin-bottom: var(--cladd-safe-area-bottom);
 }
 .left-safe {
-  left: var(--safe-area-left);
+  left: var(--cladd-safe-area-left);
 }
 .right-safe {
-  right: var(--safe-area-right);
+  right: var(--cladd-safe-area-right);
 }
 .top-safe {
-  top: var(--safe-area-top);
+  top: var(--cladd-safe-area-top);
 }
 .bottom-safe {
-  bottom: var(--safe-area-bottom);
+  bottom: var(--cladd-safe-area-bottom);
 }
 
 @utility ml-safe-* {
-  margin-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+  margin-left: calc(var(--cladd-safe-area-left) + var(--spacing) * --value(number));
 }
 
 @utility mr-safe-* {
-  margin-right: calc(var(--safe-area-right) + var(--spacing) * --value(number));
+  margin-right: calc(var(--cladd-safe-area-right) + var(--spacing) * --value(number));
 }
 @utility mx-safe-* {
-  margin-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
-  margin-right: calc(var(--safe-area-right) + var(--spacing) * --value(number));
+  margin-left: calc(var(--cladd-safe-area-left) + var(--spacing) * --value(number));
+  margin-right: calc(var(--cladd-safe-area-right) + var(--spacing) * --value(number));
 }
 @utility mt-safe-* {
-  margin-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  margin-top: calc(var(--cladd-safe-area-top) + var(--spacing) * --value(number));
 }
 @utility mb-safe-* {
   margin-bottom: calc(
-    var(--safe-area-bottom) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
   );
 }
 @utility my-safe-* {
-  margin-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  margin-top: calc(var(--cladd-safe-area-top) + var(--spacing) * --value(number));
   margin-bottom: calc(
-    var(--safe-area-bottom) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
   );
 }
 @utility scroll-ml-safe-* {
   scroll-margin-left: calc(
-    var(--safe-area-left) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-left) + var(--spacing) * --value(number)
   );
 }
 @utility scroll-mr-safe-* {
   scroll-margin-right: calc(
-    var(--safe-area-right) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
   );
 }
 @utility scroll-mt-safe-* {
   scroll-margin-top: calc(
-    var(--safe-area-top) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-top) + var(--spacing) * --value(number)
   );
 }
 @utility scroll-mb-safe-* {
   scroll-margin-bottom: calc(
-    var(--safe-area-bottom) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
   );
 }
 @utility pl-safe-* {
-  padding-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+  padding-left: calc(var(--cladd-safe-area-left) + var(--spacing) * --value(number));
 }
 @utility pr-safe-* {
   padding-right: calc(
-    var(--safe-area-right) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
   );
 }
 @utility px-safe-* {
-  padding-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+  padding-left: calc(var(--cladd-safe-area-left) + var(--spacing) * --value(number));
   padding-right: calc(
-    var(--safe-area-right) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
   );
 }
 @utility pt-safe-* {
-  padding-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  padding-top: calc(var(--cladd-safe-area-top) + var(--spacing) * --value(number));
 }
 @utility pb-safe-* {
   padding-bottom: calc(
-    var(--safe-area-bottom) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
   );
 }
 @utility py-safe-* {
-  padding-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  padding-top: calc(var(--cladd-safe-area-top) + var(--spacing) * --value(number));
   padding-bottom: calc(
-    var(--safe-area-bottom) + var(--spacing) * --value(number)
+    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
   );
 }
 @utility left-safe-* {
-  left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+  left: calc(var(--cladd-safe-area-left) + var(--spacing) * --value(number));
 }
 @utility right-safe-* {
-  right: calc(var(--safe-area-right) + var(--spacing) * --value(number));
+  right: calc(var(--cladd-safe-area-right) + var(--spacing) * --value(number));
 }
 @utility top-safe-* {
-  top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  top: calc(var(--cladd-safe-area-top) + var(--spacing) * --value(number));
 }
 @utility bottom-safe-* {
-  bottom: calc(var(--safe-area-bottom) + var(--spacing) * --value(number));
+  bottom: calc(var(--cladd-safe-area-bottom) + var(--spacing) * --value(number));
 }
 @utility -left-safe-* {
-  left: calc(0px - var(--safe-area-left) - var(--spacing) * --value(number));
+  left: calc(0px - var(--cladd-safe-area-left) - var(--spacing) * --value(number));
 }
 @utility -right-safe-* {
-  right: calc(0px - var(--safe-area-right) - var(--spacing) * --value(number));
+  right: calc(0px - var(--cladd-safe-area-right) - var(--spacing) * --value(number));
 }
 @utility -top-safe-* {
-  top: calc(0px - var(--safe-area-top) - var(--spacing) * --value(number));
+  top: calc(0px - var(--cladd-safe-area-top) - var(--spacing) * --value(number));
 }
 @utility -bottom-safe-* {
   bottom: calc(
-    0px - var(--safe-area-bottom) - var(--spacing) * --value(number)
+    0px - var(--cladd-safe-area-bottom) - var(--spacing) * --value(number)
   );
 }
 @utility -ml-safe-* {
   margin-left: calc(
-    0px - var(--safe-area-left) - var(--spacing) * --value(number)
+    0px - var(--cladd-safe-area-left) - var(--spacing) * --value(number)
   );
 }
 @utility -mr-safe-* {
   margin-right: calc(
-    0px - var(--safe-area-right) - var(--spacing) * --value(number)
+    0px - var(--cladd-safe-area-right) - var(--spacing) * --value(number)
   );
 }
 @utility -mt-safe-* {
   margin-top: calc(
-    0px - var(--safe-area-top) - var(--spacing) * --value(number)
+    0px - var(--cladd-safe-area-top) - var(--spacing) * --value(number)
   );
 }
 @utility -mb-safe-* {
   margin-bottom: calc(
-    0px - var(--safe-area-bottom) - var(--spacing) * --value(number)
+    0px - var(--cladd-safe-area-bottom) - var(--spacing) * --value(number)
   );
 }

package/styles/slider.css

@@ -1,17 +1,19 @@
 @layer base {
-  input[type="range"] {
-    appearance: none;
-    background: transparent;
-  }
-  input[type="range"]::-webkit-slider-thumb {
-    background: transparent;
-    border: none;
-    outline: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    box-shadow: none;
-    border-radius: 50%;
-    opacity: 0;
+  .cladd-slider {
+    input[type="range"] {
+      appearance: none;
+      background: transparent;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      background: transparent;
+      border: none;
+      outline: none;
+      appearance: none;
+      width: 20px;
+      height: 20px;
+      box-shadow: none;
+      border-radius: 50%;
+      opacity: 0;
+    }
   }
 }

package/styles/spacing.css

@@ -0,0 +1,20 @@
+@theme {
+  --spacing-cladd-2xs: 16px;
+  --spacing-cladd-xs: 20px;
+  --spacing-cladd-sm: 24px;
+  --spacing-cladd-md: 28px;
+  --spacing-cladd-lg: 32px;
+  --spacing-cladd-xl: 40px;
+  --spacing-cladd-2xl: 48px;
+
+  --spacing-cladd-thumb-xs: 16px;
+  --spacing-cladd-thumb-sm: 20px;
+  --spacing-cladd-thumb-md: 24px;
+
+  --spacing-cladd-nested-xs: calc(var(--spacing-cladd-xs) - 8px);
+  --spacing-cladd-nested-sm: calc(var(--spacing-cladd-sm) - 8px);
+  --spacing-cladd-nested-md: calc(var(--spacing-cladd-md) - 8px);
+  --spacing-cladd-nested-lg: calc(var(--spacing-cladd-lg) - 8px);
+  --spacing-cladd-nested-xl: calc(var(--spacing-cladd-xl) - 8px);
+  --spacing-cladd-nested-2xl: calc(var(--spacing-cladd-2xl) - 8px);
+}

package/styles/spinner.css

@@ -1,16 +1,16 @@
 @layer base {
-  .spinner-wrap {
+  .cladd-spinner-wrap {
     transform-origin: center;
-    animation: spinner-rotate 4s infinite;
+    animation: cladd-spinner-rotate 4s infinite;
   }
-  .spinner-knob {
+  .cladd-spinner-knob {
     transform-origin: left;
     animation:
-      spinner-knob-move 1s infinite,
-      spinner-knob-scale 1s infinite;
+      cladd-spinner-knob-move 1s infinite,
+      cladd-spinner-knob-scale 1s infinite;
   }
 
-  @keyframes spinner-rotate {
+  @keyframes cladd-spinner-rotate {
     0% {
       transform: rotate(0deg);
     }
@@ -33,7 +33,7 @@
     }
   }
 
-  @keyframes spinner-knob-move {
+  @keyframes cladd-spinner-knob-move {
     0%,
     10% {
       translate: 0px;
@@ -48,7 +48,7 @@
     }
   }
 
-  @keyframes spinner-knob-scale {
+  @keyframes cladd-spinner-knob-scale {
     0% {
       scale: 0.9 1;
       transform-origin: left;

package/styles/popup.css

@@ -1,14 +0,0 @@
-@layer base {
-  /* .popup .popup-wrap {
-    transition-duration: 500ms;
-    transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
-  } */
-
-  .popup:not(.popup-opened) .popup-wrap {
-    /* transform: translateY(100vh) scaleX(0.65); */
-
-    /* transition-duration: 200ms; */
-    /* transition-timing-function: ease-in; */
-    /* transition-delay: 0ms; */
-  }
-}