@mindlogic-ai/logician-ui 4.0.0-alpha.13 → 4.0.0-alpha.15

package/src/components/Button/Button.styles.ts

@@ -46,11 +46,15 @@ export const buttonColorPaletteStyles: Record<
       },
     },
     soft: {
-      borderColor: 'transparent',
+      // Same-hue hairline so soft reads as a defined control on white, not a
+      // floating fill. `lighter` sits well below `outline`'s `.main` border, so
+      // soft stays the quieter of the two bordered variants; it also equals the
+      // hover/active fill, so the border melts into the fill on interaction.
+      borderColor: 'primary.lighter',
       bgColor: 'primary.extralight', // #E8EEFB
       color: 'primary.dark', // #0D317D
       _hover: {
-        borderColor: 'transparent',
+        borderColor: 'primary.lighter',
         bgColor: 'primary.lighter', // #B9CBF3
       },
       _active: {
@@ -102,11 +106,11 @@ export const buttonColorPaletteStyles: Record<
       },
     },
     soft: {
-      borderColor: 'transparent',
+      borderColor: 'secondary.lighter',
       bgColor: 'secondary.extralight', // #F4E8FB
       color: 'secondary.dark', // #570D7D
       _hover: {
-        borderColor: 'transparent',
+        borderColor: 'secondary.lighter',
         bgColor: 'secondary.lighter', // #DEB9F3
       },
       _active: {
@@ -158,11 +162,11 @@ export const buttonColorPaletteStyles: Record<
       },
     },
     soft: {
-      borderColor: 'transparent',
+      borderColor: 'danger.lighter',
       bgColor: 'danger.extralight', // #FBE8E9
       color: 'danger.dark', // #7D0D14
       _hover: {
-        borderColor: 'transparent',
+        borderColor: 'danger.lighter',
         bgColor: 'danger.lighter', // #F3B9BD
       },
       _active: {
@@ -214,11 +218,11 @@ export const buttonColorPaletteStyles: Record<
       },
     },
     soft: {
-      borderColor: 'transparent',
+      borderColor: 'success.lighter',
       bgColor: 'success.extralight', // #E9FBE8
       color: 'success.dark', // #147D0D
       _hover: {
-        borderColor: 'transparent',
+        borderColor: 'success.lighter',
         bgColor: 'success.lighter', // #BDF3B9
       },
       _active: {
@@ -273,11 +277,11 @@ export const buttonColorPaletteStyles: Record<
       },
     },
     soft: {
-      borderColor: 'transparent',
+      borderColor: 'warning.lighter',
       bgColor: 'warning.extralight', // #FBF6E8
       color: 'warning.dark', // #7D610D
       _hover: {
-        borderColor: 'transparent',
+        borderColor: 'warning.lighter',
         bgColor: 'warning.lighter', // #F3E4B9
       },
       _active: {
@@ -329,14 +333,16 @@ export const buttonColorPaletteStyles: Record<
       },
     },
     soft: {
-      borderColor: 'transparent',
+      // `border.default` (not a gray tint) so the neutral hairline stays visible
+      // in dark mode, where `border.subtle` collapses into the fill.
+      borderColor: 'border.default', // gray.300 / gray.1100 (_dark)
       // Neutral fills flip with the mode (light values preserved: bg.subtle →
       // gray.50, bg.muted → gray.100). Without this the surface stayed light in
       // dark mode while the fg.default text flipped to light = invisible.
       bgColor: 'bg.subtle', // gray.50 / gray.1300 (_dark)
       color: 'fg.default',
       _hover: {
-        borderColor: 'transparent',
+        borderColor: 'border.default',
         bgColor: 'bg.muted', // gray.100 / gray.1200 (_dark)
       },
       _active: {

package/src/components/Card/Card.stories.tsx

@@ -22,3 +22,10 @@ export const Gradient: Story = {
     children: 'Gradient Card',
   },
 };
+
+export const Elevated: Story = {
+  args: {
+    variant: 'elevated',
+    children: 'Elevated Card',
+  },
+};

package/src/components/Card/Card.styles.ts

@@ -16,4 +16,12 @@ export const variantStyles = {
     border: '1px solid',
     borderColor: 'primary.light',
   },
+  // Soft resting elevation — a gentle shadow does the separating, so the border
+  // can soften to `border.subtle` (which alone would be too faint, especially in
+  // dark mode). Use for standalone content cards that should read as raised
+  // objects rather than flat framed boxes.
+  elevated: {
+    boxShadow: 'sm',
+    borderColor: 'border.subtle',
+  },
 };

