Token revamp (#392)

* feat: improved button token

* chore: improved the token structure of butotn

* feat: add ButtonState enum and integrate state management in Button

* refactor: update token references in Tabs and Switch components for consistency

* fix: added revamped token structures for tooltip & popover

* feat: added themeProvider for popover

* refactor: remove margin styles and integrate gap

* fix: fixed tokens for alert, checkbox & radio

* refactor: simplify border and borderRadius  tabs token

* chore: run lint

* refactor: update tabs token

* refactor: rename underline to activeIndicator in tabs token

* refactor: update Switch component and tokens for improved structure

* refactor: restructure padding tokens in Tabs component

* refactor: simplify padding token access in StyledTabs component

* refactor: add xs size option to Avatar and update related tokens

* refactor: update Accordion component tokens

* feat: added theme provider support for progress bar

* fix: fixed import error

* fix: token revamp for menu

* fix: minor fixes

* refactor: update Card component styles and token access for consistency

* refactor: update Snackbar component for improved token usage and consistency

* refactor: update Breadcrumb component tokens

* fix: revamped multiselect tokens

* fix: revamped single select tokens

* refactor: update Modal, breadcrumb and snackbar token

* fix: revamped menu token with new fixes

* refactor: update Card component to improve token structure

* fix: revamped tokens for singleselect

* fix: fixed menu revamed tokens

* fix: added revamped tokens for menu

* feat: added tokens for labels and footer

* fix: minor fixes

* fix: fixed NumberInput token structure

* fix: added tokens for "required"

* fix: update text input token

* fix: update token of unit input

* fix: update TextArea token

* refactor: update SearchInput and TextArea token

* fix: revamped dropdown input tokens

* fix: revamped mulitvalue input tokens

* fix: revamped OTP input tokens

* fix: minor fixes

* refactor: update UnitInput and TextArea token structures

* fix: fixed multiValueTokens type

* fix: build issues

* fix: update card token gaps for header and body components

* fix: update Drawer component token

* feat: added help icon support for unit, textArea & text inputs

* fix: removed static FOUNDATION_TOKEN usage from tokens.ts files

* refactor: remove inline styles from Tooltip component

* feat: enhance Card component with no-header example and improved spacing

* fix: revamped stat card tokens

* refactor: update padding and border properties in Modal and Card components

* fix: revamped charts & progress bar tokens

* feat: add sidebar component tokens and update styles in Card

* feat: integrate responsive tokens in Sidebar components and update styles

* feat: update DateRangePicker styles and refactor component structure

* feat: enhance DateRangePicker components with calendar token

* feat: close modal on esc press

* feat: added expansion control to user

* feat: added height control for charts

* feat: add actionIcon slot for stat num. variant & direction feat

* fix: minor token fix

* refactor: update token for DateRangePicker and AvatarGroup

---------

Co-authored-by: dkrai04 <deepanshu.kumar@juspay.in>
Co-authored-by: Aryan <aryan.pidiha@juspay.in>

Author: 3 people

FIGMA_CODE_CONNECT.md

@@ -29,7 +29,7 @@
 ### Existing Code Connect Components
 
 1. Button - `apps/storybook/stories/components/Button/Button.figma.tsx`
-2. ButtonGroupV2 - `apps/storybook/stories/components/Button/ButtonGroupV2.figma.tsx`
+2. ButtonGroup - `apps/storybook/stories/components/Button/ButtonGroup.figma.tsx`
 3. Breadcrumb - `apps/storybook/stories/components/Breadcrumb/Breadcrumb.figma.tsx`
 4. Tags - `apps/storybook/stories/components/Tags/Tags.figma.tsx`
 5. SplitTag - `apps/storybook/stories/components/Tags/SplitTag.figma.tsx`

apps/ascent/app/components/features/Documentation/PreviewWrapper.tsx

@@ -12,10 +12,9 @@ const previewComponents = {
         ssr: false,
     }),
     TagPreview: dynamic(() => import('./Previews/TagPreview'), { ssr: false }),
-    ButtonGroupV2Preview: dynamic(
-        () => import('./Previews/ButtonGroupV2Preview'),
-        { ssr: false }
-    ),
+    ButtonGroupPreview: dynamic(() => import('./Previews/ButtonGroupPreview'), {
+        ssr: false,
+    }),
     TabsPreview: dynamic(() => import('./Previews/TabsPreview'), {
         ssr: false,
     }),
