@photoroom/ui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.2",
+  "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",
     },
   });
 });