@kalink-ui/seedly 0.34.3 → 0.35.0

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

@@ -3,6 +3,7 @@ import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { mapContractVars, sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 const translateX = createVar();
 const offsetX = createVar();
@@ -26,82 +27,98 @@ const leave = keyframes({
   },
 });
 
-export const popoverContent = recipe({
+export const popoverContentRecipe = recipe({
   base: {
-    animationDuration: sys.motion.duration.short[2],
-    animationTimingFunction: sys.motion.easing.standard,
-    animationFillMode: 'forwards',
-
-    opacity: 0,
-    transform: `translate3d(${translateX}, ${translateY}, 0) scale3d(${scale}, ${scale}, ${scale})`,
-
-    selectors: {
-      '&[data-state="open"]': {
-        animationName: enter,
-      },
-
-      '&[data-state="closed"]': {
-        animationName: leave,
-      },
-
-      '&[data-side*="top"]': {
-        vars: {
-          [translateY]: sys.spacing[2],
-          [offsetY]: calc.negate(sys.spacing[1]),
-        },
-      },
-
-      '&[data-side*="right"]': {
-        vars: {
-          [translateX]: calc.negate(sys.spacing[1]),
-          [offsetX]: sys.spacing[2],
+    '@layer': {
+      [components]: {
+        animationDuration: sys.motion.duration.short[2],
+        animationTimingFunction: sys.motion.easing.standard,
+        animationFillMode: 'forwards',
+
+        opacity: 0,
+        transform: `translate3d(${translateX}, ${translateY}, 0) scale3d(${scale}, ${scale}, ${scale})`,
+
+        selectors: {
+          '&[data-state="open"]': {
+            animationName: enter,
+          },
+
+          '&[data-state="closed"]': {
+            animationName: leave,
+          },
+
+          '&[data-side*="top"]': {
+            vars: {
+              [translateY]: sys.spacing[2],
+              [offsetY]: calc.negate(sys.spacing[1]),
+            },
+          },
+
+          '&[data-side*="right"]': {
+            vars: {
+              [translateX]: calc.negate(sys.spacing[1]),
+              [offsetX]: sys.spacing[2],
+            },
+          },
+
+          '&[data-side*="bottom"]': {
+            vars: {
+              [translateY]: calc.negate(sys.spacing[1]),
+              [offsetY]: sys.spacing[2],
+            },
+          },
+
+          '&[data-side*="left"]': {
+            vars: {
+              [translateX]: sys.spacing[3],
+              [offsetY]: calc.negate(sys.spacing[1]),
+            },
+          },
         },
-      },
-
-      '&[data-side*="bottom"]': {
-        vars: {
-          [translateY]: calc.negate(sys.spacing[1]),
-          [offsetY]: sys.spacing[2],
-        },
-      },
 
-      '&[data-side*="left"]': {
         vars: {
-          [translateX]: sys.spacing[3],
-          [offsetY]: calc.negate(sys.spacing[1]),
+          [translateX]: '0',
+          [translateY]: '0',
+          [offsetX]: '0',
+          [offsetY]: '0',
+          [scale]: '0.98',
+          '--popover-trigger-width': 'var(--radix-popover-trigger-width)',
         },
       },
     },
-
-    vars: {
-      [translateX]: '0',
-      [translateY]: '0',
-      [offsetX]: '0',
-      [offsetY]: '0',
-      [scale]: '0.98',
-      '--popover-trigger-width': 'var(--radix-popover-trigger-width)',
-    },
   },
 
   variants: {
     width: {
       trigger: {
-        minWidth: 'var(--popover-trigger-width)',
+        '@layer': {
+          [components]: {
+            minWidth: 'var(--popover-trigger-width)',
+          },
+        },
       },
     },
 
     scrollable: {
       true: {
-        overflow: 'hidden',
+        '@layer': {
+          [components]: {
+            overflow: 'hidden',
+          },
+        },
       },
     },
 
     elevation: mapContractVars(sys.elevation, (key) => ({
-      boxShadow: sys.elevation[key],
+      '@layer': {
+        [components]: {
+          boxShadow: sys.elevation[key],
+        },
+      },
     })),
   },
 });
 
 export type PopoverContentVariants = NonNullable<
-  RecipeVariants<typeof popoverContent>
+  RecipeVariants<typeof popoverContentRecipe>
 >;

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

@@ -11,16 +11,24 @@ import {
 import { Box, BoxProps } from '../box';
 import { ScrollArea } from '../scroll-area';
 
-import { popoverContent, PopoverContentVariants } from './popover-content.css';
+import {
+  popoverContentRecipe,
+  PopoverContentVariants,
+} from './popover-content.css';
+
+type BoxStyleProps = Pick<
+  BoxProps<'div'>,
+  'variant' | 'spacing' | 'radius' | 'elevation' | 'use'
+>;
 
 export type PopoverContentProps = {
   portaled?: boolean;
   maxHeight?: string;
   scrollable?: boolean;
-} & ComponentPropsWithRef<typeof Content> &
-  PopoverContentVariants &
+} & PopoverContentVariants &
   ComponentPropsWithoutRef<typeof Portal> &
-  BoxProps<'div'>;
+  BoxStyleProps &
+  Omit<ComponentPropsWithRef<typeof Content>, keyof BoxStyleProps>;
 
 export interface PopoverScrollableProps {
   scrollable?: boolean;
@@ -47,6 +55,8 @@ export function PopoverContent({
   children,
   spacing = 4,
   radius = 'medium',
+  variant,
+  use,
   width,
   portaled = true,
   scrollable = true,
@@ -58,7 +68,7 @@ export function PopoverContent({
     <Content
       align={align}
       className={clsx(
-        popoverContent({ width, scrollable, elevation }),
+        popoverContentRecipe({ width, scrollable, elevation }),
         className,
       )}
       sideOffset={0}
@@ -66,7 +76,13 @@ export function PopoverContent({
       collisionPadding={16}
       {...props}
     >
-      <Box spacing={spacing} radius={radius}>
+      <Box
+        use={use}
+        variant={variant}
+        spacing={spacing}
+        radius={radius}
+        elevation={elevation}
+      >
         <PopoverScrollable scrollable={scrollable} maxHeight={maxHeight}>
           {children}
         </PopoverScrollable>

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

@@ -33,7 +33,7 @@ export const scrollAreaViewport = style({
   },
 });
 
-export const scrollAreaScrollbar = recipe({
+export const scrollAreaScrollbarRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -87,11 +87,11 @@ export const scrollAreaThumb = style({
 
       borderRadius: sys.shape.corner.small,
 
-      backgroundColor: sys.color.foreground,
+      backgroundColor: sys.surface.foreground,
     },
   },
 });
 
 export type ScrollAreaScrollbarVariants = NonNullable<
-  RecipeVariants<typeof scrollAreaScrollbar>
+  RecipeVariants<typeof scrollAreaScrollbarRecipe>
 >;

package/src/components/scroll-area/scroll-bar.tsx

@@ -8,7 +8,7 @@ import { clsx } from 'clsx';
 import { ComponentPropsWithRef } from 'react';
 
 import {
-  scrollAreaScrollbar,
+  scrollAreaScrollbarRecipe,
   ScrollAreaScrollbarVariants,
   scrollAreaThumb,
 } from './scroll-area.css';
@@ -28,7 +28,7 @@ export function ScrollBar({
     <ScrollAreaScrollbar
       ref={ref}
       orientation={orientation}
-      className={clsx(scrollAreaScrollbar({ orientation }), className)}
+      className={clsx(scrollAreaScrollbarRecipe({ orientation }), className)}
       {...props}
     >
       <ScrollAreaThumb className={scrollAreaThumb} />

package/src/components/select/index.ts

@@ -1,6 +1,5 @@
-export { SelectContent } from './select-content';
-export { Select } from './select';
-export { SelectItem } from './select-item';
+export { SelectContent, type SelectContentProps } from './select-content';
+export { Select, type SelectProps } from './select';
+export { SelectItem, type SelectItemProps } from './select-item';
 export { SelectRoot } from './select-root';
-export { SelectTrigger } from './select-trigger';
-export { selectStyle } from './select.css';
+export { SelectTrigger, type SelectTriggerProps } from './select-trigger';

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

@@ -6,7 +6,7 @@ import { components } from '../../styles/layers.css';
 export const selectContent = style({
   '@layer': {
     [components]: {
-      backgroundColor: sys.color.background,
+      backgroundColor: sys.surface.background,
     },
   },
 });

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

@@ -4,7 +4,7 @@ import { Portal, Content, Viewport } from '@radix-ui/react-select';
 import { clsx } from 'clsx';
 import { ComponentPropsWithRef, ReactNode } from 'react';
 
-import { popoverContent } from '../popover';
+import { popoverContentRecipe } from '../popover';
 import { ScrollArea } from '../scroll-area';
 
 import { SelectProps } from './select';
@@ -40,7 +40,7 @@ export function SelectContent({
   return (
     <SelectContentPortal container={container}>
       <Content position={position} asChild {...props}>
-        <div className={clsx(selectContent, popoverContent())}>
+        <div className={clsx(selectContent, popoverContentRecipe())}>
           <Viewport className={selectContentViewport}>
             <ScrollArea maxHeight="16rem">{children}</ScrollArea>
           </Viewport>

package/src/components/select/select-item.tsx

@@ -4,17 +4,25 @@ import { Item, ItemIndicator, ItemText } from '@radix-ui/react-select';
 import { clsx } from 'clsx';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-import { menuItem } from '../menu';
+import { menuItemRecipe } from '../menu';
 
 import { selectItemIndicator } from './select-item.css';
 
+import type { Tone } from '../../styles';
+
 export type SelectItemProps = ComponentPropsWithoutRef<typeof Item> & {
   indicator?: ReactNode;
+  tone?: Tone;
 };
 
-export function SelectItem({ children, indicator, ...props }: SelectItemProps) {
+export function SelectItem({
+  children,
+  indicator,
+  tone,
+  ...props
+}: SelectItemProps) {
   return (
-    <Item className={clsx(menuItem({ inset: true }))} {...props}>
+    <Item className={clsx(menuItemRecipe({ inset: true, tone }))} {...props}>
       <ItemIndicator asChild>
         {indicator || <div className={selectItemIndicator} />}
       </ItemIndicator>

package/src/components/select/select-trigger.css.ts

@@ -4,30 +4,26 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { sys, transition } from '../../styles';
 import { components } from '../../styles/layers.css';
-import { inputAppearance } from '../input/input.css';
 
-export const selectTrigger = style([
-  inputAppearance(),
-  {
-    '@layer': {
-      [components]: {
-        display: 'flex',
-        alignItems: 'stretch',
-        gap: sys.spacing[4],
-        justifyContent: 'flex-start',
+export const selectTrigger = style({
+  '@layer': {
+    [components]: {
+      display: 'flex',
+      alignItems: 'stretch',
+      gap: sys.spacing[4],
+      justifyContent: 'flex-start',
 
-        ':before': {
-          content: '\x00',
-          width: 0,
-          overflow: 'hidden',
-          marginInlineEnd: calc.negate(sys.spacing[4]),
-        },
+      ':before': {
+        content: '\x00',
+        width: 0,
+        overflow: 'hidden',
+        marginInlineEnd: calc.negate(sys.spacing[4]),
       },
     },
   },
-]);
+});
 
-export const openIndicator = recipe({
+export const openIndicatorRecipe = recipe({
   base: {
     '@layer': {
       [components]: {

package/src/components/select/select-trigger.tsx

@@ -6,26 +6,36 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 
 import { buttonRecipe } from '../button/button.css';
 import { useFormFieldItemContext, useFormFieldContext } from '../form-field';
+import { inputAppearanceRecipe, type InputAppearanceVariants } from '../input';
 
-import { openIndicator, selectTrigger } from './select-trigger.css';
+import { openIndicatorRecipe, selectTrigger } from './select-trigger.css';
 
-export type SelectTriggerProps = ComponentPropsWithRef<typeof Trigger> & {
-  icon?: ReactNode;
-};
+export type SelectTriggerProps = ComponentPropsWithRef<typeof Trigger> &
+  Pick<InputAppearanceVariants, 'tone' | 'size' | 'variant'> & {
+    icon?: ReactNode;
+  };
 
 export function SelectTrigger({
   className,
   children,
   icon = null,
+  tone,
+  size,
+  variant,
   ...props
 }: SelectTriggerProps) {
-  const { errors, label } = useFormFieldContext();
+  const { errors, label, tone: contextTone } = useFormFieldContext();
   const { id } = useFormFieldItemContext();
+  const resolvedTone = tone ?? contextTone;
 
   return (
     <Trigger
       id={id}
-      className={clsx(selectTrigger, className)}
+      className={clsx(
+        inputAppearanceRecipe({ tone: resolvedTone, size, variant }),
+        selectTrigger,
+        className,
+      )}
       aria-invalid={errors ? 'true' : undefined}
       aria-label={label}
       {...props}
@@ -35,8 +45,8 @@ export function SelectTrigger({
         <div
           // Mimic the Combobox style
           className={clsx(
-            buttonRecipe({ size: 'sm', variant: 'bare' }),
-            openIndicator({ fallback: !icon }),
+            buttonRecipe({ size: 'sm', variant: 'bare', tone }),
+            openIndicatorRecipe({ fallback: !icon }),
           )}
         >
           {icon}

package/src/components/select/select.tsx

@@ -1,5 +1,4 @@
 import { Value } from '@radix-ui/react-select';
-import { clsx } from 'clsx';
 import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 
 import {
@@ -15,7 +14,6 @@ import { InputAppearanceVariants } from '../input';
 import { SelectContent } from './select-content';
 import { SelectRoot } from './select-root';
 import { SelectTrigger } from './select-trigger';
-import { selectStyle } from './select.css';
 
 export type SelectProps = ComponentPropsWithoutRef<typeof SelectRoot> &
   Pick<ComponentPropsWithoutRef<typeof Value>, 'placeholder'> &
@@ -51,6 +49,8 @@ export function Select({
   size = 'md',
   ref,
   className,
+  tone,
+  variant,
   ...props
 }: SelectProps) {
   return (
@@ -61,8 +61,9 @@ export function Select({
       hideErrorMessage={hideErrorMessage}
       disabled={disabled}
       hideLabel={hideLabel}
+      tone={tone}
     >
-      <FormFieldItem className={clsx(selectStyle, className)}>
+      <FormFieldItem className={className}>
         <FormFieldLabel required={required} disabled={disabled} size={size}>
           {label}
         </FormFieldLabel>
@@ -75,14 +76,17 @@ export function Select({
               onBlur={onBlur}
               onFocus={onFocus}
               aria-label={hideLabel ? label : undefined}
+              tone={tone}
+              size={size}
+              variant={variant}
             >
-              <Value placeholder={placeholder} className="test" />
+              <Value placeholder={placeholder} />
             </SelectTrigger>
           </FormFieldControl>
           <SelectContent container={container}>{children}</SelectContent>
         </SelectRoot>
-        <FormFieldDescription>{description}</FormFieldDescription>
-        <FormFieldError />
+        <FormFieldDescription size={size}>{description}</FormFieldDescription>
+        <FormFieldError size={size} />
       </FormFieldItem>
     </FormField>
   );

package/src/components/sheet/index.ts

@@ -3,3 +3,15 @@ export { SheetHeader } from './sheet-header';
 export { SheetTitle } from './sheet-title';
 export { SheetDescription } from './sheet-description';
 export { SheetContent } from './sheet-content';
+export { SheetBody } from './sheet-body';
+export { SheetFooter } from './sheet-footer';
+export { SheetOverlay } from './sheet-overlay';
+
+export type { SheetContentVariants } from './sheet-content.css';
+export type { SheetBodyProps } from './sheet-body';
+export type { SheetContentProps } from './sheet-content';
+export type { SheetDescriptionProps } from './sheet-description';
+export type { SheetFooterProps } from './sheet-footer';
+export type { SheetHeaderProps } from './sheet-header';
+export type { SheetOverlayProps } from './sheet-overlay';
+export type { SheetTitleProps } from './sheet-title';

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

@@ -28,7 +28,7 @@ const leave = keyframes({
   },
 });
 
-export const sheetContent = recipe({
+export const sheetContentRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -187,5 +187,5 @@ export const sheetContent = recipe({
 });
 
 export type SheetContentVariants = NonNullable<
-  RecipeVariants<typeof sheetContent>
+  RecipeVariants<typeof sheetContentRecipe>
 >;

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

@@ -7,32 +7,50 @@ import { ComponentPropsWithRef, ElementType } from 'react';
 import { Box, BoxProps } from '../box';
 
 import { SheetPortal } from './sheet';
-import { sheetContent, SheetContentVariants } from './sheet-content.css';
+import { sheetContentRecipe, SheetContentVariants } from './sheet-content.css';
 import { SheetOverlay } from './sheet-overlay';
 
-export type SheetContentProps<TUse extends ElementType> = BoxProps<TUse> &
-  ComponentPropsWithRef<typeof Portal> &
-  SheetContentVariants;
+type SheetPortalProps = ComponentPropsWithRef<typeof Portal>;
+type BoxStyleProps<TUse extends ElementType> = Pick<
+  BoxProps<TUse>,
+  'variant' | 'radius' | 'elevation' | 'use'
+>;
+
+export type SheetContentProps<TUse extends ElementType> = SheetContentVariants &
+  BoxStyleProps<TUse> &
+  Omit<ComponentPropsWithRef<typeof Content>, keyof BoxStyleProps<TUse>> &
+  Omit<SheetPortalProps, keyof BoxStyleProps<TUse>>;
 
 export function SheetContent<TUse extends ElementType>({
   className,
   children,
   container,
+  forceMount,
   side,
   size,
   ref,
   spacing = 4,
+  variant,
+  elevation,
+  radius,
+  use,
   ...props
 }: SheetContentProps<TUse>) {
   return (
-    <SheetPortal container={container}>
+    <SheetPortal container={container} forceMount={forceMount}>
       <SheetOverlay />
       <Content asChild>
         <Box
           ref={ref}
-          variant="solid"
+          use={use}
+          variant={variant ?? 'solid'}
           spacing={spacing}
-          className={clsx(sheetContent({ side, size, spacing }), className)}
+          elevation={elevation}
+          radius={radius}
+          className={clsx(
+            sheetContentRecipe({ side, size, spacing }),
+            className,
+          )}
           {...props}
         >
           {children}

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

@@ -3,19 +3,17 @@ import { ComponentPropsWithRef, ElementType } from 'react';
 
 import { Text, TextProps } from '../text';
 
-type SheetDescriptionPros<TUse extends ElementType> = ComponentPropsWithRef<
-  typeof Description
-> &
-  TextProps<TUse>;
+export type SheetDescriptionProps<TUse extends ElementType> =
+  ComponentPropsWithRef<typeof Description> & TextProps<TUse>;
 
 export function SheetDescription<TUse extends ElementType>({
   ref,
   children,
   ...props
-}: SheetDescriptionPros<TUse>) {
+}: SheetDescriptionProps<TUse>) {
   return (
-    <Description ref={ref} asChild {...props}>
-      <Text>{children}</Text>
+    <Description ref={ref} asChild>
+      <Text {...props}>{children}</Text>
     </Description>
   );
 }

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

@@ -5,11 +5,13 @@ import { Cluster, ClusterProps } from '../cluster';
 
 import { sheetFooter } from './sheet-footer.css';
 
+export type SheetFooterProps<TUse extends ElementType> = ClusterProps<TUse>;
+
 export function SheetFooter<TUse extends ElementType>({
   spacing = 4,
   className,
   ...props
-}: ClusterProps<TUse>) {
+}: SheetFooterProps<TUse>) {
   return (
     <Cluster
       spacing={spacing}

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

@@ -4,7 +4,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import { sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const sheetHeader = recipe({
+export const sheetHeaderRecipe = recipe({
   base: {
     '@layer': {
       [components]: {

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

@@ -4,9 +4,9 @@ import { Stack, StackProps } from '../stack';
 
 import { SheetClose } from './sheet';
 import { SheetContentVariants } from './sheet-content.css';
-import { sheetHeader, sheetHeaderCloseBtn } from './sheet-header.css';
+import { sheetHeaderRecipe, sheetHeaderCloseBtn } from './sheet-header.css';
 
-type SheetHeaderProps<TUse extends ElementType> = StackProps<TUse> & {
+export type SheetHeaderProps<TUse extends ElementType> = StackProps<TUse> & {
   side: SheetContentVariants['side'];
   closeBtn: ReactNode;
 };
@@ -20,7 +20,7 @@ export function SheetHeader<TUse extends ElementType>({
   ...props
 }: SheetHeaderProps<TUse>) {
   return (
-    <div ref={ref} className={sheetHeader({ side })}>
+    <div ref={ref} className={sheetHeaderRecipe({ side })}>
       <Stack spacing={spacing} {...props}>
         {children}
       </Stack>

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

@@ -6,9 +6,8 @@ import { ComponentPropsWithRef } from 'react';
 
 import { overlay } from '../overlay';
 
-export function SheetOverlay({
-  className,
-  ...props
-}: ComponentPropsWithRef<typeof Overlay>) {
+export type SheetOverlayProps = ComponentPropsWithRef<typeof Overlay>;
+
+export function SheetOverlay({ className, ...props }: SheetOverlayProps) {
   return <Overlay className={clsx(overlay, className)} {...props} />;
 }