@kalink-ui/seedly 0.7.0 → 0.8.1

package/src/components/button/button.tsx

@@ -1,31 +1,46 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
+import { ComponentType, ReactNode } from 'react';
 
-import { Box } from '../box';
+import {
+  buttonEndSlot,
+  buttonLabel,
+  buttonRecipe,
+  buttonStartSlot,
+  ButtonVariants,
+} from './button.css';
 
-import { buttonRecipe, type ButtonVariants } from './button.css';
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+type ButtonTypes = 'button' | 'a' | ComponentType<any>;
 
-import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
-
-type ButtonProps<TUse extends React.ElementType> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The main variation of the button
-     */
-    variant?: ButtonVariants['variant'];
+type ButtonProps<TUse extends ButtonTypes> = PolymorphicComponentProps<TUse> &
+  ButtonVariants & {
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    children?: string;
   };
 
-export const Button = <TUse extends React.ElementType = 'button'>({
-  className,
-  variant,
-  ...props
-}: ButtonProps<TUse>) => {
-  const { use: Comp = 'button', ...rest } = props;
+export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
+  const {
+    use: Comp = 'button',
+    className,
+    variant,
+    children,
+    startSlot,
+    endSlot,
+    size = 'md',
+    ...rest
+  } = props;
 
   return (
-    <Box
-      use={Comp}
-      className={clsx(buttonRecipe({ variant }), className)}
-      {...rest}
-    />
+    <Comp
+      className={clsx(buttonRecipe({ variant, size }), className)}
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      {...(rest as any)}
+    >
+      {startSlot && <span className={clsx(buttonStartSlot)}>{startSlot}</span>}
+      <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      {endSlot && <span className={clsx(buttonEndSlot)}>{endSlot}</span>}
+    </Comp>
   );
-};
+}

package/src/components/center/center.css.ts

@@ -1,8 +1,7 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { mapContractVars , sys } from '../../styles';
 import { components } from '../../styles/layers.css';
