@common-origin/design-system 2.20.0 → 2.21.0

package/dist/components/atoms/AILabel/AILabel.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type AILabelKind = 'suggested' | 'removal';
+export type AILabelSize = 'small' | 'medium';
+export interface AILabelProps {
+    /**
+     * What the agent proposes for the item: a change or addition ("Suggested"), or its removal
+     * ("Will be removed"). The wording is fixed so it reads the same in every product (decision 0046).
+     * @default 'suggested'
+     */
+    kind?: AILabelKind;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense lists, medium (24px) elsewhere.
+     * @default 'medium'
+     */
+    size?: AILabelSize;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+export declare const AILabel: React.FC<AILabelProps>;

package/dist/components/atoms/AILabel/AILabel.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type AILabelKind = 'suggested' | 'removal';
+export type AILabelSize = 'small' | 'medium';
+export interface AILabelProps {
+    /**
+     * What the agent proposes for the item: a change or addition ("Suggested"), or its removal
+     * ("Will be removed"). The wording is fixed so it reads the same in every product (decision 0046).
+     * @default 'suggested'
+     */
+    kind?: AILabelKind;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense lists, medium (24px) elsewhere.
+     * @default 'medium'
+     */
+    size?: AILabelSize;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+export declare const AILabel: React.FC<AILabelProps>;

package/dist/components/atoms/AILabel/AILabel.mjs

@@ -0,0 +1,94 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color,
+  typography = semantic.typography,
+  size = semantic.size;
+var labels = {
+  suggested: 'Suggested',
+  removal: 'Will be removed'
+};
+var sizeConfig = {
+  small: {
+    font: typography.caption,
+    gap: semantic.space[100],
+    icon: 'xs'
+  },
+  medium: {
+    font: typography.small,
+    gap: semantic.space[200],
+    icon: 'sm'
+  }
+};
+var StyledAILabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AILabel__StyledAILabel",
+  componentId: "sc-qknkn-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+  var $size = _a.$size;
+  return size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].font;
+}, color.text.ai);
+var StyledIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "AILabel__StyledIcon",
+  componentId: "sc-qknkn-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  color: ", ";\n"
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */])), color.icon.ai);
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+var AILabel = function AILabel(_a) {
+  var _b = _a.kind,
+    kind = _b === void 0 ? 'suggested' : _b,
+    _c = _a.size,
+    labelSize = _c === void 0 ? 'medium' : _c,
+    dataTestId = _a["data-testid"];
+  return jsxs(StyledAILabel, {
+    "$size": labelSize,
+    "data-testid": dataTestId,
+    children: [jsx(StyledIcon, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: "ai",
+        size: sizeConfig[labelSize].icon,
+        iconColor: "inherit"
+      })
+    }), labels[kind]]
+  });
+};
+AILabel.displayName = 'AILabel';
+var templateObject_1, templateObject_2;
+
+export { AILabel };
+//# sourceMappingURL=AILabel.mjs.map

package/dist/components/atoms/AILabel/AILabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AILabel.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/AILabel/index.d.mts

@@ -0,0 +1 @@
+export * from './AILabel.mjs';

package/dist/components/atoms/AILabel/index.d.ts

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

