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

package/dist/components/alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["React","cx","CircleCheckIcon","CircleXIcon","InfoIcon","TriangleAlertIcon","XIcon","IconButton","AlertTone","AlertProps","Omit","HTMLAttributes","HTMLDivElement","ref","Ref","tone","variant","title","ReactNode","icon","actions","onDismiss","dismissLabel","defaultIcons","Record","info","neutral","success","warning","danger","Alert","t0","$","_c","children","className","props","t1","t2","t3","undefined","urgent","iconNode","t4","t5","t6","t7","t8","t9","t10","t11","t12","_c"],"sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  ref?: React.Ref<HTMLDivElement>;\n  tone?: AlertTone;\n  /** `soft` (tinted, default) or `outline`. */\n  variant?: 'soft' | 'outline';\n  title?: React.ReactNode;\n  /** Custom icon, or `false` to hide it. */\n  icon?: React.ReactNode | false;\n  /** Buttons rendered after the message. */\n  actions?: React.ReactNode;\n  /** Shows a dismiss button. */\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nconst defaultIcons: Record<AlertTone, React.ReactNode> = {\n  info: <InfoIcon />,\n  neutral: <InfoIcon />,\n  success: <CircleCheckIcon />,\n  warning: <TriangleAlertIcon />,\n  danger: <CircleXIcon />,\n};\n\n/** Inline message for page- or section-level feedback. */\nexport function Alert({\n  tone = 'info',\n  variant = 'soft',\n  title,\n  icon,\n  actions,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n  children,\n  ref,\n  ...props\n}: AlertProps) {\n  const urgent = tone === 'danger' || tone === 'warning';\n  const iconNode = icon === false ? null : (icon ?? defaultIcons[tone]);\n  return (\n    <div\n      ref={ref}\n      role={urgent ? 'alert' : 'status'}\n      className={cx('oui-alert', className)}\n      data-tone={tone}\n      data-variant={variant}\n      {...props}\n    >\n      {iconNode && <span className=\"oui-alert__icon\">{iconNode}</span>}\n      <div className=\"oui-alert__body\">\n        {title && <p className=\"oui-alert__title\">{title}</p>}\n        {children && <div className=\"oui-alert__message\">{children}</div>}\n        {actions && <div className=\"oui-alert__actions\">{actions}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton className=\"oui-alert__dismiss\" size=\"sm\" aria-label={dismissLabel} onClick={onDismiss}>\n          <XIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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;