@apollion-dsi/core 5.10.0 → 7.0.0

package/lib/factory/System/System.interface.d.ts

@@ -4,13 +4,15 @@ import { BackgroundFactoryProps } from '../BackgroundFactory';
 import { BorderFactoryProps } from '../BorderFactory';
 import { ColorFactoryProps } from '../ColorFactory';
 import { ContainerFactoryProps } from '../ContainerFactory';
-import { ContainerQueryProps } from '../ContainerQueryFactory';
+import { ContainerQueryProps, LayoutContainerQueryProps } from '../ContainerQueryFactory';
 import { DeepFactoryProps } from '../DeepFactory';
 import { FlexFactoryProps } from '../FlexFactory';
 import { FontFactoryProps } from '../FontFactory';
-import { ResponsiveProps } from '../ResponsiveFactory';
+import { MotionFactoryProps } from '../MotionFactory';
+import { LayoutResponsiveProps, ResponsiveProps } from '../ResponsiveFactory';
 import { SizeFactoryProps } from '../SizeFactory';
 import { SpacingFactoryProps } from '../SpacingFactory';
+import { LayoutViewportMediaProps, ViewportMediaProps } from '../ViewportMediaFactory';
 /**
  * Base element accepted by `styled(...)`.
  *
@@ -20,6 +22,68 @@ import { SpacingFactoryProps } from '../SpacingFactory';
  */
 export type StyledComponent = React.JSX.IntrinsicElements | React.ComponentType<any>;
 export type { Styled };
+/**
+ * The `styled-components` polymorphic props every Apollion styled container
+ * accepts at runtime but that the hand-written prop interfaces omit (they are
+ * added by `styled-components`, not by the native element).
+ *
+ * Exposed so a consumer can annotate a layout object as a container's public
+ * interface (`DefaultFlexInterface`, `DefaultGridInterface`, `CardInterface`,
+ * …) and still set `as` / `forwardedAs` without reaching for
+ * `ComponentProps<typeof X>` or a local augmentation.
+ *
+ * @remarks
+ * `as` is not generic here (it does not re-type the element's native
+ * attributes) — matching the DS's non-generic component contract. Setting
+ * `as="a"` on `Card` also unlocks the anchor attributes through the
+ * component's own props type.
+ */
+export interface PolymorphicProps {
+    /** Render the container as a different element or component (`styled-components` `as`). */
+    as?: React.ElementType;
+    /** Forward the rendered element down a `styled(...)` chain (`styled-components` `forwardedAs`). */
+    forwardedAs?: React.ElementType;
+}
+/**
+ * **Layout** factory group (ADR-028): structure only — spacing (margin/padding),
+ * size (width/height/min·max), and container geometry (position/overflow). No
+ * background, border, elevation, typography, or motion.
+ *
+ * The prop surface shared by the layout primitives `Box` / `Flex` / `Grid`.
+ * Seeing one of those in a tree tells the reader "this arranges things", never
+ * "this is a surface".
+ */
+export interface LayoutFactoryProps extends SpacingFactoryProps, SizeFactoryProps, ContainerFactoryProps {
+}
+/**
+ * **Surface** factory group (ADR-028): the visual chrome a ground carries —
+ * background (`bgColor`), border (style/width/color/radius), and elevation
+ * (`deep`). Added by the surface components `Paper` / `Card` on top of their
+ * layout base; deliberately absent from `Box` / `Flex` / `Grid`.
+ */
+export interface SurfaceFactoryProps extends BackgroundFactoryProps, BorderFactoryProps, DeepFactoryProps {
+}
+/**
+ * Public prop surface of a **layout** container (ADR-028): the layout factory
+ * group plus the three responsive channels **narrowed to the layout set** —
+ * `cq`, `viewportMedias` and the flat `sm_*` prefixes carry only structural
+ * props, so a nested `bgColor` cannot re-enter through a breakpoint object. The
+ * base `Box`/`Flex`/`Grid` build on this.
+ */
+export interface LayoutContainerProps extends LayoutFactoryProps, LayoutResponsiveProps, LayoutContainerQueryProps, LayoutViewportMediaProps {
+}
+/**
+ * Public prop surface of a **surface** container (ADR-028): the layout factory
+ * group plus the surface chrome ({@link SurfaceFactoryProps}: background /
+ * border / elevation), typography (`color` / `font`) and `motion`, with the
+ * three responsive channels at their **full** width — a `Paper`/`Card` may
+ * respond to breakpoint or slot width with `bgColor`/`deep` too, style its own
+ * content's text, and animate. Surfaces are the rich containers; only the pure
+ * layout primitives (`Box`/`Flex`/`Grid`) are narrowed. `Paper`/`Card` build on
+ * this so their `cq`/`viewportMedias`/`sm_*` are not narrowed.
+ */
+export interface SurfaceContainerProps extends LayoutFactoryProps, SurfaceFactoryProps, ColorFactoryProps, FontFactoryProps, MotionFactoryProps, ResponsiveProps, ContainerQueryProps, ViewportMediaProps {
+}
 /**
  * Aggregate type of ALL props accepted by `apollion.*` elements.
  *
@@ -27,8 +91,14 @@ export type { Styled };
  * system (`apollion.div`, `Base`, `Text`, etc.) — they extend this type
  * to expose the full set of visual tokens and responsive variants without
  * having to redeclare each key.
+ *
+ * @internal Engine type. Consumers never import it directly (`./factory` is not
+ * published); they reference a component's own props type (`FlexProps`,
+ * `GridProps`, `CardProps`, …), which already carries this surface. Public
+ * containers narrow to {@link LayoutFactoryProps} / {@link SurfaceFactoryProps}
+ * per ADR-028 rather than exposing this whole engine surface.
  */
