@arcote.tech/arc-ds 0.5.6 → 0.5.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -30,7 +30,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.5.6",
+    "@arcote.tech/arc": "^0.5.7",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/container/container.tsx

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+import { useDsVariantOverrides } from "../ds-provider";
+
+export const containerVariants = cva("mx-auto w-full max-w-screen-2xl");
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Container — szerokościowy wrapper dla głównego contentu Layoutu.
+ *
+ * Domyślnie `max-w-screen-2xl` (1536px). Aplikacje, które chcą węziej,
+ * nadpisują przez `arc.variants({ Container: { className: { default: "max-w-5xl" } } })`.
+ */
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, children, ...rest }, ref) => {
+    const overrides = useDsVariantOverrides("Container");
+    const extraClass = overrides?.className?.default;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(containerVariants(), extraClass, className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Container.displayName = "Container";

package/src/ds/types.ts

@@ -19,6 +19,7 @@ export interface DSComponentMap {
   Separator: ComponentType<SeparatorProps>;
   Avatar: ComponentType<AvatarProps>;
   Input: ComponentType<InputProps>;
+  Container: ComponentType<ContainerProps>;
 }
 
 /** Partial override — moduł nadpisuje tylko wybrane komponenty. */
@@ -130,3 +131,12 @@ export interface BoxProps {
   className?: string;
   children?: ReactNode;
 }
+
+// ---------------------------------------------------------------------------
+// Container
+// ---------------------------------------------------------------------------
+
+export interface ContainerProps {
+  className?: string;
+  children?: ReactNode;
+}

package/src/index.ts

@@ -69,6 +69,8 @@ export type { EditableTextProps } from "./ds/editable-text/editable-text";
 export { Badge, badgeVariants } from "./ds/badge/badge";
 export { Box, boxVariants } from "./ds/box/box";
 export type { BoxProps } from "./ds/box/box";
+export { Container, containerVariants } from "./ds/container/container";
+export type { ContainerProps } from "./ds/container/container";
 export { Sidebar, sidebarVariants } from "./ds/sidebar/sidebar";
 export type { SidebarProps } from "./ds/sidebar/sidebar";
 export {

package/src/layout/layout.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Box } from "../ds/box/box";
 import { Button } from "../ds/button/button";
+import { Container } from "../ds/container/container";
 import { DragHandle } from "./drag-handle";
 import { useDynamicSlotContent } from "./dynamic-slot";
 import { ExpandablePanel } from "./expandable-panel";
@@ -124,14 +125,14 @@ function DesktopLayout({ children }: { children?: ReactNode }) {
       <SubNavSlot />
       <div className="flex w-full flex-1">
         <div className="flex min-w-0 flex-1 justify-center">
-          <div className="flex w-full max-w-5xl gap-4 p-4">
+          <Container className="flex gap-4 p-4">
             {renderSlot("sidebar-left", { className: "flex w-64 shrink-0 flex-col gap-4" })}
             <div className="min-w-0 flex-1">
               {children}
               {renderSlot("main-content", { className: "flex flex-col gap-4" })}
             </div>
             {renderSlot("sidebar-right", { className: "flex w-64 shrink-0 flex-col gap-4" })}
-          </div>
+          </Container>
         </div>
         {renderSlot("preview-pane", {
           className: