@kalink-ui/seedly 0.25.0 → 0.26.1

package/src/components/stack/stack.tsx

@@ -2,10 +2,17 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { stackRecipe, StackVariants } from './stack.css';
+import { StackVariants } from './stack.css';
+import { stackResponsive } from './stack.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type StackProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & StackVariants;
+  PolymorphicComponentProps<TUse> &
+    Omit<StackVariants, 'spacing' | 'align'> & {
+      spacing?: Responsive<NonNullable<StackVariants['spacing']>>;
+      align?: Responsive<NonNullable<StackVariants['align']>>;
+    };
 
 /**
  * A custom element for injecting white space (margin) between flow
@@ -27,7 +34,7 @@ export function Stack<TUse extends ElementType = 'div'>({
 
   return (
     <Comp
-      className={clsx(stackRecipe({ spacing, align }), className)}
+      className={clsx(stackResponsive({ spacing, align }), className)}
       {...rest}
     />
   );

package/src/components/switcher/switcher.css.ts

@@ -1,12 +1,26 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, mapContractVars } from '../../styles';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+  sys,
+  mapContractVars,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const thresholdVar = createVar();
 export const limitVar = createVar();
 
+// Shared variant styles to support responsive overrides
+export const switcherSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      gap: sys.spacing[key],
+    },
+  },
+}));
+
 export const switcherRecipe = recipe({
   base: {
     '@layer': {
@@ -25,13 +39,7 @@ export const switcherRecipe = recipe({
     /**
      * The space (margin) between the child elements
      */
-    spacing: mapContractVars(sys.spacing, (key) => ({
-      '@layer': {
-        [components]: {
-          gap: sys.spacing[key],
-        },
-      },
-    })),
+    spacing: switcherSpacingStyles,
 
     /**
      * The maximum number of elements allowed to appear in the horizontal configuration
@@ -123,3 +131,8 @@ globalStyle(
 export type SwitcherVariants = NonNullable<
   RecipeVariants<typeof switcherRecipe>
 >;
+
+export const spacingAt = createResponsiveVariants({
+  styles: switcherSpacingStyles,
+  media: defaultMedia,
+});

package/src/components/switcher/switcher.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { spacingAt, switcherRecipe } from './switcher.css';
+
+export const switcherResponsive = responsiveRecipe({
+  recipe: switcherRecipe,
+  at: { spacing: spacingAt },
+  order: defaultOrder,
+});

package/src/components/switcher/switcher.tsx

@@ -5,15 +5,19 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
+import { SwitcherVariants, thresholdVar } from './switcher.css';
+import { switcherResponsive } from './switcher.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 export type SwitcherProps<TUse extends ElementType> =
   PolymorphicComponentProps<TUse> &
-    SwitcherVariants & {
+    Omit<SwitcherVariants, 'spacing'> & {
       /**
        * The threshold at which to switch between horizontal and vertical layouts
        */
       threshold?: string;
+      spacing?: Responsive<NonNullable<SwitcherVariants['spacing']>>;
     };
 
 /**
@@ -33,7 +37,7 @@ export function Switcher<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(switcherRecipe({ spacing, limit }), className)}
+      className={clsx(switcherResponsive({ spacing, limit }), className)}
       style={assignInlineVars({
         ...(threshold && { [thresholdVar]: threshold }),
       })}

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

@@ -1,6 +1,7 @@
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, style, type StyleRule } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { createResponsiveVariants, defaultMedia, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const lineClampNumber = createVar();
@@ -17,6 +18,46 @@ const lineClamp = style({
   },
 });
 
+// Extract align styles for responsive overrides
+export const textAlignStyles = {
+  start: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'start',
+        },
+      },
+    },
+  },
+  center: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'center',
+        },
+      },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'end',
+        },
+      },
+    },
+  },
+  justify: {
+    '@layer': {
+      [components]: {
+        vars: {
+          [textAlign]: 'justify',
+        },
+      },
+    },
+  },
+} as const;
+
 export const textRecipe = recipe({
   base: {
     '@layer': {
@@ -139,44 +180,7 @@ export const textRecipe = recipe({
     /**
      * 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',
-            },
-          },
-        },
-      },
-    },
+    align: textAlignStyles,
   },
 });
 
@@ -189,3 +193,38 @@ export const textEllipsisWrapper = style({
 });
 
 export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;
+
+export const alignAt = createResponsiveVariants({
+  styles: textAlignStyles,
+  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 typographyAt = createResponsiveVariants({
+  styles: Object.fromEntries(typographyComboEntries) as Record<
+    string,
+    StyleRule
+  >,
+  media: defaultMedia,
+});

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

@@ -0,0 +1,69 @@
+import {
+  defaultOrder,
+  resolveResponsive,
+  responsiveRecipe,
+  TypographySize,
+  TypographyVariant,
+  type BreakpointWithBase,
+  type Responsive,
+} from '../../styles';
+
+import { alignAt, textRecipe, typographyAt } from './text.css';
+
+export const textResponsive = responsiveRecipe({
+  recipe: textRecipe,
+  at: { align: alignAt },
+  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

@@ -4,20 +4,42 @@ import { ElementType } from 'react';
 
 import { TypographySize, TypographyVariant, typography } from '../../styles';
 
-import { TextVariants, textRecipe, textEllipsisWrapper } from './text.css';
+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;
+}
 
 export type TextProps<TUse extends React.ElementType> =
   PolymorphicComponentProps<TUse> &
-    TextVariants & {
+    Omit<TextVariants, 'align'> & {
       /**
        * The size of the typography used to render the text.
        */
