@kalink-ui/seedly 0.1.0

package/src/components/cover/cover.stories.tsx

@@ -0,0 +1,45 @@
+import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
+
+import { Cover } from './cover';
+import { coverRecipe } from './cover.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/Cover',
+  component: Cover,
+  tags: ['autodocs'],
+  argTypes: {
+    ...argTypesFromRecipe(coverRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+
+    minSize: {
+      table: {
+        category: 'Recipe props',
+      },
+    },
+  },
+  args: {
+    minSize: '30vh',
+
+    children: (
+      <>
+        <div>Cover element one</div>
+        <div data-cover-center>Cover element two</div>
+        <div>Cover element three</div>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Cover>;
+
+export default meta;
+
+type Story = StoryObj<typeof Cover>;
+
+export const Default: Story = {};

package/src/components/cover/cover.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { PolymorphicComponentProps } from '@/types/utils.types';
+
+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;
+};
+
+/**
+ * A custom element for covering a block-level element horizontally,
+ * with a max-width value representing the typographic measure.
+ *
+ * The element that should be towards the vertical center of the space
+ * is identified with a simple `data-cover-center` attribute.
+ *
+ * https://every-layout.dev/layouts/cover
+ */
+export const Cover = <TUse extends ElementType>({
+  spacing,
+  noPad,
+  minSize,
+  className,
+  ...props
+}: CoverProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(coverRecipe({ spacing, noPad }), className)}
+      style={assignInlineVars({
+        ...(minSize && { [minSizeVar]: minSize }),
+      })}
+      {...rest}
+    />
+  );
+};

package/src/components/cover/index.ts

@@ -0,0 +1,2 @@
+export { Cover } from './cover';
+export { coverRecipe, type CoverVariants } from './cover.css';

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

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

package/src/components/frame/frame.stories.tsx

@@ -0,0 +1,39 @@
+import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
+
+import { Frame } from './frame';
+import { frameRecipe } from './frame.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/Frame',
+  component: Frame,
+  tags: ['autodocs'],
+  argTypes: {
+    ...argTypesFromRecipe(frameRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+
+    ratio: {
+      table: {
+        category: 'Recipe props',
+      },
+    },
+  },
+  args: {
+    ratio: '16:9',
+
+    children: <div>Frame element</div>,
+  },
+} satisfies Meta<typeof Frame>;
+
+export default meta;
+
+type Story = StoryObj<typeof Frame>;
+
+export const Default: Story = {};

package/src/components/frame/frame.tsx

@@ -0,0 +1,28 @@
+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> & {
+  /**
+   * The ratio of the frame
+   */
+  ratio?: FrameVariants['ratio'];
+};
+
+/**
+ * A custom element for augmenting image ratios
+ *
+ * https://every-layout.dev/layouts/frame
+ */
+export const Frame = <TUse extends ElementType>({
+  ratio,
+  className,
+  ...props
+}: FrameProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return <Comp className={clsx(frameRecipe({ ratio }), className)} {...rest} />;
+};

package/src/components/frame/index.ts

@@ -0,0 +1,2 @@
+export { Frame } from './frame';
+export { frameRecipe, type FrameVariants } from './frame.css';

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

@@ -0,0 +1,26 @@
+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 minSizeVar = createVar();
+
+export const gridRecipe = recipe({
+  base: {
+    display: 'grid',
+    gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
+
+    vars: {
+      [minSizeVar]: '250px',
+    },
+  },
+
+  variants: {
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      gridGap: sys.spacing[key],
+    })),
+  },
+});
+
+export type GridVariants = NonNullable<RecipeVariants<typeof gridRecipe>>;

package/src/components/grid/grid.stories.tsx