package/src/components/Card/Card.types.ts

@@ -1,6 +1,6 @@
 import { CardRootProps as ChakraCardRootProps } from '@chakra-ui/react';
 
-export type CardVariant = 'default' | 'gradient';
+export type CardVariant = 'default' | 'gradient' | 'elevated';
 
 export type CardProps = ChakraCardRootProps & {
   clickable?: boolean;

package/src/components/Form/FieldError/FieldError.test.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { FieldError } from './FieldError';
+
+// Field.ErrorText needs a Field.Root + invalid context to render; stub it to a
+// passthrough so the test isolates FieldError's own null-when-empty guard.
+vi.mock('@chakra-ui/react', () => ({
+  Field: {
+    ErrorText: ({ children }: { children?: ReactNode }) => (
+      <span data-testid="error-text">{children}</span>
+    ),
+  },
+}));
+
+describe('FieldError', () => {
+  it('renders nothing when empty (safe to mount unconditionally)', () => {
+    const { rerender } = render(<FieldError />);
+    expect(screen.queryByTestId('error-text')).toBeNull();
+
+    rerender(<FieldError>{''}</FieldError>);
+    expect(screen.queryByTestId('error-text')).toBeNull();
+
+    rerender(<FieldError>{false}</FieldError>);
+    expect(screen.queryByTestId('error-text')).toBeNull();
+  });
+
+  it('renders the message when present', () => {
+    render(<FieldError>Display name is required.</FieldError>);
+    expect(screen.getByText('Display name is required.')).toBeInTheDocument();
+  });
+});

package/src/components/Form/FieldError/FieldError.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { Field } from '@chakra-ui/react';
+
+export interface FieldErrorProps {
+  /** Error message. Renders nothing when empty, so it is safe to mount always. */
+  children?: ReactNode;
+}
+
+/**
+ * Field-level error message. Renders through Chakra's `Field.ErrorText`, so it
+ * shows only when the enclosing `FormControl`/`Field.Root` is `invalid`, and is
+ * wired to the control via `aria-describedby` + `aria-invalid` automatically.
+ * Use it inside a `FieldRow` (which flips the field to invalid when an `error`
+ * is set) — it replaces the hand-rolled `<Subtext color="danger.main">` error
+ * rows scattered across the app.
+ */
+export const FieldError = ({ children }: FieldErrorProps) => {
+  if (children == null || children === false || children === '') return null;
+  return <Field.ErrorText color="danger.main">{children}</Field.ErrorText>;
+};

package/src/components/Form/FieldError/index.ts

@@ -0,0 +1,2 @@
+export type { FieldErrorProps } from './FieldError';
+export { FieldError } from './FieldError';

package/src/components/Form/FieldHelp/FieldHelp.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Field } from '@chakra-ui/react';
+
+export interface FieldHelpProps {
+  /** Helper text rendered under the control. */
+  children: ReactNode;
+}
+
+/**
+ * Inline helper text under a form control. Renders through Chakra's
+ * `Field.HelperText`, so it is associated with the control via
+ * `aria-describedby` when used inside a `FieldRow`/`FormControl`. For a hover
+ * info-popover instead of always-visible text, pass a logician `InfoSprinkle`
+ * into the `FieldRow` `endAdornment` slot.
+ */
+export const FieldHelp = ({ children }: FieldHelpProps) => {
+  return <Field.HelperText>{children}</Field.HelperText>;
+};

package/src/components/Form/FieldHelp/index.ts

@@ -0,0 +1,2 @@
+export type { FieldHelpProps } from './FieldHelp';
+export { FieldHelp } from './FieldHelp';

package/src/components/Form/FieldLabel/FieldLabel.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex } from '@chakra-ui/react';
+
+import { FormLabel } from '@/components/FormLabel';
+import { Subtext } from '@/components/Typography';
+
+import { FieldLabelProps } from './FieldLabel.types';
+
+/**
+ * Label row for a form field: a semibold heading, an optional description, and
+ * an `endAdornment` slot on the right (count badge, action button, info-sprinkle
+ * trigger). The required asterisk is supplied automatically by the enclosing
+ * `Field` context when the field is `required` (see `FieldRow`).
+ *
+ * Presentational — pair it with `FieldRow` (or any logician `FormControl`) so
+ * the heading is programmatically associated with its control.
+ */
+export const FieldLabel = ({
+  heading,
+  description,
+  endAdornment,
+  mb = 0,
+  htmlFor,
+}: FieldLabelProps) => {
+  return (
+    <Flex align="center" justify="space-between" gap={2} mb={mb} w="100%">
+      <Box>
+        {heading != null && (
+          <FormLabel
+            mb={0}
+            fontWeight="semibold"
+            color="fg.default"
+            htmlFor={htmlFor}
+          >
+            {heading}
+          </FormLabel>
+        )}
+        {description && (
+          <Subtext fontWeight="normal" color="fg.muted">
+            {description}
+          </Subtext>
+        )}
+      </Box>
+      {endAdornment}
+    </Flex>
+  );
+};

package/src/components/Form/FieldLabel/FieldLabel.types.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface FieldLabelProps {
+  /** Label heading. */
+  heading: ReactNode;
+  /** Secondary description rendered under the heading. */
+  description?: ReactNode;
+  /**
+   * Inline element rendered to the right of the heading row (e.g. button, count
+   * badge, info-sprinkle popover trigger).
+   */
+  endAdornment?: ReactNode;
+  /**
+   * Associates the label with a control by id. Normally supplied by the
+   * enclosing `Field` context (via `FieldRow`/`FormControl`); pass it explicitly
+   * only when using `FieldLabel` outside that context.
+   */
+  htmlFor?: string;
+  /** Bottom margin in spacing units. */
+  mb?: number;
+}

package/src/components/Form/FieldLabel/index.ts

@@ -0,0 +1,2 @@
+export { FieldLabel } from './FieldLabel';
+export type { FieldLabelProps } from './FieldLabel.types';

package/src/components/Form/FieldRow/FieldRow.stories.tsx

@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from '@/components/Input';
+import { SelectField } from '@/components/Select';
+import { Textarea } from '@/components/Textarea';
+
+import { FieldRow } from './FieldRow';
+
+const meta: Meta<typeof FieldRow> = {
+  title: 'Components/Form/FieldRow',
+  component: FieldRow,
+  args: {
+    label: 'Display name',
+    children: <Input placeholder="Enter a name" />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The composition keystone for a form field. Wraps a control in a ' +
+          'logician `FormControl` and lays out label, description, helper and ' +
+          'error consistently, delegating all label↔control / aria wiring to ' +
+          'the Chakra `Field` context.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldRow>;
+
+export const Default: Story = {};
+
+export const Required: Story = {
+  args: { required: true },
+};
+
+export const WithDescription: Story = {
+  args: { description: 'Shown to teammates who can see this chatbot.' },
+};
+
+export const WithHelperText: Story = {
+  args: { helperText: 'Up to 40 characters.' },
+};
+
+export const WithError: Story = {
+  args: { required: true, error: 'Display name is required.' },
+};
+
+export const WithEndAdornment: Story = {
+  args: {
+    label: 'Recommended questions',
+    endAdornment: '2 / 5',
+    children: <Input placeholder="Add a question" />,
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const TextareaControl: Story = {
+  args: {
+    label: 'System instructions',
+    helperText: 'Describe how the assistant should behave.',
+    children: <Textarea placeholder="You are a helpful assistant…" />,
+  },
+};
+
+export const SelectControl: Story = {
+  args: {
+    label: 'Aspect ratio',
+    children: (
+      <SelectField
+        options={[
+          { label: '16:9', value: '16:9' },
+          { label: '9:16', value: '9:16' },
+          { label: '1:1', value: '1:1' },
+        ]}
+        value="16:9"
+        onChange={() => {}}
+      />
+    ),
+  },
+};

package/src/components/Form/FieldRow/FieldRow.test.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { FieldRow } from './FieldRow';
+
+// Expose the `invalid` value FieldRow computes onto the DOM so the derivation
+// (error -> invalid, with an explicit `invalid` override winning) is assertable
+// without a full Chakra Field/provider render. FieldRow now composes its label
+// out of the design system's own FormControl/FormLabel/Typography modules, so
+// mock those directly.
+vi.mock('@/components/FormControl', () => ({
+  FormControl: ({
+    children,
+    invalid,
+  }: {
+    children?: ReactNode;
+    invalid?: boolean;
+  }) => <div data-invalid={String(Boolean(invalid))}>{children}</div>,
+}));
+
+vi.mock('@/components/FormLabel', () => ({
+  FormLabel: ({ children }: { children?: ReactNode }) => (
+    <label>{children}</label>
+  ),
+}));
+
+vi.mock('@/components/Typography', () => ({
+  Subtext: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
+}));
+
+vi.mock('@chakra-ui/react', () => ({
+  Box: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  Flex: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  Field: {
+    HelperText: ({ children }: { children?: ReactNode }) => (
+      <p data-testid="helper">{children}</p>
+    ),
+    ErrorText: ({ children }: { children?: ReactNode }) => (
+      <p data-testid="error">{children}</p>
+    ),
+  },
+}));
+
+const control = <input aria-label="name" />;
+
+describe('FieldRow', () => {
+  it('renders label, control, helper and error slots', () => {
+    render(
+      <FieldRow label="Display name" helperText="Up to 40 chars" error="Nope">
+        {control}
+      </FieldRow>
+    );
+    expect(screen.getByText('Display name')).toBeInTheDocument();
+    expect(screen.getByLabelText('name')).toBeInTheDocument();
+    expect(screen.getByTestId('helper')).toHaveTextContent('Up to 40 chars');
+    expect(screen.getByTestId('error')).toHaveTextContent('Nope');
+  });
+
+  it('flips the field to invalid when an error is set', () => {
+    const { container } = render(
+      <FieldRow label="Name" error="Required">
+        {control}
+      </FieldRow>
+    );
+    expect(container.querySelector('[data-invalid="true"]')).not.toBeNull();
+  });
+
+  it('is not invalid without an error', () => {
+    const { container } = render(<FieldRow label="Name">{control}</FieldRow>);
+    expect(container.querySelector('[data-invalid="false"]')).not.toBeNull();
+    expect(screen.queryByTestId('error')).toBeNull();
+  });
+
+  it('lets an explicit invalid prop win over the error-derived value', () => {
+    const { container } = render(
+      <FieldRow label="Name" error="Required" invalid={false}>
+        {control}
+      </FieldRow>
+    );
+    expect(container.querySelector('[data-invalid="false"]')).not.toBeNull();
+  });
+
+  it('omits the label row when there is no label or adornment', () => {
+    const { container } = render(<FieldRow>{control}</FieldRow>);
+    expect(container.querySelector('label')).toBeNull();
+    expect(screen.getByLabelText('name')).toBeInTheDocument();
+  });
+});

package/src/components/Form/FieldRow/FieldRow.tsx

@@ -0,0 +1,46 @@
+import { FormControl } from '@/components/FormControl';
+
+import { FieldError } from '../FieldError';
+import { FieldHelp } from '../FieldHelp';
+import { FieldLabel } from '../FieldLabel';
+import { FieldRowProps } from './FieldRow.types';
+
+/**
+ * The composition keystone for a form field: wraps a control in a logician
+ * `FormControl` (Chakra `Field.Root`) and lays out its label, optional
+ * description/help, and error consistently. Because it delegates to the `Field`
+ * context, the label↔control association, the `required` asterisk, `aria-invalid`
+ * and the error/helper `aria-describedby` wiring are all handled automatically —
+ * callers never thread ids by hand.
+ *
+ * It is form-library agnostic: pass `value`/`onChange` controls directly (media
+ * forms) or render a form-connected adapter as the child (studio/admin forms). Set
+ * `error` to flip the field to invalid and surface the message.
+ */
+export const FieldRow = ({
+  label,
+  description,
+  endAdornment,
+  helperText,
+  error,
+  invalid,
+  children,
+  labelProps,
+  ...rootProps
+}: FieldRowProps) => {
+  return (
+    <FormControl invalid={invalid ?? Boolean(error)} {...rootProps}>
+      {(label != null || endAdornment != null) && (
+        <FieldLabel
+          heading={label}
+          description={description}
+          endAdornment={endAdornment}
+          {...labelProps}
+        />
+      )}
+      {children}
+      {helperText != null && <FieldHelp>{helperText}</FieldHelp>}
+      <FieldError>{error}</FieldError>
+    </FormControl>
+  );
+};

package/src/components/Form/FieldRow/FieldRow.types.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+import { FormControlProps } from '@/components/FormControl';
+
+import { FieldLabelProps } from '../FieldLabel';
+
+export interface FieldRowProps extends Omit<FormControlProps, 'label'> {
+  /** Field label heading. Omit for an unlabeled control row. */
+  label?: ReactNode;
+  /** Secondary description rendered under the label. */
+  description?: ReactNode;
+  /**
+   * Inline node at the right of the label row — a count badge, an action
+   * button, or a logician `InfoSprinkle` help popover.
+   */
+  endAdornment?: ReactNode;
+  /** Always-visible helper text rendered under the control. */
+  helperText?: ReactNode;
+  /**
+   * Error message. When set (and `invalid` is not explicitly overridden) the
+   * field renders as invalid, so the control gets `aria-invalid` and the error
+   * is announced and associated via `aria-describedby`.
+   */
+  error?: ReactNode;
+  /** The control (input/select/switch/…) this row wraps. */
+  children: ReactNode;
+  /** Extra props forwarded to the inner `FieldLabel` (e.g. custom `mb`). */
+  labelProps?: Omit<
+    FieldLabelProps,
+    'heading' | 'description' | 'endAdornment'
+  >;
+}

package/src/components/Form/FieldRow/index.ts

@@ -0,0 +1,2 @@
+export { FieldRow } from './FieldRow';
+export type { FieldRowProps } from './FieldRow.types';

package/src/components/Form/FormFooter/FormFooter.stories.tsx

@@ -0,0 +1,70 @@
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components/Button';
+import { Subtitle } from '@/components/Typography';
+
+import { FormFooter } from './FormFooter';
+
+const meta: Meta<typeof FormFooter> = {
+  title: 'Components/Form/FormFooter',
+  component: FormFooter,
+  decorators: [
+    (Story) => (
+      <Box w="420px" bg="bg.canvas">
+        <Story />
+      </Box>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The sticky footer shell shared by the studio settings footer and ' +
+          'the image/video generation footers: an optional left `start` slot ' +
+          'against a right group of `meta` + `action`.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormFooter>;
+
+/** Studio settings footer shape: destructive start + saved-at meta + save action. */
+export const WithStartMetaAndAction: Story = {
+  args: {
+    start: (
+      <Button size="sm" variant="ghost" colorPalette="danger">
+        Delete
+      </Button>
+    ),
+    meta: <Subtitle>Updated 2 minutes ago</Subtitle>,
+    action: (
+      <Button size="sm" variant="solid">
+        Save
+      </Button>
+    ),
+  },
+};
+
+/** Media generation footer shape: a single full-width action. */
+export const FullWidthAction: Story = {
+  args: {
+    action: (
+      <Button variant="solid" size="lg" w="100%">
+        Generate image · 12
+      </Button>
+    ),
+  },
+};
+
+export const ActionOnly: Story = {
+  args: {
+    action: (
+      <Button size="sm" variant="solid">
+        Save
+      </Button>
+    ),
+  },
+};

package/src/components/Form/FormFooter/FormFooter.test.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { FormFooter } from './FormFooter';
+
+// Surface the layout-driving props (justify / position) onto the DOM so the
+// slot layout and sticky behavior are assertable without a Chakra provider.
+vi.mock('@chakra-ui/react', () => ({
+  Flex: ({
+    children,
+    justify,
+    position,
+  }: {
+    children?: ReactNode;
+    justify?: string;
+    position?: string;
+  }) => (
+    <div data-justify={justify ?? ''} data-position={position ?? ''}>
+      {children}
+    </div>
+  ),
+}));
+
+const outer = (container: HTMLElement) => container.firstChild as HTMLElement;
+
+describe('FormFooter', () => {
+  it('renders start, meta and action slots', () => {
+    render(
+      <FormFooter
+        start={<button>Delete</button>}
+        meta={<span>Updated now</span>}
+        action={<button>Save</button>}
+      />
+    );
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+    expect(screen.getByText('Updated now')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('justifies space-between when a start slot is present', () => {
+    const { container } = render(
+      <FormFooter
+        start={<button>Delete</button>}
+        action={<button>Save</button>}
+      />
+    );
+    expect(outer(container)).toHaveAttribute('data-justify', 'space-between');
+  });
+
+  it('justifies flex-end when there is no start slot (media full-width action)', () => {
+    const { container } = render(
+      <FormFooter action={<button>Generate</button>} />
+    );
+    expect(outer(container)).toHaveAttribute('data-justify', 'flex-end');
+  });
+
+  it('is sticky by default and drops sticky when disabled', () => {
+    const { container, rerender } = render(
+      <FormFooter action={<button>Save</button>} />
+    );
+    expect(outer(container)).toHaveAttribute('data-position', 'sticky');
+
+    rerender(<FormFooter action={<button>Save</button>} sticky={false} />);
+    expect(outer(container)).toHaveAttribute('data-position', '');
+  });
+});