@kushagradhawan/kookie-ui 0.1.32 → 0.1.34

package/src/components/icon-button.tsx

@@ -114,6 +114,8 @@ const IconButton = React.forwardRef(
     }: IconButtonProps,
     forwardedRef: React.ForwardedRef<IconButtonElement>,
   ) => {
+    // Generate unique ID for tooltip accessibility
+    const tooltipId = React.useId();
     // Runtime accessibility validation to ensure WCAG compliance
     // This helps catch accessibility issues during development
     const hasAriaLabel = 'aria-label' in props && props['aria-label'];
@@ -130,10 +132,18 @@ const IconButton = React.forwardRef(
       );
     }
 
+    // Prepare accessibility props for tooltip integration
+    const hasTooltip = Boolean(tooltip);
+    const tooltipAccessibilityProps = React.useMemo(
+      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
+      [hasTooltip, tooltipId],
+    );
+
     // Create the base icon button element with accessibility props
     const iconButton = (
       <BaseButton
         {...props}
+        {...tooltipAccessibilityProps}
         ref={forwardedRef}
         className={classNames('rt-IconButton', className)}
       />
@@ -153,6 +163,7 @@ const IconButton = React.forwardRef(
         align={tooltipAlign}
         delayDuration={tooltipDelayDuration}
         disableHoverableContent={tooltipDisableHoverableContent}
+        id={tooltipId}
       >
         {iconButton}
       </Tooltip>

package/src/components/icons.tsx

@@ -24,7 +24,7 @@ const ThickDividerHorizontalIcon = React.forwardRef<IconElement, IconProps>(
         />
       </svg>
     );
-  }
+  },
 );
 
 ThickDividerHorizontalIcon.displayName = 'ThickDividerHorizontalIcon';
@@ -105,5 +105,100 @@ const ThickDotIcon = React.forwardRef<IconElement, IconProps>((props, forwardedR
 });
 ThickDotIcon.displayName = 'ThickDotIcon';
 
-export { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon, ThickDotIcon };
+export {
+  ChevronDownIcon,
+  ThickCheckIcon,
+  ThickChevronRightIcon,
+  ThickDividerHorizontalIcon,
+  ThickDotIcon,
+};
 export type { IconProps };
+
+// Additional minimal icons
+const CloseIcon = React.forwardRef<IconElement, IconProps>((_props, _forwardedRef) => {
+  return (
+    <svg
+      {..._props}
+      ref={_forwardedRef}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+});
+CloseIcon.displayName = 'CloseIcon';
+
+const PaperclipIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg
+      {...props}
+      ref={forwardedRef}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" />
+    </svg>
+  );
+});
+PaperclipIcon.displayName = 'PaperclipIcon';
+
+const FileIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    </svg>
+  );
+});
+FileIcon.displayName = 'FileIcon';
+
+const FileTextIcon = React.forwardRef<IconElement, IconProps>((_props, _forwardedRef) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+      <path d="M10 9H8" />
+      <path d="M16 13H8" />
+      <path d="M16 17H8" />
+    </svg>
+  );
+});
+FileTextIcon.displayName = 'FileTextIcon';
+
+export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon };

package/src/components/image.css

@@ -25,7 +25,7 @@
 .rt-Image {
   display: block;
   object-fit: var(--object-fit); /* Controlled by fit prop */
-  border-radius: var(--radius-4); /* Default radius, can be overridden */
+  border-radius: var(--radius-2); /* Default radius, can be overridden */
 }
 
 /* 
@@ -78,7 +78,7 @@
  */
 .rt-Image:where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--duration-2) var(--ease-1); /* Smooth transitions for interactive states */
+  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* 
    * Hover effects with progressive enhancement
@@ -116,7 +116,7 @@
  */
 :where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--duration-2) var(--ease-1); /* Smooth transitions for interactive states */
