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

package/codemods/5.0/__testfixtures__/button-variants.output.tsx

@@ -0,0 +1,116 @@
+import { Button, IconButton as IB } from '@mindlogic-ai/logician-ui';
+import { Button as LButton } from '@mindlogic-ai/logician-ui';
+import * as LUI from '@mindlogic-ai/logician-ui';
+import { Button as OtherButton } from 'some-other-lib';
+
+export const Buttons = ({ kind, palette, rest, ok }: any) => (
+  <>
+    {/* Button — solid */}
+    <Button variant="primary">primary/solid</Button>
+    <Button variant="primary">—/solid</Button>
+    <Button variant="primary">neutral/solid</Button>
+    <Button variant="danger">danger/solid</Button>
+    {/* Button — outline */}
+    <Button variant="secondary">neutral/outline</Button>
+    <Button variant="secondary">—/outline</Button>
+    <Button variant="secondary">primary/outline</Button>
+    <Button variant="secondary">secondary/outline</Button>
+    <Button variant="secondary" isDestructive>
+      danger/outline
+    </Button>
+    {/* Button — ghost */}
+    <Button variant="ghost">neutral/ghost</Button>
+    <Button variant="ghost">primary/ghost</Button>
+    <Button variant="ghost" isDestructive>
+      danger/ghost
+    </Button>
+    {/* Button — soft / default */}
+    <Button variant="subtle" isDestructive>
+      danger/soft
+    </Button>
+    <Button variant="subtle" isDestructive>
+      danger/—
+    </Button>
+    <Button variant="subtle">—/—</Button>
+    <Button variant="subtle">primary/—</Button>
+    <Button variant="subtle">secondary/—</Button>
+    <Button variant="subtle">primary/soft</Button>
+    <Button variant="subtle">neutral/soft</Button>
+    <Button variant="subtle">secondary/soft</Button>
+    {/* colorScheme (Chakra v2 name) is treated like colorPalette */}
+    <Button variant="secondary" isDestructive onClick={ok}>
+      colorScheme
+    </Button>
+    <Button variant="primary">static expressions</Button>
+    {/* No exact 5.0 role → TODO + report */}
+    <Button
+      /* TODO(logician-ui 5.0): colorPalette="secondary" variant="solid" has no exact 5.0 role; set to variant="primary" — pick one */
+      variant="primary"
+    >
+      secondary/solid
+    </Button>
+    <Button
+      /* TODO(logician-ui 5.0): colorPalette="warning" variant="solid" has no exact 5.0 role; set to variant="primary" — pick one */
+      variant="primary"
+    >
+      warning/solid
+    </Button>
+    <Button
+      /* TODO(logician-ui 5.0): colorPalette="primary" variant="link" has no exact 5.0 role; set to variant="subtle" — pick one */
+      variant="subtle"
+    >
+      unknown variant
+    </Button>
+    <Button /* TODO(logician-ui 5.0): colorPalette="danger" variant="plain" has no exact 5.0 role; set to variant="subtle" isDestructive — pick one */
+      variant="subtle"
+      isDestructive
+    >
+      unknown variant, danger
+    </Button>
+    {/* Dynamic → untouched + report */}
+    <Button variant={kind}>dynamic variant</Button>
+    <Button colorPalette={ok ? 'danger' : 'primary'} variant="solid">
+      dynamic palette
+    </Button>
+    {/* Spread → migrated, reported */}
+    <Button {...rest} variant="primary">
+      spread
+    </Button>
+    {/* Already 5.0 → untouched */}
+    <Button variant="primary">already</Button>
+    <Button variant="ghost" isDestructive>
+      already
+    </Button>
+    {/* Aliases and namespaces */}
+    <LButton variant="primary">alias</LButton>
+    <LUI.Button variant="ghost" isDestructive>
+      namespace
+    </LUI.Button>
+    {/* Not logician-ui → untouched */}
+    <OtherButton colorPalette="primary" variant="solid">
+      other
+    </OtherButton>
+
+    {/* IconButton (aliased as IB) */}
+    <IB aria-label="a" />
+    <IB aria-label="a" />
+    <IB aria-label="a" variant="ghost" />
+    <IB aria-label="a" />
+    <IB aria-label="a" />
+    <IB aria-label="a" />
+    <IB aria-label="a" />
+    <IB aria-label="a" variant="secondary" />
+    <IB aria-label="a" variant="secondary" />
+    <IB aria-label="a" variant="primary" />
+    <IB aria-label="a" variant="danger" />
+    <IB aria-label="a" isDestructive />
+    <IB aria-label="a" isDestructive />
+    <IB
+      aria-label="a"
+      /* TODO(logician-ui 5.0): colorPalette="secondary" variant="solid" has no exact 5.0 role; set to variant="primary" — pick one */
+      variant="primary"
+    />
+    <IB aria-label="a" colorPalette={palette} />
+    <IB aria-label="a" variant="secondary" />
+  </>
+);

