@optimum-intelligence/opti-ui 0.0.0-stage → 0.2.0

package/dist/components/app-shell/AppShell.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export type NavbarVariant = 'inverse' | 'surface';
+export type NavbarState = {
+    variant: NavbarVariant;
+    collapsed: boolean;
+    peek: boolean;
+};
+export interface NavbarProps extends useRender.ComponentProps<'nav', NavbarState> {
+    /** `inverse` (brand-colored, default) or `surface` (light panel). */
+    variant?: NavbarVariant;
+    /** Shows a toggle in the top right that shrinks the navbar to an icon rail. Defaults to `true`. */
+    collapsible?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Temporarily opens a collapsed navbar while the mouse is over it. Defaults to `true`. */
+    expandOnHover?: boolean;
+    /** Accessible names for the icon-only toggle. */
+    collapseLabel?: string;
+    expandLabel?: string;
+}
+export declare function Navbar({ variant, collapsible, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, expandOnHover, collapseLabel, expandLabel, render, children, ref, ...props }: NavbarProps): React.JSX.Element;
+export declare const NavbarHeader: {
+    (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare const NavbarFooter: {
+    (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare const NavbarSection: {
+    (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare const NavbarSectionLabel: {
+    (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+export interface NavbarBrandProps extends Omit<useRender.ComponentProps<'div'>, 'title'> {
+    logo?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+}
+export declare function NavbarBrand({ logo, title, subtitle, render, ref, ...props }: NavbarBrandProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export type NavbarItemState = {
+    active: boolean;
+};
+export interface NavbarItemProps extends useRender.ComponentProps<'a', NavbarItemState> {
+    icon?: React.ReactNode;
+    /** Marks the current page (sets aria-current). */
+    active?: boolean;
+    /** Trailing content such as a count badge. */
+    badge?: React.ReactNode;
+}
+/**
+ * Navigation link. Renders an `<a>`; use `render={<Link to="…" />}` for a
+ * router link or `render={<button />}` for an action.
+ */
+export declare function NavbarItem({ icon, active, badge, render, children, ref, ...props }: NavbarItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /** Navbar content (usually a `<Navbar>`). Rendered in a drawer on small screens. */
+    navbar: React.ReactNode;
+    /** Brand shown in the mobile top bar. */
+    mobileBrand?: React.ReactNode;
+    /** Extra content on the right of the mobile top bar. */
+    mobileActions?: React.ReactNode;
+    menuLabel?: string;
+    /** Props for the scrolling `<main>` element. */
+    mainProps?: React.HTMLAttributes<HTMLElement>;
+}
+/**
+ * Full-height layout with a fixed navbar and an internally scrolling main
+ * area. Below 900px the navbar moves into a slide-in drawer.
+ * Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.
+ */
+export declare function AppShell({ navbar, mobileBrand, mobileActions, menuLabel, mainProps, className, children, ref, ...props }: AppShellProps): React.JSX.Element;
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    ref?: React.Ref<HTMLElement>;
+    /** Trail shown above the title, usually `<Breadcrumbs>`. */
+    breadcrumbs?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+export declare function PageHeader({ breadcrumbs, eyebrow, title, description, actions, className, ref, ...props }: PageHeaderProps): React.JSX.Element;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /** Columns on wide screens; collapses to 2 below 1200px (for 4+) and 1 below 900px. */
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: 'sm' | 'md' | 'lg';
+}
+/** Responsive dashboard grid. */
+export declare function Grid({ columns, gap, className, ref, ...props }: GridProps): React.JSX.Element;