@beydesign/storybook 0.2.3 → 0.2.6

package/dist/stories/Drawer/DrawerNavItem.stories.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerNavItem } from './DrawerNavItem';
+import { DrawerNavItemState, DrawerNavItemHierarchy, DrawerSize, } from './types';
+const meta = {
+    title: 'Design System/Components/Drawer/DrawerNavItem',
+    component: DrawerNavItem,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6940-28399',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: { control: 'text', description: 'Label text' },
+        icon: { control: 'text', description: 'Phosphor icon name' },
+        state: {
+            control: 'select',
+            options: Object.values(DrawerNavItemState),
+            description: 'Visual state',
+            table: { defaultValue: { summary: 'Inactive' } },
+        },
+        size: {
+            control: 'inline-radio',
+            options: Object.values(DrawerSize),
+            description: 'Expanded (icon + label) or Collapsed (icon only)',
+            table: { defaultValue: { summary: 'Expanded' } },
+        },
+        hierarchy: {
+            control: 'inline-radio',
+            options: Object.values(DrawerNavItemHierarchy),
+            description: 'Top-level (First) or nested (Secondary)',
+            table: { defaultValue: { summary: 'First' } },
+        },
+        showBadge: { control: 'boolean' },
+    },
+    args: {
+        text: 'Avatars',
+        icon: 'UserFocus',
+        state: DrawerNavItemState.Inactive,
+        size: DrawerSize.Expanded,
+        hierarchy: DrawerNavItemHierarchy.First,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 206,
+                padding: 16,
+                backgroundColor: 'var(--color-background-bg-page-contrast)',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Active = {
+    args: { state: DrawerNavItemState.Active, text: 'Home', icon: 'House' },
+};
+export const Inactive = {
+    args: { state: DrawerNavItemState.Inactive },
+};
+export const Hover = {
+    args: { state: DrawerNavItemState.Hover },
+};
+export const Disabled = {
+    args: { state: DrawerNavItemState.Disabled, showBadge: true },
+};
+export const Secondary = {
+    args: {
+        hierarchy: DrawerNavItemHierarchy.Secondary,
+        text: 'My Avatars',
+        icon: 'User',
+    },
+};
+export const Collapsed = {
+    args: { size: DrawerSize.Collapsed, state: DrawerNavItemState.Active },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 68,
+                padding: 16,
+                backgroundColor: 'var(--color-background-bg-page-contrast)',
+            }, children: _jsx(Story, {}) })),
+    ],
+};

package/dist/stories/Drawer/DrawerProfile.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawerProfileProps } from './types';
+/**
+ * User profile footer for the {@link Drawer}: avatar plus name and email.
+ * Collapses to just the avatar. When `menuItems` are supplied, clicking the
+ * profile drops an inline menu directly below the row (e.g. a "Log out"
+ * action), styled like the drawer's nav items so it reads as part of the drawer
+ * rather than a floating overlay. The profile row itself stays in place.
+ */
+export declare const DrawerProfile: React.FC<DrawerProfileProps>;

