@mirror-physics/fractal-ui 0.2.0-next.35 → 0.2.0-next.37

package/dist/index.d.ts

@@ -232,6 +232,7 @@ interface TabItem {
     content: ReactNode;
     disabled?: boolean;
 }
+type TabsVariant = 'line' | 'surface';
 interface TabsProps {
     items: TabItem[];
     defaultValue?: string;
@@ -241,8 +242,10 @@ interface TabsProps {
     ariaLabel?: string;
     /** Extends a subtle divider across the entire tab list. */
     divider?: boolean;
+    /** Visual treatment. Surface tabs sit on a full-width secondary surface with the active tab connected to its panel. */
+    variant?: TabsVariant;
 }
-declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, divider, }: TabsProps): React.JSX.Element;
+declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, divider, variant, }: TabsProps): React.JSX.Element;
 
 interface ContentSwitcherItem {
     value: string;
@@ -374,6 +377,8 @@ declare function SidePanelGhost({ className, title, lines, ...props }: SurfaceGh
 interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     /** Fixed sidebar width. Defaults to the standard application width. */
     width?: string;
+    /** Collapses the sidebar to an icon rail until it is hovered or receives focus. */
+    compact?: boolean;
 }
 declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
 declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -387,9 +392,11 @@ interface SidebarAccountMenuProps {
     onSelect: (value: string) => void;
     /** Accessible label for the account actions menu. */
     triggerLabel?: string;
+    /** Leading profile or workspace mark. */
+    icon?: React.ReactNode;
     className?: string;
 }
-declare function SidebarAccountMenu({ name, items, onSelect, triggerLabel, className, }: SidebarAccountMenuProps): React.JSX.Element;
+declare function SidebarAccountMenu({ name, items, onSelect, triggerLabel, icon, className, }: SidebarAccountMenuProps): React.JSX.Element;
 declare const SidebarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 declare const SidebarSection: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -471,4 +478,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, Pagination, PaginationGhost, type PaginationProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTableProps, type SortableTableRowAction, type SurfaceGhostProps, type TabItem, Tabs, TabsGhost, type TabsProps, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, Pagination, PaginationGhost, type PaginationProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTableProps, type SortableTableRowAction, type SurfaceGhostProps, type TabItem, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };

package/dist/index.js

@@ -941,7 +941,8 @@ function Tabs({
   onValueChange,
   className,
   ariaLabel,
-  divider = false
+  divider = false,
+  variant = "line"
 }) {
   const reactId = useId2();
   const [internalValue, setInternalValue] = useState4(
@@ -1003,7 +1004,7 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ jsxs12("div", { className: cn("fractal-tabs", divider && "fractal-tabs--divider", className), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
     /* @__PURE__ */ jsx16(
       "div",
       {
@@ -1408,13 +1409,14 @@ function SurfaceGhost({ className, title, lines = 3, ...props }) {
 
 // src/components/Sidebar/Sidebar.tsx
 import * as React11 from "react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var Sidebar = React11.forwardRef(
-  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ jsx21(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx21(
     "aside",
     {
       ref,
       className: cn("fractal-sidebar", className),
+      "data-compact": compact || void 0,
       style: { ...style, ...width ? { "--fractal-sidebar-width": width } : {} },
       ...props
     }
@@ -1434,6 +1436,7 @@ function SidebarAccountMenu({
   items,
   onSelect,
   triggerLabel = "Account menu",
+  icon,
   className
 }) {
   return /* @__PURE__ */ jsx21(
@@ -1446,7 +1449,10 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ jsx21("span", { className: "fractal-sidebar__account-name", children: name }),
+      triggerContent: /* @__PURE__ */ jsxs16(Fragment3, { children: [
+        icon && /* @__PURE__ */ jsx21("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx21("span", { className: "fractal-sidebar__account-name", children: name })
+      ] }),
       triggerLabel,
       triggerVariant: "tertiary"
     }