package/codemods/5.0/__testfixtures__/card-gradient.input.tsx

@@ -0,0 +1,12 @@
+import { Card } from '@mindlogic-ai/logician-ui';
+
+export const Cards = ({ v }: any) => (
+  <>
+    <Card variant="gradient" p={4}>
+      gradient
+    </Card>
+    <Card variant="gradient" />
+    <Card variant="wash">wash</Card>
+    <Card variant={v}>dynamic</Card>
+  </>
+);

package/codemods/5.0/__testfixtures__/card-gradient.output.tsx

@@ -0,0 +1,16 @@
+import { Card } from '@mindlogic-ai/logician-ui';
+
+export const Cards = ({ v }: any) => (
+  <>
+    <Card
+      /* TODO(logician-ui 5.0): Card variant="gradient" was removed; now the default card — choose wash/elevated or a bg */
+      p={4}
+    >
+      gradient
+    </Card>
+    <Card /* TODO(logician-ui 5.0): Card variant="gradient" was removed; now the default card — choose wash/elevated or a bg */
+    />
+    <Card variant="wash">wash</Card>
+    <Card variant={v}>dynamic</Card>
+  </>
+);

package/codemods/5.0/__testfixtures__/index.input.tsx

@@ -0,0 +1,43 @@
+import {
+  Button as LButton,
+  IconButton,
+  Badge,
+  Chip,
+  TagLabel,
+  Card,
+} from '@mindlogic-ai/logician-ui';
+import Link from 'next/link';
+
+export const A = ({ kind, p }: any) => (
+  <div>
+    <LButton colorPalette="primary" variant="solid">
+      Go
+    </LButton>
+    <LButton colorPalette="danger" variant="outline" onClick={p}>
+      Del
+    </LButton>
+    <LButton colorPalette="secondary" variant="solid">
+      ?
+    </LButton>
+    <LButton variant={kind}>dyn</LButton>
+    <LButton {...p}>spread</LButton>
+    <IconButton colorPalette="danger" variant="soft" aria-label="x" />
+    <IconButton colorPalette="neutral" variant="outline" aria-label="x" />
+    <Badge variant="primary">b</Badge>
+    <Chip colorScheme="danger">c</Chip>
+    <Chip variant="solid">c</Chip>
+    <Card variant="gradient" p={2}>
+      x
+    </Card>
+    <Link href="/" color="fg.accent">
+      l
+    </Link>
+    <div
+      style={{
+        color: 'primary.lighter',
+        borderColor: `var(--chakra-colors-slate-300)`,
+      }}
+    />
+    <span color="primary.light" bg="blue.500" />
+  </div>
+);

package/codemods/5.0/__testfixtures__/index.output.tsx

@@ -0,0 +1,53 @@
+import {
+  Button as LButton,
+  IconButton,
+  Badge,
+  Tag,
+  TagLabel,
+  Card,
+} from '@mindlogic-ai/logician-ui';
+import Link from 'next/link';
+
+export const A = ({ kind, p }: any) => (
+  <div>
+    <LButton variant="primary">Go</LButton>
+    <LButton variant="secondary" isDestructive onClick={p}>
+      Del
+    </LButton>
+    <LButton
+      /* TODO(logician-ui 5.0): colorPalette="secondary" variant="solid" has no exact 5.0 role; set to variant="primary" — pick one */
+      variant="primary"
+    >
+      ?
+    </LButton>
+    <LButton variant={kind}>dyn</LButton>
+    <LButton variant="subtle" {...p}>
+      spread
+    </LButton>
+    <IconButton isDestructive aria-label="x" />
+    <IconButton variant="secondary" aria-label="x" />
+    <Badge>b</Badge>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="danger">
+      c
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" selected>
+      c
+    </Tag>
+    <Card
+      /* TODO(logician-ui 5.0): Card variant="gradient" was removed; now the default card — choose wash/elevated or a bg */
+      p={2}
+    >
+      x
+    </Card>
+    <Link href="/" color="fg.link">
+      l
+    </Link>
+    <div
+      style={{
+        color: 'primary.washActive',
+        borderColor: `var(--chakra-colors-neutral-5)`,
+      }}
+    />
+    <span color="border.strong" bg="blue.500" />
+  </div>
+);

