@mindlogic-ai/logician-ui 2.0.0 → 3.0.0-alpha.1

package/src/components/Banner/Banner.styles.ts

@@ -7,26 +7,32 @@ import { BannerProps, BannerSize } from './Banner.types';
 
 type VariantType = NonNullable<BannerProps['variant']>;
 
+/**
+ * Banner variant styles using the Golden Ratio color system.
+ *
+ * Uses `lightest` backgrounds with `lighter` borders and `dark` text
+ * for optimal readability and WCAG AA compliance.
+ */
 export const bannerStyles: Record<VariantType, BoxProps> = {
   info: {
-    bg: 'primary.lighter',
-    borderColor: 'primary.light',
-    color: 'primary.dark',
+    bg: 'primary.lightest', // #E8EEFB
+    borderColor: 'primary.lighter', // #B9CBF3
+    color: 'primary.dark', // #0D317D
   },
   success: {
-    bg: 'success.lighter',
-    borderColor: 'success.light',
-    color: 'success.dark',
+    bg: 'success.lightest', // #E9FBE8
+    borderColor: 'success.lighter', // #BDF3B9
+    color: 'success.dark', // #147D0D
   },
   warning: {
-    bg: 'warning.lighter',
-    borderColor: 'warning.light',
-    color: 'warning.dark',
+    bg: 'warning.lightest', // #FBF6E8
+    borderColor: 'warning.lighter', // #F3E4B9
+    color: 'warning.dark', // #7D610D
   },
   danger: {
-    bg: 'danger.lighter',
-    borderColor: 'danger.light',
-    color: 'danger.dark',
+    bg: 'danger.lightest', // #FBE8E9
+    borderColor: 'danger.lighter', // #F3B9BD
+    color: 'danger.dark', // #7D0D14
   },
 };
 
@@ -90,7 +96,7 @@ export const sizeStyles: Record<
       boxSize: 'sm', // 20px
     },
     text: {
-      fontSize: 'subtext', // theme.fontSizes.subtext (~13-14px)
+      textStyle: 'subtext', // Use textStyle instead of fontSize
       lineHeight: '1.4',
     },
     accentWidth: '3px',
@@ -106,7 +112,7 @@ export const sizeStyles: Record<
       boxSize: 'md', // 24px
     },
     text: {
-      fontSize: 'p', // theme.fontSizes.p (~14px)
+      textStyle: 'p', // Use textStyle instead of fontSize
       lineHeight: '1.5',
     },
     accentWidth: '4px',
@@ -122,7 +128,7 @@ export const sizeStyles: Record<
       boxSize: 'lg', // 32px
     },
     text: {
-      fontSize: 'h5', // theme.fontSizes.h5 (~15-17px)
+      textStyle: 'h5', // Use textStyle instead of fontSize
       lineHeight: '1.6',
     },
     accentWidth: '5px',

package/src/components/Banner/Banner.tsx

