@exegia/corpora-ui 0.9.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-lib/components/agents/ai-sidebar.d.ts +2 -0
- package/dist-lib/components/agents/index.d.ts +12 -0
- package/dist-lib/components/agents/marquee-label.d.ts +4 -0
- package/dist-lib/components/agents/sidebar-icon.d.ts +2 -0
- package/dist-lib/components/agents/sidebar-row.d.ts +2 -0
- package/dist-lib/components/agents/type.d.ts +77 -0
- package/dist-lib/components/agents/use-ai-sidebar.d.ts +31 -0
- package/dist-lib/components/agents/utils.d.ts +16 -0
- package/dist-lib/components/beste/piece/browser-frame.d.ts +2 -0
- package/dist-lib/components/beste/piece/type.d.ts +9 -0
- package/dist-lib/components/beste/piece/utils.d.ts +3 -0
- package/dist-lib/components/blocks/auth/linked-accounts-block.d.ts +7 -1
- package/dist-lib/components/blocks/auth/signup-block.d.ts +5 -5
- package/dist-lib/components/blocks/nav/sidebar-block.d.ts +3 -56
- package/dist-lib/components/blocks/nav/sidebar-nav-row.d.ts +3 -0
- package/dist-lib/components/blocks/nav/types.d.ts +60 -0
- package/dist-lib/components/blocks/nav/utils.d.ts +1 -0
- package/dist-lib/components/blocks/profile/profile-card-block.d.ts +6 -1
- package/dist-lib/components/blocks/shell/index.d.ts +1 -0
- package/dist-lib/components/blocks/shell/shell-layout.d.ts +3 -0
- package/dist-lib/components/blocks/shell/type.d.ts +26 -0
- package/dist-lib/components/blocks/shell/utils.d.ts +1 -0
- package/dist-lib/components/composed/social-providers.d.ts +9 -1
- package/dist-lib/components/docs/demo-controls.d.ts +4 -4
- package/dist-lib/components/motion/animated-sidebar.d.ts +12 -1
- package/dist-lib/components/motion/popover-morph.d.ts +35 -0
- package/dist-lib/components/motion/popover-position.d.ts +15 -0
- package/dist-lib/components/ui/badge.d.ts +7 -0
- package/dist-lib/components/ui/select.d.ts +30 -0
- package/dist-lib/index.d.ts +1 -0
- package/dist-lib/index.js +669 -549
- package/dist-lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/agents/ai-sidebar.tsx +116 -0
- package/src/components/agents/index.ts +14 -0
- package/src/components/agents/marquee-label.tsx +59 -0
- package/src/components/agents/sidebar-icon.tsx +14 -0
- package/src/components/agents/sidebar-row.tsx +271 -0
- package/src/components/agents/type.ts +89 -0
- package/src/components/agents/use-ai-sidebar.ts +386 -0
- package/src/components/agents/utils.ts +142 -0
- package/src/components/beste/piece/browser-frame.tsx +55 -0
- package/src/components/beste/piece/type.ts +11 -0
- package/src/components/beste/piece/utils.ts +21 -0
- package/src/components/blocks/auth/__tests__/linked-accounts-block.test.tsx +18 -0
- package/src/components/blocks/auth/linked-accounts-block.tsx +63 -57
- package/src/components/blocks/auth/passkey-manager-block.tsx +88 -81
- package/src/components/blocks/auth/signup-block.tsx +6 -6
- package/src/components/blocks/nav/sidebar-block.tsx +25 -155
- package/src/components/blocks/nav/sidebar-nav-row.tsx +79 -0
- package/src/components/blocks/nav/types.ts +65 -0
- package/src/components/blocks/nav/utils.ts +4 -0
- package/src/components/blocks/profile/profile-card-block.tsx +17 -6
- package/src/components/blocks/shell/index.ts +1 -0
- package/src/components/blocks/shell/shell-layout.tsx +115 -0
- package/src/components/blocks/shell/type.ts +50 -0
- package/src/components/blocks/shell/utils.ts +2 -0
- package/src/components/composed/social-providers.tsx +83 -27
- package/src/components/docs/component-preview.tsx +13 -12
- package/src/components/docs/demo-controls.tsx +37 -21
- package/src/components/motion/animated-sidebar.tsx +392 -364
- package/src/components/motion/popover-morph.tsx +292 -0
- package/src/components/motion/popover-position.ts +86 -0
- package/src/components/ui/badge.tsx +52 -0
- package/src/components/ui/select.tsx +257 -0
- package/src/index.css +18 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { AISidebar } from './ai-sidebar';
|
|
2
|
+
import { MarqueeLabel } from './marquee-label.tsx';
|
|
3
|
+
import { ResourceRow } from './sidebar-row.tsx';
|
|
4
|
+
import { SidebarIcon } from './sidebar-icon.tsx';
|
|
5
|
+
export { useAISidebar, type UseAISidebarOptions } from './use-ai-sidebar.ts';
|
|
6
|
+
export type * from './type.ts';
|
|
7
|
+
export declare const Sidebar: {
|
|
8
|
+
Wrapper: typeof AISidebar;
|
|
9
|
+
MarqueeLabel: typeof MarqueeLabel;
|
|
10
|
+
Row: typeof ResourceRow;
|
|
11
|
+
Icon: typeof SidebarIcon;
|
|
12
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { ResourceRowProps } from './type.ts';
|
|
2
|
+
export declare function ResourceRow({ row, active, expanded, focused, draggingId, dropTarget, menuOpen, renaming, onDragEnd, onDragOver, onDragStart, onDrop, onFocus, onKeyDown, onMenuOpenChange, onRenameCancel, onRenameCommit, onRenameStart, onSelect, onToggle, hoverActive, hoverPill, hoverLayoutId, onHoverChange, renderIcon, renderMenu, setRef, }: ResourceRowProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { ReactNode, DragEvent, KeyboardEvent } from 'react';
|
|
2
|
+
export type SidebarResourceKind = "folder" | "project" | "file" | "bookmark";
|
|
3
|
+
export interface SidebarResource {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
kind: SidebarResourceKind;
|
|
7
|
+
children?: SidebarResource[];
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export type SidebarResourceDropPosition = "before" | "inside" | "after";
|
|
11
|
+
export interface SidebarResourceMove {
|
|
12
|
+
itemId: string;
|
|
13
|
+
targetId: string | null;
|
|
14
|
+
position: SidebarResourceDropPosition;
|
|
15
|
+
}
|
|
16
|
+
export interface SidebarResourceMenuControls {
|
|
17
|
+
close: () => void;
|
|
18
|
+
rename: () => void;
|
|
19
|
+
}
|
|
20
|
+
export interface AISidebarProps {
|
|
21
|
+
items?: SidebarResource[];
|
|
22
|
+
defaultItems?: SidebarResource[];
|
|
23
|
+
onItemsChange?: (items: SidebarResource[]) => void;
|
|
24
|
+
/** Reject the promise to roll the optimistic move back. */
|
|
25
|
+
onMove?: (move: SidebarResourceMove) => void | Promise<void>;
|
|
26
|
+
onMoveError?: (error: unknown, move: SidebarResourceMove) => void;
|
|
27
|
+
onRename?: (item: SidebarResource, label: string) => void | Promise<void>;
|
|
28
|
+
activeId?: string | null;
|
|
29
|
+
defaultActiveId?: string | null;
|
|
30
|
+
onActiveChange?: (id: string) => void;
|
|
31
|
+
defaultExpandedIds?: string[];
|
|
32
|
+
renderIcon?: (item: SidebarResource) => ReactNode;
|
|
33
|
+
renderMenu?: (item: SidebarResource, controls: SidebarResourceMenuControls) => ReactNode;
|
|
34
|
+
ariaLabel?: string;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
export interface FlatResource {
|
|
38
|
+
item: SidebarResource;
|
|
39
|
+
depth: number;
|
|
40
|
+
parentId: string | null;
|
|
41
|
+
}
|
|
42
|
+
export interface DropTarget {
|
|
43
|
+
id: string | null;
|
|
44
|
+
position: SidebarResourceDropPosition;
|
|
45
|
+
}
|
|
46
|
+
export interface ResourceRowProps {
|
|
47
|
+
row: FlatResource;
|
|
48
|
+
active: boolean;
|
|
49
|
+
expanded: boolean;
|
|
50
|
+
focused: boolean;
|
|
51
|
+
draggingId: string | null;
|
|
52
|
+
dropTarget: DropTarget | null;
|
|
53
|
+
menuOpen: boolean;
|
|
54
|
+
renaming: boolean;
|
|
55
|
+
onDragEnd: () => void;
|
|
56
|
+
onDragOver: (event: DragEvent<HTMLDivElement>, row: FlatResource) => void;
|
|
57
|
+
onDragStart: (event: DragEvent<HTMLDivElement>, id: string) => void;
|
|
58
|
+
onDrop: (event: DragEvent<HTMLDivElement>) => void;
|
|
59
|
+
onFocus: () => void;
|
|
60
|
+
onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
|
|
61
|
+
onMenuOpenChange: (open: boolean) => void;
|
|
62
|
+
onRenameCancel: () => void;
|
|
63
|
+
onRenameCommit: (label: string) => void;
|
|
64
|
+
onRenameStart: () => void;
|
|
65
|
+
onSelect: () => void;
|
|
66
|
+
onToggle: () => void;
|
|
67
|
+
/** Some row in the tree is hovered — mounts the pill fade wrapper. */
|
|
68
|
+
hoverActive?: boolean;
|
|
69
|
+
/** This row owns the sliding hover pill. */
|
|
70
|
+
hoverPill?: boolean;
|
|
71
|
+
/** Shared motion layoutId that lets the pill travel between rows. */
|
|
72
|
+
hoverLayoutId?: string;
|
|
73
|
+
onHoverChange?: (hovered: boolean) => void;
|
|
74
|
+
renderIcon?: (item: SidebarResource) => ReactNode;
|
|
75
|
+
renderMenu?: AISidebarProps["renderMenu"];
|
|
76
|
+
setRef: (node: HTMLDivElement | null) => void;
|
|
77
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { DragEvent, KeyboardEvent } from 'react';
|
|
2
|
+
import { AISidebarProps, DropTarget, FlatResource } from './type.ts';
|
|
3
|
+
export type UseAISidebarOptions = Pick<AISidebarProps, "items" | "defaultItems" | "onItemsChange" | "onMove" | "onMoveError" | "onRename" | "activeId" | "defaultActiveId" | "onActiveChange" | "defaultExpandedIds">;
|
|
4
|
+
export declare function useAISidebar({ items, defaultItems, onItemsChange, onMove, onMoveError, onRename, activeId, defaultActiveId, onActiveChange, defaultExpandedIds, }: UseAISidebarOptions): {
|
|
5
|
+
flat: FlatResource[];
|
|
6
|
+
selectedId: string | null;
|
|
7
|
+
expandedIds: Set<string>;
|
|
8
|
+
focusedId: string | null;
|
|
9
|
+
setFocusedId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
|
|
10
|
+
draggingId: string | null;
|
|
11
|
+
dropTarget: DropTarget | null;
|
|
12
|
+
hoveredId: string | null;
|
|
13
|
+
hoverLayoutId: string;
|
|
14
|
+
handleRowHover: (id: string, hovered: boolean) => void;
|
|
15
|
+
clearHover: () => void;
|
|
16
|
+
menuOpenId: string | null;
|
|
17
|
+
renamingId: string | null;
|
|
18
|
+
setRenamingId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
|
|
19
|
+
announcement: string;
|
|
20
|
+
select: (id: string) => void;
|
|
21
|
+
toggle: (id: string) => void;
|
|
22
|
+
handleKeyDown: (event: KeyboardEvent<HTMLDivElement>, row: FlatResource) => void;
|
|
23
|
+
handleRootDragOver: (event: DragEvent<HTMLDivElement>) => void;
|
|
24
|
+
handleDrop: (event: DragEvent<HTMLDivElement>) => void;
|
|
25
|
+
handleRowDragStart: (event: DragEvent<HTMLDivElement>, id: string) => void;
|
|
26
|
+
handleRowDragEnd: () => void;
|
|
27
|
+
handleRowDragOver: (event: DragEvent<HTMLDivElement>, targetRow: FlatResource) => void;
|
|
28
|
+
commitRename: (row: FlatResource, label: string) => void;
|
|
29
|
+
handleMenuOpenChange: (row: FlatResource, open: boolean) => void;
|
|
30
|
+
setRowRef: (id: string, node: HTMLDivElement | null) => void;
|
|
31
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { FlatResource, SidebarResource, SidebarResourceDropPosition, SidebarResourceMove } from './type.ts';
|
|
2
|
+
export declare const ROW_REVEAL: {
|
|
3
|
+
readonly duration: 0.16;
|
|
4
|
+
readonly ease: readonly [0.16, 1, 0.3, 1];
|
|
5
|
+
};
|
|
6
|
+
export declare function canContain(item: SidebarResource): boolean;
|
|
7
|
+
export declare function flattenResources(items: SidebarResource[], expanded: Set<string>, depth?: number, parentId?: string | null): FlatResource[];
|
|
8
|
+
export declare function findResource(items: SidebarResource[], id: string): SidebarResource | undefined;
|
|
9
|
+
export declare function containsResource(item: SidebarResource, id: string): boolean;
|
|
10
|
+
export declare function removeResource(items: SidebarResource[], id: string): {
|
|
11
|
+
items: SidebarResource[];
|
|
12
|
+
removed?: SidebarResource;
|
|
13
|
+
};
|
|
14
|
+
export declare function insertResource(items: SidebarResource[], resource: SidebarResource, targetId: string | null, position: SidebarResourceDropPosition): SidebarResource[];
|
|
15
|
+
export declare function moveResource(items: SidebarResource[], move: SidebarResourceMove): SidebarResource[] | null;
|
|
16
|
+
export declare function renameResource(items: SidebarResource[], id: string, label: string): SidebarResource[];
|
|
@@ -16,6 +16,12 @@ export interface LinkedAccountsBlockProps {
|
|
|
16
16
|
providers?: SocialProvider[];
|
|
17
17
|
/** Shows the loading row instead of the list. */
|
|
18
18
|
loading?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The account can also sign in through a method that has no row in this
|
|
21
|
+
* list — an email/password credential, say. Lifts the last-method guard,
|
|
22
|
+
* which otherwise refuses to disconnect the final listed identity.
|
|
23
|
+
*/
|
|
24
|
+
hasOtherSignInMethods?: boolean;
|
|
19
25
|
/** Reject (or throw) to show the inline error. */
|
|
20
26
|
onLink?: (provider: SocialProvider) => Promise<void> | void;
|
|
21
27
|
onUnlink?: (id: string) => Promise<void> | void;
|
|
@@ -27,4 +33,4 @@ export interface LinkedAccountsBlockProps {
|
|
|
27
33
|
* remaining method from being disconnected — the guard is a disabled button
|
|
28
34
|
* plus an explanation rather than an error after the fact.
|
|
29
35
|
*/
|
|
30
|
-
export declare function LinkedAccountsBlock({ title, description, identities, providers, loading, onLink, onUnlink, className, }: LinkedAccountsBlockProps): React.JSX.Element;
|
|
36
|
+
export declare function LinkedAccountsBlock({ title, description, identities, providers, loading, hasOtherSignInMethods, onLink, onUnlink, className, }: LinkedAccountsBlockProps): React.JSX.Element;
|
|
@@ -11,19 +11,19 @@ export interface SignupBlockProps {
|
|
|
11
11
|
termsComponent?: React.ReactNode;
|
|
12
12
|
/** Brand mark rendered above the title. Omit for no logo row at all. */
|
|
13
13
|
logo?: React.ReactNode;
|
|
14
|
-
/** Brand accent for the primary action. Omit
|
|
14
|
+
/** Brand accent for the primary action. Omit keeping the default primary. */
|
|
15
15
|
accent?: AuthAccent;
|
|
16
16
|
providers?: SocialProvider[];
|
|
17
17
|
showNameField?: boolean;
|
|
18
|
-
/** Require the
|
|
18
|
+
/** Require the term checkbox before submitting. */
|
|
19
19
|
showTerms?: boolean;
|
|
20
20
|
/**
|
|
21
|
-
* Controls the
|
|
21
|
+
* Controls the term checkbox. Pass it with `onTermsCheckedChange` when
|
|
22
22
|
* something outside the block has to tick the box — an "I agree" action in
|
|
23
|
-
* your own terms dialog, say. Omit
|
|
23
|
+
* your own terms dialog, say. Omit letting the block own the state.
|
|
24
24
|
*/
|
|
25
25
|
termsChecked?: boolean;
|
|
26
|
-
/** Starting state of the
|
|
26
|
+
/** Starting state of the term checkbox while it is uncontrolled. */
|
|
27
27
|
defaultTermsChecked?: boolean;
|
|
28
28
|
/** Fires on every change, controlled or not. */
|
|
29
29
|
onTermsCheckedChange?: (checked: boolean) => void;
|
|
@@ -1,59 +1,6 @@
|
|
|
1
|
+
import { ISidebarBlockProps } from './types';
|
|
1
2
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface SidebarNavSubItem {
|
|
4
|
-
id: string;
|
|
5
|
-
label: string;
|
|
6
|
-
icon?: React.ReactNode;
|
|
7
|
-
/** Renders an anchor. Without one the row is a button. */
|
|
8
|
-
href?: string;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
11
|
-
onSelect?: () => void;
|
|
12
|
-
}
|
|
13
|
-
/** A top-level entry. With `items` it expands instead of navigating. */
|
|
14
|
-
export interface SidebarNavItem extends SidebarNavSubItem {
|
|
15
|
-
/** Trailing hint — a count, a "New" pill. Hidden while collapsed. */
|
|
16
|
-
badge?: React.ReactNode;
|
|
17
|
-
items?: SidebarNavSubItem[];
|
|
18
|
-
/** Start expanded. Defaults to expanded when one of its children is active. */
|
|
19
|
-
defaultOpen?: boolean;
|
|
20
|
-
}
|
|
21
|
-
/** A titled run of entries. The title hides while the rail is collapsed. */
|
|
22
|
-
export interface SidebarNavSection {
|
|
23
|
-
id: string;
|
|
24
|
-
label?: string;
|
|
25
|
-
items: SidebarNavItem[];
|
|
26
|
-
}
|
|
27
|
-
export interface SidebarBlockProps {
|
|
28
|
-
sections: SidebarNavSection[];
|
|
29
|
-
/** `id` of the current entry — matches top-level and nested ids alike. */
|
|
30
|
-
activeId?: string;
|
|
31
|
-
/** Fires for every selection, after the entry's own `onSelect`. */
|
|
32
|
-
onNavigate?: (item: SidebarNavItem | SidebarNavSubItem) => void;
|
|
33
|
-
/** Brand row above the navigation. */
|
|
34
|
-
header?: React.ReactNode;
|
|
35
|
-
/** Pinned below the navigation — an account card, a version note. */
|
|
36
|
-
footer?: React.ReactNode;
|
|
37
|
-
/** Collapse toggle in the header row. */
|
|
38
|
-
showTrigger?: boolean;
|
|
39
|
-
side?: "left" | "right";
|
|
40
|
-
variant?: "sidebar" | "floating" | "inset";
|
|
41
|
-
/** How the rail collapses: to icons, off-canvas, or not at all. */
|
|
42
|
-
collapsible?: "offcanvas" | "icon" | "none";
|
|
43
|
-
open?: boolean;
|
|
44
|
-
defaultOpen?: boolean;
|
|
45
|
-
onOpenChange?: (open: boolean) => void;
|
|
46
|
-
/** Under 768px the panel is a drawer — drive it from your own header. */
|
|
47
|
-
openMobile?: boolean;
|
|
48
|
-
defaultOpenMobile?: boolean;
|
|
49
|
-
onOpenMobileChange?: (open: boolean) => void;
|
|
50
|
-
/** Rail widths. CSS lengths, e.g. "16rem". */
|
|
51
|
-
width?: string;
|
|
52
|
-
iconWidth?: string;
|
|
53
|
-
mobileWidth?: string;
|
|
54
|
-
ariaLabel?: string;
|
|
55
|
-
className?: string;
|
|
56
|
-
}
|
|
3
|
+
export type { ISidebarBlockProps as SidebarBlockProps, ISidebarNavItem as SidebarNavItem, ISidebarNavSection as SidebarNavSection, ISidebarNavSubItem as SidebarNavSubItem, } from './types';
|
|
57
4
|
/**
|
|
58
5
|
* Application sidebar navigation, driven by data rather than composition.
|
|
59
6
|
*
|
|
@@ -64,4 +11,4 @@ export interface SidebarBlockProps {
|
|
|
64
11
|
* Compose the underlying `AnimatedSidebar*` parts directly when a screen
|
|
65
12
|
* needs something this API does not cover.
|
|
66
13
|
*/
|
|
67
|
-
export declare function SidebarBlock({ sections, activeId, onNavigate, header, footer, showTrigger, side, variant, collapsible, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, width, iconWidth, mobileWidth, ariaLabel, className, }:
|
|
14
|
+
export declare function SidebarBlock({ sections, activeId, onNavigate, header, footer, showTrigger, side, variant, collapsible, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, width, iconWidth, mobileWidth, ariaLabel, className, }: ISidebarBlockProps): React.ReactElement;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/** A nested link, one level under a top-level entry. */
|
|
2
|
+
export interface ISidebarNavSubItem {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
/** Renders an anchor. Without one the row is a button. */
|
|
7
|
+
href?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
10
|
+
onSelect?: () => void;
|
|
11
|
+
}
|
|
12
|
+
/** A top-level entry. With `items` it expands instead of navigating. */
|
|
13
|
+
export interface ISidebarNavItem extends ISidebarNavSubItem {
|
|
14
|
+
/** Trailing hint — a count, a "New" pill. Hidden while collapsed. */
|
|
15
|
+
badge?: React.ReactNode;
|
|
16
|
+
items?: ISidebarNavSubItem[];
|
|
17
|
+
/** Start expanded. Defaults to expanded when one of its children is active. */
|
|
18
|
+
defaultOpen?: boolean;
|
|
19
|
+
}
|
|
20
|
+
/** A titled run of entries. The title hides while the rail is collapsed. */
|
|
21
|
+
export interface ISidebarNavSection {
|
|
22
|
+
id: string;
|
|
23
|
+
label?: string;
|
|
24
|
+
items: ISidebarNavItem[];
|
|
25
|
+
}
|
|
26
|
+
export interface ISidebarBlockProps {
|
|
27
|
+
sections: ISidebarNavSection[];
|
|
28
|
+
/** `id` of the current entry — matches top-level and nested ids alike. */
|
|
29
|
+
activeId?: string;
|
|
30
|
+
/** Fires for every selection, after the entry's own `onSelect`. */
|
|
31
|
+
onNavigate?: (item: ISidebarNavItem | ISidebarNavSubItem) => void;
|
|
32
|
+
/** Brand row above the navigation. */
|
|
33
|
+
header?: React.ReactNode;
|
|
34
|
+
/** Pinned below the navigation — an account card, a version note. */
|
|
35
|
+
footer?: React.ReactNode;
|
|
36
|
+
/** Collapse toggle in the header row. */
|
|
37
|
+
showTrigger?: boolean;
|
|
38
|
+
side?: "left" | "right";
|
|
39
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
40
|
+
/** How the rail collapses: to icons, off-canvas, or not at all. */
|
|
41
|
+
collapsible?: "offcanvas" | "icon" | "none";
|
|
42
|
+
open?: boolean;
|
|
43
|
+
defaultOpen?: boolean;
|
|
44
|
+
onOpenChange?: (open: boolean) => void;
|
|
45
|
+
/** Under 768px the panel is a drawer — drive it from your own header. */
|
|
46
|
+
openMobile?: boolean;
|
|
47
|
+
defaultOpenMobile?: boolean;
|
|
48
|
+
onOpenMobileChange?: (open: boolean) => void;
|
|
49
|
+
/** Rail widths. CSS lengths, e.g. "16rem". */
|
|
50
|
+
width?: string;
|
|
51
|
+
iconWidth?: string;
|
|
52
|
+
mobileWidth?: string;
|
|
53
|
+
ariaLabel?: string;
|
|
54
|
+
className?: string;
|
|
55
|
+
}
|
|
56
|
+
export interface IRowProps {
|
|
57
|
+
item: ISidebarNavItem;
|
|
58
|
+
activeId?: string;
|
|
59
|
+
onNavigate?: (item: ISidebarNavItem | ISidebarNavSubItem) => void;
|
|
60
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function isActive(id: string, activeId?: string): boolean;
|
|
@@ -57,6 +57,11 @@ export interface ProfileCardBlockProps {
|
|
|
57
57
|
open?: boolean;
|
|
58
58
|
defaultOpen?: boolean;
|
|
59
59
|
onOpenChange?: MenuPrimitive.Root.Props["onOpenChange"];
|
|
60
|
+
/**
|
|
61
|
+
* "content" sizes the menu to its items; "card" locks it to the trigger's
|
|
62
|
+
* width, so `align` stops mattering horizontally.
|
|
63
|
+
*/
|
|
64
|
+
menuWidth?: "content" | "card";
|
|
60
65
|
/**
|
|
61
66
|
* Emit cuelume press/release on the card and play the open/close cues.
|
|
62
67
|
* Inert unless the app opts into interaction sound via `bindSounds()`.
|
|
@@ -73,5 +78,5 @@ export interface ProfileCardBlockProps {
|
|
|
73
78
|
* popup is a plain action menu. `items` is the whole menu — a flat list of
|
|
74
79
|
* actions, separators and labels — defaulting to `defaultProfileCardItems`.
|
|
75
80
|
*/
|
|
76
|
-
export declare function ProfileCardBlock({ user, items, align, side, sideOffset, open, defaultOpen, onOpenChange, sound, onError, className, }: ProfileCardBlockProps): React.ReactElement;
|
|
81
|
+
export declare function ProfileCardBlock({ user, items, align, side, sideOffset, menuWidth, open, defaultOpen, onOpenChange, sound, onError, className, }: ProfileCardBlockProps): React.ReactElement;
|
|
77
82
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './shell-layout';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ShellLayoutProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
export declare function ShellLayout({ children, open, defaultOpen, onOpenChange, rightDrawer, rightOpen, defaultRightOpen, onRightOpenChange, variant, className, }: ShellLayoutProps): React.ReactElement;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface ShellAction {
|
|
2
|
+
id: string;
|
|
3
|
+
label: string;
|
|
4
|
+
icon: React.ReactNode;
|
|
5
|
+
badge?: React.ReactNode;
|
|
6
|
+
onSelect?: () => void;
|
|
7
|
+
}
|
|
8
|
+
export interface ShellWorkspace {
|
|
9
|
+
name: string;
|
|
10
|
+
logo?: React.ReactNode;
|
|
11
|
+
meta?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export interface ShellLayoutProps {
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
onOpenChange?: (open: boolean) => void;
|
|
18
|
+
/** Content of the right drawer. It has no icon rail — it is either fully
|
|
19
|
+
* shown or fully hidden. */
|
|
20
|
+
rightDrawer?: React.ReactNode;
|
|
21
|
+
rightOpen?: boolean;
|
|
22
|
+
defaultRightOpen?: boolean;
|
|
23
|
+
onRightOpenChange?: (open: boolean) => void;
|
|
24
|
+
className?: string;
|
|
25
|
+
variant: 'web' | 'desktop';
|
|
26
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TITLE_BAR_HEIGHT = 48;
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import type * as React from "react";
|
|
2
2
|
export type SocialProvider = "google" | "apple" | "github" | "x";
|
|
3
|
-
/**
|
|
3
|
+
/**
|
|
4
|
+
* Label + brand mark per provider, shared with the auth blocks. `Icon` is the
|
|
5
|
+
* monochrome mark that inherits the current text color; `BrandIcon` +
|
|
6
|
+
* `brandClassName` render it in the provider's own colors.
|
|
7
|
+
*/
|
|
4
8
|
export declare const SOCIAL_PROVIDERS: Record<SocialProvider, {
|
|
5
9
|
label: string;
|
|
6
10
|
Icon: React.ComponentType<{
|
|
7
11
|
className?: string;
|
|
8
12
|
}>;
|
|
13
|
+
BrandIcon: React.ComponentType<{
|
|
14
|
+
className?: string;
|
|
15
|
+
}>;
|
|
16
|
+
brandClassName: string;
|
|
9
17
|
}>;
|
|
10
18
|
declare const ACTION_LABELS: {
|
|
11
19
|
readonly login: "Login with";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type * as React from "react";
|
|
2
2
|
/**
|
|
3
|
-
* Lightweight playground controls for registry demos
|
|
4
|
-
*
|
|
3
|
+
* Lightweight playground controls for registry demos — docs-only, never
|
|
4
|
+
* part of the published library.
|
|
5
5
|
*/
|
|
6
6
|
export declare function DemoSelect<T extends string>({ label, value, options, onChange, }: {
|
|
7
|
-
label
|
|
7
|
+
label?: string;
|
|
8
8
|
value: T;
|
|
9
9
|
options: readonly T[];
|
|
10
10
|
onChange: (value: T) => void;
|
|
@@ -22,7 +22,7 @@ export declare function DemoToggle({ label, checked, onChange, }: {
|
|
|
22
22
|
}): React.JSX.Element;
|
|
23
23
|
/** Standard layout: centered preview canvas above a wrapping controls row. */
|
|
24
24
|
export declare function DemoStage({ controls, children, canvasClassName, }: {
|
|
25
|
-
controls
|
|
25
|
+
controls?: React.ReactNode;
|
|
26
26
|
children: React.ReactNode;
|
|
27
27
|
canvasClassName?: string;
|
|
28
28
|
}): React.JSX.Element;
|
|
@@ -9,12 +9,18 @@ interface AnimatedSidebarContextValue {
|
|
|
9
9
|
layoutId: string;
|
|
10
10
|
open: boolean;
|
|
11
11
|
openMobile: boolean;
|
|
12
|
+
/** The right panel is a single hidden/shown state — no icon rail, no
|
|
13
|
+
* separate mobile state. */
|
|
14
|
+
openRight: boolean;
|
|
12
15
|
reduce: boolean;
|
|
13
16
|
setOpen: (open: boolean) => void;
|
|
14
17
|
setOpenMobile: (open: boolean) => void;
|
|
18
|
+
setOpenRight: (open: boolean) => void;
|
|
15
19
|
state: SidebarState;
|
|
16
20
|
toggleSidebar: () => void;
|
|
21
|
+
toggleRightSidebar: () => void;
|
|
17
22
|
triggerRef: React.RefObject<HTMLButtonElement | null>;
|
|
23
|
+
rightTriggerRef: React.RefObject<HTMLButtonElement | null>;
|
|
18
24
|
}
|
|
19
25
|
export declare function useAnimatedSidebar(): AnimatedSidebarContextValue;
|
|
20
26
|
type SidebarProviderStyle = CSSProperties & {
|
|
@@ -29,9 +35,12 @@ export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElem
|
|
|
29
35
|
openMobile?: boolean;
|
|
30
36
|
defaultOpenMobile?: boolean;
|
|
31
37
|
onOpenMobileChange?: (open: boolean) => void;
|
|
38
|
+
openRight?: boolean;
|
|
39
|
+
defaultOpenRight?: boolean;
|
|
40
|
+
onOpenRightChange?: (open: boolean) => void;
|
|
32
41
|
style?: SidebarProviderStyle;
|
|
33
42
|
}
|
|
34
|
-
export declare function AnimatedSidebarProvider({ children, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, className, style, ...props }: AnimatedSidebarProviderProps): import("react").JSX.Element;
|
|
43
|
+
export declare function AnimatedSidebarProvider({ children, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, openRight, defaultOpenRight, onOpenRightChange, className, style, ...props }: AnimatedSidebarProviderProps): import("react").JSX.Element;
|
|
35
44
|
export interface AnimatedSidebarProps extends Omit<HTMLMotionProps<"aside">, "children"> {
|
|
36
45
|
children?: ReactNode;
|
|
37
46
|
side?: SidebarSide;
|
|
@@ -42,9 +51,11 @@ export interface AnimatedSidebarProps extends Omit<HTMLMotionProps<"aside">, "ch
|
|
|
42
51
|
}
|
|
43
52
|
export declare const AnimatedSidebar: import('react').ForwardRefExoticComponent<Omit<AnimatedSidebarProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
|
|
44
53
|
export interface AnimatedSidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
54
|
+
side?: SidebarSide;
|
|
45
55
|
}
|
|
46
56
|
export declare const AnimatedSidebarTrigger: import('react').ForwardRefExoticComponent<AnimatedSidebarTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
47
57
|
export interface AnimatedSidebarCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
58
|
+
side?: SidebarSide;
|
|
48
59
|
}
|
|
49
60
|
export declare const AnimatedSidebarClose: import('react').ForwardRefExoticComponent<AnimatedSidebarCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
50
61
|
export interface AnimatedSidebarRailProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
type Side = "top" | "bottom";
|
|
3
|
+
type Align = "start" | "end";
|
|
4
|
+
export interface MorphPopoverProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** Controlled open state. */
|
|
7
|
+
open?: boolean;
|
|
8
|
+
/** Uncontrolled initial open state. */
|
|
9
|
+
defaultOpen?: boolean;
|
|
10
|
+
onOpenChange?: (open: boolean) => void;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* A popover whose panel morphs open from the trigger corner: it's laid out at
|
|
15
|
+
* full size but clipped to the corner nearest the trigger, then unclips as one
|
|
16
|
+
* piece. Closes on outside pointer / Escape. Controlled or uncontrolled.
|
|
17
|
+
*/
|
|
18
|
+
export declare function MorphPopover({ children, open: controlledOpen, defaultOpen, onOpenChange, className, }: MorphPopoverProps): import("react").JSX.Element;
|
|
19
|
+
export interface MorphPopoverTriggerProps {
|
|
20
|
+
children: ReactElement;
|
|
21
|
+
}
|
|
22
|
+
/** Wraps a single element, toggling the popover on click. */
|
|
23
|
+
export declare function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps): ReactElement<Record<string, unknown>, string | import('react').JSXElementConstructor<any>>;
|
|
24
|
+
export interface MorphPopoverContentProps {
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
side?: Side;
|
|
27
|
+
align?: Align;
|
|
28
|
+
/** Gap between trigger and panel, in px. Default 8. */
|
|
29
|
+
sideOffset?: number;
|
|
30
|
+
/** Panel corner radius, in px. Default 16. */
|
|
31
|
+
radius?: number;
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
export declare function MorphPopoverContent({ children, side, align, sideOffset, radius, className, }: MorphPopoverContentProps): import('react').ReactPortal | null;
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
|
+
export type PortalLayout = {
|
|
3
|
+
trigger: {
|
|
4
|
+
left: number;
|
|
5
|
+
top: number;
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
9
|
+
content: {
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
/** Measures a trigger and portalled panel in viewport coordinates. */
|
|
15
|
+
export declare function usePopoverPortalPosition<TriggerElement extends HTMLElement, ContentElement extends HTMLElement>(triggerRef: MutableRefObject<TriggerElement | null>, contentRef: MutableRefObject<ContentElement | null>, active: boolean): PortalLayout | null;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "link" | "default" | "destructive" | "ghost" | "outline" | "secondary" | null | undefined;
|
|
5
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
|
+
declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
|
|
7
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from '@base-ui/react/select';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import type * as React from "react";
|
|
5
|
+
export declare const Select: typeof SelectPrimitive.Root;
|
|
6
|
+
export declare const selectTriggerVariants: (props?: ({
|
|
7
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
8
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
|
+
export declare const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
|
|
10
|
+
export interface SelectButtonProps extends useRender.ComponentProps<"button"> {
|
|
11
|
+
size?: VariantProps<typeof selectTriggerVariants>["size"];
|
|
12
|
+
}
|
|
13
|
+
export declare function SelectButton({ className, size, render, children, ...props }: SelectButtonProps): React.ReactElement;
|
|
14
|
+
export declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & VariantProps<typeof selectTriggerVariants>): React.ReactElement;
|
|
15
|
+
export declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.ReactElement;
|
|
16
|
+
export declare function SelectPopup({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, anchor, portalProps, ...props }: SelectPrimitive.Popup.Props & {
|
|
17
|
+
portalProps?: SelectPrimitive.Portal.Props;
|
|
18
|
+
side?: SelectPrimitive.Positioner.Props["side"];
|
|
19
|
+
sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
|
|
20
|
+
align?: SelectPrimitive.Positioner.Props["align"];
|
|
21
|
+
alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"];
|
|
22
|
+
alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"];
|
|
23
|
+
anchor?: SelectPrimitive.Positioner.Props["anchor"];
|
|
24
|
+
}): React.ReactElement;
|
|
25
|
+
export declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.ReactElement;
|
|
26
|
+
export declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.ReactElement;
|
|
27
|
+
export declare function SelectGroup(props: SelectPrimitive.Group.Props): React.ReactElement;
|
|
28
|
+
export declare function SelectLabel({ className, ...props }: SelectPrimitive.Label.Props): React.ReactElement;
|
|
29
|
+
export declare function SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props): React.ReactElement;
|
|
30
|
+
export { SelectPrimitive, SelectPopup as SelectContent };
|
package/dist-lib/index.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export * from './components/blocks/auth/passkey-sign-in-block';
|
|
|
34
34
|
export * from './components/blocks/auth/signup-block';
|
|
35
35
|
export * from './components/blocks/auth/update-password-block';
|
|
36
36
|
export * from './components/blocks/nav/sidebar-block';
|
|
37
|
+
export * from './components/blocks/shell/shell-layout';
|
|
37
38
|
export * from './components/blocks/profile/profile-card-block';
|
|
38
39
|
export * from './components/motion/animated-sidebar';
|
|
39
40
|
export * from './components/motion/shared-layout-bg';
|