@gbmtech/aurora-ui 0.1.2 → 0.1.4

package/dist/cjs/components/input.cjs

@@ -1,3 +1,3 @@
 'use client'
-"use strict";let __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Input:()=>Input});let jsx_runtime_namespaceObject=require("react/jsx-runtime"),utils_cjs_namespaceObject=require("../lib/utils.cjs"),external_spinner_cjs_namespaceObject=require("./spinner.cjs");function Input({className:e,type:_,disabled:r,prefix:t,suffix:n,inputClassName:a,loading:c,loaderPosition:s="prefix",spinner:i,...p}){return(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,utils_cjs_namespaceObject.cn)("flex h-12 w-full items-center rounded-md border border-zinc-200 bg-background ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",e),"data-disabled":r,children:[c&&"prefix"===s?i||(0,jsx_runtime_namespaceObject.jsx)(external_spinner_cjs_namespaceObject.Spinner,{}):(0,jsx_runtime_namespaceObject.jsx)("span",{className:"ml-4",children:t}),(0,jsx_runtime_namespaceObject.jsx)("input",{className:(0,utils_cjs_namespaceObject.cn)("peer h-full w-full flex-1 overflow-hidden bg-transparent px-4 text-base outline-none placeholder:text-zinc-400",a),type:_,disabled:r,onKeyDown:e=>{"number"===_&&["e","E","+","-"].includes(e.key)&&e.preventDefault()},onFocus:e=>{"number"===_&&e.target.addEventListener("wheel",e=>{e.preventDefault()},{passive:!1})},...p}),c&&"suffix"===s?i||(0,jsx_runtime_namespaceObject.jsx)(external_spinner_cjs_namespaceObject.Spinner,{}):(0,jsx_runtime_namespaceObject.jsx)("span",{className:"mx-4",children:n})]})}for(var __webpack_i__ in exports.Input=__webpack_exports__.Input,__webpack_exports__)-1===["Input"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";let __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Input:()=>Input});let jsx_runtime_namespaceObject=require("react/jsx-runtime"),utils_cjs_namespaceObject=require("../lib/utils.cjs"),external_spinner_cjs_namespaceObject=require("./spinner.cjs");function Input({className:e,type:_,disabled:r,prefix:t,suffix:n,inputClassName:a,loading:c,loaderPosition:i="prefix",spinner:s,...p}){return(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,utils_cjs_namespaceObject.cn)("flex h-12 w-full items-center gap-4 rounded-md border border-zinc-200 bg-background px-4 ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",e),"data-disabled":r,children:[c&&"prefix"===i?s||(0,jsx_runtime_namespaceObject.jsx)(external_spinner_cjs_namespaceObject.Spinner,{}):t,(0,jsx_runtime_namespaceObject.jsx)("input",{className:(0,utils_cjs_namespaceObject.cn)("peer h-full w-full flex-1 overflow-hidden bg-transparent text-base outline-none placeholder:text-zinc-400",a),type:_,disabled:r,onKeyDown:e=>{"number"===_&&["e","E","+","-"].includes(e.key)&&e.preventDefault()},onFocus:e=>{"number"===_&&e.target.addEventListener("wheel",e=>{e.preventDefault()},{passive:!1})},...p}),c&&"suffix"===i?s||(0,jsx_runtime_namespaceObject.jsx)(external_spinner_cjs_namespaceObject.Spinner,{}):n]})}for(var __webpack_i__ in exports.Input=__webpack_exports__.Input,__webpack_exports__)-1===["Input"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
 //# sourceMappingURL=input.cjs.map

package/dist/cjs/components/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components\\input.cjs","sources":["webpack://@gbmtech/aurora-ui/./src/components/input.tsx"],"sourcesContent":["\r\n\r\nimport { ComponentProps, JSX, ReactNode } from 'react'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Spinner } from './spinner'\r\n\r\nexport type InputProps = Omit<ComponentProps<'input'>, 'prefix'> & {\r\n  prefix?: ReactNode\r\n  suffix?: ReactNode\r\n  inputClassName?: string\r\n  loaderPosition?: 'prefix' | 'suffix'\r\n  loading?: boolean\r\n  spinner?: ReactNode\r\n}\r\n\r\nfunction Input({\r\n  className,\r\n  type,\r\n  disabled,\r\n  prefix,\r\n  suffix,\r\n  inputClassName,\r\n  loading,\r\n  loaderPosition = 'prefix',\r\n  spinner,\r\n  ...props\r\n}: InputProps): JSX.Element {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'flex h-12 w-full items-center rounded-md border border-zinc-200 bg-background ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\r\n        className\r\n      )}\r\n      data-disabled={disabled}\r\n    >\r\n      {loading && loaderPosition === 'prefix' ? (\r\n        spinner || <Spinner />\r\n      ) : (\r\n        <span className=\"ml-4\">{prefix}</span>\r\n      )}\r\n\r\n      <input\r\n        className={cn(\r\n          'peer h-full w-full flex-1 overflow-hidden bg-transparent px-4 text-base outline-none placeholder:text-zinc-400',\r\n          inputClassName\r\n        )}\r\n        type={type}\r\n        disabled={disabled}\r\n        onKeyDown={e => {\r\n          if (type === 'number' && ['e', 'E', '+', '-'].includes(e.key)) {\r\n            e.preventDefault()\r\n          }\r\n        }}\r\n        onFocus={e => {\r\n          if (type === 'number') {\r\n            e.target.addEventListener(\r\n              'wheel',\r\n              e => {\r\n                e.preventDefault()\r\n              },\r\n              { passive: false }\r\n            )\r\n          }\r\n        }}\r\n        {...props}\r\n      />\r\n\r\n      {loading && loaderPosition === 'suffix' ? (\r\n        spinner || <Spinner />\r\n      ) : (\r\n        <span className=\"mx-4\">{suffix}</span>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Input }\r\n"],"names":["Input","className","type","disabled","prefix","suffix","inputClassName","loading","loaderPosition","spinner","props","cn","Spinner","e"],"mappings":";+8BAgBA,SAASA,MAAM,CACbC,UAAAA,CAAS,CACTC,KAAAA,CAAI,CACJC,SAAAA,CAAQ,CACRC,OAAAA,CAAM,CACNC,OAAAA,CAAM,CACNC,eAAAA,CAAc,CACdC,QAAAA,CAAO,CACPC,eAAAA,EAAiB,QAAQ,CACzBC,QAAAA,CAAO,CACP,GAAGC,EACQ,EACX,MACE,qCAAC,OACC,UAAWC,GAAAA,0BAAAA,EAAAA,EACT,4SACAV,GAEF,gBAAeE,E,UAEdI,GAAWC,WAAAA,EACVC,GAAW,oCAACG,qCAAAA,OAAOA,CAAAA,CAAAA,GAEnB,oCAAC,QAAK,UAAU,O,SAAQR,C,GAG1B,oCAAC,SACC,UAAWO,GAAAA,0BAAAA,EAAAA,EACT,iHACAL,GAEF,KAAMJ,EACN,SAAUC,EACV,UAAWU,IACLX,WAAAA,GAAqB,CAAC,IAAK,IAAK,IAAK,IAAI,CAAC,QAAQ,CAACW,EAAE,GAAG,GAC1DA,EAAE,cAAc,EAEpB,EACA,QAASA,IACHX,WAAAA,GACFW,EAAE,MAAM,CAAC,gBAAgB,CACvB,QACAA,IACEA,EAAE,cAAc,EAClB,EACA,CAAE,QAAS,EAAM,EAGvB,EACC,GAAGH,CAAK,GAGVH,GAAWC,WAAAA,EACVC,GAAW,oCAACG,qCAAAA,OAAOA,CAAAA,CAAAA,GAEnB,oCAAC,QAAK,UAAU,O,SAAQP,C,KAIhC,C"}
+{"version":3,"file":"components\\input.cjs","sources":["webpack://@gbmtech/aurora-ui/./src/components/input.tsx"],"sourcesContent":["\r\n\r\nimport { ComponentProps, JSX, ReactNode } from 'react'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Spinner } from './spinner'\r\n\r\nexport type InputProps = Omit<ComponentProps<'input'>, 'prefix'> & {\r\n  prefix?: ReactNode\r\n  suffix?: ReactNode\r\n  inputClassName?: string\r\n  loaderPosition?: 'prefix' | 'suffix'\r\n  loading?: boolean\r\n  spinner?: ReactNode\r\n}\r\n\r\nfunction Input({\r\n  className,\r\n  type,\r\n  disabled,\r\n  prefix,\r\n  suffix,\r\n  inputClassName,\r\n  loading,\r\n  loaderPosition = 'prefix',\r\n  spinner,\r\n  ...props\r\n}: InputProps): JSX.Element {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'flex h-12 w-full items-center gap-4 rounded-md border border-zinc-200 bg-background px-4 ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\r\n        className\r\n      )}\r\n      data-disabled={disabled}\r\n    >\r\n      {loading && loaderPosition === 'prefix' ? spinner || <Spinner /> : prefix}\r\n\r\n      <input\r\n        className={cn(\r\n          'peer h-full w-full flex-1 overflow-hidden bg-transparent text-base outline-none placeholder:text-zinc-400',\r\n          inputClassName\r\n        )}\r\n        type={type}\r\n        disabled={disabled}\r\n        onKeyDown={e => {\r\n          if (type === 'number' && ['e', 'E', '+', '-'].includes(e.key)) {\r\n            e.preventDefault()\r\n          }\r\n        }}\r\n        onFocus={e => {\r\n          if (type === 'number') {\r\n            e.target.addEventListener(\r\n              'wheel',\r\n              e => {\r\n                e.preventDefault()\r\n              },\r\n              { passive: false }\r\n            )\r\n          }\r\n        }}\r\n        {...props}\r\n      />\r\n\r\n      {loading && loaderPosition === 'suffix' ? spinner || <Spinner /> : suffix}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Input }\r\n"],"names":["Input","className","type","disabled","prefix","suffix","inputClassName","loading","loaderPosition","spinner","props","cn","Spinner","e"],"mappings":";+8BAgBA,SAASA,MAAM,CACbC,UAAAA,CAAS,CACTC,KAAAA,CAAI,CACJC,SAAAA,CAAQ,CACRC,OAAAA,CAAM,CACNC,OAAAA,CAAM,CACNC,eAAAA,CAAc,CACdC,QAAAA,CAAO,CACPC,eAAAA,EAAiB,QAAQ,CACzBC,QAAAA,CAAO,CACP,GAAGC,EACQ,EACX,MACE,qCAAC,OACC,UAAWC,GAAAA,0BAAAA,EAAAA,EACT,uTACAV,GAEF,gBAAeE,E,UAEdI,GAAWC,WAAAA,EAA8BC,GAAW,oCAACG,qCAAAA,OAAOA,CAAAA,CAAAA,GAAMR,EAEnE,oCAAC,SACC,UAAWO,GAAAA,0BAAAA,EAAAA,EACT,4GACAL,GAEF,KAAMJ,EACN,SAAUC,EACV,UAAWU,IACLX,WAAAA,GAAqB,CAAC,IAAK,IAAK,IAAK,IAAI,CAAC,QAAQ,CAACW,EAAE,GAAG,GAC1DA,EAAE,cAAc,EAEpB,EACA,QAASA,IACHX,WAAAA,GACFW,EAAE,MAAM,CAAC,gBAAgB,CACvB,QACAA,IACEA,EAAE,cAAc,EAClB,EACA,CAAE,QAAS,EAAM,EAGvB,EACC,GAAGH,CAAK,GAGVH,GAAWC,WAAAA,EAA8BC,GAAW,oCAACG,qCAAAA,OAAOA,CAAAA,CAAAA,GAAMP,E,EAGzE,C"}

package/dist/cjs/index.css

@@ -181,3 +181,399 @@
   --color-purple-800: #351856;
   --color-purple-900: #2a1440;
 }