@@ -59,13 +59,7 @@ export const Banner = forwardRef(
               {children}
             </Text>
           ) : (
-            <Flex
-              w="100%"
-              flexDir="column"
-              justify="center"
-              {...styles.text}
-              {...textStyles[variant]}
-            >
+            <Flex w="100%" flexDir="column" justify="center">
               {children}
             </Flex>
           )}

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,3 +1,4 @@
+import { Stack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Breadcrumb } from './Breadcrumb';
@@ -7,23 +8,69 @@ import { BreadcrumbLink } from './BreadcrumbLink';
 const meta = {
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
+  argTypes: {
+    separator: { control: 'text' },
+  },
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   render: (args) => (
     <Breadcrumb {...args}>
       <BreadcrumbItem>
-        <BreadcrumbLink>Home</BreadcrumbLink>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbItem>
-        <BreadcrumbLink>Page1</BreadcrumbLink>
+        <BreadcrumbLink href="/products">Products</BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbItem>
-        <BreadcrumbLink>Page2</BreadcrumbLink>
+        <BreadcrumbLink href="/products/laptop">Laptop</BreadcrumbLink>
       </BreadcrumbItem>
     </Breadcrumb>
   ),
-} satisfies Meta<typeof Breadcrumb>;
+};
 
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
+export const CustomSeparator: Story = {
+  args: {
+    separator: '›',
+  },
+  render: (args) => (
+    <Stack gap={4}>
+      <div>
+        <Text fontSize="sm" fontWeight="medium" mb={2}>
+          Arrow separator (›)
+        </Text>
+        <Breadcrumb {...args}>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <div>
+        <Text fontSize="sm" fontWeight="medium" mb={2}>
+          Slash separator (/)
+        </Text>
+        <Breadcrumb separator="/">
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+    </Stack>
+  ),
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,16 +1,42 @@
-import { ForwardedRef, forwardRef } from 'react';
+import {
+  Children,
+  ForwardedRef,
+  forwardRef,
+  Fragment,
+  isValidElement,
+} from 'react';
 import { Breadcrumb as ChakraBreadcrumb } from '@chakra-ui/react';
 
-import { IoChevronForward } from '../Icon';
 import { BreadcrumbProps } from './Breadcrumb.types';
+
 export const Breadcrumb = forwardRef(
-  ({ ...rest }: BreadcrumbProps, ref?: ForwardedRef<HTMLDivElement>) => {
+  (
+    { children, separator = '›', separatorGap = 2, ...rest }: BreadcrumbProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    // Filter out invalid React elements (null, undefined, false, etc.) to ensure only valid children are rendered
+    const validChildren = Children.toArray(children).filter(isValidElement);
+
     return (
-      <ChakraBreadcrumb
-        separator={<IoChevronForward color="gray.800" />}
-        {...rest}
-        ref={ref}
-      />
+      // ChakraBreadcrumb.List is included internally for backward compatibility with v2 projects that don't expose List separately
+      <ChakraBreadcrumb.Root {...rest} ref={ref}>
+        <ChakraBreadcrumb.List gap={separatorGap}>
+          {validChildren.map((child, index) => {
+            // Check if current item is the last breadcrumb to avoid rendering separator after it
+            const last = index === validChildren.length - 1;
+            return (
+              <Fragment key={`breadcrumb-${index}`}>
+                {child}
+                {!last && (
+                  <ChakraBreadcrumb.Separator>
+                    {separator}
+                  </ChakraBreadcrumb.Separator>
+                )}
+              </Fragment>
+            );
+          })}
+        </ChakraBreadcrumb.List>
+      </ChakraBreadcrumb.Root>
     );
   }
 );

package/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -1,3 +1,12 @@
-import { BreadcrumbProps as ChakraBreadcrumbProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import {
+  BreadcrumbRootProps as ChakraBreadcrumbRootProps,
+  SystemStyleObject,
+} from '@chakra-ui/react';
 
-export interface BreadcrumbProps extends ChakraBreadcrumbProps {}
+export interface BreadcrumbProps extends ChakraBreadcrumbRootProps {
+  /** Custom separator to display between breadcrumb items */
+  separator?: ReactNode;
+  /** Gap between breadcrumb items and separators */
+  separatorGap?: SystemStyleObject['gap'];
+}

package/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx

@@ -1,11 +1,18 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { BreadcrumbItem as ChakraBreadcrumbItem } from '@chakra-ui/react';
+import { Breadcrumb } from '@chakra-ui/react';
 
 import { BreadcrumbItemProps } from './BreadcrumbItem.types';
 
 export const BreadcrumbItem = forwardRef(
-  ({ ...rest }: BreadcrumbItemProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraBreadcrumbItem {...rest} ref={ref} />;
+  (
+    { children, ...rest }: BreadcrumbItemProps,
+    ref?: ForwardedRef<HTMLLIElement>
+  ) => {
+    return (
+      <Breadcrumb.Item {...rest} ref={ref}>
+        {children}
+      </Breadcrumb.Item>
+    );
   }
 );
 

package/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.types.ts

@@ -1,3 +1,3 @@
 import { BreadcrumbItemProps as ChakraBreadcrumbItemProps } from '@chakra-ui/react';
 
-export interface BreadcrumbItemProps extends ChakraBreadcrumbItemProps {}
+export type BreadcrumbItemProps = ChakraBreadcrumbItemProps;

package/src/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx

@@ -1,10 +1,11 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { BreadcrumbLink as ChakraBreadcrumbLink } from '@chakra-ui/react';
+import { Breadcrumb } from '@chakra-ui/react';
 
 import { BreadcrumbLinkProps } from './BreadcrumbLink.types';
 // Optional Next.js Link import
 let NextLink: any;
 try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   NextLink = require('next/link').default;
 } catch {
   NextLink = null;
@@ -12,17 +13,22 @@ try {
 
 export const BreadcrumbLink = forwardRef(
   (
-    { href, ...rest }: BreadcrumbLinkProps,
-    ref?: ForwardedRef<HTMLDivElement>
+    { href, children, ...rest }: BreadcrumbLinkProps,
+    ref?: ForwardedRef<HTMLAnchorElement>
   ) => {
     return (
-      <ChakraBreadcrumbLink
+      <Breadcrumb.Link
         color="primary.dark"
-        as={NextLink || 'a'}
+        _hover={{
+          textDecoration: 'underline',
+        }}
+        asChild={!!NextLink}
         href={href}
         {...rest}
         ref={ref}
-      />
+      >
+        {NextLink ? <NextLink href={href}>{children}</NextLink> : children}
+      </Breadcrumb.Link>
     );
   }
 );

package/src/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.types.ts

@@ -1,3 +1,3 @@
 import { BreadcrumbLinkProps as ChakraBreadcrumbLinkProps } from '@chakra-ui/react';
 
-export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {}
+export type BreadcrumbLinkProps = ChakraBreadcrumbLinkProps;