@kalink-ui/seedly 0.9.0 → 0.10.0

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { Trigger, Icon } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { buttonRecipe } from '../button/button.css';
+import { useFormFieldItemContext, useFormFieldContext } from '../form-field';
+
+import { openIndicator, selectTrigger } from './select-trigger.css';
+
+export type SelectTriggerProps = ComponentPropsWithRef<typeof Trigger> & {
+  icon?: ReactNode;
+};
+
+export function SelectTrigger({
+  className,
+  children,
+  icon = null,
+  ...props
+}: SelectTriggerProps) {
+  const { errors, label } = useFormFieldContext();
+  const { id } = useFormFieldItemContext();
+
+  return (
+    <Trigger
+      id={id}
+      className={clsx(selectTrigger, className)}
+      aria-invalid={errors ? 'true' : undefined}
+      aria-label={label}
+      {...props}
+    >
+      {children}
+      <Icon asChild>
+        <div
+          // Mimic the Combobox style
+          className={clsx(
+            buttonRecipe({ size: 'sm', variant: 'bare' }),
+            openIndicator({ fallback: !icon }),
+          )}
+        >
+          {icon}
+        </div>
+      </Icon>
+    </Trigger>
+  );
+}

package/src/components/select/select.tsx

@@ -0,0 +1,85 @@
+import { Value } from '@radix-ui/react-select';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+
+import {
+  FormField,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+  FormFieldItem,
+  FormFieldLabel,
+} from '../form-field';
+import { InputAppearanceVariants } from '../input';
+
+import { SelectContent } from './select-content';
+import { SelectRoot } from './select-root';
+import { SelectTrigger } from './select-trigger';
+
+export type SelectProps = ComponentPropsWithoutRef<typeof SelectRoot> &
+  Pick<ComponentPropsWithoutRef<typeof Value>, 'placeholder'> &
+  Pick<
+    ComponentPropsWithRef<typeof SelectTrigger>,
+    'onBlur' | 'onFocus' | 'ref'
+  > &
+  InputAppearanceVariants & {
+    name: string;
+    label: string;
+    description?: string;
+    container?: HTMLElement | null | false;
+    hideLabel?: boolean;
+    errors: string;
+    hideErrorMessage?: boolean;
+  };
+
+export function Select({
+  placeholder,
+  label,
+  children,
+  container,
+  description,
+  name,
+  hideErrorMessage = false,
+  hideLabel = false,
+  disabled,
+  errors,
+  onBlur,
+  onFocus,
+  required,
+  size = 'md',
+  ref,
+  ...props
+}: SelectProps) {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      errors={errors}
+      hideErrorMessage={hideErrorMessage}
+      disabled={disabled}
+      hideLabel={hideLabel}
+    >
+      <FormFieldItem>
+        <FormFieldLabel required={required} disabled={disabled} size={size}>
+          {label}
+        </FormFieldLabel>
+
+        <SelectRoot disabled={disabled} {...props}>
+          <FormFieldControl>
+            <SelectTrigger
+              ref={ref}
+              title={hideLabel ? label : undefined}
+              onBlur={onBlur}
+              onFocus={onFocus}
+              aria-label={hideLabel ? label : undefined}
+            >
+              <Value placeholder={placeholder} className="test" />
+            </SelectTrigger>
+          </FormFieldControl>
+          <SelectContent container={container}>{children}</SelectContent>
+        </SelectRoot>
+        <FormFieldDescription>{description}</FormFieldDescription>
+        <FormFieldError />
+      </FormFieldItem>
+    </FormField>
+  );
+}

package/src/components/sheet/index.ts

@@ -0,0 +1,5 @@
+export { Sheet, SheetTrigger, SheetClose, SheetPortal } from './sheet';
+export { SheetHeader } from './sheet-header';
+export { SheetTitle } from './sheet-title';
+export { SheetDescription } from './sheet-description';
+export { SheetContent } from './sheet-content';

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

