@photoroom/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [
@@ -71,6 +71,7 @@
     "sonner": "^1.4.41",
     "tailwind-merge": "^1.6.1",
     "vaul": "^0.9.1",
+    "virtua": "^0.48.6",
     "date-fns": "^2.28.0"
   },
   "peerDependencies": {

package/plugins/colors.js

@@ -197,6 +197,7 @@ module.exports = plugin(({ addBase, addUtilities }) => {
       "--color-misc-border-box-hover": "var(--color-neutral-4)",
       "--color-misc-border-box-down": "var(--color-neutral-5)",
       "--color-misc-border-sidebar": "var(--color-black-alpha-1)",
+      "--color-misc-border-default": "var(--color-neutral-alpha-3)",
       "--color-misc-stack-layer-1": "var(--color-neutral-4)",
       "--color-misc-stack-layer-2": "var(--color-neutral-2)",
       "--color-misc-focus-indicator": "var(--color-accent-alpha-5)",
@@ -363,6 +364,7 @@ module.exports = plugin(({ addBase, addUtilities }) => {
       "--color-misc-border-box-hover": "var(--color-neutral-4)",
       "--color-misc-border-box-down": "var(--color-neutral-5)",
       "--color-misc-border-sidebar": "var(--color-neutral-alpha-2)",
+      "--color-misc-border-default": "var(--color-neutral-alpha-3)",
       "--color-misc-stack-layer-1": "var(--color-neutral-4)",
       "--color-misc-stack-layer-2": "var(--color-neutral-2)",
       "--color-misc-focus-indicator": "var(--color-accent-alpha-5)",

package/plugins/misc.js

@@ -56,6 +56,13 @@ module.exports = plugin(({ addComponents, addUtilities }) => {
     ".misc-border-size-focus-ring": {
       "@apply ring-3": {},
     },
+    // Outer border using box-shadow so it doesn't affect the element's bounding box.
+    // Use this instead of `border border-misc-border` on floating/elevated UI elements
+    // (pills, menus, popovers) to keep the layout size exact and render the correct
+    // semi-transparent misc-border token.
+    ".misc-outer-border": {
+      "@apply ring-1 ring-misc-border": {},
+    },
   });
 
   // Shadow utilities

package/plugins/spacing.js

@@ -35,6 +35,16 @@ module.exports = plugin(({ addUtilities }) => {
           [`@apply sm:${prefix}-28`]: {},
           [`@apply lg:${prefix}-32`]: {},
         },
+        [`.${prefix}-e900`]: {
+          [`@apply ${prefix}-18`]: {},
+          [`@apply sm:${prefix}-32`]: {},
+          [`@apply lg:${prefix}-36`]: {},
+        },
+        [`.${prefix}-e1000`]: {
+          [`@apply ${prefix}-20`]: {},
+          [`@apply sm:${prefix}-36`]: {},
+          [`@apply lg:${prefix}-40`]: {},
+        },
       };
     }, {}),
     /**
@@ -63,6 +73,11 @@ module.exports = plugin(({ addUtilities }) => {
           [`@apply sm:${prefix}-16`]: {},
           [`@apply lg:${prefix}-20`]: {},
         },
+        [`.${prefix}-i1000`]: {
+          [`@apply ${prefix}-24`]: {},
+          [`@apply sm:${prefix}-28`]: {},
+          [`@apply lg:${prefix}-32`]: {},
+        },
       };
     }, {}),
   });

package/plugins/transitions.js

@@ -1,38 +1,15 @@
 // oxlint-disable-next-line typescript/no-require-imports
 const plugin = require("tailwindcss/plugin");
 
+/**
+ * Interaction Transition
+ * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=62868-23303&m=dev
+ */
 module.exports = plugin(({ addUtilities }) => {
-  /**
-   * Interaction Transition types
-   * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=23661-8122&mode=dev
-   */
   addUtilities({
-    /**
-     * Interaction type 1
-     * Color or content color changes
-     * All colors are tokens (“-hover” and “-down”)
-     */
-    ".interaction-transition-type-1": {
-      "@apply ease-out": {},
-      "@apply duration-150": {},
-    },
-    /**
-     * Interaction type 2
-     * No changes on hover
-     * Dimmer on active (“visual-down”)
-     */
-    ".interaction-transition-type-2": {
-      "@apply ease-out": {},
-      "@apply duration-150": {},
-    },
-    /**
-     * Interaction type 3
-     * Dimmer on hover and focus (“visual-hover”)
-     * Dimmer on active (“visual-down”)
-     */
-    ".interaction-transition-type-3": {
-      "@apply ease-out": {},
-      "@apply duration-150": {},
+    ".interaction-transition": {
+      "transition-timing-function": "cubic-bezier(0.2, 1, 0.4, 1)",
+      "transition-duration": "200ms",
     },
   });
 });

package/react-textarea-autosize.browser.esm-C6Dsm-5Q.mjs

@@ -0,0 +1,165 @@
+import * as c from "react";
+import z, { useLayoutEffect as O } from "react";
+function R() {
+  return R = Object.assign ? Object.assign.bind() : function(n) {
+    for (var t = 1; t < arguments.length; t++) {
+      var r = arguments[t];
+      for (var e in r) ({}).hasOwnProperty.call(r, e) && (n[e] = r[e]);
+    }
+    return n;
+  }, R.apply(null, arguments);
+}
+function I(n, t) {
+  if (n == null) return {};
+  var r = {};
+  for (var e in n) if ({}.hasOwnProperty.call(n, e)) {
+    if (t.indexOf(e) !== -1) continue;
+    r[e] = n[e];
+  }
+  return r;
+}
+var _ = O, j = function(t) {
+  var r = z.useRef(t);
+  return _(function() {
+    r.current = t;
+  }), r;
+}, C = function(t, r) {
+  if (typeof t == "function") {
+    t(r);
+    return;
+  }
+  t.current = r;
+}, B = function(t, r) {
+  var e = z.useRef();
+  return z.useCallback(function(i) {
+    t.current = i, e.current && C(e.current, null), e.current = r, r && C(r, i);
+  }, [r]);
+}, E = {
+  "min-height": "0",
+  "max-height": "none",
+  height: "0",
+  visibility: "hidden",
+  overflow: "hidden",
+  position: "absolute",
+  "z-index": "-1000",
+  top: "0",
+  right: "0",
+  display: "block"
+}, M = function(t) {
+  Object.keys(E).forEach(function(r) {
+    t.style.setProperty(r, E[r], "important");
+  });
+}, F = M, o = null, T = function(t, r) {
+  var e = t.scrollHeight;
+  return r.sizingStyle.boxSizing === "border-box" ? e + r.borderSize : e - r.paddingSize;
+};
+function N(n, t, r, e) {
+  r === void 0 && (r = 1), e === void 0 && (e = 1 / 0), o || (o = document.createElement("textarea"), o.setAttribute("tabindex", "-1"), o.setAttribute("aria-hidden", "true"), F(o)), o.parentNode === null && document.body.appendChild(o);
+  var i = n.paddingSize, s = n.borderSize, a = n.sizingStyle, p = a.boxSizing;
+  Object.keys(a).forEach(function(f) {
+    var m = f;
+    o.style[m] = a[m];
+  }), F(o), o.value = t;
+  var u = T(o, n);
+  o.value = t, u = T(o, n), o.value = "x";
+  var g = o.scrollHeight - i, l = g * r;
+  p === "border-box" && (l = l + i + s), u = Math.max(l, u);
+  var h = g * e;
+  return p === "border-box" && (h = h + i + s), u = Math.min(h, u), [u, g];
+}
+var W = function() {
+}, P = function(t, r) {
+  return t.reduce(function(e, i) {
+    return e[i] = r[i], e;
+  }, {});
+}, $ = [
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRightWidth",
+  "borderTopWidth",
+  "boxSizing",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  // non-standard
+  "tabSize",
+  "textIndent",
+  // non-standard
+  "textRendering",
+  "textTransform",
+  "width",
+  "wordBreak",
+  "wordSpacing",
+  "scrollbarGutter"
+], G = !!document.documentElement.currentStyle, Y = function(t) {
+  var r = window.getComputedStyle(t);
+  if (r === null)
+    return null;
+  var e = P($, r), i = e.boxSizing;
+  if (i === "")
+    return null;
+  G && i === "border-box" && (e.width = parseFloat(e.width) + parseFloat(e.borderRightWidth) + parseFloat(e.borderLeftWidth) + parseFloat(e.paddingRight) + parseFloat(e.paddingLeft) + "px");
+  var s = parseFloat(e.paddingBottom) + parseFloat(e.paddingTop), a = parseFloat(e.borderBottomWidth) + parseFloat(e.borderTopWidth);
+  return {
+    sizingStyle: e,
+    paddingSize: s,
+    borderSize: a
+  };
+}, q = Y;
+function L(n, t, r) {
+  var e = j(r);
+  c.useLayoutEffect(function() {
+    var i = function(a) {
+      return e.current(a);
+    };
+    if (n)
+      return n.addEventListener(t, i), function() {
+        return n.removeEventListener(t, i);
+      };
+  }, []);
+}
+var U = function(t, r) {
+  L(document.body, "reset", function(e) {
+    t.current.form === e.target && r(e);
+  });
+}, X = function(t) {
+  L(window, "resize", t);
+}, Z = function(t) {
+  L(document.fonts, "loadingdone", t);
+}, D = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"], J = function(t, r) {
+  var e = t.cacheMeasurements, i = t.maxRows, s = t.minRows, a = t.onChange, p = a === void 0 ? W : a, u = t.onHeightChange, g = u === void 0 ? W : u, l = I(t, D), h = l.value !== void 0, f = c.useRef(null), m = B(f, r), w = c.useRef(0), S = c.useRef(), v = function() {
+    var d = f.current, y = e && S.current ? S.current : q(d);
+    if (y) {
+      S.current = y;
+      var H = N(y, d.value || d.placeholder || "x", s, i), b = H[0], A = H[1];
+      w.current !== b && (w.current = b, d.style.setProperty("height", b + "px", "important"), g(b, {
+        rowHeight: A
+      }));
+    }
+  }, k = function(d) {
+    h || v(), p(d);
+  };
+  return c.useLayoutEffect(v), U(f, function() {
+    if (!h) {
+      var x = f.current.value;
+      requestAnimationFrame(function() {
+        var d = f.current;
+        d && x !== d.value && v();
+      });
+    }
+  }), X(v), Z(v), /* @__PURE__ */ c.createElement("textarea", R({}, l, {
+    onChange: k,
+    ref: m
+  }));
+}, Q = /* @__PURE__ */ c.forwardRef(J);
+export {
+  Q as default
+};
+//# sourceMappingURL=react-textarea-autosize.browser.esm-C6Dsm-5Q.mjs.map