@cladd-ui/react 0.0.1 → 0.0.2

package/package.json

@@ -1,20 +1,38 @@
 {
   "name": "@cladd-ui/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
+  "homepage": "https://cladd.io",
+  "bugs": {
+    "url": "https://github.com/cladd-ui/cladd/issues"
+  },
+  "license": "MIT",
+  "author": "Vladimir Kharlampidi",
   "repository": {
     "type": "git",
     "url": "https://github.com/cladd-ui/cladd.git"
   },
-  "homepage": "https://cladd.io",
-  "author": "Vladimir Kharlampidi",
-  "license": "MIT",
   "type": "module",
-  "bugs": {
-    "url": "https://github.com/cladd-ui/cladd/issues"
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./ui.css": "./ui.css",
+    "./styles/*": "./styles/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "dependencies": {
-    "tailwind-merge": "^3.5.0",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
   }
-}
+}

package/shared/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/shared/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/shared/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/shared/cn.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+//# sourceMappingURL=cn.js.map

package/shared/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../../src/shared/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC/B,CAAC"}

package/shared/next-tick.d.ts

@@ -0,0 +1,2 @@
+export declare const nextTick: (fn: () => void) => void;
+//# sourceMappingURL=next-tick.d.ts.map

package/shared/next-tick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next-tick.d.ts","sourceRoot":"","sources":["../../../src/shared/next-tick.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,GAAI,IAAI,MAAM,IAAI,SAItC,CAAC"}

package/shared/next-tick.js

@@ -0,0 +1,6 @@
+export const nextTick = (fn) => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(fn);
+    });
+};
+//# sourceMappingURL=next-tick.js.map