package/dist/stories/Drawer/DrawerProfile.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { DrawerSize } from './types';
+import { Avatar, AvatarSize, AvatarStyle } from '../UI';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const Row = styled.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  padding: ${({ $clickable, $collapsed }) => $clickable && !$collapsed
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)'
+    : '0'};
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  background-color: ${({ $active }) => $active ? 'var(--color-background-bg-element)' : 'transparent'};
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: ${({ $clickable }) => $clickable ? 'var(--color-background-bg-element)' : 'transparent'};
+  }
+`;
+const TextColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+`;
+const TextLine = styled.span `
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+/** Trailing caret on the profile row that flips when the menu is open. */
+const Chevron = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--color-text-text-subtle);
+  transform: rotate(${({ $open }) => ($open ? '180deg' : '0deg')});
+  transition: transform 0.25s ease-in-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+/**
+ * Collapsible wrapper for the menu that drops below the profile row. Animates
+ * height with the `grid-template-rows: 0fr -> 1fr` trick so it reveals/hides
+ * smoothly without measuring the content.
+ */
+const Menu = styled.div `
+  display: grid;
+  grid-template-rows: ${({ $open }) => ($open ? '1fr' : '0fr')};
+  transition: grid-template-rows 0.25s ease-in-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const MenuClip = styled.div `
+  overflow: hidden;
+  min-height: 0;
+`;
+const MenuList = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xxs, 2px);
+  padding-top: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  margin-top: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  border-top: 1px solid var(--color-border-border-subtle);
+`;
+/** Menu rows reuse the nav-item look so they read as part of the drawer. */
+const MenuItemButton = styled.button `
+  appearance: none;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: ${({ $destructive }) => $destructive
+    ? 'var(--color-text-text-error)'
+    : 'var(--color-text-text-title)'};
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: var(--color-background-bg-element);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-border-component);
+    outline-offset: -2px;
+  }
+`;
+/**
+ * User profile footer for the {@link Drawer}: avatar plus name and email.
+ * Collapses to just the avatar. When `menuItems` are supplied, clicking the
+ * profile drops an inline menu directly below the row (e.g. a "Log out"
+ * action), styled like the drawer's nav items so it reads as part of the drawer
+ * rather than a floating overlay. The profile row itself stays in place.
+ */
+export const DrawerProfile = ({ size = DrawerSize.Expanded, name, email, avatarImage, avatarText, menuItems, onClick, className, style, testId, }) => {
+    const isCollapsed = size === DrawerSize.Collapsed;
+    const hasMenu = Boolean(menuItems && menuItems.length > 0);
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    // Close the inline menu on outside click or Escape.
+    useEffect(() => {
+        if (!open)
+            return;
+        const handlePointer = (event) => {
+            if (!containerRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const handleKey = (event) => {
+            if (event.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handlePointer);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('mousedown', handlePointer);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [open]);
+    const clickable = hasMenu || Boolean(onClick);
+    const handleRowClick = () => {
+        if (hasMenu) {
+            setOpen((prev) => !prev);
+        }
+        else {
+            onClick?.();
+        }
+    };
+    const handleItemClick = (item) => {
+        setOpen(false);
+        item.onClick?.();
+    };
+    return (_jsxs(Container, { ref: containerRef, className: className, style: style, "data-testid": testId, children: [_jsxs(Row, { "$collapsed": isCollapsed, "$clickable": clickable, "$active": hasMenu && open, onClick: handleRowClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-expanded": hasMenu ? open : undefined, onKeyDown: clickable
+                    ? (event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault();
+                            handleRowClick();
+                        }
+                    }
+                    : undefined, children: [_jsx(Avatar, { size: AvatarSize.sm, border: true, avatarStyle: avatarImage ? AvatarStyle.Picture : AvatarStyle.Letters, image: avatarImage, text: avatarText ?? name }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(TextColumn, { children: [_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: name }) }), email && (_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: email }) }))] }), hasMenu && (_jsx(Chevron, { "$open": open, children: getIconComponent('CaretDown', { size: 16, weight: 'bold' }) }))] }))] }), hasMenu && (_jsx(Menu, { "$open": open, "aria-hidden": !open, children: _jsx(MenuClip, { children: _jsx(MenuList, { role: "menu", children: menuItems?.map((item, index) => (_jsxs(MenuItemButton, { type: "button", role: "menuitem", tabIndex: open ? 0 : -1, "$destructive": Boolean(item.destructive), "$collapsed": isCollapsed, title: isCollapsed ? item.label : undefined, onClick: () => handleItemClick(item), children: [item.icon &&
+                                    getIconComponent(item.icon, {
+                                        size: 20,
+                                        color: 'currentColor',
+                                    }), !isCollapsed && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "inherit", children: item.label }))] }, index))) }) }) }))] }));
+};

package/dist/stories/Drawer/DrawerProfile.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DrawerProfile } from './DrawerProfile';
+declare const meta: Meta<typeof DrawerProfile>;
+export default meta;
+type Story = StoryObj<typeof DrawerProfile>;
+export declare const WithInitials: Story;
+export declare const WithMenu: Story;
+export declare const WithImage: Story;
+export declare const Collapsed: Story;

package/dist/stories/Drawer/DrawerProfile.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerProfile } from './DrawerProfile';
+import { DrawerSize } from './types';
+const meta = {
+    title: 'Design System/Components/Drawer/DrawerProfile',
+    component: DrawerProfile,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6940-28477',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: Object.values(DrawerSize),
+            table: { defaultValue: { summary: 'Expanded' } },
+        },
+        name: { control: 'text' },
+        email: { control: 'text' },
+        avatarImage: { control: 'text' },
+    },
+    args: {
+        size: DrawerSize.Expanded,
+        name: 'Emma Novak',
+        email: 'emma@example.com',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 230,
+                padding: 16,
+                backgroundColor: 'var(--color-background-bg-page-contrast)',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const WithInitials = {};
+export const WithMenu = {
+    args: {
+        menuItems: [
+            { label: 'Account settings', icon: 'Gear', onClick: () => undefined },
+            {
+                label: 'Log out',
+                icon: 'SignOut',
+                destructive: true,
+                onClick: () => undefined,
+            },
+        ],
+    },
+};
+export const WithImage = {
+    args: {
+        avatarImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces',
+    },
+};
+export const Collapsed = {
+    args: { size: DrawerSize.Collapsed },
+};

package/dist/stories/Drawer/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Drawer';
+export * from './DrawerNavItem';
+export * from './DrawerCreditsCard';
+export * from './DrawerProfile';
+export * from './DrawerIcons';
+export * from './types';

package/dist/stories/Drawer/index.js

@@ -0,0 +1,6 @@
+export * from './Drawer';
+export * from './DrawerNavItem';
+export * from './DrawerCreditsCard';
+export * from './DrawerProfile';
+export * from './DrawerIcons';
+export * from './types';

package/dist/stories/Drawer/types.d.ts

@@ -0,0 +1,164 @@
+import { CSSProperties } from 'react';
+import { IconName } from '../../utils';
+/**
+ * Expanded / collapsed size shared across the Drawer and its sub-components.
+ */
+export declare enum DrawerSize {
+    Expanded = "Expanded",
+    Collapsed = "Collapsed"
+}
+/**
+ * Visual state of a single navigation item.
+ * `Hover` is mostly useful for documentation/Storybook — at runtime an
+ * `Inactive` item also picks up the hover styling on real pointer hover.
+ */
+export declare enum DrawerNavItemState {
+    Active = "Active",
+    Inactive = "Inactive",
+    Hover = "Hover",
+    Disabled = "Disabled"
+}
+/**
+ * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
+ * `Secondary` is a nested sub-item (28px row, lighter weight).
+ */
+export declare enum DrawerNavItemHierarchy {
+    First = "First",
+    Secondary = "Secondary"
+}
+/**
+ * Props for the standalone {@link DrawerNavItem} component.
+ */
+export interface DrawerNavItemProps {
+    /** Label text. Hidden (and used as the hover tooltip) when collapsed. */
+    text: string;
+    /** Phosphor icon name rendered to the left of the label. */
+    icon: IconName;
+    /** Visual state of the item. */
+    state?: DrawerNavItemState;
+    /** Expanded (icon + label) or Collapsed (icon only). */
+    size?: DrawerSize;
+    /** Top-level (`First`) or nested (`Secondary`) item. */
+    hierarchy?: DrawerNavItemHierarchy;
+    /** Show a trailing badge (e.g. "Coming Soon"). Hidden when collapsed. */
+    showBadge?: boolean;
+    /** Text for the trailing badge. */
+    badgeText?: string;
+    /** Click handler. Not fired when the item is disabled. */
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    /** Renders as `data-testid` for testing. */
+    testId?: string;
+}
+/**
+ * Props for the standalone {@link DrawerCreditsCard} component.
+ */
+export interface DrawerCreditsCardProps {
+    /** Expanded (full card) or Collapsed (icon only, details in a popover). */
+    size?: DrawerSize;
+    /** Credits consumed so far. */
+    usedCredits?: number;
+    /** Total credits available in the plan. */
+    maxCredits?: number;
+    /** Title/link label. Defaults to "Upgrade plan". */
+    upgradeLabel?: string;
+    /**
+     * Overrides the auto-generated "{used} credits used from {max}" caption.
+     */
+    creditsCaption?: string;
+    /** Leading icon. Defaults to the gem glyph. */
+    icon?: IconName;
+    /** Lines shown in the info tooltip / collapsed popover. */
+    infoLines?: string[];
+    /** Fired when the title or upgrade button is clicked. */
+    onUpgradeClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
+/**
+ * An item in the {@link DrawerProfile} click menu.
+ */
+export interface DrawerProfileMenuItem {
+    label: string;
+    /** Optional leading Phosphor icon. */
+    icon?: IconName;
+    /** Render in the error/destructive colour (e.g. "Log out"). */
+    destructive?: boolean;
+    onClick?: () => void;
+}
+/**
+ * Props for the standalone {@link DrawerProfile} footer component.
+ */
+export interface DrawerProfileProps {
+    /** Expanded (avatar + text) or Collapsed (avatar only). */
+    size?: DrawerSize;
+    /** Display name. */
+    name: string;
+    /** Secondary line, usually the email. */
+    email?: string;
+    /** Avatar image URL. When omitted, initials are rendered instead. */
+    avatarImage?: string;
+    /** Overrides the initials source (defaults to `name`). */
+    avatarText?: string;
+    /**
+     * When provided, clicking the profile drops an inline menu with these items
+     * (e.g. a "Log out" action) directly below the profile row instead of firing
+     * `onClick`.
+     */
+    menuItems?: DrawerProfileMenuItem[];
+    /** Click handler for the whole profile row (ignored when `menuItems` is set). */
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
+/**
+ * A single entry in the {@link Drawer}'s `navItems` list.
+ */
+export interface DrawerNavItemConfig {
+    /** Stable identifier used to resolve the active item (falls back to `text`). */
+    key?: string;
+    text: string;
+    icon: IconName;
+    hierarchy?: DrawerNavItemHierarchy;
+    /** Force a state. When omitted it is derived from `activeKey` / `disabled`. */
+    state?: DrawerNavItemState;
+    disabled?: boolean;
+    showBadge?: boolean;
+    badgeText?: string;
+    /** When set, clicking navigates to this URL. */
+    link?: string;
+    onClick?: () => void;
+}
+/**
+ * Props for the composed {@link Drawer} component.
+ */
+export interface DrawerProps {
+    /** Navigation entries rendered in the scrollable top section. */
+    navItems: DrawerNavItemConfig[];
+    /** Key (or text) of the currently active item. */
+    activeKey?: string;
+    /** Controlled collapsed state. Provide together with `onToggle`. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. Defaults to `false`. */
+    defaultCollapsed?: boolean;
+    /** Fired with the next collapsed value whenever the toggle is pressed. */
+    onToggle?: (collapsed: boolean) => void;
+    /** Show the floating collapse/expand toggle. Defaults to `true`. */
+    showToggle?: boolean;
+    /** Credits card configuration. Omit to hide the card. */
+    credits?: Omit<DrawerCreditsCardProps, 'size' | 'className' | 'style'>;
+    /** User profile footer configuration. Omit to hide the footer. */
+    profile?: Omit<DrawerProfileProps, 'size' | 'className' | 'style'>;
+    /** Logo appearance overrides. */
+    logo?: {
+        color?: string;
+        gradient?: string;
+        svgUrl?: string;
+    };
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}

package/dist/stories/Drawer/types.js

@@ -0,0 +1,29 @@
+/**
+ * Expanded / collapsed size shared across the Drawer and its sub-components.
+ */
+export var DrawerSize;
+(function (DrawerSize) {
+    DrawerSize["Expanded"] = "Expanded";
+    DrawerSize["Collapsed"] = "Collapsed";
+})(DrawerSize || (DrawerSize = {}));
+/**
+ * Visual state of a single navigation item.
+ * `Hover` is mostly useful for documentation/Storybook — at runtime an
+ * `Inactive` item also picks up the hover styling on real pointer hover.
+ */
+export var DrawerNavItemState;
+(function (DrawerNavItemState) {
+    DrawerNavItemState["Active"] = "Active";
+    DrawerNavItemState["Inactive"] = "Inactive";
+    DrawerNavItemState["Hover"] = "Hover";
+    DrawerNavItemState["Disabled"] = "Disabled";
+})(DrawerNavItemState || (DrawerNavItemState = {}));
+/**
+ * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
+ * `Secondary` is a nested sub-item (28px row, lighter weight).
+ */
+export var DrawerNavItemHierarchy;
+(function (DrawerNavItemHierarchy) {
+    DrawerNavItemHierarchy["First"] = "First";
+    DrawerNavItemHierarchy["Secondary"] = "Secondary";
+})(DrawerNavItemHierarchy || (DrawerNavItemHierarchy = {}));

package/dist/stories/Form/TextInput.js

@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
 import { getIconComponent } from '../../utils';
-export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, fullWidth = false, leadingIcon, }) => {
     const [focused, setFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const isPassword = type === 'password';
@@ -24,13 +24,19 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
     const iconColor = disabled
         ? 'var(--color-text-text-disabled)'
         : 'var(--color-foreground-fg-secondary)';
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : undefined, sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
                         ? 'none'
                         : '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
                                 ? '1px solid var(--color-border-border-error)'
                                 : focused
                                     ? '1px solid var(--color-border-border-component-active)'
-                                    : 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    : 'transparent'}`, children: [leadingIcon &&
+                                    getIconComponent(leadingIcon, {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: iconColor,
+                                        'aria-hidden': 'true',
+                                    }), _jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                         border: 'none',
                                         outline: 'none',
                                         width: '100%',

package/dist/stories/Form/TextInput.stories.d.ts

@@ -145,11 +145,34 @@ declare const meta: {
                 };
             };
         };
