@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.0

package/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,115 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { system } from '../../theme';
+import { Badge } from '../Badge';
+import { Chip } from '../Chip';
+import { Tag } from './Tag';
+import { getTagStyles, mapLegacyTagProps } from './Tag.styles';
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('Tag 5.0 API', () => {
+  it('resolves tone / selected / category styles', () => {
+    expect(getTagStyles()).toMatchObject({
+      bgColor: 'bg.muted',
+      color: 'fg.default',
+    });
+    expect(getTagStyles({ tone: 'danger' })).toMatchObject({
+      bgColor: 'danger.bg',
+      color: 'danger.fg',
+    });
+    expect(getTagStyles({ tone: 'info', selected: true })).toMatchObject({
+      bgColor: 'primary.main',
+      color: 'fg.onPrimary',
+    });
+    expect(getTagStyles({ category: 'blue' })).toMatchObject({
+      bgColor: 'category.blue.surface',
+      color: 'fg.default',
+    });
+  });
+
+  it('only interactive tags get the hover border', () => {
+    expect(getTagStyles()._hover).toBeUndefined();
+    expect(getTagStyles({ interactive: true })._hover).toEqual({
+      borderColor: 'secondary.border',
+    });
+  });
+
+  it('maps 4.x colorPalette × variant', () => {
+    // Full table: Tag.legacy.test.tsx.
+    expect(mapLegacyTagProps('primary', 'solid')).toMatchObject({
+      tone: 'neutral',
+      selected: true,
+    });
+    expect(mapLegacyTagProps('danger', 'soft')).toMatchObject({
+      tone: 'danger',
+    });
+    expect(mapLegacyTagProps('success', 'outline')).toMatchObject({
+      tone: 'neutral',
+    });
+    expect(mapLegacyTagProps('secondary', 'soft')).toMatchObject({
+      tone: 'neutral',
+    });
+  });
+
+  it('a toggle rendered as a button exposes aria-pressed', () => {
+    wrap(
+      <Tag as="button" selected onClick={() => {}}>
+        Images
+      </Tag>
+    );
+    const button = screen.getByRole('button', { name: 'Images' });
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+    expect(button.getAttribute('type')).toBe('button');
+  });
+
+  it('disabled button tag is natively disabled', () => {
+    wrap(
+      <Tag as="button" disabled onClick={() => {}}>
+        Off
+      </Tag>
+    );
+    expect(
+      (screen.getByRole('button', { name: 'Off' }) as HTMLButtonElement)
+        .disabled
+    ).toBe(true);
+  });
+
+  it('renders the leading icon', () => {
+    wrap(
+      <Tag category="purple" icon={<span data-testid="mark">#</span>}>
+        research
+      </Tag>
+    );
+    expect(screen.getByTestId('mark')).toBeTruthy();
+    expect(screen.getByText('research')).toBeTruthy();
+  });
+});
+
+describe('deprecated aliases', () => {
+  it('Chip still renders (as a Tag) and warns', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    wrap(
+      <Chip colorScheme="danger" variant="soft">
+        Error
+      </Chip>
+    );
+    expect(screen.getByText('Error')).toBeTruthy();
+    expect(warn.mock.calls.some(([m]) => String(m).includes('<Chip>'))).toBe(
+      true
+    );
+  });
+
+  it('Badge maps a removed variant to neutral', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    // @ts-expect-error — `primary` was removed from BadgeVariant in 5.0
+    wrap(<Badge variant="primary">Old</Badge>);
+    expect(screen.getByText('Old')).toBeTruthy();
+    expect(warn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Tag/Tag.tsx

@@ -1,40 +1,102 @@
-import { ForwardedRef, forwardRef } from 'react';
+import { ElementType, ForwardedRef, forwardRef, MouseEvent } from 'react';
 import { Tag as ChakraTag } from '@chakra-ui/react';
 
+import { focusRing } from '@/utils/focusRing';
+
 import { polymorphic } from '../../types/polymorphic';
-import { getTagStyles } from './Tag.styles';
+import {
+  getTagStyles,
+  mapLegacyTagProps,
+  warnLegacyTagProps,
+} from './Tag.styles';
 import { TagOwnProps } from './Tag.types';
 
+/** 4.x props that are no longer in the type but may still arrive at runtime. */
+type LegacyTagInput = {
+  colorPalette?: string;
+  variant?: string;
+  as?: ElementType;
+  href?: string;
+  /**
+   * @internal Set by the deprecated `Chip` alias so the 4.x warning names the
+   * component the call site actually wrote. Never forwarded to the DOM.
+   */
+  __legacyComponent?: 'Chip';
+};
+
 /**
- * Tag component for categorization, filtering, and labeling.
+ * Tag — a label for categorising, filtering and removable selections. Since
+ * 5.0 it also replaces `Chip`.
  *
- * Uses a two-dimensional variant system:
- * - `colorPalette`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (soft, solid, outline)
+ * - `tone`: `neutral` (default, grey wash) · `success` · `warning` · `danger` · `info`
+ * - `selected`: filter-chip "on" (black fill)
+ * - `category`: decorative hue (`blue`, `green`, …) with an optional `icon` mark
  *
- * Supports close button via TagCloseButton sub-component.
+ * A tag is interactive (hover border, pointer) when it has `onClick`, is a
+ * toggle (`selected` passed) or renders as a `button` / `a`. Render filter
+ * chips `as="button"` so they are keyboard-operable.
  *
  * @example
  * ```tsx
- * <Tag colorPalette="primary">Category</Tag>
- * <Tag colorPalette="danger" variant="solid">Error</Tag>
- * <Tag colorPalette="success" variant="outline">
- *   Completed
- *   <TagCloseButton />
- * </Tag>
+ * <Tag>Draft</Tag>
+ * <Tag tone="danger">Failed</Tag>
+ * <Tag as="button" selected={on} onClick={toggle}>Images</Tag>
+ * <Tag category="purple" icon="#">research</Tag>
+ * <Tag>Removable<TagCloseButton /></Tag>
  * ```
  */
 const TagImpl = forwardRef(
-  (
-    {
-      colorPalette = 'neutral',
-      variant = 'soft',
+  (props: TagOwnProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    const {
+      tone: toneProp,
+      selected: selectedProp,
+      category,
+      icon,
+      disabled = false,
+      onClick,
       children,
+      colorPalette: legacyPalette,
+      variant: legacyVariant,
+      as,
+      __legacyComponent: legacyComponent,
       ...rest
-    }: TagOwnProps,
-    ref?: ForwardedRef<HTMLDivElement>
-  ) => {
-    const styles = getTagStyles(colorPalette, variant);
+    } = props as TagOwnProps & LegacyTagInput;
+
+    let tone = toneProp;
+    let selected = selectedProp;
+    if (
+      legacyComponent !== undefined ||
+      legacyPalette !== undefined ||
+      legacyVariant !== undefined
+    ) {
+      // Mapped `selected` is the look only: `selectedProp` (below) still
+      // decides whether the tag is a toggle.
+      const mapped = mapLegacyTagProps(legacyPalette, legacyVariant);
+      warnLegacyTagProps(
+        legacyComponent ?? 'Tag',
+        legacyPalette,
+        legacyVariant,
+        mapped
+      );
+      tone ??= mapped.tone;
+      selected ??= mapped.selected;
+    }
+
+    const isButton = as === 'button';
+    const isLink = as === 'a' || rest.href != null;
+    const wantsInteraction =
+      onClick != null || isButton || isLink || selectedProp !== undefined;
+    const interactive = !disabled && wantsInteraction;
+    // A disabled tag that would otherwise be operable (a link, a clickable
+    // span) has no native `disabled`, so say so and take it out of the tab
+    // order. `as="button"` gets the real attribute instead.
+    const disabledNonNative = disabled && wantsInteraction && !isButton;
+
+    const styles = getTagStyles({ tone, selected, category, interactive });
+
+    const handleClick = disabled
+      ? (event: MouseEvent<HTMLSpanElement>) => event.preventDefault()
+      : onClick;
 
     return (
       <ChakraTag.Root
@@ -44,9 +106,29 @@ const TagImpl = forwardRef(
         fontSize="sm"
         fontWeight="semibold"
         {...styles}
+        {...focusRing}
+        data-selected={selected ? '' : undefined}
+        data-disabled={disabled ? '' : undefined}
+        aria-pressed={
+          isButton && selectedProp !== undefined ? !!selected : undefined
+        }
+        aria-disabled={disabledNonNative ? true : undefined}
+        {...(isButton && { type: 'button', disabled })}
+        onClick={handleClick}
         {...rest}
+        // After `rest`: a disabled link must not stay reachable by Tab.
+        {...(disabledNonNative && { tabIndex: -1 })}
+        as={as}
         ref={ref}
       >
+        {icon != null ? (
+          <ChakraTag.StartElement
+            color={category ? `category.${category}.fg` : undefined}
+            fontWeight="bold"
+          >
+            {icon}
+          </ChakraTag.StartElement>
+        ) : null}
         {children}
       </ChakraTag.Root>
     );

package/src/components/Tag/Tag.types.ts

@@ -1,14 +1,24 @@
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import { TagRootProps } from '@chakra-ui/react';
 
+import type { SystemHue } from '@/theme/colors';
+
 // Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
 import type { PolymorphicProps } from '../../types/polymorphic';
 
 /**
- * Tag color schemes - determines the semantic color of the tag.
+ * Tag tones (5.0).
  *
- * This prop overrides Chakra UI's native `colorPalette` prop to provide
- * a controlled set of color options that align with our design system.
+ * - `neutral` (default): neutral `bg.muted` with `fg.default` text (hover border `secondary.border`).
+ * - `success` / `warning` / `danger` / `info`: status family `.bg` + `.fg`.
+ *   Use them only when the tag reports a status.
+ */
+export type TagTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+/**
+ * 4.x colour palettes. Removed from `TagProps` in 5.0; still accepted at
+ * runtime (mapped to `tone` / `selected`) with a one-time dev warning.
+ * @deprecated Use `tone`, `selected` or `category`.
  */
 export type TagColorPalette =
   | 'primary'
@@ -19,42 +29,55 @@ export type TagColorPalette =
   | 'neutral';
 
 /**
- * Tag variants - determines the visual style of the tag.
- *
- * - soft: Light background tint with darker text (default)
- * - solid: Filled background with contrasting text
- * - outline: Transparent background with colored border
+ * 4.x visual variants. Removed from `TagProps` in 5.0 (`outline` is gone).
+ * @deprecated Use `tone`, `selected` or `category`.
  */
 export type TagVariant = 'soft' | 'solid' | 'outline';
 
-/**
- * TagProps uses a two-dimensional variant system:
- * - `colorPalette`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (soft, solid, outline)
- *
- * This matches the Button and Chip component architecture for consistency.
- *
- * @example
- * ```tsx
- * <Tag colorPalette="primary" variant="soft">Category</Tag>
- * <Tag colorPalette="danger" variant="solid">Error</Tag>
- * <Tag colorPalette="success" variant="outline">
- *   Completed
- *   <TagCloseButton />
- * </Tag>
- * ```
- */
 export type TagOwnProps = Omit<
   TagRootProps,
   'colorPalette' | 'variant' | 'as'
 > & {
-  colorPalette?: TagColorPalette;
-  variant?: TagVariant;
+  /**
+   * Colour role of the tag. Ignored while `selected` is true or `category`
+   * is set.
+   * @default 'neutral'
+   */
+  tone?: TagTone;
+  /**
+   * Filter-chip "on" state: black `primary.main` fill with `fg.onPrimary`
+   * text. Passing it (true OR false) marks the tag as a toggle, so it gets
+   * the interactive hover; with `as="button"` it also sets `aria-pressed`.
+   */
+  selected?: boolean;
+  /**
+   * Decorative category colour (no status meaning): `category.{hue}.surface`
+   * fill with `fg.default` text. `icon` is coloured `category.{hue}.fg`.
+   */
+  category?: SystemHue;
+  /**
+   * Leading icon / mark. Takes `category.{hue}.fg` when `category` is set,
+   * otherwise the tag's text colour.
+   */
+  icon?: ReactNode;
+  /**
+   * Disabled: fixed `disabled.bg` / `disabled.fg`, no hover, clicks ignored.
+   * With `as="button"` it sets the native `disabled` attribute.
+   */
+  disabled?: boolean;
 };
 
 /**
  * Props for `Tag`, typed for whatever element `as` renders. Defaults to
- * `'span'`, so the bare type is unchanged.
+ * `'span'`. A filter chip should render `as="button"` (or `as="a"` when it
+ * navigates) so it is focusable and keyboard-operable.
+ *
+ * ```tsx
+ * <Tag>Draft</Tag>
+ * <Tag tone="success">Active</Tag>
+ * <Tag as="button" selected={on} onClick={toggle}>Images</Tag>
+ * <Tag category="blue" icon="#">design</Tag>
+ * ```
  */
 export type TagProps<TElement extends ElementType = 'span'> = PolymorphicProps<
   TElement,

package/src/components/Tag/TagCloseButton/TagCloseButton.tsx

@@ -1,13 +1,31 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { Tag } from '@chakra-ui/react';
 
+import { focusRing } from '@/utils/focusRing';
+
 import { TagCloseButtonProps } from './TagCloseButton.types';
 
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 export const TagCloseButton = forwardRef(
   ({ ...rest }: TagCloseButtonProps, ref?: ForwardedRef<HTMLButtonElement>) => {
     return (
       <Tag.EndElement>
-        <Tag.CloseTrigger cursor="pointer" {...rest} ref={ref} />
+        <Tag.CloseTrigger
+          cursor="pointer"
+          color="currentColor"
+          opacity={0.6}
+          transitionProperty="opacity"
+          transitionDuration="fast"
+          transitionTimingFunction="standard"
+          _hover={{ opacity: 1 }}
+          {...focusRing}
+          {...rest}
+          ref={ref}
+        />
       </Tag.EndElement>
     );
   }

package/src/components/Tag/index.ts

@@ -1,16 +1,18 @@
 import { Icon } from '@chakra-ui/react';
 
 export { Tag } from './Tag';
+export type { LegacyTagResolution, TagStyleOptions } from './Tag.styles';
 export {
   getTagStyles,
-  tagColorPalettes,
-  tagColorPaletteStyles,
-  tagVariants,
+  mapLegacyTagProps,
+  tagTones,
+  tagToneStyles,
 } from './Tag.styles';
 export type {
   TagColorPalette,
   TagOwnProps,
   TagProps,
+  TagTone,
   TagVariant,
 } from './Tag.types';
 export * from './TagCloseButton';

package/src/components/Textarea/Textarea.stories.tsx

@@ -65,7 +65,12 @@ export const Invalid: Story = {
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <span style={{ color: '#C1232C', fontSize: '14px' }}>
+        <span
+          style={{
+            color: 'var(--chakra-colors-danger-fg)',
+            fontSize: '14px',
+          }}
+        >
           This field contains an error. Please fix it.
         </span>
       </div>

package/src/components/Textarea/Textarea.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, forwardRef, useEffect, useState } from 'react';
 import { Textarea as ChakraTextarea } from '@chakra-ui/react';
 
 import { noZoomOnFocus } from '@/theme/formControls';
+import { disabledControl } from '@/utils/disabledControl';
 import { mergeCss } from '@/utils/mergeCss';
 
 import { TextareaProps } from './Textarea.types';
@@ -57,25 +58,28 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         // `Textarea` recipe does not — so the focus ring defaults to
         // `colorPalette.focusRing` (gray.400) and ends up visibly
         // different from Input/Select. Mirror Input's chain explicitly.
-        focusRingColor={invalid ? 'danger.main' : 'primary.main'}
+        focusRingColor={invalid ? 'danger.solid' : 'primary.main'}
         borderColor={
-          borderColor ?? (invalid ? 'danger.main' : 'border.default')
+          borderColor ?? (invalid ? 'danger.solid' : 'border.control')
         }
         _hover={{
-          borderColor: invalid ? 'danger.main' : 'primary.lighter',
+          borderColor: invalid ? 'danger.solid' : 'fg.icon',
           ..._hover,
         }}
         _focus={{
-          borderColor: invalid ? 'danger.main' : 'primary.main',
+          borderColor: invalid ? 'danger.solid' : 'primary.main',
+          boxShadow: invalid
+            ? 'none'
+            : '0 0 0 1px var(--chakra-colors-primary-main)',
           ..._focus,
         }}
         _invalid={{
-          borderColor: 'danger.main',
+          borderColor: 'danger.solid',
           _hover: {
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
           },
           _focus: {
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
           },
         }}
         _readOnly={{
@@ -86,10 +90,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           borderColor: 'border.subtle',
         }}
         _disabled={{
-          opacity: 1,
+          ...disabledControl,
           cursor: 'not-allowed',
-          bg: 'bg.subtle',
-          color: { base: 'gray.1000', _dark: 'gray.400' },
           fontWeight: 'semibold',
         }}
         {...props}
@@ -97,7 +99,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           noZoomOnFocus,
           {
             '--focus-color': 'var(--chakra-colors-primary-main)',
-            '--error-color': 'var(--chakra-colors-danger-main)',
+            '--error-color': 'var(--chakra-colors-danger-solid)',
           },
           css
         )}

package/src/components/Toast/Toast.action.test.tsx

@@ -102,6 +102,19 @@ describe('Toast action', () => {
     await screen.findByText('Saved.');
     expect(screen.getAllByRole('button')).toHaveLength(1); // close × only
   });
+
+  it("fires 'neutral' (the default status) without throwing, and renders as neutral — not Zag's own required 'info' type", async () => {
+    renderToaster();
+    fire({ description: 'No status given.' });
+
+    const description = await screen.findByText('No status given.');
+    const root = description.closest('[data-scope="toast"][data-part="root"]');
+    // Zag requires SOME `type` internally (fed `'info'` so the machine
+    // doesn't throw — see `useToast.tsx`), but `neutral` must still be what
+    // actually renders: no status icon, so only the close ×'s svg is
+    // present — an `info` toast would carry a second one.
+    expect(root?.querySelectorAll('svg')).toHaveLength(1);
+  });
 });
 
 describe('useToast duration', () => {

package/src/components/Toast/Toast.stories.tsx

@@ -1,6 +1,6 @@
+import { useState } from 'react';
 import { Flex, Stack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 
 import { Button } from '../Button';
 import { Toast } from './Toast';
@@ -68,6 +68,16 @@ export const BasicStatuses: Story = {
           >
             Show Error Toast
           </Button>
+          <Button
+            onClick={() =>
+              showToast({
+                description: 'This is a neutral message with no status.',
+                status: 'neutral',
+              })
+            }
+          >
+            Show Neutral Toast
+          </Button>
         </Flex>
       </>
     );
@@ -250,7 +260,7 @@ export const MaxToastLimit: Story = {
       <>
         <Toaster />
         <Stack gap={3}>
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             Maximum 3 toasts are shown at once. Older toasts are automatically
             dismissed.
           </Text>
@@ -354,11 +364,11 @@ export const CustomStyles: Story = {
             onClick={() =>
               showToast({
                 title: 'Custom Background',
-                description: 'This toast has a purple background',
+                description: 'This toast has a category background',
                 status: 'info',
                 styles: {
-                  bg: 'purple.500',
-                  color: 'white',
+                  bg: 'category.purple.surface',
+                  color: 'category.purple.fg',
                 },
               })
             }
@@ -373,7 +383,7 @@ export const CustomStyles: Story = {
                 status: 'success',
                 styles: {
                   borderWidth: '4px',
-                  borderColor: 'green.500',
+                  borderColor: 'success.solid',
                 },
               })
             }
@@ -459,7 +469,7 @@ export const RapidFire: Story = {
       <>
         <Toaster />
         <Stack gap={3}>
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             Test rapid toast creation and the 3-toast limit
           </Text>
           <Button