package/codemods/5.0/__testfixtures__/tag-chip-conflict.input.tsx

@@ -0,0 +1,10 @@
+import { Tag } from 'some-other-lib';
+import { Button, Chip } from '@mindlogic-ai/logician-ui';
+
+export const Conflict = () => (
+  <>
+    <Tag kind="other">not ours</Tag>
+    <Chip colorScheme="danger">ours</Chip>
+    <Button>keep</Button>
+  </>
+);

package/codemods/5.0/__testfixtures__/tag-chip-conflict.output.tsx

@@ -0,0 +1,12 @@
+import { Tag } from 'some-other-lib';
+import { Button, Tag as LuiTag } from '@mindlogic-ai/logician-ui';
+
+export const Conflict = () => (
+  <>
+    <Tag kind="other">not ours</Tag>
+    <LuiTag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="danger">
+      ours
+    </LuiTag>
+    <Button>keep</Button>
+  </>
+);

package/codemods/5.0/__testfixtures__/tag-chip-merge.input.tsx

@@ -0,0 +1,42 @@
+import { Tag, TagLabel, Chip as StatusChip } from '@mindlogic-ai/logician-ui';
+import { Chip } from '@mindlogic-ai/logician-ui';
+
+export const Mixed = () => (
+  <>
+    {/* Tag 4.x default = neutral/soft */}
+    <Tag>
+      <TagLabel>plain</TagLabel>
+    </Tag>
+    <Tag colorPalette="primary">primary/—</Tag>
+    <Tag colorPalette="danger" variant="soft">
+      danger/soft
+    </Tag>
+    <Tag colorPalette="success" variant="outline">
+      success/outline
+    </Tag>
+    <Tag colorPalette="primary" variant="solid">
+      primary/solid
+    </Tag>
+    <Tag variant="solid">—/solid (neutral default)</Tag>
+    <Tag colorPalette="warning" variant="solid">
+      warning/solid
+    </Tag>
+    <Tag colorPalette="danger" variant="outline">
+      danger/outline
+    </Tag>
+    <Tag colorPalette="neutral" variant="solid">
+      neutral/solid
+    </Tag>
+    <Tag colorPalette="secondary" variant="solid">
+      secondary/solid
+    </Tag>
+    <Tag colorPalette="danger" variant="subtle">
+      unknown variant
+    </Tag>
+    <Tag colorScheme="danger">colorScheme on a Tag is not read</Tag>
+    <StatusChip colorScheme="warning">aliased chip</StatusChip>
+    <Chip colorScheme="primary" variant="solid">
+      <TagLabel>second import</TagLabel>
+    </Chip>
+  </>
+);

package/codemods/5.0/__testfixtures__/tag-chip-merge.output.tsx

@@ -0,0 +1,44 @@
+import { Tag, TagLabel } from '@mindlogic-ai/logician-ui';
+
+export const Mixed = () => (
+  <>
+    {/* Tag 4.x default = neutral/soft */}
+    <Tag>
+      <TagLabel>plain</TagLabel>
+    </Tag>
+    <Tag>primary/—</Tag>
+    <Tag tone="danger">danger/soft</Tag>
+    <Tag /* TODO(logician-ui 5.0): success/outline has no outlined 5.0 Tag; now a plain Tag — tone="success"? */
+    >
+      success/outline
+    </Tag>
+    <Tag selected>primary/solid</Tag>
+    <Tag selected>—/solid (neutral default)</Tag>
+    <Tag
+      /* TODO(logician-ui 5.0): warning/solid has no filled 5.0 Tag; now tone="warning" (soft) */
+      tone="warning"
+    >
+      warning/solid
+    </Tag>
+    <Tag /* TODO(logician-ui 5.0): danger/outline has no outlined 5.0 Tag; now a plain Tag — tone="danger"? */
+    >
+      danger/outline
+    </Tag>
+    <Tag selected>neutral/solid</Tag>
+    <Tag selected>secondary/solid</Tag>
+    <Tag /* TODO(logician-ui 5.0): variant="subtle" is not a Tag variant; now a plain Tag */
+    >
+      unknown variant
+    </Tag>
+    <Tag /* TODO(logician-ui 5.0): colorScheme="danger" was ignored by Tag (it reads colorPalette); removed */
+    >
+      colorScheme on a Tag is not read
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="warning">
+      aliased chip
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" selected>
+      <TagLabel>second import</TagLabel>
+    </Tag>
+  </>
+);

