@cladd-ui/react 0.0.1 → 0.0.2

package/styles/safe-areas.css

@@ -0,0 +1,192 @@
+:root {
+  --safe-area-left: 0px;
+  --safe-area-right: 0px;
+  --safe-area-top: 0px;
+  --safe-area-bottom: 0px;
+}
+
+@supports (left: env(safe-area-inset-left)) {
+  .safe-areas,
+  #__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);
+  }
+}
+.no-safe-areas {
+  --safe-area-left: 0px;
+  --safe-area-right: 0px;
+  --safe-area-top: 0px;
+  --safe-area-bottom: 0px;
+}
+.no-safe-areas-top {
+  --safe-area-top: 0px;
+}
+.no-safe-areas-left {
+  --safe-area-left: 0px;
+}
+.no-safe-areas-right {
+  --safe-area-right: 0px;
+}
+.no-safe-areas-bottom {
+  --safe-area-bottom: 0px;
+}
+.pl-safe {
+  padding-left: var(--safe-area-left);
+}
+.pr-safe {
+  padding-right: var(--safe-area-right);
+}
+.pt-safe {
+  padding-top: var(--safe-area-top);
+}
+.pb-safe {
+  padding-bottom: var(--safe-area-bottom);
+}
+.ml-safe {
+  margin-left: var(--safe-area-left);
+}
+.mr-safe {
+  margin-right: var(--safe-area-right);
+}
+.mt-safe {
+  margin-top: var(--safe-area-top);
+}
+.mb-safe {
+  margin-bottom: var(--safe-area-bottom);
+}
+.left-safe {
+  left: var(--safe-area-left);
+}
+.right-safe {
+  right: var(--safe-area-right);
+}
+.top-safe {
+  top: var(--safe-area-top);
+}
+.bottom-safe {
+  bottom: var(--safe-area-bottom);
+}
+
+@utility ml-safe-* {
+  margin-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+}
+
+@utility mr-safe-* {
+  margin-right: calc(var(--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));
+}
+@utility mt-safe-* {
+  margin-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+}
+@utility mb-safe-* {
+  margin-bottom: calc(
+    var(--safe-area-bottom) + var(--spacing) * --value(number)
+  );
+}
+@utility my-safe-* {
+  margin-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  margin-bottom: calc(
+    var(--safe-area-bottom) + var(--spacing) * --value(number)
+  );
+}
+@utility scroll-ml-safe-* {
+  scroll-margin-left: calc(
+    var(--safe-area-left) + var(--spacing) * --value(number)
+  );
+}
+@utility scroll-mr-safe-* {
+  scroll-margin-right: calc(
+    var(--safe-area-right) + var(--spacing) * --value(number)
+  );
+}
+@utility scroll-mt-safe-* {
+  scroll-margin-top: calc(
+    var(--safe-area-top) + var(--spacing) * --value(number)
+  );
+}
+@utility scroll-mb-safe-* {
+  scroll-margin-bottom: calc(
+    var(--safe-area-bottom) + var(--spacing) * --value(number)
+  );
+}
+@utility pl-safe-* {
+  padding-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+}
+@utility pr-safe-* {
+  padding-right: calc(
+    var(--safe-area-right) + var(--spacing) * --value(number)
+  );
+}
+@utility px-safe-* {
+  padding-left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+  padding-right: calc(
+    var(--safe-area-right) + var(--spacing) * --value(number)
+  );
+}
+@utility pt-safe-* {
+  padding-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+}
+@utility pb-safe-* {
+  padding-bottom: calc(
+    var(--safe-area-bottom) + var(--spacing) * --value(number)
+  );
+}
+@utility py-safe-* {
+  padding-top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+  padding-bottom: calc(
+    var(--safe-area-bottom) + var(--spacing) * --value(number)
+  );
+}
+@utility left-safe-* {
+  left: calc(var(--safe-area-left) + var(--spacing) * --value(number));
+}
+@utility right-safe-* {
+  right: calc(var(--safe-area-right) + var(--spacing) * --value(number));
+}
+@utility top-safe-* {
+  top: calc(var(--safe-area-top) + var(--spacing) * --value(number));
+}
+@utility bottom-safe-* {
+  bottom: calc(var(--safe-area-bottom) + var(--spacing) * --value(number));
+}
+@utility -left-safe-* {
+  left: calc(0px - var(--safe-area-left) - var(--spacing) * --value(number));
+}
+@utility -right-safe-* {
+  right: calc(0px - var(--safe-area-right) - var(--spacing) * --value(number));
+}
+@utility -top-safe-* {
+  top: calc(0px - var(--safe-area-top) - var(--spacing) * --value(number));
+}
+@utility -bottom-safe-* {
+  bottom: calc(
+    0px - var(--safe-area-bottom) - var(--spacing) * --value(number)
+  );
+}
+@utility -ml-safe-* {
+  margin-left: calc(
+    0px - var(--safe-area-left) - var(--spacing) * --value(number)
+  );
+}
+@utility -mr-safe-* {
+  margin-right: calc(
+    0px - var(--safe-area-right) - var(--spacing) * --value(number)
+  );
+}
+@utility -mt-safe-* {
+  margin-top: calc(
+    0px - var(--safe-area-top) - var(--spacing) * --value(number)
+  );
+}
+@utility -mb-safe-* {
+  margin-bottom: calc(
+    0px - var(--safe-area-bottom) - var(--spacing) * --value(number)
+  );
+}

package/types.d.ts

@@ -0,0 +1,2 @@
+export type Color = 'neutral' | 'brand' | 'red' | 'pink' | 'purple' | 'blue' | 'cyan' | 'lime' | 'green' | 'yellow' | 'orange' | (string & {});
+//# sourceMappingURL=types.d.ts.map

package/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GACb,SAAS,GACT,OAAO,GACP,KAAK,GACL,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC"}

package/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/ui.css

@@ -0,0 +1,10 @@
+@source './';
+@source './components';
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.light, .light *));
+@import "./styles/colors.css";
+@import "./styles/safe-areas.css";
+@import "./styles/preloader.css";
+@import "./styles/popup.css";
+@import "./styles/range.css";