create-yoya-ui 0.2.2 → 0.2.3

package/templates/admin/node_modules/@yoyaflow/yoya-ui/types/layout.d.ts

@@ -1,444 +0,0 @@
-import type {
-  ChildInput,
-  ElementFactory,
-  ElementOptions,
-  SetupCallback,
-  SetupInput,
-  StyleValue
-} from './core.js';
-import type { HtmlElementNode } from './html.js';
-
-// ---------------------------------------------------------------------------
-// Layout option types
-// ---------------------------------------------------------------------------
-
-export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export type FlexWrap = boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
-export type Length = string | number;
-
-export interface FlexOptions {
-  align?: string;
-  direction?: FlexDirection;
-  wrap?: FlexWrap;
-  gap?: Length;
-  justify?: string;
-}
-
-export interface GridOptions {
-  gap?: Length;
-  autoFlow?: string;
-  areas?: string;
-  columns?: number | string;
-  rows?: number | string;
-}
-
-export interface ContainerOptions {
-  maxWidth?: Length;
-  padding?: Length;
-  paddingInline?: Length;
-}
-
-export interface SpacerOptions {
-  size?: Length;
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export interface DividerOptions {
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export interface ColProps {
-  span?: number;
-  offset?: number;
-  push?: number;
-  pull?: number;
-}
-
-export type ColBreakpoint = number | ColProps;
-
-export interface ColOptions extends ColProps {
-  gutter?: Length;
-  xs?: ColBreakpoint;
-  sm?: ColBreakpoint;
-  md?: ColBreakpoint;
-  lg?: ColBreakpoint;
-  xl?: ColBreakpoint;
-}
-
-export interface RowOptions {
-  gutter?: Length;
-  align?: string;
-  justify?: string;
-  wrap?: FlexWrap;
-}
-
-export interface ResponsiveGridBreakpoint {
-  minWidth: number | string;
-  columns: number;
-}
-
-export interface ResponsiveGridOptions {
-  gap?: Length;
-  minColumnWidth?: Length;
-  breakpoints?: ResponsiveGridBreakpoint[] | Record<string, number>;
-}
-
-export interface VBodyOptions {
-  background?: string;
-  maxWidth?: Length;
-  padding?: Length;
-  gap?: Length;
-  minHeight?: Length;
-  content?: ChildInput;
-  children?: ChildInput;
-}
-
-export interface ContainerLayoutOptions {
-  direction?: FlexDirection;
-  gap?: Length;
-  viewport?: boolean;
-  fill?: boolean;
-  scrollable?: boolean;
-}
-
-export interface MobileLayoutOptions {
-  align?: string;
-  wrap?: FlexWrap;
-  justify?: string;
-  direction?: FlexDirection;
-  mobileDirection?: FlexDirection;
-  gap?: Length;
-  mobileGap?: Length;
-  breakpoint?: number;
-  asideWidth?: Length;
-  drawer?: boolean;
-  viewport?: boolean;
-  safeArea?: boolean;
-}
-
-export interface RegionOptions {
-  height?: Length;
-  width?: Length;
-  size?: Length;
-}
-
-export type SplitPanelDirection = 'horizontal' | 'vertical';
-
-/** Split panel with a draggable divider. */
-export class VSplitPanel extends HtmlElementNode {
-  direction(): SplitPanelDirection;
-  direction(value: SplitPanelDirection): VSplitPanel;
-  size(): string;
-  size(value: Length): VSplitPanel;
-  minSize(): number;
-  minSize(value: number): VSplitPanel;
-  reset(): VSplitPanel;
-  first(setup: ChildInput | SetupCallback<HtmlElementNode>): VSplitPanel;
-  second(setup: ChildInput | SetupCallback<HtmlElementNode>): VSplitPanel;
-}
-
-// ---------------------------------------------------------------------------
-// Layout node interfaces
-// ---------------------------------------------------------------------------
-
-/** 24-column row container with gutter/justify/align/wrap helpers. */
-export interface VRow extends HtmlElementNode {
-  gutter(): Length | null;
-  gutter(value: Length): VRow;
-  justify(): StyleValue | undefined;
-  justify(value: string): VRow;
-  align(): StyleValue | undefined;
-  align(value: string): VRow;
-  wrap(): StyleValue | undefined;
-  wrap(value: FlexWrap | null): VRow;
-  child(...children: ChildInput[]): this;
-}
-
-/** Responsive 24-column cell: span/offset/push/pull with breakpoints. */
-export interface VCol extends HtmlElementNode {
-  refresh(): VCol;
-  span(): number;
-  span(value: number): VCol;
-  offset(): number;
-  offset(value: number): VCol;
-  push(): number;
-  push(value: number): VCol;
-  pull(): number;
-  pull(value: number): VCol;
-  gutter(): Length | null;
-  gutter(value: Length): VCol;
-}
-
-/** Responsive grid that swaps column counts at breakpoints. */
-export interface ResponsiveGrid extends HtmlElementNode {
-  refresh(): ResponsiveGrid;
-  minColumnWidth(): string;
-  minColumnWidth(value: Length): ResponsiveGrid;
-  breakpoints(): ResponsiveGridBreakpoint[];
-  breakpoints(value: ResponsiveGridBreakpoint[] | Record<string, number>): ResponsiveGrid;
-}
-
-/** Page body shell with themed defaults and a content slot. */
-export interface VBody extends HtmlElementNode {
-  background(): StyleValue | undefined;
-  background(value: string): VBody;
-  maxWidth(): StyleValue | undefined;
-  maxWidth(value: Length): VBody;
-  padding(): StyleValue | undefined;
-  padding(value: Length): VBody;
-  gap(): StyleValue | undefined;
-  gap(value: Length): VBody;
-  minHeight(): StyleValue | undefined;
-  minHeight(value: Length): VBody;
-  content(): HtmlElementNode;
-  content(value: ChildInput | SetupCallback<HtmlElementNode>): VBody;
-  child(...children: ChildInput[]): this;
-}
-
-/** Flex container with viewport/fill/scrollable/direction helpers. */
-export interface VContainer extends HtmlElementNode {
-  viewport(): boolean;
-  viewport(value?: boolean): VContainer;
-  fill(): boolean;
-  fill(value?: boolean): VContainer;
-  scrollable(): boolean;
-  scrollable(value?: boolean): VContainer;
-  direction(): FlexDirection;
-  direction(value: FlexDirection): VContainer;
-  child(...children: ChildInput[]): this;
-}
-
-/** Responsive layout shell with an aside drawer for small screens. */
-export interface MobileLayout extends HtmlElementNode {
-  refresh(): MobileLayout;
-  breakpoint(): number;
-  breakpoint(value: number): MobileLayout;
-  direction(): FlexDirection;
-  direction(desktop: FlexDirection, mobile?: FlexDirection): MobileLayout;
-  mobileDirection(): FlexDirection;
-  mobileDirection(value: FlexDirection): MobileLayout;
-  gap(): Length;
-  gap(desktop: Length, mobile?: Length): MobileLayout;
-  mobileGap(): Length;
-  mobileGap(value: Length): MobileLayout;
-  asideWidth(): Length;
-  asideWidth(value: Length): MobileLayout;
-  viewport(): boolean;
-  viewport(value?: boolean): MobileLayout;
-  safeArea(): boolean;
-  safeArea(value?: boolean): MobileLayout;
-  drawer(): boolean;
-  drawer(value?: boolean): MobileLayout;
-  asideOpen(): boolean;
-  asideOpen(value: boolean): MobileLayout;
-  openAside(): MobileLayout;
-  closeAside(): MobileLayout;
-  toggleAside(): MobileLayout;
-  mobile(): boolean;
-  child(...children: ChildInput[]): this;
-}
-
-/** Sticky header/footer region. */
-export interface VHeader extends HtmlElementNode {
-  sticky(): boolean;
-  sticky(value?: boolean): VHeader;
-}
-
-/** Scrollable aside region. */
-export interface VAside extends HtmlElementNode {
-  scrollable(): boolean;
-  scrollable(value?: boolean): VAside;
-}
-
-/** Main scrollable region. */
-export interface VMain extends HtmlElementNode {
-  scrollable(): boolean;
-  scrollable(value?: boolean): VMain;
-}
-
-/** Sticky footer region. */
-export interface VFooter extends HtmlElementNode {
-  sticky(): boolean;
-  sticky(value?: boolean): VFooter;
-}
-
-/** Spacer with optional size and orientation. */
-export interface Spacer extends HtmlElementNode {
-  size?: Length;
-  orientation?: 'horizontal' | 'vertical';
-}
-
-/** Divider separator. */
-export interface Divider extends HtmlElementNode {
-  orientation?: 'horizontal' | 'vertical';
-}
-
-// ---------------------------------------------------------------------------
-// Factories
-// ---------------------------------------------------------------------------
-
-export interface LayoutFactory<N extends HtmlElementNode, O> extends ElementFactory<N> {
-  (options: O, callback?: SetupCallback<N>): N;
-}
-
-/** Flex container (display: flex). */
-export const flex: LayoutFactory<HtmlElementNode, FlexOptions>;
-/** Column flex stack. */
-export const stack: LayoutFactory<HtmlElementNode, FlexOptions>;
-/** Vertical stack (alias of stack). */
-export const vstack: LayoutFactory<HtmlElementNode, FlexOptions>;
-/** Horizontal stack. */
-export const hstack: LayoutFactory<HtmlElementNode, FlexOptions>;
-/** Centered flex container. */
-export const center: LayoutFactory<HtmlElementNode, FlexOptions>;
-
-/** CSS grid container. */
-export const grid: LayoutFactory<HtmlElementNode, GridOptions>;
-/** Responsive grid with breakpoints. */
-export const responsiveGrid: LayoutFactory<ResponsiveGrid, ResponsiveGridOptions>;
-
-/** 24-column row container. */
-export const vRow: LayoutFactory<VRow, RowOptions>;
-/** 24-column cell with responsive breakpoints. */
-export const vCol: LayoutFactory<VCol, ColOptions>;
-
-/** Page body shell with themed surface defaults. */
-export const vBody: LayoutFactory<VBody, VBodyOptions>;
-/** Creates a vBody page and optionally binds it to a target. */
-export function createVBodyPage(
-  setup?: SetupInput<VBody> | null,
-  target?: string | ParentNode
-): VBody;
-
-/** Max-width centered container. */
-export const container: LayoutFactory<HtmlElementNode, ContainerOptions>;
-/** Flex container with viewport/fill/scrollable helpers. */
-export const vContainer: LayoutFactory<VContainer, ContainerLayoutOptions>;
-
-/** Responsive desktop/mobile layout with aside drawer. */
-export const mobileLayout: LayoutFactory<MobileLayout, MobileLayoutOptions>;
-/** Alias of mobileLayout. */
-export const vMobileLayout: typeof mobileLayout;
-
-/** Header region with sticky support. */
-export const vHeader: LayoutFactory<VHeader, RegionOptions>;
-/** Aside region with scrollable support. */
-export const vAside: LayoutFactory<VAside, RegionOptions>;
-/** Main region with scrollable support. */
-export const vMain: LayoutFactory<VMain, RegionOptions>;
-/** Footer region with sticky support. */
-export const vFooter: LayoutFactory<VFooter, RegionOptions>;
-
-/** Flexible spacer. */
-export const spacer: LayoutFactory<Spacer, SpacerOptions>;
-/** Divider separator. */
-export const divider: LayoutFactory<Divider, DividerOptions>;
-
-/** Split panel with a draggable divider. */
-export const vSplitPanel: ElementFactory<VSplitPanel> & {
-  (first?: SetupInput<VSplitPanel> | null, callback?: SetupCallback<VSplitPanel>): VSplitPanel;
-};
-
-/** Masonry layout built on CSS multi-columns with configurable columns and gap. */
-export class VMasonry extends HtmlElementNode {
-  columns(): number;
-  columns(value: number): VMasonry;
-  gap(): number;
-  gap(value: number): VMasonry;
-  minColumnWidth(): number | null;
-  minColumnWidth(value: number | null): VMasonry;
-}
-
-export const vMasonry: ElementFactory<VMasonry> & {
-  (first?: SetupInput<VMasonry> | null, callback?: SetupCallback<VMasonry>): VMasonry;
-};
-
-// ---------------------------------------------------------------------------
-// Theme shell
-// ---------------------------------------------------------------------------
-
-/**
- * Themed generic container: background, border, radius and text color driven
- * by --yoya-* tokens, with scroll and background-opacity control.
- */
-export class VThemeShell extends HtmlElementNode {
-  /** Virtual mode renders the shell's styles onto its single child instead of its own DOM node. */
-  virtual(next?: boolean): VThemeShell;
-  background(): StyleValue | undefined;
-  background(value: string | null): VThemeShell;
-  backgroundOpacity(alpha: number | string): VThemeShell;
-  radius(): StyleValue | undefined;
-  radius(value: string | number | null): VThemeShell;
-  border(): StyleValue | undefined;
-  border(value: string | null): VThemeShell;
-  borderColor(): StyleValue | undefined;
-  borderColor(value: string | null): VThemeShell;
-  scrollable(next?: boolean): VThemeShell;
-}
-
-/** Creates a themed shell container. */
-export const vThemeShell: ElementFactory<VThemeShell>;
-
-/** Parent-shortcut surface merged onto HtmlElementNode. */
-export interface LayoutParentShortcuts {
-  flex(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  stack(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  vstack(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  hstack(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  center(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  grid(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  responsiveGrid(
-    first?: SetupInput<ResponsiveGrid> | null,
-    callback?: SetupCallback<ResponsiveGrid>
-  ): ResponsiveGrid;
-  vRow(first?: SetupInput<VRow> | null, callback?: SetupCallback<VRow>): VRow;
-  vCol(first?: SetupInput<VCol> | null, callback?: SetupCallback<VCol>): VCol;
-  vBody(first?: SetupInput<VBody> | null, callback?: SetupCallback<VBody>): VBody;
-  container(
-    first?: SetupInput<HtmlElementNode> | null,
-    callback?: SetupCallback<HtmlElementNode>
-  ): HtmlElementNode;
-  vContainer(
-    first?: SetupInput<VContainer> | null,
-    callback?: SetupCallback<VContainer>
-  ): VContainer;
-  mobileLayout(
-    first?: SetupInput<MobileLayout> | null,
-    callback?: SetupCallback<MobileLayout>
-  ): MobileLayout;
-  vMobileLayout(
-    first?: SetupInput<MobileLayout> | null,
-    callback?: SetupCallback<MobileLayout>
-  ): MobileLayout;
-  vHeader(first?: SetupInput<VHeader> | null, callback?: SetupCallback<VHeader>): VHeader;
-  vAside(first?: SetupInput<VAside> | null, callback?: SetupCallback<VAside>): VAside;
-  vMain(first?: SetupInput<VMain> | null, callback?: SetupCallback<VMain>): VMain;
-  vFooter(first?: SetupInput<VFooter> | null, callback?: SetupCallback<VFooter>): VFooter;
-  spacer(first?: SetupInput<Spacer> | null, callback?: SetupCallback<Spacer>): Spacer;
-  divider(first?: SetupInput<Divider> | null, callback?: SetupCallback<Divider>): Divider;
-  vSplitPanel(
-    first?: SetupInput<VSplitPanel> | null,
-    callback?: SetupCallback<VSplitPanel>
-  ): VSplitPanel;
-  vMasonry(first?: SetupInput<VMasonry> | null, callback?: SetupCallback<VMasonry>): VMasonry;
-}
-
-export type { ElementOptions, SetupInput };