@usevyre/react 1.2.0 → 1.3.0

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,184 @@
+/**
+ * @usevyre/react — Layout primitives (Stack, Grid, GridItem, Box)
+ *
+ * AI CONTEXT:
+ * ┌──────────────────────────────────────────────────────────────────┐
+ * │ Components: Stack, Grid, GridItem, Box                             │
+ * │ Import: import { Stack, Grid, GridItem, Box } from "@usevyre/react"│
+ * │                                                                   │
+ * │ USE THESE INSTEAD OF <div style={{ display: "flex" }}>.           │
+ * │ Every spacing value is a design token — never a raw px/rem number.│
+ * │                                                                   │
+ * │ Stack/Grid/Box share width/height (avoids inline width style):    │
+ * │   width|height = "auto"|"full"|"fit"|"screen"                     │
+ * │                  | xs|sm|md|lg|xl|2xl  (fixed rem sizes)          │
+ * │                                                                   │
+ * │ <Stack>  full one-dimensional flex layout                         │
+ * │   direction   = "row"(default)|"column"|"row-reverse"             │
+ * │                 |"column-reverse"                                  │
+ * │   inline      = boolean (display:inline-flex)                      │
+ * │   gap         = token; rowGap / columnGap = token (per-axis)      │
+ * │   align       = items: start|center|end|stretch|baseline          │
+ * │   justify     = content: start|center|end|between|around|evenly   │
+ * │   alignContent= multi-line: start|center|end|stretch|between      │
+ * │                 |around|evenly                                     │
+ * │   alignSelf   = auto|start|center|end|stretch|baseline            │
+ * │   wrap        = "nowrap"(default)|"wrap"|"wrap-reverse"            │
+ * │   grow shrink = number    basis = token|"auto"|"content"|"0"      │
+ * │   as          = any HTML tag (default: "div")                      │
+ * │                                                                   │
+ * │ <Grid>  two-dimensional CSS grid                                  │
+ * │   columns = number (1-12) | "auto-fit" (default: 1)               │
+ * │   rows    = number | "auto"                                        │
+ * │   flow    = "row"|"column"|"dense"|"row-dense"|"column-dense"      │
+ * │   gap / rowGap / columnGap = token                                 │
+ * │   align   = align-items     justify = justify-items               │
+ * │   as      = any HTML tag (default: "div")                          │
+ * │ <GridItem>  child placement                                       │
+ * │   colSpan rowSpan colStart rowStart = number                      │
+ * │                                                                   │
+ * │ <Box>  spacing-only container + controlled escape hatch           │
+ * │   padding  paddingX paddingY                                       │
+ * │   paddingTop paddingRight paddingBottom paddingLeft = token       │
+ * │   margin   marginX  marginY                                        │
+ * │   marginTop marginRight marginBottom marginLeft = token           │
+ * │   (per-side overrides the X/Y/shorthand it belongs to)            │
+ * │   as = any HTML tag (default: "div")                               │
+ * │   style = ANTI-PATTERN escape hatch — prefer tokens.              │
+ * │                                                                   │
+ * │ All render a plain <div> (or `as`) in the browser.                │
+ * └──────────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <Stack direction="column" gap="md" align="center">
+ *   <Avatar src={user.avatar} />
+ *   <Text>{user.name}</Text>
+ * </Stack>
+ *
+ * @example
+ * <Grid columns={3} gap="lg">
+ *   <GridItem colSpan={2}><Card>Wide</Card></GridItem>
+ *   <Card>…</Card>
+ * </Grid>
+ */
+import React from "react";
+/** Semantic spacing scale — maps to --vyre-spacing-* tokens. */
+export type SpaceToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type StackDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type StackWrap = "nowrap" | "wrap" | "wrap-reverse";
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export type StackAlignContent = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly";
+export type StackAlignSelf = "auto" | "start" | "center" | "end" | "stretch" | "baseline";
+export type StackBasis = SpaceToken | "auto" | "content" | "0";
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export type GridFlow = "row" | "column" | "dense" | "row-dense" | "column-dense";
+export type GridColumns = number | "auto-fit";
+/**
+ * Sizing scale for width / height.
+ * - Keywords: "auto" | "full" (100%) | "fit" (fit-content) | "screen"
+ *   (100vw for width, 100vh for height)
+ * - Token sizes (fixed rem): xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42
+ */
+export type SizeToken = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface SizingProps {
+    /** Width — keyword or token size. Avoids an inline width style. */
+    width?: SizeToken;
+    /** Height — keyword or token size. Avoids an inline height style. */
+    height?: SizeToken;
+}
+type PolymorphicProps<P> = P & {
+    /** HTML element to render. Always a real DOM element in the browser. */
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+    /**
+     * Inline styles. Prefer the token props above; use this only for values
+     * the design system genuinely cannot express. Flagged as an anti-pattern
+     * by @usevyre/eslint-plugin (no-inline-layout-styles).
+     */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+export interface StackProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>>, SizingProps {
+    /** Main axis direction (flex-direction) */
+    direction?: StackDirection;
+    /** Render as inline-flex instead of flex */
+    inline?: boolean;
+    /** Space between children — design token */
+    gap?: SpaceToken;
+    /** Row gap override — design token */
+    rowGap?: SpaceToken;
+    /** Column gap override — design token */
+    columnGap?: SpaceToken;
+    /** Cross-axis alignment of items (align-items) */
+    align?: StackAlign;
+    /** Main-axis distribution (justify-content) */
+    justify?: StackJustify;
+    /** Multi-line cross-axis distribution (align-content) */
+    alignContent?: StackAlignContent;
+    /** This element's own cross-axis alignment (align-self) */
+    alignSelf?: StackAlignSelf;
+    /** Wrapping behaviour (flex-wrap). `true` is treated as "wrap". */
+    wrap?: StackWrap | boolean;
+    /** flex-grow */
+    grow?: number;
+    /** flex-shrink */
+    shrink?: number;
+    /** flex-basis — token, "auto", "content", or "0" */
+    basis?: StackBasis;
+}
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
+export interface GridProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>>, SizingProps {
+    /** Number of equal columns (1–12) or responsive "auto-fit" */
+    columns?: GridColumns;
+    /** Explicit row count, or "auto" */
+    rows?: number | "auto";
+    /** Auto-placement flow (grid-auto-flow) */
+    flow?: GridFlow;
+    /** Space between cells — design token */
+    gap?: SpaceToken;
+    /** Row gap override — design token */
+    rowGap?: SpaceToken;
+    /** Column gap override — design token */
+    columnGap?: SpaceToken;
+    /** Cross-axis alignment of cells (align-items) */
+    align?: GridAlign;
+    /** Inline-axis alignment of cells (justify-items) */
+    justify?: GridAlign;
+}
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+export interface GridItemProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
+    /** Number of columns this item spans */
+    colSpan?: number;
+    /** Number of rows this item spans */
+    rowSpan?: number;
+    /** 1-based column line this item starts at */
+    colStart?: number;
+    /** 1-based row line this item starts at */
+    rowStart?: number;
+}
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLElement>>;
+export interface BoxProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>>, SizingProps {
+    /** Inner spacing (all sides) — design token */
+    padding?: SpaceToken;
+    /** Inner spacing left+right — design token */
+    paddingX?: SpaceToken;
+    /** Inner spacing top+bottom — design token */
+    paddingY?: SpaceToken;
+    paddingTop?: SpaceToken;
+    paddingRight?: SpaceToken;
+    paddingBottom?: SpaceToken;
+    paddingLeft?: SpaceToken;
+    /** Outer spacing (all sides) — design token */
+    margin?: SpaceToken;
+    /** Outer spacing left+right — design token */
+    marginX?: SpaceToken;
+    /** Outer spacing top+bottom — design token */
+    marginY?: SpaceToken;
+    marginTop?: SpaceToken;
+    marginRight?: SpaceToken;
+    marginBottom?: SpaceToken;
+    marginLeft?: SpaceToken;
+}
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Sidebar/Sidebar.d.ts

@@ -38,6 +38,12 @@
  * │   badge   = string | number                                 │
  * │   href    = string                                          │
  * │   onClick = () => void                                      │
+ * │                                                              │
+ * │ SidebarTrigger props (all optional):                         │
+ * │   icon          = ReactNode (shown when expanded;           │
+ * │                   default = built-in menu icon)             │
+ * │   collapsedIcon = ReactNode (shown when collapsed;          │
+ * │                   falls back to icon)                       │
  * └──────────────────────────────────────────────────────────────┘
  *
  * @example
@@ -130,6 +136,10 @@ export interface AppBarProps {
 export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<HTMLElement>>;
 export interface SidebarTriggerProps {
     className?: string;
+    /** Icon shown when the sidebar is expanded. Defaults to the built-in menu icon. */
+    icon?: React.ReactNode;
+    /** Icon shown when the sidebar is collapsed. Falls back to `icon`, then the built-in icon. */
+    collapsedIcon?: React.ReactNode;
 }
 export declare const SidebarTrigger: React.FC<SidebarTriggerProps>;
 export interface PageContentProps {