@kalink-ui/seedly 0.7.0 → 0.8.1

package/src/components/sidebar/sidebar.tsx

@@ -1,6 +1,6 @@
 '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';
@@ -12,8 +12,8 @@ import {
   sideWidthVar,
 } from './sidebar.css';
 
-type SidebarProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & {
+type SidebarProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  Omit<SidebarVariants, 'sideWidth'> & {
     /**
      * The size of the side element
      */
@@ -24,21 +24,6 @@ type SidebarProps<TUse extends ElementType> =
      * Should be a percentage.
      */
     contentMinWidth?: string;
-
-    /**
-     * The side of the sidebar
-     */
-    side?: SidebarVariants['side'];
-
-    /**
-     * The spacing between the sidebar and main content elements
-     */
-    spacing?: SidebarVariants['spacing'];
-
-    /**
-     * Whether the sidebar should stretch to fill the available space
-     */
-    noStretch?: SidebarVariants['noStretch'];
   };
 
 /**
@@ -49,7 +34,7 @@ type SidebarProps<TUse extends ElementType> =
  *
  * https://every-layout.dev/layouts/sidebar/
  */
-export const Sidebar = <TUse extends ElementType>({
+export function Sidebar<TUse extends ElementType>({
   side = 'left',
   sideWidth,
   contentMinWidth,
@@ -57,7 +42,7 @@ export const Sidebar = <TUse extends ElementType>({
   noStretch,
   className,
   ...props
-}: SidebarProps<TUse>) => {
+}: SidebarProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
@@ -73,4 +58,4 @@ export const Sidebar = <TUse extends ElementType>({
       {...rest}
     />
   );
-};
+}

package/src/components/stack/stack.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';
 
 const spacing = createVar();
 
@@ -19,10 +18,16 @@ export const stackRecipe = recipe({
   },
 
   variants: {
+    /**
+     * Whether the stack spacing should be applied recursively
+     */
     recursive: {
       true: {},
     },
 
+    /**
+     * The spacing between items
+     */
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {

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/arg-types/arg-types-from-recipe.ts

@@ -0,0 +1,36 @@
+import { type ComplexStyleRule } from '@vanilla-extract/css';
+import { type RuntimeFn } from '@vanilla-extract/recipes';
+
+type RecipeStyleRule = ComplexStyleRule | string;
+type VariantDefinitions = Record<string, RecipeStyleRule>;
+type VariantGroups = Record<string, VariantDefinitions>;
+
+export function argTypesFromRecipe(
+  recipe: RuntimeFn<VariantGroups>,
+  excludes: string[] = [],
+) {
+  return Object.entries(recipe.classNames.variants).reduce(
+    (acc, [name, variant]) => {
+      if (excludes.includes(name)) {
+        return acc;
+      }
+
+      const options = Object.keys(variant);
+      let control = options.length > 5 ? 'select' : 'radio';
+
+      if (options.length === 1 && options[0] === 'true') {
+        options.push('false');
+        control = 'boolean';
+      }
+
+      return {
+        ...acc,
+        [name]: {
+          control,
+          options,
+        },
+      };
+    },
+    {},
+  );
+}

package/src/utils/arg-types/arg-types-from-sprinkles.ts

@@ -0,0 +1,43 @@
+import { isObject } from '@kalink-ui/dibbly';
+
+type ArgTypesFromSprinklesProps = {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  props: Record<string, any>;
+  excludes?: string[];
+  category?: string;
+} & {};
+
+export function argTypesFromSprinkles({
+  props,
+  excludes = [],
+  category = 'Sprinkles props',
+}: ArgTypesFromSprinklesProps) {
+  return Object.entries(props).reduce((acc, [name]) => {
+    if (Array.isArray(excludes) && excludes.includes(name)) {
+      return acc;
+    }
+
+    let options = props[name] || [];
+    let control = 'select';
+
+    if (options.length === 1 && options[0] === 'true') {
+      options.push('false');
+      control = 'boolean';
+    }
+
+    if (isObject(options)) {
+      options = Object.fromEntries(
+        Object.keys(options).map((key) => [key, key]),
+      );
+    }
+
+    return {
+      ...acc,
+      [name]: {
+        control,
+        options,
+        table: { category },
+      },
+    };
+  }, {});
+}

package/src/utils/arg-types/common/composable.ts

@@ -0,0 +1,13 @@
+export const composable = {
+  children: {
+    control: false,
+    description: 'Content of the component.',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+      type: {
+        summary: 'ReactNode',
+      },
+    },
+  },
+};

package/src/utils/arg-types/common/index.ts

@@ -0,0 +1,4 @@
+export { composable } from './composable';
+export { polymorphic } from './polymorphic';
+export { referable } from './referable';
+export { stylable } from './stylable';

package/src/utils/arg-types/common/polymorphic.ts

@@ -0,0 +1,14 @@
+export const polymorphic = {
+  use: {
+    control: false,
+    description:
+      'The component used to render the root node of the component. Either a string to use an `JSX.IntrinsicElements` or a component reference to use a `React.ComponentType`',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+      type: {
+        summary: 'ElementType',
+      },
+    },
+  },
+};

package/src/utils/arg-types/common/referable.ts

@@ -0,0 +1,10 @@
+export const referable = {
+  ref: {
+    control: false,
+    description: 'Ref passed to the component root.',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+    },
+  },
+};

package/src/utils/arg-types/common/stylable.ts

@@ -0,0 +1,14 @@
+export const stylable = {
+  className: {
+    control: false,
+    description:
+      'A class name string passed to the component. Merged with the inner class names.',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+};

package/src/utils/arg-types/common-args.ts

@@ -0,0 +1,26 @@
+/* eslint-disable import/namespace */
+import * as CommonArgDefs from './common';
+
+export enum CommonArgs {
+  COMPOSABLE = 'composable',
+  POLYMORPHIC = 'polymorphic',
+  STYLABLE = 'stylable',
+  REFERABLE = 'referable',
+}
+
+export function commonArgs(args: CommonArgs[]) {
+  const argTypes: Partial<Record<string, object>> = {};
+  const knownArgs = Object.values(CommonArgs);
+
+  for (const arg of args) {
+    if (!knownArgs.includes(arg)) {
+      continue;
+    }
+
+    for (const argDef in CommonArgDefs[arg]) {
+      argTypes[argDef] = (CommonArgDefs[arg] as Record<string, object>)[argDef];
+    }
+  }
+
+  return argTypes;
+}

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

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