@kalink-ui/seedly 0.1.0

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@kalink-ui/seedly",
+  "version": "0.1.0",
+  "sideEffects": false,
+  "license": "MIT",
+  "exports": {
+    "./box": "./src/components/box/index.ts",
+    "./button": "./src/components/button/index.ts",
+    "./center": "./src/components/center/index.ts",
+    "./cluster": "./src/components/cluster/index.ts",
+    "./cover": "./src/components/cover/index.ts",
+    "./frame": "./src/components/frame/index.ts",
+    "./grid": "./src/components/grid/index.ts",
+    "./sidebar": "./src/components/sidebar/index.ts",
+    "./stack": "./src/components/stack/index.ts",
+    "./switcher": "./src/components/switcher/index.ts",
+    "./styles": "./src/styles/index.ts",
+    "./types": "./src/types/index.ts",
+    "./utils": "./src/utils/index.ts"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-docs": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@turbo/gen": "^2.3.4",
+    "@types/node": "^22.10.10",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    "@vanilla-extract/vite-plugin": "^5.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.4",
+    "tsup": "^8.3.6",
+    "type-fest": "^4.33.0",
+    "typescript": "5.7.3",
+    "vite": "^6.0.11",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.4",
+    "@kalink-ui/eslint-config": "0.1.0",
+    "@kalink-ui/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "./src/**/*"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "build-storybook": "storybook build",
+    "dev": "storybook dev -p 6006 --no-open",
+    "tsc": "tsc --noEmit"
+  }
+}

package/src/components/box/box.css.ts

@@ -0,0 +1,47 @@
+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';
+
+export const colorForeground = createVar();
+export const colorBackground = createVar();
+
+export const boxRecipe = recipe({
+  variants: {
+    variant: {
+      solid: {
+        color: colorForeground,
+        backgroundColor: colorBackground,
+
+        vars: {
+          [colorForeground]: sys.color.foreground,
+          [colorBackground]: sys.color.background,
+        },
+      },
+
+      outline: {
+        color: colorBackground,
+        backgroundColor: 'transparent',
+
+        borderColor: colorBackground,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+      },
+    },
+
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      padding: sys.spacing[key],
+    })),
+
+    elevation: mapContractVars(sys.elevation, (key) => ({
+      boxShadow: sys.elevation[key],
+    })),
+
+    radius: mapContractVars(sys.shape.corner, (key) => ({
+      borderRadius: sys.shape.corner[key],
+    })),
+  },
+});
+
+export type BoxVariants = NonNullable<RecipeVariants<typeof boxRecipe>>;

package/src/components/box/box.stories.tsx

@@ -0,0 +1,29 @@
+import { Box, boxRecipe } from '@/components/box';
+import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/Box',
+  component: Box,
+  tags: ['autodocs'],
+  args: {
+    children: 'Box content',
+  },
+  argTypes: {
+    ...argTypesFromRecipe(boxRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+  },
+} satisfies Meta<typeof Box>;
+
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+export const Default: Story = {};

package/src/components/box/box.tsx

@@ -0,0 +1,55 @@
+import { clsx } from 'clsx';
+
+import type { PolymorphicComponentProps } from '@/types/utils.types.js';
+
+import { boxRecipe, type BoxVariants } from './box.css';
+
+type BoxProps<TUse extends React.ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The main variation of the box
+     */
+    variant?: BoxVariants['variant'];
+
+    /**
+     * The spacing between the box borders and its contents
+     */
+    spacing?: BoxVariants['spacing'];
+
+    /**
+     * The elevation of the box
+     */
+    elevation?: BoxVariants['elevation'];
+
+    /**
+     * The radius of the box
+     */
+    radius?: BoxVariants['radius'];
+  };
+
+/**
+ * A evenly spaced container for grouping related elements. Can
+ * be styled with colors, borders, and shadows.
+ *
+ * https://every-layout.dev/layouts/box
+ */
+export const Box = <TUse extends React.ElementType = 'div'>({
+  spacing,
+  radius,
+  elevation,
+  className,
+  variant,
+  ...props
+}: BoxProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(
+        boxRecipe({ variant, spacing, radius, elevation }),
+        className,
+      )}
+      {...rest}
+    />
+  );
+};