-      size?: TypographySize;
+      size?: Responsive<TypographySize>;
 
       /**
        * The typography variant used to render the text.
        */
-      variant?: TypographyVariant;
+      variant?: Responsive<TypographyVariant>;
+      align?: Responsive<NonNullable<TextVariants['align']>>;
     };
 
 export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
@@ -26,19 +48,24 @@ export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
     className,
     truncate,
     lineClamp,
-    size = 'medium',
+    size,
     use: Comp = 'span',
-    variant = 'body',
+    variant,
     wrap,
     align,
     ...rest
   } = props;
 
+  const typographyOverrides = buildTypographyOverrides({ variant, size });
+  const baseVariant = getBase(variant) ?? 'body';
+  const baseSize = getBase(size) ?? 'medium';
+
   return (
     <Comp
       className={clsx(
-        getProp(typography, `${variant}.${size}`),
-        textRecipe({ truncate, lineClamp, align, wrap }),
+        getProp(typography, `${baseVariant}.${baseSize}`),
+        typographyOverrides,
+        textResponsive({ truncate, lineClamp, align, wrap }),
         className,
       )}
       {...rest}

package/src/styles/breakpoints.ts

@@ -0,0 +1,25 @@
+export const breakpoints = {
+  sm: 568,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1600,
+  '3xl': 1920,
+} as const;
+
+export type BreakpointKey = keyof typeof breakpoints;
+
+export const screen = {
+  maxXs: `(max-width: ${breakpoints.sm - 1}px)`,
+  sm: `(min-width: ${breakpoints.sm}px)`,
+  maxSm: `(max-width: ${breakpoints.md - 1}px)`,
+  md: `(min-width: ${breakpoints.md}px)`,
+  maxMd: `(max-width: ${breakpoints.lg - 1}px)`,
+  lg: `(min-width: ${breakpoints.lg}px)`,
+  maxLg: `(max-width: ${breakpoints.xl - 1}px)`,
+  xl: `(min-width: ${breakpoints.xl}px)`,
+  maxXl: `(max-width: ${breakpoints['2xl'] - 1}px)`,
+  '2xl': `(min-width: ${breakpoints['2xl']}px)`,
+  max2xl: `(max-width: ${breakpoints['3xl'] - 1}px)`,
+  '3xl': `(min-width: ${breakpoints['3xl']}px)`,
+} as const;

package/src/styles/index.ts

@@ -22,3 +22,15 @@ export {
 export { transition, type CreateTransitionFn } from './transition';
 
 export { visuallyHidden } from './visually-hidden.css';
+
+export {
+  responsiveRecipe,
+  createResponsiveVariants,
+  resolveResponsive,
+  defaultMedia,
+  defaultOrder,
+  type Responsive,
+  type BreakpointWithBase,
+} from './responsive';
+
+export { breakpoints, screen, type BreakpointKey } from './breakpoints';

package/src/styles/responsive.ts

@@ -0,0 +1,180 @@
+import { styleVariants, type StyleRule } from '@vanilla-extract/css';
+import { clsx } from 'clsx';
+
+import { screen, type BreakpointKey } from './breakpoints';
+
+export type BreakpointWithBase = 'xs' | BreakpointKey;
+
+export type ResponsiveObject<T, B extends string> = Partial<
+  Record<Exclude<B, 'xs'>, T>
+> & { xs?: T };
+export type ResponsiveArray<T> = (T | null | undefined)[];
+export type Responsive<T, B extends string = BreakpointWithBase> =
+  | T
+  | ResponsiveObject<T, B>
+  | ResponsiveArray<T>;
+
+export function resolveResponsive<T, B extends string = BreakpointWithBase>(
+  value: Responsive<T, B> | undefined,
+  order: readonly B[],
+): Partial<Record<B, T>> {
+  if (value == null) {
+    return {};
+  }
+
+  if (Array.isArray(value)) {
+    const out: Partial<Record<B, T>> = {};
+
+    value.forEach((val, i) => {
+      const breakpoint = order[i] as B | undefined;
+
+      if (val != null && breakpoint) {
+        out[breakpoint] = val as T;
+      }
+    });
+
+    return out;
+  }
+
+  if (typeof value === 'object') {
+    return value as Partial<Record<B, T>>;
+  }
+
+  return { xs: value as T } as Partial<Record<B, T>>;
+}
+
+export interface CreateResponsiveVariantsArgs<
+  VariantValues extends string | number,
+  Bps extends string,
+> {
+  styles: Record<VariantValues, StyleRule | StyleRule[]>;
+  media: Partial<Record<Exclude<Bps, 'xs'>, string>>;
+}
+
+export function createResponsiveVariants<
+  const VariantValues extends string | number,
+  const Bps extends string,
+>(args: CreateResponsiveVariantsArgs<VariantValues, Bps>) {
+  const { styles, media } = args;
+
+  const at = Object.fromEntries(
+    Object.entries(media).map(([bp, query]) => {
+      const styleEntries = Object.entries(styles) as [
+        VariantValues,
+        StyleRule | StyleRule[],
+      ][];
+
+      const styleMap = Object.fromEntries(
+        styleEntries.map(([val, rule]) => [
+          val,
+          applyMedia(query as string, rule),
+        ]),
+      ) as Record<VariantValues, StyleRule | StyleRule[]>;
+
+      return [bp, styleVariants(styleMap)];
+    }),
+  ) as Record<Exclude<Bps, 'xs'>, Record<VariantValues, string>>;
+
+  return at;
+}
+
+function applyMedia(
+  query: string,
+  rule: StyleRule | StyleRule[],
+): StyleRule | StyleRule[] {
+  if (Array.isArray(rule)) {
+    return rule.map((r) => ({ '@media': { [query]: r } })) as StyleRule[];
+  }
+
+  return { '@media': { [query]: rule } } as StyleRule;
+}
+
+type MakeResponsive<V, B extends string> = {
+  [K in keyof V]: V[K] extends string | number ? Responsive<V[K], B> : V[K];
+};
+
+export interface ResponsiveRecipeArgs<V, Bps extends string> {
+  recipe: (props: V) => string;
+  at: Partial<
+    Record<keyof V, Record<Exclude<Bps, 'xs'>, Record<string, string>>>
+  >;
+  order: readonly Bps[];
+}
+
+export function responsiveRecipe<
+  V extends Record<string, unknown>,
+  const Bps extends string,
+>(args: ResponsiveRecipeArgs<V, Bps>) {
+  const { recipe, at, order } = args;
+
+  return (props: MakeResponsive<V, Bps> & { className?: string }) => {
+    const { className, ...rest } = props as Record<string, unknown> & {
+      className?: string;
+    };
+
+    const baseProps: Partial<V> = {};
+
+    for (const key in rest) {
+      const value = (rest as Record<string, unknown>)[key];
+      const map = resolveResponsive(value, order);
+
+      (baseProps as Record<string, unknown>)[key] =
+        (map as Record<string, unknown>)['xs'] ?? value;
+    }
+
+    const base = recipe(baseProps as V);
+    const overrides: string[] = [];
+
+    for (const key in rest) {
+      const value = (rest as Record<string, unknown>)[key];
+      const map = resolveResponsive(value, order);
+      const variantAt = (at as Record<string, unknown>)[key] as
+        | Record<string, Record<string, string>>
+        | undefined;
+
+      if (!variantAt) {
+        continue;
+      }
+
+      for (const bp of order) {
+        if (bp === 'xs') {
+          continue;
+        }
+
+        const val = (map as Partial<Record<Bps, unknown>>)[bp];
+
+        if (val == null) {
+          continue;
+        }
+
+        const cls = variantAt[bp as string]?.[String(val)];
+
+        if (cls) {
+          overrides.push(cls);
+        }
+      }
+    }
+
+    return clsx(base, ...overrides, className);
+  };
+}
+
+// Default viewport media queries (can be replaced per-component if needed)
+export const defaultMedia = {
+  sm: screen.sm,
+  md: screen.md,
+  lg: screen.lg,
+  xl: screen.xl,
+  '2xl': screen['2xl'],
+  '3xl': screen['3xl'],
+} as const satisfies Partial<Record<BreakpointKey, string>>;
+
+export const defaultOrder: readonly BreakpointWithBase[] = [
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+] as const;