@dashforge/tw 0.1.0-beta → 0.2.1-beta

package/dist/src/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,36 @@
+import type { AspectRatioProps } from './aspectRatio.types.js';
+/**
+ * `<AspectRatio>` — locks the aspect ratio of its child container,
+ * regardless of width. The classic use is responsive images and
+ * embedded media: an `<img>` that takes 100% of the available width
+ * but always renders at 16:9 (or 1:1, or whatever the source ratio is)
+ * — no jumping layouts during image load, no whitespace below the
+ * media, no JS measurement.
+ *
+ * Implementation: native CSS `aspect-ratio` property. Supported in
+ * every browser shipped from 2021 onward (Chrome 88, Firefox 89,
+ * Safari 15, Edge 88). No padding-bottom hack — that workaround
+ * predates the native property and brings ugly absolute-positioning
+ * requirements on the child.
+ *
+ * Why a component if it's "just one CSS property"?
+ *   Two reasons:
+ *     1. Discoverability — `<AspectRatio ratio={16/9}>` documents the
+ *        intent at the call site. `style={{ aspectRatio: '16/9' }}` is
+ *        the same thing functionally, but harder to spot in a 200-line
+ *        component file.
+ *     2. Composition — pairs naturally with `sx="rounded-xl overflow-hidden"`
+ *        for the canonical "rounded clipped media" pattern. Forgetting
+ *        the `overflow-hidden` is the #1 mistake we want to prevent
+ *        through documentation (it's in this component's MDX, at the
+ *        top of the Notes).
+ *
+ * Child contract:
+ *   The single child is expected to fill the container — typically
+ *   `<img>` / `<video>` with `className="w-full h-full object-cover"`.
+ *   We don't force this via CSS (the consumer might want a centered
+ *   icon instead of a filling image) — but it's the 99% case, and the
+ *   docs show it first.
+ */
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=AspectRatio.d.ts.map

package/dist/src/components/AspectRatio/AspectRatio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,WAAW,0GAiCvB,CAAC"}

package/dist/src/components/AspectRatio/aspectRatio.types.d.ts

@@ -0,0 +1,50 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for `<AspectRatio>` — content-shape primitive that locks the
+ * aspect ratio of its child regardless of width.
+ *
+ * Implementation: uses the native CSS `aspect-ratio` property
+ * (supported in all current browsers since 2021 — Chrome 88+, Firefox 89+,
+ * Safari 15+, Edge 88+). No padding-bottom hack, no JS measurement.
+ *
+ * `ratio` accepts:
+ *   • A number — width / height. `16/9` is 1.7777…, `1` is square,
+ *     `4/3` is 1.333…, `21/9` is ultrawide cinema.
+ *   • A string with the CSS `aspect-ratio` syntax, e.g. `'16 / 9'`,
+ *     `'4 / 3'`. Useful when you want the source ratio to read clearly
+ *     in the JSX (`ratio="16 / 9"` is more legible than `ratio={16/9}`).
+ *
+ * The component renders a single element with `aspect-ratio: X` and
+ * `width: 100%`. The child is expected to fill it — typically an
+ * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
+ *
+ * Why not a TV recipe?
+ *   The ratio is arbitrary (`16/9`, `1`, `2.35`, anything). Tailwind
+ *   has `aspect-square` / `aspect-video` / `aspect-[16/9]` arbitrary
+ *   values, but enumerating every conceivable ratio in TV would be
+ *   pointless. We set `style={{ aspectRatio }}` directly — pure CSS
+ *   property, no class purge concerns.
+ */
+export interface AspectRatioProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    /**
+     * Aspect ratio as width/height. Number (`16/9`) or CSS string
+     * (`'16 / 9'`). Default `1` (square).
+     */
+    ratio?: number | string;
+    /**
+     * The child that fills the locked-ratio container. Typically an
+     * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
+     */
+    children?: ReactNode;
+    /**
+     * Override the rendered HTML tag. Defaults to `'div'`.
+     */
+    as?: ElementType;
+    /**
+     * Utility classes appended to the base. Resolved via `tailwind-merge`.
+     * Common overrides: `sx="rounded-xl overflow-hidden"` to clip the
+     * child's overflow (image bleeds otherwise).
+     */
+    sx?: string;
+}
+//# sourceMappingURL=aspectRatio.types.d.ts.map