@@ -0,0 +1,143 @@
+import { createVar, keyframes } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+const from = createVar();
+const to = createVar();
+const size = createVar();
+
+const enter = keyframes({
+  '0%': {
+    transform: from,
+  },
+
+  '100%': {
+    transform: to,
+  },
+});
+
+const leave = keyframes({
+  '0%': {
+    transform: to,
+  },
+
+  '100%': {
+    transform: from,
+  },
+});
+
+export const sheetContent = recipe({
+  base: {
+    zIndex: 50,
+    maxWidth: '100vw',
+    maxHeight: '100vh',
+
+    position: 'fixed',
+
+    boxShadow: sys.elevation.high,
+
+    animationDuration: sys.motion.duration.medium[2],
+    animationTimingFunction: sys.motion.easing.standard,
+    animationFillMode: 'both',
+
+    selectors: {
+      '&[data-state="open"]': {
+        animationName: enter,
+
+        pointerEvents: 'auto',
+      },
+
+      '&[data-state="closed"]': {
+        animationName: leave,
+
+        pointerEvents: 'none',
+      },
+    },
+  },
+
+  variants: {
+    side: {
+      top: {
+        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)',
+        },
+      },
+      bottom: {
+        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)',
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        vars: {
+          [size]: '300px',
+        },
+      },
+      base: {
+        vars: {
+          [size]: '400px',
+        },
+      },
+      md: {
+        vars: {
+          [size]: '500px',
+        },
+      },
+      lg: {
+        vars: {
+          [size]: '600px',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    side: 'right',
+    size: 'base',
+  },
+});
+
+export type SheetContentVariants = NonNullable<
+  RecipeVariants<typeof sheetContent>
+>;

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { Content, Portal } from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+import { ScrollArea } from '../scroll-area';
+
+import { SheetPortal } from './sheet';
+import { sheetContent, SheetContentVariants } from './sheet-content.css';
+import { SheetOverlay } from './sheet-overlay';
+
+export type SheetContentProps<TUse extends ElementType> = BoxProps<TUse> &
+  ComponentPropsWithoutRef<typeof Portal> &
+  SheetContentVariants;
+
+export function SheetContent<TUse extends ElementType>({
+  className,
+  children,
+  container,
+  side,
+  size,
+  ref,
+  ...props
+}: SheetContentProps<TUse>) {
+  return (
+    <SheetPortal container={container}>
+      <SheetOverlay />
+      <Content asChild>
+        <Box
+          ref={ref}
+          variant="solid"
+          className={clsx(sheetContent({ side, size }), className)}
+        >
+          <ScrollArea>
+            <Box {...props}>{children}</Box>
+          </ScrollArea>
+        </Box>
+      </Content>
+    </SheetPortal>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { Description } from '@radix-ui/react-dialog';
+import { ComponentPropsWithRef, ElementType } from 'react';
+
+import { Text, TextProps } from '../text';
+
+type SheetDescriptionPros<TUse extends ElementType> = ComponentPropsWithRef<
+  typeof Description
+> &
+  TextProps<TUse>;
+
+export function SheetDescription<TUse extends ElementType>({
+  ref,
+  children,
+  ...props
+}: SheetDescriptionPros<TUse>) {
+  return (
+    <Description ref={ref} asChild {...props}>
+      <Text>{children}</Text>
+    </Description>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+
+export function SheetFooter<TUse extends ElementType>(props: BoxProps<TUse>) {
+  return (
+    <Box
+      display="flex"
+      flexDirection={{ sm: 'column-reverse', md: 'row' }}
+      justifyContent={{ sm: 'flex-start', md: 'flex-end' }}
+      gap="sm"
+      {...props}
+    />
+  );
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+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,
+    },
+  },
+});

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

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

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { Title } from '@radix-ui/react-dialog';
+import { ComponentPropsWithRef } from 'react';
+
+import { Heading, HeadingProps, HeadingTypes } from '../heading';
+
+type SheetTitleProps<TUse extends HeadingTypes> = ComponentPropsWithRef<
+  typeof Title
+> &
+  HeadingProps<TUse>;
+
+export function SheetTitle<TUse extends HeadingTypes>(
+  props: SheetTitleProps<TUse>,
+) {
+  const { use = 'h2', className, children, variant, size, ...rest } = props;
+
+  return (
+    <Title asChild>
+      <Heading
+        use={use as HeadingProps<TUse>['use']}
+        variant={variant}
+        size={size}
+        className={className}
+        {...rest}
+      >
+        {children}
+      </Heading>
+    </Title>
+  );
+}

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
+
+export const Sheet = Root;
+export const SheetTrigger = Trigger;
+export const SheetClose = Close;
+export const SheetPortal = Portal;

package/src/components/stack/index.ts

@@ -1,2 +1,2 @@
-export { Stack } from './stack';
+export { Stack, type StackProps } from './stack';
 export { stackRecipe, type StackVariants } from './stack.css';

package/src/components/stack/stack.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { stackRecipe, StackVariants } from './stack.css';
 
-type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  StackVariants;
+export type StackProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & StackVariants;
 
 /**
  * A custom element for injecting white space (margin) between flow

package/src/components/text/index.ts

@@ -1 +1,7 @@
 export { Text, type TextProps } from './text';
+export {
+  textRecipe,
+  textAlign,
+  lineClampNumber,
+  type TextVariants,
+} from './text.css';

package/src/components/text/text.css.ts

@@ -3,7 +3,8 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { components } from '../../styles/layers.css';
 
-const lineClampNumber = createVar();
+export const lineClampNumber = createVar();
+export const textAlign = createVar();
 
 const lineClamp = style({
   '@layer': {
@@ -17,6 +18,17 @@ const lineClamp = style({
 });
 
 export const textRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        textAlign,
+
+        vars: {
+          [textAlign]: 'inherit',
+        },
+      },
+    },
+  },
   variants: {
     /**
      * Controls the wrapping of the text.
@@ -131,21 +143,36 @@ export const textRecipe = recipe({
       start: {
         '@layer': {
           [components]: {
-            textAlign: 'start',
+            vars: {
+              [textAlign]: 'start',
+            },
           },
         },
       },
       center: {
         '@layer': {
           [components]: {
-            textAlign: 'center',
+            vars: {
+              [textAlign]: 'center',
+            },
           },
         },
       },
       end: {
         '@layer': {
           [components]: {
-            textAlign: 'end',
+            vars: {
+              [textAlign]: 'end',
+            },
+          },
+        },
+      },
+      justify: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [textAlign]: 'justify',
+            },
           },
         },
       },

package/src/components/text-field/index.ts

@@ -0,0 +1 @@
+export { TextField } from './text-field';

package/src/components/text-field/text-field.css.ts

@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css';
+
+export const textFieldStyle = style({});