@kalink-ui/seedly 0.34.3 → 0.35.0

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

@@ -6,18 +6,23 @@ import { ComponentPropsWithoutRef } from 'react';
 import { Box, BoxProps } from '../box';
 import { ScrollArea, ScrollAreaProps } from '../scroll-area';
 
-import { alertDialogContent } from './alert-dialog-content.css';
+import { alertDialogContentRecipe } from './alert-dialog-content.css';
 import { AlertDialogOverlay } from './alert-dialog-overlay';
 
 export type AlertDialogContentVariants = NonNullable<
-  RecipeVariants<typeof alertDialogContent>
+  RecipeVariants<typeof alertDialogContentRecipe>
 >;
 
-export type AlertDialogContentProps = ComponentPropsWithoutRef<typeof Content> &
-  AlertDialogContentVariants &
+type BoxStyleProps = Pick<
+  BoxProps<'div'>,
+  'spacing' | 'radius' | 'elevation' | 'use'
+>;
+
+export type AlertDialogContentProps = AlertDialogContentVariants &
   Pick<ScrollAreaProps, 'maxHeight'> &
   ComponentPropsWithoutRef<typeof AlertDialogPortal> &
-  BoxProps<'div'>;
+  BoxStyleProps &
+  Omit<ComponentPropsWithoutRef<typeof Content>, keyof BoxStyleProps>;
 
 export function AlertDialogContent({
   className,
@@ -29,17 +34,19 @@ export function AlertDialogContent({
   elevation = 'high',
   radius,
   spacing = 2,
+  use,
   ...props
 }: AlertDialogContentProps) {
   return (
     <AlertDialogPortal container={container} forceMount={forceMount}>
       <AlertDialogOverlay />
       <Content
-        className={clsx(alertDialogContent({ variant }), className)}
+        className={clsx(alertDialogContentRecipe({ variant }), className)}
         asChild
         {...props}
       >
         <Box
+          use={use}
           variant="solid"
           spacing={spacing}
           elevation={elevation}

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

@@ -4,7 +4,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const alertDialogFooter = recipe({
+export const alertDialogFooterRecipe = recipe({
   variants: {
     position: {
       sticky: {
@@ -20,7 +20,7 @@ export const alertDialogFooter = recipe({
               position: 'absolute',
               insetBlockStart: calc.negate(sys.spacing[2]),
 
-              backgroundImage: `linear-gradient(to bottom, transparent, ${sys.color.background})`,
+              backgroundImage: `linear-gradient(to bottom, transparent, ${sys.surface.background})`,
             },
           },
         },
@@ -30,5 +30,5 @@ export const alertDialogFooter = recipe({
 });
 
 export type AlertDialogFooterVariants = NonNullable<
-  RecipeVariants<typeof alertDialogFooter>
+  RecipeVariants<typeof alertDialogFooterRecipe>
 >;

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

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { Cluster, ClusterProps } from '../cluster';
 
 import {
-  alertDialogFooter,
+  alertDialogFooterRecipe,
   AlertDialogFooterVariants,
 } from './alert-dialog-footer.css';
 
@@ -19,7 +19,7 @@ export function AlertDialogFooter({
   return (
     <Cluster
       justify={justify}
-      className={clsx(alertDialogFooter({ position }), className)}
+      className={clsx(alertDialogFooterRecipe({ position }), className)}
       {...props}
     />
   );

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

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

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

@@ -9,3 +9,12 @@ export { AlertDialogOverlay } from './alert-dialog-overlay';
 export { AlertDialogFooter } from './alert-dialog-footer';
 export { AlertDialogPortal } from './alert-dialog-portal';
 export { AlertDialogTrigger } from './alert-dialog-trigger';
+
+export type { AlertDialogActionProps } from './alert-dialog-action';
+export type { AlertDialogCancelProps } from './alert-dialog-cancel';
+export type { AlertDialogContentProps } from './alert-dialog-content';
+export type { AlertDialogDescriptionProps } from './alert-dialog-description';
+export type { AlertDialogFooterProps } from './alert-dialog-footer';
+export type { AlertDialogHeaderProps } from './alert-dialog-header';
+export type { AlertDialogOverlayProps } from './alert-dialog-overlay';
+export type { AlertDialogTitleProps } from './alert-dialog-title';

package/src/components/box/box.css.ts

@@ -1,3 +1,4 @@
+import { assignVars, createThemeContract } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import {
@@ -5,46 +6,145 @@ import {
   defaultMedia,
   mapContractVars,
   sys,
-} from '@kalink-ui/seedly/styles';
-import { components } from '@kalink-ui/seedly/styles/layers';
+} from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const boxVars = createThemeContract({
+  color: {
+    container: null,
+    content: null,
+    outline: null,
+  },
+  spacing: {
+    block: null,
+    inline: null,
+  },
+  shape: {
+    corner: null,
+  },
+  elevation: {
+    level: null,
+  },
+});
+
+const boxColorDefaults = assignVars(boxVars.color, {
+  container: 'transparent',
+  content: sys.surface.foreground,
+  outline: 'transparent',
+});
+
+const boxSpacingDefaults = assignVars(boxVars.spacing, {
+  block: sys.spacing[0],
+  inline: sys.spacing[0],
+});
+
+const boxShapeDefaults = assignVars(boxVars.shape, {
+  corner: sys.shape.corner.none,
+});
+
+const boxElevationDefaults = assignVars(boxVars.elevation, {
+  level: sys.elevation.none,
+});
+
+export const boxVariantStyles = {
+  solid: {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(boxVars.color, {
+            container: sys.surface.background,
+            content: sys.surface.foreground,
+            outline: 'transparent',
+          }),
+        },
+      },
+    },
+  },
+  outline: {
+    '@layer': {
+      [components]: {
+        borderColor: boxVars.color.outline,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+
+        vars: {
+          ...assignVars(boxVars.color, {
+            container: 'transparent',
+            content: sys.surface.foreground,
+            outline: sys.surface.foreground,
+          }),
+        },
+      },
+    },
+  },
+} as const;
 
 // Shared variant styles to support responsive overrides
 export const boxSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   '@layer': {
     [components]: {
-      padding: sys.spacing[key],
+      vars: {
+        ...assignVars(boxVars.spacing, {
+          block: sys.spacing[key],
+          inline: sys.spacing[key],
+        }),
+      },
     },
   },
 }));
 
-export const boxRecipe = recipe({
-  variants: {
-    /**
-     * The main variation of the box
-     */
-    variant: {
-      solid: {
-        '@layer': {
-          [components]: {
-            color: sys.color.foreground,
-            backgroundColor: sys.color.background,
-          },
-        },
+export const boxElevationStyles = mapContractVars(sys.elevation, (key) => ({
+  '@layer': {
+    [components]: {
+      vars: {
+        ...assignVars(boxVars.elevation, {
+          level: sys.elevation[key],
+        }),
+      },
+    },
+  },
+}));
+
+export const boxRadiusStyles = mapContractVars(sys.shape.corner, (key) => ({
+  '@layer': {
+    [components]: {
+      vars: {
+        ...assignVars(boxVars.shape, {
+          corner: sys.shape.corner[key],
+        }),
       },
+    },
+  },
+}));
 
-      outline: {
-        '@layer': {
-          [components]: {
-            color: sys.color.foreground,
-            backgroundColor: 'transparent',
+export const boxRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        paddingBlock: boxVars.spacing.block,
+        paddingInline: boxVars.spacing.inline,
+
+        color: boxVars.color.content,
 
-            borderColor: sys.color.foreground,
-            borderStyle: 'solid',
-            borderWidth: '1px',
-          },
+        backgroundColor: boxVars.color.container,
+        borderRadius: boxVars.shape.corner,
+        boxShadow: boxVars.elevation.level,
+
+        vars: {
+          ...boxColorDefaults,
+          ...boxSpacingDefaults,
+          ...boxShapeDefaults,
+          ...boxElevationDefaults,
         },
       },
     },
+  },
+
+  variants: {
+    /**
+     * The main variation of the box
+     */
+    variant: boxVariantStyles,
 
     /**
      * The spacing between the box borders and its contents
@@ -54,24 +154,12 @@ export const boxRecipe = recipe({
     /**
      * The elevation of the box
      */
-    elevation: mapContractVars(sys.elevation, (key) => ({
-      '@layer': {
-        [components]: {
-          boxShadow: sys.elevation[key],
-        },
-      },
-    })),
+    elevation: boxElevationStyles,
 
     /**
      * The radius of the box
      */
-    radius: mapContractVars(sys.shape.corner, (key) => ({
-      '@layer': {
-        [components]: {
-          borderRadius: sys.shape.corner[key],
-        },
-      },
-    })),
+    radius: boxRadiusStyles,
   },
 });
 
@@ -81,3 +169,13 @@ export const spacingAt = createResponsiveVariants({
   styles: boxSpacingStyles,
   media: defaultMedia,
 });
+
+export const radiusAt = createResponsiveVariants({
+  styles: boxRadiusStyles,
+  media: defaultMedia,
+});
+
+export const elevationAt = createResponsiveVariants({
+  styles: boxElevationStyles,
+  media: defaultMedia,
+});

package/src/components/box/box.responsive.ts

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { boxRecipe, spacingAt } from './box.css';
+import { boxRecipe, radiusAt, spacingAt } from './box.css';
 
 export const boxResponsive = responsiveRecipe({
   recipe: boxRecipe,
-  at: { spacing: spacingAt },
+  at: { spacing: spacingAt, radius: radiusAt },
   order: defaultOrder,
 });

package/src/components/box/box.tsx

@@ -1,5 +1,4 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { BoxVariants } from './box.css';
@@ -31,8 +30,8 @@ export function Box<TUse extends ElementType = 'div'>({
 
   return (
     <Comp
-      className={clsx(
-        boxResponsive({ variant, spacing, radius, elevation }),
+      className={boxResponsive(
+        { variant, spacing, radius, elevation },
         className,
       )}
       {...rest}

package/src/components/box/index.ts

@@ -1,2 +1,2 @@
 export { Box, type BoxProps } from './box';
-export { boxRecipe, type BoxVariants } from './box.css';
+export { boxRecipe, boxVars, type BoxVariants } from './box.css';