@kalink-ui/seedly 0.8.1 → 0.10.0

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

@@ -1,25 +1,191 @@
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
+
+export const lineClampNumber = createVar();
+export const textAlign = createVar();
+
+const lineClamp = style({
+  '@layer': {
+    [components]: {
+      display: '-webkit-box',
+      WebkitLineClamp: lineClampNumber,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+    },
+  },
+});
+
 export const textRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        textAlign,
+
+        vars: {
+          [textAlign]: 'inherit',
+        },
+      },
+    },
+  },
   variants: {
+    /**
+     * Controls the wrapping of the text.
+     */
+    wrap: {
+      true: {
+        '@layer': {
+          [components]: {
+            textWrap: 'wrap',
+          },
+        },
+      },
+      false: {
+        '@layer': {
+          [components]: {
+            textWrap: 'nowrap',
+          },
+        },
+      },
+      balance: {
+        '@layer': {
+          [components]: {
+            textWrap: 'balance',
+          },
+        },
+      },
+      pretty: {
+        '@layer': {
+          [components]: {
+            textWrap: 'pretty',
+          },
+        },
+      },
+    },
+
     /**
      * If true, use an ellipsis when the text overflows the element.
      */
-    ellipsis: {
+    truncate: {
       true: {
-        display: 'inline-block',
-        maxWidth: '100%',
-        overflow: 'hidden',
+        '@layer': {
+          [components]: {
+            display: 'inline-block',
+            maxWidth: '100%',
+            overflow: 'hidden',
+
+            textOverflow: 'ellipsis',
+          },
+        },
+      },
+    },
+
+    /**
+     * If provided, the text will be truncated and displayed with a maximum of
+     * the provided number of lines.
+     */
+    lineClamp: {
+      2: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '2',
+              },
+            },
+          },
+        },
+      ],
+      3: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '3',
+              },
+            },
+          },
+        },
+      ],
+      4: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '4',
+              },
+            },
+          },
+        },
+      ],
+      5: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '5',
+              },
+            },
+          },
+        },
+      ],
+    },
 
-        textOverflow: 'ellipsis',
+    /**
+     * Controls the alignment of the text.
+     */
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [textAlign]: 'start',
+            },
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [textAlign]: 'center',
+            },
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [textAlign]: 'end',
+            },
+          },
+        },
+      },
+      justify: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [textAlign]: 'justify',
+            },
+          },
+        },
       },
     },
   },
 });
 
 export const textEllipsisWrapper = style({
-  whiteSpace: 'nowrap',
+  '@layer': {
+    [components]: {
+      whiteSpace: 'nowrap',
+    },
+  },
 });
 
 export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;

package/src/components/text/text.tsx

@@ -1,8 +1,4 @@
-import {
-  DistributiveOmit,
-  PolymorphicComponentProps,
-  getProp,
-} from '@kalink-ui/dibbly';
+import { PolymorphicComponentProps, getProp } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
@@ -10,48 +6,44 @@ import { TypographySize, TypographyVariant, typography } from '../../styles';
 
 import { TextVariants, textRecipe, textEllipsisWrapper } from './text.css';
 
