@iris-ui-kit/vue 0.1.0

package/dist/layouts.d.cts

@@ -0,0 +1,406 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+/**
+ * Two-column layout with a collapsible sidebar.
+ *
+ * Slots:
+ *   - `sidebar` — content rendered in the sidebar (kept mounted across collapses).
+ *   - `default` — the main content area.
+ *
+ * Use `:collapsed` for controlled mode or `:default-collapsed` for the
+ * uncontrolled initial state. When collapsed, the sidebar shrinks to
+ * `:collapsed-width` so icon-only navigation still fits.
+ */
+declare const IrisSidebarLayout: vue.DefineComponent<vue.ExtractPropTypes<{
+    collapsed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sidebar width when expanded (px or CSS length). */
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar width when collapsed. */
+    collapsedWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar position. */
+    side: {
+        type: () => "left" | "right";
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:collapsed': (_value: boolean) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    collapsed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sidebar width when expanded (px or CSS length). */
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar width when collapsed. */
+    collapsedWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar position. */
+    side: {
+        type: () => "left" | "right";
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:collapsed"?: ((_value: boolean) => any) | undefined;
+}>, {
+    collapsed: boolean;
+    defaultCollapsed: boolean;
+    width: string | number;
+    collapsedWidth: string | number;
+    side: "left" | "right";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Two-region vertical layout: a sticky header on top, scrollable main below.
+ *
+ * Slots:
+ *   - `header` — fixed at top.
+ *   - `footer` — optional fixed at bottom.
+ *   - `default` — scrollable main region.
+ */
+declare const IrisHeaderLayout: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** When true, header sticks via `position: sticky` instead of static. */
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** When true, header sticks via `position: sticky` instead of static. */
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    headerHeight: string | number;
+    footerHeight: string | number;
+    sticky: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * 12-column responsive grid for dashboard composition. Each child should be
+ * an `IrisDashboardCard` (or any element with `grid-column: span N`).
+ *
+ * Children control their span via inline `style="grid-column: span N"` or
+ * by wrapping with `IrisDashboardCard` whose `col-span` / `row-span` props
+ * compile to the same CSS.
+ */
+declare const IrisDashboardGrid: vue.DefineComponent<vue.ExtractPropTypes<{
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Minimum column width via `grid-template-columns: repeat(auto-fill, minmax(...))`. */
+    minColWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Minimum column width via `grid-template-columns: repeat(auto-fill, minmax(...))`. */
+    minColWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    gap: string | number;
+    columns: number;
+    minColWidth: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * A single grid cell — wraps content in a styled card with optional span
+ * controls. `col-span` accepts a number (column count) or `'full'` to fill
+ * the entire row.
+ */
+declare const IrisDashboardCard: vue.DefineComponent<vue.ExtractPropTypes<{
+    colSpan: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rowSpan: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Show a styled card surface (background + border). Default `true`. */
+    surface: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    colSpan: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rowSpan: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Show a styled card surface (background + border). Default `true`. */
+    surface: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    colSpan: string | number;
+    rowSpan: number;
+    surface: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type IrisStackDirection = 'row' | 'column';
+type IrisStackAlign = 'start' | 'center' | 'end' | 'stretch';
+type IrisStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Flex container with token-driven spacing. The lightest possible layout
+ * primitive — most pages need a horizontal or vertical stack and this saves
+ * hand-writing `display: flex` everywhere.
+ *
+ * Use `direction`/`spacing`/`align`/`justify`/`wrap` to configure; children
+ * are arranged in document order with `gap: <spacing>`.
+ */
+declare const IrisStack: vue.DefineComponent<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<IrisStackDirection>;
+        default: string;
+    };
+    spacing: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    align: {
+        type: PropType<IrisStackAlign>;
+        default: string;
+    };
+    justify: {
+        type: PropType<IrisStackJustify>;
+        default: string;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When true, renders as an inline-flex container. */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<IrisStackDirection>;
+        default: string;
+    };
+    spacing: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    align: {
+        type: PropType<IrisStackAlign>;
+        default: string;
+    };
+    justify: {
+        type: PropType<IrisStackJustify>;
+        default: string;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When true, renders as an inline-flex container. */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    spacing: string | number;
+    inline: boolean;
+    wrap: boolean;
+    justify: IrisStackJustify;
+    direction: IrisStackDirection;
+    align: IrisStackAlign;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type IrisContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+/**
+ * Centered max-width wrapper. Use to bound content width on large screens
+ * without rewriting flex/grid plumbing.
+ *
+ * `maxWidth='lg'` (≈1024px) is the most common default for marketing /
+ * docs / app pages.
+ */
+declare const IrisContainer: vue.DefineComponent<vue.ExtractPropTypes<{
+    maxWidth: {
+        type: PropType<IrisContainerMaxWidth>;
+        default: string;
+    };
+    padding: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    maxWidth: {
+        type: PropType<IrisContainerMaxWidth>;
+        default: string;
+    };
+    padding: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    center: boolean;
+    padding: string | number;
+    maxWidth: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type IrisGridColumns = number | 'auto-fit' | 'auto-fill' | string;
+/**
+ * Two-dimensional grid layout primitive. Three column modes:
+ *
+ *   - **Fixed integer** — `columns={3}` → three equal-width columns.
+ *   - **Responsive auto-fit** — `columns="auto-fit"` + `minColWidth` → fluid
+ *     grid where columns add/remove with container width. Most common.
+ *   - **Raw CSS** — pass any `grid-template-columns` string.
+ *
+ * Spacing accepts token shorthand (`sm` / `md` / `lg`), numeric px, or any
+ * CSS length string. `gap` is a shortcut for both row + column gap.
+ */
+declare const IrisGrid: vue.DefineComponent<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<IrisGridColumns>;
+        default: string;
+    };
+    /** Min width per column for `auto-fit` / `auto-fill`. */
+    minColWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Row gap (token / px / CSS). */
+    rowGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Column gap (token / px / CSS). */
+    columnGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<IrisGridColumns>;
+        default: string;
+    };
+    /** Min width per column for `auto-fit` / `auto-fill`. */
+    minColWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Row gap (token / px / CSS). */
+    rowGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Column gap (token / px / CSS). */
+    columnGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    gap: string | number;
+    inline: boolean;
+    columns: IrisGridColumns;
+    minColWidth: string;
+    rowGap: string | number;
+    columnGap: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { IrisContainer, type IrisContainerMaxWidth, IrisDashboardCard, IrisDashboardGrid, IrisGrid, type IrisGridColumns, IrisHeaderLayout, IrisSidebarLayout, IrisStack, type IrisStackAlign, type IrisStackDirection, type IrisStackJustify };