@clicktap/ui 0.14.15 → 0.14.17

package/components/ContextMenu/ContextMenu.d.ts

@@ -1,3 +1,3 @@
 import { PopoverProps } from './ContextMenu.types';
-export declare function ContextMenu({ children, key, onAction, setAnimation, animation, className, classNames, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextMenu({ children, key, onAction, setAnimation, animation, className, classNames, onAnimationStart, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export default ContextMenu;

package/components/ContextMenu/ContextMenu.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{Popover as x,Menu as h}from"react-aria-components";import{forwardRef as c}from"react";import{motion as _}from"framer-motion";import{cn as m}from"../../utils/cn.js";const b=c(({style:o,...e},n)=>{const r=typeof o=="function"?o(e):o;return t(x,{...e,ref:n,style:r})}),l=_.create(b);function P({children:o,key:e,onAction:n,setAnimation:r,animation:d="hidden",className:a,classNames:i,...u}){return t(l,{className:m("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-56","bg-white","border border-solid border-slate-300",a),isExiting:d==="hidden",onAnimationComplete:f=>{r(p=>f==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:d,...u,children:t(h,{className:m("outline-none",i==null?void 0:i.menu),onAction:n,children:o})},e)}export{P as ContextMenu,P as default};
+import{jsx as t}from"react/jsx-runtime";import{Popover as x,Menu as h}from"react-aria-components";import{forwardRef as c}from"react";import{motion as _}from"framer-motion";import{cn as m}from"../../utils/cn.js";const b=c(({style:o,...n},r)=>{const e=typeof o=="function"?o(n):o;return t(x,{...n,ref:r,style:e})}),l=_.create(b);function A({children:o,key:n,onAction:r,setAnimation:e,animation:d="hidden",className:a,classNames:i,onAnimationStart:y,...u}){return t(l,{className:m("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-56","bg-white","border border-solid border-slate-300",a),isExiting:d==="hidden",onAnimationComplete:f=>{e(p=>f==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:d,...u,children:t(h,{className:m("outline-none",i==null?void 0:i.menu),onAction:r,children:o})},n)}export{A as ContextMenu,A as default};

package/components/ContextMenu/ContextMenu.tsx

@@ -32,6 +32,7 @@ export function ContextMenu({
   animation = 'hidden',
   className,
   classNames,
+  onAnimationStart,
   ...props
 }: PopoverProps) {
   return (

package/components/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { DialogProps } from './Dialog.types';
-export declare function Dialog({ className, children, animationVariants, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ className, children, animationVariants, onAnimationStart, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/components/Dialog/Dialog.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Dialog as s}from"react-aria-components";import{motion as l}from"framer-motion";import{cn as m}from"../../utils/cn.js";const f=i(({style:a,animationVariants:o,...r},t)=>{const n=typeof a=="function"?a(r):a;return e(s,{...r,ref:t,style:n})}),c=l.create(f);function x({className:a,children:o,animationVariants:r,...t}){return e(c,{className:m("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400","transform -translate-x-1/2 -translate-y-1/2",a),...t,variants:r||{hidden:{transform:"translate(-50%, -50%) scale(0.8)",transition:{ease:"backIn"}},visible:{transform:"translate(-50%, -50%) scale(1)",transition:{ease:"backOut"}}},children:o})}export{x as Dialog,x as default};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Dialog as s}from"react-aria-components";import{motion as l}from"framer-motion";import{cn as m}from"../../utils/cn.js";const f=i(({style:a,animationVariants:r,...t},n)=>{const o=typeof a=="function"?a(t):a;return e(s,{...t,ref:n,style:o})}),c=l.create(f);function x({className:a,children:r,animationVariants:t,onAnimationStart:n,...o}){return e(c,{className:m("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400","transform -translate-x-1/2 -translate-y-1/2",a),...o,variants:t||{hidden:{transform:"translate(-50%, -50%) scale(0.8)",transition:{ease:"backIn"}},visible:{transform:"translate(-50%, -50%) scale(1)",transition:{ease:"backOut"}}},children:r})}export{x as Dialog,x as default};

package/components/Dialog/Dialog.tsx

@@ -28,6 +28,7 @@ export function Dialog({
   className,
   children,
   animationVariants,
+  onAnimationStart,
   ...props
 }: DialogProps) {
   return (

package/components/Drawer/Drawer.d.ts

@@ -1,3 +1,3 @@
 import { DrawerProps } from './Drawer.types';
-export declare function Drawer({ direction, children, className, animationVariants, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ direction, children, className, animationVariants, onAnimationStart, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 export default Drawer;

package/components/Drawer/Drawer.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Dialog as n}from"react-aria-components";import{motion as d}from"framer-motion";import{cn as b}from"../../utils/cn.js";const m={top:{hidden:{y:"-100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},bottom:{hidden:{y:"100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},right:{hidden:{x:"100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}},left:{hidden:{x:"-100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}}},h=s(({style:t,size:r="20rem",...e},a)=>{const o=typeof t=="function"?t(e):{...t,"--drawer-size":`${r}`};return i(n,{...e,ref:a,style:o})}),l=d.create(h);function g({direction:t="right",children:r,className:e,animationVariants:a,...o}){return i(l,{className:b("fixed p-8 outline-0 bg-white","border-solid border-slate-200","max-w-full max-h-[var(--visual-viewport-height)]",t==="top"&&"top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="right"&&"top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",t==="bottom"&&"bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="left"&&"top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",e),"data-direction":t,variants:a||m[t],...o,children:r})}export{g as Drawer,g as default};
+import{jsx as i}from"react/jsx-runtime";import{forwardRef as n}from"react";import{Dialog as d}from"react-aria-components";import{motion as m}from"framer-motion";import{cn as b}from"../../utils/cn.js";const h={top:{hidden:{y:"-100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},bottom:{hidden:{y:"100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},right:{hidden:{x:"100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}},left:{hidden:{x:"-100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}}},l=n(({style:t,size:r="20rem",...e},a)=>{const o=typeof t=="function"?t(e):{...t,"--drawer-size":`${r}`};return i(d,{...e,ref:a,style:o})}),p=m.create(l);function v({direction:t="right",children:r,className:e,animationVariants:a,onAnimationStart:o,...s}){return i(p,{className:b("fixed p-8 outline-0 bg-white","border-solid border-slate-200","max-w-full max-h-[var(--visual-viewport-height)]",t==="top"&&"top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="right"&&"top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",t==="bottom"&&"bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="left"&&"top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",e),"data-direction":t,variants:a||h[t],...s,children:r})}export{v as Drawer,v as default};

package/components/Drawer/Drawer.tsx

@@ -95,6 +95,7 @@ export function Drawer({
   children,
   className,
   animationVariants,
+  onAnimationStart,
   ...props
 }: DrawerProps) {
   return (

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as p,useId as v}from"react";import{ModalOverlay as y}from"react-aria-components";import{motion as h,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=p(({style:i,...e},t)=>{const n=typeof i=="function"?i(e):i;return o(y,{...e,ref:t,style:n})}),g=h.create(O);function a({animate:i,animation:e,setAnimation:t,className:n,animationVariants:d,children:l,...m}){const s=v(),{key:c,...f}=m;return o(g,{isExiting:e==="hidden",onAnimationComplete:u=>{t(r=>u==="hidden"&&r==="hidden"?"unmounted":r)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",n),...f,children:l},c||s)}function j(i){const{isOpen:e}=i,{animation:t,setAnimation:n}=x();return e!==void 0?o(b,{children:e&&o(a,{...i,animate:"visible",animation:t,setAnimation:n})}):o(a,{...i,animate:t,animation:t,setAnimation:n})}export{j as ModalOverlay,j as default};
+import{jsx as n}from"react/jsx-runtime";import{forwardRef as u,useId as v}from"react";import{ModalOverlay as h}from"react-aria-components";import{motion as y,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=u(({style:i,...t},e)=>n(h,{...t,ref:e,style:i})),g=y.create(O);function a({animate:i,animation:t,setAnimation:e,className:o,animationVariants:d,onAnimationStart:k,children:l,...m}){const s=v(),{key:c,...f}=m;return n(g,{isExiting:t==="hidden",onAnimationComplete:p=>{e(r=>p==="hidden"&&r==="hidden"?"unmounted":r)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",o),...f,children:l},c||s)}function z(i){const{isOpen:t}=i,{animation:e,setAnimation:o}=x();return t!==void 0?n(b,{children:t&&n(a,{...i,animate:"visible",animation:e,setAnimation:o})}):n(a,{...i,animate:e,animation:e,setAnimation:o})}export{z as ModalOverlay,z as default};

package/components/ModalOverlay/ModalOverlay.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, useId } from 'react';
-import type { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
+import type { CSSProperties, Dispatch, ReactNode, SetStateAction } from 'react';
 import { ModalOverlay as UIModalOverlay } from 'react-aria-components';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useDialogTrigger } from '../DialogTrigger/DialogTrigger';
@@ -10,17 +10,16 @@ import type { DriverAnimationState } from '../DialogTrigger/DialogTrigger.types'
 import { cn } from '../../utils/cn';
 import type { ModalOverlayProps } from './ModalOverlay.types';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ForwardedModalOverlay = forwardRef<HTMLElement, any>(
-  ({ style, ...props }, ref: Ref<HTMLElement>) => {
-    // Separate the dynamic style logic
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-    const ariaStyle = typeof style === 'function' ? style(props) : style;
-
+const ForwardedModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
+  ({ style, ...props }, ref) => {
     return (
       // Pass only static styles to framer-motion
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, react/jsx-props-no-spreading
-      <UIModalOverlay {...props} ref={ref} style={ariaStyle} />
+      <UIModalOverlay
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+        style={style as CSSProperties}
+      />
     );
   }
 );
@@ -33,6 +32,7 @@ function InnerModalOverlay({
   setAnimation,
   className,
   animationVariants,
+  onAnimationStart,
   children,
   ...props
 }: ModalOverlayProps & {

package/components/ToggleButton/ToggleButton.stories.tsx

@@ -37,10 +37,10 @@ export const Example: Story = {
     autoFocus: {
       control: 'boolean',
     },
-    type: {
-      options: ['button', 'submit', 'reset'],
-      control: { type: 'radio' },
-    },
+    // type: {
+    //   options: ['button', 'submit', 'reset'],
+    //   control: { type: 'radio' },
+    // },
     excludeFromTabOrder: {
       control: 'boolean',
     },
@@ -73,7 +73,7 @@ export const Example: Story = {
     autoFocus: false,
     defaultSelected: false,
     excludeFromTabOrder: false,
-    type: 'button',
+    // type: 'button',
     children: 'Press me',
     onPress: action('onPress'),
     onPressStart: action('onPressStart'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.14.15",
+  "version": "0.14.17",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",

package/components/Tabs/Tabs.context.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const TabsOrientationContext: import('react').Context<import('react-aria').Orientation | undefined>;
-export default TabsOrientationContext;