@@ -74,9 +73,6 @@ const previewComponents = {
     DataTablePreview: dynamic(() => import('./Previews/DataTablePreview'), {
         ssr: false,
     }),
-    ButtonGroupPreview: dynamic(() => import('./Previews/ButtonGroupPreview'), {
-        ssr: false,
-    }),
     DrawerPreview: dynamic(() => import('./Previews/DrawerPreview'), {
         ssr: false,
     }),

apps/ascent/app/components/features/Documentation/Previews/ButtonGroupV2Preview.tsx

@@ -3,19 +3,19 @@ import { ButtonGroup, Button, ButtonType } from '@juspay/blend-design-system'
 import React from 'react'
 import ComponentPreview from '@/components/features/Documentation/Previews/ComponentPreview'
 
-const ButtonGroupV2Preview = () => {
-    const tsCode = `import { ButtonGroupV2, Button, ButtonType } from "@juspay/blend-design-system";
+const ButtonGroupPreview = () => {
+    const tsCode = `import { ButtonGroup, Button, ButtonType } from "@juspay/blend-design-system";
 
 function MyComponent() {
   return (
-    <ButtonGroupV2 stacked={true}>
+    <ButtonGroup stacked={true}>
       <Button text="Cancel" buttonType={ButtonType.SUCCESS} />
       <Button text="Save" buttonType={ButtonType.PRIMARY} />
-    </ButtonGroupV2>
+    </ButtonGroup>
   );
 }`
 
-    const reCode = `type buttonGroupV2Props = {
+    const reCode = `type ButtonGroupProps = {
   stacked: option<bool>,
   children: React.element,
 }
@@ -25,16 +25,16 @@ let make = (
   ~stacked: option<bool>=?,
   ~children: React.element,
 ) => {
-  <ButtonGroupV2Binding ?stacked>
+  <ButtonGroupBinding ?stacked>
     {children}
-  </ButtonGroupV2Binding>
+  </ButtonGroupBinding>
 }`
 
     const bindingCode = `@module("@juspay/blend-design-system") @react.component
 external make: (
   ~stacked: bool=?,
   ~children: React.element,
-) => React.element = "ButtonGroupV2"`
+) => React.element = "ButtonGroup"`
 
     return (
         <ComponentPreview
@@ -50,4 +50,4 @@ external make: (
     )
 }
 
-export default ButtonGroupV2Preview
+export default ButtonGroupPreview

apps/ascent/app/components/features/Documentation/Previews/MenuPreview.tsx

@@ -3,16 +3,16 @@ import {
     Menu,
     MenuAlignment,
     MenuSide,
-    MenuItemV2Variant,
-    MenuItemV2ActionType,
+    MenuItemVariant,
+    MenuItemActionType,
 } from '@juspay/blend-design-system'
 import React from 'react'
 import ComponentPreview from '@/components/features/Documentation/Previews/ComponentPreview'
 import { Button, ButtonType } from '@juspay/blend-design-system'
 import { Settings, User, LogOut, ChevronDown } from 'lucide-react'
 
 const MenuPreview = () => {
-    const tsCode = `import { Menu, MenuAlignment, MenuSide, MenuItemV2Variant, MenuItemV2ActionType } from "@juspay/blend-design-system";
+    const tsCode = `import { Menu, MenuAlignment, MenuSide, MenuItemVariant, MenuItemActionType } from "@juspay/blend-design-system";
 import { Button, ButtonType } from "@juspay/blend-design-system";
 import { Settings, User, LogOut, ChevronDown } from "lucide-react";
 
@@ -31,8 +31,8 @@ function MyComponent() {
     {
       label: "Logout",
       slot1: <LogOut size={16} />,
-      variant: MenuItemV2Variant.ACTION,
-      actionType: MenuItemV2ActionType.DANGER,
+      variant: MenuItemVariant.ACTION,
+      actionType: MenuItemActionType.DANGER,
       onClick: () => console.log("Logout clicked"),
     },
   ];
@@ -136,8 +136,8 @@ external make: (
         {
             label: 'Logout',
             slot1: <LogOut size={16} />,
-            variant: MenuItemV2Variant.ACTION,
-            actionType: MenuItemV2ActionType.DANGER,
+            variant: MenuItemVariant.ACTION,
+            actionType: MenuItemActionType.DANGER,
             onClick: () => console.log('Logout clicked'),
         },
     ]

apps/ascent/app/components/mdx/PreviewComponents.tsx

@@ -12,7 +12,6 @@ const PREVIEW_COMPONENT_NAMES = [
     'Alert',
     'Tag',
     'ButtonGroup',
-    'ButtonGroupV2',
     'Tabs',
     'SplitTag',
     'Modal',
@@ -61,7 +60,6 @@ export const ButtonPreview = PreviewComponents.ButtonPreview
 export const AlertPreview = PreviewComponents.AlertPreview
 export const TagPreview = PreviewComponents.TagPreview
 export const ButtonGroupPreview = PreviewComponents.ButtonGroupPreview
-export const ButtonGroupV2Preview = PreviewComponents.ButtonGroupV2Preview
 export const TabsPreview = PreviewComponents.TabsPreview
 export const SplitTagPreview = PreviewComponents.SplitTagPreview
 export const ModalPreview = PreviewComponents.ModalPreview

apps/ascent/app/docs/components.ts

@@ -66,7 +66,7 @@ export const COMPONENT_REGISTRY: ComponentMetadata[] = [
         slug: 'button-group',
         title: 'Button Group V2',
         description:
-            'The ButtonGroupV2 component is a container that groups multiple Button components together with flexible layout options and automatic positioning.',
+            'The ButtonGroup component is a container that groups multiple Button components together with flexible layout options and automatic positioning.',
         icon: createIcon(
             [],
             [

apps/ascent/app/docs/content/components/menu.mdx

@@ -22,8 +22,8 @@ import {
     Menu,
     MenuAlignment,
     MenuSide,
-    MenuItemV2Variant,
-    MenuItemV2ActionType,
+    MenuItemVariant,
+    MenuItemActionType,
 } from 'blend-v1'
 import { Button, ButtonType } from 'blend-v1'
 import { Settings, User, LogOut, ChevronDown } from 'lucide-react'
@@ -53,8 +53,8 @@ function MyComponent() {
                 {
                     label: 'Sign Out',
                     slot1: <LogOut size={16} />,
-                    variant: MenuItemV2Variant.ACTION,
-                    actionType: MenuItemV2ActionType.DANGER,
+                    variant: MenuItemVariant.ACTION,
+                    actionType: MenuItemActionType.DANGER,
                     onClick: () => console.log('Sign out clicked'),
                 },
             ],
@@ -244,7 +244,7 @@ Structure for grouping menu items:
                 content: 'items',
                 hintText: 'Array of menu items in this group',
             },
-            { content: 'MenuItemV2Type[]', hintText: 'array' },
+            { content: 'MenuItemType[]', hintText: 'array' },
             { content: '' },
         ],
         [
@@ -261,7 +261,7 @@ Structure for grouping menu items:
     loadingMessage="Loading props..."
 />
 
-### MenuItemV2Type
+### MenuItemType
 
 Structure for individual menu items:
 
@@ -320,15 +320,15 @@ Structure for individual menu items:
                 content: 'variant',
                 hintText: 'Visual variant of the menu item',
             },
-            { content: 'MenuItemV2Variant', hintText: 'enum' },
-            { content: 'MenuItemV2Variant.DEFAULT' },
+            { content: 'MenuItemVariant', hintText: 'enum' },
+            { content: 'MenuItemVariant.DEFAULT' },
         ],
         [
             {
                 content: 'actionType',
                 hintText: 'Action type for styling (used with ACTION variant)',
             },
-            { content: 'MenuItemV2ActionType', hintText: 'enum' },
+            { content: 'MenuItemActionType', hintText: 'enum' },
             { content: '' },
         ],
         [
@@ -352,7 +352,7 @@ Structure for individual menu items:
                 content: 'subMenu',
                 hintText: 'Nested menu items for creating submenus',
             },
-            { content: 'MenuItemV2Type[]', hintText: 'array' },
+            { content: 'MenuItemType[]', hintText: 'array' },
             { content: '' },
         ],
     ]}
@@ -399,8 +399,8 @@ const basicItems = [
             {
                 label: 'Delete',
                 slot1: <Trash size={16} />,
-                variant: MenuItemV2Variant.ACTION,
-                actionType: MenuItemV2ActionType.DANGER,
+                variant: MenuItemVariant.ACTION,
+                actionType: MenuItemActionType.DANGER,
                 onClick: () => console.log('Delete clicked'),
             },
         ],
@@ -485,8 +485,8 @@ const groupedItems = [
             {
                 label: 'Sign Out',
                 slot1: <LogOut size={16} />,
-                variant: MenuItemV2Variant.ACTION,
-                actionType: MenuItemV2ActionType.DANGER,
+                variant: MenuItemVariant.ACTION,
+                actionType: MenuItemActionType.DANGER,
                 onClick: () => console.log('Sign out'),
             },
         ],
@@ -683,7 +683,7 @@ export type MenuTokensType = {
         fontSize: CSSObject['fontSize']
 
         colors: {
-            [key in MenuItemV2Variant]: {
+            [key in MenuItemVariant]: {
                 default: {
                     background: CSSObject['backgroundColor']
                     text: CSSObject['color']
@@ -700,7 +700,7 @@ export type MenuTokensType = {
         }
 
         actionColors: {
-            [key in MenuItemV2ActionType]: {
+            [key in MenuItemActionType]: {
                 default: CSSObject['color']
                 hover: CSSObject['color']
             }
@@ -776,19 +776,19 @@ enum MenuSide {
 }
 ```
 
-### MenuItemV2Variant
+### MenuItemVariant
 
 ```tsx
-enum MenuItemV2Variant {
+enum MenuItemVariant {
     DEFAULT = 'default', // Standard menu item styling
     ACTION = 'action', // Special styling for actions (with actionType)
 }
 ```
 
-### MenuItemV2ActionType
+### MenuItemActionType
 
 ```tsx
-enum MenuItemV2ActionType {
+enum MenuItemActionType {
     PRIMARY = 'primary', // Primary action styling (blue)
     DANGER = 'danger', // Danger action styling (red)
 }