@kalink-ui/seedly 0.7.0 → 0.8.0

package/src/components/stack/stack.tsx

@@ -1,20 +1,11 @@
-import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { stackRecipe, StackVariants } from './stack.css';
 
-type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
-  /**
-   * Whether the stack spacing should be applied recursively
-   */
-  recursive?: StackVariants['recursive'];
-
-  /**
-   * The spacing between items
-   */
-  spacing?: StackVariants['spacing'];
-};
+type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  StackVariants;
 
 /**
  * A custom element for injecting white space (margin) between flow
@@ -26,12 +17,12 @@ type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
  *
  * https://every-layout.dev/layouts/stack
  */
-export const Stack = <TUse extends ElementType = 'div'>({
+export function Stack<TUse extends ElementType = 'div'>({
   recursive,
   spacing,
   className,
   ...props
-}: StackProps<TUse>) => {
+}: StackProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
@@ -40,4 +31,4 @@ export const Stack = <TUse extends ElementType = 'div'>({
       {...rest}
     />
   );
-};
+}

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

@@ -1,9 +1,8 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { sys, mapContractVars } from '../../styles';
 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();

package/src/components/switcher/switcher.tsx

@@ -1,28 +1,18 @@
 'use client';
 
-import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
 
-type SwitcherProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The gap between items
-     */
-    spacing?: SwitcherVariants['spacing'];
-
+type SwitcherProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  SwitcherVariants & {
     /**
      * The threshold at which to switch between horizontal and vertical layouts
      */
     threshold?: string;
-
-    /**
-     * The maximum number of elements allowed to appear in the horizontal configuration
-     */
-    limit?: SwitcherVariants['limit'];
   };
 
 /**
@@ -31,13 +21,13 @@ type SwitcherProps<TUse extends ElementType> =
  *
  * https://every-layout.dev/layouts/switcher
  */
-export const Switcher = <TUse extends ElementType>({
+export function Switcher<TUse extends ElementType>({
   spacing,
   threshold,
   limit,
   className,
   ...props
-}: SwitcherProps<TUse>) => {
+}: SwitcherProps<TUse>) {
   const { use: Comp = 'div' } = props;
 
   return (
@@ -49,4 +39,4 @@ export const Switcher = <TUse extends ElementType>({
       {...props}
     />
   );
-};
+}

package/src/components/text/index.ts

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

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

@@ -1,15 +1,25 @@
+import { style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 export const textRecipe = recipe({
   variants: {
+    /**
+     * If true, use an ellipsis when the text overflows the element.
+     */
     ellipsis: {
       true: {
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
+        display: 'inline-block',
+        maxWidth: '100%',
         overflow: 'hidden',
+
+        textOverflow: 'ellipsis',
       },
     },
   },
 });
 
+export const textEllipsisWrapper = style({
+  whiteSpace: 'nowrap',
+});
+
 export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;

package/src/components/text/text.tsx

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

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils';

package/src/styles/index.ts

@@ -1,2 +1,15 @@
-export { sys } from './system-contract.css';
-export { plantSeed } from './seed';
+export {
+  sys,
+  type Spacing,
+  type TypographySize,
+  type TypographyVariant,
+} from './system-contract.css';
+export { typography } from './typography.css';
+
+export {
+  extractSprinklesProps,
+  type GetSprinkles,
+  type SprinklesFnBase,
+} from './extract-sprinkles-props';
+
+export { mapContractVars } from './map-contract-vars';

package/src/styles/reset.css.ts

@@ -75,6 +75,7 @@ globalStyle('button', {
   '@layer': {
     [base]: {
       border: 'none',
+      backgroundColor: 'transparent',
 
       cursor: 'pointer',
     },

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

@@ -1,4 +1,5 @@
 import { createThemeContract } from '@vanilla-extract/css';
+import { ArrayValues } from 'type-fest';
 
 export const typeContract = {
   font: null,
@@ -8,6 +9,16 @@ export const typeContract = {
   size: null,
 } as const;
 
+const typographyVariants = [
+  'display',
+  'headline',
+  'title',
+  'label',
+  'body',
+] as const;
+
+const typographySizes = ['large', 'medium', 'small'] as const;
+
 export const sys = createThemeContract({
   layout: {
     direction: null,
@@ -31,6 +42,10 @@ export const sys = createThemeContract({
     pressed: {
       opacity: null,
     },
+    muted: {
+      light: null,
+      dark: null,
+    },
   },
 
   shape: {
@@ -88,37 +103,22 @@ export const sys = createThemeContract({
     },
   },
 
-  typography: {
-    display: {
-      large: typeContract,
-      medium: typeContract,
-      small: typeContract,
-    },
-
-    headline: {
-      large: typeContract,
-      medium: typeContract,
-      small: typeContract,
-    },
-
-    title: {
-      large: typeContract,
-      medium: typeContract,
-      small: typeContract,
-    },
-
-    label: {
-      large: typeContract,
-      medium: typeContract,
-      small: typeContract,
-    },
-
-    body: {
-      large: typeContract,
-      medium: typeContract,
-      small: typeContract,
-    },
-  },
+  typography: typographyVariants.reduce(
+    (acc, variant) => ({
+      ...acc,
+      [variant]: typographySizes.reduce(
+        (acc, size) => ({
+          ...acc,
+          [size]: typeContract,
+        }),
+        {} as Record<TypographySize, typeof typeContract>,
+      ),
+    }),
+    {} as Record<
+      TypographyVariant,
+      Record<TypographySize, typeof typeContract>
+    >,
+  ),
 
   spacing: {
     0: null,
@@ -142,3 +142,17 @@ export const sys = createThemeContract({
     18: null,
   },
 });
+
+export type Spacing = keyof typeof sys.spacing;
+export type TypographyVariant = ArrayValues<typeof typographyVariants>;
+export type TypographySize = ArrayValues<typeof typographySizes>;
+
+export type Duration = {
+  [K in keyof typeof sys.motion.duration]: `${K}.${Extract<keyof (typeof sys.motion.duration)[K], string | number>}`;
+}[keyof typeof sys.motion.duration];
+
+export type Easing = {
+  [K in keyof typeof sys.motion.easing]: (typeof sys.motion.easing)[K] extends string
+    ? K
+    : `${K}.${Extract<keyof (typeof sys.motion.easing)[K], string | number>}`;
+}[keyof typeof sys.motion.easing];

package/src/styles/transition.ts

@@ -0,0 +1,26 @@
+import { getProp } from '@kalink-ui/dibbly';
+
+import { type Duration, type Easing, sys } from './system-contract.css';
+
+export type CreateTransitionFn = (
+  props: string | string[],
+  options?: {
+    duration?: Duration;
+    easing?: Easing;
+    delay?: string;
+  },
+) => string;
+
+export const transition: CreateTransitionFn = (props = ['all'], options = {}) =>
+  (Array.isArray(props) ? props : [props])
+    .map(
+      (animatedProp) =>
+        `${animatedProp} ${
+          options.duration
+            ? getProp(sys.motion.duration, options.duration)
+            : sys.motion.duration.medium[1]
+        } ${options.easing ? getProp(sys.motion.easing, options.easing) : sys.motion.easing.standard} ${
+          options.delay || '0ms'
+        }`,
+    )
+    .join(',');

package/src/styles/typography.css.ts

@@ -1,8 +1,6 @@
 import { styleVariants } from '@vanilla-extract/css';
 
-import { sys } from './system-contract.css';
-
-type TypographySize = 'large' | 'medium' | 'small';
+import { sys, TypographySize, TypographyVariant } from './system-contract.css';
 
 export const typography = Object.entries(sys.typography).reduce(
   (acc, [key, value]) => {
@@ -19,5 +17,5 @@ export const typography = Object.entries(sys.typography).reduce(
       }),
     };
   },
-  {} as Record<keyof typeof sys.typography, Record<TypographySize, string>>,
+  {} as Record<TypographyVariant, Record<TypographySize, string>>,
 );

package/src/utils/index.ts

@@ -1,2 +1,6 @@
-export { extractSprinklesProps } from './extract-sprinkles-props';
-export { mapContractVars } from './map-contract-vars';
+export {
+  argTypesFromRecipe,
+  argTypesFromSprinkles,
+  commonArgs,
+  CommonArgs,
+} from './arg-types';