@kalink-ui/seedly 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.20.0
+
+### Minor Changes
+
+- d902023: [AlertDialog] Create new AlertDialog component
+
+## 0.19.0
+
+### Minor Changes
+
+- e73d11a: [Center] Use a custom property to define gutters value
+
 ## 0.18.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -44,8 +44,8 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3",
     "@kalink-ui/dibbly": "0.5.0",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.9.0"
+    "@kalink-ui/eslint-config": "0.9.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -58,6 +58,7 @@
     "typescript": "^5.8.2"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-scroll-area": "^1.2.9",

package/src/components/alert-dialog/alert-dialog-action.tsx

@@ -0,0 +1,22 @@
+import { Action } from '@radix-ui/react-alert-dialog';
+import { ComponentPropsWithRef } from 'react';
+
+import { Button, ButtonProps } from '../button';
+
+export type AlertDialogActionProps = ComponentPropsWithRef<typeof Action> &
+  ButtonProps<'button'> & {
+    loading?: boolean;
+  };
+
+export function AlertDialogAction({
+  className,
+  children,
+  loading,
+  ...props
+}: AlertDialogActionProps) {
+  return (
+    <Action asChild {...props}>
+      <Button>{children}</Button>
+    </Action>
+  );
+}

package/src/components/alert-dialog/alert-dialog-cancel.tsx

@@ -0,0 +1,19 @@
+import { Cancel } from '@radix-ui/react-alert-dialog';
+import { ComponentPropsWithRef } from 'react';
+
+import { Button, ButtonProps } from '../button';
+
+export type AlertDialogCancelProps = ComponentPropsWithRef<typeof Cancel> &
+  ButtonProps<'button'>;
+
+export function AlertDialogCancel({
+  className,
+  children,
+  ...props
+}: AlertDialogCancelProps) {
+  return (
+    <Cancel asChild {...props}>
+      <Button>{children}</Button>
+    </Cancel>
+  );
+}

package/src/components/alert-dialog/alert-dialog-content.css.ts