package/dist/src/components/AspectRatio/aspectRatio.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspectRatio.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AspectRatio/aspectRatio.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACzD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/src/components/Box/Box.d.ts

@@ -0,0 +1,36 @@
+import type { BoxProps } from './box.types.js';
+/**
+ * `<Box>` — the surface primitive of @dashforge/tw.
+ *
+ * What it IS:
+ *   A polymorphic container with typed surface variants (plain /
+ *   outlined / elevated / soft / solid) × 7 intent colours, plus
+ *   spacing / sizing / rounded / elevation as enumerated token-scale
+ *   props. Replaces MUI's Box + Paper + Card + Surface in one component.
+ *
+ * What it is NOT (deliberate, enforced by the prop set):
+ *   • Not a flex container         → use <Stack>
+ *   • Not a grid container         → use <Grid>
+ *   • Not a paragraph              → use <Typography>
+ *   • Not a button                 → use <Button>
+ *
+ * The "Box is not flex" rule is the spine of the layout layer. Without
+ * it, every `<div>` in an app gravitates back to Box and the surface
+ * vs layout distinction collapses. Box's job is the SURFACE around
+ * content; Stack/Grid's job is the ARRANGEMENT of content. Two
+ * primitives, two responsibilities.
+ *
+ * When BOTH `as` and `asChild` are passed, `asChild` wins. Same rule
+ * as Typography — documented to avoid the dimension-bloat of a
+ * discriminated union over an 11-axis props type.
+ *
+ * Layering:
+ *   • Sits BENEATH every visual chrome — every card, every panel,
+ *     every section background.
+ *   • Composes ON TOP of @dashforge/tw-tokens (color + spacing + radius
+ *     + shadow scales) via the dashforgePreset CSS variables.
+ *   • Pairs with Typography for text content, Stack/Grid for layout
+ *     children inside it.
+ */
+export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Box.d.ts.map

package/dist/src/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,GAAG,kGAyCf,CAAC"}

package/dist/src/components/Box/box.types.d.ts

@@ -0,0 +1,54 @@
+import type { ElementType, HTMLAttributes } from 'react';
+import type { BoxVariants } from './box.variants.js';
+/**
+ * Props for `<Box>` — the surface primitive.
+ *
+ * What lives in props (typed, ergonomic):
+ *   • Surface          — variant, color, elevation, rounded
+ *   • Spacing          — p, px, py, m, mx, my (token-scale steps)
+ *   • Sizing           — fullWidth, fullHeight
+ *   • Polymorphism     — as, asChild
+ *   • Override escape  — sx (utility string, merged via tailwind-merge)
+ *
+ * What does NOT live here (deliberate, see Box.tsx header):
+ *   • display / flex / grid / gap   → use Stack or Grid
+ *   • position / top / z-index      → use sx
+ *   • overflow / cursor             → use sx
+ *   • animation / transition        → use sx
+ *
+ * Native attribute overrides:
+ *   • `className` is omitted in favour of `sx` (string of utilities,
+ *     resolved by tailwind-merge so consumer wins over variant defaults)
+ *     — same convention as Button/TextField/Checkbox/Switch.
+ *   • `color` is omitted: collides with the deprecated HTML4 `color`
+ *     attribute. Our typed `color` (intent) is the right one.
+ */
+export interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'color'>, Pick<BoxVariants, 'variant' | 'color' | 'elevation' | 'rounded' | 'p' | 'px' | 'py' | 'm' | 'mx' | 'my' | 'fullWidth' | 'fullHeight'> {
+    /**
+     * Override the rendered HTML tag. Defaults to `'div'`. Useful when
+     * the surface should also carry semantic meaning — `<Box as="section">`
+     * for a page section, `<Box as="article">` for a card-shaped article.
+     *
+     * Ignored when `asChild` is true.
+     */
+    as?: ElementType;
+    /**
+     * Render via Radix `Slot` — the Box styles paint onto the single
+     * React child instead of wrapping it in our own element. Useful for
+     * `<Box asChild><Link>...</Link></Box>` to get a styled router link
+     * with no extra DOM wrapper.
+     *
+     * Mutually exclusive with `as` (when both are passed, `asChild` wins
+     * — see Box.tsx for the reasoning).
+     */
+    asChild?: boolean;
+    /**
+     * Utility classes appended to the variant chain. Resolved via
+     * `tailwind-merge` so the consumer's classes always win over the
+     * variant defaults. Use for one-off overrides AND for utility
+     * dimensions Box deliberately doesn't expose as props (overflow,
+     * position, animation, etc.).
+     */
+    sx?: string;
+}
+//# sourceMappingURL=box.types.d.ts.map