-export type TextProps<TUse extends React.ElementType> = DistributiveOmit<
-  PolymorphicComponentProps<TUse>,
-  'children'
-> &
-  TextVariants & {
-    /**
-     * The size of the typography used to render the text.
-     */
-    size?: TypographySize;
+export type TextProps<TUse extends React.ElementType> =
+  PolymorphicComponentProps<TUse> &
+    TextVariants & {
+      /**
+       * The size of the typography used to render the text.
+       */
+      size?: TypographySize;
 
-    /**
-     * The typography variant used to render the text.
-     */
-    variant?: Extract<TypographyVariant, 'body' | 'caption' | 'label'>;
-
-    /**
-     * The text to render.
-     */
-    children: string;
-  };
+      /**
+       * The typography variant used to render the text.
+       */
+      variant?: TypographyVariant;
+    };
 
 export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
   const {
     children,
     className,
-    ellipsis,
+    truncate,
+    lineClamp,
     size = 'medium',
     use: Comp = 'span',
     variant = 'body',
+    wrap,
+    align,
     ...rest
   } = props;
 
   return (
     <Comp
       className={clsx(
-        textRecipe({ ellipsis }),
         getProp(typography, `${variant}.${size}`),
+        textRecipe({ truncate, lineClamp, align, wrap }),
         className,
       )}
       {...rest}
     >
-      {ellipsis ? (
+      {truncate ? (
         <span className={textEllipsisWrapper}>{children}</span>
       ) : (
         children

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({});

package/src/components/text-field/text-field.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import {
+  FormField,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+  FormFieldItem,
+  FormFieldLabel,
+} from '../form-field';
+import { Input, InputProps } from '../input';
+
+export type TextFieldProps = InputProps & {
+  name: string;
+  label: string;
+  description?: string;
+  wrapperClassName?: string;
+  hideLabel?: boolean;
+  errors?: string | null;
+  hideErrorMessage?: boolean;
+};
+
+export function TextField({
+  description,
+  disabled,
+  label,
+  name,
+  hideLabel = false,
+  errors,
+  required,
+  hideErrorMessage = false,
+  size = 'md',
+  ...rest
+}: TextFieldProps) {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      errors={errors}
+      hideErrorMessage={hideErrorMessage}
+      disabled={disabled}
+      hideLabel={hideLabel}
+    >
+      <FormFieldItem>
+        <FormFieldLabel required={required} disabled={disabled} size={size}>
+          {label}
+        </FormFieldLabel>
+
+        <FormFieldControl>
+          <Input
+            name={name}
+            disabled={disabled}
+            required={required}
+            size={size}
+            {...rest}
+          />
+        </FormFieldControl>
+
+        <FormFieldDescription>{description}</FormFieldDescription>
+        <FormFieldError />
+      </FormFieldItem>
+    </FormField>
+  );
+}

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from './textarea';

package/src/components/textarea/textarea-input.tsx

@@ -0,0 +1,20 @@
+import { clsx } from 'clsx';
+import { TextareaHTMLAttributes } from 'react';
+
+import { useFormFieldContext } from '../form-field/form-field-context';
+import { textarea } from '../textarea/textarea.css';
+
+export function TextareaInput({
+  className,
+  ...props
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const { errors } = useFormFieldContext();
+
+  return (
+    <textarea
+      className={clsx(textarea, className)}
+      aria-invalid={errors ? 'true' : undefined}
+      {...props}
+    />
+  );
+}

package/src/components/textarea/textarea.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+import { inputAppearance } from '../input';
+
+export const textarea = style([
+  inputAppearance(),
+  {
+    lineHeight: 'auto',
+  },
+]);

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { TextareaHTMLAttributes } from 'react';
+
+import {
+  FormField,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+  FormFieldItem,
+  FormFieldLabel,
+} from '../form-field';
+import { InputProps } from '../input';
+
+import { TextareaInput } from './textarea-input';
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
+  InputProps & {
+    name: string;
+    label: string;
+    description?: string;
+    hideLabel?: boolean;
+    errors: string;
+    hideErrorMessage?: boolean;
+  };
+
+export function Textarea({
+  className,
+  description,
+  disabled,
+  label,
+  name,
+  hideLabel = false,
+  errors,
+  required,
+  hideErrorMessage = false,
+  size = 'md',
+  ...rest
+}: TextareaProps) {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      errors={errors}
+      hideErrorMessage={hideErrorMessage}
+      disabled={disabled}
+      hideLabel={hideLabel}
+    >
+      <FormFieldItem>
+        <FormFieldLabel disabled={disabled} required={required} size={size}>
+          {label}
+        </FormFieldLabel>
+
+        <FormFieldControl>
+          <TextareaInput
+            name={name}
+            className={className}
+            disabled={disabled}
+            aria-label={hideLabel ? label : undefined}
+            {...rest}
+          />
+        </FormFieldControl>
+
+        <FormFieldDescription>{description}</FormFieldDescription>
+        <FormFieldError />
+      </FormFieldItem>
+    </FormField>
+  );
+}