@@ -0,0 +1,50 @@
+import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
+
+import { Grid } from './grid';
+import { gridRecipe } from './grid.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Layout/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  argTypes: {
+    ...argTypesFromRecipe(gridRecipe),
+
+    ...commonArgs([
+      CommonArgs.COMPOSABLE,
+      CommonArgs.POLYMORPHIC,
+      CommonArgs.STYLABLE,
+      CommonArgs.REFERABLE,
+    ]),
+
+    minSize: {
+      table: {
+        category: 'Recipe props',
+      },
+    },
+  },
+  args: {
+    minSize: '250px',
+
+    children: (
+      <>
+        <div>Grid cell one</div>
+        <div>Grid cell two</div>
+        <div>Grid cell three</div>
+        <div>Grid cell four</div>
+        <div>Grid cell five</div>
+        <div>Grid cell six</div>
+        <div>Grid cell seven</div>
+        <div>Grid cell eight</div>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Default: Story = {};

package/src/components/grid/grid.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+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> & {
+  /**
+   * The minimum size of a grid cell
+   */
+  minSize?: string;
+
+  /**
+   * The spacing between the grid cell
+   */
+  spacing?: GridVariants['spacing'];
+};
+
+/**
+ * The Grid layout provides a flexible, responsive grid system that
+ * arranges elements in a structured, multi-column format, automatically
+ * adjusting the number of columns based on the available space and
+ * predefined constraints.
+ *
+ * https://every-layout.dev/layouts/grid/
+ */
+export const Grid = <TUse extends ElementType>({
+  spacing,
+  minSize,
+  className,
+  ...props
+}: GridProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(gridRecipe({ spacing }), className)}
+      style={assignInlineVars({
+        ...(minSize && { [minSizeVar]: minSize }),
+      })}
+      {...rest}
+    />
+  );
+};

package/src/components/grid/index.ts

@@ -0,0 +1,2 @@
+export { Grid } from './grid';
+export { gridRecipe, type GridVariants } from './grid.css';

package/src/components/layout.mdx

