@acronis-platform/ui-react 2.0.0 → 3.0.0

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/components/ui/accordion-container/accordion-container.d.ts

@@ -0,0 +1,44 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+import * as React from 'react';
+interface AccordionContainerState {
+    open: boolean;
+}
+type AccordionContainerChildren = React.ReactNode | ((state: AccordionContainerState) => React.ReactNode);
+type AccordionContainerBaseProps = Omit<React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>, 'children'>;
+interface AccordionContainerProps extends AccordionContainerBaseProps {
+    /**
+     * Whether the disclosure exists at all. When `false`, `children` render
+     * directly with no trigger and no panel wrapper — the Figma
+     * `isCollapsable=false` state has no disclosure UI.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Accepts a plain node, or a render-prop function receiving the current
+     * `{ open }` state — for content outside `AccordionContainer.Content` (e.g.
+     * a header) that still needs to know whether the panel is expanded, even
+     * when this component owns the open state itself (uncontrolled).
+     */
+    children?: AccordionContainerChildren;
+}
+interface AccordionContainerContextValue {
+    collapsible: boolean;
+    open: boolean;
+}
+/**
+ * Reads whether the nearest `AccordionContainer` ancestor is `collapsible`
+ * and, if so, its current `open` state — for content outside
+ * `AccordionContainer.Content` (e.g. a header) that needs to react to the
+ * panel's state without a dedicated prop, such as `CardHeader` dropping its
+ * bottom divider while collapsed.
+ */
+declare const useAccordionContainerContext: () => AccordionContainerContextValue;
+type AccordionContainerTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
+declare const AccordionContainerTrigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type AccordionContainerContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>;
+declare const AccordionContainerContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionContainerRoot: React.ForwardRefExoticComponent<AccordionContainerProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { AccordionContainerRoot as AccordionContainer, AccordionContainerTrigger, AccordionContainerContent, useAccordionContainerContext, type AccordionContainerProps, type AccordionContainerTriggerProps, type AccordionContainerContentProps, type AccordionContainerState, type AccordionContainerContextValue, };

package/dist/src/components/ui/accordion-container/index.d.ts

@@ -0,0 +1 @@
+export { AccordionContainer, AccordionContainerTrigger, AccordionContainerContent, useAccordionContainerContext, type AccordionContainerProps, type AccordionContainerTriggerProps, type AccordionContainerContentProps, type AccordionContainerState, type AccordionContainerContextValue, } from './accordion-container';

package/dist/src/components/ui/avatar/avatar.d.ts

@@ -4,19 +4,38 @@ import * as React from 'react';
 declare const avatarVariants: (props?: ({
     color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
-}
-/**
- * A user/entity avatar: a colored circle showing an image or initials. Compose
- * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.
- */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
 /** The avatar image; hidden by Base UI until it loads, revealing the fallback. */
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
 /** Shown when there's no image (or it fails) — typically the user's initials. */
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    /**
+     * Selects the auto-rendered fallback content when no `children` are
+     * composed: initials (`label`) or an `icon`. Ignored once `children` (e.g.
+     * `AvatarImage`/`AvatarFallback`) are composed directly — including an
+     * explicit `null`, which renders an empty circle.
+     */
+    variant?: 'text' | 'icon';
+    /**
+     * Initials shown for the `text` variant when no `children` are composed
+     * (i.e. `children` is `undefined`).
+     */
+    label?: string;
+    /**
+     * Icon shown for the `icon` variant when no `children` are composed
+     * (i.e. `children` is `undefined`).
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * A user/entity avatar: a colored circle showing an image, initials, or an
+ * icon. Compose `AvatarImage`/`AvatarFallback` for the photo-with-fallback
+ * case, or use `variant`/`label`/`icon` for a quick text or icon badge; stack
+ * several in `AvatarGroup`.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * Overlapping stack of avatars. Each avatar after the first is pulled left by

package/dist/src/components/ui/button/button.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "ghost" | "secondary" | "default" | "destructive" | "ai" | null | undefined;
+    variant?: "default" | "ghost" | "secondary" | "destructive" | "ai" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**

package/dist/src/components/ui/card/card.d.ts

@@ -1,17 +1,78 @@
 import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {
+declare const cardVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /**
      * Replace the rendered `<div>` with another element or component (Base UI
-     * composition) — e.g. render `CardTitle` as a heading. The component's props
-     * and class names are merged onto it.
+     * composition) — e.g. render `Card` as an `<article>`.
+     */
+    render?: useRender.RenderProp;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The card's title. Renders nothing when omitted. */
+    title?: string;
+    /** Helper text shown under the title; only rendered when `hasDescription`. */
+    description?: string;
+    /** Shows `description` below the title. */
+    hasDescription?: boolean;
+    /** Shows a drag handle at the start of the header, for reorderable lists. */
+    isDraggable?: boolean;
+    /** Accessible label for the drag handle. */
+    dragHandleLabel?: string;
+    /** Shows a toggle switch at the start of the header. */
+    isSwitchable?: boolean;
+    /** Controlled checked state of the header switch. */
+    switchChecked?: boolean;
+    /** Uncontrolled initial checked state of the header switch. */
+    defaultSwitchChecked?: boolean;
+    /** Fires when the header switch is toggled. */
+    onSwitchCheckedChange?: (checked: boolean) => void;
+    /** Disables the header switch. */
+    switchDisabled?: boolean;
+    /** Accessible label for the header switch. */
+    switchLabel?: string;
+    /** Shows an avatar before the title. */
+    hasAvatar?: boolean;
+    /** Initials shown in the default avatar; ignored if `avatar` is provided. */
+    avatarLabel?: string;
+    /** Replaces the default initials avatar with custom content. */
+    avatar?: React.ReactNode;
+    /** Shows a rename button next to the title. */
+    hasRename?: boolean;
+    /** Fires when the rename button is activated. */
+    onRename?: () => void;
+    /** Accessible label for the rename button. */
+    renameLabel?: string;
+    /** Extra content rendered inline next to the title (e.g. a tag or badge). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the header (e.g. a menu button). */
+    actions?: React.ReactNode;
+    /**
+     * Shows a disclosure trigger at the end of the header. Only has an effect
+     * when this header renders inside a collapsible `AccordionContainer` —
+     * see the collapsible composition example.
+     */
+    isCollapsible?: boolean;
+    /** Accessible label for the collapse trigger. */
+    collapseLabel?: string;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
      */
     render?: useRender.RenderProp;
 }
-declare const Card: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardHeader: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardTitle: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardDescription: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardPartProps, };
+export { Card, CardHeader, CardContent, CardFooter, cardVariants };

package/dist/src/components/ui/card/index.d.ts

@@ -1 +1 @@
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardPartProps, } from './card';
+export { Card, CardHeader, CardContent, CardFooter, cardVariants, type CardProps, type CardHeaderProps, type CardPartProps, } from './card';

package/dist/src/components/ui/card-section/card-section.d.ts

