@kalink-ui/seedly 0.34.3 → 0.35.0

package/src/styles/typography.responsive.css.ts

@@ -0,0 +1,35 @@
+import { type StyleRule } from '@vanilla-extract/css';
+
+import { components } from './layers.css';
+import { createResponsiveVariants, defaultMedia } from './responsive';
+import { sys } from './system-contract.css';
+
+const typographyComboEntries = Object.entries(sys.typography).flatMap(
+  ([variantKey, sizes]) => {
+    return Object.entries(sizes).map(([sizeKey, v]) => {
+      const key = `${variantKey}.${sizeKey}`;
+
+      const rule: StyleRule = {
+        '@layer': {
+          [components]: {
+            fontFamily: v.font,
+            fontWeight: v.weight,
+            lineHeight: v.lineHeight,
+            letterSpacing: v.tracking,
+            fontSize: v.size,
+          },
+        },
+      };
+
+      return [key, rule] as const;
+    });
+  },
+);
+
+export const typographyAt = createResponsiveVariants({
+  styles: Object.fromEntries(typographyComboEntries) as Record<
+    string,
+    StyleRule
+  >,
+  media: defaultMedia,
+});

package/src/styles/typography.responsive.ts

@@ -0,0 +1,104 @@
+import {
+  defaultOrder,
+  resolveResponsive,
+  type BreakpointWithBase,
+  type Responsive,
+} from './responsive';
+import {
+  type TypographySize,
+  type TypographyVariant,
+} from './system-contract.css';
+import { typographyAt } from './typography.responsive.css';
+
+const sizeMap = {
+  sm: 'small',
+  md: 'medium',
+  lg: 'large',
+} as const;
+
+type TshirtSize = keyof typeof sizeMap;
+
+function mapResponsiveValue<T, U>(
+  value: Responsive<T> | undefined,
+  mapper: (input: T) => U,
+): Responsive<U> | undefined {
+  if (value == null) {
+    return undefined;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((entry) =>
+      entry == null ? entry : mapper(entry),
+    ) as Responsive<U>;
+  }
+
+  if (typeof value === 'object') {
+    const out: Partial<Record<string, U>> = {};
+
+    for (const [key, entry] of Object.entries(value)) {
+      if (entry != null) {
+        out[key] = mapper(entry as T);
+      }
+    }
+
+    return out as Responsive<U>;
+  }
+
+  return mapper(value as T) as Responsive<U>;
+}
+
+export function mapResponsiveSizeToTypography(
+  size: Responsive<TshirtSize> | undefined,
+): Responsive<TypographySize> | undefined {
+  return mapResponsiveValue(size, (entry) => sizeMap[entry]);
+}
+
+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,
+  );
+
+  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/utils/arg-types/index.ts

@@ -1,3 +1,4 @@
 export { argTypesFromRecipe } from './arg-types-from-recipe';
 export { argTypesFromSprinkles } from './arg-types-from-sprinkles';
 export { commonArgs, CommonArgs } from './common-args';
+export { responsiveSelectArg } from './responsive-arg';

package/src/utils/arg-types/responsive-arg.ts

@@ -0,0 +1,28 @@
+interface ResponsiveArgConfig {
+  options: string[];
+  description?: string;
+  category?: string;
+  control?: 'select' | 'radio';
+  summary?: string;
+}
+
+const defaultDescription =
+  'Supports responsive values (object or array). Use story args for breakpoints.';
+
+export function responsiveSelectArg({
+  options,
+  description = defaultDescription,
+  category,
+  control = 'select',
+  summary,
+}: ResponsiveArgConfig) {
+  return {
+    control,
+    options,
+    description,
+    table: {
+      ...(category ? { category } : {}),
+      ...(summary ? { type: { summary } } : {}),
+    },
+  };
+}

package/src/utils/index.ts

@@ -3,4 +3,5 @@ export {
   argTypesFromSprinkles,
   commonArgs,
   CommonArgs,
+  responsiveSelectArg,
 } from './arg-types';

package/src/components/command/command-item.css.ts

@@ -1,32 +0,0 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-
-import { sys } from '../../styles';
-import { components } from '../../styles/layers.css';
-
-export const commandItem = recipe({
-  base: {
-    '@layer': {
-      [components]: {
-        cursor: 'pointer',
-
-        color: sys.color.foreground,
-
-        selectors: {
-          '&[data-selected=true]': {
-            backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
-            outline: 'none',
-          },
-
-          '&:active': {
-            backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.focused} * 100%), transparent)`,
-            outline: 'none',
-          },
-        },
-      },
-    },
-  },
-});
-
-export type CommandItemVariants = NonNullable<
-  RecipeVariants<typeof commandItem>
->;

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

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

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

@@ -1,68 +0,0 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-
-import { sys, transition } from '../../styles';
-
-export const sheetBodyRoot = style({
-  flexGrow: 1,
-  flexShrink: 1,
-  flexBasis: 'auto',
-
-  overflow: 'hidden',
-});
-
-export const sheetBodyViewport = style({
-  height: '100%',
-});
-
-export const sheetBodyScrollbar = style({
-  display: 'flex',
-  userSelect: 'none',
-  touchAction: 'none',
-  padding: 2,
-  background: 'transparent',
-  transition: transition('background', { duration: 'short.3' }),
-  borderRadius: sys.shape.corner.small,
-
-  selectors: {
-    '&:hover': {
-      background: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
-    },
-
-    '&[data-orientation="vertical"]': {
-      width: sys.spacing[2],
-    },
-  },
-});
-
-export const sheetBodyThumb = style({
-  flex: 1,
-  background: `color-mix(in srgb, ${sys.color.foreground} 50%, transparent)`,
-  borderRadius: sys.shape.corner.small,
-  position: 'relative',
-  opacity: 0,
-  transition: transition('opacity', { duration: 'short.3' }),
-  pointerEvents: 'none',
-
-  selectors: {
-    '&:hover': {
-      background: `color-mix(in srgb, ${sys.color.foreground} 75%, transparent)`,
-    },
-
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      insetBlockStart: '50%',
-      insetInlineStart: '50%',
-      width: '100%',
-      height: '100%',
-      minWidth: sys.spacing[4],
-      minHeight: sys.spacing[4],
-      transform: 'translate(-50%, -50%)',
-    },
-  },
-});
-
-globalStyle(`${sheetBodyScrollbar}[data-state="visible"] ${sheetBodyThumb}`, {
-  opacity: 1,
-  pointerEvents: 'auto',
-});

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

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