@kalink-ui/seedly 0.34.4 → 0.35.0

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

@@ -1,13 +1,13 @@
 import { createVar, style, type StyleRule } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { createResponsiveVariants, defaultMedia, sys } from '../../styles';
+import { createResponsiveVariants, defaultMedia } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const lineClampNumber = createVar();
 export const textAlign = createVar();
 
-const lineClamp = style({
+const lineClamp = {
   '@layer': {
     [components]: {
       display: '-webkit-box',
@@ -16,7 +16,7 @@ const lineClamp = style({
       overflow: 'hidden',
     },
   },
-});
+} satisfies StyleRule;
 
 // Extract align styles for responsive overrides
 export const textAlignStyles = {
@@ -58,52 +58,107 @@ export const textAlignStyles = {
   },
 } as const;
 
-export const textRecipe = recipe({
-  base: {
+export const textWrapStyles = {
+  true: {
     '@layer': {
       [components]: {
-        textAlign,
-
-        vars: {
-          [textAlign]: 'inherit',
-        },
+        textWrap: 'wrap',
       },
     },
   },
-  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',
+      },
+    },
+  },
+} satisfies Record<'true' | 'false' | 'balance' | 'pretty', StyleRule>;
+
+export const textLineClampStyles = {
+  2: [
+    lineClamp,
+    {
+      '@layer': {
+        [components]: {
+          vars: {
+            [lineClampNumber]: '2',
           },
         },
       },
-      false: {
-        '@layer': {
-          [components]: {
-            textWrap: 'nowrap',
+    },
+  ],
+  3: [
+    lineClamp,
+    {
+      '@layer': {
+        [components]: {
+          vars: {
+            [lineClampNumber]: '3',
           },
         },
       },
-      balance: {
-        '@layer': {
-          [components]: {
-            textWrap: 'balance',
+    },
+  ],
+  4: [
+    lineClamp,
+    {
+      '@layer': {
+        [components]: {
+          vars: {
+            [lineClampNumber]: '4',
           },
         },
       },
-      pretty: {
-        '@layer': {
-          [components]: {
-            textWrap: 'pretty',
+    },
+  ],
+  5: [
+    lineClamp,
+    {
+      '@layer': {
+        [components]: {
+          vars: {
+            [lineClampNumber]: '5',
           },
         },
       },
     },
+  ],
+} satisfies Record<2 | 3 | 4 | 5, StyleRule | StyleRule[]>;
+
+export const textRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        textAlign,
+
+        vars: {
+          [textAlign]: 'inherit',
+        },
+      },
+    },
+  },
+  variants: {
+    /**
+     * Controls the wrapping of the text.
+     */
+    wrap: {
+      ...textWrapStyles,
+    },
 
     /**
      * If true, use an ellipsis when the text overflows the element.
@@ -127,54 +182,7 @@ export const textRecipe = recipe({
      * 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',
-              },
-            },
-          },
-        },
-      ],
+      ...textLineClampStyles,
     },
 
     /**
@@ -199,32 +207,12 @@ export const alignAt = createResponsiveVariants({
   media: defaultMedia,
 });
 
-// Responsive typography overrides for variant+size combos
-const typographyComboEntries = Object.entries(sys.typography).flatMap(
-  ([variantKey, sizes]) => {
-    return Object.entries(sizes).map(([sizeKey, v]) => {
-      const k = `${variantKey}.${sizeKey}`;
-      const rule: StyleRule = {
-        '@layer': {
-          [components]: {
-            fontFamily: v.font,
-            fontWeight: v.weight,
-            lineHeight: v.lineHeight,
-            letterSpacing: v.tracking,
-            fontSize: v.size,
-          },
-        },
-      };
-
-      return [k, rule] as const;
-    });
-  },
-);
+export const wrapAt = createResponsiveVariants({
+  styles: textWrapStyles,
+  media: defaultMedia,
+});
 
-export const typographyAt = createResponsiveVariants({
-  styles: Object.fromEntries(typographyComboEntries) as Record<
-    string,
-    StyleRule
-  >,
+export const lineClampAt = createResponsiveVariants({
+  styles: textLineClampStyles,
   media: defaultMedia,
 });

package/src/components/text/text.responsive.ts

@@ -1,69 +1,9 @@
-import {
-  defaultOrder,
-  resolveResponsive,
-  responsiveRecipe,
-  TypographySize,
-  TypographyVariant,
-  type BreakpointWithBase,
-  type Responsive,
-} from '../../styles';
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { alignAt, textRecipe, typographyAt } from './text.css';
+import { alignAt, lineClampAt, textRecipe, wrapAt } from './text.css';
 
 export const textResponsive = responsiveRecipe({
   recipe: textRecipe,
-  at: { align: alignAt },
+  at: { align: alignAt, wrap: wrapAt, lineClamp: lineClampAt },
   order: defaultOrder,
 });
-
-export function buildTypographyOverrides(opts: {
-  variant?: Responsive<TypographyVariant>;
-  size?: Responsive<TypographySize>;
-}) {
-  const { variant, size } = opts;
-  const varMap = resolveResponsive<TypographyVariant, BreakpointWithBase>(
-    variant,
-    defaultOrder,
-  );
-  const sizeMap = resolveResponsive<TypographySize, BreakpointWithBase>(
-    size,
-    defaultOrder,
-  );
-
-  // Carry forward variant/size values across breakpoints so that
-  // a value set at md persists to lg/xl/... unless overridden again.
-  let currentVariant = varMap.xs ?? (variant as TypographyVariant | undefined);
-  let currentSize = sizeMap.xs ?? (size as TypographySize | undefined);
-
-  const classes: string[] = [];
-
-  for (const bp of defaultOrder) {
-    if (bp === 'xs') {
-      continue;
-    }
-
-    if (varMap[bp] != null) {
-      currentVariant = varMap[bp];
-    }
-
-    if (sizeMap[bp] != null) {
-      currentSize = sizeMap[bp];
-    }
-
-    if (currentVariant && currentSize) {
-      const key = `${String(currentVariant)}.${String(currentSize)}`;
-      const cls = (
-        typographyAt as Record<
-          Exclude<BreakpointWithBase, 'xs'>,
-          Record<string, string>
-        >
-      )[bp]?.[key];
-
-      if (cls) {
-        classes.push(cls);
-      }
-    }
-  }
-
-  return classes;
-}

package/src/components/text/text.tsx

@@ -1,35 +1,21 @@
 import { PolymorphicComponentProps, getProp } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { TypographySize, TypographyVariant, typography } from '../../styles';
+import {
+  TypographySize,
+  TypographyVariant,
+  buildTypographyOverrides,
+  getResponsiveBase,
+  typography,
+  type Responsive,
+} from '../../styles';
 
 import { TextVariants, textEllipsisWrapper } from './text.css';
-import { buildTypographyOverrides, textResponsive } from './text.responsive';
-
-import type { Responsive } from '../../styles/responsive';
-
-function getBase<T extends string | number>(value: Responsive<T> | undefined) {
-  if (value == null) {
-    return undefined;
-  }
-
-  if (Array.isArray(value)) {
-    return value[0] ?? undefined;
-  }
-
-  if (typeof value === 'object') {
-    const obj = value as Partial<Record<string, T>> & { xs?: T };
-
-    return obj.xs;
-  }
-
-  return value;
-}
+import { textResponsive } from './text.responsive';
 
 export type TextProps<TUse extends React.ElementType> =
   PolymorphicComponentProps<TUse> &
-    Omit<TextVariants, 'align'> & {
+    Omit<TextVariants, 'align' | 'wrap' | 'lineClamp'> & {
       /**
        * The size of the typography used to render the text.
        */
@@ -40,6 +26,8 @@ export type TextProps<TUse extends React.ElementType> =
        */
       variant?: Responsive<TypographyVariant>;
       align?: Responsive<NonNullable<TextVariants['align']>>;
+      wrap?: Responsive<NonNullable<TextVariants['wrap']>>;
+      lineClamp?: Responsive<NonNullable<TextVariants['lineClamp']>>;
     };
 
 export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
@@ -57,15 +45,15 @@ export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
   } = props;
 
   const typographyOverrides = buildTypographyOverrides({ variant, size });
-  const baseVariant = getBase(variant) ?? 'body';
-  const baseSize = getBase(size) ?? 'medium';
+  const baseVariant = getResponsiveBase(variant) ?? 'body';
+  const baseSize = getResponsiveBase(size) ?? 'medium';
 
   return (
     <Comp
-      className={clsx(
+      className={textResponsive(
+        { truncate, lineClamp, align, wrap },
         getProp(typography, `${baseVariant}.${baseSize}`),
         typographyOverrides,
-        textResponsive({ truncate, lineClamp, align, wrap }),
         className,
       )}
       {...rest}

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

@@ -1,2 +1 @@
-export { TextField } from './text-field';
-export { textFieldStyle } from './text-field.css';
+export { TextField, type TextFieldProps } from './text-field';

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

@@ -1,7 +1,5 @@
 'use client';
 
-import { clsx } from 'clsx';
-
 import {
   FormField,
   FormFieldControl,
@@ -12,8 +10,6 @@ import {
 } from '../form-field';
 import { Input, InputProps } from '../input';
 
-import { textFieldStyle } from './text-field.css';
-
 export type TextFieldProps = InputProps & {
   name: string;
   label: string;
@@ -35,6 +31,7 @@ export function TextField({
   hideErrorMessage = false,
   size = 'md',
   className,
+  tone,
   ...rest
 }: TextFieldProps) {
   return (
@@ -45,8 +42,9 @@ export function TextField({
       hideErrorMessage={hideErrorMessage}
       disabled={disabled}
       hideLabel={hideLabel}
+      tone={tone}
     >
-      <FormFieldItem className={clsx(textFieldStyle, className)}>
+      <FormFieldItem className={className}>
         <FormFieldLabel required={required} disabled={disabled} size={size}>
           {label}
         </FormFieldLabel>
@@ -61,8 +59,8 @@ export function TextField({
           />
         </FormFieldControl>
 
-        <FormFieldDescription>{description}</FormFieldDescription>
-        <FormFieldError />
+        <FormFieldDescription size={size}>{description}</FormFieldDescription>
+        <FormFieldError size={size} />
       </FormFieldItem>
     </FormField>
   );

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

@@ -1,18 +1,45 @@
-import { clsx } from 'clsx';
 import { TextareaHTMLAttributes } from 'react';
 
+import {
+  buildTypographyOverrides,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+} from '../../styles';
 import { useFormFieldContext } from '../form-field/form-field-context';
+import { type InputAppearanceVariants } from '../input';
+import { inputAppearanceResponsive } from '../input/input.responsive';
 import { textarea } from '../textarea/textarea.css';
 
+export type TextareaInputProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'size'
+> &
+  Omit<InputAppearanceVariants, 'size'> & {
+    size?: Responsive<NonNullable<InputAppearanceVariants['size']>>;
+  };
+
 export function TextareaInput({
   className,
+  size = 'md',
+  variant = 'outlined',
+  tone = 'neutral',
   ...props
-}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+}: TextareaInputProps) {
   const { errors } = useFormFieldContext();
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'body',
+    size: typographySize,
+  });
 
   return (
     <textarea
-      className={clsx(textarea, className)}
+      className={inputAppearanceResponsive(
+        { variant, size, tone },
+        typographyOverrides,
+        textarea,
+        className,
+      )}
       aria-invalid={errors ? 'true' : undefined}
       {...props}
     />

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

@@ -1,12 +1,17 @@
 import { style } from '@vanilla-extract/css';
 
-import { inputAppearance } from '../input';
+import { components } from '../../styles/layers.css';
 
-export const textareaStyle = style({});
+export const textareaStyle = style({
+  '@layer': {
+    [components]: {},
+  },
+});
 
-export const textarea = style([
-  inputAppearance(),
-  {
-    lineHeight: 'auto',
+export const textarea = style({
+  '@layer': {
+    [components]: {
+      lineHeight: 'normal',
+    },
   },
-]);
+});

package/src/components/textarea/textarea.tsx

@@ -17,7 +17,7 @@ import { TextareaInput } from './textarea-input';
 import { textareaStyle } from './textarea.css';
 
 export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
-  InputProps & {
+  Omit<InputProps, 'type' | 'startAdornment' | 'endAdornment' | 'inputRef'> & {
     name: string;
     label: string;
     description?: string;
@@ -37,6 +37,8 @@ export function Textarea({
   required,
   hideErrorMessage = false,
   size = 'md',
+  variant = 'outlined',
+  tone = 'neutral',
   ...rest
 }: TextareaProps) {
   return (
@@ -47,6 +49,7 @@ export function Textarea({
       hideErrorMessage={hideErrorMessage}
       disabled={disabled}
       hideLabel={hideLabel}
+      tone={tone}
     >
       <FormFieldItem className={clsx(textareaStyle, className)}>
         <FormFieldLabel disabled={disabled} required={required} size={size}>
@@ -59,12 +62,15 @@ export function Textarea({
             className={className}
             disabled={disabled}
             aria-label={hideLabel ? label : undefined}
+            size={size}
+            variant={variant}
+            tone={tone}
             {...rest}
           />
         </FormFieldControl>
 
-        <FormFieldDescription>{description}</FormFieldDescription>
-        <FormFieldError />
+        <FormFieldDescription size={size}>{description}</FormFieldDescription>
+        <FormFieldError size={size} />
       </FormFieldItem>
     </FormField>
   );

package/src/components/visually-hidden/visually-hidden.css.ts

@@ -1,17 +1,23 @@
 import { style } from '@vanilla-extract/css';
 
+import { components } from '../../styles/layers.css';
+
 export const visuallyHiddenStyle = style({
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: 'hidden',
-  clip: 'rect(0, 0, 0, 0)',
+  '@layer': {
+    [components]: {
+      width: 1,
+      height: 1,
+      padding: 0,
+      margin: -1,
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
 
-  position: 'absolute',
+      position: 'absolute',
 
-  whiteSpace: 'nowrap',
-  wordWrap: 'normal',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
 
-  border: 0,
+      border: 0,
+    },
+  },
 });

package/src/styles/define-responsive-properties.ts

@@ -11,6 +11,8 @@ interface ScreenMediaQueries {
   md: `screen and (min-width: ${string}px)`;
   lg: `screen and (min-width: ${string}px)`;
   xl: `screen and (min-width: ${string}px)`;
+  '2xl': `screen and (min-width: ${string}px)`;
+  '3xl': `screen and (min-width: ${string}px)`;
 }
 
 interface DefineResponsivePropertiesArgs {
@@ -29,10 +31,12 @@ export const defineResponsiveProperties = ({
       md: { '@media': screen.md },
       lg: { '@media': screen.lg },
       xl: { '@media': screen.xl },
+      '2xl': { '@media': screen['2xl'] },
+      '3xl': { '@media': screen['3xl'] },
     },
 
     defaultCondition: 'xs',
-    responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl'],
+    responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
 
     properties: {
       display: [

package/src/styles/index.ts

@@ -1,11 +1,15 @@
 export {
   sys,
   type Spacing,
+  type Tone,
   type TypographySize,
   type TypographyVariant,
 } from './system-contract.css';
 export { typography } from './typography.css';
 
+export { sprout } from './theme/sprout.css';
+export { refs as sproutRefs } from './theme/sprout-ref.css';
+
 export {
   extractSprinklesProps,
   type GetSprinkles,
@@ -27,12 +31,18 @@ export {
   responsiveRecipe,
   createResponsiveVariants,
   resolveResponsive,
+  getResponsiveBase,
   defaultMedia,
   defaultOrder,
   type Responsive,
   type BreakpointWithBase,
 } from './responsive';
 
+export {
+  buildTypographyOverrides,
+  mapResponsiveSizeToTypography,
+} from './typography.responsive';
+
 export { breakpoints, screen, type BreakpointKey } from './breakpoints';
 
 export {
@@ -45,3 +55,5 @@ export {
   type FluidClampOptions,
   type FluidClampForOptions,
 } from './scale';
+
+export { createToneAssignments, createToneStyles } from './tone';