package/src/components/box/index.ts

@@ -0,0 +1,2 @@
+export { Box } from './box';
+export { boxRecipe, type BoxVariants } from './box.css';

package/src/components/button/button.css.ts

@@ -0,0 +1,33 @@
+import { createTheme } from '@vanilla-extract/css';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '@/styles/system-contract.css';
+
+export const [buttonTheme, buttonsys] = createTheme({
+  color: {
+    light: sys.color.foreground,
+    dark: sys.color.background,
+  },
+});
+
+export const buttonRecipe = recipe({
+  base: {
+    padding: '0',
+
+    backgroundColor: 'unset',
+    border: 'unset',
+
+    cursor: 'pointer',
+  },
+  variants: {
+    variant: {
+      bare: {},
+      plain: {},
+      outline: {},
+      ghost: {},
+      link: {},
+    },
+  },
+});
+
+export type ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;

package/src/components/button/button.stories.tsx

@@ -0,0 +1,31 @@
+import { CommonArgs, commonArgs, argTypesFromRecipe } from '@/utils/arg-types';
+
+import { Button } from './button';
+import { buttonRecipe } from './button.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Component/Button',
+  component: Button,
+  tags: ['autodocs'],
+  args: {
+    children: 'Button label',
+  },
+  argTypes: {
+    ...argTypesFromRecipe(buttonRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};

package/src/components/button/button.tsx

@@ -0,0 +1,33 @@
+import { clsx } from 'clsx';
+
+import { Box } from '@/components/box';
+import type { PolymorphicComponentProps } from '@/types/utils.types';
+
+import { buttonRecipe, type ButtonVariants } from './button.css';
+
+type ButtonProps<TUse extends React.ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The main variation of the button
+     */
+    variant?: ButtonVariants['variant'];
+  };
+
+export const Button = <TUse extends React.ElementType = 'button'>({
+  children,
+  className,
+  variant,
+  ...props
+}: ButtonProps<TUse>) => {
+  const { use: Comp = 'button', ...rest } = props;
+
+  return (
+    <Comp
+      use={Box}
+      className={clsx(buttonRecipe({ variant }), className)}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  );
+};

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export { buttonRecipe, type ButtonVariants } from './button.css';

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

@@ -0,0 +1,35 @@
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '@/styles/system-contract.css';
+import { mapContractVars } from '@/utils/map-contract-vars';
+
+export const centerRecipe = recipe({
+  base: {
+    display: 'block',
+    boxSizing: 'content-box',
+    marginInline: 'auto',
+    maxInlineSize: sys.layout.measure,
+  },
+
+  variants: {
+    andText: {
+      true: {
+        textAlign: 'center',
+      },
+    },
+
+    intrinsic: {
+      true: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      },
+    },
+
+    gutters: mapContractVars(sys.spacing, (key) => ({
+      paddingInline: sys.spacing[key],
+    })),
+  },
+});
+
+export type CenterVariants = NonNullable<RecipeVariants<typeof centerRecipe>>;

package/src/components/center/center.stories.tsx

@@ -0,0 +1,31 @@
+import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
+
+import { Center } from './center';
+import { centerRecipe } from './center.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/Center',
+  component: Center,
+  tags: ['autodocs'],
+  args: {
+    children: 'Centered content',
+  },
+  argTypes: {
+    ...argTypesFromRecipe(centerRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+  },
+} satisfies Meta<typeof Center>;
+
+export default meta;
+
+type Story = StoryObj<typeof Center>;
+
+export const Default: Story = {};

package/src/components/center/center.tsx

@@ -0,0 +1,46 @@
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { PolymorphicComponentProps } from '@/types/utils.types';
+
+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'];
+};
+
+/**
+ * A custom element for centering a block-level element horizontally,
+ * with a max-width value representing the typographic measure.
+ *
+ * https://every-layout.dev/layouts/center
+ */
+export const Center = <TUse extends ElementType>({
+  andText,
+  gutters,
+  intrinsic,
+  className,
+  ...props
+}: CenterProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(centerRecipe({ andText, gutters, intrinsic }), className)}
+      {...rest}
+    />
+  );
+};