package/codemods/5.0/__testfixtures__/tag-chip.input.tsx

@@ -0,0 +1,67 @@
+import { Box } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { Chip } from '@mindlogic-ai/logician-ui';
+import type { ChipProps } from '@mindlogic-ai/logician-ui';
+
+const Fancy = styled(Chip)`
+  margin: 0;
+`;
+
+export const Chips = ({
+  cs,
+  rest,
+}: {
+  cs: ChipProps['colorScheme'];
+  rest: object;
+}) => (
+  <Box>
+    {/* Chip 4.x default = primary/soft */}
+    <Chip>—/—</Chip>
+    <Chip colorScheme="primary" variant="soft">
+      primary/soft
+    </Chip>
+    <Chip colorScheme="secondary">secondary/—</Chip>
+    <Chip colorScheme="neutral" variant="soft">
+      neutral/soft
+    </Chip>
+    <Chip colorScheme="danger" variant="soft">
+      danger/soft
+    </Chip>
+    <Chip colorScheme="success">success/—</Chip>
+    <Chip colorScheme="warning" size="sm">
+      warning/—
+    </Chip>
+    <Chip colorScheme="primary" variant="solid">
+      primary/solid
+    </Chip>
+    <Chip variant="solid">—/solid (primary default)</Chip>
+    <Chip colorScheme="neutral" variant="outline">
+      neutral/outline
+    </Chip>
+    <Chip colorScheme="danger" variant="outline">
+      danger/outline
+    </Chip>
+    <Chip colorScheme="secondary" variant="solid">
+      secondary/solid
+    </Chip>
+    <Chip colorScheme={cs}>dynamic</Chip>
+    <Chip {...rest} colorScheme="success">
+      spread
+    </Chip>
+    <Chip colorScheme="danger" />
+    {/* Runtime precedence: colorScheme ?? colorPalette */}
+    <Chip colorScheme="danger" colorPalette="success">
+      colorScheme wins
+    </Chip>
+    <Chip colorPalette="success">colorPalette fallback</Chip>
+    {/* Shape the call site already sets is kept */}
+    <Chip borderRadius="md" p={1} fontWeight="bold">
+      own shape
+    </Chip>
+    {/* An explicit selected wins over the mapping */}
+    <Chip variant="solid" selected={false}>
+      explicit selected
+    </Chip>
+    <Fancy>styled</Fancy>
+  </Box>
+);

package/codemods/5.0/__testfixtures__/tag-chip.output.tsx

@@ -0,0 +1,99 @@
+import { Box } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { Tag } from '@mindlogic-ai/logician-ui';
+import type { ChipProps } from '@mindlogic-ai/logician-ui';
+
+const Fancy = styled(Tag)`
+  margin: 0;
+`;
+
+export const Chips = ({
+  cs,
+  rest,
+}: {
+  cs: ChipProps['colorScheme'];
+  rest: object;
+}) => (
+  <Box>
+    {/* Chip 4.x default = primary/soft */}
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium">
+      —/—
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium">
+      primary/soft
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium">
+      secondary/—
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium">
+      neutral/soft
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="danger">
+      danger/soft
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="success">
+      success/—
+    </Tag>
+    <Tag
+      borderRadius="xl"
+      px={3}
+      py={2}
+      fontWeight="medium"
+      tone="warning"
+      size="sm"
+    >
+      warning/—
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" selected>
+      primary/solid
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" selected>
+      —/solid (primary default)
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium">
+      neutral/outline
+    </Tag>
+    <Tag
+      /* TODO(logician-ui 5.0): danger/outline has no outlined 5.0 Tag; now a plain Tag — tone="danger"? */
+      borderRadius="xl"
+      px={3}
+      py={2}
+      fontWeight="medium"
+    >
+      danger/outline
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" selected>
+      secondary/solid
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" colorScheme={cs}>
+      dynamic
+    </Tag>
+    <Tag
+      borderRadius="xl"
+      px={3}
+      py={2}
+      fontWeight="medium"
+      {...rest}
+      tone="success"
+    >
+      spread
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="danger" />
+    {/* Runtime precedence: colorScheme ?? colorPalette */}
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="danger">
+      colorScheme wins
+    </Tag>
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" tone="success">
+      colorPalette fallback
+    </Tag>
+    {/* Shape the call site already sets is kept */}
+    <Tag borderRadius="md" p={1} fontWeight="bold">
+      own shape
+    </Tag>
+    {/* An explicit selected wins over the mapping */}
+    <Tag borderRadius="xl" px={3} py={2} fontWeight="medium" selected={false}>
+      explicit selected
+    </Tag>
+    <Fancy>styled</Fancy>
+  </Box>
+);