package/shared/next-tick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"next-tick.js","sourceRoot":"","sources":["../../../src/shared/next-tick.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAc,EAAE,EAAE;IACzC,qBAAqB,CAAC,GAAG,EAAE;QACzB,qBAAqB,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/styles/colors.css

@@ -0,0 +1,403 @@
+@theme {
+  --color-theme: var(--theme);
+  --color-background: var(--background);
+  --color-backdrop: var(--backdrop);
+  --color-primary: var(--primary);
+  --color-on-primary: var(--on-primary);
+  --color-surface: var(--surface);
+  --color-surface-original: var(--surface-original);
+  --color-surface-cut: var(--surface-cut);
+  --color-surface-prev: var(--surface-prev);
+  --color-surface-minus: var(--surface-minus);
+  --color-surface-plus: var(--surface-plus);
+  --color-surface-next: var(--surface-next);
+  --color-on-surface: var(--on-surface);
+  --color-on-surface-dark: var(--on-surface-dark);
+  --color-on-surface-darker: var(--on-surface-darker);
+  --color-on-surface-darkest: var(--on-surface-darkest);
+  --color-surface-white: var(--surface-white);
+  --color-surface-black: var(--surface-black);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-hover-fill: var(--surface-hover-fill);
+  --color-surface-pressed: var(--surface-pressed);
+  --color-background-outline: var(--background-outline);
+  --color-surface-outline: var(--surface-outline);
+  --color-surface-outline-original: var(--surface-outline-original);
+  --color-surface-highlight: var(--surface-highlight);
+
+  --shadow-surface-outline: var(--shadow-surface-outline);
+  --shadow-surface-outline-fill: var(--shadow-surface-outline-fill);
+  --shadow-surface-cut-outline: var(--shadow-surface-cut-outline);
+  --shadow-popover: 0 24px 64px -12px rgb(0 0 0 / 0.5);
+
+  --dark-primary-lightness: 0.95;
+  --dark-primary-chroma: 0.18;
+
+  --light-primary-lightness: 0.5;
+  --light-primary-chroma: 0.18;
+}
+
+:root,
+.color-neutral {
+  --theme: #fff;
+}
+.color-brand {
+  --theme: #d7ff38;
+}
+.color-red {
+  --theme: #ff0b0b;
+}
+.color-pink {
+  --theme: #ff0bac;
+}
+.color-purple {
+  --theme: #a20bff;
+}
+.color-blue {
+  --theme: #0047ff;
+}
+.color-cyan {
+  --theme: #00f9ff;
+}
+.color-lime {
+  --theme: #7dff0b;
+}
+.color-green {
+  --theme: #0bff23;
+}
+.color-yellow {
+  --theme: #fff800;
+}
+.color-orange {
+  --theme: #ff7a00;
+}
+/* DEFAULT */
+:root,
+.color-neutral {
+  --background: #0f0f0f;
+  --backdrop: #000;
+  --primary: oklch(from var(--theme) var(--dark-primary-lightness) 0 h);
+  --on-primary: oklch(from var(--theme) 0.2 0 h);
+  --surface: oklch(from var(--theme) 0.21 0 h);
+  --surface-original: oklch(from var(--theme) 0.21 0 h);
+  --surface-cut: oklch(from var(--theme) 0.17 0 h);
+  --surface-cut-original: oklch(from var(--theme) 0.17 0 h);
+  --on-surface: oklch(from var(--theme) 0.9 0 h);
+  --on-surface-dark: oklch(from var(--theme) 0.65 0 h);
+  --on-surface-darker: oklch(from var(--theme) 0.5 0 h);
+  --on-surface-darkest: oklch(from var(--theme) 0.4 0 h);
+  --surface-white: oklch(from var(--theme) 1 0 h);
+  --surface-black: oklch(from var(--theme) 0 0 h);
+  --background-outline: oklch(from var(--theme) 0.23 0 h);
+  --surface-outline: oklch(from var(--theme) 0.3 0 h);
+  --surface-outline-original: oklch(from var(--theme) 0.3 0 h);
+
+  --surface-hover: color-mix(in oklab, var(--surface-white) 5%, transparent);
+  --surface-pressed: color-mix(in oklab, var(--surface-white) 3%, transparent);
+  --surface-hover-fill: color-mix(
+    in oklab,
+    var(--surface-white) 20%,
+    transparent
+  );
+
+  --surface-mix-color: var(--surface-white);
+  --surface-mix-amount: 6%;
+
+  --shadow-surface-cut-outline:
+    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 2%, transparent)
+      inset,
+    0px 0px 0px 1px color-mix(in oklab, var(--surface-white) 7%, transparent)
+      inset;
+
+  --shadow-surface-outline:
+    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 9%, transparent)
+      inset,
+    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 8%, transparent)
+      inset;
+
+  --shadow-surface-outline-fill:
+    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 20%, transparent)
+      inset,
+    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 20%, transparent)
+      inset;
+}
+
+/* COLORS */
+[class*="color-"]:not(.color-neutral) {
+  --background: oklch(from var(--theme) 0.15 0.02 h);
+  --backdrop: #000;
+  --primary: oklch(
+    from var(--theme) var(--dark-primary-lightness) var(--dark-primary-chroma) h
+  );
+  --on-primary: oklch(from var(--theme) 0.2 0.05 h);
+  --surface: oklch(from var(--theme) 0.23 0.027 h);
+  --surface-original: oklch(from var(--theme) 0.23 0.027 h);
+  --surface-cut: oklch(from var(--theme) 0.19 0.027 h);
+  --surface-cut-original: oklch(from var(--theme) 0.19 0.027 h);
+  --on-surface: oklch(from var(--theme) 0.9 0.03 h);
+  --on-surface-dark: oklch(from var(--theme) 0.65 0.03 h);
+  --on-surface-darker: oklch(from var(--theme) 0.5 0.03 h);
+  --on-surface-darkest: oklch(from var(--theme) 0.4 0.03 h);
+  --surface-white: oklch(from var(--theme) 0.92 0.05 h);
+  --surface-black: oklch(from var(--theme) 0.08 0.02 h);
+  --background-outline: oklch(from var(--theme) 0.25 0.02 h);
+  --surface-outline: oklch(from var(--theme) 0.28 0.025 h);
+  --surface-outline-original: oklch(from var(--theme) 0.28 0.025 h);
+
+  --surface-hover: color-mix(in oklab, var(--surface-white) 5%, transparent);
+  --surface-pressed: color-mix(in oklab, var(--surface-white) 3%, transparent);
+  --surface-hover-fill: color-mix(
+    in oklab,
+    var(--surface-white) 40%,
+    transparent
+  );
+  --surface-mix-color: var(--surface-white);
+  --surface-mix-amount: 6%;
+
+  --shadow-surface-cut-outline:
+    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 2%, transparent)
+      inset,
+    0px 0px 0px 1px color-mix(in oklab, var(--surface-white) 7%, transparent)
+      inset;
+
+  --shadow-surface-outline:
+    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 9%, transparent)
+      inset,
+    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 8%, transparent)
+      inset;
+  --shadow-surface-outline-fill:
+    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 30%, transparent)
+      inset,
+    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 30%, transparent)
+      inset;
+}
+
+.light,
+.dark .light {
+  --highlight-white-mix: 50%;
+}
+
+/* DEFAULT LIGHT */
+:root.light,
+.dark .light,
+:root .light,
+.light.color-neutral,
+.light .color-neutral,
+.color-neutral .light {
+  --background: #fff;
+  --backdrop: oklch(0.91 0 0);
+  --primary: oklch(from var(--theme) 0.1 0 h);
+  --on-primary: oklch(from var(--theme) 0.96 0 h);
+  --surface: oklch(0.97 0 0);
+  --surface-original: oklch(0.97 0 0);
+  --surface-cut: oklch(from var(--theme) 0.93 0 h);
+  --surface-cut-original: oklch(from var(--theme) 0.93 0 h);
+  --on-surface: oklch(0.32 0 0);
+  --on-surface-dark: oklch(0.5 0 0);
+  --on-surface-darker: oklch(0.65 0 0);
+  --on-surface-darkest: oklch(0.75 0 0);
+  --surface-white: oklch(1 0 0);
+  --surface-black: oklch(0 0 0);
+  --background-outline: oklch(0.89 0 0);
+  --surface-outline: oklch(0.89 0 0);
+  --surface-outline-original: oklch(0.89 0 0);
+
+  --surface-hover: color-mix(in oklab, var(--surface-black) 3%, transparent);
+  --surface-pressed: color-mix(in oklab, var(--surface-white) 6%, transparent);
+
+  --surface-mix-amount: 4%;
+  --surface-mix-color: var(--surface-black);
+
+  --shadow-surface-cut-outline:
+    0.5px 0.5px 0px 0px
+      color-mix(in oklab, var(--surface-black) 10%, transparent) inset,
+    0px 0px 0px 0.5px color-mix(in oklab, var(--surface-black) 5%, transparent)
+      inset;
+  --shadow-surface-outline-fill:
+    0px 0px 0px 0.5px color-mix(in oklab, var(--surface-black) 20%, transparent)
+      inset,
+    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 30%, transparent)
+      inset;
+  &,
+  [class*="surface-level-"] {
+    --shadow-surface-outline:
+      0px 0px 0px 1px var(--color-surface-outline) inset,
+      1.5px 1.5px 0px 0px
+        color-mix(in oklab, var(--surface-white) 60%, transparent) inset;
+  }
+}
+/* COLORS LIGHT */
+.light [class*="color-"]:not(.color-neutral),
+.dark .light [class*="color-"]:not(.color-neutral),
+.light[class*="color-"]:not(.color-neutral) {
+  --background: oklch(0.91 0.015 100);
+  --backdrop: oklch(0.74 0.018 100);
+  --primary: oklch(
+    from var(--theme) var(--light-primary-lightness) var(--light-primary-chroma)
+      h
+  );
+  --on-primary: oklch(from var(--theme) 0.97 0.04 h);
+  --surface: oklch(from var(--theme) 0.97 0.015 h);
+  --surface-original: oklch(from var(--theme) 0.97 0.015 h);
+  --surface-cut: oklch(from var(--theme) 0.93 0.02 h);
+  --surface-cut-original: oklch(from var(--theme) 0.93 0.02 h);
+  --on-surface: oklch(from var(--theme) 0.25 0.015 h);
+  --on-surface-dark: oklch(from var(--theme) 0.5 0.025 h);
+  --on-surface-darker: oklch(from var(--theme) 0.65 0.025 h);
+  --on-surface-darkest: oklch(from var(--theme) 0.75 0.025 h);
+  --surface-white: oklch(from var(--theme) 0.98 0.04 h);
+  --surface-black: oklch(from var(--theme) 0.4 0.07 h);
+  --background-outline: oklch(from var(--theme) 0.74 0.03 h);
+  --surface-outline: oklch(from var(--theme) 0.88 0.025 h);
+  --surface-outline-original: oklch(from var(--theme) 0.88 0.025 h);
+
+  --surface-hover: color-mix(in oklab, var(--surface-black) 6%, transparent);
+  --surface-hover-fill: color-mix(
+    in oklab,
+    var(--surface-white) 10%,
+    transparent
+  );
+  --surface-pressed: color-mix(in oklab, var(--surface-white) 6%, transparent);
+
+  --surface-mix-amount: 5%;
+  --surface-mix-color: var(--surface-black);
+
+  --shadow-surface-cut-outline:
+    0.5px 0.5px 0px 0px
+      color-mix(in oklab, var(--surface-black) 10%, transparent) inset,
+    0px 0px 0px 0.5px color-mix(in oklab, var(--surface-black) 5%, transparent)
+      inset;
+
+  --shadow-surface-outline-fill:
+    0px 0px 0px 1px color-mix(in oklab, var(--surface-black) 40%, transparent)
+      inset,
+    1px 1px 0px 0.25px
+      color-mix(in oklab, var(--surface-white) 30%, transparent) inset;
+
+  &,
+  [class*="surface-level-"] {
+    --shadow-surface-outline:
+      0px 0px 0px 1px var(--color-surface-outline) inset,
+      1.5px 1.5px 0px 0px
+        color-mix(in oklab, var(--surface-white) 80%, transparent) inset;
+  }
+}
+
+/* COMMON */
+.light,
+.dark,
+[class*="color-"] {
+  --color-background: var(--background);
+  --color-primary: var(--primary);
+  --color-on-primary: var(--on-primary);
+  --color-surface-white: var(--surface-white);
+  --color-surface-black: var(--surface-black);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-hover-fill: var(--surface-hover-fill);
+  --color-surface-pressed: var(--surface-pressed);
+  --color-background-outline: var(--background-outline);
+}
+
+/* LEVELS */
+[class*="surface-level-"],
+[class*="color-"] {
+  --surface-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
+    var(--surface-original) 100%
+  );
+  --surface-prev-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) - 1)),
+    var(--surface-original) 100%
+  );
+  --surface-minus-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) - 0.5)),
+    var(--surface-original) 100%
+  );
+  --surface-plus-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) + 0.5)),
+    var(--surface-original) 100%
+  );
+  --surface-next-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) + 1)),
+    var(--surface-original) 100%
+  );
+  --surface-cut-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
+    var(--surface-cut-original) var(--surface-original-mix, 100%)
+  );
+
+  --on-surface-leveled: var(--on-surface);
+  --on-surface-dark-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
+    var(--on-surface-dark) var(--surface-original-mix, 100%)
+  );
+  --on-surface-darker-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
+    var(--on-surface-darker) var(--surface-original-mix, 100%)
+  );
+  --on-surface-darkest-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
+    var(--on-surface-darkest) var(--surface-original-mix, 100%)
+  );
+  --surface-outline-leveled: color-mix(
+    in oklab,
+    var(--surface-mix-color)
+      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
+    var(--surface-outline-original)
+  );
+
+  --color-surface: var(--surface-leveled);
+  --color-surface-prev: var(--surface-prev-leveled);
+  --color-surface-minus: var(--surface-minus-leveled);
+  --color-surface-plus: var(--surface-plus-leveled);
+  --color-surface-next: var(--surface-next-leveled);
+  --color-surface-cut: var(--surface-cut-leveled);
+  --color-surface-outline: var(--surface-outline-leveled);
+  --color-on-surface: var(--on-surface-leveled);
+  --color-on-surface-dark: var(--on-surface-dark-leveled);
+  --color-on-surface-darker: var(--on-surface-darker-leveled);
+  --color-on-surface-darkest: var(--on-surface-darkest-leveled);
+  --color-surface-highlight: color-mix(
+    in oklab,
+    var(--color-surface-white) var(--highlight-white-mix, 3%),
+    var(--color-surface) var(--highlight-original-mix, 100%)
+  );
+}
+.surface-level-1,
+.surface-level-1[class*="color-"] {
+  --surface-multiplier: 0;
+}
+.surface-level-2,
+.surface-level-2[class*="color-"] {
+  --surface-multiplier: 1;
+}
+.surface-level-3,
+.surface-level-3[class*="color-"] {
+  --surface-multiplier: 2;
+}
+.surface-level-4,
+.surface-level-4[class*="color-"] {
+  --surface-multiplier: 3;
+}
+.surface-level-5,
+.surface-level-5[class*="color-"] {
+  --surface-multiplier: 4;
+}

