@theroutingcompany/components 0.0.23 → 0.0.24-alpha.2

package/README.md

@@ -2,6 +2,24 @@
 
 View the [StoryBook](https://6392297e45ccab79e466ee19-iytnzjepcr.chromatic.com/).
 
+## Publishing
+
+First double check if everything that needs to exported is added to the `components/index.js` or `helpers/index.js`.
+
+### Public
+
+1. Bump version number `npm version patch --no-git-tag-version`
+2. `npm publish --access public`.
+    * Usually adding `--dry-run` first is a good idea for double checking if the version number is correct.
+3. Enter the 2FA code for npm
+
+### Prerelease
+
+1. Add alpha tag to version number with `npm version prerelease --preid alpha --no-git-tag-version`
+2. `npm publish --tag alpha.[NUMBER] --access public` where `[NUMBER]` is replaced with the alpha number.
+   * Usually adding `--dry-run` first is a good idea for double checking if the version number is correct.
+3. Enter the 2FA code for npm
+
 ## UI Libraries
 
 The component library is built on the following 'component primitives' UI libraries, low-level unstyled building blocks.
@@ -10,7 +28,7 @@ The component library is built on the following 'component primitives' UI librar
 - [RadixUI](https://www.radix-ui.com/docs/primitives/overview/introduction)
 
 They are similar in spirit but take a slightly different approach. Radix follows a component-based approach, while react-aria takes a hook-based approach.
-The divide is roughly Radix for 'structural' elements, think [popovers](https://www.radix-ui.com/docs/primitives/components/popover), [accordion](https://www.radix-ui.com/docs/primitives/components/accordion) and react-aria for some input components and components Radix lacks, like [breadcrumbs](https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html).
+The divide is roughly Radix for 'structural' elements, think [popovers](https://www.radix-ui.com/docs/primitives/components/popover), [accordion](https://www.radix-ui.com/docs/primitives/components/accordion) and react-aria for some input components and other components Radix lacks, like [breadcrumbs](https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html).
 It may seem weird at first sight that two component libraries are used but they are low-level enough not to get in each others way.
 
 ## Styling
@@ -211,7 +229,7 @@ See [The styled-components Happy Path](https://www.joshwcomeau.com/css/styled-co
 ### Merge props
 
 Use the [`mergeProps`](https://react-spectrum.adobe.com/react-aria/mergeProps.html) function from `@react-aria/util` to merge props correctly.
-For example, Radix adds events handlers to buttons inside a `*Trigger` components with an `asChild` prop, `mergeProps` ensures there are chained instead of overwritten which enables functionality to be composed.
+For example, Radix adds events handlers to buttons inside `*Trigger` components with an `asChild` prop, `mergeProps` ensures there are chained instead of overwritten which enables functionality to be composed.
 
 ### Forward refs
 
@@ -290,7 +308,7 @@ Exact types for props (for editor autocomplete) is a necessity, not a nice-to-ha
   </cite> 
 </figcaption>
 </figure>
-</figure>
+
 
 - ❌ `type Variant = string;`
 - ✅ `type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';`
@@ -309,6 +327,22 @@ Two ways we can solve this
 1. Filter spread props. Reject all non-DOM props using a utility. Note react-aria has a util names `filterDOMProps` despite its name it does not filter DOM props (I think it's a legacy util).
 2. Be more explicit. Write out all the props to forward and types explicitly.
 
+Note, Radix often required spreading on to the underlying DOM node
+
+<figure>
+<blockquote>
+  <em>Your component must spread props</em>.
+  When Radix clones your component, it will pass its own props and event handlers to make it functional and accessible.
+  If your component doesn't support those props, it will break.
+  This is done by spreading all of the props onto the underlying DOM node.
+</blockquote>
+<figcaption>
+  <cite>
+    <a href="https://www.radix-ui.com/docs/primitives/guides/composition#your-component-must-spread-props">Composing with your own React components</a>
+  </cite> 
+</figcaption>
+</figure>
+
 ## Configurable Components Should Have Sane Defaults & Not Blow Up Without Props
 
 > **Warning**

package/dist/trc-components.es.js

@@ -2425,7 +2425,10 @@ const X_ = "DialogTitleWarning", [Q_, GR] = Ix(X_, {
   z-index: 5;
   box-shadow: ${m.elevation_static_high};
   border-radius: ${m.border_radius_400};
-  animation: ${w2} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${w2} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
 `, S2 = O(pp)`
   ${yp}
   width: ${(e) => vp[e.size ?? "medium"]};
@@ -2962,7 +2965,10 @@ const A2 = {
     "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
     "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
   }
-}, z2 = new Map(Object.entries(Zn.spacing)), Da = (e) => (t) => e.has(t) ? e.get(t) : t, Ye = Da(z2), K2 = Object.entries(
+}, z2 = new Map(Object.entries(Zn.spacing)), Da = (e) => (t) => (
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  e.has(t) ? e.get(t) : t
+), Ye = Da(z2), K2 = Object.entries(
   Zn.elevation.interactive
 ).map(([e, t]) => [`interactive_${e}`, t]), L2 = Object.entries(Zn.elevation.interactive).map(
   ([e, t]) => [`static_${e}`, t]
@@ -21789,7 +21795,7 @@ var GT = /([[\].#*$><+~=|^:(),"'`\s])/g, of = typeof CSS < "u" && CSS.escape, Nc
     var i = this.rules.toString(n);
     return i ? this.query + " {" + a + i + a + "}" : "";
   }, e;
-}(), JT = /@media|@supports\s+/, XT = {
+}(), JT = /@container|@media|@supports\s+/, XT = {
   onCreateRule: function(t, r, n) {
     return JT.test(t) ? new ZT(t, r, n) : null;
   }
@@ -22343,7 +22349,7 @@ var SE = _y(function() {
   }, e;
 }(), EE = 0, CE = /* @__PURE__ */ function() {
   function e(r) {
-    this.id = EE++, this.version = "10.9.2", this.plugins = new mE(), this.options = {
+    this.id = EE++, this.version = "10.10.0", this.plugins = new mE(), this.options = {
       id: {
         minify: !1
       },
@@ -25975,26 +25981,28 @@ const SR = F1, kR = dR, TR = bR, ER = yR, CR = K1, RR = L1, Yc = 25, IR = Ze`
     line-height: 1;
   }
 
-  &[data-state~='open'] {
-    animation: ${AR} 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state~='open'] {
+      animation: ${AR} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    &[data-state~='closed'] {
+      animation: ${IR} 100ms ease-in;
+    }
 
-  &[data-state~='closed'] {
-    animation: ${IR} 100ms ease-in;
+    &[data-swipe='cancel'] {
+      transform: translateX(0);
+      transition: transform 200ms ease-out;
+    }
+
+    &[data-swipe='end'] {
+      animation: ${OR} 100ms ease-out;
+    }
   }
 
   &[data-swipe='move'] {
     transform: translateX(var(--radix-toast-swipe-move-x));
   }
-
-  &[data-swipe='cancel'] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
-  
-  &[data-swipe='end'] {
-    animation: ${OR} 100ms ease-out;
-  }
 `;
 function rA({
   children: e,