@apollion-dsi/core 6.0.0 → 7.1.0

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-CK3WBMQQ.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-XTY6DXMK.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

@@ -22,4 +22,6 @@ export * from './SpacingFactory';
 export * from './ContainerQueryFactory';
 export * from './MotionFactory';
 export * from './ResponsiveFactory';
+export * from './ViewportMediaFactory';
+export * from './PlacementFactory';
 export * from './System';

package/lib/factory/index.esm.js

@@ -1 +1 @@
-import"../chunks/chunk-AIUT47H7.esm.js";import{a as B,b as C,c as D,d as E}from"../chunks/chunk-TOLIKUNQ.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-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,z as MotionFactory,A as ResponsiveFactory,t as SizeFactory,v as SpacingFactory,q as alignmentCss,E 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,C as shouldForwardDimensionAttrs,B as shouldForwardProp,s as sizeKeys,u as spacingKeys,D as styled};
+import"../chunks/chunk-MPMCXGOX.esm.js";import{a as E,b as F}from"../chunks/chunk-TBHGVERY.esm.js";import{a as G,b as H,c as I,d as J}from"../chunks/chunk-62CVSGJD.esm.js";import"../chunks/chunk-VMIXRIQ2.esm.js";import{a as z,b as A}from"../chunks/chunk-VUFEYXWD.esm.js";import"../chunks/chunk-SF2QSF7E.esm.js";import{a as B}from"../chunks/chunk-MBQGF5IM.esm.js";import{a as C,b as D}from"../chunks/chunk-CK3WBMQQ.esm.js";import{a as c,b as d,c as e,d as f}from"../chunks/chunk-RWLJNXLX.esm.js";import{a as x,b as y}from"../chunks/chunk-RZLOZ3NW.esm.js";import{a as m,b as n}from"../chunks/chunk-IK5Z5C2R.esm.js";import{a as t,b as u}from"../chunks/chunk-BNB3KNKE.esm.js";import{a as v,b as w}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,e as s}from"../chunks/chunk-XTY6DXMK.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,y as ContainerQueryFactory,l as DeepFactory,s as FlexFactory,n as FontFactory,A as MotionFactory,E as PlacementFactory,B as ResponsiveFactory,u as SizeFactory,w as SpacingFactory,D as ViewportMediaFactory,r as alignSelfMap,q as alignmentCss,J as apollion,a as backgroundKeys,c as borderKeys,g as colorKeys,i as containerKeys,x as containerQueryKeys,k as deepKeys,o as flexKeys,m as fontKeys,z as motionKeys,F as placementKeys,p as resolveAlignment,H as shouldForwardDimensionAttrs,G as shouldForwardProp,t as sizeKeys,v as spacingKeys,I as styled,C as viewportMediaKeys};

package/lib/form/Checkbox/Checkbox.d.ts

@@ -19,6 +19,6 @@ import { CheckboxInterface } from './Checkbox.interface';
  * @see {@link CheckboxInterface} for the detailed props.
  */
 export declare const CheckboxComponent: {
-    ({ label, labelProps, variant, color, ...rest }: CheckboxInterface): import("react/jsx-runtime").JSX.Element;
+    ({ label, labelProps, variant, color, area, alignSelf, justifySelf, ...rest }: CheckboxInterface): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/form/Checkbox/Checkbox.interface.d.ts

@@ -1,5 +1,6 @@
 import type { ControlColor } from './Checkbox.style';
 import { TextInterface } from '../../elements/Text';
+import { PlacementFactoryProps } from '../../factory';
 import { Theme } from '../../themes';
 import { DefaultInputInterface } from '../Input';
 /**
@@ -15,7 +16,7 @@ import { DefaultInputInterface } from '../Input';
  * <Checkbox name="custom" label={<strong>Texto em negrito</strong>} />
  * ```
  */
-export interface CheckboxInterface extends DefaultInputInterface {
+export interface CheckboxInterface extends DefaultInputInterface, PlacementFactoryProps {
     /**
      * Interaction palette of the checked state (fill / ring / ink). Defaults
      * to the brand `primary`, like `Button` and `Tabs`. `variant` (`success` /