@medable/nucleus-ui 2.0.0

package/chat_panel/src/lib/chat_panel.d.ts

@@ -0,0 +1,48 @@
+import React, { CSSProperties } from 'react';
+import { DropdownItemOnClick } from '../../../dropdown/src';
+export interface ChatPanelMessage {
+    id: string | number;
+    type: 'user' | 'bot';
+    message: React.ReactElement;
+}
+export interface ChatPanelProps {
+    /**
+     * title of the panel
+     */
+    title: string;
+    /**
+     * array of message objects used to populate chat content area
+     */
+    messages: ChatPanelMessage[];
+    /**
+     * callback for submitting messages; message value is passed as an argument
+     */
+    onSubmit: (value: string) => void;
+    /**
+     * close handler that triggers when clicking the close icon
+     */
+    onClose: () => void;
+    /**
+     * callback for file uploads
+     */
+    onUploadFile?: DropdownItemOnClick;
+    /**
+     * callback for handling reverts
+     */
+    onRevert?: DropdownItemOnClick;
+    /**
+     * Optional property for overriding the external border of the chat panel
+     */
+    customBorderProperties?: {
+        border?: CSSProperties['border'];
+        borderTop?: CSSProperties['borderTop'];
+        borderBottom?: CSSProperties['borderBottom'];
+        borderRight?: CSSProperties['borderRight'];
+        borderLeft?: CSSProperties['borderLeft'];
+    };
+}
+/** The Chat Panel provides a chat interface which captures and sends out a
+ * user-inputted message and receives a list of messages to display in the chat
+ * content area. The component can accept various types of chat content
+ * (JSX, HTML, other components, etc.) for its displayed messages. */
+export declare const ChatPanel: ({ title, messages, onSubmit, onClose, onUploadFile, onRevert, customBorderProperties, }: ChatPanelProps) => import("react/jsx-runtime").JSX.Element;