+/**
+ * Keyframe Animations
+ * -----------------------------------------------------------------------------
+ * Defines basic animations such as cursor blinking effects,
+ * expanding/collapsing content effects.
+ */
+ @theme inline {
+  --animate-caret-blink: caret-blink 1250ms ease-out infinite;
+  --animate-collapsible-up: collapsible-up 200ms ease-in;
+  --animate-collapsible-down: collapsible-down 200ms ease-out;
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      /*noinspection CssUnresolvedCustomProperty*/
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      /*noinspection CssUnresolvedCustomProperty*/
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+}
+
+/**
+ * Animation Timing Functions
+ * -----------------------------------------------------------------------------
+ * Easing functions used to adjust the speed of animation transitions.
+ */
+@theme inline {
+  --animate-fade-in: fadeIn 250ms ease-out;
+  --animate-fade-out: fadeOut 250ms ease-in;
+
+  --animate-in: enter 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-out: exit 250ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  @keyframes fadeIn {
+    from {
+      opacity: var(--tw-enter-opacity, 0);
+    }
+  }
+
+  @keyframes fadeOut {
+    to {
+      opacity: var(--tw-exit-opacity, 0);
+    }
+  }
+
+  @keyframes enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+        scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+        rotate(var(--tw-enter-rotate, 0));
+    }
+  }
+
+  @keyframes exit {
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+        scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+        rotate(var(--tw-exit-rotate, 0));
+    }
+  }
+}
+
+/**
+ * Animation Timing Functions
+ * -----------------------------------------------------------------------------
+ * Defines utilities to adjust animation speed.
+ */
+@utility animation-ease-linear {
+  animation-timing-function: linear;
+}
+
+@utility animation-ease-in {
+  animation-timing-function: var(--ease-in);
+}
+
+@utility animation-ease-out {
+  animation-timing-function: var(--ease-out);
+}
+
+@utility animation-ease-in-out {
+  animation-timing-function: var(--ease-in-out);
+}
+
+@utility animation-ease-initial {
+  animation-timing-function: initial;
+}
+
+@utility animation-ease-* {
+  animation-timing-function: --value([*]);
+}
+
+/**
+ * Animation Play State
+ * -----------------------------------------------------------------------------
+ * Adjust the playback state of the animation.
+ */
+@utility animation-state-paused {
+  animation-play-state: paused;
+}
+
+@utility animation-state-running {
+  animation-play-state: running;
+}
+
+@utility animation-state-initial {
+  animation-play-state: initial;
+}
+
+@utility animation-state-* {
+  animation-play-state: --value([*]);
+}
+
+/**
+ * Animation Repeat
+ * -----------------------------------------------------------------------------
+ * Controls the number of repetitions of the animation.
+ */
+@utility animation-repeat-infinite {
+  animation-iteration-count: infinite;
+}
+
+@utility animation-repeat-initial {
+  animation-iteration-count: initial;
+}
+
+@utility animation-repeat-* {
+  animation-iteration-count: --value(integer, [integer]);
+}
+
+/**
+ * Animation Composition
+ * -----------------------------------------------------------------------------
+ * Defines how animations combine with each other.
+ */
+@utility animation-composition-replace {
+  animation-composition: replace;
+}
+
+@utility animation-composition-add {
+  animation-composition: add;
+}
+
+@utility animation-composition-accumulate {
+  animation-composition: accumulate;
+}
+
+@utility animation-composition-initial {
+  animation-composition: initial;
+}
+
+@utility animation-composition-* {
+  animation-composition: --value([*]);
+}
+
+/**
+ * Animation Delay
+ * -----------------------------------------------------------------------------
+ * Adjust the delay time before the animation starts.
+ */
+@utility animation-delay-initial {
+  animation-delay: initial;
+}
+
+@utility animation-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value([*]);
+}
+
+/**
+ * Animation Direction
+ * -----------------------------------------------------------------------------
+ * Determines the playback direction of the animation.
+ */
+@utility animation-direction-normal {
+  animation-direction: normal;
+}
+
+@utility animation-direction-reverse {
+  animation-direction: reverse;
+}
+
+@utility animation-direction-alternate {
+  animation-direction: alternate;
+}
+
+@utility animation-direction-alternate-reverse {
+  animation-direction: alternate-reverse;
+}
+
+@utility animation-direction-initial {
+  animation-direction: initial;
+}
+
+@utility animation-direction-* {
+  animation-direction: --value([*]);
+}
+
+/**
+ * Animation Duration
+ * -----------------------------------------------------------------------------
+ * Defines the duration of the animation execution.
+ */
+@utility animation-duration-initial {
+  animation-duration: initial;
+}
+
+@utility animation-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+  animation-duration: --value([*]);
+}
+
+/**
+ * Animation Fill Mode
+ * -----------------------------------------------------------------------------
+ * Defines the state of the element after the animation ends.
+ */
+@utility animation-fill-none {
+  animation-fill-mode: none;
+}
+
+@utility animation-fill-forwards {
+  animation-fill-mode: forwards;
+}
+
+@utility animation-fill-backwards {
+  animation-fill-mode: backwards;
+}
+
+@utility animation-fill-both {
+  animation-fill-mode: both;
+}
+
+@utility animation-fill-* {
+  animation-fill-mode: --value([*]);
+}
+
+/**
+ * Fade Animations
+ * -----------------------------------------------------------------------------
+ * Create fade-in and fade-out effects.
+ */
+@utility fade-in-* {
+  --tw-enter-opacity: calc(--value(integer) * 1%);
+  --tw-enter-opacity: --value(--opacity-*, [percentage]);
+}
+
+@utility fade-out-* {
+  --tw-exit-opacity: calc(--value(integer) * 1%);
+  --tw-exit-opacity: --value(--opacity-*, [percentage]);
+}
+
+/**
+ * Rotate Animations
+ * -----------------------------------------------------------------------------
+ * Adjust the rotation angle of the element when it appears or disappears.
+ */
+@utility spin-in-* {
+  --tw-enter-rotate: calc(1deg * --value(integer));
+}
+
+@utility spin-out-* {
+  --tw-exit-rotate: calc(1deg * --value(integer));
+}
+
+/**
+ * Scale Animations
+ * -----------------------------------------------------------------------------
+ * Adjust the size of the element when it appears or disappears.
+ */
+@utility zoom-in-* {
+  --tw-enter-scale: --value([percentage]);
+  --tw-enter-scale: calc(--value(integer) * 1%);
+}
+
+@utility zoom-out-* {
+  --tw-exit-scale: --value([percentage]);
+  --tw-exit-scale: calc(--value(integer) * 1%);
+}
+
+/**
+ * Slide Animations - Enter
+ * -----------------------------------------------------------------------------
+ * Effects for sliding in from directions: left, right, top, bottom.
+ */
+
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(var(--spacing) * --value(number) * -1);
+  --tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-enter-translate-y: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+@utility slide-in-from-left-* {
+  --tw-enter-translate-x: calc(var(--spacing) * --value(number) * -1);
+  --tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-enter-translate-x: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+@utility slide-in-from-bottom-* {
+  --tw-enter-translate-y: calc(var(--spacing) * --value(number));
+  --tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-enter-translate-y: --value([length], [percentage]);
+}
+
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+@utility slide-in-from-right-* {
+  --tw-enter-translate-x: calc(var(--spacing) * --value(number));
+  --tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-enter-translate-x: --value([length], [percentage]);
+}
+
+/**
+ * Slide Animations - Exit
+ * -----------------------------------------------------------------------------
+ * Effects for sliding out of the screen in directions: left, right, top, bottom.
+ */
+
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(var(--spacing) * --value(number) * -1);
+  --tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-exit-translate-y: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
+@utility slide-out-to-left-* {
+  --tw-exit-translate-x: calc(var(--spacing) * --value(number) * -1);
+  --tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-exit-translate-x: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
+@utility slide-out-to-bottom-* {
+  --tw-exit-translate-y: calc(var(--spacing) * --value(number));
+  --tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-exit-translate-y: --value([length], [percentage]);
+}
+
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
+@utility slide-out-to-right-* {
+  --tw-exit-translate-x: calc(var(--spacing) * --value(number));
+  --tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-exit-translate-x: --value([length], [percentage]);
+}

package/dist/esm/components/input.js

@@ -1,3 +1,3 @@
 'use client'
-import*as e from"react/jsx-runtime";import*as n from"../lib/utils.js";import*as r from"./spinner.js";function s({className:s,type:i,disabled:t,prefix:a,suffix:l,inputClassName:o,loading:d,loaderPosition:u="prefix",spinner:c,...f}){return(0,e.jsxs)("div",{className:(0,n.cn)("flex h-12 w-full items-center rounded-md border border-zinc-200 bg-background ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",s),"data-disabled":t,children:[d&&"prefix"===u?c||(0,e.jsx)(r.Spinner,{}):(0,e.jsx)("span",{className:"ml-4",children:a}),(0,e.jsx)("input",{className:(0,n.cn)("peer h-full w-full flex-1 overflow-hidden bg-transparent px-4 text-base outline-none placeholder:text-zinc-400",o),type:i,disabled:t,onKeyDown:e=>{"number"===i&&["e","E","+","-"].includes(e.key)&&e.preventDefault()},onFocus:e=>{"number"===i&&e.target.addEventListener("wheel",e=>{e.preventDefault()},{passive:!1})},...f}),d&&"suffix"===u?c||(0,e.jsx)(r.Spinner,{}):(0,e.jsx)("span",{className:"mx-4",children:l})]})}export{s as Input};
+import*as e from"react/jsx-runtime";import*as n from"../lib/utils.js";import*as r from"./spinner.js";function t({className:t,type:i,disabled:s,prefix:o,suffix:a,inputClassName:l,loading:d,loaderPosition:u="prefix",spinner:f,...c}){return(0,e.jsxs)("div",{className:(0,n.cn)("flex h-12 w-full items-center gap-4 rounded-md border border-zinc-200 bg-background px-4 ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",t),"data-disabled":s,children:[d&&"prefix"===u?f||(0,e.jsx)(r.Spinner,{}):o,(0,e.jsx)("input",{className:(0,n.cn)("peer h-full w-full flex-1 overflow-hidden bg-transparent text-base outline-none placeholder:text-zinc-400",l),type:i,disabled:s,onKeyDown:e=>{"number"===i&&["e","E","+","-"].includes(e.key)&&e.preventDefault()},onFocus:e=>{"number"===i&&e.target.addEventListener("wheel",e=>{e.preventDefault()},{passive:!1})},...c}),d&&"suffix"===u?f||(0,e.jsx)(r.Spinner,{}):a]})}export{t as Input};
 //# sourceMappingURL=input.js.map

package/dist/esm/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\input.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/input.tsx"],"sourcesContent":["\r\n\r\nimport { ComponentProps, JSX, ReactNode } from 'react'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Spinner } from './spinner'\r\n\r\nexport type InputProps = Omit<ComponentProps<'input'>, 'prefix'> & {\r\n  prefix?: ReactNode\r\n  suffix?: ReactNode\r\n  inputClassName?: string\r\n  loaderPosition?: 'prefix' | 'suffix'\r\n  loading?: boolean\r\n  spinner?: ReactNode\r\n}\r\n\r\nfunction Input({\r\n  className,\r\n  type,\r\n  disabled,\r\n  prefix,\r\n  suffix,\r\n  inputClassName,\r\n  loading,\r\n  loaderPosition = 'prefix',\r\n  spinner,\r\n  ...props\r\n}: InputProps): JSX.Element {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'flex h-12 w-full items-center rounded-md border border-zinc-200 bg-background ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\r\n        className\r\n      )}\r\n      data-disabled={disabled}\r\n    >\r\n      {loading && loaderPosition === 'prefix' ? (\r\n        spinner || <Spinner />\r\n      ) : (\r\n        <span className=\"ml-4\">{prefix}</span>\r\n      )}\r\n\r\n      <input\r\n        className={cn(\r\n          'peer h-full w-full flex-1 overflow-hidden bg-transparent px-4 text-base outline-none placeholder:text-zinc-400',\r\n          inputClassName\r\n        )}\r\n        type={type}\r\n        disabled={disabled}\r\n        onKeyDown={e => {\r\n          if (type === 'number' && ['e', 'E', '+', '-'].includes(e.key)) {\r\n            e.preventDefault()\r\n          }\r\n        }}\r\n        onFocus={e => {\r\n          if (type === 'number') {\r\n            e.target.addEventListener(\r\n              'wheel',\r\n              e => {\r\n                e.preventDefault()\r\n              },\r\n              { passive: false }\r\n            )\r\n          }\r\n        }}\r\n        {...props}\r\n      />\r\n\r\n      {loading && loaderPosition === 'suffix' ? (\r\n        spinner || <Spinner />\r\n      ) : (\r\n        <span className=\"mx-4\">{suffix}</span>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Input }\r\n"],"names":["Input","className","type","disabled","prefix","suffix","inputClassName","loading","loaderPosition","spinner","props","cn","Spinner","e"],"mappings":";qGAgBA,SAASA,EAAM,CACbC,UAAAA,CAAS,CACTC,KAAAA,CAAI,CACJC,SAAAA,CAAQ,CACRC,OAAAA,CAAM,CACNC,OAAAA,CAAM,CACNC,eAAAA,CAAc,CACdC,QAAAA,CAAO,CACPC,eAAAA,EAAiB,QAAQ,CACzBC,QAAAA,CAAO,CACP,GAAGC,EACQ,EACX,MACE,WAAC,OACC,UAAWC,GAAAA,EAAAA,EAAAA,EACT,4SACAV,GAEF,gBAAeE,E,UAEdI,GAAWC,WAAAA,EACVC,GAAW,UAACG,EAAAA,OAAOA,CAAAA,CAAAA,GAEnB,UAAC,QAAK,UAAU,O,SAAQR,C,GAG1B,UAAC,SACC,UAAWO,GAAAA,EAAAA,EAAAA,EACT,iHACAL,GAEF,KAAMJ,EACN,SAAUC,EACV,UAAWU,IACLX,WAAAA,GAAqB,CAAC,IAAK,IAAK,IAAK,IAAI,CAAC,QAAQ,CAACW,EAAE,GAAG,GAC1DA,EAAE,cAAc,EAEpB,EACA,QAASA,IACHX,WAAAA,GACFW,EAAE,MAAM,CAAC,gBAAgB,CACvB,QACAA,IACEA,EAAE,cAAc,EAClB,EACA,CAAE,QAAS,EAAM,EAGvB,EACC,GAAGH,CAAK,GAGVH,GAAWC,WAAAA,EACVC,GAAW,UAACG,EAAAA,OAAOA,CAAAA,CAAAA,GAEnB,UAAC,QAAK,UAAU,O,SAAQP,C,KAIhC,Q"}
+{"version":3,"file":"components\\input.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/input.tsx"],"sourcesContent":["\r\n\r\nimport { ComponentProps, JSX, ReactNode } from 'react'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Spinner } from './spinner'\r\n\r\nexport type InputProps = Omit<ComponentProps<'input'>, 'prefix'> & {\r\n  prefix?: ReactNode\r\n  suffix?: ReactNode\r\n  inputClassName?: string\r\n  loaderPosition?: 'prefix' | 'suffix'\r\n  loading?: boolean\r\n  spinner?: ReactNode\r\n}\r\n\r\nfunction Input({\r\n  className,\r\n  type,\r\n  disabled,\r\n  prefix,\r\n  suffix,\r\n  inputClassName,\r\n  loading,\r\n  loaderPosition = 'prefix',\r\n  spinner,\r\n  ...props\r\n}: InputProps): JSX.Element {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'flex h-12 w-full items-center gap-4 rounded-md border border-zinc-200 bg-background px-4 ring-offset-background placeholder:text-zinc-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-gbm-sky focus-within:ring-offset-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\r\n        className\r\n      )}\r\n      data-disabled={disabled}\r\n    >\r\n      {loading && loaderPosition === 'prefix' ? spinner || <Spinner /> : prefix}\r\n\r\n      <input\r\n        className={cn(\r\n          'peer h-full w-full flex-1 overflow-hidden bg-transparent text-base outline-none placeholder:text-zinc-400',\r\n          inputClassName\r\n        )}\r\n        type={type}\r\n        disabled={disabled}\r\n        onKeyDown={e => {\r\n          if (type === 'number' && ['e', 'E', '+', '-'].includes(e.key)) {\r\n            e.preventDefault()\r\n          }\r\n        }}\r\n        onFocus={e => {\r\n          if (type === 'number') {\r\n            e.target.addEventListener(\r\n              'wheel',\r\n              e => {\r\n                e.preventDefault()\r\n              },\r\n              { passive: false }\r\n            )\r\n          }\r\n        }}\r\n        {...props}\r\n      />\r\n\r\n      {loading && loaderPosition === 'suffix' ? spinner || <Spinner /> : suffix}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Input }\r\n"],"names":["Input","className","type","disabled","prefix","suffix","inputClassName","loading","loaderPosition","spinner","props","cn","Spinner","e"],"mappings":";qGAgBA,SAASA,EAAM,CACbC,UAAAA,CAAS,CACTC,KAAAA,CAAI,CACJC,SAAAA,CAAQ,CACRC,OAAAA,CAAM,CACNC,OAAAA,CAAM,CACNC,eAAAA,CAAc,CACdC,QAAAA,CAAO,CACPC,eAAAA,EAAiB,QAAQ,CACzBC,QAAAA,CAAO,CACP,GAAGC,EACQ,EACX,MACE,WAAC,OACC,UAAWC,GAAAA,EAAAA,EAAAA,EACT,uTACAV,GAEF,gBAAeE,E,UAEdI,GAAWC,WAAAA,EAA8BC,GAAW,UAACG,EAAAA,OAAOA,CAAAA,CAAAA,GAAMR,EAEnE,UAAC,SACC,UAAWO,GAAAA,EAAAA,EAAAA,EACT,4GACAL,GAEF,KAAMJ,EACN,SAAUC,EACV,UAAWU,IACLX,WAAAA,GAAqB,CAAC,IAAK,IAAK,IAAK,IAAI,CAAC,QAAQ,CAACW,EAAE,GAAG,GAC1DA,EAAE,cAAc,EAEpB,EACA,QAASA,IACHX,WAAAA,GACFW,EAAE,MAAM,CAAC,gBAAgB,CACvB,QACAA,IACEA,EAAE,cAAc,EAClB,EACA,CAAE,QAAS,EAAM,EAGvB,EACC,GAAGH,CAAK,GAGVH,GAAWC,WAAAA,EAA8BC,GAAW,UAACG,EAAAA,OAAOA,CAAAA,CAAAA,GAAMP,E,EAGzE,Q"}

package/dist/esm/index.css

@@ -181,3 +181,399 @@
   --color-purple-800: #351856;
   --color-purple-900: #2a1440;
 }
