@kalink-ui/seedly 0.4.0 → 0.6.0

package/src/components/frame/frame.css.ts

@@ -1,16 +1,22 @@
 import { createVar, globalStyle, style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
+
 const ratioVar = createVar();
 
 const baseFrame = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  '@layer': {
+    [components]: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
 
-  overflow: 'hidden',
+      overflow: 'hidden',
 
-  aspectRatio: ratioVar,
+      aspectRatio: ratioVar,
+    },
+  },
 });
 
 export const frameRecipe = recipe({
@@ -19,33 +25,57 @@ export const frameRecipe = recipe({
   variants: {
     ratio: {
       '1:1': {
-        vars: {
-          [ratioVar]: '1 / 1',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '1 / 1',
+            },
+          },
         },
       },
       '3:2': {
-        vars: {
-          [ratioVar]: '3 / 2',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '3 / 2',
+            },
+          },
         },
       },
       '2:3': {
-        vars: {
-          [ratioVar]: '2 / 3',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '2 / 3',
+            },
+          },
         },
       },
       '4:3': {
-        vars: {
-          [ratioVar]: '4 / 3',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '4 / 3',
+            },
+          },
         },
       },
       '16:9': {
-        vars: {
-          [ratioVar]: '16 / 9',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '16 / 9',
+            },
+          },
         },
       },
       '9:16': {
-        vars: {
-          [ratioVar]: '9 / 16',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '9 / 16',
+            },
+          },
         },
       },
     },
@@ -53,9 +83,13 @@ export const frameRecipe = recipe({
 });
 
 globalStyle(`${baseFrame} > img, ${baseFrame} > video`, {
-  inlineSize: '100%',
-  blockSize: '100%',
-  objectFit: 'cover',
+  '@layer': {
+    [components]: {
+      inlineSize: '100%',
+      blockSize: '100%',
+      objectFit: 'cover',
+    },
+  },
 });
 
 export type FrameVariants = NonNullable<RecipeVariants<typeof frameRecipe>>;

package/src/components/frame/frame.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 { frameRecipe, FrameVariants } from './frame.css';
 
 type FrameProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

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

@@ -1,24 +1,33 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '@/styles/system-contract.css';
-import { mapContractVars } from '@/utils/map-contract-vars';
+import { components } from '../../styles/layers.css';
+import { sys } from '../../styles/system-contract.css';
+import { mapContractVars } from '../../utils/map-contract-vars';
 
 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,30 +1,43 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '@/styles/system-contract.css';
-import { mapContractVars } from '@/utils/map-contract-vars';
+import { components } from '../../styles/layers.css';
+import { sys } from '../../styles/system-contract.css';
+import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const sideWidthVar = createVar();
 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,16 +1,21 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '@/styles/system-contract.css';
-import { mapContractVars } from '@/utils/map-contract-vars';
+import { components } from '../../styles/layers.css';
+import { sys } from '../../styles/system-contract.css';
+import { mapContractVars } from '../../utils/map-contract-vars';
 
 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,19 +1,24 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '@/styles/system-contract.css';
-import { mapContractVars } from '@/utils/map-contract-vars';
+import { components } from '../../styles/layers.css';
+import { sys } from '../../styles/system-contract.css';
+import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const thresholdVar = createVar();
 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',
+    },
+  },
+});