@babajaga3/react-bricks 0.1.0

package/README.md

@@ -0,0 +1,206 @@
+# react-layout-bricks
+
+A tiny (~1 kB gzipped) factory for building **composable, Tailwind-friendly React layout component systems**. Define your own named layout slots once, then snap them together like bricks anywhere in your codebase.
+
+```tsx
+const MobileLayout = createLayout({
+  Main:    { as: 'main',   className: 'flex flex-col min-h-screen' },
+  Header:  { as: 'header', className: 'sticky top-0 z-50 h-14 border-b' },
+  Content: {               className: 'flex-1 overflow-y-auto px-4 py-6' },
+  Footer:  { as: 'footer', className: 'h-16 border-t flex items-center px-4' },
+});
+
+function Page() {
+  return (
+    <MobileLayout.Main>
+      <MobileLayout.Header>My App</MobileLayout.Header>
+      <MobileLayout.Content>Hello world</MobileLayout.Content>
+      <MobileLayout.Footer>© 2025</MobileLayout.Footer>
+    </MobileLayout.Main>
+  );
+}
+```
+
+---
+
+## Features
+
+- **Zero config** — works with plain CSS classes, Tailwind, or any utility framework
+- **Tailwind-aware** — uses `tailwind-merge` to resolve class conflicts when installed
+- **Fully typed** — TypeScript generics infer slot names from your config; invalid slot access is a compile error
+- **Polymorphic** — every slot accepts an `as` prop to swap the rendered element
+- **Composable** — extend layouts, merge layouts, override per-instance
+- **Tree-shakeable** — dual ESM + CJS output, `"sideEffects": false`
+- **React 17+** compatible, framework agnostic (Next.js, Vite, Remix…)
+
+---
+
+## Installation
+
+```bash
+npm install react-layout-bricks
+# or
+pnpm add react-layout-bricks
+```
+
+### Optional peer dependencies (recommended)
+
+For Tailwind class-conflict resolution and conditional class support:
+
+```bash
+npm install tailwind-merge clsx
+```
+
+The package works without them — it falls back to plain space-joined class concatenation.
+
+---
+
+## API
+
+### `createLayout(config, name?)`
+
+Creates a namespaced object of slot components from a config.
+
+```ts
+function createLayout<T extends LayoutConfig>(
+  config: T,
+  name?: string,   // shown in React DevTools as "name.SlotKey"
+): Layout<T>
+```
+
+**Config shape:**
+
+| Property      | Type                  | Default  | Description                                          |
+|---------------|-----------------------|----------|------------------------------------------------------|
+| `as`          | `React.ElementType`   | `'div'`  | The HTML element or component this slot renders as   |
+| `className`   | `string`              | `''`     | Default classes applied to every instance            |
+| `displayName` | `string`              | inferred | Label in React DevTools                              |
+
+**Slot component props:**
+
+Every generated slot accepts:
+
+| Prop        | Type                | Description                                                              |
+|-------------|---------------------|--------------------------------------------------------------------------|
+| `as`        | `React.ElementType` | Override the rendered element/component for this single instance         |
+| `className` | `string`            | Extra classes merged on top of defaults (via `tailwind-merge` if present)|
+| `children`  | `React.ReactNode`   | Slot content                                                             |
+| `...rest`   | element props       | All other props forwarded to the underlying element                      |
+
+---
+
+### `extendLayout(base, extension, name?)`
+
+Creates a new layout by extending an existing one. Slots in `extension` override matching slots in `base`; new keys are added.
+
+```tsx
+const DesktopLayout = extendLayout(
+  MobileLayout,
+  {
+    // Override
+    Content: { className: 'flex-1 px-8 max-w-5xl mx-auto' },
+    // Add new
+    Sidebar: { as: 'aside', className: 'w-64 border-r hidden lg:block' },
+  },
+  'DesktopLayout',
+);
+
+// DesktopLayout.Header  ← from MobileLayout (unchanged)
+// DesktopLayout.Content ← overridden
+// DesktopLayout.Sidebar ← new
+```
+
+---
+
+### `mergeLayouts(a, b)`
+
+Merges two already-built layout objects into one. Slots in `b` win when keys collide.
+
+```tsx
+const CardLayout = createLayout({ Root: { … }, Body: { … } });
+const AppLayout  = mergeLayouts(MobileLayout, CardLayout);
+
+// AppLayout.Main / .Header / .Content / .Footer / .Root / .Body
+```
+
+---
+
+### `cn(...classes)`
+
+The internal class merger is exported in case you want to use it in your own components.
+
+```tsx
+import { cn } from 'react-layout-bricks';
+
+<div className={cn('px-4', isActive && 'bg-blue-500', props.className)} />
+```
+
+---
+
+## Patterns
+
+### One layout file per breakpoint / product area
+
+```ts
+// layouts/mobile.ts
+export const MobileLayout = createLayout({ … });
+
+// layouts/desktop.ts
+export const DesktopLayout = extendLayout(MobileLayout, { … });
+
+// layouts/dashboard.ts
+export const DashboardLayout = createLayout({ … });
+```
+
+### Per-page className overrides
+
+Default classes live in the layout definition. Instance overrides are merged at render time — Tailwind conflicts are resolved automatically.
+
+```tsx
+// Default: px-4
+<MobileLayout.Content className="px-8">…</MobileLayout.Content>
+// Rendered: px-8  (tailwind-merge resolves the conflict)
+```
+
+### Polymorphic slot rendering
+
+```tsx
+// Render Content as <article> for semantic HTML
+<MobileLayout.Content as="article" className="prose">
+  <h2>…</h2>
+</MobileLayout.Content>
+
+// Render Content as a third-party motion component
+import { motion } from 'motion/react';
+<MobileLayout.Content as={motion.div} animate={{ opacity: 1 }}>
+  …
+</MobileLayout.Content>
+```
+
+---
+
+## TypeScript
+
+Slot names are inferred from your config — accessing a slot that doesn't exist is a compile-time error.
+
+```ts
+const Layout = createLayout({ Main: { … }, Header: { … } });
+
+<Layout.Main />    // ✅
+<Layout.Footer />  // ❌ Property 'Footer' does not exist on type 'Layout<…>'
+```
+
+You can also export the layout type for use in other files:
+
+```ts
+import type { Layout } from 'react-layout-bricks';
+import type { myLayoutConfig } from './layouts/mobile';
+
+type MobileLayoutType = Layout<typeof myLayoutConfig>;
+```
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/utils/cn.ts
+var _twMerge = null;
+var _clsx = null;
+try {
+  _twMerge = __require("tailwind-merge").twMerge;
+} catch {
+}
+try {
+  _clsx = __require("clsx").clsx;
+} catch {
+}
+function cn(...inputs) {
+  const joined = _clsx ? _clsx(...inputs) : inputs.filter(Boolean).join(" ");
+  return _twMerge ? _twMerge(joined) : joined;
+}
+
+// src/create-layout.tsx
+function createSlotComponent(defaultElement, defaultClassName, displayName) {
+  function Slot({
+    as,
+    className,
+    children,
+    ...rest
+  }) {
+    const Element = as ?? defaultElement;
+    return React__default.default.createElement(
+      Element,
+      { className: cn(defaultClassName, className), ...rest },
+      children
+    );
+  }
+  Slot.displayName = displayName;
+  return Slot;
+}
+function createLayout(config, name) {
+  const layout = {};
+  for (const key in config) {
+    if (!Object.prototype.hasOwnProperty.call(config, key)) continue;
+    const slotConfig = config[key];
+    layout[key] = createSlotComponent(
+      slotConfig?.as ?? "div",
+      slotConfig?.className ?? "",
+      slotConfig?.displayName ?? (name ? `${name}.${key}` : key)
+    );
+  }
+  return layout;
+}
+
+// src/extend-layout.ts
+function extendLayout(base, extension, name) {
+  const extendedParts = createLayout(extension, name);
+  return { ...base, ...extendedParts };
+}
+function mergeLayouts(a, b) {
+  return { ...a, ...b };
+}
+
+exports.cn = cn;
+exports.createLayout = createLayout;
+exports.extendLayout = extendLayout;
+exports.mergeLayouts = mergeLayouts;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/create-layout.tsx","../src/extend-layout.ts"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAI,QAAA,GAAwD,IAAA;AAC5D,IAAI,KAAA,GAAsD,IAAA;AAE1D,IAAI;AAEF,EAAA,QAAA,GAAY,SAAA,CAAQ,gBAAgB,CAAA,CAA8C,OAAA;AACpF,CAAA,CAAA,MAAQ;AAER;AAEA,IAAI;AAEF,EAAA,KAAA,GAAS,SAAA,CAAQ,MAAM,CAAA,CAA+C,IAAA;AACxE,CAAA,CAAA,MAAQ;AAER;AAiBO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,MAAM,MAAA,GAAS,KAAA,GACX,KAAA,CAAM,GAAG,MAAM,CAAA,GACf,MAAA,CAAO,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEnC,EAAA,OAAO,QAAA,GAAW,QAAA,CAAS,MAAM,CAAA,GAAI,MAAA;AACvC;;;AC1CA,SAAS,mBAAA,CACP,cAAA,EACA,gBAAA,EACA,WAAA,EACe;AAQf,EAAA,SAAS,IAAA,CAA0C;AAAA,IACjD,EAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,EAA4C;AAC1C,IAAA,MAAM,UAAW,EAAA,IAAM,cAAA;AAEvB,IAAA,OAAOA,sBAAA,CAAM,aAAA;AAAA,MACX,OAAA;AAAA,MACA,EAAE,SAAA,EAAW,EAAA,CAAG,kBAAkB,SAAS,CAAA,EAAG,GAAG,IAAA,EAAK;AAAA,MACtD;AAAA,KACF;AAAA,EACF;AAEA,EAAA,IAAA,CAAK,WAAA,GAAc,WAAA;AAEnB,EAAA,OAAO,IAAA;AACT;AAqCO,SAAS,YAAA,CACd,QACA,IAAA,EACW;AACX,EAAA,MAAM,SAAS,EAAC;AAEhB,EAAA,KAAA,MAAW,OAAO,MAAA,EAAQ;AACxB,IAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,eAAe,IAAA,CAAK,MAAA,EAAQ,GAAG,CAAA,EAAG;AAExD,IAAA,MAAM,UAAA,GAAa,OAAO,GAAG,CAAA;AAE7B,IAAA,MAAA,CAAO,GAAG,CAAA,GAAI,mBAAA;AAAA,MACZ,YAAY,EAAA,IAAM,KAAA;AAAA,MAClB,YAAY,SAAA,IAAa,EAAA;AAAA,MACzB,YAAY,WAAA,KAAgB,IAAA,GAAO,GAAG,IAAI,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GAAK,GAAA;AAAA,KACxD;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;;;ACzDO,SAAS,YAAA,CAId,IAAA,EACA,SAAA,EACA,IAAA,EAC6B;AAE7B,EAAA,MAAM,aAAA,GAAgB,YAAA,CAAa,SAAA,EAAW,IAAI,CAAA;AAGlD,EAAA,OAAO,EAAE,GAAG,IAAA,EAAM,GAAG,aAAA,EAAc;AACrC;AAwBO,SAAS,YAAA,CAId,GACA,CAAA,EACO;AACP,EAAA,OAAO,EAAE,GAAG,CAAA,EAAG,GAAG,CAAA,EAAE;AACtB","file":"index.cjs","sourcesContent":["/**\n * Lightweight className merger.\n *\n * Tries to use `tailwind-merge` + `clsx` when available (peer deps).\n * Falls back to simple space-joined concatenation if they aren't installed.\n *\n * Because this runs at module initialisation time we wrap the dynamic\n * requires in try/catch so the package stays usable even without the\n * optional peers.\n */\n\ntype ClassValue = string | undefined | null | false;\n\n// --------------------------------------------------------------------------\n// Attempt to load peer deps at runtime\n// --------------------------------------------------------------------------\n\nlet _twMerge: (((...classes: string[]) => string) | null) = null;\nlet _clsx: ((...values: ClassValue[]) => string) | null = null;\n\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-var-requires\n  _twMerge = (require('tailwind-merge') as { twMerge: (...c: string[]) => string }).twMerge;\n} catch {\n  // tailwind-merge not installed — no Tailwind conflict resolution\n}\n\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-var-requires\n  _clsx = (require('clsx') as { clsx: (...v: ClassValue[]) => string }).clsx;\n} catch {\n  // clsx not installed — use simple join\n}\n\n// --------------------------------------------------------------------------\n// Exported merger\n// --------------------------------------------------------------------------\n\n/**\n * Merges class values in order.\n *\n * - When `clsx` is available: handles arrays, conditionals, objects, etc.\n * - When `tailwind-merge` is available: resolves Tailwind class conflicts\n *   (e.g. `p-4` + `p-6` → `p-6`).\n * - Without either peer dep: falls back to a plain space-separated join.\n *\n * @example\n * cn('flex flex-col', isActive && 'bg-blue-500', props.className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  const joined = _clsx\n    ? _clsx(...inputs)\n    : inputs.filter(Boolean).join(' ');\n\n  return _twMerge ? _twMerge(joined) : joined;\n}\n","import React from 'react';\nimport type {\n    Layout,\n    LayoutConfig,\n    SlotComponent,\n    SlotProps,\n} from './types';\nimport { cn } from './utils/cn';\n\n// ---------------------------------------------------------------------------\n// Internal slot factory\n// ---------------------------------------------------------------------------\n\nfunction createSlotComponent(\n  defaultElement: React.ElementType,\n  defaultClassName: string,\n  displayName: string,\n): SlotComponent {\n  /**\n   * Polymorphic slot component.\n   *\n   * - Renders `as` (if provided) or the default element from config.\n   * - Merges the config's default className with the instance's className.\n   * - Forwards all other props straight to the rendered element.\n   */\n  function Slot<C extends React.ElementType = 'div'>({\n    as,\n    className,\n    children,\n    ...rest\n  }: SlotProps<C>): React.ReactElement | null {\n    const Element = (as ?? defaultElement) as React.ElementType;\n\n    return React.createElement(\n      Element,\n      { className: cn(defaultClassName, className), ...rest },\n      children,\n    );\n  }\n\n  Slot.displayName = displayName;\n\n  return Slot as SlotComponent;\n}\n\n// ---------------------------------------------------------------------------\n// createLayout\n// ---------------------------------------------------------------------------\n\n/**\n * Creates a namespaced set of layout slot components from a config object.\n *\n * Each key in `config` becomes a component on the returned object.\n * Components are fully polymorphic (support the `as` prop), merge classNames\n * with `tailwind-merge` when available, and forward all HTML/component props.\n *\n * @param config  Slot definitions — keys are component names, values are slot options.\n * @param name    Optional name used in React DevTools (`Name.SlotKey`).\n *\n * @example\n * ```tsx\n * const MobileLayout = createLayout({\n *   Main:    { as: 'main',   className: 'flex flex-col min-h-screen bg-white' },\n *   Header:  { as: 'header', className: 'sticky top-0 z-50 h-16 border-b' },\n *   Content: {               className: 'flex-1 overflow-y-auto px-4 py-6' },\n *   Footer:  { as: 'footer', className: 'h-16 border-t flex items-center px-4' },\n * }, 'MobileLayout');\n *\n * // Usage:\n * function Page() {\n *   return (\n *     <MobileLayout.Main>\n *       <MobileLayout.Header className=\"bg-brand\">...</MobileLayout.Header>\n *       <MobileLayout.Content>...</MobileLayout.Content>\n *       <MobileLayout.Footer>...</MobileLayout.Footer>\n *     </MobileLayout.Main>\n *   );\n * }\n * ```\n */\nexport function createLayout<T extends LayoutConfig>(\n  config: T,\n  name?: string,\n): Layout<T> {\n  const layout = {} as Layout<T>;\n\n  for (const key in config) {\n    if (!Object.prototype.hasOwnProperty.call(config, key)) continue;\n\n    const slotConfig = config[key];\n\n    layout[key] = createSlotComponent(\n      slotConfig?.as ?? 'div',\n      slotConfig?.className ?? '',\n      slotConfig?.displayName ?? (name ? `${name}.${key}` : key),\n    );\n  }\n\n  return layout;\n}\n","import { createLayout } from './create-layout';\nimport type {\n  LayoutConfig,\n  Layout,\n  ExtendedLayout,\n  SlotComponent,\n} from './types';\n\n// ---------------------------------------------------------------------------\n// extendLayout\n// ---------------------------------------------------------------------------\n\n/**\n * Extends an existing layout with additional or overriding slot configs.\n *\n * - Slots present in `extension` **replace** slots in `base` entirely.\n * - Slots only in `base` are kept as-is.\n * - New slots in `extension` are added to the result.\n *\n * @example\n * ```tsx\n * const BaseLayout = createLayout({\n *   Main:    { as: 'main', className: 'flex flex-col min-h-screen' },\n *   Content: { className: 'flex-1 px-4' },\n * });\n *\n * const TabletLayout = extendLayout(BaseLayout, {\n *   // Override Content with wider padding\n *   Content: { className: 'flex-1 px-8 max-w-3xl mx-auto' },\n *   // Add a new slot that didn't exist before\n *   Sidebar: { className: 'w-64 border-l hidden md:block' },\n * });\n *\n * // TabletLayout.Main    ← from base\n * // TabletLayout.Content ← overridden\n * // TabletLayout.Sidebar ← new\n * ```\n *\n * @param base       The original layout object (from `createLayout`).\n * @param extension  Config for new or overriding slots.\n * @param name       Optional DevTools label for the extended layout.\n */\nexport function extendLayout<\n  TBase extends LayoutConfig,\n  TExt extends LayoutConfig,\n>(\n  base: Layout<TBase>,\n  extension: TExt,\n  name?: string,\n): ExtendedLayout<TBase, TExt> {\n  // Build the new components from the extension config\n  const extendedParts = createLayout(extension, name);\n\n  // Merge: base slots first, then extension slots override\n  return { ...base, ...extendedParts } as ExtendedLayout<TBase, TExt>;\n}\n\n// ---------------------------------------------------------------------------\n// mergeLayouts\n// ---------------------------------------------------------------------------\n\n/**\n * Merges two layout objects together into one.\n *\n * Unlike `extendLayout` this operates on **already-built layout objects**,\n * so it merges components directly. Slots in `b` win over slots in `a`\n * when keys collide.\n *\n * Useful for combining unrelated layout namespaces into a single object.\n *\n * @example\n * ```tsx\n * const BaseLayout   = createLayout({ Main: { … }, Header: { … } });\n * const WidgetLayout = createLayout({ Card: { … }, Badge: { … } });\n *\n * const PageLayout = mergeLayouts(BaseLayout, WidgetLayout);\n * // PageLayout.Main / .Header / .Card / .Badge all available\n * ```\n */\nexport function mergeLayouts<\n  A extends Record<string, SlotComponent>,\n  B extends Record<string, SlotComponent>,\n>(\n  a: A,\n  b: B,\n): A & B {\n  return { ...a, ...b };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,186 @@
+import React from 'react';
+
+/**
+ * Extracts props from a given element type, excluding the ones we own.
+ */
+type PropsOf<C extends React.ElementType> = React.ComponentPropsWithoutRef<C>;
+type OwnProps = 'as' | 'className' | 'children';
+/**
+ * Props for a single layout slot component.
+ * Supports the `as` prop for full polymorphism — any HTML element or React component.
+ */
+type SlotProps<C extends React.ElementType = 'div'> = {
+    /** Override the rendered element/component for this slot */
+    as?: C;
+    /** Extra classes merged on top of the slot's default className */
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<PropsOf<C>, OwnProps>;
+/**
+ * Configuration for a single slot inside a layout.
+ */
+type SlotConfig = {
+    /**
+     * The HTML element or component this slot renders by default.
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * Default Tailwind / CSS classes applied to every instance.
+     * User-supplied `className` is merged on top via tailwind-merge.
+     */
+    className?: string;
+    /**
+     * Label shown in React DevTools.
+     * Defaults to `LayoutName.SlotKey` when using `createLayout`.
+     */
+    displayName?: string;
+};
+/**
+ * The config object passed to `createLayout`.
+ * Keys become the component names on the returned layout object.
+ *
+ * @example
+ * const config = {
+ *   Main:    { as: 'main',   className: 'flex flex-col min-h-screen' },
+ *   Header:  { as: 'header', className: 'sticky top-0 z-50 h-16' },
+ *   Content: {               className: 'flex-1 overflow-auto px-4' },
+ * } satisfies LayoutConfig;
+ */
+type LayoutConfig = Record<string, SlotConfig>;
+/**
+ * A single slot component produced by `createLayout`.
+ * Fully polymorphic — the `as` prop changes which element/component is rendered
+ * and also narrows the available HTML/component props accordingly.
+ */
+interface SlotComponent {
+    <C extends React.ElementType = 'div'>(props: SlotProps<C>): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * The object returned by `createLayout<T>`.
+ * Each key in the config becomes a `SlotComponent`.
+ */
+type Layout<T extends LayoutConfig> = {
+    [K in keyof T]: SlotComponent;
+};
+/**
+ * Config passed to `extendLayout` — every key is optional so callers only
+ * need to list the slots they want to add or override.
+ */
+type ExtendConfig<T extends LayoutConfig> = Partial<T> & LayoutConfig;
+/**
+ * The merged layout type produced by `extendLayout`.
+ * Preserves both the base keys and the extension keys.
+ */
+type ExtendedLayout<TBase extends LayoutConfig, TExt extends LayoutConfig> = Layout<Omit<TBase, keyof TExt> & TExt>;
+
+/**
+ * Creates a namespaced set of layout slot components from a config object.
+ *
+ * Each key in `config` becomes a component on the returned object.
+ * Components are fully polymorphic (support the `as` prop), merge classNames
+ * with `tailwind-merge` when available, and forward all HTML/component props.
+ *
+ * @param config  Slot definitions — keys are component names, values are slot options.
+ * @param name    Optional name used in React DevTools (`Name.SlotKey`).
+ *
+ * @example
+ * ```tsx
+ * const MobileLayout = createLayout({
+ *   Main:    { as: 'main',   className: 'flex flex-col min-h-screen bg-white' },
+ *   Header:  { as: 'header', className: 'sticky top-0 z-50 h-16 border-b' },
+ *   Content: {               className: 'flex-1 overflow-y-auto px-4 py-6' },
+ *   Footer:  { as: 'footer', className: 'h-16 border-t flex items-center px-4' },
+ * }, 'MobileLayout');
+ *
+ * // Usage:
+ * function Page() {
+ *   return (
+ *     <MobileLayout.Main>
+ *       <MobileLayout.Header className="bg-brand">...</MobileLayout.Header>
+ *       <MobileLayout.Content>...</MobileLayout.Content>
+ *       <MobileLayout.Footer>...</MobileLayout.Footer>
+ *     </MobileLayout.Main>
+ *   );
+ * }
+ * ```
+ */
+declare function createLayout<T extends LayoutConfig>(config: T, name?: string): Layout<T>;
+
+/**
+ * Extends an existing layout with additional or overriding slot configs.
+ *
+ * - Slots present in `extension` **replace** slots in `base` entirely.
+ * - Slots only in `base` are kept as-is.
+ * - New slots in `extension` are added to the result.
+ *
+ * @example
+ * ```tsx
+ * const BaseLayout = createLayout({
+ *   Main:    { as: 'main', className: 'flex flex-col min-h-screen' },
+ *   Content: { className: 'flex-1 px-4' },
+ * });
+ *
+ * const TabletLayout = extendLayout(BaseLayout, {
+ *   // Override Content with wider padding
+ *   Content: { className: 'flex-1 px-8 max-w-3xl mx-auto' },
+ *   // Add a new slot that didn't exist before
+ *   Sidebar: { className: 'w-64 border-l hidden md:block' },
+ * });
+ *
+ * // TabletLayout.Main    ← from base
+ * // TabletLayout.Content ← overridden
+ * // TabletLayout.Sidebar ← new
+ * ```
+ *
+ * @param base       The original layout object (from `createLayout`).
+ * @param extension  Config for new or overriding slots.
+ * @param name       Optional DevTools label for the extended layout.
+ */
+declare function extendLayout<TBase extends LayoutConfig, TExt extends LayoutConfig>(base: Layout<TBase>, extension: TExt, name?: string): ExtendedLayout<TBase, TExt>;
+/**
+ * Merges two layout objects together into one.
+ *
+ * Unlike `extendLayout` this operates on **already-built layout objects**,
+ * so it merges components directly. Slots in `b` win over slots in `a`
+ * when keys collide.
+ *
+ * Useful for combining unrelated layout namespaces into a single object.
+ *
+ * @example
+ * ```tsx
+ * const BaseLayout   = createLayout({ Main: { … }, Header: { … } });
+ * const WidgetLayout = createLayout({ Card: { … }, Badge: { … } });
+ *
+ * const PageLayout = mergeLayouts(BaseLayout, WidgetLayout);
+ * // PageLayout.Main / .Header / .Card / .Badge all available
+ * ```
+ */
+declare function mergeLayouts<A extends Record<string, SlotComponent>, B extends Record<string, SlotComponent>>(a: A, b: B): A & B;
+
+/**
+ * Lightweight className merger.
+ *
+ * Tries to use `tailwind-merge` + `clsx` when available (peer deps).
+ * Falls back to simple space-joined concatenation if they aren't installed.
+ *
+ * Because this runs at module initialisation time we wrap the dynamic
+ * requires in try/catch so the package stays usable even without the
+ * optional peers.
+ */
+type ClassValue = string | undefined | null | false;
+/**
+ * Merges class values in order.
+ *
+ * - When `clsx` is available: handles arrays, conditionals, objects, etc.
+ * - When `tailwind-merge` is available: resolves Tailwind class conflicts
+ *   (e.g. `p-4` + `p-6` → `p-6`).
+ * - Without either peer dep: falls back to a plain space-separated join.
+ *
+ * @example
+ * cn('flex flex-col', isActive && 'bg-blue-500', props.className)
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { type ExtendConfig, type ExtendedLayout, type Layout, type LayoutConfig, type SlotComponent, type SlotConfig, type SlotProps, cn, createLayout, extendLayout, mergeLayouts };

package/dist/index.d.ts

@@ -0,0 +1,186 @@
+import React from 'react';
+
+/**
+ * Extracts props from a given element type, excluding the ones we own.
+ */
+type PropsOf<C extends React.ElementType> = React.ComponentPropsWithoutRef<C>;
+type OwnProps = 'as' | 'className' | 'children';
+/**
+ * Props for a single layout slot component.
+ * Supports the `as` prop for full polymorphism — any HTML element or React component.
+ */
+type SlotProps<C extends React.ElementType = 'div'> = {
+    /** Override the rendered element/component for this slot */
+    as?: C;
+    /** Extra classes merged on top of the slot's default className */
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<PropsOf<C>, OwnProps>;
+/**
+ * Configuration for a single slot inside a layout.
+ */
+type SlotConfig = {
+    /**
+     * The HTML element or component this slot renders by default.
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * Default Tailwind / CSS classes applied to every instance.
+     * User-supplied `className` is merged on top via tailwind-merge.
+     */
+    className?: string;
+    /**
+     * Label shown in React DevTools.
+     * Defaults to `LayoutName.SlotKey` when using `createLayout`.
+     */
+    displayName?: string;
+};
+/**
+ * The config object passed to `createLayout`.
+ * Keys become the component names on the returned layout object.
+ *
+ * @example
+ * const config = {
+ *   Main:    { as: 'main',   className: 'flex flex-col min-h-screen' },
+ *   Header:  { as: 'header', className: 'sticky top-0 z-50 h-16' },
+ *   Content: {               className: 'flex-1 overflow-auto px-4' },
+ * } satisfies LayoutConfig;
+ */
+type LayoutConfig = Record<string, SlotConfig>;
+/**
+ * A single slot component produced by `createLayout`.
+ * Fully polymorphic — the `as` prop changes which element/component is rendered
+ * and also narrows the available HTML/component props accordingly.
+ */
+interface SlotComponent {
+    <C extends React.ElementType = 'div'>(props: SlotProps<C>): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * The object returned by `createLayout<T>`.
+ * Each key in the config becomes a `SlotComponent`.
+ */
+type Layout<T extends LayoutConfig> = {
+    [K in keyof T]: SlotComponent;
+};
+/**
+ * Config passed to `extendLayout` — every key is optional so callers only
+ * need to list the slots they want to add or override.
+ */
+type ExtendConfig<T extends LayoutConfig> = Partial<T> & LayoutConfig;
+/**
+ * The merged layout type produced by `extendLayout`.
+ * Preserves both the base keys and the extension keys.
+ */
+type ExtendedLayout<TBase extends LayoutConfig, TExt extends LayoutConfig> = Layout<Omit<TBase, keyof TExt> & TExt>;
+
+/**
+ * Creates a namespaced set of layout slot components from a config object.
+ *
+ * Each key in `config` becomes a component on the returned object.
+ * Components are fully polymorphic (support the `as` prop), merge classNames
+ * with `tailwind-merge` when available, and forward all HTML/component props.
+ *
+ * @param config  Slot definitions — keys are component names, values are slot options.
+ * @param name    Optional name used in React DevTools (`Name.SlotKey`).
+ *
+ * @example
+ * ```tsx
+ * const MobileLayout = createLayout({
+ *   Main:    { as: 'main',   className: 'flex flex-col min-h-screen bg-white' },
+ *   Header:  { as: 'header', className: 'sticky top-0 z-50 h-16 border-b' },
+ *   Content: {               className: 'flex-1 overflow-y-auto px-4 py-6' },
+ *   Footer:  { as: 'footer', className: 'h-16 border-t flex items-center px-4' },
+ * }, 'MobileLayout');
+ *
+ * // Usage:
+ * function Page() {
+ *   return (
+ *     <MobileLayout.Main>
+ *       <MobileLayout.Header className="bg-brand">...</MobileLayout.Header>
+ *       <MobileLayout.Content>...</MobileLayout.Content>
+ *       <MobileLayout.Footer>...</MobileLayout.Footer>
+ *     </MobileLayout.Main>
+ *   );
+ * }
+ * ```
+ */
+declare function createLayout<T extends LayoutConfig>(config: T, name?: string): Layout<T>;
+
+/**
+ * Extends an existing layout with additional or overriding slot configs.
+ *
+ * - Slots present in `extension` **replace** slots in `base` entirely.
+ * - Slots only in `base` are kept as-is.
+ * - New slots in `extension` are added to the result.
+ *
+ * @example
+ * ```tsx
+ * const BaseLayout = createLayout({
+ *   Main:    { as: 'main', className: 'flex flex-col min-h-screen' },
+ *   Content: { className: 'flex-1 px-4' },
+ * });
+ *
+ * const TabletLayout = extendLayout(BaseLayout, {
+ *   // Override Content with wider padding
+ *   Content: { className: 'flex-1 px-8 max-w-3xl mx-auto' },
+ *   // Add a new slot that didn't exist before
+ *   Sidebar: { className: 'w-64 border-l hidden md:block' },
+ * });
+ *
+ * // TabletLayout.Main    ← from base
+ * // TabletLayout.Content ← overridden
+ * // TabletLayout.Sidebar ← new
+ * ```
+ *
+ * @param base       The original layout object (from `createLayout`).
+ * @param extension  Config for new or overriding slots.
+ * @param name       Optional DevTools label for the extended layout.
+ */
+declare function extendLayout<TBase extends LayoutConfig, TExt extends LayoutConfig>(base: Layout<TBase>, extension: TExt, name?: string): ExtendedLayout<TBase, TExt>;
+/**
+ * Merges two layout objects together into one.
+ *
+ * Unlike `extendLayout` this operates on **already-built layout objects**,
+ * so it merges components directly. Slots in `b` win over slots in `a`
+ * when keys collide.
+ *
+ * Useful for combining unrelated layout namespaces into a single object.
+ *
+ * @example
+ * ```tsx
+ * const BaseLayout   = createLayout({ Main: { … }, Header: { … } });
+ * const WidgetLayout = createLayout({ Card: { … }, Badge: { … } });
+ *
+ * const PageLayout = mergeLayouts(BaseLayout, WidgetLayout);
+ * // PageLayout.Main / .Header / .Card / .Badge all available
+ * ```
+ */
+declare function mergeLayouts<A extends Record<string, SlotComponent>, B extends Record<string, SlotComponent>>(a: A, b: B): A & B;
+
+/**
+ * Lightweight className merger.
+ *
+ * Tries to use `tailwind-merge` + `clsx` when available (peer deps).
+ * Falls back to simple space-joined concatenation if they aren't installed.
+ *
+ * Because this runs at module initialisation time we wrap the dynamic
+ * requires in try/catch so the package stays usable even without the
+ * optional peers.
+ */
+type ClassValue = string | undefined | null | false;
+/**
+ * Merges class values in order.
+ *
+ * - When `clsx` is available: handles arrays, conditionals, objects, etc.
+ * - When `tailwind-merge` is available: resolves Tailwind class conflicts
+ *   (e.g. `p-4` + `p-6` → `p-6`).
+ * - Without either peer dep: falls back to a plain space-separated join.
+ *
+ * @example
+ * cn('flex flex-col', isActive && 'bg-blue-500', props.className)
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { type ExtendConfig, type ExtendedLayout, type Layout, type LayoutConfig, type SlotComponent, type SlotConfig, type SlotProps, cn, createLayout, extendLayout, mergeLayouts };

package/dist/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/utils/cn.ts
+var _twMerge = null;
+var _clsx = null;
+try {
+  _twMerge = __require("tailwind-merge").twMerge;
+} catch {
+}
+try {
+  _clsx = __require("clsx").clsx;
+} catch {
+}
+function cn(...inputs) {
+  const joined = _clsx ? _clsx(...inputs) : inputs.filter(Boolean).join(" ");
+  return _twMerge ? _twMerge(joined) : joined;
+}
+
+// src/create-layout.tsx
+function createSlotComponent(defaultElement, defaultClassName, displayName) {
+  function Slot({
+    as,
+    className,
+    children,
+    ...rest
+  }) {
+    const Element = as ?? defaultElement;
+    return React.createElement(
+      Element,
+      { className: cn(defaultClassName, className), ...rest },
+      children
+    );
+  }
+  Slot.displayName = displayName;
+  return Slot;
+}
+function createLayout(config, name) {
+  const layout = {};
+  for (const key in config) {
+    if (!Object.prototype.hasOwnProperty.call(config, key)) continue;
+    const slotConfig = config[key];
+    layout[key] = createSlotComponent(
+      slotConfig?.as ?? "div",
+      slotConfig?.className ?? "",
+      slotConfig?.displayName ?? (name ? `${name}.${key}` : key)
+    );
+  }
+  return layout;
+}
+
+// src/extend-layout.ts
+function extendLayout(base, extension, name) {
+  const extendedParts = createLayout(extension, name);
+  return { ...base, ...extendedParts };
+}
+function mergeLayouts(a, b) {
+  return { ...a, ...b };
+}
+
+export { cn, createLayout, extendLayout, mergeLayouts };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/create-layout.tsx","../src/extend-layout.ts"],"names":[],"mappings":";;;;;;;;;;AAiBA,IAAI,QAAA,GAAwD,IAAA;AAC5D,IAAI,KAAA,GAAsD,IAAA;AAE1D,IAAI;AAEF,EAAA,QAAA,GAAY,SAAA,CAAQ,gBAAgB,CAAA,CAA8C,OAAA;AACpF,CAAA,CAAA,MAAQ;AAER;AAEA,IAAI;AAEF,EAAA,KAAA,GAAS,SAAA,CAAQ,MAAM,CAAA,CAA+C,IAAA;AACxE,CAAA,CAAA,MAAQ;AAER;AAiBO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,MAAM,MAAA,GAAS,KAAA,GACX,KAAA,CAAM,GAAG,MAAM,CAAA,GACf,MAAA,CAAO,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEnC,EAAA,OAAO,QAAA,GAAW,QAAA,CAAS,MAAM,CAAA,GAAI,MAAA;AACvC;;;AC1CA,SAAS,mBAAA,CACP,cAAA,EACA,gBAAA,EACA,WAAA,EACe;AAQf,EAAA,SAAS,IAAA,CAA0C;AAAA,IACjD,EAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,EAA4C;AAC1C,IAAA,MAAM,UAAW,EAAA,IAAM,cAAA;AAEvB,IAAA,OAAO,KAAA,CAAM,aAAA;AAAA,MACX,OAAA;AAAA,MACA,EAAE,SAAA,EAAW,EAAA,CAAG,kBAAkB,SAAS,CAAA,EAAG,GAAG,IAAA,EAAK;AAAA,MACtD;AAAA,KACF;AAAA,EACF;AAEA,EAAA,IAAA,CAAK,WAAA,GAAc,WAAA;AAEnB,EAAA,OAAO,IAAA;AACT;AAqCO,SAAS,YAAA,CACd,QACA,IAAA,EACW;AACX,EAAA,MAAM,SAAS,EAAC;AAEhB,EAAA,KAAA,MAAW,OAAO,MAAA,EAAQ;AACxB,IAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,eAAe,IAAA,CAAK,MAAA,EAAQ,GAAG,CAAA,EAAG;AAExD,IAAA,MAAM,UAAA,GAAa,OAAO,GAAG,CAAA;AAE7B,IAAA,MAAA,CAAO,GAAG,CAAA,GAAI,mBAAA;AAAA,MACZ,YAAY,EAAA,IAAM,KAAA;AAAA,MAClB,YAAY,SAAA,IAAa,EAAA;AAAA,MACzB,YAAY,WAAA,KAAgB,IAAA,GAAO,GAAG,IAAI,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GAAK,GAAA;AAAA,KACxD;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;;;ACzDO,SAAS,YAAA,CAId,IAAA,EACA,SAAA,EACA,IAAA,EAC6B;AAE7B,EAAA,MAAM,aAAA,GAAgB,YAAA,CAAa,SAAA,EAAW,IAAI,CAAA;AAGlD,EAAA,OAAO,EAAE,GAAG,IAAA,EAAM,GAAG,aAAA,EAAc;AACrC;AAwBO,SAAS,YAAA,CAId,GACA,CAAA,EACO;AACP,EAAA,OAAO,EAAE,GAAG,CAAA,EAAG,GAAG,CAAA,EAAE;AACtB","file":"index.js","sourcesContent":["/**\n * Lightweight className merger.\n *\n * Tries to use `tailwind-merge` + `clsx` when available (peer deps).\n * Falls back to simple space-joined concatenation if they aren't installed.\n *\n * Because this runs at module initialisation time we wrap the dynamic\n * requires in try/catch so the package stays usable even without the\n * optional peers.\n */\n\ntype ClassValue = string | undefined | null | false;\n\n// --------------------------------------------------------------------------\n// Attempt to load peer deps at runtime\n// --------------------------------------------------------------------------\n\nlet _twMerge: (((...classes: string[]) => string) | null) = null;\nlet _clsx: ((...values: ClassValue[]) => string) | null = null;\n\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-var-requires\n  _twMerge = (require('tailwind-merge') as { twMerge: (...c: string[]) => string }).twMerge;\n} catch {\n  // tailwind-merge not installed — no Tailwind conflict resolution\n}\n\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-var-requires\n  _clsx = (require('clsx') as { clsx: (...v: ClassValue[]) => string }).clsx;\n} catch {\n  // clsx not installed — use simple join\n}\n\n// --------------------------------------------------------------------------\n// Exported merger\n// --------------------------------------------------------------------------\n\n/**\n * Merges class values in order.\n *\n * - When `clsx` is available: handles arrays, conditionals, objects, etc.\n * - When `tailwind-merge` is available: resolves Tailwind class conflicts\n *   (e.g. `p-4` + `p-6` → `p-6`).\n * - Without either peer dep: falls back to a plain space-separated join.\n *\n * @example\n * cn('flex flex-col', isActive && 'bg-blue-500', props.className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  const joined = _clsx\n    ? _clsx(...inputs)\n    : inputs.filter(Boolean).join(' ');\n\n  return _twMerge ? _twMerge(joined) : joined;\n}\n","import React from 'react';\nimport type {\n    Layout,\n    LayoutConfig,\n    SlotComponent,\n    SlotProps,\n} from './types';\nimport { cn } from './utils/cn';\n\n// ---------------------------------------------------------------------------\n// Internal slot factory\n// ---------------------------------------------------------------------------\n\nfunction createSlotComponent(\n  defaultElement: React.ElementType,\n  defaultClassName: string,\n  displayName: string,\n): SlotComponent {\n  /**\n   * Polymorphic slot component.\n   *\n   * - Renders `as` (if provided) or the default element from config.\n   * - Merges the config's default className with the instance's className.\n   * - Forwards all other props straight to the rendered element.\n   */\n  function Slot<C extends React.ElementType = 'div'>({\n    as,\n    className,\n    children,\n    ...rest\n  }: SlotProps<C>): React.ReactElement | null {\n    const Element = (as ?? defaultElement) as React.ElementType;\n\n    return React.createElement(\n      Element,\n      { className: cn(defaultClassName, className), ...rest },\n      children,\n    );\n  }\n\n  Slot.displayName = displayName;\n\n  return Slot as SlotComponent;\n}\n\n// ---------------------------------------------------------------------------\n// createLayout\n// ---------------------------------------------------------------------------\n\n/**\n * Creates a namespaced set of layout slot components from a config object.\n *\n * Each key in `config` becomes a component on the returned object.\n * Components are fully polymorphic (support the `as` prop), merge classNames\n * with `tailwind-merge` when available, and forward all HTML/component props.\n *\n * @param config  Slot definitions — keys are component names, values are slot options.\n * @param name    Optional name used in React DevTools (`Name.SlotKey`).\n *\n * @example\n * ```tsx\n * const MobileLayout = createLayout({\n *   Main:    { as: 'main',   className: 'flex flex-col min-h-screen bg-white' },\n *   Header:  { as: 'header', className: 'sticky top-0 z-50 h-16 border-b' },\n *   Content: {               className: 'flex-1 overflow-y-auto px-4 py-6' },\n *   Footer:  { as: 'footer', className: 'h-16 border-t flex items-center px-4' },\n * }, 'MobileLayout');\n *\n * // Usage:\n * function Page() {\n *   return (\n *     <MobileLayout.Main>\n *       <MobileLayout.Header className=\"bg-brand\">...</MobileLayout.Header>\n *       <MobileLayout.Content>...</MobileLayout.Content>\n *       <MobileLayout.Footer>...</MobileLayout.Footer>\n *     </MobileLayout.Main>\n *   );\n * }\n * ```\n */\nexport function createLayout<T extends LayoutConfig>(\n  config: T,\n  name?: string,\n): Layout<T> {\n  const layout = {} as Layout<T>;\n\n  for (const key in config) {\n    if (!Object.prototype.hasOwnProperty.call(config, key)) continue;\n\n    const slotConfig = config[key];\n\n    layout[key] = createSlotComponent(\n      slotConfig?.as ?? 'div',\n      slotConfig?.className ?? '',\n      slotConfig?.displayName ?? (name ? `${name}.${key}` : key),\n    );\n  }\n\n  return layout;\n}\n","import { createLayout } from './create-layout';\nimport type {\n  LayoutConfig,\n  Layout,\n  ExtendedLayout,\n  SlotComponent,\n} from './types';\n\n// ---------------------------------------------------------------------------\n// extendLayout\n// ---------------------------------------------------------------------------\n\n/**\n * Extends an existing layout with additional or overriding slot configs.\n *\n * - Slots present in `extension` **replace** slots in `base` entirely.\n * - Slots only in `base` are kept as-is.\n * - New slots in `extension` are added to the result.\n *\n * @example\n * ```tsx\n * const BaseLayout = createLayout({\n *   Main:    { as: 'main', className: 'flex flex-col min-h-screen' },\n *   Content: { className: 'flex-1 px-4' },\n * });\n *\n * const TabletLayout = extendLayout(BaseLayout, {\n *   // Override Content with wider padding\n *   Content: { className: 'flex-1 px-8 max-w-3xl mx-auto' },\n *   // Add a new slot that didn't exist before\n *   Sidebar: { className: 'w-64 border-l hidden md:block' },\n * });\n *\n * // TabletLayout.Main    ← from base\n * // TabletLayout.Content ← overridden\n * // TabletLayout.Sidebar ← new\n * ```\n *\n * @param base       The original layout object (from `createLayout`).\n * @param extension  Config for new or overriding slots.\n * @param name       Optional DevTools label for the extended layout.\n */\nexport function extendLayout<\n  TBase extends LayoutConfig,\n  TExt extends LayoutConfig,\n>(\n  base: Layout<TBase>,\n  extension: TExt,\n  name?: string,\n): ExtendedLayout<TBase, TExt> {\n  // Build the new components from the extension config\n  const extendedParts = createLayout(extension, name);\n\n  // Merge: base slots first, then extension slots override\n  return { ...base, ...extendedParts } as ExtendedLayout<TBase, TExt>;\n}\n\n// ---------------------------------------------------------------------------\n// mergeLayouts\n// ---------------------------------------------------------------------------\n\n/**\n * Merges two layout objects together into one.\n *\n * Unlike `extendLayout` this operates on **already-built layout objects**,\n * so it merges components directly. Slots in `b` win over slots in `a`\n * when keys collide.\n *\n * Useful for combining unrelated layout namespaces into a single object.\n *\n * @example\n * ```tsx\n * const BaseLayout   = createLayout({ Main: { … }, Header: { … } });\n * const WidgetLayout = createLayout({ Card: { … }, Badge: { … } });\n *\n * const PageLayout = mergeLayouts(BaseLayout, WidgetLayout);\n * // PageLayout.Main / .Header / .Card / .Badge all available\n * ```\n */\nexport function mergeLayouts<\n  A extends Record<string, SlotComponent>,\n  B extends Record<string, SlotComponent>,\n>(\n  a: A,\n  b: B,\n): A & B {\n  return { ...a, ...b };\n}\n"]}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@babajaga3/react-bricks",
+  "version": "0.1.0",
+  "description": "A tiny factory for building composable, Tailwind-friendly React layout component systems.",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "layout",
+    "tailwind",
+    "components",
+    "composable",
+    "typescript"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prepublishOnly": "npm run build && npm run typecheck"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwind-merge": {
+      "optional": true
+    },
+    "clsx": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.4",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  },
+  "optionalDependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.4"
+  },
+  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be"
+}