@adamjanicki/ui 1.9.0 → 1.9.2

package/README.md

@@ -1,6 +1,6 @@
 # @adamjanicki/ui
 
-**Warning: use at own risk! These are mainly for personal use across my other sites, so while I strive to write good code, there may be bugs, and I make breaking changes semi-frequently!**
+_Warning: use at own risk! This library is primarily designed for usage by me across my other projects, so while I try to write good code, there will be some bugs, and more importantly, I make breaking changes often!_
 
 ## Installation
 
@@ -10,11 +10,9 @@ npm install @adamjanicki/ui
 
 ## Usage
 
-```ts
+```tsx
 import { Button } from "@adamjanicki/ui";
 
-// ...
-
 const App = () => {
   return (
     <Button onClick={() => console.log("Button clicked")}>Click me</Button>
@@ -24,23 +22,26 @@ const App = () => {
 
 ## Importing CSS
 
-Unfortunately, there was no great way to handle CSS. I often hate how large libraries make it extremely difficult to override CSS without using `!important`, or using inline styles. So, I've decided to just allow importing the CSS directly into your project. Here's an example of how to do it:
+Unfortunately, there was no great way to handle CSS. I hate how large libraries make it extremely difficult to override CSS without using `!important`, or using inline styles. So, I've decided to require importing the CSS directly into your project. Here's an example of how to do it:
 
-```ts
+```tsx
 import React from "react";
 import ReactDOM from "react-dom/client";
 // Make sure to import this first so your styles take priority!
 import "@adamjanicki/ui/style.css";
-// All your other global styles can go here!
+// All your other style imports can go below here!
 import "src/css/style.css";
 import App from "src/App";
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
 ```
+
+## Components
+
+I'm not going to rewrite all the stuff I already wrote on my [demo site](https://adamjanicki.xyz/ui/), so go explore the component there if you'd like.

package/components/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { type BoxProps } from "../Box/Box";
 import type { ReadonlyableArray } from "../../types/common";
+import { type BoxProps } from "../Box/Box";
 type Props = Omit<BoxProps, "children"> & {
     /** Drawers to render as accordion sections */
     drawers: ReadonlyableArray<Drawer>;
@@ -15,18 +15,18 @@ type Props = Omit<BoxProps, "children"> & {
 /** A vertical list of collapsible drawers */
 declare const Accordion: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type Drawer = {
-    /** Label for the accordion drawer */
-    label: string;
     /** Content hidden within this accordion drawer */
     content: React.ReactNode;
-    /** Whether the drawer is open */
-    open: boolean;
+    /** Label for the accordion drawer */
+    label: string;
     /** Callback that fires when the open state changes for this drawer */
     onOpenChange: (open: boolean) => void;
+    /** Whether the drawer is open */
+    open: boolean;
 };
 type DrawerProps = {
-    item: Drawer;
     duration?: number;
+    item: Drawer;
     showDivider: boolean;
 };
 declare const Drawer: ({ item, duration, showDivider }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/components/Accordion/Accordion.js

@@ -1 +1 @@
-import{jsx as i,jsxs as h}from"react/jsx-runtime";import p,{useRef as g,useState as x,useEffect as b}from"react";import d from"../Box/Box";import y from"../Icon";import{UnstyledButton as w}from"../Button";import O from"../Animated";import{chevronDown as j,chevronRight as D}from"../../icons";var u=function(){return u=Object.assign||function(r){for(var n,o=1,e=arguments.length;o<e;o++){n=arguments[o];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r},u.apply(this,arguments)},m=function(r,n){var o={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&n.indexOf(e)<0&&(o[e]=r[e]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var t=0,e=Object.getOwnPropertySymbols(r);t<e.length;t++)n.indexOf(e[t])<0&&Object.prototype.propertyIsEnumerable.call(r,e[t])&&(o[e[t]]=r[e[t]]);return o},R=p.forwardRef(function(r,n){var o=r.drawers,e=r.duration,t=r.hideDividers,s=r.vfx,c=m(r,["drawers","duration","hideDividers","vfx"]);return i(d,u({vfx:u({axis:"y",radius:"rounded",color:"default",backgroundColor:"default",shadow:"subtle",border:!0},s)},c,{ref:n,children:o.map(function(l,a){return i(_,{item:l,duration:e,showDivider:!t&&a<o.length-1},a)})}))}),_=function(r){var n=r.item,o=r.duration,e=r.showDivider,t=g(null),s=x(),c=s[0],l=s[1],a=n.content,f=n.open,v=n.onOpenChange;return b(function(){f&&a&&t.current&&l(t.current.offsetHeight)},[f,a]),h(d,{vfx:{axis:"y",borderBottom:e},children:[i(w,{onClick:function(){return v(!f)},children:h(d,{vfx:{axis:"x",align:"center",gap:"s",padding:"m"},children:[i(y,{vfx:{color:"muted"},size:"xs",icon:f?j:D}),i(d,{vfx:{fontWeight:6},children:n.label})]})}),i(O,{vfx:{overflow:"hidden"},keepMounted:!0,duration:o,visible:f,from:{visibility:"hidden",height:0,transform:"translateY(-4px)",opacity:.9},to:{height:c,transform:"translateY(0)",opacity:1},children:i(d,{ref:t,children:a})})]})},H=R;export{H as default};
+import{jsx as i,jsxs as h}from"react/jsx-runtime";import p,{useEffect as g,useRef as x,useState as b}from"react";import{chevronDown as y,chevronRight as w}from"../../icons";import O from"../Animated";import d from"../Box/Box";import{UnstyledButton as j}from"../Button";import D from"../Icon";var u=function(){return u=Object.assign||function(r){for(var n,o=1,e=arguments.length;o<e;o++){n=arguments[o];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r},u.apply(this,arguments)},m=function(r,n){var o={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&n.indexOf(e)<0&&(o[e]=r[e]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var t=0,e=Object.getOwnPropertySymbols(r);t<e.length;t++)n.indexOf(e[t])<0&&Object.prototype.propertyIsEnumerable.call(r,e[t])&&(o[e[t]]=r[e[t]]);return o},R=p.forwardRef(function(r,n){var o=r.drawers,e=r.duration,t=r.hideDividers,s=r.vfx,c=m(r,["drawers","duration","hideDividers","vfx"]);return i(d,u({vfx:u({axis:"y",radius:"rounded",color:"default",backgroundColor:"default",shadow:"subtle",border:!0},s)},c,{ref:n,children:o.map(function(l,a){return i(_,{item:l,duration:e,showDivider:!t&&a<o.length-1},a)})}))}),_=function(r){var n=r.item,o=r.duration,e=r.showDivider,t=x(null),s=b(),c=s[0],l=s[1],a=n.content,f=n.open,v=n.onOpenChange;return g(function(){f&&a&&t.current&&l(t.current.offsetHeight)},[f,a]),h(d,{vfx:{axis:"y",borderBottom:e},children:[i(j,{onClick:function(){return v(!f)},children:h(d,{vfx:{axis:"x",align:"center",gap:"s",padding:"m"},children:[i(D,{vfx:{color:"muted"},size:"xs",icon:f?y:w}),i(d,{vfx:{fontWeight:6},children:n.label})]})}),i(O,{vfx:{overflow:"hidden"},keepMounted:!0,duration:o,visible:f,from:{visibility:"hidden",height:0,transform:"translateY(-4px)",opacity:.9},to:{height:c,transform:"translateY(0)",opacity:1},children:i(d,{ref:t,children:a})})]})},H=R;export{H as default};

package/components/Animated/Animated.d.ts

@@ -2,11 +2,6 @@ import React from "react";
 import type { Style } from "../../types/common";
 import { type BoxProps } from "../Box/Box";
 type Props = BoxProps & {
-    /**
-     * Whether to begin the animation and render the component.
-     * Set to true to start animation, false to start the exit animation.
-     */
-    visible: boolean;
     /**
      * Duration of the animation in seconds.
      * @default 0.25
@@ -17,16 +12,22 @@ type Props = BoxProps & {
         /** Length of the reverse direction */
         reverse: number;
     };
+    /** Style applied at the end state */
+    from?: Style;
+    /** Style applied at the start state */
+    to?: Style;
     /**
      * Whether to keep the component mounted when it is not animated.
      * @default false
      */
     keepMounted?: boolean;
-    /** Style applied at the start state */
-    to?: Style;
-    /** Style applied at the end state */
-    from?: Style;
+    /**
+     * Whether to begin the animation and render the component.
+     * Set to `true` to start the forward animation, `false` to start the reverse animation.
+     */
+    visible: boolean;
 };
+export declare const DEFAULT_ANIMATION_DURATION_S = 0.25;
 /** Wrapper for animating enter/exit states */
 declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -1 +1 @@
-import{jsx as k}from"react/jsx-runtime";import A,{useEffect as D,useRef as O,useState as F}from"react";import S from"../Box/Box";var u=function(){return u=Object.assign||function(r){for(var i,e=1,t=arguments.length;e<t;e++){i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(r[n]=i[n])}return r},u.apply(this,arguments)},R=function(r,i){var e={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&i.indexOf(t)<0&&(e[t]=r[t]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,t=Object.getOwnPropertySymbols(r);n<t.length;n++)i.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(r,t[n])&&(e[t[n]]=r[t[n]]);return e},M=A.forwardRef(function(r,i){var e=r.visible,t=r.duration,n=t===void 0?.25:t,y=r.keepMounted,_=y===void 0?!1:y,w=r.to,b=r.from,j=r.style,P=R(r,["visible","duration","keepMounted","to","from","style"]),p=typeof n=="number"?n:n.forward,s=typeof n=="number"?n:n.reverse,a=p<=0,l=s<=0,g=F(function(){return e&&a?"forward":"init"}),o=g[0],f=g[1],c=O(null),v=O(null);if(D(function(){if(!(e&&a&&o==="forward")&&!(!e&&l&&o==="init"))return e?o!=="forward"&&(a?f("forward"):v.current=requestAnimationFrame(function(){return f("forward")})):o!=="init"&&(l?f("init"):o==="forward"?f("reverse"):c.current=window.setTimeout(function(){return f("init")},s*1e3)),function(){c.current!==null&&(clearTimeout(c.current),c.current=null),v.current!==null&&(cancelAnimationFrame(v.current),v.current=null)}},[e,o,a,l,s]),o==="init"&&!_&&!e)return null;var x=o==="forward"||e&&a?w:b,m,d;return o==="forward"&&!a?(d=p,m=h(w)):o==="reverse"&&!l&&(d=s,m=h(b)),k(S,u({style:u(u(u({},j),x),{transitionProperty:m,transitionDuration:d?"".concat(d,"s"):void 0})},P,{ref:i}))}),h=function(r){r===void 0&&(r={});var i=Object.keys(r).map(function(e){return e.replace(/[A-Z]/g,function(t){return"-".concat(t.toLowerCase())})});return i.length>0?i.join(", "):void 0},B=M;export{B as default};
+import{jsx as R}from"react/jsx-runtime";import D,{useEffect as T,useRef as _,useState as F}from"react";import S from"../Box/Box";var u=function(){return u=Object.assign||function(r){for(var i,e=1,t=arguments.length;e<t;e++){i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(r[n]=i[n])}return r},u.apply(this,arguments)},x=function(r,i){var e={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&i.indexOf(t)<0&&(e[t]=r[t]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,t=Object.getOwnPropertySymbols(r);n<t.length;n++)i.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(r,t[n])&&(e[t[n]]=r[t[n]]);return e},k=.25,I=D.forwardRef(function(r,i){var e=r.visible,t=r.duration,n=t===void 0?k:t,y=r.keepMounted,h=y===void 0?!1:y,w=r.to,p=r.from,j=r.style,A=x(r,["visible","duration","keepMounted","to","from","style"]),b=typeof n=="number"?n:n.forward,s=typeof n=="number"?n:n.reverse,a=b<=0,l=s<=0,O=F(function(){return e&&a?"forward":"init"}),o=O[0],f=O[1],c=_(null),v=_(null);if(T(function(){if(!(e&&a&&o==="forward")&&!(!e&&l&&o==="init"))return e?o!=="forward"&&(a?f("forward"):v.current=requestAnimationFrame(function(){return f("forward")})):o!=="init"&&(l?f("init"):o==="forward"?f("reverse"):c.current=window.setTimeout(function(){return f("init")},s*1e3)),function(){c.current!==null&&(clearTimeout(c.current),c.current=null),v.current!==null&&(cancelAnimationFrame(v.current),v.current=null)}},[e,o,a,l,s]),o==="init"&&!h&&!e)return null;var P=o==="forward"||e&&a?w:p,m,d;return o==="forward"&&!a?(d=b,m=g(w)):o==="reverse"&&!l&&(d=s,m=g(p)),R(S,u({style:u(u(u({},j),P),{transitionProperty:m,transitionDuration:d?"".concat(d,"s"):void 0})},A,{ref:i}))}),g=function(r){r===void 0&&(r={});var i=Object.keys(r).map(function(e){return e.replace(/[A-Z]/g,function(t){return"-".concat(t.toLowerCase())})});return i.length>0?i.join(", "):void 0},L=I;export{k as DEFAULT_ANIMATION_DURATION_S,L as default};

package/components/Autocomplete/Autocomplete.d.ts

@@ -6,66 +6,66 @@ type PopoverProps = React.ComponentProps<typeof Popover>;
 type IconInputProps = React.ComponentProps<typeof IconInput>;
 type InputElementProps = NonNullable<IconInputProps["inputProps"]>;
 type Props<T> = Omit<IconInputProps, "inputProps" | "onSelect"> & {
-    /** The value of the input field */
-    value: string;
     /**
-     * Callback for when the input field changes.
-     * @param event Standard React ChangeEvent.
-     */
-    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Callback for when an option is selected.
-     * @param value Selected value.
+     * Close the popover when the footer is clicked.
+     * @default true
      */
-    onSelect: (value: T) => void;
-    /** The list of available options */
-    options: ReadonlyableArray<T>;
+    closeOnFooterClick?: boolean;
+    /** Allow free text input by converting the query string to a value */
+    customize?: (query: string) => T;
     /**
      * Predicate to filter options.
      * @param option Current option.
      * @returns True if the option should be displayed.
      */
     filterOption?: (option: T) => boolean;
-    /**
-     * Render function for the option.
-     * @param option Current option.
-     * @returns Node to render for the option.
-     */
-    renderOption?: (option: T) => React.ReactNode;
-    /** Node to render when no options are available */
-    noOptionsNode?: React.ReactNode;
+    /** Footer node to render at the bottom of the popover */
+    footer?: React.ReactNode;
     /**
      * Group options by a string.
      * @param option Current option.
      * @returns String to group by.
      */
     groupBy?: (option: T) => string;
+    /** Props to pass to the underlying `input` */
+    inputProps?: Omit<InputElementProps, "autoComplete" | "onChange" | "value">;
+    /** Node to render when no options are available */
+    noOptionsNode?: React.ReactNode;
     /**
-     * Render function for the group.
-     * @param group Name.
-     * @returns Node to render for the group.
+     * Callback for when the input field changes.
+     * @param event Standard React ChangeEvent.
      */
-    renderGroup?: (group: string) => React.ReactNode;
-    /** Allow free text input by converting the query string to a value */
-    customize?: (query: string) => T;
-    /** Props to pass to the underlying `input` */
-    inputProps?: Omit<InputElementProps, "value" | "onChange" | "autoComplete">;
-    /** Props for the popover */
-    popoverProps?: Omit<PopoverProps, "open" | "onClose" | "anchor" | "children" | "from" | "to">;
-    /** Footer node to render at the bottom of the popover */
-    footer?: React.ReactNode;
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Close the popover when the footer is clicked.
-     * @default true
+     * Callback for when an option is selected.
+     * @param value Selected value.
      */
-    closeOnFooterClick?: boolean;
+    onSelect: (value: T) => void;
     /** Callback fired when the user hits the Enter key while no option is selected */
     onUnselectedEnter?: () => void;
+    /** The list of available options */
+    options: ReadonlyableArray<T>;
+    /** Props for the popover */
+    popoverProps?: Omit<PopoverProps, "anchor" | "children" | "from" | "onClose" | "open" | "to">;
     /**
      * Whether or not to leave the popover open after a selection occurs.
      * @default false
      */
     remainOpenOnSelectOrEnter?: boolean;
+    /**
+     * Render function for the group.
+     * @param group Name.
+     * @returns Node to render for the group.
+     */
+    renderGroup?: (group: string) => React.ReactNode;
+    /**
+     * Render function for the option.
+     * @param option Current option.
+     * @returns Node to render for the option.
+     */
+    renderOption?: (option: T) => React.ReactNode;
+    /** The value of the input field */
+    value: string;
 };
 /** Searchable select input with an overlay menu */
 declare const Autocomplete: <T>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;

package/components/Autocomplete/Autocomplete.js

@@ -1 +1 @@
-import{jsx as y,jsxs as j}from"react/jsx-runtime";import ye,{useEffect as _e,useMemo as Pe,useRef as E,useState as T}from"react";import _ from"../Box";import{IconInput as Ce}from"../Input";import be from"../Popover";var f=function(){return f=Object.assign||function(n){for(var u,t=1,r=arguments.length;t<r;t++){u=arguments[t];for(var i in u)Object.prototype.hasOwnProperty.call(u,i)&&(n[i]=u[i])}return n},f.apply(this,arguments)},x=function(n,u){var t={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&u.indexOf(r)<0&&(t[r]=n[r]);if(n!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,r=Object.getOwnPropertySymbols(n);i<r.length;i++)u.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(n,r[i])&&(t[r[i]]=n[r[i]]);return t},X=function(n){return y(_,{vfx:{padding:"s"},children:"".concat(n)})},Ie=function(n){var u,t=n.inputProps,r=n.options,i=n.renderOption,Y=i===void 0?X:i,S=n.filterOption,M=S===void 0?function(){return!0}:S,P=n.groupBy,C=n.renderGroup,Z=n.noOptionsNode,O=n.customize,p=n.value,$=n.onInputChange,ee=n.onSelect,ne=n.popoverProps,U=n.footer,b=n.onUnselectedEnter,k=n.closeOnFooterClick,oe=k===void 0?!0:k,F=n.remainOpenOnSelectOrEnter,R=F===void 0?!1:F,B=x(n,["inputProps","options","renderOption","filterOption","groupBy","renderGroup","noOptionsNode","customize","value","onInputChange","onSelect","popoverProps","footer","onUnselectedEnter","closeOnFooterClick","remainOpenOnSelectOrEnter"]),K=E(null),N=E(null),z=E(null),A=T(),v=A[0],s=A[1],G=T(!1),te=G[0],H=G[1],I=Pe(function(){var e=r.filter(M),o=new Map;if(P){for(var l=new Map,c=0,d=e;c<d.length;c++){var a=d[c],J=P(a),L=l.get(J);L?L.push(a):l.set(J,[a])}e=[],l.forEach(function(Oe,me){o.set(e.length,me),e.push.apply(e,Oe)})}var Q=!!(O&&p.length>0&&!e.length);return Q&&O&&(e=[O(p)]),{filteredOptions:e,groupMap:o,hasCustomOption:Q}},[O,M,P,r,p]),h=I.filteredOptions,re=I.groupMap,ie=I.hasCustomOption,V=function(){return H(!0)},m=function(){var e;s(void 0),H(!1),(e=N.current)===null||e===void 0||e.blur()},W=function(e){ee(e),R||m()},le=function(e){s(void 0),$(e),(e.target.value||r.length>0)&&V()},ue=function(e){var o;(o=t==null?void 0:t.onFocus)===null||o===void 0||o.call(t,e),!e.defaultPrevented&&!(t!=null&&t.disabled)&&V()},ae=function(e){var o=e.code;if(o==="Enter"){var l=v!=null?v:ie?0:void 0;if(l!==void 0){var c=h[l];c!==void 0&&W(c);return}b==null||b(),R||m();return}var d=h.length;d<=0||(o==="ArrowDown"?s(function(a){return((a!=null?a:-1)+1)%d}):o==="ArrowUp"&&s(function(a){return((a!=null?a:0)-1+d)%d}))};_e(function(){var e,o;v!==void 0&&((o=(e=z.current)===null||e===void 0?void 0:e.scrollIntoView)===null||o===void 0||o.call(e,{block:"nearest",behavior:"smooth"}))},[v]);var fe=te&&(h.length>0||p.length>0),g=ne||{},ve=g.style,de=g.vfx,D=g.flip,ce=D===void 0?!1:D,q=g.offset,pe=q===void 0?8:q,se=x(g,["style","vfx","flip","offset"]),w=B.onKeyUp,he=x(B,["onKeyUp"]),ge=function(e,o,l){return y(_,{vfx:{axis:"x",cursor:"pointer",radius:"rounded"},ref:v===e?z:void 0,onMouseEnter:function(){return s(e)},className:v===e?"aui-autocomplete-on-option":void 0,onClick:o,children:l})};return j(be,f({},se,{flip:ce,offset:pe,open:fe,onClose:m,anchor:y(Ce,f({},he,{ref:K,onKeyUp:function(e){w==null||w(e),!e.defaultPrevented&&ae(e)},inputProps:f(f({},t),{value:p,onChange:le,onFocus:ue,ref:N,autoComplete:"off"})})),vfx:f({padding:"none",margin:"none",overflow:"hidden",fontWeight:4},de),style:f(f({},ve),{width:(u=K.current)===null||u===void 0?void 0:u.offsetWidth}),from:{opacity:0},to:{opacity:1},children:[j(_,{vfx:{axis:"y",padding:"s",overflow:"scroll"},style:{maxHeight:300},tabIndex:-1,children:[h.map(function(e,o){var l=re.get(o);return j(ye.Fragment,{children:[l&&((C==null?void 0:C(l))||l),ge(o,function(){return W(e)},Y(e))]},o)}),h.length>0?null:Z||X("No results found")]}),U&&y(_,{onClick:oe?m:void 0,children:U})]}))},Me=Ie;export{Me as default};
+import{jsx as y,jsxs as j}from"react/jsx-runtime";import ye,{useEffect as _e,useMemo as Pe,useRef as E,useState as T}from"react";import _ from"../Box";import{IconInput as Ce}from"../Input";import be from"../Popover";var f=function(){return f=Object.assign||function(n){for(var u,t=1,r=arguments.length;t<r;t++){u=arguments[t];for(var i in u)Object.prototype.hasOwnProperty.call(u,i)&&(n[i]=u[i])}return n},f.apply(this,arguments)},x=function(n,u){var t={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&u.indexOf(r)<0&&(t[r]=n[r]);if(n!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,r=Object.getOwnPropertySymbols(n);i<r.length;i++)u.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(n,r[i])&&(t[r[i]]=n[r[i]]);return t},X=function(n){return y(_,{vfx:{padding:"s"},children:"".concat(n)})},Ie=function(n){var u,t=n.inputProps,r=n.options,i=n.renderOption,Z=i===void 0?X:i,S=n.filterOption,M=S===void 0?function(){return!0}:S,P=n.groupBy,C=n.renderGroup,$=n.noOptionsNode,O=n.customize,c=n.value,ee=n.onInputChange,ne=n.onSelect,oe=n.popoverProps,U=n.footer,b=n.onUnselectedEnter,k=n.closeOnFooterClick,te=k===void 0?!0:k,F=n.remainOpenOnSelectOrEnter,R=F===void 0?!1:F,B=x(n,["inputProps","options","renderOption","filterOption","groupBy","renderGroup","noOptionsNode","customize","value","onInputChange","onSelect","popoverProps","footer","onUnselectedEnter","closeOnFooterClick","remainOpenOnSelectOrEnter"]),K=E(null),N=E(null),z=E(null),A=T(),v=A[0],s=A[1],G=T(!1),re=G[0],H=G[1],I=Pe(function(){var e=r.filter(M),o=new Map;if(P){for(var l=new Map,p=0,d=e;p<d.length;p++){var a=d[p],J=P(a),L=l.get(J);L?L.push(a):l.set(J,[a])}e=[],l.forEach(function(Oe,me){o.set(e.length,me),e.push.apply(e,Oe)})}var Q=!!(O&&c.length>0&&!e.length);return Q&&O&&(e=[O(c)]),{filteredOptions:e,groupMap:o,hasCustomOption:Q}},[O,M,P,r,c]),h=I.filteredOptions,ie=I.groupMap,le=I.hasCustomOption,V=function(){return H(!0)},m=function(){var e;s(void 0),H(!1),(e=N.current)===null||e===void 0||e.blur()},W=function(e){ne(e),R||m()},ue=function(e){s(void 0),ee(e),(e.target.value||r.length>0)&&V()},ae=function(e){var o;(o=t==null?void 0:t.onFocus)===null||o===void 0||o.call(t,e),!e.defaultPrevented&&!(t!=null&&t.disabled)&&V()},fe=function(e){var o=e.code;if(o==="Enter"){var l=v!=null?v:le?0:void 0;if(l!==void 0){var p=h[l];p!==void 0&&W(p);return}b==null||b(),R||m();return}var d=h.length;d<=0||(o==="ArrowDown"?s(function(a){return((a!=null?a:-1)+1)%d}):o==="ArrowUp"&&s(function(a){return((a!=null?a:0)-1+d)%d}))};_e(function(){var e,o;v!==void 0&&((o=(e=z.current)===null||e===void 0?void 0:e.scrollIntoView)===null||o===void 0||o.call(e,{block:"nearest",behavior:"smooth"}))},[v]);var ve=re&&(h.length>0||c.length>0),g=oe||{},de=g.style,pe=g.vfx,D=g.flip,ce=D===void 0?!1:D,Y=g.offset,q=Y===void 0?8:Y,se=x(g,["style","vfx","flip","offset"]),w=B.onKeyUp,he=x(B,["onKeyUp"]),ge=function(e,o,l){return y(_,{vfx:{axis:"x",cursor:"pointer",radius:"rounded"},ref:v===e?z:void 0,onMouseEnter:function(){return s(e)},className:v===e?"aui-autocomplete-on-option":void 0,onClick:o,children:l})};return j(be,f({},se,{flip:ce,offset:q,open:ve,onClose:m,anchor:y(Ce,f({},he,{ref:K,onKeyUp:function(e){w==null||w(e),!e.defaultPrevented&&fe(e)},inputProps:f(f({},t),{value:c,onChange:ue,onFocus:ae,ref:N,autoComplete:"off"})})),vfx:f({padding:"none",margin:"none",overflow:"hidden",fontWeight:4},pe),style:f(f({},de),{width:(u=K.current)===null||u===void 0?void 0:u.offsetWidth}),from:{opacity:0,top:-q},to:{opacity:1,top:0},children:[j(_,{vfx:{axis:"y",padding:"s",overflowY:"auto"},style:{maxHeight:300},tabIndex:-1,children:[h.map(function(e,o){var l=ie.get(o);return j(ye.Fragment,{children:[l&&((C==null?void 0:C(l))||l),ge(o,function(){return W(e)},Z(e))]},o)}),h.length>0?null:$||X("No results found")]}),U&&y(_,{onClick:te?m:void 0,children:U})]}))},Me=Ie;export{Me as default};

package/components/Avatar/Avatar.js

@@ -1 +1 @@
-import{jsx as g}from"react/jsx-runtime";import S,{useState as k}from"react";import C from"../ui";import I from"../Box/Box";import{classNames as i}from"../../functions";var n=function(){return n=Object.assign||function(r){for(var o,a=1,e=arguments.length;a<e;a++){o=arguments[a];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r},n.apply(this,arguments)},N=function(r,o){var a={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&o.indexOf(e)<0&&(a[e]=r[e]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var t=0,e=Object.getOwnPropertySymbols(r);t<e.length;t++)o.indexOf(e[t])<0&&Object.prototype.propertyIsEnumerable.call(r,e[t])&&(a[e[t]]=r[e[t]]);return a},_=S.forwardRef(function(r,o){var a=r.size,e=a===void 0?"s":a,t=r.backgroundImage,h=r.className,p=r.style,l=r.username,y=r.vfx,b=N(r,["size","backgroundImage","className","style","username","vfx"]),c=k(!1),O=c[0],x=c[1],f=O||!t,w=z(l),s=void 0;f&&(s=i(s,"aui-avatar-".concat(w)));var u=void 0,m={},v=void 0;typeof e=="number"?(m={width:e,height:e,fontSize:.8*e},v={width:e,height:e}):(s=i(s,"aui-avatar-".concat(e)),u="aui-avatar-".concat(e));var j=l[0];return g(I,n({className:i(s,h),style:n(n({},m),p),vfx:n({radius:"rounded",overflow:"hidden",fontWeight:6,textAlign:"center",color:"default"},y)},b,{ref:o,children:f?j:g(C.img,{src:t,alt:"",className:u,onError:function(){return x(!0)},style:v})}))}),d=["red","yellow","green","blue","purple"];function z(r){return d[r.split("").reduce(function(o,a){return o+a.charCodeAt(0)},0)%d.length]}var F=_;export{F as default};
+import{jsx as g}from"react/jsx-runtime";import S,{useState as k}from"react";import{classNames as i}from"../../functions";import C from"../Box/Box";import I from"../ui";var n=function(){return n=Object.assign||function(r){for(var o,a=1,e=arguments.length;a<e;a++){o=arguments[a];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r},n.apply(this,arguments)},N=function(r,o){var a={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&o.indexOf(e)<0&&(a[e]=r[e]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var t=0,e=Object.getOwnPropertySymbols(r);t<e.length;t++)o.indexOf(e[t])<0&&Object.prototype.propertyIsEnumerable.call(r,e[t])&&(a[e[t]]=r[e[t]]);return a},_=S.forwardRef(function(r,o){var a=r.size,e=a===void 0?"s":a,t=r.backgroundImage,h=r.className,p=r.style,l=r.username,y=r.vfx,b=N(r,["size","backgroundImage","className","style","username","vfx"]),c=k(!1),O=c[0],x=c[1],f=O||!t,w=z(l),s=void 0;f&&(s=i(s,"aui-avatar-".concat(w)));var u=void 0,m={},v=void 0;typeof e=="number"?(m={width:e,height:e,fontSize:.8*e},v={width:e,height:e}):(s=i(s,"aui-avatar-".concat(e)),u="aui-avatar-".concat(e));var j=l[0];return g(C,n({className:i(s,h),style:n(n({},m),p),vfx:n({radius:"rounded",overflow:"hidden",fontWeight:6,textAlign:"center",color:"default"},y)},b,{ref:o,children:f?j:g(I.img,{src:t,alt:"",className:u,onError:function(){return x(!0)},style:v})}))}),d=["red","yellow","green","blue","purple"];function z(r){return d[r.split("").reduce(function(o,a){return o+a.charCodeAt(0)},0)%d.length]}var F=_;export{F as default};

package/components/Button/Button.d.ts

@@ -3,16 +3,16 @@ import ui from "../ui";
 type DefaultButtonProps = React.ComponentProps<typeof ui.button>;
 /** Visual styling options for `Button` and `ButtonLink` */
 export type VisualButtonProps = {
-    /**
-     * Type of button.
-     * @default "primary"
-     */
-    variant?: "primary" | "secondary";
     /**
      * Size of the button, if wishing to make smaller.
      * @default "regular"
      */
     size?: "regular" | "small";
+    /**
+     * Type of button.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
 };
 type ButtonProps = DefaultButtonProps & VisualButtonProps;
 /** An unstyled `button` */

package/components/Carousel/Carousel.d.ts

@@ -10,18 +10,20 @@ type ButtonProps = {
     style?: Style;
 };
 type Props = Omit<BoxProps, "children"> & {
+    /**
+     * The interval at which autoplay runs (in seconds).
+     * @example 5
+     */
+    autoplayInterval?: number;
     /** The child elements/slides of the carousel */
     children: ReadonlyableArray<React.ReactNode>;
+    /** Props to supply to the dot buttons */
+    dotProps?: Omit<ButtonProps, "children">;
     /**
      * How long the transition lasts (in seconds).
      * @default 1
      */
     duration?: number;
-    /**
-     * The interval at which autoplay runs (in seconds).
-     * @example 5
-     */
-    autoplayInterval?: number;
     /**
      * Whether to hide the arrow controls.
      * @default false
@@ -32,8 +34,6 @@ type Props = Omit<BoxProps, "children"> & {
      * @default false
      */
     hideDots?: boolean;
-    /** Props to supply to the dot buttons */
-    dotProps?: Omit<ButtonProps, "children">;
     /** Props to supply to the left arrow button */
     leftArrowProps?: ButtonProps;
     /** Props to supply to the right arrow button */

package/components/Carousel/Carousel.js

@@ -1 +1 @@
-import{jsx as u,jsxs as w,Fragment as I}from"react/jsx-runtime";import U,{useState as V,useEffect as W,useRef as X,useCallback as q}from"react";import{classNames as P}from"../../functions";import j from"../Button";import m from"../Box/Box";import R from"../Icon";import{chevronLeft as G,chevronRight as H}from"../../icons";var c=function(){return c=Object.assign||function(r){for(var e,a=1,t=arguments.length;a<t;a++){e=arguments[a];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},c.apply(this,arguments)},B=function(r,e){var a={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&e.indexOf(t)<0&&(a[t]=r[t]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,t=Object.getOwnPropertySymbols(r);n<t.length;n++)e.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(r,t[n])&&(a[t[n]]=r[t[n]]);return a},J=1,_={width:"full",height:"full",stretch:"max"},S={axis:"x",align:"center",justify:"center",radius:"max",padding:"none"},K=U.forwardRef(function(r,e){var a,t,n=r.children,D=r.hideArrows,E=r.vfx,T=r.hideDots,d=r.dotProps,i=r.leftArrowProps,o=r.rightArrowProps,f=r.autoplayInterval,v=r.duration,k=B(r,["children","hideArrows","vfx","hideDots","dotProps","leftArrowProps","rightArrowProps","autoplayInterval","duration"]);v=Math.max(v!=null?v:J,.1),f=f?Math.max(v,f):void 0;var x=n.length,A=V({cur:0,delta:0,animating:!1}),b=A[0],N=A[1],O=X(null),p=b.cur,g=b.delta,y=b.animating,M=C(p+g,x),h=q(function(l){y||l===0||N(function(s){return c(c({},s),{delta:l,animating:!0})})},[y]),F=function(){N(function(l){var s=l.delta,z=l.cur;return{delta:s,animating:!1,cur:C(z+s,x)}})};if(W(function(){return f&&(O.current=window.setInterval(function(){return h(1)},f*1e3)),function(){var l=O.current;O.current=null,l&&clearInterval(l)}},[f,h]),x<=0)return null;var L=y?{transform:"translateX(".concat(-(g/Math.abs(g))*100,"%)"),transition:"transform ".concat(v,"s ease-in-out")}:void 0;return w(m,c({},k,{vfx:c({maxWidth:"full",width:"fit",pos:"relative",overflow:"hidden"},E),ref:e,children:[w(m,{vfx:{axis:g>=0?"x":"-x",width:"full",height:"full"},style:L,onTransitionEnd:F,children:[u(m,{vfx:_,children:n[p]}),u(m,{vfx:_,"aria-hidden":!0,children:n[M]})]}),x>1&&w(I,{children:[!D&&w(I,{children:[u(j,{vfx:S,className:P("aui-carousel-arrow",i==null?void 0:i.className),style:c({left:8},i==null?void 0:i.style),"aria-label":"previous",onClick:function(){return h(-1)},children:(a=i==null?void 0:i.children)!==null&&a!==void 0?a:u(R,{icon:G,size:"xs",style:{marginRight:2}})}),u(j,{vfx:S,className:P("aui-carousel-arrow",o==null?void 0:o.className),style:c({right:8},o==null?void 0:o.style),"aria-label":"next",onClick:function(){return h(1)},children:(t=o==null?void 0:o.children)!==null&&t!==void 0?t:u(R,{icon:H,size:"xs",style:{marginLeft:2}})})]}),!T&&u(m,{vfx:{axis:"x",align:"center",gap:"xxs"},className:"aui-carousel-dots",children:n.map(function(l,s){return u(j,{className:P("aui-carousel-dot",d==null?void 0:d.className),vfx:{radius:"max",padding:"none"},disabled:p===s||y,onClick:function(){return h(s-p)},style:d==null?void 0:d.style},s)})})]})]}))});function C(r,e){return(r%e+e)%e}var er=K;export{er as default};
+import{jsx as u,jsxs as w,Fragment as I}from"react/jsx-runtime";import U,{useCallback as V,useEffect as W,useRef as X,useState as q}from"react";import{classNames as P}from"../../functions";import{chevronLeft as G,chevronRight as H}from"../../icons";import m from"../Box/Box";import j from"../Button";import R from"../Icon";var c=function(){return c=Object.assign||function(r){for(var e,a=1,t=arguments.length;a<t;a++){e=arguments[a];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},c.apply(this,arguments)},B=function(r,e){var a={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&e.indexOf(t)<0&&(a[t]=r[t]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,t=Object.getOwnPropertySymbols(r);n<t.length;n++)e.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(r,t[n])&&(a[t[n]]=r[t[n]]);return a},J=1,_={width:"full",height:"full",stretch:"max"},S={axis:"x",align:"center",justify:"center",radius:"max",padding:"none"},K=U.forwardRef(function(r,e){var a,t,n=r.children,D=r.hideArrows,E=r.vfx,T=r.hideDots,d=r.dotProps,i=r.leftArrowProps,o=r.rightArrowProps,f=r.autoplayInterval,v=r.duration,k=B(r,["children","hideArrows","vfx","hideDots","dotProps","leftArrowProps","rightArrowProps","autoplayInterval","duration"]);v=Math.max(v!=null?v:J,.1),f=f?Math.max(v,f):void 0;var x=n.length,A=q({cur:0,delta:0,animating:!1}),b=A[0],N=A[1],O=X(null),p=b.cur,g=b.delta,y=b.animating,M=C(p+g,x),h=V(function(l){y||l===0||N(function(s){return c(c({},s),{delta:l,animating:!0})})},[y]),F=function(){N(function(l){var s=l.delta,z=l.cur;return{delta:s,animating:!1,cur:C(z+s,x)}})};if(W(function(){return f&&(O.current=window.setInterval(function(){return h(1)},f*1e3)),function(){var l=O.current;O.current=null,l&&clearInterval(l)}},[f,h]),x<=0)return null;var L=y?{transform:"translateX(".concat(-(g/Math.abs(g))*100,"%)"),transition:"transform ".concat(v,"s ease-in-out")}:void 0;return w(m,c({},k,{vfx:c({maxWidth:"full",width:"fit",pos:"relative",overflow:"hidden"},E),ref:e,children:[w(m,{vfx:{axis:g>=0?"x":"-x",width:"full",height:"full"},style:L,onTransitionEnd:F,children:[u(m,{vfx:_,children:n[p]}),u(m,{vfx:_,"aria-hidden":!0,children:n[M]})]}),x>1&&w(I,{children:[!D&&w(I,{children:[u(j,{vfx:S,className:P("aui-carousel-arrow",i==null?void 0:i.className),style:c({left:8},i==null?void 0:i.style),"aria-label":"previous",onClick:function(){return h(-1)},children:(a=i==null?void 0:i.children)!==null&&a!==void 0?a:u(R,{icon:G,size:"xs",style:{marginRight:2}})}),u(j,{vfx:S,className:P("aui-carousel-arrow",o==null?void 0:o.className),style:c({right:8},o==null?void 0:o.style),"aria-label":"next",onClick:function(){return h(1)},children:(t=o==null?void 0:o.children)!==null&&t!==void 0?t:u(R,{icon:H,size:"xs",style:{marginLeft:2}})})]}),!T&&u(m,{vfx:{axis:"x",align:"center",gap:"xxs"},className:"aui-carousel-dots",children:n.map(function(l,s){return u(j,{className:P("aui-carousel-dot",d==null?void 0:d.className),vfx:{radius:"max",padding:"none"},disabled:p===s||y,onClick:function(){return h(s-p)},style:d==null?void 0:d.style},s)})})]})]}))});function C(r,e){return(r%e+e)%e}var er=K;export{er as default};

package/components/ClickOutside/ClickOutside.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type Config } from "./useClickOutside";
-type Props = Pick<Config, "onClickOutside" | "eventType"> & {
+type Props = Pick<Config, "eventType" | "onClickOutside"> & {
     /**
      * The children to render.
      * IMPORTANT: The child must be a single element which can hold a ref.

package/components/ClickOutside/useClickOutside.d.ts

@@ -2,20 +2,20 @@ import type { ReadonlyableArray } from "../../types/common";
 export type EventType = "click" | "mousedown" | "mouseup" | "pointerdown" | "pointerup";
 type TargetRef = React.RefObject<Element | null | undefined>;
 export type Config = {
-    /** Element(s) to treat as the "inside" boundary */
-    targets: ReadonlyableArray<TargetRef>;
-    /** Callback fired when an event occurs outside all targets */
-    onClickOutside: (event: MouseEvent | PointerEvent) => void;
-    /**
-     * Document event type to listen for.
-     * @default "mousedown"
-     */
-    eventType?: EventType;
     /**
      * Whether the listener is enabled.
      * @default true
      */
     enabled?: boolean;
+    /**
+     * Document event type to listen for.
+     * @default "mousedown"
+     */
+    eventType?: EventType;
+    /** Callback fired when an event occurs outside all targets */
+    onClickOutside: (event: MouseEvent | PointerEvent) => void;
+    /** Element(s) to treat as the "inside" boundary */
+    targets: ReadonlyableArray<TargetRef>;
 };
 /**
  * Fire a callback when an event occurs outside all targets.

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -5,16 +5,16 @@ type FallbackProps = {
     reset: () => void;
 };
 type Props = {
-    /** Component to render when an error is caught */
-    Fallback: React.ComponentType<FallbackProps>;
     /** Children wrapped by the error boundary */
     children: React.ReactNode;
+    /** Dependencies to trigger a reset on change */
+    deps?: ReadonlyableArray<unknown>;
+    /** Component to render when an error is caught */
+    Fallback: React.ComponentType<FallbackProps>;
     /** Called when an error is caught */
     onError?: (error: Error, info: React.ErrorInfo) => void;
     /** Called when the error state is reset */
     onReset?: () => void;
-    /** Dependencies to trigger a reset on change */
-    deps?: ReadonlyableArray<unknown>;
 };
 type State = {
     error: Error | null;

package/components/Floating/Floating.d.ts

@@ -1,40 +1,37 @@
 import React from "react";
 import type { Children, Style } from "../../types/common";
 import Animated from "../Animated/Animated";
-type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-type SafeStyle = Omit<Style, "top" | "left" | "right" | "bottom" | "position" | "transform" | "translate" | "all">;
+type Placement = "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
+type SafeStyle = Omit<Style, "all" | "position" | "transform" | "visibility">;
 type AnimatedProps = React.ComponentProps<typeof Animated>;
-type Props = Omit<AnimatedProps, "children" | "visible" | "keepMounted" | "style" | "from" | "to"> & {
+type Props = Omit<AnimatedProps, "children" | "from" | "to" | "keepMounted" | "style" | "visible"> & {
     /**
      * Anchor element the floating content is positioned relative to.
      * IMPORTANT: must be a single element that can hold a ref.
      */
     anchor: React.ReactElement<any>;
+    /** Whether to automatically flip to the opposite placement when it would overflow */
+    flip?: boolean;
     /** Content rendered in the floating element */
-    floatingContent: Children;
-    /** Controls the visibility of the floating content */
-    visible: boolean;
-    /**
-     * Position the floating element around the anchor.
-     * @default "bottom"
-     */
-    placement?: Placement;
+    floating: Children;
     /**
      * Pixel offset between anchor and floating element.
      * @default 0
      */
     offset?: number;
     /**
-     * Whether to flip to the opposite placement when overflowing viewport.
-     * @default true
+     * Position the floating element around the anchor.
+     * @default "bottom"
      */
-    flip?: boolean;
-    /** Style that can be safely applied to the floating element without distrupting positioning */
+    placement?: Placement;
+    /** Style that can be safely applied to the floating element without disrupting positioning */
     style?: SafeStyle;
-    /** Animation CSS for the start state (styles cannot override positioning) */
+    /** Animation CSS for the start state */
     from?: SafeStyle;
-    /** Animation CSS for the end state (styles cannot override positioning) */
+    /** Animation CSS for the end state */
     to?: SafeStyle;
+    /** Controls the visibility of the floating content */
+    visible: boolean;
 };
 /** Position content relative to an anchor element */
 declare const Floating: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/Floating/Floating.js

@@ -1 +1 @@
-import{jsx as vt,Fragment as ct,jsxs as dt}from"react/jsx-runtime";import M,{useCallback as ht,useLayoutEffect as gt,useRef as W,useState as mt}from"react";import q from"../../hooks/useMergeRefs";import pt from"../Animated/Animated";var v=function(){return v=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},v.apply(this,arguments)},st=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(t!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]]);return n},bt={top:"bottom","top-start":"bottom-start","top-end":"bottom-end",bottom:"top","bottom-start":"top-start","bottom-end":"top-end",left:"right","left-start":"right-start","left-end":"right-end",right:"left","right-start":"left-start","right-end":"left-end"},wt=M.forwardRef(function(t,e){var n=t.anchor,r=t.floatingContent,o=t.visible,L=t.placement,P=L===void 0?"bottom":L,k=t.offset,z=k===void 0?0:k,B=t.flip,F=B===void 0?!0:B,tt=t.style,et=t.vfx,A=t.duration,rt=A===void 0?0:A,nt=st(t,["anchor","floatingContent","visible","placement","offset","flip","style","vfx","duration"]),m=W(null),p=W(null),ot=q(p,e),it=q(m,n.props.ref),S=mt(null),d=S[0],ft=S[1],f=ht(function(){var l,a=m.current,i=p.current;if(!(!a||!i)){var V=(l=a.offsetParent)!==null&&l!==void 0?l:a.parentElement;if(V){var u=V.getBoundingClientRect(),s=a.getBoundingClientRect(),b=i.getBoundingClientRect(),H={anchor:{top:s.top-u.top,left:s.left-u.left,right:s.right-u.left,bottom:s.bottom-u.top,width:s.width,height:s.height},floating:b,offset:z},h=P,c=U[h](H),ut=Z[h]($(c,u),b);if(F&&ut){var w=bt[h],I=U[w](H);Z[w]($(I,u),b)||(h=w,c=I)}ft(function(g){return g&&g.top===c.top&&g.left===c.left?g:c})}}},[F,z,P]);gt(function(){if(o){f(),window.addEventListener("resize",f),document.addEventListener("scroll",f,!0);var l=m.current,a=p.current,i=null;return l&&a&&(i=new ResizeObserver(f),i.observe(l),i.observe(a)),function(){window.removeEventListener("resize",f),document.removeEventListener("scroll",f,!0),i==null||i.disconnect()}}},[f,o]);var X=d!=null?d:{},Y=X.top,at=Y===void 0?0:Y,T=X.left,lt=T===void 0?0:T;return dt(ct,{children:[M.cloneElement(n,{ref:it}),vt(pt,v({},nt,{ref:ot,vfx:v({pos:"absolute",z:"floating"},et),style:v(v({},tt),{top:0,left:0,transform:"translate3d(".concat(lt,"px, ").concat(at,"px, 0)"),visibility:d?void 0:"hidden"}),visible:o,duration:rt,children:r}))]})}),D=function(t,e){return t.left+t.width/2-e.width/2},G=function(t){return t.left},J=function(t,e){return t.right-e.width},K=function(t,e){return t.top+t.height/2-e.height/2},N=function(t){return t.top},Q=function(t,e){return t.bottom-e.height},y=function(t){return function(e){var n=e.anchor,r=e.floating,o=e.offset;return{top:n.top-r.height-o,left:t(n,r)}}},R=function(t){return function(e){var n=e.anchor,r=e.floating,o=e.offset;return{top:n.bottom+o,left:t(n,r)}}},x=function(t){return function(e){var n=e.anchor,r=e.floating,o=e.offset;return{top:t(n,r),left:n.left-r.width-o}}},O=function(t){return function(e){var n=e.anchor,r=e.floating,o=e.offset;return{top:t(n,r),left:n.right+o}}},U={top:y(D),"top-start":y(G),"top-end":y(J),bottom:R(D),"bottom-start":R(G),"bottom-end":R(J),left:x(K),"left-start":x(N),"left-end":x(Q),right:O(K),"right-start":O(N),"right-end":O(Q)},E=function(t){return t.top<0},_=function(t,e){return t.top+e.height>window.innerHeight},j=function(t){return t.left<0},C=function(t,e){return t.left+e.width>window.innerWidth},Z={top:E,"top-start":E,"top-end":E,bottom:_,"bottom-start":_,"bottom-end":_,left:j,"left-start":j,"left-end":j,right:C,"right-start":C,"right-end":C},$=function(t,e){return{top:t.top+e.top,left:t.left+e.left}},Et=wt;export{Et as default};
+import{jsx as ct,Fragment as ut,jsxs as vt}from"react/jsx-runtime";import I,{useCallback as ht,useLayoutEffect as dt,useRef as S,useState as gt}from"react";import W from"../../hooks/useMergeRefs";import pt from"../Animated/Animated";var s=function(){return s=Object.assign||function(t){for(var e,r=1,o=arguments.length;r<o;r++){e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},s.apply(this,arguments)},st=function(t,e){var r={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,o=Object.getOwnPropertySymbols(t);n<o.length;n++)e.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(t,o[n])&&(r[o[n]]=t[o[n]]);return r},mt={top:"bottom","top-start":"bottom-start","top-end":"bottom-end",bottom:"top","bottom-start":"top-start","bottom-end":"top-end",left:"right","left-start":"right-start","left-end":"right-end",right:"left","right-start":"left-start","right-end":"left-end"},bt=I.forwardRef(function(t,e){var r=t.anchor,o=t.floating,n=t.visible,f=t.placement,h=f===void 0?"bottom":f,k=t.offset,C=k===void 0?0:k,c=t.flip,U=t.style,Z=t.vfx,P=t.duration,$=P===void 0?0:P,tt=st(t,["anchor","floating","visible","placement","offset","flip","style","vfx","duration"]),m=S(null),b=S(null),et=W(b,e),ot=W(m,r.props.ref),z=gt(null),d=z[0],rt=z[1],l=ht(function(){var u=m.current,a=b.current;if(!(!u||!a)){var i=a.offsetParent||document.documentElement,w=a.getBoundingClientRect(),it=u.getBoundingClientRect(),g=wt(i),lt=N(it,g),at=N(w,g),X={anchor:lt,floating:at,offset:C},v=J[h](X);if(c&&K[h](Q(v,g),w)){var Y=mt[h],H=J[Y](X);K[Y](Q(H,g),w)||(v=H)}rt(function(p){return p&&p.top===v.top&&p.left===v.left?p:v})}},[c,C,h]);dt(function(){if(n){l(),c&&document.addEventListener("scroll",l,!0),window.addEventListener("resize",l);var u=m.current,a=b.current,i=null;return u&&a&&(i=new ResizeObserver(l),i.observe(u),i.observe(a)),function(){c&&document.removeEventListener("scroll",l,!0),window.removeEventListener("resize",l),i==null||i.disconnect()}}},[l,n,c]);var B=d!=null?d:{},F=B.top,nt=F===void 0?0:F,T=B.left,ft=T===void 0?0:T;return vt(ut,{children:[I.cloneElement(r,{ref:ot}),ct(pt,s({},tt,{ref:et,vfx:s({pos:"absolute",z:"floating"},Z),style:s(s({},U),{top:0,left:0,transform:"translate3d(".concat(ft,"px, ").concat(nt,"px, 0)"),visibility:d?void 0:"hidden"}),visible:n,duration:$,children:o}))]})}),A=function(t,e){return t.left+t.width/2-e.width/2},M=function(t){return t.left},V=function(t,e){return t.right-e.width},q=function(t,e){return t.top+t.height/2-e.height/2},D=function(t){return t.top},G=function(t,e){return t.bottom-e.height},y=function(t){return function(e){var r=e.anchor,o=e.floating,n=e.offset;return{top:r.top-o.height-n,left:t(r,o)}}},R=function(t){return function(e){var r=e.anchor,o=e.floating,n=e.offset;return{top:r.bottom+n,left:t(r,o)}}},x=function(t){return function(e){var r=e.anchor,o=e.floating,n=e.offset;return{top:t(r,o),left:r.left-o.width-n}}},O=function(t){return function(e){var r=e.anchor,o=e.floating,n=e.offset;return{top:t(r,o),left:r.right+n}}},J={top:y(A),"top-start":y(M),"top-end":y(V),bottom:R(A),"bottom-start":R(M),"bottom-end":R(V),left:x(q),"left-start":x(D),"left-end":x(G),right:O(q),"right-start":O(D),"right-end":O(G)},E=function(t){return t.top<0},j=function(t,e){return t.top+e.height>window.innerHeight},L=function(t){return t.left<0},_=function(t,e){return t.left+e.width>window.innerWidth},K={top:E,"top-start":E,"top-end":E,bottom:j,"bottom-start":j,"bottom-end":j,left:L,"left-start":L,"left-end":L,right:_,"right-start":_,"right-end":_};function wt(t){if(t===document.documentElement)return{pos:{top:0,left:0},scroll:{top:window.scrollY,left:window.scrollX},scale:{x:1,y:1}};var e=t.getBoundingClientRect(),r=e.width,o=e.height,n=t.clientWidth,f=t.clientHeight;return{pos:{top:e.top,left:e.left},scroll:{top:t.scrollTop,left:t.scrollLeft},scale:{x:r&&n?r/n:1,y:o&&f?o/f:1}}}function N(t,e){var r=t.width/e.scale.x,o=t.height/e.scale.y,n=(t.left-e.pos.left)/e.scale.x+e.scroll.left,f=(t.top-e.pos.top)/e.scale.y+e.scroll.top;return{top:f,left:n,bottom:f+o,right:n+r,width:r,height:o}}function Q(t,e){return{top:(t.top-e.scroll.top)*e.scale.y+e.pos.top,left:(e.pos.left-e.scroll.left)*e.scale.y+e.pos.left}}var Et=bt;export{Et as default};

package/components/Hamburger/Hamburger.js

@@ -1 +1 @@
-import{jsx as d,jsxs as P}from"react/jsx-runtime";import{useMemo as M}from"react";import{UnstyledButton as z}from"../Button";var a=function(){return a=Object.assign||function(t){for(var o,r=1,e=arguments.length;r<e;r++){o=arguments[r];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},a.apply(this,arguments)},H=function(t,o){var r={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&o.indexOf(e)<0&&(r[e]=t[e]);if(t!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,e=Object.getOwnPropertySymbols(t);n<e.length;n++)o.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n])&&(r[e[n]]=t[e[n]]);return r},Y={right:45,left:-45},k={right:-135,left:-225},C=function(t){var o=t.size,r=o===void 0?36:o,e=t.duration,n=e===void 0?.25:e,s=t.double,l=t.openStyle,i=t.open,f=t.style,m=t.rounded,b=t.lineHeight,y=H(t,["size","duration","double","openStyle","open","style","rounded","lineHeight"]),g=b||Math.max(1,Math.round(r/20)),h={width:r,height:r,display:"flex",position:"relative",justifyContent:"center",alignItems:"center",transition:"transform ".concat(n,"s ease")},u={height:g,width:r*.7,backgroundColor:"currentColor",position:"absolute",transition:"transform ".concat(n,"s ease, opacity ").concat(n,"s ease"),borderRadius:m?1e4:0},c=M(function(){return r/(s?7:4)},[r,s]),p=l.outer,v=l.top,x=l.middle,O=l.bottom,_=i?p:{},j=i?v:{transform:"translateY(-".concat(c,"px)")},S=i?O:{transform:"translateY(".concat(c,"px)")},w=i?x:{};return P(z,a({style:a(a(a({},f),_),h)},y,{"aria-label":y["aria-label"]||"hamburger","aria-expanded":i,children:[d("span",{style:a(a({},u),j)}),!s&&d("span",{style:a(a({},u),w)}),d("span",{style:a(a({},u),S)})]}))},B=C;export{B as default,Y as defaultAngles,k as flipAngles};
+import{jsx as d,jsxs as M}from"react/jsx-runtime";import{useMemo as z}from"react";import y from"../Box";import{UnstyledButton as C}from"../Button";var o=function(){return o=Object.assign||function(t){for(var a,r=1,e=arguments.length;r<e;r++){a=arguments[r];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},o.apply(this,arguments)},P=function(t,a){var r={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&a.indexOf(e)<0&&(r[e]=t[e]);if(t!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,e=Object.getOwnPropertySymbols(t);n<e.length;n++)a.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n])&&(r[e[n]]=t[e[n]]);return r},k={right:45,left:-45},E={right:-135,left:-225},A=function(t){var a=t.size,r=a===void 0?36:a,e=t.duration,n=e===void 0?.25:e,s=t.double,l=t.openStyle,i=t.open,m=t.style,b=t.rounded,g=t.lineHeight,c=P(t,["size","duration","double","openStyle","open","style","rounded","lineHeight"]),h=g||Math.max(1,Math.round(r/20)),v={width:r,height:r,display:"flex",position:"relative",justifyContent:"center",alignItems:"center",transition:"transform ".concat(n,"s ease")},u={height:h,width:r*.7,backgroundColor:"currentColor",position:"absolute",transition:"transform ".concat(n,"s ease, opacity ").concat(n,"s ease"),borderRadius:b?1e4:0},f=z(function(){return r/(s?7:4)},[r,s]),p=l.outer,x=l.top,O=l.middle,_=l.bottom,j=i?p:{},S=i?x:{transform:"translateY(-".concat(f,"px)")},w=i?_:{transform:"translateY(".concat(f,"px)")},H=i?O:{};return M(C,o({style:o(o(o({},m),j),v)},c,{"aria-label":c["aria-label"]||"hamburger","aria-expanded":i,children:[d(y,{style:o(o({},u),S)}),!s&&d(y,{style:o(o({},u),H)}),d(y,{style:o(o({},u),w)})]}))},R=A;export{R as default,k as defaultAngles,E as flipAngles};

package/components/Hamburger/index.d.ts

@@ -1,8 +1,8 @@
-export { default } from "./TriplePrestige";
-export { default as TriplePrestige } from "./TriplePrestige";
 export { default as DoubleCross } from "./DoubleCross";
 export { default as DoubleFlip } from "./DoubleFlip";
 export { default as DoubleSpin } from "./DoubleSpin";
 export { default as TripleFade } from "./TripleFade";
 export { default as TripleFlip } from "./TripleFlip";
+export { default } from "./TriplePrestige";
+export { default as TriplePrestige } from "./TriplePrestige";
 export { default as TripleSpin } from "./TripleSpin";

package/components/Hamburger/index.js

@@ -1 +1 @@
-import{default as o}from"./TriplePrestige";import{default as t}from"./TriplePrestige";import{default as f}from"./DoubleCross";import{default as u}from"./DoubleFlip";import{default as d}from"./DoubleSpin";import{default as m}from"./TripleFade";import{default as T}from"./TripleFlip";import{default as D}from"./TripleSpin";export{f as DoubleCross,u as DoubleFlip,d as DoubleSpin,m as TripleFade,T as TripleFlip,t as TriplePrestige,D as TripleSpin,o as default};
+import{default as o}from"./DoubleCross";import{default as t}from"./DoubleFlip";import{default as f}from"./DoubleSpin";import{default as u}from"./TripleFade";import{default as d}from"./TripleFlip";import{default as m}from"./TriplePrestige";import{default as T}from"./TriplePrestige";import{default as D}from"./TripleSpin";export{o as DoubleCross,t as DoubleFlip,f as DoubleSpin,u as TripleFade,d as TripleFlip,T as TriplePrestige,D as TripleSpin,m as default};

package/components/Icon/Icon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { SizeToken } from "../../types/common";
-import ui from "../ui";
 import type { IconType } from "../../types/icon";
+import ui from "../ui";
 /** Props for `Icon` */
 export type Props = Omit<React.ComponentProps<typeof ui.svg>, "children" | "viewBox"> & {
     /** Icon type to render (import from `components/Icon/icons`) */

package/components/Input/IconInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { Props as InputProps } from "./Input";
 import { type BoxProps } from "../Box/Box";
+import { Props as InputProps } from "./Input";
 type IconInputProps = Omit<BoxProps, "children"> & {
     /** Icon to display at the start of the input */
     startIcon?: React.ReactNode;

package/components/Input/IconInput.js

@@ -1 +1 @@
-import{jsx as v,jsxs as x}from"react/jsx-runtime";import{forwardRef as d}from"react";import f from"../../functions/classNames";import b from"../Box/Box";import g from"../ui";var s=function(){return s=Object.assign||function(r){for(var e,n=1,t=arguments.length;n<t;n++){e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},s.apply(this,arguments)},i=function(r,e){var n={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&e.indexOf(t)<0&&(n[t]=r[t]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var a=0,t=Object.getOwnPropertySymbols(r);a<t.length;a++)e.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(r,t[a])&&(n[t[a]]=r[t[a]]);return n},y=d(function(r,e){var n=r.startIcon,t=r.className,a=r.vfx,u=r.inputProps,l=i(r,["startIcon","className","vfx","inputProps"]),o=u||{},p=o.className,c=o.vfx,m=i(o,["className","vfx"]);return x(b,s({vfx:s({axis:"x",align:"center",radius:"rounded",overflow:"scroll"},a),className:f("aui-input",t)},l,{ref:e,children:[n,v(g.input,s({},m,{vfx:s({radius:"rounded",backgroundColor:"transparent",width:"full"},c),className:f("aui-input-base",p)}))]}))}),w=y;export{w as default};
+import{jsx as v,jsxs as x}from"react/jsx-runtime";import{forwardRef as d}from"react";import f from"../../functions/classNames";import b from"../Box/Box";import g from"../ui";var s=function(){return s=Object.assign||function(r){for(var n,a=1,t=arguments.length;a<t;a++){n=arguments[a];for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&(r[e]=n[e])}return r},s.apply(this,arguments)},i=function(r,n){var a={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&n.indexOf(t)<0&&(a[t]=r[t]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var e=0,t=Object.getOwnPropertySymbols(r);e<t.length;e++)n.indexOf(t[e])<0&&Object.prototype.propertyIsEnumerable.call(r,t[e])&&(a[t[e]]=r[t[e]]);return a},h=d(function(r,n){var a=r.startIcon,t=r.className,e=r.vfx,u=r.inputProps,p=i(r,["startIcon","className","vfx","inputProps"]),o=u||{},l=o.className,c=o.vfx,m=i(o,["className","vfx"]);return x(b,s({vfx:s({axis:"x",align:"center",radius:"rounded",overflow:"hidden"},e),className:f("aui-input",t)},p,{ref:n,children:[a,v(g.input,s({},m,{vfx:s({radius:"rounded",backgroundColor:"transparent",width:"full"},c),className:f("aui-input-base",l)}))]}))}),w=h;export{w as default};

package/components/Input/index.d.ts

@@ -1,3 +1,3 @@
+export { default as IconInput } from "./IconInput";
 export { default } from "./Input";
 export { default as TextArea } from "./TextArea";
-export { default as IconInput } from "./IconInput";

package/components/Input/index.js

@@ -1 +1 @@
-import{default as o}from"./Input";import{default as a}from"./TextArea";import{default as p}from"./IconInput";export{p as IconInput,a as TextArea,o as default};
+import{default as o}from"./IconInput";import{default as a}from"./Input";import{default as p}from"./TextArea";export{o as IconInput,p as TextArea,a as default};