+/**
+ * Keyframe Animations
+ * -----------------------------------------------------------------------------
+ * Defines basic animations such as cursor blinking effects,
+ * expanding/collapsing content effects.
+ */
+ @theme inline {
+  --animate-caret-blink: caret-blink 1250ms ease-out infinite;
+  --animate-collapsible-up: collapsible-up 200ms ease-in;
+  --animate-collapsible-down: collapsible-down 200ms ease-out;
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      /*noinspection CssUnresolvedCustomProperty*/
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      /*noinspection CssUnresolvedCustomProperty*/
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+}
+
+/**
+ * Animation Timing Functions
+ * -----------------------------------------------------------------------------
+ * Easing functions used to adjust the speed of animation transitions.
+ */
+@theme inline {
+  --animate-fade-in: fadeIn 250ms ease-out;
+  --animate-fade-out: fadeOut 250ms ease-in;
+
+  --animate-in: enter 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-out: exit 250ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  @keyframes fadeIn {
+    from {
+      opacity: var(--tw-enter-opacity, 0);
+    }
+  }
+
+  @keyframes fadeOut {
+    to {
+      opacity: var(--tw-exit-opacity, 0);
+    }
+  }
+
+  @keyframes enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+        scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+        rotate(var(--tw-enter-rotate, 0));
+    }
+  }
+
+  @keyframes exit {
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+        scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+        rotate(var(--tw-exit-rotate, 0));
+    }
+  }
+}
+
+/**
+ * Animation Timing Functions
+ * -----------------------------------------------------------------------------
+ * Defines utilities to adjust animation speed.
+ */
+@utility animation-ease-linear {
+  animation-timing-function: linear;
+}
+
+@utility animation-ease-in {
+  animation-timing-function: var(--ease-in);
+}
+
+@utility animation-ease-out {
+  animation-timing-function: var(--ease-out);
+}
+
+@utility animation-ease-in-out {
+  animation-timing-function: var(--ease-in-out);
+}
+
+@utility animation-ease-initial {
+  animation-timing-function: initial;
+}
+
+@utility animation-ease-* {
+  animation-timing-function: --value([*]);
+}
+
+/**
+ * Animation Play State
+ * -----------------------------------------------------------------------------
+ * Adjust the playback state of the animation.
+ */
+@utility animation-state-paused {
+  animation-play-state: paused;
+}
+
+@utility animation-state-running {
+  animation-play-state: running;
+}
+
+@utility animation-state-initial {
+  animation-play-state: initial;
+}
+
+@utility animation-state-* {
+  animation-play-state: --value([*]);
+}
+
+/**
+ * Animation Repeat
+ * -----------------------------------------------------------------------------
+ * Controls the number of repetitions of the animation.
+ */
+@utility animation-repeat-infinite {
+  animation-iteration-count: infinite;
+}
+
+@utility animation-repeat-initial {
+  animation-iteration-count: initial;
+}
+
+@utility animation-repeat-* {
+  animation-iteration-count: --value(integer, [integer]);
+}
+
+/**
+ * Animation Composition
+ * -----------------------------------------------------------------------------
+ * Defines how animations combine with each other.
+ */
+@utility animation-composition-replace {
+  animation-composition: replace;
+}
+
+@utility animation-composition-add {
+  animation-composition: add;
+}
+
+@utility animation-composition-accumulate {
+  animation-composition: accumulate;
+}
+
+@utility animation-composition-initial {
+  animation-composition: initial;
+}
+
+@utility animation-composition-* {
+  animation-composition: --value([*]);
+}
+
+/**
+ * Animation Delay
+ * -----------------------------------------------------------------------------
+ * Adjust the delay time before the animation starts.
+ */
+@utility animation-delay-initial {
+  animation-delay: initial;
+}
+
+@utility animation-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value([*]);
+}
+
+/**
+ * Animation Direction
+ * -----------------------------------------------------------------------------
+ * Determines the playback direction of the animation.
+ */
+@utility animation-direction-normal {
+  animation-direction: normal;
+}
+
+@utility animation-direction-reverse {
+  animation-direction: reverse;
+}
+
+@utility animation-direction-alternate {
+  animation-direction: alternate;
+}
+
+@utility animation-direction-alternate-reverse {
+  animation-direction: alternate-reverse;
+}
+
+@utility animation-direction-initial {
+  animation-direction: initial;
+}
+
+@utility animation-direction-* {
+  animation-direction: --value([*]);
+}
+
+/**
+ * Animation Duration
+ * -----------------------------------------------------------------------------
+ * Defines the duration of the animation execution.
+ */
+@utility animation-duration-initial {
+  animation-duration: initial;
+}
+
+@utility animation-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+  animation-duration: --value([*]);
+}
+
+/**
+ * Animation Fill Mode
+ * -----------------------------------------------------------------------------
+ * Defines the state of the element after the animation ends.
+ */
+@utility animation-fill-none {
+  animation-fill-mode: none;
+}
+
+@utility animation-fill-forwards {
+  animation-fill-mode: forwards;
+}
+
+@utility animation-fill-backwards {
+  animation-fill-mode: backwards;
+}
+
+@utility animation-fill-both {
+  animation-fill-mode: both;
+}
+
+@utility animation-fill-* {
+  animation-fill-mode: --value([*]);
+}
+
+/**
+ * Fade Animations
+ * -----------------------------------------------------------------------------
+ * Create fade-in and fade-out effects.
+ */
+@utility fade-in-* {
+  --tw-enter-opacity: calc(--value(integer) * 1%);
+  --tw-enter-opacity: --value(--opacity-*, [percentage]);
+}
+
+@utility fade-out-* {
+  --tw-exit-opacity: calc(--value(integer) * 1%);
+  --tw-exit-opacity: --value(--opacity-*, [percentage]);
+}
+
+/**
+ * Rotate Animations
+ * -----------------------------------------------------------------------------
+ * Adjust the rotation angle of the element when it appears or disappears.
+ */
+@utility spin-in-* {
+  --tw-enter-rotate: calc(1deg * --value(integer));
+}
+
+@utility spin-out-* {
+  --tw-exit-rotate: calc(1deg * --value(integer));
+}
+
+/**
+ * Scale Animations
+ * -----------------------------------------------------------------------------
+ * Adjust the size of the element when it appears or disappears.
+ */
+@utility zoom-in-* {
+  --tw-enter-scale: --value([percentage]);
+  --tw-enter-scale: calc(--value(integer) * 1%);
+}
+
+@utility zoom-out-* {
+  --tw-exit-scale: --value([percentage]);
+  --tw-exit-scale: calc(--value(integer) * 1%);
+}
+
+/**
+ * Slide Animations - Enter
+ * -----------------------------------------------------------------------------
+ * Effects for sliding in from directions: left, right, top, bottom.
+ */
+
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(var(--spacing) * --value(number) * -1);
+  --tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-enter-translate-y: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+@utility slide-in-from-left-* {
+  --tw-enter-translate-x: calc(var(--spacing) * --value(number) * -1);
+  --tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-enter-translate-x: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+@utility slide-in-from-bottom-* {
+  --tw-enter-translate-y: calc(var(--spacing) * --value(number));
+  --tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-enter-translate-y: --value([length], [percentage]);
+}
+
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+@utility slide-in-from-right-* {
+  --tw-enter-translate-x: calc(var(--spacing) * --value(number));
+  --tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-enter-translate-x: --value([length], [percentage]);
+}
+
+/**
+ * Slide Animations - Exit
+ * -----------------------------------------------------------------------------
+ * Effects for sliding out of the screen in directions: left, right, top, bottom.
+ */
+
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(var(--spacing) * --value(number) * -1);
+  --tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-exit-translate-y: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
+@utility slide-out-to-left-* {
+  --tw-exit-translate-x: calc(var(--spacing) * --value(number) * -1);
+  --tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
+  --tw-exit-translate-x: calc(--value([length], [percentage]) * -1);
+}
+
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
+@utility slide-out-to-bottom-* {
+  --tw-exit-translate-y: calc(var(--spacing) * --value(number));
+  --tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-exit-translate-y: --value([length], [percentage]);
+}
+
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
+@utility slide-out-to-right-* {
+  --tw-exit-translate-x: calc(var(--spacing) * --value(number));
+  --tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
+  --tw-exit-translate-x: --value([length], [percentage]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gbmtech/aurora-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",