package/dist/components/atoms/Chip/SuggestionChip.d.mts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface SuggestionChipProps {
+    /** The suggestion. It's also the button's accessible name, so keep it short and self-explanatory. */
+    children: React.ReactNode;
+    /** Called when the suggestion is picked. Put its text in the input; never send it (decision 0046). */
+    onClick: () => void;
+    /** Disables the chip */
+    disabled?: boolean;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - A native button: Enter and Space pick it, and its text is its accessible name
+ * - Outlined, with the naked hover and pressed fills; no selected state
+ * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
+ */
+export declare const SuggestionChip: React.FC<SuggestionChipProps>;

package/dist/components/atoms/Chip/SuggestionChip.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface SuggestionChipProps {
+    /** The suggestion. It's also the button's accessible name, so keep it short and self-explanatory. */
+    children: React.ReactNode;
+    /** Called when the suggestion is picked. Put its text in the input; never send it (decision 0046). */
+    onClick: () => void;
+    /** Disables the chip */
+    disabled?: boolean;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - A native button: Enter and Space pick it, and its text is its accessible name
+ * - Outlined, with the naked hover and pressed fills; no selected state
+ * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
+ */
+export declare const SuggestionChip: React.FC<SuggestionChipProps>;

package/dist/components/atoms/Chip/SuggestionChip.mjs

@@ -0,0 +1,61 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { forcedColors } from '../../../lib/styleUtils.mjs';
+import { sizeStyles } from './shared/utils.mjs';
+
+var chip = tokens.component.chip,
+  semantic = tokens.semantic;
+var color = semantic.color;
+// Outlined, with the naked fill ladder on hover and press (decisions 0030, 0046): the edge keeps it
+// visible on white, the page and AgentInput's docked band
+var StyledSuggestionChip = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SuggestionChip__StyledSuggestionChip",
+  componentId: "sc-1k0njm-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - A native button: Enter and Space pick it, and its text is its accessible name
+ * - Outlined, with the naked hover and pressed fills; no selected state
+ * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
+ */])), semantic.border.width.thin, color.border.input, chip["default"].borderRadius, color.fill.none, color.text["default"], semantic.motion.transition.feedback, sizeStyles, color.fill['none-hover'], color.fill['none-pressed'], chip.focus.outline, semantic.border.focusOffset, color.border.emphasis, color.text.disabled, forcedColors);
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - A native button: Enter and Space pick it, and its text is its accessible name
+ * - Outlined, with the naked hover and pressed fills; no selected state
+ * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
+ */
+var SuggestionChip = function SuggestionChip(_a) {
+  var children = _a.children,
+    onClick = _a.onClick,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    dataTestId = _a["data-testid"];
+  return jsx(StyledSuggestionChip, {
+    type: "button",
+    onClick: onClick,
+    disabled: disabled,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+SuggestionChip.displayName = 'SuggestionChip';
+var templateObject_1;
+
+export { SuggestionChip };
+//# sourceMappingURL=SuggestionChip.mjs.map

package/dist/components/atoms/Chip/SuggestionChip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionChip.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Chip/index.d.mts

@@ -2,3 +2,4 @@ export * from './Chip.mjs';
 export * from './InputChip.mjs';
 export * from './FilterChip.mjs';
 export * from './BooleanChip.mjs';
+export * from './SuggestionChip.mjs';

package/dist/components/atoms/Chip/index.d.ts

@@ -2,3 +2,4 @@ export * from './Chip';
 export * from './InputChip';
 export * from './FilterChip';
 export * from './BooleanChip';
+export * from './SuggestionChip';

package/dist/components/atoms/index.d.mts

@@ -18,3 +18,4 @@ export * from './StatusBadge/index.mjs';
 export * from './StatusLabel/index.mjs';
 export * from './Tag/index.mjs';
 export * from './Typography/index.mjs';
+export * from './AILabel/index.mjs';

package/dist/components/atoms/index.d.ts

@@ -18,3 +18,4 @@ export * from './StatusBadge';
 export * from './StatusLabel';
 export * from './Tag';
 export * from './Typography';
+export * from './AILabel';

package/dist/components/molecules/AgentInput/AgentInput.d.mts

@@ -8,8 +8,31 @@ export interface AgentInputProps {
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
+    /**
+     * Called on Enter, Send, or a final voice transcript. When it resolves, the field clears if it
+     * still holds the submitted text (a follow-up typed meanwhile is kept). When it rejects, the text stays.
+     */
     onSubmit: (payload: SubmitPayload) => void | Promise<void>;
+    /** While submitting, turns Send into Stop and lets Escape stop. */
+    onStop?: () => void;
+    /**
+     * The review bar above the field, for an agent's proposal or an applied change (decision 0046).
+     * Omit it when there's nothing to review or undo.
+     */
+    review?: AgentInputReview;
+    /**
+     * Prompt starters or follow-ups, shown above the field while it's empty and no proposal is open.
+     * At most three are shown. Picking one fills the field and focuses it; it never sends.
+     */
+    suggestions?: string[];
+    /** Called with a suggestion's text when it's picked, after it fills the field */
+    onSuggestionSelect?: (text: string) => void;
     placeholder?: string;
+    /**
+     * Soft character limit for the submitted text. Typing past it is allowed, but Send is disabled and
+     * the counter and status line show the message is too long. A counter appears from 80% of the limit.
+     */
+    maxLength?: number;
     disabled?: boolean;
     isSubmitting?: boolean;
     enableVoice?: boolean;
@@ -21,10 +44,49 @@ export interface AgentInputProps {
     onVoiceInterim?: (text: string) => void;
     onVoiceFinal?: (text: string) => void;
     onVoiceError?: (error: AgentInputVoiceError) => void;
+    /** Hint shown in the status line while idle or typing. Empty by default. */
+    helperText?: string;
+    /** Overrides the status line in every non-error state. */
     statusMessage?: string;
+    /** Shown in the status line, styled and announced as an error, whenever it is set. */
     errorMessage?: string;
     label?: string;
+    /**
+     * Sticks the input to the bottom of its scroll container, on the sticky layer, over a band of page
+     * background with room for the phone's home indicator. Render it as the last child of the
+     * scrolling content.
+     */
+    docked?: boolean;
     'data-testid'?: string;
 }
-export declare const AgentInput: ({ value, defaultValue, onChange, onSubmit, placeholder, disabled, isSubmitting, enableVoice, autoSubmitOnVoiceFinal, voiceLanguage, noSpeechTimeoutMs, onVoiceStart, onVoiceStop, onVoiceInterim, onVoiceFinal, onVoiceError, statusMessage, errorMessage, label, "data-testid": dataTestId, }: AgentInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * An agent's proposal waiting for review, or a change already applied (decision 0046). In the
+ * proposal state the bar shows the summary with Accept and Discard; once applied, "Changes applied"
+ * with Undo.
+ */
+export type AgentInputReview = {
+    state: 'proposal';
+    /**
+     * Identifies this proposal. A new id while a proposal is open announces it as a replacement
+     * ("Proposal updated."), even when the summary is the same (decision 0047).
+     */
+    id: string;
+    /** What the agent proposes. Say what changed, for example "3 changes: Tuesday is now fish" */
+    summary: string;
+    onAccept: () => void;
+    onDiscard: () => void;
+} | {
+    state: 'applied';
+    onUndo: () => void;
+};
+export interface AgentInputFocusOptions {
+    /** Where to put the caret. Omit to keep the browser's default. */
+    cursor?: 'start' | 'end' | 'all';
+}
+/** Imperative handle, for products that focus or clear the field from their own controls. */
+export interface AgentInputHandle {
+    focus: (options?: AgentInputFocusOptions) => void;
+    clear: () => void;
+}
+export declare const AgentInput: import("react").ForwardRefExoticComponent<AgentInputProps & import("react").RefAttributes<AgentInputHandle>>;
 export {};

package/dist/components/molecules/AgentInput/AgentInput.d.ts

@@ -8,8 +8,31 @@ export interface AgentInputProps {
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
+    /**
+     * Called on Enter, Send, or a final voice transcript. When it resolves, the field clears if it
+     * still holds the submitted text (a follow-up typed meanwhile is kept). When it rejects, the text stays.
+     */
     onSubmit: (payload: SubmitPayload) => void | Promise<void>;
+    /** While submitting, turns Send into Stop and lets Escape stop. */
+    onStop?: () => void;
+    /**
+     * The review bar above the field, for an agent's proposal or an applied change (decision 0046).
+     * Omit it when there's nothing to review or undo.
+     */
+    review?: AgentInputReview;
+    /**
+     * Prompt starters or follow-ups, shown above the field while it's empty and no proposal is open.
+     * At most three are shown. Picking one fills the field and focuses it; it never sends.
+     */
+    suggestions?: string[];
+    /** Called with a suggestion's text when it's picked, after it fills the field */
+    onSuggestionSelect?: (text: string) => void;
     placeholder?: string;
+    /**
+     * Soft character limit for the submitted text. Typing past it is allowed, but Send is disabled and
+     * the counter and status line show the message is too long. A counter appears from 80% of the limit.
+     */
+    maxLength?: number;
     disabled?: boolean;
     isSubmitting?: boolean;
     enableVoice?: boolean;
@@ -21,10 +44,49 @@ export interface AgentInputProps {
     onVoiceInterim?: (text: string) => void;
     onVoiceFinal?: (text: string) => void;
     onVoiceError?: (error: AgentInputVoiceError) => void;
+    /** Hint shown in the status line while idle or typing. Empty by default. */
+    helperText?: string;
+    /** Overrides the status line in every non-error state. */
     statusMessage?: string;
+    /** Shown in the status line, styled and announced as an error, whenever it is set. */
     errorMessage?: string;
     label?: string;
+    /**
+     * Sticks the input to the bottom of its scroll container, on the sticky layer, over a band of page
+     * background with room for the phone's home indicator. Render it as the last child of the
+     * scrolling content.
+     */
+    docked?: boolean;
     'data-testid'?: string;
 }
-export declare const AgentInput: ({ value, defaultValue, onChange, onSubmit, placeholder, disabled, isSubmitting, enableVoice, autoSubmitOnVoiceFinal, voiceLanguage, noSpeechTimeoutMs, onVoiceStart, onVoiceStop, onVoiceInterim, onVoiceFinal, onVoiceError, statusMessage, errorMessage, label, "data-testid": dataTestId, }: AgentInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * An agent's proposal waiting for review, or a change already applied (decision 0046). In the
+ * proposal state the bar shows the summary with Accept and Discard; once applied, "Changes applied"
+ * with Undo.
+ */
+export type AgentInputReview = {
+    state: 'proposal';
+    /**
+     * Identifies this proposal. A new id while a proposal is open announces it as a replacement
+     * ("Proposal updated."), even when the summary is the same (decision 0047).
+     */
+    id: string;
+    /** What the agent proposes. Say what changed, for example "3 changes: Tuesday is now fish" */
+    summary: string;
+    onAccept: () => void;
+    onDiscard: () => void;
+} | {
+    state: 'applied';
+    onUndo: () => void;
+};
+export interface AgentInputFocusOptions {
+    /** Where to put the caret. Omit to keep the browser's default. */
+    cursor?: 'start' | 'end' | 'all';
+}
+/** Imperative handle, for products that focus or clear the field from their own controls. */
+export interface AgentInputHandle {
+    focus: (options?: AgentInputFocusOptions) => void;
+    clear: () => void;
+}
+export declare const AgentInput: import("react").ForwardRefExoticComponent<AgentInputProps & import("react").RefAttributes<AgentInputHandle>>;
 export {};