@kalink-ui/seedly 0.5.0 → 0.7.0

package/src/components/grid/grid.css.ts

@@ -1,6 +1,7 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -8,17 +9,25 @@ export const minSizeVar = createVar();
 
 export const gridRecipe = recipe({
   base: {
-    display: 'grid',
-    gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
+    '@layer': {
+      [components]: {
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
 
-    vars: {
-      [minSizeVar]: '250px',
+        vars: {
+          [minSizeVar]: '250px',
+        },
+      },
     },
   },
 
   variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gridGap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gridGap: sys.spacing[key],
+        },
+      },
     })),
   },
 });

package/src/components/grid/grid.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { gridRecipe, GridVariants, minSizeVar } from './grid.css';
 
 type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

package/src/components/sidebar/sidebar.css.ts

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -9,22 +10,34 @@ export const contentMinWidthVar = createVar();
 
 export const sidebarRecipe = recipe({
   base: {
-    display: 'flex',
-    flexWrap: 'wrap',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexWrap: 'wrap',
 
-    vars: {
-      [contentMinWidthVar]: '50%',
+        vars: {
+          [contentMinWidthVar]: '50%',
+        },
+      },
     },
   },
 
   variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
     })),
 
     noStretch: {
       true: {
-        alignItems: 'flex-start',
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+          },
+        },
       },
     },
 
@@ -46,23 +59,39 @@ export const sidebarRecipe = recipe({
 });
 
 globalStyle(`${sidebarRecipe.classNames.base} > *`, {
-  flexGrow: 1,
+  '@layer': {
+    [components]: {
+      flexGrow: 1,
+    },
+  },
 });
 
 globalStyle(`${sidebarRecipe.classNames.variants.sideWidth.true} > *`, {
-  flexBasis: sideWidthVar,
+  '@layer': {
+    [components]: {
+      flexBasis: sideWidthVar,
+    },
+  },
 });
 
 globalStyle(`${sidebarRecipe.classNames.variants.side.left} > :last-child`, {
-  flexBasis: 0,
-  flexGrow: 999,
-  minInlineSize: contentMinWidthVar,
+  '@layer': {
+    [components]: {
+      flexBasis: 0,
+      flexGrow: 999,
+      minInlineSize: contentMinWidthVar,
+    },
+  },
 });
 
 globalStyle(`${sidebarRecipe.classNames.variants.side.right} > :first-child`, {
-  flexBasis: 0,
-  flexGrow: 999,
-  minInlineSize: contentMinWidthVar,
+  '@layer': {
+    [components]: {
+      flexBasis: 0,
+      flexGrow: 999,
+      minInlineSize: contentMinWidthVar,
+    },
+  },
 });
 
 export type SidebarVariants = NonNullable<RecipeVariants<typeof sidebarRecipe>>;

package/src/components/sidebar/sidebar.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import {
   contentMinWidthVar,
   sidebarRecipe,

package/src/components/stack/stack.css.ts

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -8,9 +9,13 @@ const spacing = createVar();
 
 export const stackRecipe = recipe({
   base: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+      },
+    },
   },
 
   variants: {
@@ -19,8 +24,12 @@ export const stackRecipe = recipe({
     },
 
     spacing: mapContractVars(sys.spacing, (key) => ({
-      vars: {
-        [spacing]: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          vars: {
+            [spacing]: sys.spacing[key],
+          },
+        },
       },
     })),
   },