+  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* Hover effects for wrapper elements */
   @media (hover: hover) {

package/src/components/index.css

@@ -38,11 +38,13 @@
 @import './radio-cards.css';
 @import './radio-group.css';
 @import './radio.css';
+@import './sheet.css';
 @import './scroll-area.css';
 @import './segmented-control.css';
 @import './select.css';
 @import './separator.css';
 @import './sidebar.css';
+@import './shell.css';
 @import './slider.css';
 @import './spinner.css';
 @import './strong.css';
@@ -55,6 +57,7 @@
 @import './theme-panel.css';
 @import './tooltip.css';
 @import './user-card.css';
+@import './chatbar.css';
 
 .radix-themes:where([data-is-root-theme='true']) {
   /* Create a new stacking context on the root `Theme` so layered components work out of the box */

package/src/components/index.tsx

@@ -68,3 +68,6 @@ export { Tooltip, type TooltipProps } from './tooltip.js';
 export { UserCard, type UserCardProps } from './user-card.js';
 export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';
 export * as Sidebar from './sidebar.js';
+export * as Shell from './shell.js';
+export * as Sheet from './sheet.js';
+export * as Chatbar from './chatbar.js';

package/src/components/popover.css

@@ -13,6 +13,8 @@
   --inset-padding-right: var(--popover-content-padding);
   --inset-padding-bottom: var(--popover-content-padding);
   --inset-padding-left: var(--popover-content-padding);
+  /* Default toolbar padding maps to content padding; overridden per size below */
+  --popover-toolbar-padding: var(--popover-content-padding);
   padding: var(--popover-content-padding);
   box-sizing: border-box;
 
@@ -33,6 +35,45 @@
     background-color: var(--color-panel-translucent);
     backdrop-filter: var(--backdrop-filter-panel);
   }
+
+  /* Toolbar integration */
+  &:where([data-has-toolbar]) {
+    /* When toolbar is present, top padding equals toolbar height */
+    padding-top: var(--popover-toolbar-offset, var(--popover-content-padding));
+  }
+}
+
+.rt-PopoverToolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  column-gap: var(--space-1);
+  padding: var(--popover-toolbar-padding);
+  background-color: var(--color-panel);
+}
+
+.rt-PopoverToolbarSection {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.rt-PopoverToolbarLeft { justify-self: start; }
+
+.rt-PopoverToolbarCenter { grid-column: 2; justify-self: center; min-width: 0; text-align: center; }
+
+.rt-PopoverToolbarRight { justify-self: end; }
+
+.rt-PopoverToolbarTitle {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /***************************************************************************************************
@@ -44,20 +85,24 @@
 @breakpoints {
   .rt-PopoverContent {
     &:where(.rt-r-size-1) {
-      --popover-content-padding: var(--space-3);
-      border-radius: var(--radius-3);
+      --popover-content-padding: var(--space-5);
+      --popover-toolbar-padding: var(--space-2);
+      border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     &:where(.rt-r-size-2) {
-      --popover-content-padding: var(--space-4);
-      border-radius: var(--radius-4);
+      --popover-content-padding: var(--space-6);
+      --popover-toolbar-padding: var(--space-2);
+      border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     &:where(.rt-r-size-3) {
-      --popover-content-padding: var(--space-5);
-      border-radius: var(--radius-5);
+      --popover-content-padding: var(--space-7);
+      --popover-toolbar-padding: var(--space-3);
+      border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     &:where(.rt-r-size-4) {
-      --popover-content-padding: var(--space-6);
-      border-radius: var(--radius-6);
+      --popover-content-padding: var(--space-8);
+      --popover-toolbar-padding: var(--space-4);
+      border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
   }
 }

package/src/components/popover.tsx

@@ -11,6 +11,29 @@ import { useThemeContext } from './theme.js';
 import type { PopoverContentOwnProps } from './popover.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
+// ---------------------------------------------
+// Popover Content Context
+// ---------------------------------------------
+type PopoverContentContextValue = {
+  /** Ref to the Popover.Content DOM node */
+  contentRef: React.MutableRefObject<HTMLDivElement | null>;
+  /** Update content's toolbar offset variable and presence flag */
+  setToolbarOffset: (offsetPx: number) => void;
+  /** Wire up aria-labelledby for toolbar title */
+  setLabelId: (id: string | undefined) => void;
+};
+
+const PopoverContentContext = React.createContext<PopoverContentContextValue | null>(null);
+const usePopoverContentContext = (caller: string) => {
+  const ctx = React.useContext(PopoverContentContext);
+  if (!ctx) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`${caller} must be used within Popover.Content`);
+    }
+  }
+  return ctx;
+};
+
 interface PopoverRootProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}
 const PopoverRoot: React.FC<PopoverRootProps> = (props: PopoverRootProps) => (
   <PopoverPrimitive.Root {...props} />
@@ -46,6 +69,35 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
       panelBackground: _,
       ...contentProps
     } = extractProps(props, popoverContentPropDefs);
+
+    // Manage refs (we need the DOM node to apply CSS variables)
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const combinedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    const [labelId, setLabelId] = React.useState<string | undefined>(undefined);
+
+    const setToolbarOffset = React.useCallback((offsetPx: number) => {
+      const el = contentRef.current;
+      if (!el) return;
+      if (offsetPx > 0) {
+        el.style.setProperty('--popover-toolbar-offset', `${offsetPx}px`);
+        el.setAttribute('data-has-toolbar', 'true');
+      } else {
+        el.style.removeProperty('--popover-toolbar-offset');
+        el.removeAttribute('data-has-toolbar');
+      }
+    }, []);
+
     return (
       <PopoverPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
@@ -54,10 +106,15 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             sideOffset={8}
             collisionPadding={10}
             {...contentProps}
-            ref={forwardedRef}
+            ref={combinedRef}
+            aria-labelledby={labelId}
             data-panel-background={panelBackground}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
-          />
+          >
+            <PopoverContentContext.Provider value={{ contentRef, setToolbarOffset, setLabelId }}>
+              {props.children}
+            </PopoverContentContext.Provider>
+          </PopoverPrimitive.Content>
         </Theme>
       </PopoverPrimitive.Portal>
     );