-import { sys } from '../../styles/system-contract.css';
-import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const centerRecipe = recipe({
   base: {
@@ -17,6 +16,9 @@ export const centerRecipe = recipe({
   },
 
   variants: {
+    /**
+     * Center align the text too with `text-align: center`
+     */
     andText: {
       true: {
         '@layer': {
@@ -27,6 +29,9 @@ export const centerRecipe = recipe({
       },
     },
 
+    /**
+     * Center child elements based on their content width
+     */
     intrinsic: {
       true: {
         '@layer': {
@@ -39,6 +44,9 @@ export const centerRecipe = recipe({
       },
     },
 
+    /**
+     * The minimum space on either side of the content
+     */
     gutters: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {

package/src/components/center/center.tsx

@@ -1,25 +1,11 @@
-import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { centerRecipe, CenterVariants } from './center.css';
 
-type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
-  /**
-   * Center align the text too with `text-align: center`
-   */
-  andText?: CenterVariants['andText'];
-
-  /**
-   * Center child elements based on their content width
-   */
-  intrinsic?: CenterVariants['intrinsic'];
-
-  /**
-   * The minimum space on either side of the content
-   */
-  gutters?: CenterVariants['gutters'];
-};
+type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  CenterVariants;
 
 /**
  * A custom element for centering a block-level element horizontally,
@@ -27,13 +13,13 @@ type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
  *
  * https://every-layout.dev/layouts/center
  */
-export const Center = <TUse extends ElementType>({
+export function Center<TUse extends ElementType>({
   andText,
   gutters,
   intrinsic,
   className,
   ...props
-}: CenterProps<TUse>) => {
+}: CenterProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
@@ -42,4 +28,4 @@ export const Center = <TUse extends ElementType>({
       {...rest}
     />
   );
-};
+}

package/src/components/cluster/cluster.css.ts

@@ -1,8 +1,7 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { mapContractVars , sys } from '../../styles';
 import { components } from '../../styles/layers.css';
-import { sys } from '../../styles/system-contract.css';
-import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const clusterRecipe = recipe({
   base: {
@@ -17,6 +16,9 @@ export const clusterRecipe = recipe({
   },
 
   variants: {
+    /**
+     * The spacing between items
+     */
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
@@ -25,6 +27,9 @@ export const clusterRecipe = recipe({
       },
     })),
 
+    /**
+     * The alignment of items along the main axis
+     */
     justify: {
       start: {
         '@layer': {
@@ -70,6 +75,9 @@ export const clusterRecipe = recipe({
       },
     },
 
+    /**
+     * The alignment of items along the cross axis
+     */
     align: {
       start: {
         '@layer': {

package/src/components/cluster/cluster.tsx

@@ -1,39 +1,24 @@
-import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { clusterRecipe, ClusterVariants } from './cluster.css';
 
-type ClusterProps<TUse extends ElementType> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The spacing between items
-     */
-    spacing?: ClusterVariants['spacing'];
-
-    /**
-     * The alignment of items along the main axis
-     */
-    justify?: ClusterVariants['justify'];
-
-    /**
-     * The alignment of items along the cross axis
-     */
-    align?: ClusterVariants['align'];
-  };
+type ClusterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  ClusterVariants;
 
 /**
  * A custom element for grouping items, with control over the margin between them
  *
  * https://every-layout.dev/layouts/cluster
  */
-export const Cluster = <TUse extends ElementType>({
+export function Cluster<TUse extends ElementType>({
   spacing,
   justify,
   align,
   className,
   ...props
-}: ClusterProps<TUse>) => {
+}: ClusterProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
@@ -42,4 +27,4 @@ export const Cluster = <TUse extends ElementType>({
       {...rest}
     />
   );
-};
+}

package/src/components/conditional-wrapper/conditional-wrapper.tsx

@@ -0,0 +1,23 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { ElementType, ReactNode } from 'react';
+
+type ConditionalWrapperProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * If `true`, the provided `children` prop will be wrapped.
+     */
+    condition: boolean;
+
+    /**
+     * The component to wrap if `condition` is `true`.
+     */
+    children: ReactNode;
+  };
+
+export function ConditionalWrapper<TUse extends ElementType>(
+  props: ConditionalWrapperProps<TUse>,
+) {
+  const { use: Comp = 'div', condition, children, ...rest } = props;
+
+  return condition ? <Comp {...rest}>{children}</Comp> : children;
+}

package/src/components/conditional-wrapper/index.ts

@@ -0,0 +1 @@
+export { ConditionalWrapper } from './conditional-wrapper';

package/src/components/cover/cover.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 spaceVar = createVar();
 export const minSizeVar = createVar();
@@ -16,7 +15,6 @@ export const coverRecipe = recipe({
         flexDirection: 'column',
 
         minBlockSize: minSizeVar,
-        padding: spaceVar,
 
         vars: {
           [minSizeVar]: '100vh',
@@ -26,6 +24,9 @@ export const coverRecipe = recipe({
   },
 
   variants: {
+    /**
+     * The spacing between items
+     */
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
@@ -35,16 +36,6 @@ export const coverRecipe = recipe({
         },
       },
     })),
-
-    noPad: {
-      true: {
-        '@layer': {
-          [components]: {
-            padding: 0,
-          },
-        },
-      },
-    },
   },
 });
 

package/src/components/cover/cover.tsx

@@ -1,28 +1,19 @@
 '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 { coverRecipe, CoverVariants, minSizeVar } from './cover.css';
 
-type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
-  /**
-   * The spacing between items
-   */
-  spacing?: CoverVariants['spacing'];
-
-  /**
-   * True if the cover should have no padding
-   */
-  noPad?: CoverVariants['noPad'];
-
-  /**
-   * The minimum height of the cover
-   */
-  minSize?: string;
-};
+type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  CoverVariants & {
+    /**
+     * The minimum height of the cover
+     */
+    minSize?: string;
+  };
 
 /**
  * A custom element for covering a block-level element horizontally,
@@ -33,22 +24,21 @@ type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
  *
  * https://every-layout.dev/layouts/cover
  */
-export const Cover = <TUse extends ElementType>({
+export function Cover<TUse extends ElementType>({
   spacing,
-  noPad,
   minSize,
   className,
   ...props
-}: CoverProps<TUse>) => {
+}: CoverProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
     <Comp
-      className={clsx(coverRecipe({ spacing, noPad }), className)}
+      className={clsx(coverRecipe({ spacing }), className)}
       style={assignInlineVars({
         ...(minSize && { [minSizeVar]: minSize }),
       })}
       {...rest}
     />
   );
-};
+}

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

@@ -23,6 +23,9 @@ export const frameRecipe = recipe({
   base: baseFrame,
 
   variants: {
+    /**
+     * The ratio of the frame
+     */
     ratio: {
       '1:1': {
         '@layer': {

package/src/components/frame/frame.tsx

@@ -1,27 +1,23 @@
-import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { frameRecipe, FrameVariants } from './frame.css';
 
-type FrameProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
-  /**
-   * The ratio of the frame
-   */
-  ratio?: FrameVariants['ratio'];
-};
+type FrameProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  FrameVariants;
 
 /**
  * A custom element for augmenting image ratios
  *
  * https://every-layout.dev/layouts/frame
  */
-export const Frame = <TUse extends ElementType>({
+export function Frame<TUse extends ElementType>({
   ratio,
   className,
   ...props
-}: FrameProps<TUse>) => {
+}: FrameProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return <Comp className={clsx(frameRecipe({ ratio }), className)} {...rest} />;
-};
+}

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

@@ -1,9 +1,8 @@
 import { createVar } 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 minSizeVar = createVar();
 
@@ -22,6 +21,9 @@ export const gridRecipe = recipe({
   },
 
   variants: {
+    /**
+     * The spacing between the grid cell
+     */
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {

package/src/components/grid/grid.tsx

@@ -1,23 +1,19 @@
 '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 { gridRecipe, GridVariants, minSizeVar } from './grid.css';
 
-type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
-  /**
-   * The minimum size of a grid cell
-   */
-  minSize?: string;
-
-  /**
-   * The spacing between the grid cell
-   */
-  spacing?: GridVariants['spacing'];
-};
+type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  GridVariants & {
+    /**
+     * The minimum size of a grid cell
+     */
+    minSize?: string;
+  };
 
 /**
  * The Grid layout provides a flexible, responsive grid system that
@@ -27,12 +23,12 @@ type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
  *
  * https://every-layout.dev/layouts/grid/
  */
-export const Grid = <TUse extends ElementType>({
+export function Grid<TUse extends ElementType>({
   spacing,
   minSize,
   className,
   ...props
-}: GridProps<TUse>) => {
+}: GridProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
@@ -44,4 +40,4 @@ export const Grid = <TUse extends ElementType>({
       {...rest}
     />
   );
-};
+}

package/src/components/heading/heading.css.ts

@@ -0,0 +1,5 @@
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+export const headingRecipe = recipe({});
+
+export type HeadingVariants = NonNullable<RecipeVariants<typeof headingRecipe>>;

package/src/components/heading/heading.tsx

@@ -0,0 +1,83 @@
+import { getProp, PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+
+import {
+  typography,
+  Spacing,
+  TypographySize,
+  TypographyVariant,
+} from '../../styles';
+import { ConditionalWrapper } from '../conditional-wrapper';
+import { Stack } from '../stack';
+
+import { headingRecipe } from './heading.css';
+
+type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+type HeadingProps<TUse extends HeadingTypes> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The size of the typography used to render the text.
+     */
+    size?: TypographySize;
+
+    /**
+     * The typography used to render the text.
+     */
+    variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
+
+    /**
+     * The text to render.
+     */
+    children: string;
+
+    /**
+     * If provided, the text will be rendered before the title.
+     */
+    pretitle?: string;
+
+    /**
+     * If provided, the text will be rendered after the title.
+     */
+    subtitle?: string;
+
+    /**
+     * The spacing between the title and the pretitle or subtitle.
+     */
+    spacing?: Spacing;
+  };
+
+export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
+  const {
+    children,
+    className,
+    size = 'medium',
+    use: Comp = 'h1',
+    variant,
+    pretitle,
+    subtitle,
+    spacing,
+    ...rest
+  } = props;
+
+  return (
+    <ConditionalWrapper
+      use={Stack}
+      spacing={spacing}
+      condition={!!pretitle || !!subtitle}
+    >
+      {pretitle && <span>{pretitle}</span>}
+      <Comp
+        className={clsx(
+          headingRecipe(),
+          getProp(typography, `${variant}.${size}`),
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </Comp>
+      {subtitle && <span>{subtitle}</span>}
+    </ConditionalWrapper>
+  );
+}

package/src/components/heading/index.ts

@@ -0,0 +1 @@
+export { Heading } from './heading';

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export { Box } from './box';
+export { Button } from './button';
+export { Center } from './center';
+export { Cluster } from './cluster';
+export { ConditionalWrapper } from "./conditional-wrapper";
+export { Cover } from './cover';
+export { Frame } from './frame';
+export { Grid } from './grid';
+export { Heading } from "./heading";
+export { plantSeed } from './seed';
+export { Sidebar } from './sidebar';
+export { Stack } from './stack';
+export { Switcher } from './switcher';
+export { Text } from './text';

package/src/{styles → components}/seed/seed.tsx

@@ -1,21 +1,18 @@
+import { type PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
+import { type ElementType } from 'react';
 
 import {
   extractSprinklesProps,
   type GetSprinkles,
   type SprinklesFnBase,
-} from '../../utils/extract-sprinkles-props';
-
-import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
-import type { ElementType } from 'react';
+} from '../../styles';
 
 /**
  * When you use `SeedProps` in other components and want to define a default
  * value for that prop in your component (e.g. `const { use = 'span' } = props;`)
  * you will need to cast the `use` prop as `YourComponentProps<TUse>['use]` otherwise
  * it will be considered as `TUse | span` and you will get a type error.
- *
- * You can see an example of this in `frontend/components/text/text.tsx`.
  */
 export type SeedProps<
   TUse extends ElementType,

package/src/components/sidebar/sidebar.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 sideWidthVar = createVar();
 export const contentMinWidthVar = createVar();
@@ -23,6 +22,9 @@ export const sidebarRecipe = recipe({
   },
 
   variants: {
+    /**
+     * The spacing between the sidebar and main content elements
+     */
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
@@ -31,6 +33,9 @@ export const sidebarRecipe = recipe({
       },
     })),
 
+    /**
+     * Whether the sidebar should stretch to fill the available space
+     */
     noStretch: {
       true: {
         '@layer': {