package/styles/popup.css

@@ -0,0 +1,14 @@
+@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; */
+  }
+}

package/styles/preloader.css

@@ -0,0 +1,71 @@
+@layer base {
+  .preloader-wrap {
+    transform-origin: center;
+    animation: preloader-rotate 4s infinite;
+  }
+  .preloader-knob {
+    transform-origin: left;
+    animation:
+      preloader-knob-move 1s infinite,
+      preloader-knob-scale 1s infinite;
+  }
+
+  @keyframes preloader-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    12.5%,
+    25% {
+      transform: rotate(90deg);
+    }
+
+    37.5%,
+    50% {
+      transform: rotate(180deg);
+    }
+    62.5%,
+    75% {
+      transform: rotate(270deg);
+    }
+    87.5%,
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes preloader-knob-move {
+    0%,
+    10% {
+      translate: 0px;
+    }
+    40%,
+    60% {
+      translate: calc(100%);
+    }
+    90%,
+    100% {
+      translate: 0px;
+    }
+  }
+
+  @keyframes preloader-knob-scale {
+    0% {
+      scale: 0.9 1;
+      transform-origin: left;
+    }
+    25% {
+      scale: 1.2 0.95;
+    }
+    50% {
+      scale: 0.9 1;
+      transform-origin: right;
+    }
+    75% {
+      scale: 1.2 0.95;
+    }
+    100% {
+      scale: 0.9 1;
+      transform-origin: left;
+    }
+  }
+}

package/styles/range.css

@@ -0,0 +1,17 @@
+@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;
+  }
+}