package/dist/src/components/Box/box.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAC3D,IAAI,CAAC,WAAW,EACd,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAC3C,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GACrC,WAAW,GAAG,YAAY,CAAC;IACvC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/src/components/Box/box.variants.d.ts

@@ -0,0 +1,402 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * `boxVariants` — the surface primitive for @dashforge/tw.
+ *
+ * Architectural choice (planned with the user — F9 deep dive):
+ *
+ *   Box replaces FOUR overlapping concepts from MUI in one component:
+ *     • Box        (typed div)
+ *     • Paper      (surface with elevation)
+ *     • Card       (Paper specialisation)
+ *     • Surface    (Joy UI's outlined / soft / solid / plain variants)
+ *
+ *   The reason for the consolidation: in MUI you have to compose two or
+ *   three of these to express even basic intent ("an outlined card with
+ *   warning tone"). Here, one `<Box variant="outlined" color="warning">`
+ *   says exactly that.
+ *
+ * Variant taxonomy (5 axes, intentionally non-overlapping with Stack/Grid):
+ *
+ *   • plain     — bare div + padding + radius. The escape hatch.
+ *   • outlined  — 1px border + subtle bg tint. The "card lite".
+ *   • elevated  — bg surface + shadow scale (0-5). The "floating panel".
+ *   • soft      — semi-transparent intent bg + intent text. The "callout".
+ *   • solid     — solid intent bg + contrasting text. The "CTA banner".
+ *
+ *   `color` applies to outlined/soft/solid (each gets the 7 intent
+ *   variants). `elevated` is color-agnostic (always neutral surface +
+ *   shadow scale). `plain` is everything-agnostic.
+ *
+ * Spacing axes (p/px/py/m/mx/my): mapped explicitly to the 11 token
+ * steps from @dashforge/tw-tokens (0, 0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24).
+ * Tailwind JIT requires literal class strings — building them dynamically
+ * with template literals would purge them. The verbosity below is the
+ * cost of keeping the bundle CSS-pure and rebuild-free.
+ *
+ * What this does NOT do (deliberate, see component docs):
+ *   • No display / flex / grid props      → use Stack or Grid
+ *   • No position / overflow / z-index    → use `sx`
+ *   • No animation / transition           → use `sx`
+ *
+ * The "Box is not flex" rule is the spine of the layout layer. Without
+ * it, every `<div>` in an app gravitates back to Box and the surface
+ * vs layout distinction collapses — exactly the failure mode this
+ * primitive exists to prevent.
+ */
+export declare const boxVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        plain: string;
+        outlined: string;
+        elevated: string;
+        soft: string;
+        solid: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        neutral: string;
+    };
+    elevation: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    p: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    px: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    py: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    m: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    mx: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    my: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    fullHeight: {
+        true: string;
+    };
+}, undefined, "block", {
+    variant: {
+        plain: string;
+        outlined: string;
+        elevated: string;
+        soft: string;
+        solid: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        neutral: string;
+    };
+    elevation: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    p: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    px: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    py: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    m: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    mx: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    my: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    fullHeight: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        plain: string;
+        outlined: string;
+        elevated: string;
+        soft: string;
+        solid: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        neutral: string;
+    };
+    elevation: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    p: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    px: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    py: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    m: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    mx: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    my: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    fullHeight: {
+        true: string;
+    };
+}, undefined, "block", unknown, unknown, undefined>>;
+export type BoxVariants = VariantProps<typeof boxVariants>;
+//# sourceMappingURL=box.variants.d.ts.map