@@ -0,0 +1,78 @@
+import { keyframes } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+const enterAnimation = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translate(-50%, -50%) scale(0.95)',
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translate(-50%, -50%) scale(1)',
+  },
+});
+
+const exitAnimation = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: 'translate(-50%, -50%) scale(1)',
+  },
+  '100%': {
+    opacity: 0,
+    transform: 'translate(-50%, -50%) scale(0.95)',
+  },
+});
+
+export const alertDialogContent = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        zIndex: 50,
+        width: '100%',
+
+        position: 'fixed',
+        left: '50%',
+        top: '50%',
+
+        transform: 'translate(-50%, -50%)',
+        animationDuration: sys.motion.duration.medium[1],
+        animationTimingFunction: sys.motion.easing.standard,
+
+        selectors: {
+          '&[data-state="open"]': {
+            animationName: enterAnimation,
+          },
+          '&[data-state="closed"]': {
+            animationName: exitAnimation,
+          },
+        },
+      },
+    },
+  },
+
+  variants: {
+    variant: {
+      dialog: {
+        '@layer': {
+          [components]: {
+            maxWidth: '30rem',
+          },
+        },
+      },
+      modal: {
+        '@layer': {
+          [components]: {
+            maxInlineSize: 'max-content',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'dialog',
+  },
+});

package/src/components/alert-dialog/alert-dialog-content.tsx

@@ -0,0 +1,47 @@
+import { AlertDialogPortal, Content } from '@radix-ui/react-alert-dialog';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { Box, BoxProps } from '../box';
+import { ScrollArea, ScrollAreaProps } from '../scroll-area';
+
+import { alertDialogContent } from './alert-dialog-content.css';
+import { AlertDialogOverlay } from './alert-dialog-overlay';
+
+export type AlertDialogContentVariants = NonNullable<
+  RecipeVariants<typeof alertDialogContent>
+>;
+
+export type AlertDialogContentProps = ComponentPropsWithoutRef<typeof Content> &
+  AlertDialogContentVariants &
+  Pick<ScrollAreaProps, 'maxHeight'> &
+  ComponentPropsWithoutRef<typeof AlertDialogPortal> &
+  BoxProps<'div'>;
+
+export function AlertDialogContent({
+  className,
+  children,
+  container,
+  forceMount,
+  variant,
+  maxHeight = '50vh',
+  elevation = 'high',
+  radius,
+  ...props
+}: AlertDialogContentProps) {
+  return (
+    <AlertDialogPortal container={container} forceMount={forceMount}>
+      <AlertDialogOverlay />
+      <Content
+        className={clsx(alertDialogContent({ variant }), className)}
+        asChild
+        {...props}
+      >
+        <Box spacing={2} variant="solid" elevation={elevation} radius={radius}>
+          <ScrollArea maxHeight={maxHeight}>{children}</ScrollArea>
+        </Box>
+      </Content>
+    </AlertDialogPortal>
+  );
+}

package/src/components/alert-dialog/alert-dialog-description.tsx

@@ -0,0 +1,24 @@
+import { Description } from '@radix-ui/react-alert-dialog';
+import { ComponentPropsWithRef } from 'react';
+
+import { Heading, HeadingSubtitleProps } from '../heading';
+
+export type AlertDialogDescriptionProps = ComponentPropsWithRef<
+  typeof Description
+> &
+  HeadingSubtitleProps;
+
+export function AlertDialogDescription({
+  children,
+  variant = 'body',
+  size = 'medium',
+  ...props
+}: AlertDialogDescriptionProps) {
+  return (
+    <Description asChild {...props}>
+      <Heading.Subtitle variant={variant} size={size}>
+        {children}
+      </Heading.Subtitle>
+    </Description>
+  );
+}

package/src/components/alert-dialog/alert-dialog-footer.css.ts

@@ -0,0 +1,34 @@
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const alertDialogFooter = recipe({
+  variants: {
+    position: {
+      sticky: {
+        '@layer': {
+          [components]: {
+            '::before': {
+              content: '""',
+
+              display: 'block',
+              width: '100%',
+              height: sys.spacing[2],
+
+              position: 'absolute',
+              insetBlockStart: calc.negate(sys.spacing[2]),
+
+              backgroundImage: `linear-gradient(to bottom, transparent, ${sys.color.background})`,
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export type AlertDialogFooterVariants = NonNullable<
+  RecipeVariants<typeof alertDialogFooter>
+>;

package/src/components/alert-dialog/alert-dialog-footer.tsx

@@ -0,0 +1,26 @@
+import { clsx } from 'clsx';
+
+import { Cluster, ClusterProps } from '../cluster';
+
+import {
+  alertDialogFooter,
+  AlertDialogFooterVariants,
+} from './alert-dialog-footer.css';
+
+export type AlertDialogFooterProps = ClusterProps<'div'> &
+  AlertDialogFooterVariants;
+
+export function AlertDialogFooter({
+  className,
+  justify = 'end',
+  position,
+  ...props
+}: AlertDialogFooterProps) {
+  return (
+    <Cluster
+      justify={justify}
+      className={clsx(alertDialogFooter({ position }), className)}
+      {...props}
+    />
+  );
+}

package/src/components/alert-dialog/alert-dialog-header.tsx

@@ -0,0 +1,11 @@
+import { Stack, StackProps } from '../stack';
+
+export type AlertDialogHeaderProps = StackProps<'div'>;
+
+export const AlertDialogHeader = ({
+  className,
+  spacing = 2,
+  ...props
+}: AlertDialogHeaderProps) => {
+  return <Stack spacing={spacing} {...props} />;
+};

package/src/components/alert-dialog/alert-dialog-overlay.tsx

@@ -0,0 +1,15 @@
+import { Overlay } from '@radix-ui/react-alert-dialog';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef } from 'react';
+
+import { overlay } from '../overlay';
+
+export type AlertDialogOverlayProps = ComponentPropsWithRef<typeof Overlay>;
+
+export function AlertDialogOverlay({
+  className,
+  children,
+  ...props
+}: AlertDialogOverlayProps) {
+  return <Overlay className={clsx(overlay, className)} {...props} />;
+}

package/src/components/alert-dialog/alert-dialog-portal.tsx

@@ -0,0 +1,3 @@
+import { Portal } from '@radix-ui/react-alert-dialog';
+
+export const AlertDialogPortal = Portal;

package/src/components/alert-dialog/alert-dialog-title.tsx

@@ -0,0 +1,24 @@
+import { Title } from '@radix-ui/react-alert-dialog';
+import { ComponentPropsWithRef } from 'react';
+
+import { Heading, HeadingProps } from '../heading';
+
+export type AlertDialogTitleProps = ComponentPropsWithRef<typeof Title> &
+  Omit<HeadingProps, 'variant'> & {
+    variant?: HeadingProps['variant'];
+  };
+
+export function AlertDialogTitle({
+  children,
+  variant = 'headline',
+  size = 'small',
+  ...props
+}: AlertDialogTitleProps) {
+  return (
+    <Title asChild>
+      <Heading use="h2" variant={variant} size={size} {...props}>
+        {children}
+      </Heading>
+    </Title>
+  );
+}

package/src/components/alert-dialog/alert-dialog-trigger.tsx

@@ -0,0 +1,3 @@
+import { Trigger } from '@radix-ui/react-alert-dialog';
+
+export const AlertDialogTrigger = Trigger;

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import { Root } from '@radix-ui/react-alert-dialog';
+
+export const AlertDialog = Root;

package/src/components/alert-dialog/index.ts

@@ -0,0 +1,11 @@
+export { AlertDialog } from './alert-dialog';
+export { AlertDialogAction } from './alert-dialog-action';
+export { AlertDialogContent } from './alert-dialog-content';
+export { AlertDialogDescription } from './alert-dialog-description';
+export { AlertDialogHeader } from './alert-dialog-header';
+export { AlertDialogTitle } from './alert-dialog-title';
+export { AlertDialogCancel } from './alert-dialog-cancel';
+export { AlertDialogOverlay } from './alert-dialog-overlay';
+export { AlertDialogFooter } from './alert-dialog-footer';
+export { AlertDialogPortal } from './alert-dialog-portal';
+export { AlertDialogTrigger } from './alert-dialog-trigger';

package/src/components/center/center.css.ts

@@ -1,8 +1,11 @@
+import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
+export const gutterSize = createVar();
+
 export const centerRecipe = recipe({
   base: {
     '@layer': {
@@ -11,6 +14,7 @@ export const centerRecipe = recipe({
         boxSizing: 'content-box',
         marginInline: 'auto',
         maxInlineSize: sys.layout.measure,
+        paddingInline: gutterSize,
       },
     },
   },
@@ -50,7 +54,9 @@ export const centerRecipe = recipe({
     gutters: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
-          paddingInline: sys.spacing[key],
+          vars: {
+            [gutterSize]: sys.spacing[key],
+          },
         },
       },
     })),

package/src/components/center/index.ts

@@ -1,2 +1,2 @@
 export { Center, type CenterProps } from './center';
-export { centerRecipe, type CenterVariants } from './center.css';
+export { centerRecipe, gutterSize, type CenterVariants } from './center.css';

package/src/components/heading/heading.css.ts

@@ -5,8 +5,12 @@ import { components } from '../../styles/layers.css';
 
 export const headingRoot = recipe({
   base: {
-    display: 'flex',
-    flexDirection: 'column',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    },
   },
 
   variants: {

package/src/components/heading/heading.tsx

@@ -98,7 +98,7 @@ export function Heading<TUse extends HeadingTypes>({
   );
 }
 
-type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
+export type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
 };
 
@@ -117,7 +117,7 @@ Heading.Pretitle = function HeadingPretitle({
   );
 };
 
-type HeadingSubtitleProps = Omit<TextProps<'p'>, 'children'> & {
+export type HeadingSubtitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
 };
 

package/src/components/heading/index.ts

@@ -1,2 +1,8 @@
-export { Heading, type HeadingTypes, type HeadingProps } from './heading';
+export {
+  Heading,
+  type HeadingTypes,
+  type HeadingProps,
+  type HeadingSubtitleProps,
+  type HeadingPretitleProps,
+} from './heading';
 export { headingRoot, type HeadingRootVariants } from './heading.css';

package/src/components/overlay/index.ts

@@ -0,0 +1 @@
+export { overlay } from './overlay.css';

package/src/components/overlay/overlay.css.ts

@@ -0,0 +1,48 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+const enterAnimation = keyframes({
+  '0%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+const exitAnimation = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '100%': {
+    opacity: 0,
+  },
+});
+
+export const overlay = style({
+  '@layer': {
+    [components]: {
+      zIndex: 50,
+
+      position: 'fixed',
+      inset: 0,
+
+      backgroundColor: `color(from ${sys.color.background} srgb r g b / 0.5)`,
+
+      animationDuration: sys.motion.duration.medium[2],
+      animationTimingFunction: sys.motion.easing.standard,
+      backdropFilter: 'blur(4px)',
+
+      selectors: {
+        '&[data-state="open"]': {
+          animationName: enterAnimation,
+        },
+        '&[data-state="closed"]': {
+          animationName: exitAnimation,
+        },
+      },
+    },
+  },
+});

package/src/components/scroll-area/index.ts

@@ -1 +1 @@
-export { ScrollArea } from './scroll-area';
+export { ScrollArea, type ScrollAreaProps } from './scroll-area';

package/src/components/scroll-area/scroll-area.css.ts

@@ -2,69 +2,94 @@ import { createVar, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, transition } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 export const viewportMaxHeight = createVar();
 
 export const scrollArea = style({
-  overflow: 'hidden',
-  height: '100%',
+  '@layer': {
+    [components]: {
+      overflow: 'hidden',
+      height: '100%',
 
-  position: 'relative',
+      position: 'relative',
+    },
+  },
 });
 
 export const scrollAreaViewport = style({
-  height: '100%',
-  maxHeight: viewportMaxHeight,
-  width: '100%',
+  '@layer': {
+    [components]: {
+      height: '100%',
+      maxHeight: viewportMaxHeight,
+      width: '100%',
 
-  borderRadius: 'inherit',
+      borderRadius: 'inherit',
 
-  vars: {
-    [viewportMaxHeight]: 'initial',
+      vars: {
+        [viewportMaxHeight]: 'initial',
+      },
+    },
   },
 });
 
 export const scrollAreaScrollbar = recipe({
   base: {
-    display: 'flex',
+    '@layer': {
+      [components]: {
+        display: 'flex',
 
-    padding: 1,
+        padding: 1,
 
-    transition: transition(['color', 'background-color', 'border-color'], {
-      duration: 'medium.2',
-    }),
-    userSelect: 'none',
+        transition: transition(['color', 'background-color', 'border-color'], {
+          duration: 'medium.2',
+        }),
+        userSelect: 'none',
+      },
+    },
   },
 
   variants: {
     orientation: {
       vertical: {
-        height: '100%',
-        width: 10,
-
-        borderInlineStartWidth: 1,
-        borderInlineStartColor: 'transparent',
+        '@layer': {
+          [components]: {
+            height: '100%',
+            width: 10,
+
+            borderInlineStartWidth: 1,
+            borderInlineStartColor: 'transparent',
+          },
+        },
       },
 
       horizontal: {
-        height: 10,
-        width: '100%',
-
-        borderBlockStartWidth: 1,
-        borderBlockStartColor: 'transparent',
+        '@layer': {
+          [components]: {
+            height: 10,
+            width: '100%',
+
+            borderBlockStartWidth: 1,
+            borderBlockStartColor: 'transparent',
+          },
+        },
       },
     },
   },
 });
 
 export const scrollAreaThumb = style({
-  flexGrow: 1,
+  '@layer': {
+    [components]: {
+      flexGrow: 1,
 
-  position: 'relative',
+      position: 'relative',
 
-  borderRadius: sys.shape.corner.small,
+      borderRadius: sys.shape.corner.small,
 
-  backgroundColor: sys.color.foreground,
+      backgroundColor: sys.color.foreground,
+    },
+  },
 });
 
 export type ScrollAreaScrollbarVariants = NonNullable<

package/src/components/sheet/sheet-content.css.ts

@@ -2,6 +2,7 @@ import { createVar, keyframes } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 const from = createVar();
 const to = createVar();
@@ -29,29 +30,33 @@ const leave = keyframes({
 
 export const sheetContent = recipe({
   base: {
-    zIndex: 50,
-    maxWidth: '100vw',
-    maxHeight: '100vh',
+    '@layer': {
+      [components]: {
+        zIndex: 50,
+        maxWidth: '100vw',
+        maxHeight: '100vh',
 
-    position: 'fixed',
+        position: 'fixed',
 
-    boxShadow: sys.elevation.high,
+        boxShadow: sys.elevation.high,
 
-    animationDuration: sys.motion.duration.medium[2],
-    animationTimingFunction: sys.motion.easing.standard,
-    animationFillMode: 'both',
+        animationDuration: sys.motion.duration.medium[2],
+        animationTimingFunction: sys.motion.easing.standard,
+        animationFillMode: 'both',
 
-    selectors: {
-      '&[data-state="open"]': {
-        animationName: enter,
+        selectors: {
+          '&[data-state="open"]': {
+            animationName: enter,
 
-        pointerEvents: 'auto',
-      },
+            pointerEvents: 'auto',
+          },
 
-      '&[data-state="closed"]': {
-        animationName: leave,
+          '&[data-state="closed"]': {
+            animationName: leave,
 
-        pointerEvents: 'none',
+            pointerEvents: 'none',
+          },
+        },
       },
     },
   },
@@ -59,74 +64,106 @@ export const sheetContent = recipe({
   variants: {
     side: {
       top: {
-        height: size,
-        width: '100vw',
-
-        insetBlockStart: 0,
-        insetInline: 0,
-
-        vars: {
-          [from]: 'translateY(-100%)',
-          [to]: 'translateY(0)',
+        '@layer': {
+          [components]: {
+            height: size,
+            width: '100vw',
+
+            insetBlockStart: 0,
+            insetInline: 0,
+
+            vars: {
+              [from]: 'translateY(-100%)',
+              [to]: 'translateY(0)',
+            },
+          },
         },
       },
       right: {
-        height: '100vh',
-        width: size,
-
-        insetBlock: 0,
-        insetInlineEnd: 0,
-
-        vars: {
-          [from]: 'translateX(100%)',
-          [to]: 'translateX(0)',
+        '@layer': {
+          [components]: {
+            height: '100vh',
+            width: size,
+
+            insetBlock: 0,
+            insetInlineEnd: 0,
+
+            vars: {
+              [from]: 'translateX(100%)',
+              [to]: 'translateX(0)',
+            },
+          },
         },
       },
       bottom: {
-        height: size,
-        width: '100vw',
-
-        insetBlockEnd: 0,
-        insetInline: 0,
-
-        vars: {
-          [from]: 'translateY(100%)',
-          [to]: 'translateY(0)',
+        '@layer': {
+          [components]: {
+            height: size,
+            width: '100vw',
+
+            insetBlockEnd: 0,
+            insetInline: 0,
+
+            vars: {
+              [from]: 'translateY(100%)',
+              [to]: 'translateY(0)',
+            },
+          },
         },
       },
       left: {
-        height: '100vh',
-        width: size,
-
-        insetBlock: 0,
-        insetInlineStart: 0,
-
-        vars: {
-          [from]: 'translateX(-100%)',
-          [to]: 'translateX(0)',
+        '@layer': {
+          [components]: {
+            height: '100vh',
+            width: size,
+
+            insetBlock: 0,
+            insetInlineStart: 0,
+
+            vars: {
+              [from]: 'translateX(-100%)',
+              [to]: 'translateX(0)',
+            },
+          },
         },
       },
     },
 
     size: {
       sm: {
-        vars: {
-          [size]: '300px',
+        '@layer': {
+          [components]: {
+            vars: {
+              [size]: '300px',
+            },
+          },
         },
       },
       base: {
-        vars: {
-          [size]: '400px',
+        '@layer': {
+          [components]: {
+            vars: {
+              [size]: '400px',
+            },
+          },
         },
       },
       md: {
-        vars: {
-          [size]: '500px',
+        '@layer': {
+          [components]: {
+            vars: {
+              [size]: '500px',
+            },
+          },
         },
       },
       lg: {
-        vars: {
-          [size]: '600px',
+        '@layer': {
+          [components]: {
+            vars: {
+              [size]: '600px',
+            },
+          },
         },
       },
     },

package/src/components/sheet/sheet-content.tsx

@@ -2,7 +2,7 @@
 
 import { Content, Portal } from '@radix-ui/react-dialog';
 import { clsx } from 'clsx';
-import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { ComponentPropsWithRef, ElementType } from 'react';
 
 import { Box, BoxProps } from '../box';
 import { ScrollArea } from '../scroll-area';
@@ -12,7 +12,7 @@ import { sheetContent, SheetContentVariants } from './sheet-content.css';
 import { SheetOverlay } from './sheet-overlay';
 
 export type SheetContentProps<TUse extends ElementType> = BoxProps<TUse> &
-  ComponentPropsWithoutRef<typeof Portal> &
+  ComponentPropsWithRef<typeof Portal> &
   SheetContentVariants;
 
 export function SheetContent<TUse extends ElementType>({

package/src/components/sheet/sheet-header.css.ts

@@ -2,29 +2,50 @@ import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 export const sheetHeader = recipe({
   base: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    flexWrap: 'nowrap',
-    gap: sys.spacing[4],
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        flexWrap: 'nowrap',
+        gap: sys.spacing[4],
+      },
+    },
   },
 
   variants: {
     side: {
       top: {
-        flexDirection: 'row',
+        '@layer': {
+          [components]: {
+            flexDirection: 'row',
+          },
+        },
       },
       right: {
-        flexDirection: 'row-reverse',
+        '@layer': {
+          [components]: {
+            flexDirection: 'row-reverse',
+          },
+        },
       },
       bottom: {
-        flexDirection: 'row',
+        '@layer': {
+          [components]: {
+            flexDirection: 'row',
+          },
+        },
       },
       left: {
-        flexDirection: 'row',
+        '@layer': {
+          [components]: {
+            flexDirection: 'row',
+          },
+        },
       },
     },
   },

package/src/components/sheet/sheet-overlay.tsx

@@ -2,13 +2,13 @@
 
 import { Overlay } from '@radix-ui/react-dialog';
 import { clsx } from 'clsx';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-import { sheetOverlay } from './sheet-overlay.css';
+import { overlay } from '../overlay';
 
 export function SheetOverlay({
   className,
   ...props
-}: ComponentPropsWithoutRef<typeof Overlay>) {
-  return <Overlay className={clsx(sheetOverlay, className)} {...props} />;
+}: ComponentPropsWithRef<typeof Overlay>) {
+  return <Overlay className={clsx(overlay, className)} {...props} />;
 }

package/src/components/sheet/sheet-title.tsx

@@ -16,13 +16,12 @@ export function SheetTitle<TUse extends HeadingTypes>(
   const { use = 'h2', className, children, variant, size, ...rest } = props;
 
   return (
-    <Title asChild>
+    <Title asChild {...rest}>
       <Heading
         use={use as HeadingProps<TUse>['use']}
         variant={variant}
         size={size}
         className={className}
-        {...rest}
       >
         {children}
       </Heading>

package/src/components/sheet/sheet-overlay.css.ts

@@ -1,43 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-import { sys } from '../../styles';
-
-const enterAnimation = keyframes({
-  '0%': {
-    opacity: 0,
-  },
-  '100%': {
-    opacity: 1,
-  },
-});
-
-const exitAnimation = keyframes({
-  '0%': {
-    opacity: 1,
-  },
-  '100%': {
-    opacity: 0,
-  },
-});
-
-export const sheetOverlay = style({
-  zIndex: 50,
-
-  position: 'fixed',
-  inset: 0,
-
-  backgroundColor: `color(from ${sys.color.background} srgb r g b / 0.5)`,
-
-  animationDuration: sys.motion.duration.medium[2],
-  animationTimingFunction: sys.motion.easing.standard,
-  backdropFilter: 'blur(4px)',
-
-  selectors: {
-    '&[data-state="open"]': {
-      animationName: enterAnimation,
-    },
-    '&[data-state="closed"]': {
-      animationName: exitAnimation,
-    },
-  },
-});