-export interface ApollionProps extends SpacingFactoryProps, SizeFactoryProps, ContainerFactoryProps, FontFactoryProps, ColorFactoryProps, BorderFactoryProps, DeepFactoryProps, BackgroundFactoryProps, FlexFactoryProps, ResponsiveProps, ContainerQueryProps {
+export interface ApollionProps extends SpacingFactoryProps, SizeFactoryProps, ContainerFactoryProps, FontFactoryProps, ColorFactoryProps, BorderFactoryProps, DeepFactoryProps, BackgroundFactoryProps, FlexFactoryProps, ResponsiveProps, ContainerQueryProps, ViewportMediaProps, MotionFactoryProps {
 }
 /**
  * Set of HTML tags exposed as shortcuts by the `apollion` object.

package/lib/factory/System/index.esm.js

@@ -1 +1 @@
-import{a,b,c,d}from"../../chunks/chunk-II2LPQYL.esm.js";import"../../chunks/chunk-VMIXRIQ2.esm.js";import"../../chunks/chunk-HCNNXM2C.esm.js";import"../../chunks/chunk-RWLJNXLX.esm.js";import"../../chunks/chunk-F62355HF.esm.js";import"../../chunks/chunk-BNB3KNKE.esm.js";import"../../chunks/chunk-OXQA5WD3.esm.js";import"../../chunks/chunk-TZQMBDGR.esm.js";import"../../chunks/chunk-WCUEINBQ.esm.js";import"../../chunks/chunk-YJ6PPJQ4.esm.js";import"../../chunks/chunk-QYL6LECA.esm.js";import"../../chunks/chunk-3A7I6HM2.esm.js";import"../../chunks/chunk-WI3WPCW3.esm.js";import"../../chunks/chunk-IK5Z5C2R.esm.js";import"../../chunks/chunk-R2B57RMV.esm.js";import"../../chunks/chunk-RFUX53ZX.esm.js";import"../../chunks/chunk-CQASQBD7.esm.js";import"../../chunks/chunk-MREWGN5R.esm.js";import"../../chunks/chunk-PXVTXO3L.esm.js";import"../../chunks/chunk-BV6GHAF7.esm.js";import"../../chunks/chunk-G5Z7USXC.esm.js";import"../../chunks/chunk-AXUWC2WH.esm.js";import"../../chunks/chunk-GZONWSRB.esm.js";export{d as apollion,b as shouldForwardDimensionAttrs,a as shouldForwardProp,c as styled};
+import{a,b,c,d}from"../../chunks/chunk-KKFQPSAE.esm.js";import"../../chunks/chunk-VMIXRIQ2.esm.js";import"../../chunks/chunk-VUFEYXWD.esm.js";import"../../chunks/chunk-SF2QSF7E.esm.js";import"../../chunks/chunk-LCIO2E2K.esm.js";import"../../chunks/chunk-HG4FBLPA.esm.js";import"../../chunks/chunk-RWLJNXLX.esm.js";import"../../chunks/chunk-OHVMP5B7.esm.js";import"../../chunks/chunk-IK5Z5C2R.esm.js";import"../../chunks/chunk-BNB3KNKE.esm.js";import"../../chunks/chunk-OXQA5WD3.esm.js";import"../../chunks/chunk-TZQMBDGR.esm.js";import"../../chunks/chunk-WCUEINBQ.esm.js";import"../../chunks/chunk-YJ6PPJQ4.esm.js";import"../../chunks/chunk-QYL6LECA.esm.js";import"../../chunks/chunk-3A7I6HM2.esm.js";import"../../chunks/chunk-WI3WPCW3.esm.js";import"../../chunks/chunk-R2B57RMV.esm.js";import"../../chunks/chunk-RFUX53ZX.esm.js";import"../../chunks/chunk-CQASQBD7.esm.js";import"../../chunks/chunk-MREWGN5R.esm.js";import"../../chunks/chunk-PXVTXO3L.esm.js";import"../../chunks/chunk-BV6GHAF7.esm.js";import"../../chunks/chunk-G5Z7USXC.esm.js";import"../../chunks/chunk-AXUWC2WH.esm.js";import"../../chunks/chunk-GZONWSRB.esm.js";export{d as apollion,b as shouldForwardDimensionAttrs,a as shouldForwardProp,c as styled};

package/lib/factory/ViewportMediaFactory/ViewportMediaFactory.d.ts

@@ -0,0 +1,25 @@
+import { ViewportMediaProps } from './ViewportMediaFactory.interface';
+import { WithTheme } from '../../themes/ThemeProvider';
+import { CSSObject } from '../../vendors/StyledComponents';
+/**
+ * Prop keys controlled by the `ViewportMediaFactory`.
+ *
+ * Consumed by the `System` to prevent these props from leaking to the DOM.
+ */
+export declare const viewportMediaKeys: Array<keyof ViewportMediaProps>;
+/**
+ * Viewport object-media factory — the viewport sibling of the
+ * `ContainerQueryFactory`: `cq` answers "how wide is my slot", `viewportMedias`
+ * answers "how wide is the viewport" with the same object grammar, replacing
+ * the flat `sm_/md_/lg_/xl_` prefixes with one object per breakpoint.
+ *
+ * For each `theme.breakpoints` key present in `viewportMedias`, emits an
+ * `@media (min-width: …)` block reapplying the shared factory set. Pure CSS,
+ * SSR-inert.
+ *
+ * @example
+ * ```tsx
+ * <Flex viewportMedias={{ md: { display: 'flex', flexDirection: 'row' }, xl: { pb: 'zero' } }} />
+ * ```
+ */
+export declare const ViewportMediaFactory: (customProps: ViewportMediaProps) => (context: WithTheme<ViewportMediaProps>) => CSSObject;

package/lib/factory/ViewportMediaFactory/ViewportMediaFactory.interface.d.ts

@@ -0,0 +1,50 @@
+import { BreakpointTypes } from '../../themes/Breakpoints';
+import { ContainerQueryable, LayoutQueryable } from '../ContainerQueryFactory';
+/**
+ * Prop set accepted inside one `viewportMedias` breakpoint key.
+ *
+ * Deliberately the **same** type as the `cq` channel's
+ * {@link ContainerQueryable} — the two channels reapply an identical factory
+ * surface (Border and `containment` excluded), differing only in the trigger
+ * (viewport vs. container). Reusing the alias also keeps `ApollionProps` under
+ * the styled-components union-complexity ceiling: a second, structurally
+ * distinct big intersection would tip `styled(...)` prop typing over the TS
+ * limit (TS2590).
+ */
+export type ViewportMediaQueryable = ContainerQueryable;
+/**
+ * The `viewportMedias` prop — the **viewport** sibling of `cq`: the same
+ * object grammar, one entry per breakpoint, but triggered by the viewport
+ * (`@media (min-width: theme.breakpoints…)`) instead of the container.
+ *
+ * It answers "how wide is the viewport" for arbitrary factory props, the way
+ * `Grid`'s `medias` does for the grid template and `cq` does for the slot —
+ * replacing the flat `sm_/md_/lg_/xl_` prefix-per-prop channel with one object
+ * per breakpoint. Ascending `min-width`, mobile-first: the base (unprefixed)
+ * props are the narrow-screen style; each breakpoint opts in on top.
+ *
+ * @example
+ * ```tsx
+ * // flat prefixes (one prop per axis):
+ * <Flex md_display="flex" md_flexDirection="row" lg_pb="giant" xl_pb="zero" />
+ *
+ * // viewportMedias (one object per breakpoint):
+ * <Flex viewportMedias={{ md: { display: 'flex', flexDirection: 'row' }, lg: { pb: 'giant' }, xl: { pb: 'zero' } }} />
+ * ```
+ */
+export type ViewportMediaStyles = Partial<Record<BreakpointTypes, ViewportMediaQueryable>>;
+/** Layout-only `viewportMedias` styles (ADR-028) — the surface for `Box`/`Flex`/`Grid`. */
+export type LayoutViewportMediaStyles = Partial<Record<BreakpointTypes, LayoutQueryable>>;
+/** Props consumed by the `ViewportMediaFactory` (full surface — runtime + surface containers). */
+export interface ViewportMediaProps {
+    /**
+     * Viewport-driven styles per `theme.breakpoints` key, object grammar — the
+     * viewport sibling of `cq` (see {@link ViewportMediaStyles}).
+     */
+    viewportMedias?: ViewportMediaStyles;
+}
+/** Layout-only `viewportMedias` prop (ADR-028) for the layout containers. */
+export interface LayoutViewportMediaProps {
+    /** Viewport-driven **layout** styles per `theme.breakpoints` key. */
+    viewportMedias?: LayoutViewportMediaStyles;
+}

package/lib/factory/ViewportMediaFactory/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Public barrel for the `ViewportMediaFactory` module.
+ *
+ * Any other file in the project should import from the barrel, never from
+ * internal paths like `./ViewportMediaFactory.interface`.
+ */
+export * from './ViewportMediaFactory';
+export * from './ViewportMediaFactory.interface';

package/lib/factory/ViewportMediaFactory/index.esm.js

@@ -0,0 +1 @@
+import{a,b}from"../../chunks/chunk-HG4FBLPA.esm.js";import"../../chunks/chunk-IK5Z5C2R.esm.js";import"../../chunks/chunk-BNB3KNKE.esm.js";import"../../chunks/chunk-OXQA5WD3.esm.js";import"../../chunks/chunk-TZQMBDGR.esm.js";import"../../chunks/chunk-WCUEINBQ.esm.js";import"../../chunks/chunk-YJ6PPJQ4.esm.js";import"../../chunks/chunk-QYL6LECA.esm.js";import"../../chunks/chunk-3A7I6HM2.esm.js";import"../../chunks/chunk-WI3WPCW3.esm.js";import"../../chunks/chunk-R2B57RMV.esm.js";import"../../chunks/chunk-RFUX53ZX.esm.js";import"../../chunks/chunk-CQASQBD7.esm.js";import"../../chunks/chunk-MREWGN5R.esm.js";import"../../chunks/chunk-PXVTXO3L.esm.js";import"../../chunks/chunk-BV6GHAF7.esm.js";import"../../chunks/chunk-G5Z7USXC.esm.js";import"../../chunks/chunk-GZONWSRB.esm.js";export{b as ViewportMediaFactory,a as viewportMediaKeys};

package/lib/factory/index.d.ts

@@ -20,5 +20,7 @@ export * from './FlexFactory';
 export * from './SizeFactory';
 export * from './SpacingFactory';
 export * from './ContainerQueryFactory';
+export * from './MotionFactory';
 export * from './ResponsiveFactory';
+export * from './ViewportMediaFactory';
 export * from './System';

package/lib/factory/index.esm.js

@@ -1 +1 @@
-import"../chunks/chunk-PJQ3IZE7.esm.js";import{a as z,b as A,c as B,d as C}from"../chunks/chunk-II2LPQYL.esm.js";import"../chunks/chunk-VMIXRIQ2.esm.js";import{a as y}from"../chunks/chunk-HCNNXM2C.esm.js";import{a as c,b as d,c as e,d as f}from"../chunks/chunk-RWLJNXLX.esm.js";import{a as w,b as x}from"../chunks/chunk-F62355HF.esm.js";import{a as s,b as t}from"../chunks/chunk-BNB3KNKE.esm.js";import{a as u,b as v}from"../chunks/chunk-OXQA5WD3.esm.js";import{a,b}from"../chunks/chunk-TZQMBDGR.esm.js";import{a as g,b as h}from"../chunks/chunk-WCUEINBQ.esm.js";import"../chunks/chunk-YJ6PPJQ4.esm.js";import{a as i,b as j}from"../chunks/chunk-QYL6LECA.esm.js";import{a as k,b as l}from"../chunks/chunk-3A7I6HM2.esm.js";import{a as o,b as p,c as q,d as r}from"../chunks/chunk-WI3WPCW3.esm.js";import{a as m,b as n}from"../chunks/chunk-IK5Z5C2R.esm.js";import"../chunks/chunk-R2B57RMV.esm.js";import"../chunks/chunk-RFUX53ZX.esm.js";import"../chunks/chunk-CQASQBD7.esm.js";import"../chunks/chunk-MREWGN5R.esm.js";import"../chunks/chunk-PXVTXO3L.esm.js";import"../chunks/chunk-BV6GHAF7.esm.js";import"../chunks/chunk-G5Z7USXC.esm.js";import"../chunks/chunk-AXUWC2WH.esm.js";import"../chunks/chunk-GZONWSRB.esm.js";export{b as BackgroundFactory,f as BorderFactory,d as BorderRoundSemantic,e as BorderSemantic,h as ColorFactory,j as ContainerFactory,x as ContainerQueryFactory,l as DeepFactory,r as FlexFactory,n as FontFactory,y as ResponsiveFactory,t as SizeFactory,v as SpacingFactory,q as alignmentCss,C as apollion,a as backgroundKeys,c as borderKeys,g as colorKeys,i as containerKeys,w as containerQueryKeys,k as deepKeys,o as flexKeys,m as fontKeys,p as resolveAlignment,A as shouldForwardDimensionAttrs,z as shouldForwardProp,s as sizeKeys,u as spacingKeys,B as styled};
+import"../chunks/chunk-PMN6TVDW.esm.js";import{a as D,b as E,c as F,d as G}from"../chunks/chunk-KKFQPSAE.esm.js";import"../chunks/chunk-VMIXRIQ2.esm.js";import{a as y,b as z}from"../chunks/chunk-VUFEYXWD.esm.js";import"../chunks/chunk-SF2QSF7E.esm.js";import{a as A}from"../chunks/chunk-LCIO2E2K.esm.js";import{a as B,b as C}from"../chunks/chunk-HG4FBLPA.esm.js";import{a as c,b as d,c as e,d as f}from"../chunks/chunk-RWLJNXLX.esm.js";import{a as w,b as x}from"../chunks/chunk-OHVMP5B7.esm.js";import{a as m,b as n}from"../chunks/chunk-IK5Z5C2R.esm.js";import{a as s,b as t}from"../chunks/chunk-BNB3KNKE.esm.js";import{a as u,b as v}from"../chunks/chunk-OXQA5WD3.esm.js";import{a,b}from"../chunks/chunk-TZQMBDGR.esm.js";import{a as g,b as h}from"../chunks/chunk-WCUEINBQ.esm.js";import"../chunks/chunk-YJ6PPJQ4.esm.js";import{a as i,b as j}from"../chunks/chunk-QYL6LECA.esm.js";import{a as k,b as l}from"../chunks/chunk-3A7I6HM2.esm.js";import{a as o,b as p,c as q,d as r}from"../chunks/chunk-WI3WPCW3.esm.js";import"../chunks/chunk-R2B57RMV.esm.js";import"../chunks/chunk-RFUX53ZX.esm.js";import"../chunks/chunk-CQASQBD7.esm.js";import"../chunks/chunk-MREWGN5R.esm.js";import"../chunks/chunk-PXVTXO3L.esm.js";import"../chunks/chunk-BV6GHAF7.esm.js";import"../chunks/chunk-G5Z7USXC.esm.js";import"../chunks/chunk-AXUWC2WH.esm.js";import"../chunks/chunk-GZONWSRB.esm.js";export{b as BackgroundFactory,f as BorderFactory,d as BorderRoundSemantic,e as BorderSemantic,h as ColorFactory,j as ContainerFactory,x as ContainerQueryFactory,l as DeepFactory,r as FlexFactory,n as FontFactory,z as MotionFactory,A as ResponsiveFactory,t as SizeFactory,v as SpacingFactory,C as ViewportMediaFactory,q as alignmentCss,G as apollion,a as backgroundKeys,c as borderKeys,g as colorKeys,i as containerKeys,w as containerQueryKeys,k as deepKeys,o as flexKeys,m as fontKeys,y as motionKeys,p as resolveAlignment,E as shouldForwardDimensionAttrs,D as shouldForwardProp,s as sizeKeys,u as spacingKeys,F as styled,B as viewportMediaKeys};