package/dist/src/components/Box/box.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/box.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAkKtB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/src/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,2GA8DjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,2GAyEjB,CAAC"}

package/dist/src/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA2BzD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDAmK5C"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA2BzD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDA2L5C"}

package/dist/src/components/Container/Container.d.ts

@@ -0,0 +1,35 @@
+import type { ContainerProps } from './container.types.js';
+/**
+ * `<Container>` — centered max-width wrapper for page-level layouts.
+ *
+ * The pattern is universal: every page-root `<div>` in a non-trivial
+ * web app boils down to "mx-auto + max-w-X + responsive horizontal
+ * padding". Container collapses that into a typed prop set so the
+ * decision lives in ONE place per app section (the Container size),
+ * not scattered as utility chains across every page file.
+ *
+ * Default size is `'xl'` (1280px) — comfortable for full app shells
+ * with a left nav + main + optional right rail. Drop to `'lg'` (1024px)
+ * for content-heavy docs/marketing, jump to `'2xl'` (1536px) for wide
+ * dashboards.
+ *
+ * Composition pattern — Container at the page root, Stack/Grid inside:
+ *
+ *   <Container size="lg" as="main">
+ *     <Stack gap={8}>
+ *       <Typography variant="h1">Page title</Typography>
+ *       <Grid container spacing={6}>
+ *         <Grid xs={12} md={6}>...</Grid>
+ *       </Grid>
+ *     </Stack>
+ *   </Container>
+ *
+ * Container handles the page chrome (centered, padded, capped width);
+ * Stack/Grid handle the actual layout of children. Two concerns, two
+ * primitives.
+ *
+ * Polymorphism rule (same as Typography/Box/Stack/Grid): when both
+ * `as` and `asChild` are passed, `asChild` wins.
+ */
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Container.d.ts.map

package/dist/src/components/Container/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/components/Container/Container.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,SAAS,wGAiCrB,CAAC"}

package/dist/src/components/Container/container.types.d.ts

@@ -0,0 +1,41 @@
+import type { ElementType, HTMLAttributes } from 'react';
+import type { ContainerVariants } from './container.variants.js';
+/**
+ * Props for `<Container>` — page-level centered max-width wrapper.
+ *
+ * Use at the page-root level (or section-root) to constrain content
+ * width and apply the canonical responsive horizontal padding ramp.
+ * Compose Stack/Grid INSIDE Container for the actual layout work.
+ *
+ * Native attribute overrides:
+ *   • `className` omitted in favour of `sx` (utility string, merged
+ *     via tailwind-merge — same convention as Box/Stack/Grid/Typography).
+ */
+export interface ContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'>, Pick<ContainerVariants, 'size' | 'px' | 'centerContent'> {
+    /**
+     * Override the rendered HTML tag. Defaults to `'div'`. Use
+     * `as="main"` for the primary content region of a page,
+     * `as="section"` for a named section, `as="article"` for a
+     * self-contained article shell.
+     *
+     * Ignored when `asChild` is true.
+     */
+    as?: ElementType;
+    /**
+     * Render via Radix `Slot` — the Container styles paint onto the
+     * single React child instead of wrapping it. Useful for letting a
+     * router `<main>` element receive the Container chrome without
+     * adding an intermediate `<div>` in the tree.
+     *
+     * Mutually exclusive with `as` (when both are passed, `asChild` wins).
+     */
+    asChild?: boolean;
+    /**
+     * Utility classes appended to the variant chain. Resolved via
+     * `tailwind-merge` so the consumer's classes always win over the
+     * variant defaults — useful for one-off vertical padding (`sx="py-8"`),
+     * custom max-width (`sx="max-w-3xl"`), etc.
+     */
+    sx?: string;
+}
+//# sourceMappingURL=container.types.d.ts.map