package/codemods/5.0/__testfixtures__/token-renames.input.tsx

@@ -0,0 +1,88 @@
+import { Box, Link, Text } from '@mindlogic-ai/logician-ui';
+import NextLink from 'next/link';
+
+type Tokens = 'slate.800' | 'primary.light';
+
+const styles = {
+  bg: 'primary.lightest',
+  hover: 'primary.extralight',
+  pressed: 'primary.lighter',
+  border: 'primary.light',
+  title: 'primary.dark',
+  fill: 'primary.fill',
+  fillStrong: 'primary.fillStrong',
+  secondaryText: 'secondary.main',
+  danger: 'danger.main',
+  successBg: 'success.lightest',
+  warn: 'warning.fill',
+  selected: 'bg.selected',
+  shadow: '0 0 0 1px var(--chakra-colors-slate-300)',
+  gradient:
+    'linear-gradient(90deg, var(--chakra-colors-primary-lightest), var(--chakra-colors-danger-main))',
+  gray: 'gray.300',
+  grayVar: 'var(--chakra-colors-gray-800)',
+  // CSS variables are kebab-case (Chakra dash-cases camelCase segments)
+  pressedVar: 'var(--chakra-colors-primary-lighter)',
+  fillStrongVar: 'var(--chakra-colors-primary-fill-strong)',
+  // Chakra token references with the `colors.` prefix
+  pathy: 'colors.primary.light',
+  ref: '{colors.success.main}',
+  mix: 'color-mix(in oklab, {colors.warning.fill} 70%, black)',
+  grayRef: '{colors.gray.300}',
+  // Longest token wins: primary.lighter (not primary.light + "er"), slate.1000 (not slate.100 + "0")
+  lighterNotLight: 'primary.lighter',
+  slate1000: 'slate.1000',
+  // Boundaries — must NOT change
+  digitSuffix: 'slate.8000',
+  wordSuffix: 'primary.light2',
+  dashSuffix: 'primary.light-x',
+  wordPrefix: 'xslate.800',
+  dashPrefix: 'my-primary.light',
+  varSuffix: 'var(--chakra-colors-slate-3000)',
+  notAToken: 'fg.default',
+  notColorsPrefix: 'foo.primary.light',
+  deepPath: 'theme.colors.primary.light',
+  longer: 'slate.100x',
+  // Raw primitives — reported, not renamed
+  blue: 'blue.500',
+  violet: 'violet.300',
+  greenVar: 'var(--chakra-colors-green-600)',
+  grayDark: 'grayDark.200',
+  grayDarkRef: '{colors.grayDark.200}',
+  grayDarkVar: 'var(--chakra-colors-gray-dark-200)',
+};
+
+const token = (path: string) => path;
+export const dangerRef = token('colors.danger.main');
+
+const theme = { colors: { 'slate.800': '#616B85' } };
+
+export const Tokens = ({ active }: { active: boolean }) => (
+  <Box
+    bg="slate.100"
+    color={'slate.800'}
+    borderColor={active ? 'primary.main' : 'slate.300'}
+    _hover={{ bg: 'primary.lightest', color: 'fg.accent' }}
+    css={{ outline: `2px solid var(--chakra-colors-slate-500)` }}
+    sx={{
+      border: `1px solid ${active ? 'red' : 'blue'}`,
+      color: `slate.${1200}`,
+    }}
+  >
+    <Text color="fg.accent">accent text → primary.main</Text>
+    <Link color="fg.accent" href="/a">
+      link → fg.link
+    </Link>
+    <a color="fg.accent" href="/b">
+      anchor → fg.link
+    </a>
+    <NextLink href="/c" color="fg.accent">
+      other Link-named? no — NextLink is not Link/a
+    </NextLink>
+    <Text color="slate.1000" bg={`slate.50`}>
+      {theme.colors['slate.800']}
+    </Text>
+  </Box>
+);
+
+export type { Tokens as T };