@mindlogic-ai/logician-ui 2.0.0-alpha.21 → 2.0.0-alpha.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.22",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
+import { Icon, HStack, Text } from '@chakra-ui/react';
+import { FiHome, FiUser, FiSettings } from 'react-icons/fi';
 
 import { SegmentedControl } from './SegmentedControl';
 
@@ -94,3 +96,36 @@ Small.args = {
   borderRadius: 'full',
   w: 'fit-content',
 };
+
+export const WithCustomContent = Template.bind({});
+WithCustomContent.args = {
+  options: [
+    {
+      label: (
+        <HStack spacing={2}>
+          <Icon as={FiHome} />
+          <Text>Home</Text>
+        </HStack>
+      ),
+      value: 'home',
+    },
+    {
+      label: (
+        <HStack spacing={2}>
+          <Icon as={FiUser} />
+          <Text>Profile</Text>
+        </HStack>
+      ),
+      value: 'profile',
+    },
+    {
+      label: (
+        <HStack spacing={2}>
+          <Icon as={FiSettings} />
+          <Text>Settings</Text>
+        </HStack>
+      ),
+      value: 'settings',
+    },
+  ],
+};

package/src/components/SegmentedControl/SegmentedControl.types.ts

@@ -1,7 +1,8 @@
+import { ReactNode } from 'react';
 import { FlexProps, theme } from '@chakra-ui/react';
 
 export type SegmentedControlOption = {
-  label: string;
+  label: ReactNode;
   value: string;
 };
 

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

@@ -17,22 +17,32 @@ export function Toasts() {
       <Button
         onClick={() =>
           showToast({
-            description: 'Your action was successful.',
-            status: 'success',
+            description: 'There was an error processing your request.',
+            status: 'info',
           })
         }
       >
-        Show Success Toast
+        Show Info Toast
       </Button>
       <Button
         onClick={() =>
           showToast({
-            description: 'There was an error processing your request.',
-            status: 'info',
+            description: 'This is a warning toast.',
+            status: 'warning',
           })
         }
       >
-        Show Info Toast
+        Show Warning Toast
+      </Button>
+      <Button
+        onClick={() =>
+          showToast({
+            description: 'Your action was successful.',
+            status: 'success',
+          })
+        }
+      >
+        Show Success Toast
       </Button>
       <Button
         onClick={() =>

package/src/components/Toast/Toast.styles.ts

@@ -1,19 +1,26 @@
 import { BoxProps } from '@chakra-ui/react';
 
-export const toastStyles: Record<string, BoxProps> = {
-  success: {
-    bg: 'success.lighter',
-    color: 'success.dark',
-    borderColor: 'success.light',
-  },
+import type { MLToastOptions } from './Toast.types';
+
+export const toastStyles = {
   info: {
     bg: 'primary.light',
     color: 'primary.dark',
     borderColor: 'primary.lighter',
   },
+  warning: {
+    bg: 'warning.lighter',
+    color: 'warning.dark',
+    borderColor: 'warning.light',
+  },
+  success: {
+    bg: 'success.lighter',
+    color: 'success.dark',
+    borderColor: 'success.light',
+  },
   error: {
     bg: 'danger.lighter',
     color: 'danger.dark',
     borderColor: 'danger.light',
   },
-};
+} satisfies Record<MLToastOptions['status'], BoxProps>;

package/src/components/Toast/Toast.types.ts

@@ -10,7 +10,7 @@ export interface MLToastOptions {
   description: ReactNode;
   status?: Extract<
     ChakraUseToastOptions['status'],
-    'success' | 'error' | 'info'
+    'info' | 'warning' | 'success' | 'error'
   >;
 }
 

package/src/components/Toast/ToastIcon/ToastIcon.tsx

@@ -1,12 +1,18 @@
-import { IoIosCheckmarkCircle, LuInfo, MdError } from '@/components/Icon';
+import {
+  IoIosCheckmarkCircle,
+  IoWarning,
+  LuInfo,
+  MdError,
+} from '@/components/Icon';
 
 import { ToastProps } from '../Toast.types';
 
 export const ToastIcon = ({ status }: Required<Pick<ToastProps, 'status'>>) => {
   const iconProps: { [K in typeof status]: React.ReactNode } = {
+    info: <LuInfo boxSize="md" color="primary.main" />,
+    warning: <IoWarning boxSize="lg" color="warning.main" />,
     success: <IoIosCheckmarkCircle boxSize="lg" color="success.main" />,
     error: <MdError boxSize="lg" color="danger.main" />,
-    info: <LuInfo boxSize="md" color="primary.main" />,
   };
 
   return iconProps[status];

package/src/components/Toast/useToast.tsx

@@ -63,5 +63,11 @@ export const useToast = (props?: UseToastOptions) => {
     return toastId;
   };
 
-  return showToast;
+  return Object.assign(showToast, {
+    close: toast.close,
+    closeAll: toast.closeAll,
+    update: toast.update,
+    isActive: toast.isActive,
+    promise: toast.promise,
+  });
 };