@@ -29,7 +38,11 @@ export const stackRecipe = recipe({
 globalStyle(
   `${stackRecipe.classNames.base} > * + *, ${stackRecipe.classNames.variants.recursive.true} * + *`,
   {
-    marginBlockStart: spacing,
+    '@layer': {
+      [components]: {
+        marginBlockStart: spacing,
+      },
+    },
   },
 );
 

package/src/components/stack/stack.tsx

@@ -1,8 +1,7 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { stackRecipe, StackVariants } from './stack.css';
 
 type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

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

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -9,11 +10,15 @@ export const limitVar = createVar();
 
 export const switcherRecipe = recipe({
   base: {
-    display: 'flex',
-    flexWrap: 'wrap',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexWrap: 'wrap',
 
-    vars: {
-      [thresholdVar]: sys.layout.measure,
+        vars: {
+          [thresholdVar]: sys.layout.measure,
+        },
+      },
     },
   },
 
@@ -22,7 +27,11 @@ export const switcherRecipe = recipe({
      * The space (margin) between the child elements
      */
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
     })),
 
     /**
@@ -39,8 +48,12 @@ export const switcherRecipe = recipe({
 });
 
 globalStyle(`${switcherRecipe.classNames.base} > *`, {
-  flexBasis: `calc((${thresholdVar} - 100%) * 999)`,
-  flexGrow: 1,
+  '@layer': {
+    [components]: {
+      flexBasis: `calc((${thresholdVar} - 100%) * 999)`,
+      flexGrow: 1,
+    },
+  },
 });
 
 globalStyle(
@@ -48,7 +61,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[2]
   } > :nth-last-child(n+3) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -57,7 +74,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[3]
   } > :nth-last-child(n+4) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -66,7 +87,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[4]
   } > :nth-last-child(n+5) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -75,7 +100,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[5]
   } > :nth-last-child(n+6) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -84,7 +113,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[6]
   } > :nth-last-child(n+7) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 

package/src/components/switcher/switcher.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
 
 type SwitcherProps<TUse extends ElementType> =

package/src/components/text/index.ts

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

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

@@ -0,0 +1,15 @@
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+export const textRecipe = recipe({
+  variants: {
+    ellipsis: {
+      true: {
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+      },
+    },
+  },
+});
+
+export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;

package/src/components/text/text.tsx

@@ -0,0 +1,43 @@
+import { getProp } from '@kalink-ui/dibbly';
+import { PathsOf, PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { typography as typographyVariants } from '../../styles/typography.css';
+import { Box } from '../box';
+
+import { textRecipe, type TextVariants } from './text.css';
+
+type TextProps<TUse extends React.ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The typography used to render the text.
+     */
+    typography?: PathsOf<typeof typographyVariants>;
+    /**
+     * If true, use an ellipsis when the text overflows the element.
+     */
+    ellipsis?: TextVariants['ellipsis'];
+  };
+
+export function Text<TUse extends ElementType>({
+  className,
+  typography,
+  ellipsis,
+  ...props
+}: TextProps<TUse>) {
+  const { use = 'span', ...rest } = props;
+
+  return (
+    <Box
+      // See `frontend/components/box/box.types.ts` for why the cast is required
+      use={use as TextProps<TUse>['use']}
+      className={clsx(
+        textRecipe({ ellipsis }),
+        typography && getProp(typographyVariants, typography),
+        className,
+      )}
+      {...rest}
+    />
+  );
+}

package/src/styles/layers.css.ts

@@ -0,0 +1,6 @@
+import { globalLayer } from '@vanilla-extract/css';
+
+export const base = globalLayer('base');
+export const components = globalLayer('components');
+export const utilities = globalLayer('utilities');
+export const overrides = globalLayer('overrides');

package/src/styles/reset.css.ts

@@ -0,0 +1,116 @@
+/**
+ * Minimal reset based on Josh's Custom CSS Reset
+ * https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+import { globalStyle } from '@vanilla-extract/css';
+
+import { base } from './layers.css';
+
+globalStyle('*, *::before, *::after', {
+  '@layer': {
+    [base]: {
+      boxSizing: 'border-box',
+    },
+  },
+});
+
+globalStyle('*', {
+  '@layer': {
+    [base]: {
+      margin: 0,
+    },
+  },
+});
+
+globalStyle('body', {
+  '@layer': {
+    [base]: {
+      WebkitFontSmoothing: 'antialiased',
+    },
+  },
+});
+
+globalStyle('img, picture, video, canvas, svg', {
+  '@layer': {
+    [base]: {
+      display: 'block',
+      maxWidth: '100%',
+    },
+  },
+});
+
+globalStyle('input, button, textarea, select', {
+  '@layer': {
+    [base]: {
+      font: 'inherit',
+    },
+  },
+});
+
+globalStyle('p, h1, h2, h3, h4, h5, h6', {
+  '@layer': {
+    [base]: {
+      overflowWrap: 'break-word',
+    },
+  },
+});
+
+globalStyle('p', {
+  '@layer': {
+    [base]: {
+      textWrap: 'pretty',
+    },
+  },
+});
+
+globalStyle('h1, h2, h3, h4, h5, h6', {
+  '@layer': {
+    [base]: {
+      textWrap: 'balance',
+    },
+  },
+});
+
+globalStyle('button', {
+  '@layer': {
+    [base]: {
+      border: 'none',
+
+      cursor: 'pointer',
+    },
+  },
+});
+
+globalStyle('a', {
+  '@layer': {
+    [base]: {
+      textDecoration: 'none',
+    },
+  },
+});
+
+globalStyle('fieldset', {
+  '@layer': {
+    [base]: {
+      padding: 0,
+
+      border: 'none',
+    },
+  },
+});
+
+globalStyle('legend', {
+  '@layer': {
+    [base]: {
+      width: '100%',
+    },
+  },
+});
+
+globalStyle('pre', {
+  '@layer': {
+    [base]: {
+      whiteSpace: 'pre-wrap',
+    },
+  },
+});

package/src/styles/seed/seed.tsx

@@ -6,7 +6,7 @@ import {
   type SprinklesFnBase,
 } from '../../utils/extract-sprinkles-props';
 
-import type { PolymorphicComponentProps } from '../../types/utils.types';
+import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import type { ElementType } from 'react';
 
 /**
@@ -22,10 +22,10 @@ export type SeedProps<
   TSprinklesFn extends SprinklesFnBase,
 > = PolymorphicComponentProps<TUse> & GetSprinkles<TSprinklesFn>;
 
-export interface CreateSeedParams<SprinklesFn> {
+export type CreateSeedParams<SprinklesFn> = {
   sprinkles: SprinklesFn;
   defaultClassName?: string;
-}
+};
 
 export function plantSeed<SprinklesFn extends SprinklesFnBase>({
   sprinkles,

package/src/styles/system-contract.css.ts

@@ -1,12 +1,12 @@
 import { createThemeContract } from '@vanilla-extract/css';
 
-const typeContract = {
+export const typeContract = {
   font: null,
   weight: null,
   lineHeight: null,
   tracking: null,
   size: null,
-};
+} as const;
 
 export const sys = createThemeContract({
   layout: {

package/src/styles/typography.css.ts

@@ -0,0 +1,23 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+import { sys } from './system-contract.css';
+
+type TypographySize = 'large' | 'medium' | 'small';
+
+export const typography = Object.entries(sys.typography).reduce(
+  (acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: styleVariants(value, (variant) => {
+        return {
+          fontFamily: variant.font,
+          fontWeight: variant.weight,
+          lineHeight: variant.lineHeight,
+          letterSpacing: variant.tracking,
+          fontSize: variant.size,
+        };
+      }),
+    };
+  },
+  {} as Record<keyof typeof sys.typography, Record<TypographySize, string>>,
+);

package/src/utils/extract-sprinkles-props.ts

@@ -1,6 +1,7 @@
 import type { SprinklesProperties } from '@vanilla-extract/sprinkles';
 import type { UnknownRecord } from 'type-fest';
 
+/* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
 export interface SprinklesFnBase {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   (...args: any): string;

package/src/utils/index.ts

@@ -1,3 +1,2 @@
 export { extractSprinklesProps } from './extract-sprinkles-props';
-export { isObject } from './is-object';
 export { mapContractVars } from './map-contract-vars';

package/src/types/index.ts

@@ -1,5 +0,0 @@
-export {
-  type PolymorphicComponentProps,
-  type DistributiveOmit,
-  type UnwrapArray,
-} from './utils.types';

package/src/types/utils.types.ts

@@ -1,15 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
-  ? Omit<T, TOmitted>
-  : never;
-
-export type UnwrapArray<R> = R extends unknown[] ? UnwrapArray<R[number]> : R;
-
-export type PolymorphicComponentProps<TUse extends ElementType> = {
-  use?: TUse;
-} & DistributiveOmit<
-  ComponentPropsWithRef<ElementType extends TUse ? 'div' : TUse>,
-  'use'
->;

package/src/utils/is-object.ts

@@ -1,3 +0,0 @@
-export const isObject = <T extends object>(value: unknown): value is T => {
-  return !!value && typeof value === "object" && !Array.isArray(value);
-};