package/chat_panel/src/lib/chat_panel.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Avatar } from '../../../avatar/src';
+import { Button } from '../../../button/src';
+import { Dropdown } from '../../../dropdown/src';
+import { useLocalizeMessage } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { Text } from '../../../typography/src';
+const ChatMessage = ({ type, message }) => {
+    const isUser = type === 'user';
+    return (_jsxs("div", { className: `nucleus-box-border nucleus-flex nucleus-gap-x-4 nucleus-border-solid nucleus-border-x-0 nucleus-border-b-0 nucleus-border-t nucleus-border-t-neutral-200 nucleus-p-4 nucleus-pt-[22px] first:nucleus-border-t-0 ${isUser ? 'nucleus-bg-neutral-0' : 'nucleus-bg-neutral-75'}`, children: [isUser ? (_jsx("div", { className: 'nucleus-box-border nucleus-shrink-0 nucleus-mt-[-4px]', children: _jsx(Avatar, { size: 'sm' }) })) : (_jsx("div", { className: 'nucleus-box-border nucleus-h-8 nucleus-w-8 nucleus-shrink-0 nucleus-bg-white nucleus-mt-[-4px] nucleus-rounded-full nucleus-p-1.5', children: _jsxs("svg", { width: '100%', height: '100%', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsxs("g", { id: 'Logo', clipPath: 'url(#clip0_53_3428)', children: [_jsx("rect", { width: '17.0667', height: '17.0667', transform: 'translate(0.466797 0.466675)', fill: 'white' }), _jsx("path", { id: 'Vector', d: 'M17.5335 0.466675L10.502 5.31361L12.0039 6.35467L15.8268 3.70934V14.2907L9.40973 9.85334H14.1201L0.466797 0.466675V17.5333L7.49826 12.6864L5.9964 11.6453L2.17346 14.2907V3.70934L8.59053 8.14667H3.88013L17.5335 17.5333V0.466675Z', fill: '#6445D7' })] }), _jsx("defs", { children: _jsx("clipPath", { id: 'clip0_53_3428', children: _jsx("rect", { width: '17.0667', height: '17.0667', fill: 'white', transform: 'translate(0.466797 0.466675)' }) }) })] }) })), _jsx("div", { className: 'nucleus-box-border nucleus-flex nucleus-flex-col nucleus-items-start nucleus-gap-y-2 [overflow-wrap:anywhere]', children: message })] }));
+};
+/** The Chat Panel provides a chat interface which captures and sends out a
+ * user-inputted message and receives a list of messages to display in the chat
+ * content area. The component can accept various types of chat content
+ * (JSX, HTML, other components, etc.) for its displayed messages. */
+export const ChatPanel = ({ title, messages, onSubmit, onClose, onUploadFile, onRevert, customBorderProperties = {}, }) => {
+    const [message, setMessage] = useState('');
+    const translate = useLocalizeMessage();
+    const handleSubmit = () => {
+        onSubmit(message);
+        setMessage('');
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    const dropdownItems = [
+        ...(onUploadFile ? [{ id: 'upload', content: translate('Upload File'), onClick: onUploadFile }] : []),
+        ...(onRevert ? [{ id: 'revert', content: translate('Revert'), onClick: onRevert }] : []),
+    ];
+    return (_jsx("div", { className: 'nucleus-pointer-events-auto nucleus-box-border nucleus-h-full nucleus-w-[410px] nucleus-min-w-0 nucleus-font-sans nucleus-shadow-xl', children: _jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-h-full nucleus-flex-col nucleus-divide-neutral-200 nucleus-border-solid nucleus-bg-white nucleus-divide-y nucleus-border nucleus-border-neutral-200', style: customBorderProperties, children: [_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-min-h-0 nucleus-flex-1 nucleus-flex-col', children: [_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-items-center nucleus-justify-between nucleus-border-solid nucleus-border-x-0 nucleus-border-b nucleus-border-t-0 nucleus-border-b-neutral-200 nucleus-py-4 nucleus-pl-5 nucleus-pr-4', children: [_jsx(Text, { as: 'h2', size: 'xs', className: 'nucleus-font-medium nucleus-text-text-secondary', children: title }), _jsx("div", { className: 'nucleus-box-border nucleus-flex nucleus-h-7 nucleus-items-center nucleus-ml-3', children: _jsx(Button, { variant: 'transparent', content: _jsx(Icon, { name: 'close' }), label: translate('close panel'), onClick: onClose, size: 'xs' }) })] }), _jsx("div", { className: 'nucleus-relative nucleus-box-border nucleus-flex-1 nucleus-overflow-y-scroll nucleus-bg-neutral-75', children: messages.map((message) => (_jsx(Fragment, { children: _jsx(ChatMessage, Object.assign({}, message)) }, message.id))) })] }), _jsxs("div", { "data-replicated-value": message, className: 'nucleus-relative nucleus-box-border nucleus-grid nucleus-border-solid nucleus-border-x-0 nucleus-border-b-0 nucleus-border-t-1 after:nucleus-invisible after:nucleus-col-start-1 after:nucleus-col-end-2 after:nucleus-row-start-1 after:nucleus-row-end-2 after:nucleus-box-border after:nucleus-h-auto after:nucleus-max-h-[300px] after:nucleus-w-[408px] after:nucleus-whitespace-pre-wrap after:nucleus-border-none after:nucleus-font-sans after:nucleus-text-sm after:nucleus-font-medium after:nucleus-not-italic after:nucleus-content-[attr(data-replicated-value)_"_"] after:nucleus-mt-0 after:nucleus-py-4 after:nucleus-pl-4 after:nucleus-pr-[72px] after:focus:nucleus-outline-none after:focus:nucleus-ring-1', children: [_jsx("textarea", { id: 'chat-panel', "aria-label": translate('Ask Medable A.I.'), "aria-required": false, rows: 1, placeholder: translate('Type a prompt or ask a question'), className: 'nucleus-order-none nucleus-col-start-1 nucleus-col-end-2 nucleus-row-start-1 nucleus-row-end-2 nucleus-box-border nucleus-flex nucleus-h-auto nucleus-max-h-[300px] nucleus-w-[408px] nucleus-flex-none nucleus-grow-0 nucleus-resize-none nucleus-flex-row nucleus-items-center nucleus-gap-2 nucleus-overflow-auto nucleus-border-none nucleus-bg-neutral-0 nucleus-font-sans nucleus-text-sm nucleus-font-medium nucleus-not-italic nucleus-text-text-secondary nucleus-shadow-sm nucleus-mt-0 nucleus-py-5 nucleus-pl-4 nucleus-pr-[72px] placeholder:nucleus-text-neutral-400 focus:nucleus-outline-none focus:nucleus-ring-1 focus:nucleus-ring-primary-500 focus:nucleus-border-primary-500 disabled:nucleus-bg-neutral-200 disabled:nucleus-text-text-disabled', onChange: (e) => setMessage(e.target.value), onKeyDown: handleKeyDown, value: message }), _jsxs("div", { className: 'nucleus-absolute nucleus-box-border nucleus-flex nucleus-items-center nucleus-bottom-4 nucleus-right-1', children: [_jsx(Button, { variant: 'transparent', content: _jsx(Icon, { name: 'send', color: message ? 'primary' : 'grayLight' }), label: translate('submit message'), onClick: handleSubmit, disabled: !message, size: 'xs' }), dropdownItems.length > 0 && _jsx(Dropdown, { variant: 'kebab', position: 'top', items: dropdownItems })] })] })] }) }));
+};
+//# sourceMappingURL=chat_panel.js.map

package/checkbox/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/checkbox';

package/checkbox/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/checkbox';
+//# sourceMappingURL=index.js.map

package/checkbox/src/lib/checkbox.d.ts

@@ -0,0 +1,65 @@
+declare const CheckboxColors: {
+    blue: {
+        border: string;
+        checkbox: string;
+        ring: string;
+    };
+    green: {
+        border: string;
+        checkbox: string;
+        ring: string;
+    };
+    purple: {
+        border: string;
+        checkbox: string;
+        ring: string;
+    };
+};
+export interface CheckboxProps {
+    /**
+     * Whether the checkbox is checked or not.
+     */
+    checked: boolean;
+    /**
+     * Used to modify the color of the checkbox.
+     */
+    color?: keyof typeof CheckboxColors;
+    /**
+     * Whether the checkbox has error or not.
+     */
+    error?: boolean;
+    /**
+     * Callback when the checkbox is checked or unchecked.
+     * @param checked The new value of the checkbox.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The label displayed next to the checkbox.
+     */
+    label: string;
+    /**
+     * Optional description for the checkbox.
+     */
+    description?: string;
+    /**
+     * Whether the checkbox is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox is indeterminate or not.
+     */
+    indeterminate?: boolean;
+    /**
+     * Data test id of the checkbox.
+     */
+    dataTestId?: string;
+    /**
+     * controls if the label is hidden or not but aria label stays
+     */
+    hideLabel?: boolean;
+}
+/**
+ * Checkbox allows a user to select one or more inputs from a prefilled list of items.
+ */
+export declare const Checkbox: ({ disabled, error, checked, color, onChange, label, hideLabel, description, indeterminate, dataTestId, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/checkbox/src/lib/checkbox.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../typography/src';
+const CheckboxColors = {
+    blue: {
+        border: 'nucleus-bg-blue-50',
+        checkbox: 'peer-checked:peer-hover:nucleus-bg-blue-700 peer-checked:nucleus-bg-blue-600',
+        ring: 'peer-focus:nucleus-ring-blue-700',
+    },
+    green: {
+        border: 'nucleus-bg-green-50',
+        checkbox: 'peer-checked:peer-hover:nucleus-bg-green-900 peer-checked:nucleus-bg-green-800',
+        ring: 'peer-focus:nucleus-ring-green-900',
+    },
+    purple: {
+        border: 'nucleus-bg-purple-50',
+        checkbox: 'peer-checked:peer-hover:nucleus-bg-primary-700 peer-checked:nucleus-bg-primary-500',
+        ring: 'peer-focus:nucleus-ring-primary-700',
+    },
+};
+/**
+ * Checkbox allows a user to select one or more inputs from a prefilled list of items.
+ */
+export const Checkbox = ({ disabled = false, error = false, checked, color = 'purple', onChange, label, hideLabel = false, description = '', indeterminate = false, dataTestId = '', }) => {
+    const dasherizedLabel = label.replace(/\s+/g, '-').toLowerCase();
+    return (_jsxs("span", { className: `nucleus-flex nucleus-flex-row ${hideLabel ? '' : 'nucleus-gap-4'} ${description ? 'nucleus-items-start' : 'nucleus-items-center'}`, "data-testid": dataTestId, children: [_jsxs("span", { className: `nucleus-relative ${description ? 'nucleus-mt-1' : ''}`, children: [_jsx("input", { id: `${dasherizedLabel}-checkbox`, tabIndex: disabled ? -1 : 0, disabled: disabled, className: `nucleus-peer nucleus-absolute nucleus-box-border nucleus-h-4 nucleus-w-4 nucleus-appearance-none nucleus-opacity-0 nucleus-m-0 ${disabled ? '' : 'nucleus-cursor-pointer'}`, checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: 'checkbox' }), _jsx("span", { "aria-labelledby": `${dasherizedLabel}-label-id`, role: 'checkbox', "aria-checked": checked, className: `${disabled ? 'nucleus-bg-neutral-200' : ''}
+               ${error
+                            ? 'nucleus-border-red-500'
+                            : disabled
+                                ? 'nucleus-border-neutral-200'
+                                : checked
+                                    ? `nucleus-border-none ${CheckboxColors[color].checkbox}`
+                                    : 'nucleus-border-neutral-450'} nucleus-box-border nucleus-flex nucleus-h-4 nucleus-w-4 nucleus-items-center nucleus-justify-center nucleus-border-solid nucleus-rounded nucleus-border peer-hover:nucleus-border-2 peer-hover:nucleus-border-neutral-600 
+                peer-focus:nucleus-ring-2 ${CheckboxColors[color].ring} peer-focus:nucleus-ring-offset-2 peer-disabled:peer-hover:nucleus-border-none`, children: checked &&
+                            (indeterminate ? (_jsx("svg", { width: '10', height: '2', viewBox: '0 0 10 2', fill: 'none', children: _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M0.0999756 1C0.0999756 0.734784 0.173725 0.48043 0.305001 0.292893C0.436276 0.105357 0.614324 0 0.799976 0H9.19998C9.38563 0 9.56367 0.105357 9.69495 0.292893C9.82623 0.48043 9.89998 0.734784 9.89998 1C9.89998 1.26522 9.82623 1.51957 9.69495 1.70711C9.56367 1.89464 9.38563 2 9.19998 2H0.799976C0.614324 2 0.436276 1.89464 0.305001 1.70711C0.173725 1.51957 0.0999756 1.26522 0.0999756 1Z', className: disabled ? 'nucleus-fill-neutral-400' : 'nucleus-fill-white' }) })) : (_jsx("svg", { width: '8', height: '8', viewBox: '0 0 10 8', fill: 'none', children: _jsx("path", { d: 'M9.20094 0.793031C9.38841 0.980558 9.49372 1.23487 9.49372 1.50003C9.49372 1.76519 9.38841 2.0195 9.20094 2.20703L4.20094 7.20703C4.01341 7.3945 3.7591 7.49982 3.49394 7.49982C3.22877 7.49982 2.97447 7.3945 2.78694 7.20703L0.786937 5.20703C0.604779 5.01843 0.503985 4.76583 0.506263 4.50363C0.508542 4.24143 0.613711 3.99062 0.799119 3.80521C0.984527 3.6198 1.23534 3.51463 1.49754 3.51236C1.75973 3.51008 2.01233 3.61087 2.20094 3.79303L3.49394 5.08603L7.78694 0.793031C7.97447 0.60556 8.22877 0.500244 8.49394 0.500244C8.7591 0.500244 9.01341 0.60556 9.20094 0.793031Z', className: disabled ? 'nucleus-fill-neutral-400' : 'nucleus-fill-white' }) }))) })] }), _jsxs("span", { className: `nucleus-flex nucleus-flex-col nucleus-text-sm nucleus-leading-tight ${description ? 'nucleus-gap-y-1.5' : ''}`, children: [_jsx("label", { id: `${dasherizedLabel}-label-id`, htmlFor: `${dasherizedLabel}-checkbox`, className: `${error ? 'nucleus-text-red-700' : 'nucleus-text-text-primary'} nucleus-font-medium ${hideLabel ? 'nucleus-sr-only' : ''} ${disabled ? '' : 'nucleus-cursor-pointer'}`, children: _jsx(Text, { as: 'span', size: 'sm', children: label }) }), _jsx("label", { className: 'nucleus-font-normal nucleus-text-text-secondary', children: _jsx(Text, { as: 'span', size: 'sm', children: description }) })] })] }));
+};
+//# sourceMappingURL=checkbox.js.map

package/combobox/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/combobox';

package/combobox/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/combobox';
+//# sourceMappingURL=index.js.map

package/combobox/src/lib/combobox.d.ts

@@ -0,0 +1,128 @@
+export type ComboboxValue<T> = string | ComboboxOption<T>;
+/**
+ * Represents a single option within the Combobox component.
+ */
+export type ComboboxOption<T = string> = {
+    /**
+     * The display text for the option.
+     */
+    label: string;
+    /**
+     * The optional description for the option. If included, the combobox will also filter against this value.
+     */
+    description?: string;
+    /**
+     * The value associated with the option.
+     */
+    value: T;
+    /**
+     * A flag to indicate if the option is disabled.
+     */
+    disabled?: boolean;
+};
+/**
+ * Properties for configuring the Combobox component.
+ */
+export type ComboboxProps<T> = {
+    /**
+     * A data-testid attribute to target the Combobox component in tests.
+     */
+    dataTestId?: string;
+    /**
+     * The label text for the Combobox.
+     */
+    label?: string;
+    /**
+     * A description providing additional information about the Combobox.
+     */
+    description?: string;
+    /**
+     * A flag to indicate if the Combobox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the combobox's dropdown will expand to fit its content, instead of only expanding to the length of the
+     * input.
+     */
+    dropdownFitsContent?: boolean;
+    /**
+     * The size of the Combobox. Allowed values are 'xs', 'base', 'lg' and 'full'.
+     */
+    size?: 'xs' | 'base' | 'lg' | 'full';
+    /**
+     * The label to display when no options are found.
+     */
+    noOptionsFoundLabel: string;
+    /**
+     * a flag to indicate if the combobox is required.
+     */
+    required?: boolean;
+    /**
+     * If true, hides the required indicator on the label.
+     */
+    hideRequiredIndicator?: boolean;
+    /**
+     * A flag to indicate if the Combobox has an error.
+     */
+    hasError?: boolean;
+    /**
+     * An error message to display when `hasError` is true.
+     */
+    errorMessage?: string;
+    /**
+     * Handler function that is called whenever the internal input value changes.
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * Placeholder of the input
+     */
+    placeholder?: string;
+    /**
+     * An optional className to apply additional styles to the Combobox.
+     */
+    className?: string;
+} & ({
+    /**
+     * The current value of the Combobox as a string.
+     */
+    value?: string | null;
+    /**
+     * The default value of the Combobox as a string.
+     * If `value` is not provided, this will be used as the initial value, and the Combobox will be uncontrolled.
+     */
+    defaultValue?: string | null;
+    /**
+     * The handler function called when the Combobox value changes, receiving the updated value as a string.
+     */
+    onChange: (value: string) => void;
+    /**
+     * The list of options for the Combobox as strings.
+     */
+    options: string[];
+} | {
+    /**
+     * The current value of the Combobox as a ComboboxOption.
+     */
+    value?: ComboboxOption<T> | null;
+    /**
+     * The default value of the Combobox as a ComboboxOption.
+     * If `value` is not provided, this will be used as the initial value, and the Combobox will be uncontrolled.
+     */
+    defaultValue?: ComboboxOption<T> | null;
+    /**
+     * The handler function called when the Combobox value changes, receiving the updated value as a ComboboxOption.
+     */
+    onChange: (value: ComboboxOption<T>) => void;
+    /**
+     * The list of options for the Combobox as ComboboxOption objects.
+     */
+    options: ComboboxOption<T>[];
+});
+/**
+ Comboboxes allow users to search for and select an option from a list of options, and comes with complete support for keyboard navigation.
+ @see {@link https://storybook.medable.tech/nucleus-components/?path=/story/combobox--basic} for Storybook
+    documentation
+ @see {@link https://www.figma.com/file/hT1QbhSTM1FlsNJ2HXSSvQ/Nucleus-Design-System?type=design&node-id=2972-53116&t=9ybtnEht9gtBcm0M-0} for Nucleus design
+ @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/} for best accessibility practices
+*/
+export declare const Combobox: <T>({ dataTestId, description, disabled, dropdownFitsContent, errorMessage, hasError, label, noOptionsFoundLabel, onChange, options, required, hideRequiredIndicator, size, value, defaultValue, onInputChange, placeholder, className, }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/combobox/src/lib/combobox.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Combobox as HeadlessCombobobox, Label, Transition } from '@headlessui/react';
+import { Fragment, useMemo, useState } from 'react';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { Icon } from '../../../icon/src';
+import { Text } from '../../../typography/src';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const comboboxWidth = {
+    xs: 'nucleus-w-input-xs',
+    sm: 'nucleus-w-input-sm',
+    base: 'nucleus-w-input-base',
+    lg: 'nucleus-w-input-lg',
+    full: 'nucleus-w-input-full',
+};
+const getDisplayValue = (option) => (typeof option === 'string' ? option : option === null || option === void 0 ? void 0 : option.label);
+/**
+ Comboboxes allow users to search for and select an option from a list of options, and comes with complete support for keyboard navigation.
+ @see {@link https://storybook.medable.tech/nucleus-components/?path=/story/combobox--basic} for Storybook
+    documentation
+ @see {@link https://www.figma.com/file/hT1QbhSTM1FlsNJ2HXSSvQ/Nucleus-Design-System?type=design&node-id=2972-53116&t=9ybtnEht9gtBcm0M-0} for Nucleus design
+ @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/} for best accessibility practices
+*/
+export const Combobox = ({ dataTestId, description, disabled, dropdownFitsContent, errorMessage, hasError, label, noOptionsFoundLabel, onChange, options = [], required, hideRequiredIndicator, size = 'base', value, defaultValue, onInputChange, placeholder, className = '', }) => {
+    const [query, setQuery] = useState('');
+    const filteredOptions = useMemo(() => query === ''
+        ? options
+        : options.filter((option) => {
+            if (typeof option === 'string') {
+                return option.toLowerCase().includes(query.toLowerCase());
+            }
+            const optionDisplayValue = `${option.label} ${option.description || ''}`.toLowerCase();
+            return optionDisplayValue.includes(query.toLowerCase());
+        }), [query, options]);
+    const showNoOptionsFound = filteredOptions.length === 0 && query !== '';
+    return (_jsx(HeadlessCombobobox, { as: 'div', className: twMerge('nucleus-box-border nucleus-inline-flex nucleus-max-w-full nucleus-flex-col nucleus-font-sans', comboboxWidth[size], className), disabled: disabled, onChange: onChange, value: value, defaultValue: defaultValue, children: ({ open }) => (_jsxs(_Fragment, { children: [label || description ? (_jsxs("div", { className: 'nucleus-box-border nucleus-max-w-full nucleus-mb-2', children: [label && (_jsx(Label, { children: _jsxs(Text, { size: 'sm', children: [_jsx("span", { className: 'nucleus-break-words nucleus-font-medium', children: label }), required && !hideRequiredIndicator && _jsx("span", { className: 'nucleus-text-text-error', children: " *" })] }) })), description && (_jsx("div", { className: 'nucleus-box-border', children: _jsx(Text, { size: 'xs', children: _jsx("span", { className: 'nucleus-font-medium nucleus-text-text-secondary', children: description }) }) }))] })) : null, _jsxs("div", { className: 'nucleus-relative nucleus-box-border nucleus-w-full', children: [_jsx(HeadlessCombobobox.Input, { "data-testid": dataTestId, displayValue: getDisplayValue, placeholder: placeholder, onChange: (event) => {
+                                onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event.target.value);
+                                setQuery(event.target.value);
+                            }, className: `nucleus-box-border nucleus-flex nucleus-h-10 nucleus-max-w-full nucleus-justify-start nucleus-font-sans nucleus-text-sm nucleus-font-medium nucleus-shadow-sm nucleus-rounded-md nucleus-border nucleus-py-2 nucleus-pl-4 nucleus-pr-10 nucleus-truncate ${comboboxWidth[size]} ${hasError
+                                ? 'nucleus-text-text-error nucleus-border-text-error focus-visible:nucleus-outline-text-error'
+                                : 'nucleus-text-text-primary hover:nucleus-border-neutral-500 ui-disabled:nucleus-bg-neutral-200 ui-disabled:nucleus-border-neutral-200 ui-disabled:nucleus-text-text-disabled'} ${!hasError && open ? 'nucleus-bg-primary-75 nucleus-outline-none nucleus-border-primary-75 nucleus-border-0' : 'nucleus-border-solid nucleus-bg-white nucleus-border-neutral-300 hover:nucleus-bg-neutral-50 focus-visible:nucleus-bg-neutral-50 focus-visible:nucleus-outline-primary-500'}` }), _jsx(HeadlessCombobobox.Button, { as: 'div', className: 'nucleus-absolute nucleus-flex nucleus-items-center nucleus-inset-y-0 nucleus-right-4 ui-not-disabled:nucleus-cursor-pointer', role: 'button', children: ({ open, disabled }) => (_jsx(Icon, { name: open ? 'chevronUp' : 'chevronDown', color: disabled ? 'grayLight' : 'gray', "aria-hidden": 'true', size: 'sm' })) })] }), hasError && errorMessage ? (_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-items-center nucleus-justify-start nucleus-gap-2 nucleus-bottom-0 nucleus-mt-2.5', children: [_jsx(Icon, { name: 'error', color: 'red', size: 'sm' }), _jsx(Text, { size: 'xs', children: _jsx("span", { className: 'nucleus-font-medium nucleus-text-text-error', children: errorMessage }) })] })) : null, _jsx("div", { className: 'nucleus-relative nucleus-box-border nucleus-w-full nucleus-mt-1', children: _jsx(Transition, { as: Fragment, leave: 'nucleus-transition nucleus-ease-in nucleus-duration-100', leaveFrom: 'nucleus-opacity-100', leaveTo: 'nucleus-opacity-0', afterLeave: () => setQuery(''), children: _jsx(HeadlessCombobobox.Options, { className: `nucleus-absolute nucleus-z-10 nucleus-box-border nucleus-max-h-64 nucleus-list-none nucleus-overflow-auto nucleus-bg-white nucleus-text-text-primary nucleus-shadow-xl nucleus-left-0 nucleus-top-0 nucleus-m-0 nucleus-rounded-md nucleus-p-0 ${dropdownFitsContent ? 'nucleus-min-w-full' : 'nucleus-w-full nucleus-max-w-full'}`, children: showNoOptionsFound ? (_jsx("div", { className: 'nucleus-box-border nucleus-px-4 nucleus-py-2', children: _jsx(Text, { size: 'sm', children: noOptionsFoundLabel }) })) : (filteredOptions.map((option, index) => {
+                                const optionDisplayValue = typeof option === 'string' ? option : option.label;
+                                const optionDisabled = typeof option === 'string' ? false : option.disabled;
+                                return (_jsx(HeadlessCombobobox.Option
+                                // eslint-disable-next-line react/no-array-index-key
+                                , { "data-testid": `nucleus-combobox-option-${index}`, className: `
+                      nucleus-group nucleus-box-border nucleus-cursor-pointer nucleus-select-none nucleus-px-4 nucleus-py-2
+                      hover:nucleus-bg-neutral-200 active:nucleus-bg-primary-700
+                      active:nucleus-text-white aria-disabled:nucleus-pointer-events-none
+                      aria-disabled:nucleus-bg-neutral-200
+                      aria-disabled:nucleus-text-text-disabled aria-selected:nucleus-bg-primary-500 aria-selected:nucleus-text-white
+                    `, value: option, disabled: optionDisabled, children: typeof option === 'object' ? (_jsxs("div", { className: 'nucleus-flex nucleus-flex-col nucleus-box-border', children: [_jsx(Text, { size: 'sm', children: _jsx("span", { className: 'nucleus-box-border nucleus-block nucleus-truncate', children: optionDisplayValue }) }), option.description && (_jsx(Text, { size: 'sm', className: 'nucleus-text-text-secondary', children: _jsx("span", { className: 'nucleus-box-border nucleus-block nucleus-truncate group-aria-selected:nucleus-text-white group-active:nucleus-text-white group-aria-disabled:nucleus-text-text-disabled', children: option.description }) }))] })) : (optionDisplayValue) }, `${optionDisplayValue}-${index}`));
+                            })) }) }) })] })) }));
+};
+//# sourceMappingURL=combobox.js.map

package/date_format/src/index.d.ts

@@ -0,0 +1,3 @@
+export { DateTimeFormat } from './lib/date_time_format';
+export { useDateTimeFormat } from './lib/use_date_time_format';
+export type { DateFormatBaseProps, DateTimeFormatProps } from './lib/date_time_format';

package/date_format/src/index.js

@@ -0,0 +1,3 @@
+export { DateTimeFormat } from './lib/date_time_format';
+export { useDateTimeFormat } from './lib/use_date_time_format';
+//# sourceMappingURL=index.js.map

package/date_format/src/lib/date_time_format.d.ts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+export type DateFormatBaseProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /**
+     * When false, include the time in the formatted output.
+     */
+    dateOnly?: boolean;
+    /**
+     * When true, include seconds in the formatted output (date-time only).
+     */
+    showSeconds?: boolean;
+    /**
+     * Sets the data-testid attribute for the component.
+     */
+    dataTestId?: string;
+};
+type InstantVariantProps = DateFormatBaseProps & {
+    /**
+     * The date/time value to display.
+     */
+    date: string | Date;
+    /**
+     * Use "instant" when the goal is to display the date in the time zone of the user
+     * who is navigating the system (user profile or browser).
+     * Defaults to "instant".
+     */
+    variant?: 'instant';
+    timeZone?: never;
+    showTimeZoneName?: never;
+};
+type ZonedVariantProps = DateFormatBaseProps & {
+    /**
+     * The date/time value to display.
+     */
+    date: string | Date;
+    /**
+     * Use "zoned" when the time zone comes from your data (e.g., a stored event time zone).
+     * If you want the output in the viewer’s time zone, use "instant" instead.
+     */
+    variant: 'zoned';
+    /**
+     * IANA time zone identifier for the date’s own time zone (e.g., "America/New_York").
+     *
+     * This should come from your data, not the user’s time zone.
+     */
+    timeZone: string;
+    /**
+     * Controls when the time zone name is included in the formatted output.
+     */
+    showTimeZoneName?: 'auto' | 'always';
+};
+type PlainDateVariantProps = Omit<DateFormatBaseProps, 'dateOnly' | 'showSeconds'> & {
+    /**
+     * The date value to display (ISO8601 local date, e.g., "2026-12-30").
+     */
+    date: string;
+    /**
+     * Ignored for plain-date.
+     */
+    dateOnly?: boolean;
+    /**
+     * Ignored for plain-date.
+     */
+    showSeconds?: never;
+    /**
+     * Use "plain-date" when the value is a local date (no time zone).
+     */
+    variant: 'plain-date';
+    timeZone?: never;
+    showTimeZoneName?: never;
+};
+export type DateTimeFormatProps = InstantVariantProps | ZonedVariantProps | PlainDateVariantProps;
+/**
+ * DateTimeFormat displays a localized, formatted date for instant or zoned values.
+ */
+export declare const DateTimeFormat: (props: DateTimeFormatProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/date_format/src/lib/date_time_format.js

@@ -0,0 +1,24 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDateTimeFormat } from './use_date_time_format';
+/**
+ * DateTimeFormat displays a localized, formatted date for instant or zoned values.
+ */
+export const DateTimeFormat = (props) => {
+    const { dataTestId, date, timeZone, variant, dateOnly, showSeconds, showTimeZoneName } = props, rest = __rest(props, ["dataTestId", "date", "timeZone", "variant", "dateOnly", "showSeconds", "showTimeZoneName"]);
+    const { formatDateTime, formatDateTimeWithZone, formatPlainDate } = useDateTimeFormat();
+    const isPlainDate = variant === 'plain-date';
+    const isZoned = variant === 'zoned';
+    const formattedValue = isPlainDate
+        ? formatPlainDate(date)
+        : isZoned
+            ? formatDateTimeWithZone(date, {
+                dateOnly,
+                timeZone: timeZone,
+                showTimeZoneName,
+                showSeconds,
+            })
+            : formatDateTime(date, { dateOnly, showSeconds });
+    return (_jsx("span", Object.assign({ "data-testid": dataTestId }, rest, { children: formattedValue })));
+};
+//# sourceMappingURL=date_time_format.js.map

package/date_format/src/lib/use_date_time_format.d.ts

@@ -0,0 +1,31 @@
+type InstantFormatOptions = {
+    dateOnly?: boolean;
+    showSeconds?: boolean | 'never' | 'always';
+};
+type ZonedFormatOptions = {
+    dateOnly?: boolean;
+    timeZone: string;
+    showTimeZoneName?: 'auto' | 'always';
+    showSeconds?: boolean | 'never' | 'always';
+};
+/**
+ * useDateTimeFormat returns formatters for localized instant, zoned, and plain-date values.
+ *
+ * Usage:
+ * - `formatDateTime(date, { dateOnly, showSeconds })` for viewer time zone (user profile or OS).
+ * - `formatDateTimeWithZone(date, { timeZone, dateOnly, showTimeZoneName, showSeconds })` when the time zone is defined by
+ *   your data (e.g. stored event time zone).
+ * - `formatPlainDate(date)` for ISO local dates (YYYY-MM-DD) without time zone or time.
+ *
+ * Example:
+ * const { formatDateTime, formatDateTimeWithZone, formatPlainDate } = useDateTimeFormat();
+ * formatDateTime(new Date(), { showSeconds: true });
+ * formatDateTimeWithZone(new Date(), { timeZone: 'America/New_York', showTimeZoneName: 'always' });
+ * formatPlainDate('2026-12-30');
+ */
+export declare const useDateTimeFormat: () => {
+    formatDateTime: (_date: string | Date, options?: InstantFormatOptions) => string;
+    formatDateTimeWithZone: (_date: string | Date, options: ZonedFormatOptions) => string;
+    formatPlainDate: (_date: string) => string;
+};
+export {};