@@ -0,0 +1,50 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardSectionVariants: (props?: ({
+    variant?: "slot" | "list" | "tag" | "table-actions" | "card-primary" | "card-secondary" | null | undefined;
+    hasBottomBorder?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardSectionBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'>, VariantProps<typeof cardSectionVariants> {
+    /** Extra content rendered inline next to the section title (e.g. a tag). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the section header row (e.g. a menu button). */
+    actions?: React.ReactNode;
+    /** Body of the `slot` variant — arbitrary passthrough content. */
+    content?: React.ReactNode;
+    /**
+     * Body of the `tag` variant — a wrapping row of tags. Has no built-in
+     * default: like `contentList`, the consumer supplies the tags.
+     */
+    contentTag?: React.ReactNode;
+    /**
+     * Body of the `list` variant — title/description key-value rows. Has no
+     * built-in default: the `ListItem` tokens the design references
+     * (`--ui-card-body-section-item-*`) do not exist in tokens-pd yet.
+     */
+    contentList?: React.ReactNode;
+    /** Body of the `table-actions` variant — a table with row actions. */
+    contentTable?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition) — e.g. render the section as a `<section>`.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * A band of content stacked inside a `Card`'s body.
+ *
+ * `hasHeader` and `title` form a discriminated union: turning the section's own
+ * mini-header on requires a title, because the header row always renders one.
+ */
+export type CardSectionProps = CardSectionBaseProps & ({
+    /** Shows the section's own mini-header row (14px, distinct from `CardHeader`). */
+    hasHeader: true;
+    /** The section header's title. Required whenever `hasHeader` is set. */
+    title: string;
+} | {
+    hasHeader?: false;
+    title?: never;
+});
+declare const CardSection: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export { CardSection, cardSectionVariants };

package/dist/src/components/ui/card-section/index.d.ts

@@ -0,0 +1 @@
+export { CardSection, cardSectionVariants, type CardSectionProps, type CardSectionBaseProps, } from './card-section';

package/dist/src/components/ui/dialog/dialog.d.ts

@@ -2,7 +2,7 @@ import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "large" | null | undefined;
+    size?: "large" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const DialogRoot: typeof DialogPrimitive.Root;
 declare const DialogTrigger: DialogPrimitive.Trigger;

package/dist/src/components/ui/empty-overlay/empty-overlay.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const emptyOverlayIconVariants: (props?: ({
+    color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface EmptyOverlayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color' | 'children'>, VariantProps<typeof emptyOverlayIconVariants> {
+    /** Icon rendered in the colored badge (e.g. an `icons-react` glyph at 24px). */
+    icon?: React.ReactNode;
+    /** The empty-state headline. */
+    title: React.ReactNode;
+    /** Supporting copy shown under the title. */
+    description?: React.ReactNode;
+}
+/**
+ * A full-bleed empty-state overlay: a colored icon badge over a centered
+ * title/description, on a fade-to-solid backdrop. Size it via the parent
+ * (e.g. `absolute inset-0`) — the component fills whatever box it's given.
+ */
+declare const EmptyOverlay: React.ForwardRefExoticComponent<EmptyOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyOverlay, emptyOverlayIconVariants };

package/dist/src/components/ui/empty-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyOverlay, emptyOverlayIconVariants } from './empty-overlay';
+export type { EmptyOverlayProps } from './empty-overlay';

package/dist/src/components/ui/grid/grid.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const gridVariants: (props?: ({
-    cols?: 1 | 2 | 6 | 3 | 4 | 12 | null | undefined;
+    cols?: 1 | 2 | 3 | 6 | 4 | 12 | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {

package/dist/src/components/ui/sheet/sheet.d.ts

@@ -2,7 +2,7 @@ import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const sheetVariants: (props?: ({
-    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const Sheet: typeof DialogPrimitive.Root;
 declare const SheetTrigger: DialogPrimitive.Trigger;

package/dist/src/components/ui/stack/stack.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+    align?: "center" | "end" | "stretch" | "start" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ export * from './hooks';
 export * from './lib/breakpoints';
 export { PortalContainerProvider, usePortalContainer, type PortalContainerProviderProps, } from './lib/portal-container';
 export * from './components/ui/accordion';
+export * from './components/ui/accordion-container';
 export * from './components/ui/alert';
 export * from './components/ui/app-shell';
 export * from './components/ui/app-shell-chat';
@@ -18,6 +19,7 @@ export * from './components/ui/calendar';
 export * from './components/ui/calendar-panel';
 export * from './components/ui/card';
 export * from './components/ui/card-filter';
+export * from './components/ui/card-section';
 export * from './components/ui/category-bar';
 export * from './components/ui/chart';
 export * from './components/ui/chart-state';
@@ -36,6 +38,7 @@ export * from './components/ui/dialog-footer-default';
 export * from './components/ui/dialog-welcome';
 export * from './components/ui/dropdown-menu';
 export * from './components/ui/empty';
+export * from './components/ui/empty-overlay';
 export * from './components/ui/field';
 export * from './components/ui/fitted-actions';
 export * from './components/ui/filter-cards';