@@ -0,0 +1,206 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Layout/Layout Components" />
+
+# Layout Components
+
+This section provides implementations of various layout components inspired by [Every Layout](https://every-layout.dev/). These components are designed to create responsive, adaptable, and minimal CSS layouts, solving common design problems with composable and flexible solutions.
+
+## The Box
+
+The Box layout provides a simple way to add padding and a border to its content, useful for creating visually distinct sections. It's a fundamental building block for creating consistent spacing and visual separation in your designs.
+
+Use cases:
+
+- Creating card-like components
+- Highlighting important content
+- Separating sections in a form
+
+[Box documentation page](?path=/docs/layout-box--docs)
+
+```jsx
+import { Box } from '@kalink-studio/ui/layout';
+
+<Box padding="md" variant="plain">
+  <p>This is a box.</p>
+</Box>;
+```
+
+## The Stack
+
+The Stack layout arranges its children vertically with a consistent gap between them. It's perfect for creating a vertical flow of elements, eliminating the need for manual margin management between elements.
+
+Use cases:
+
+- Organizing form fields
+- Creating a vertical list of articles or comments
+- Structuring content in a sidebar
+
+[Stack documentation page](?path=/docs/layout-stack--docs)
+
+```jsx
+import { Stack } from '@kalink-studio/ui/layout';
+
+<Stack spacing="md" recursive>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>
+    <div>Nested item 2.1</div>
+    <div>Nested item 2.2</div>
+  </div>
+  <div>Item 3</div>
+</Stack>;
+```
+
+## The Center
+
+The Center layout is designed to center its content both horizontally and optionally vertically. It's particularly useful for creating visually balanced layouts and focusing attention on specific content.
+
+Use cases:
+
+- Creating hero sections
+- Creating a centered column of content
+- Designing error pages or "empty state" screens
+
+[Center documentation page](?path=/docs/layout-center--docs)
+
+```jsx
+import { Center } from '@kalink-studio/ui/layout';
+
+<Center gutters="md" intrinsic>
+  <p>This content is centered.</p>
+</Center>;
+```
+
+## The Cluster
+
+The Cluster layout arranges elements in a flexible row that wraps to accommodate available space. It's ideal for layouts that need to manage many small items while maintaining consistent spacing and alignment.
+
+Use cases:
+
+- Displaying tags or categories
+- Creating a flexible navigation menu
+- Showing a group of action buttons
+
+[Cluster documentation page](?path=/docs/layout-cluster--docs)
+
+```jsx
+import { Cluster } from '@kalink-studio/ui/layout';
+
+<Cluster spacing="md" justify="center">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</Cluster>;
+```
+
+## The Sidebar
+
+The Sidebar layout divides content into a main section and a sidebar, which can be positioned on either side and resized according to the layout requirements. It's crucial for creating responsive layouts that adapt to different screen sizes.
+
+Use cases:
+
+- Creating a layout with a navigation sidebar
+- Displaying additional information alongside main content
+- Building dashboard layouts
+
+[Sidebar documentation page](?path=/docs/layout-sidebar--docs)
+
+```jsx
+import { Sidebar } from '@kalink-studio/ui/layout';
+
+<Sidebar sideWidth="250px" contentMinWidth="300px" spacing="md" side="left">
+  <div>Sidebar content</div>
+  <div>Main content</div>
+</Sidebar>;
+```
+
+## The Switcher
+
+The Switcher layout allows elements to switch between a horizontal and vertical arrangement based on the available space. It's ideal for responsive design scenarios where content needs to adapt to different screen sizes seamlessly.
+
+Use cases:
+
+- Creating responsive navigation menus
+- Designing flexible card layouts
+- Building adaptable form layouts
+
+[Switcher documentation page](?path=/docs/layout-switcher--docs)
+
+```jsx
+import { Switcher } from '@kalink-studio/ui/layout';
+
+<Switcher threshold="300px" spacing="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Switcher>;
+```
+
+## The Cover
+
+The Cover layout helps create a vertically centered layout with a header, main content, and footer, ensuring that the main content stays centered. It's particularly useful for creating full-page layouts or sections that need to utilize the full viewport height.
+
+Use cases:
+
+- Designing landing pages
+- Creating login or signup screens
+- Building "coming soon" pages
+
+[Cover documentation page](?path=/docs/layout-cover--docs)
+
+```jsx
+import { Cover } from '@kalink-studio/ui/layout';
+
+<Cover minSize="60vh" spacing="md" noPad>
+  <header>Header</header>
+  <main>Main content</main>
+  <footer>Footer</footer>
+</Cover>;
+```
+
+## The Grid
+
+The Grid layout provides a responsive grid system that adapts the number of columns based on available space, with defined gaps between columns and rows. It's perfect for creating complex, responsive layouts without the need for media queries.
+
+Use cases:
+
+- Displaying a gallery of images
+- Creating a responsive product listing
+- Organizing dashboard widgets
+
+[Grid documentation page](?path=/docs/layout-grid--docs)
+
+```jsx
+import { Grid } from '@kalink-studio/ui/layout';
+
+<Grid minSize="200px" spacing="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</Grid>;
+```
+
+## The Frame
+
+The Frame layout is used to maintain aspect ratios of embedded content, such as videos or iframes, ensuring that content scales appropriately while preserving its aspect ratio. It's crucial for responsive design and preventing layout shifts.
+
+Use cases:
+
+- Embedding responsive videos
+- Displaying images with consistent aspect ratios
+- Creating responsive data visualizations
+
+[Frame documentation page](?path=/docs/layout-frame--docs)
+
+```jsx
+import { Frame } from '@kalink-studio/ui/layout';
+
+<Frame ratio="16:9">
+  <img src="...">
+</Frame>;
+```
+
+Each of these components is designed to solve specific layout challenges while promoting responsive and adaptable designs. By combining these layout primitives, you can create complex, flexible layouts that work across various screen sizes and devices, all while minimizing the amount of custom CSS required.

package/src/components/sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './sidebar';
+export { sidebarRecipe, type SidebarVariants } from './sidebar.css';

package/src/components/sidebar/sidebar.css.ts

@@ -0,0 +1,68 @@
+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';
+
+export const sideWidthVar = createVar();
+export const contentMinWidthVar = createVar();
+
+export const sidebarRecipe = recipe({
+  base: {
+    display: 'flex',
+    flexWrap: 'wrap',
+
+    vars: {
+      [contentMinWidthVar]: '50%',
+    },
+  },
+
+  variants: {
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      gap: sys.spacing[key],
+    })),
+
+    noStretch: {
+      true: {
+        alignItems: 'flex-start',
+      },
+    },
+
+    /**
+     * The width of the sidebar (empty means not set; defaults to the content width)
+     */
+    sideWidth: {
+      true: {},
+    },
+
+    /**
+     * Whether the sided element is the :last-child
+     */
+    side: {
+      right: {},
+      left: {},
+    },
+  },
+});
+
+globalStyle(`${sidebarRecipe.classNames.base} > *`, {
+  flexGrow: 1,
+});
+
+globalStyle(`${sidebarRecipe.classNames.variants.sideWidth.true} > *`, {
+  flexBasis: sideWidthVar,
+});
+
+globalStyle(`${sidebarRecipe.classNames.variants.side.left} > :last-child`, {
+  flexBasis: 0,
+  flexGrow: 999,
+  minInlineSize: contentMinWidthVar,
+});
+
+globalStyle(`${sidebarRecipe.classNames.variants.side.right} > :first-child`, {
+  flexBasis: 0,
+  flexGrow: 999,
+  minInlineSize: contentMinWidthVar,
+});
+
+export type SidebarVariants = NonNullable<RecipeVariants<typeof sidebarRecipe>>;