+        fullWidth: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        leadingIcon: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithLeadingIcon: Story;
 export declare const Password: Story;
 export declare const PasswordWithoutToggle: Story;
 export declare const Email: Story;
+export declare const SideBySideFullWidth: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextInput } from './TextInput';
 const meta = {
     title: 'Design System/Components/Form/TextInput',
@@ -113,6 +114,21 @@ const meta = {
                 defaultValue: { summary: 'true' },
             },
         },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Whether the input fills its container and may shrink below the default min-width (use for side-by-side fields)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        leadingIcon: {
+            control: 'text',
+            description: 'Icon rendered before the input value (e.g. a search glass). Accepts a Phosphor icon name.',
+            table: {
+                type: { summary: 'IconName' },
+            },
+        },
     },
 };
 export default meta;
@@ -124,6 +140,14 @@ export const Default = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const WithLeadingIcon = {
+    args: {
+        value: '',
+        placeholder: 'Search',
+        leadingIcon: 'MagnifyingGlass',
+        onChange: () => { },
+    },
+};
 export const Password = {
     args: {
         label: 'Password',
@@ -153,3 +177,12 @@ export const Email = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const SideBySideFullWidth = {
+    args: {
+        label: 'First name',
+        value: 'Anna',
+        fullWidth: true,
+        onChange: () => { },
+    },
+    render: (args) => (_jsxs("div", { style: { display: 'flex', gap: '8px', width: '388px' }, children: [_jsx("div", { style: { minWidth: 0, flex: 1 }, children: _jsx(TextInput, { ...args, label: "First name", value: "Anna" }) }), _jsx("div", { style: { minWidth: 0, flex: 1 }, children: _jsx(TextInput, { ...args, label: "Last name", value: "Smith" }) })] })),
+};