package/src/components/center/index.ts

@@ -0,0 +1,2 @@
+export { Center } from './center';
+export { centerRecipe, type CenterVariants } from './center.css';

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

@@ -0,0 +1,60 @@
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '@/styles/system-contract.css';
+import { mapContractVars } from '@/utils/map-contract-vars';
+
+export const clusterRecipe = recipe({
+  base: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+
+  variants: {
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      gap: sys.spacing[key],
+    })),
+
+    justify: {
+      start: {
+        justifyContent: 'flex-start',
+      },
+      end: {
+        justifyContent: 'flex-end',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      spaceBetween: {
+        justifyContent: 'space-between',
+      },
+      spaceAround: {
+        justifyContent: 'space-around',
+      },
+      spaceEvenly: {
+        justifyContent: 'space-evenly',
+      },
+    },
+
+    align: {
+      start: {
+        alignItems: 'flex-start',
+      },
+      end: {
+        alignItems: 'flex-end',
+      },
+      center: {
+        alignItems: 'center',
+      },
+      stretch: {
+        alignItems: 'stretch',
+      },
+      baseline: {
+        alignItems: 'baseline',
+      },
+    },
+  },
+});
+
+export type ClusterVariants = NonNullable<RecipeVariants<typeof clusterRecipe>>;

package/src/components/cluster/cluster.stories.tsx

@@ -0,0 +1,37 @@
+import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
+
+import { Cluster } from './cluster';
+import { clusterRecipe } from './cluster.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/Cluster',
+  component: Cluster,
+  tags: ['autodocs'],
+  args: {
+    children: (
+      <>
+        <div>Cluster element one</div>
+        <div>Cluster element two</div>
+        <div>Cluster element three</div>
+      </>
+    ),
+  },
+  argTypes: {
+    ...argTypesFromRecipe(clusterRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+  },
+} satisfies Meta<typeof Cluster>;
+
+export default meta;
+
+type Story = StoryObj<typeof Cluster>;
+
+export const Default: Story = {};

package/src/components/cluster/cluster.tsx

@@ -0,0 +1,46 @@
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { PolymorphicComponentProps } from '@/types/utils.types';
+
+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'];
+  };
+
+/**
+ * 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>({
+  spacing,
+  justify,
+  align,
+  className,
+  ...props
+}: ClusterProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(clusterRecipe({ spacing, align, justify }), className)}
+      {...rest}
+    />
+  );
+};

package/src/components/cluster/index.ts

@@ -0,0 +1,2 @@
+export { Cluster } from './cluster';
+export { clusterRecipe, type ClusterVariants } from './cluster.css';

package/src/components/cover/cover.css.ts

@@ -0,0 +1,60 @@
+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';
+
+const spaceVar = createVar();
+export const minSizeVar = createVar();
+
+export const coverRecipe = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+
+    minBlockSize: minSizeVar,
+    padding: spaceVar,
+
+    vars: {
+      [minSizeVar]: '100vh',
+    },
+  },
+
+  variants: {
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      sys: {
+        [spaceVar]: sys.spacing[key],
+      },
+    })),
+
+    noPad: {
+      true: {
+        padding: 0,
+      },
+    },
+  },
+});
+
+globalStyle(`${coverRecipe.classNames.base} > *`, {
+  marginBlock: spaceVar,
+});
+
+globalStyle(
+  `${coverRecipe.classNames.base} > :first-child:not([data-cover-center])`,
+  {
+    marginBlockStart: 0,
+  },
+);
+
+globalStyle(
+  `${coverRecipe.classNames.base} > :last-child:not([data-cover-center])`,
+  {
+    marginBlockEnd: 0,
+  },
+);
+
+globalStyle(`${coverRecipe.classNames.base} > [data-cover-center]`, {
+  marginBlock: 'auto',
+});
+
+export type CoverVariants = NonNullable<RecipeVariants<typeof coverRecipe>>;