@loomlyne/ui-system-react 0.0.0-stage → 0.1.1

package/dist/nav/back.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import type { BackNav, LogoVariant, Placement } from '@loomlyne/ui-system-core';
+import { type AppUser, type NavAction, type NavLink, type NavSection, type Workspace } from './shared';
+interface BaseBackProps {
+    sections?: NavSection[];
+    user?: AppUser | null;
+    logoPlacement?: Placement;
+    logoVariant?: LogoVariant;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface AppSidebarProps extends BaseBackProps {
+    workspace?: Workspace | null;
+    search?: boolean | string;
+    footer?: React.ReactNode;
+}
+export declare function AppSidebar({ sections, user, workspace, search, logoPlacement, logoVariant, footer, className, style }: AppSidebarProps): React.JSX.Element;
+export interface AppRailProps extends BaseBackProps {
+    footerItems?: NavLink[];
+    /** Label of an item whose tooltip is pinned open (for static mockups). */
+    tip?: string;
+}
+export declare function AppRail({ sections, user, footerItems, tip, className, style }: AppRailProps): React.JSX.Element;
+export interface AppTopbarProps extends BaseBackProps {
+    links?: NavLink[];
+    actions?: NavAction[];
+    search?: boolean | string;
+}
+export declare function AppTopbar({ links, sections, actions, user, search, logoPlacement, logoVariant, className, style }: AppTopbarProps): React.JSX.Element;
+export interface AppDockProps extends BaseBackProps {
+    items?: NavLink[];
+    search?: boolean | string;
+    tip?: string;
+}
+export declare function AppDock({ items, sections, user, search, tip, className, style }: AppDockProps): React.JSX.Element;
+export interface AppShellProps extends BaseBackProps {
+    variant?: BackNav;
+    workspace?: Workspace | null;
+    search?: boolean | string;
+    actions?: NavAction[];
+    footerItems?: NavLink[];
+    tip?: string;
+    /** Extra content for the slim header used by the dock layout. */
+    header?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare function AppShell({ variant, children, header, ...p }: AppShellProps): React.JSX.Element;
+export interface PageHeaderProps {
+    title: string;
+    description?: string;
+    crumbs?: string[];
+    actions?: React.ReactNode;
+    /** Children render in the actions slot (handy from visual tools). */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PageHeader({ title, description, crumbs, actions, children, className, style }: PageHeaderProps): React.JSX.Element;
+export {};

package/dist/nav/front.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import type { FrontNav, LogoVariant, Placement } from '@loomlyne/ui-system-core';
+import { type NavAction, type NavCta, type NavLink } from './shared';
+interface BaseFrontProps {
+    links?: NavLink[];
+    actions?: NavAction[];
+    cta?: NavCta | null;
+    /** Where the logo sits. Defaults to the brand's placement. */
+    logoPlacement?: Placement;
+    logoVariant?: LogoVariant;
+    /** 'image' = sits on photography: light text, transparent where it applies. */
+    tone?: 'default' | 'image';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface NavDockProps extends Omit<BaseFrontProps, 'logoPlacement'> {
+    /** Header logo position, 'dock' puts the mark inside the dock, 'none' hides it. */
+    logoPlacement?: Placement | 'dock' | 'none';
+    /** Show the menu toggle that opens the explore panel. */
+    menu?: boolean;
+    /** Explore panel open. */
+    open?: boolean;
+    panelTitle?: string;
+    panel?: React.ReactNode;
+    fixed?: boolean;
+}
+export declare function NavDock({ links, actions, cta, logoPlacement, logoVariant, tone, menu, open, panelTitle, panel, fixed, className, style }: NavDockProps): React.JSX.Element;
+export interface NavIslandProps extends BaseFrontProps {
+    fixed?: boolean;
+    width?: number;
+}
+export declare function NavIsland({ links, actions, cta, logoPlacement, logoVariant, tone, fixed, width, className, style }: NavIslandProps): React.JSX.Element;
+export interface NavBarProps extends BaseFrontProps {
+    transparent?: boolean;
+    sticky?: boolean;
+    secondary?: NavCta | null;
+}
+export declare function NavBar({ links, actions, cta, secondary, logoPlacement, logoVariant, tone, transparent, sticky, className, style }: NavBarProps): React.JSX.Element;
+export interface NavStackedProps extends BaseFrontProps {
+    utility?: {
+        text?: string;
+        links?: NavLink[];
+    } | null;
+    search?: boolean;
+}
+export declare function NavStacked({ links, actions, logoPlacement, logoVariant, utility, search, className, style }: NavStackedProps): React.JSX.Element;
+export interface NavMinimalProps extends BaseFrontProps {
+    open?: boolean;
+    menuLabel?: string;
+    /** Bar: 'classic' logo + CTA + Menu button, 'corners' text-only MENU / logo / CTA, 'capsule' centered floating Menu capsule. */
+    layout?: 'classic' | 'corners' | 'capsule';
+    /** Open menu: 'fullscreen' index, 'split' dark index + brand panel, 'drawer' side panel. */
+    menuStyle?: 'fullscreen' | 'split' | 'drawer';
+    /** Content for the open menu's side column (contact, address). Children work too. */
+    aside?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare function NavMinimal({ links, cta, logoPlacement, logoVariant, tone, open, menuLabel, layout, menuStyle, aside, children, className, style }: NavMinimalProps): React.JSX.Element;
+export interface NavMobileProps extends BaseFrontProps {
+    variant?: 'sheet' | 'tabbar' | 'floating';
+    open?: boolean;
+    transparent?: boolean;
+}
+export declare function NavMobile({ variant, links, actions, cta, logoPlacement, logoVariant, tone, open, transparent, className, style }: NavMobileProps): React.JSX.Element;
+export type SiteNavProps = {
+    variant?: FrontNav;
+} & NavDockProps & NavIslandProps & NavBarProps & NavStackedProps & NavMinimalProps;
+export declare function SiteNav({ variant, ...props }: SiteNavProps): React.JSX.Element;
+export {};

package/dist/nav/shared.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { IconName } from '../Icon';
+import type { ButtonProps } from '../primitives';
+export interface NavLink {
+    label: string;
+    href?: string;
+    icon?: IconName | string;
+    active?: boolean;
+    badge?: string | number;
+    onClick?: () => void;
+}
+export interface NavAction {
+    icon: IconName | string;
+    label: string;
+    href?: string;
+    count?: number | string;
+    dot?: boolean;
+    onClick?: () => void;
+}
+export interface NavCta {
+    label: string;
+    href?: string;
+    icon?: IconName | string;
+    variant?: ButtonProps['variant'];
+    onClick?: () => void;
+}
+export interface NavSection {
+    label?: string;
+    items: NavLink[];
+}
+export interface AppUser {
+    name: string;
+    meta?: string;
+    initials?: string;
+    src?: string;
+}
+export interface Workspace {
+    name: string;
+    plan?: string;
+    initials?: string;
+}
+export declare function A({ link, className, children, title }: {
+    link: NavLink;
+    className: string;
+    children: React.ReactNode;
+    title?: string;
+}): React.JSX.Element;
+export declare const arr: <T>(v: T[] | undefined | null) => T[];

package/dist/primitives.d.ts

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { type IconName } from './Icon';
+type Anchorish = {
+    href?: string;
+    onClick?: React.MouseEventHandler;
+    target?: string;
+};
+export interface ButtonProps extends Anchorish {
+    variant?: 'primary' | 'accent' | 'secondary' | 'outline' | 'ghost' | 'soft' | 'danger' | 'light' | 'glass';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: IconName | string;
+    iconRight?: IconName | string;
+    iconOnly?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    label?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function Button({ variant, size, icon, iconRight, iconOnly, block, disabled, type, label, href, onClick, target, className, style, children }: ButtonProps): React.JSX.Element;
+export interface IconButtonProps extends Anchorish {
+    icon: IconName | string;
+    label: string;
+    count?: number | string;
+    dot?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function IconButton({ icon, label, count, dot, href, onClick, className, style }: IconButtonProps): React.JSX.Element;
+export type Tone = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeProps {
+    tone?: Tone;
+    solid?: boolean;
+    outline?: boolean;
+    dot?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function Badge({ tone, solid, outline, dot, className, style, children }: BadgeProps): React.JSX.Element;
+export interface FieldProps {
+    label?: string;
+    hint?: string;
+    error?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function Field({ label, hint, error, id, className, style, children }: FieldProps): React.JSX.Element;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    icon?: IconName | string;
+    kbd?: string;
+    size?: 'sm' | 'md';
+    /** 'search' reads --uis-r-search, --uis-search-bg and --uis-search-border (a grey pill in atelier). */
+    variant?: 'default' | 'search';
+}
+export declare function Input({ label, hint, error, icon, kbd, size, variant, id, type, className, style, ...rest }: InputProps): React.JSX.Element;
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    hint?: string;
+    options: Array<string | {
+        label: string;
+        value: string;
+    }>;
+}
+export declare function Select({ label, hint, options, id, className, style, ...rest }: SelectProps): React.JSX.Element;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    hint?: string;
+}
+export declare function Textarea({ label, hint, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
+export interface ToggleProps {
+    label?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Switch({ label, checked, defaultChecked, onChange, className, style }: ToggleProps): React.JSX.Element;
+export declare function Checkbox({ label, checked, defaultChecked, onChange, className, style }: ToggleProps): React.JSX.Element;
+export interface CardProps {
+    variant?: 'default' | 'flat' | 'raised' | 'sunken';
+    interactive?: boolean;
+    flush?: boolean;
+    as?: 'div' | 'article' | 'section' | 'a';
+    href?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function Card({ variant, interactive, flush, as, href, className, style, children }: CardProps): React.JSX.Element;
+export declare function Media({ src, alt, ratio, className, style, children }: {
+    src?: string;
+    alt?: string;
+    ratio?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare function Divider({ vertical, className, style }: {
+    vertical?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Kbd({ children, className, style }: {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export interface TabItem {
+    label: string;
+    value?: string;
+    icon?: IconName | string;
+    href?: string;
+}
+export interface TabsProps {
+    items: Array<TabItem | string>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: 'segmented' | 'pill' | 'underline' | 'plain';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Tabs({ items, value, defaultValue, onChange, variant, className, style }: TabsProps): React.JSX.Element;
+export { Avatar, AvatarGroup, avatarSvg, AVATAR_STYLES, type AvatarProps } from './Avatar';
+export declare function Tooltip({ children, className, style }: {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Toast({ title, children, icon, action, className, style }: {
+    title?: string;
+    children?: React.ReactNode;
+    icon?: IconName | string;
+    action?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Alert({ tone, title, children, icon, className, style }: {
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    children?: React.ReactNode;
+    icon?: IconName | string;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Progress({ value, className, style }: {
+    value?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export interface StatProps {
+    label: string;
+    value: React.ReactNode;
+    delta?: string;
+    trend?: 'up' | 'down';
+    icon?: IconName | string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Stat({ label, value, delta, trend, icon, className, style }: StatProps): React.JSX.Element;
+export interface TableColumn {
+    key: string;
+    label: string;
+    align?: 'left' | 'right' | 'center';
+    width?: string | number;
+}
+/** A cell is any node, or data: { tone, label } renders a status Badge, { strong } bold text. */
+export type TableCell = React.ReactNode | {
+    tone: Tone;
+    label: string;
+} | {
+    strong: string;
+};
+export interface TableProps {
+    columns: TableColumn[];
+    rows: Array<Record<string, TableCell>>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Table({ columns, rows, className, style }: TableProps): React.JSX.Element;
+export declare function Popover({ title, className, style, children }: {
+    title?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export interface MenuItem {
+    label: string;
+    icon?: IconName | string;
+    href?: string;
+    kbd?: string;
+    onClick?: () => void;
+}
+export declare function Menu({ items, className, style }: {
+    items: MenuItem[];
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Chips({ items, className, style }: {
+    items: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }>;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Scrim({ onClick }: {
+    onClick?: () => void;
+}): React.JSX.Element;
+export interface DrawerProps {
+    title?: string;
+    open?: boolean;
+    side?: 'right' | 'left';
+    floating?: boolean;
+    footer?: React.ReactNode;
+    onClose?: () => void;
+    scrim?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function Drawer({ title, open, side, floating, footer, onClose, scrim, className, style, children }: DrawerProps): React.JSX.Element | null;
+export interface DialogProps {
+    title?: string;
+    description?: string;
+    open?: boolean;
+    actions?: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function Dialog({ title, description, open, actions, onClose, className, style, children }: DialogProps): React.JSX.Element | null;