@@ -88,12 +145,133 @@ const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>
 
 PopoverAnchor.displayName = 'Popover.Anchor';
 
+// ---------------------------------------------
+// Toolbar (Popover-only)
+// ---------------------------------------------
+
+type PopoverToolbarElement = HTMLDivElement;
+type PopoverToolbarProps = React.ComponentPropsWithoutRef<'div'>;
+
+const PopoverToolbarBase = React.forwardRef<PopoverToolbarElement, PopoverToolbarProps>(
+  ({ className, children, ...props }, forwardedRef) => {
+    const ctx = usePopoverContentContext('Popover.Toolbar');
+
+    const localRef = React.useRef<HTMLDivElement | null>(null);
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        localRef.current = node;
+        if (typeof forwardedRef === 'function') forwardedRef(node);
+        else if (forwardedRef)
+          (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [forwardedRef],
+    );
+
+    React.useEffect(() => {
+      if (!ctx || !localRef.current) return;
+      const el = localRef.current;
+      const update = () => {
+        const height = el.getBoundingClientRect().height;
+        ctx.setToolbarOffset(height);
+      };
+      update();
+      const ro = new ResizeObserver(update);
+      ro.observe(el);
+      return () => {
+        ro.disconnect();
+        ctx.setToolbarOffset(0);
+      };
+    }, [ctx]);
+
+    return (
+      <div {...props} ref={setRefs} className={classNames('rt-PopoverToolbar', className)}>
+        {children}
+      </div>
+    );
+  },
+);
+(PopoverToolbarBase as any).displayName = 'Popover.Toolbar';
+
+type SectionProps = React.ComponentPropsWithoutRef<'div'>;
+
+const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, SectionProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      className={classNames('rt-PopoverToolbarSection', 'rt-PopoverToolbarLeft', className)}
+    />
+  ),
+);
+PopoverToolbarLeft.displayName = 'Popover.Toolbar.Left';
+
+const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, SectionProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      className={classNames('rt-PopoverToolbarSection', 'rt-PopoverToolbarCenter', className)}
+    />
+  ),
+);
+PopoverToolbarCenter.displayName = 'Popover.Toolbar.Center';
+
+const PopoverToolbarRight = React.forwardRef<HTMLDivElement, SectionProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      className={classNames('rt-PopoverToolbarSection', 'rt-PopoverToolbarRight', className)}
+    />
+  ),
+);
+PopoverToolbarRight.displayName = 'Popover.Toolbar.Right';
+
+type TitleProps = React.ComponentPropsWithoutRef<'span'>;
+const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, TitleProps>(
+  ({ className, id: idProp, ...props }, ref) => {
+    const ctx = usePopoverContentContext('Popover.Toolbar.Title');
+    const reactId = React.useId();
+    const id = idProp ?? `rt-popover-toolbar-title-${reactId}`;
+    React.useEffect(() => {
+      ctx?.setLabelId(id);
+      return () => ctx?.setLabelId(undefined);
+    }, [ctx, id]);
+    return (
+      <span
+        {...props}
+        id={id}
+        ref={ref}
+        className={classNames('rt-PopoverToolbarTitle', className)}
+      />
+    );
+  },
+);
+PopoverToolbarTitle.displayName = 'Popover.Toolbar.Title';
+
+type PopoverToolbarComponent = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<PopoverToolbarProps> & React.RefAttributes<HTMLDivElement>
+> & {
+  Left: typeof PopoverToolbarLeft;
+  Center: typeof PopoverToolbarCenter;
+  Right: typeof PopoverToolbarRight;
+  Title: typeof PopoverToolbarTitle;
+};
+
+const PopoverToolbar = Object.assign(PopoverToolbarBase, {
+  Left: PopoverToolbarLeft,
+  Center: PopoverToolbarCenter,
+  Right: PopoverToolbarRight,
+  Title: PopoverToolbarTitle,
+}) as PopoverToolbarComponent;
+
 export {
   PopoverRoot as Root,
   PopoverContent as Content,
   PopoverTrigger as Trigger,
   PopoverClose as Close,
   PopoverAnchor as Anchor,
+  PopoverToolbar as Toolbar,
 };
 export type {
   PopoverRootProps as RootProps,

package/src/components/scroll-area.css

@@ -109,8 +109,8 @@
   background-color: var(--gray-a3);
   border-radius: var(--scrollarea-scrollbar-border-radius);
 
-  animation-duration: 120ms;
-  animation-timing-function: ease-out;
+  animation-duration: var(--motion-duration-micro);
+  animation-timing-function: var(--motion-ease-standard);
 
   &:where([data-state='visible']) {
     animation-name: rt-fade-in;
@@ -135,7 +135,7 @@
 .rt-ScrollAreaThumb {
   background-color: var(--gray-a8);
   border-radius: inherit;
-  transition: background-color 100ms;
+  transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
 
   @media (hover: hover) {
     &:where(:hover) {

package/src/components/segmented-control.css

@@ -1,6 +1,6 @@
 .radix-themes {
   /* Use standard duration token instead of custom duration */
-  --segmented-control-transition-duration: var(--duration-1); /* 100ms - Fast transitions */
+  --segmented-control-transition-duration: var(--motion-duration-micro); /* Micro-interactions */
 }
 
 .rt-SegmentedControlRoot {
@@ -138,7 +138,7 @@
   margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: var(--border-width-standard); /* 1px */
   background-color: var(--gray-a4);
-  transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--ease-1);
+  transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--motion-ease-standard);
 
   /* Make separators slow to disappear and fast to appear, syncing it well with the indicator motion */
 
@@ -166,7 +166,7 @@
   left: 0;
   height: 100%;
   pointer-events: none;
-  transition: transform var(--segmented-control-transition-duration) var(--ease-3);
+  transition: transform var(--segmented-control-transition-duration) var(--motion-spring-snappy);
 
   &::before {
     inset: var(--border-width-standard); /* 1px */

package/src/components/sheet.css

@@ -0,0 +1,90 @@
+:where(.rt-SheetContent) {
+  position: fixed !important;
+  /* Use physical properties to integrate with width/height responsive utilities */
+  width: var(--width, 90vw) !important;
+  max-width: var(--max-width, 100vw) !important;
+  height: 100vh !important;
+  max-height: 100vh !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  will-change: transform;
+}
+
+/* Logical side anchoring (RTL-aware via logical inset) */
+:where(.rt-SheetContent[data-side='start']) {
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  margin: 0 !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+:where(.rt-SheetContent[data-side='end']) {
+  top: 0 !important;
+  bottom: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  margin: 0 !important;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+:where(.rt-SheetContent[data-side='top']) {
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: auto !important;
+  width: auto !important;
+  max-width: none !important;
+  height: var(--height, 75vh) !important;
+  margin: 0 !important;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+:where(.rt-SheetContent[data-side='bottom']) {
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  top: auto !important;
+  width: auto !important;
+  max-width: none !important;
+  height: var(--height, 75vh) !important;
+  margin: 0 !important;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* Overlay adjustments: avoid double-fade jank from base dialog */
+:where(.rt-SheetOverlay)::before { opacity: 1; }
+
+@media (prefers-reduced-motion: no-preference) {
+  /* Override base dialog animations specifically for Sheet */
+  .rt-SheetContent:where([data-state='open']) {
+    animation-duration: var(--motion-duration-medium);
+    animation-timing-function: var(--motion-spring-snappy);
+    animation-fill-mode: both;
+  }
+  .rt-SheetContent:where([data-state='closed']) {
+    /* Keep visible to allow reverse slide-out */
+    opacity: 1;
+    animation-duration: var(--motion-duration-small);
+    animation-timing-function: var(--motion-spring-snappy);
+    animation-fill-mode: both;
+  }
+
+  .rt-SheetContent:where([data-state='open'][data-side='start']) { animation-name: rt-sheet-open-from-start, rt-fade-in !important; }
+  .rt-SheetContent:where([data-state='closed'][data-side='start']) { animation-name: rt-sheet-close-to-start, rt-fade-out !important; }
+
+  .rt-SheetContent:where([data-state='open'][data-side='end']) { animation-name: rt-sheet-open-from-end, rt-fade-in !important; }
+  .rt-SheetContent:where([data-state='closed'][data-side='end']) { animation-name: rt-sheet-close-to-end, rt-fade-out !important; }
+
+  .rt-SheetContent:where([data-state='open'][data-side='top']) { animation-name: rt-sheet-open-from-top, rt-fade-in !important; }
+  .rt-SheetContent:where([data-state='closed'][data-side='top']) { animation-name: rt-sheet-close-to-top, rt-fade-out !important; }
+
+  .rt-SheetContent:where([data-state='open'][data-side='bottom']) { animation-name: rt-sheet-open-from-bottom, rt-fade-in !important; }
+  .rt-SheetContent:where([data-state='closed'][data-side='bottom']) { animation-name: rt-sheet-close-to-bottom, rt-fade-out !important; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rt-SheetContent { animation: none !important; }
+}