@mirohq/design-system-tabs 0.5.0-new-focus-keyboard.0 → 0.5.0

package/dist/main.js

@@ -9,6 +9,7 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
+var designSystemExperiments = require('@mirohq/design-system-experiments');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
 var designSystemStyles = require('@mirohq/design-system-styles');
 
@@ -122,10 +123,14 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
   border: "1px solid transparent",
   gap: "$50",
   variants: {
+    v1: {
+      true: {},
+      false: {}
+    },
     variant: {
       buttons: {
         ...designSystemStyles.focus.css({
-          boxShadow: "$focus-keyboard"
+          boxShadow: "$focus-small"
         }),
         backgroundColor: "transparent",
         color: "$text-neutrals-subtle",
@@ -134,7 +139,6 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
           color: "$text-neutrals-subtle-hover"
         },
         "&[data-state=active]": {
-          backgroundColor: "$background-primary-subtle",
           color: "$text-primary-selected"
         },
         "&[data-pressed]": {
@@ -151,7 +155,7 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
         border: "none",
         borderRadius: "0",
         ...designSystemStyles.focus.css({
-          boxShadow: "$focus-keyboard",
+          boxShadow: "$focus-small",
           borderRadius: "$25",
           borderBottom: "unset !important"
         }),
@@ -219,12 +223,31 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
         height: "$10",
         paddingX: "$25"
       }
+    },
+    {
+      variant: "buttons",
+      v1: false,
+      css: {
+        "&[data-state=active]": {
+          backgroundColor: "$background-primary-subtle"
+        }
+      }
+    },
+    {
+      variant: "buttons",
+      v1: true,
+      css: {
+        "&[data-state=active]": {
+          backgroundColor: "$background-primary-subtle-selected"
+        }
+      }
     }
   ]
 });
 
 const Trigger = React__default["default"].forwardRef(({ children, value, ...restProps }, forwardRef) => {
   const { variant, size } = React__default["default"].useContext(TabsContext);
+  const [v1] = designSystemExperiments.useNewDesignLanguage();
   return /* @__PURE__ */ jsxRuntime.jsx(
     TriggerStyled,
     {
@@ -235,6 +258,7 @@ const Trigger = React__default["default"].forwardRef(({ children, value, ...rest
       asChild: true,
       ref: forwardRef,
       variant,
+      v1,
       children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, children })
     }
   );

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  variant?: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n}>({\n  variant: 'tabs',\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  variant: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ variant, size, children }) => (\n  <TabsContext.Provider\n    value={{\n      variant,\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n  typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  React.ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = React.useContext(TabsContext)\n\n  const formattedChildren = addPropsToChildren(children, isIconComponent, {\n    'data-icon-component': '',\n    size: size === 'medium' ? 'small' : 'medium',\n    weight: size === 'medium' ? 'thin' : 'normal',\n  })\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n  display: 'flex',\n  flexDirection: 'row',\n\n  variants: {\n    variant: {\n      buttons: {},\n      tabs: {\n        borderBottom: '2px solid $border-neutrals',\n      },\n    },\n    size: {\n      medium: { gap: '$50' },\n      large: { gap: '$100' },\n      'x-large': { gap: '$150' },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        gap: '$100',\n      },\n    },\n  ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n  ({ children, ...restProps }, forwardRef) => {\n    const { variant, size } = React.useContext(TabsContext)\n\n    return (\n      <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n        {children}\n      </ListStyled>\n    )\n  }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1.2,\n  fontWeight: '$semibold',\n  border: '1px solid transparent',\n  gap: '$50',\n\n  variants: {\n    variant: {\n      buttons: {\n        ...focus.css({\n          boxShadow: '$focus-keyboard',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n\n        _hover: {\n          backgroundColor: '$background-neutrals-hover',\n          color: '$text-neutrals-subtle-hover',\n        },\n\n        '&[data-state=active]': {\n          backgroundColor: '$background-primary-subtle',\n          color: '$text-primary-selected',\n        },\n\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-active',\n          color: '$text-neutrals-subtle-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n        },\n      },\n      tabs: {\n        marginBottom: '-$25',\n        border: 'none',\n        borderRadius: '0',\n        ...focus.css({\n          boxShadow: '$focus-keyboard',\n          borderRadius: '$25',\n          borderBottom: 'unset !important',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n        borderBottom: '2px solid $border-neutrals',\n\n        _hover: {\n          color: '$text-neutrals-hover',\n          borderBottom: '2px solid $border-neutrals-hover',\n        },\n\n        '&[data-state=active]': {\n          color: '$text-primary-selected',\n          borderBottom: '2px solid $border-primary',\n        },\n\n        '&[data-pressed]': {\n          color: '$text-neutrals-active',\n          borderBottom: '2px solid $border-neutrals-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n          borderBottom: '2px solid $border-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$250',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        height: '$14',\n        paddingX: '$100',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        height: '$12',\n        paddingX: '$50',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        height: '$10',\n        paddingX: '$25',\n      },\n    },\n  ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof TriggerStyled>,\n  TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n  const { variant, size } = React.useContext(TabsContext)\n\n  return (\n    <TriggerStyled\n      {...restProps}\n      size={size}\n      preventFocusOnPress='auto'\n      role='tab'\n      asChild\n      ref={forwardRef}\n      variant={variant}\n    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n  /**\n   * Change the Tabs style\n   * @default 'tabs'\n   */\n  variant?: StyledTriggerProps['variant']\n  /**\n   * The value of the tab that should be active when initially rendered.\n   * Use when you do not need to control the state of the tabs.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the tab to activate.\n   * Should be used in conjunction with onChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   * @param id the value associated with the newly selected tab.\n   */\n  onChange?: (id: string) => void\n  /**\n   * The tabs size.\n   */\n  size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n  React.ElementRef<typeof StyledRoot>,\n  TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n  <TabsContextProvider variant={variant} size={size}>\n    <StyledRoot\n      {...props}\n      ref={forwardRef}\n      onValueChange={onChange}\n      activationMode='manual'\n    />\n  </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof RadixTabs.Content\n  IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["React","jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  variant?: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n}>({\n  variant: 'tabs',\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  variant: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ variant, size, children }) => (\n  <TabsContext.Provider\n    value={{\n      variant,\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n  typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  React.ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = React.useContext(TabsContext)\n\n  const formattedChildren = addPropsToChildren(children, isIconComponent, {\n    'data-icon-component': '',\n    size: size === 'medium' ? 'small' : 'medium',\n    weight: size === 'medium' ? 'thin' : 'normal',\n  })\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n  display: 'flex',\n  flexDirection: 'row',\n\n  variants: {\n    variant: {\n      buttons: {},\n      tabs: {\n        borderBottom: '2px solid $border-neutrals',\n      },\n    },\n    size: {\n      medium: { gap: '$50' },\n      large: { gap: '$100' },\n      'x-large': { gap: '$150' },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        gap: '$100',\n      },\n    },\n  ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n  ({ children, ...restProps }, forwardRef) => {\n    const { variant, size } = React.useContext(TabsContext)\n\n    return (\n      <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n        {children}\n      </ListStyled>\n    )\n  }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1.2,\n  fontWeight: '$semibold',\n  border: '1px solid transparent',\n  gap: '$50',\n\n  variants: {\n    v1: {\n      true: {},\n      false: {},\n    },\n    variant: {\n      buttons: {\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n\n        _hover: {\n          backgroundColor: '$background-neutrals-hover',\n          color: '$text-neutrals-subtle-hover',\n        },\n\n        '&[data-state=active]': {\n          color: '$text-primary-selected',\n        },\n\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-active',\n          color: '$text-neutrals-subtle-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n        },\n      },\n      tabs: {\n        marginBottom: '-$25',\n        border: 'none',\n        borderRadius: '0',\n        ...focus.css({\n          boxShadow: '$focus-small',\n          borderRadius: '$25',\n          borderBottom: 'unset !important',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n        borderBottom: '2px solid $border-neutrals',\n\n        _hover: {\n          color: '$text-neutrals-hover',\n          borderBottom: '2px solid $border-neutrals-hover',\n        },\n\n        '&[data-state=active]': {\n          color: '$text-primary-selected',\n          borderBottom: '2px solid $border-primary',\n        },\n\n        '&[data-pressed]': {\n          color: '$text-neutrals-active',\n          borderBottom: '2px solid $border-neutrals-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n          borderBottom: '2px solid $border-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$250',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        height: '$14',\n        paddingX: '$100',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        height: '$12',\n        paddingX: '$50',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        height: '$10',\n        paddingX: '$25',\n      },\n    },\n    {\n      variant: 'buttons',\n      v1: false,\n      css: {\n        '&[data-state=active]': {\n          backgroundColor: '$background-primary-subtle',\n        },\n      },\n    },\n    {\n      variant: 'buttons',\n      v1: true,\n      css: {\n        '&[data-state=active]': {\n          backgroundColor: '$background-primary-subtle-selected',\n        },\n      },\n    },\n  ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof TriggerStyled>,\n  TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n  const { variant, size } = React.useContext(TabsContext)\n  const [v1] = useNewDesignLanguage()\n\n  return (\n    <TriggerStyled\n      {...restProps}\n      size={size}\n      preventFocusOnPress='auto'\n      role='tab'\n      asChild\n      ref={forwardRef}\n      variant={variant}\n      v1={v1}\n    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n  /**\n   * Change the Tabs style\n   * @default 'tabs'\n   */\n  variant?: StyledTriggerProps['variant']\n  /**\n   * The value of the tab that should be active when initially rendered.\n   * Use when you do not need to control the state of the tabs.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the tab to activate.\n   * Should be used in conjunction with onChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   * @param id the value associated with the newly selected tab.\n   */\n  onChange?: (id: string) => void\n  /**\n   * The tabs size.\n   */\n  size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n  React.ElementRef<typeof StyledRoot>,\n  TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n  <TabsContextProvider variant={variant} size={size}>\n    <StyledRoot\n      {...props}\n      ref={forwardRef}\n      onValueChange={onChange}\n      activationMode='manual'\n    />\n  </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof RadixTabs.Content\n  IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["React","jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useNewDesignLanguage"],"mappings":"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"}

package/dist/module.js

@@ -5,6 +5,7 @@ import { styled } from '@mirohq/design-system-stitches';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { addPropsToChildren } from '@mirohq/design-system-utils';
 import { isIconComponent } from '@mirohq/design-system-base-icon';
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
 import { BaseButton, sizes } from '@mirohq/design-system-base-button';
 import { focus } from '@mirohq/design-system-styles';
 
@@ -95,10 +96,14 @@ const TriggerStyled = styled(BaseButton, {
   border: "1px solid transparent",
   gap: "$50",
   variants: {
+    v1: {
+      true: {},
+      false: {}
+    },
     variant: {
       buttons: {
         ...focus.css({
-          boxShadow: "$focus-keyboard"
+          boxShadow: "$focus-small"
         }),
         backgroundColor: "transparent",
         color: "$text-neutrals-subtle",
@@ -107,7 +112,6 @@ const TriggerStyled = styled(BaseButton, {
           color: "$text-neutrals-subtle-hover"
         },
         "&[data-state=active]": {
-          backgroundColor: "$background-primary-subtle",
           color: "$text-primary-selected"
         },
         "&[data-pressed]": {
@@ -124,7 +128,7 @@ const TriggerStyled = styled(BaseButton, {
         border: "none",
         borderRadius: "0",
         ...focus.css({
-          boxShadow: "$focus-keyboard",
+          boxShadow: "$focus-small",
           borderRadius: "$25",
           borderBottom: "unset !important"
         }),
@@ -192,12 +196,31 @@ const TriggerStyled = styled(BaseButton, {
         height: "$10",
         paddingX: "$25"
       }
+    },
+    {
+      variant: "buttons",
+      v1: false,
+      css: {
+        "&[data-state=active]": {
+          backgroundColor: "$background-primary-subtle"
+        }
+      }
+    },
+    {
+      variant: "buttons",
+      v1: true,
+      css: {
+        "&[data-state=active]": {
+          backgroundColor: "$background-primary-subtle-selected"
+        }
+      }
     }
   ]
 });
 
 const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef) => {
   const { variant, size } = React.useContext(TabsContext);
+  const [v1] = useNewDesignLanguage();
   return /* @__PURE__ */ jsx(
     TriggerStyled,
     {
@@ -208,6 +231,7 @@ const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef)
       asChild: true,
       ref: forwardRef,
       variant,
+      v1,
       children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, children })
     }
   );

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  variant?: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n}>({\n  variant: 'tabs',\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  variant: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ variant, size, children }) => (\n  <TabsContext.Provider\n    value={{\n      variant,\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n  typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  React.ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = React.useContext(TabsContext)\n\n  const formattedChildren = addPropsToChildren(children, isIconComponent, {\n    'data-icon-component': '',\n    size: size === 'medium' ? 'small' : 'medium',\n    weight: size === 'medium' ? 'thin' : 'normal',\n  })\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n  display: 'flex',\n  flexDirection: 'row',\n\n  variants: {\n    variant: {\n      buttons: {},\n      tabs: {\n        borderBottom: '2px solid $border-neutrals',\n      },\n    },\n    size: {\n      medium: { gap: '$50' },\n      large: { gap: '$100' },\n      'x-large': { gap: '$150' },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        gap: '$100',\n      },\n    },\n  ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n  ({ children, ...restProps }, forwardRef) => {\n    const { variant, size } = React.useContext(TabsContext)\n\n    return (\n      <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n        {children}\n      </ListStyled>\n    )\n  }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1.2,\n  fontWeight: '$semibold',\n  border: '1px solid transparent',\n  gap: '$50',\n\n  variants: {\n    variant: {\n      buttons: {\n        ...focus.css({\n          boxShadow: '$focus-keyboard',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n\n        _hover: {\n          backgroundColor: '$background-neutrals-hover',\n          color: '$text-neutrals-subtle-hover',\n        },\n\n        '&[data-state=active]': {\n          backgroundColor: '$background-primary-subtle',\n          color: '$text-primary-selected',\n        },\n\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-active',\n          color: '$text-neutrals-subtle-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n        },\n      },\n      tabs: {\n        marginBottom: '-$25',\n        border: 'none',\n        borderRadius: '0',\n        ...focus.css({\n          boxShadow: '$focus-keyboard',\n          borderRadius: '$25',\n          borderBottom: 'unset !important',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n        borderBottom: '2px solid $border-neutrals',\n\n        _hover: {\n          color: '$text-neutrals-hover',\n          borderBottom: '2px solid $border-neutrals-hover',\n        },\n\n        '&[data-state=active]': {\n          color: '$text-primary-selected',\n          borderBottom: '2px solid $border-primary',\n        },\n\n        '&[data-pressed]': {\n          color: '$text-neutrals-active',\n          borderBottom: '2px solid $border-neutrals-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n          borderBottom: '2px solid $border-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$250',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        height: '$14',\n        paddingX: '$100',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        height: '$12',\n        paddingX: '$50',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        height: '$10',\n        paddingX: '$25',\n      },\n    },\n  ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof TriggerStyled>,\n  TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n  const { variant, size } = React.useContext(TabsContext)\n\n  return (\n    <TriggerStyled\n      {...restProps}\n      size={size}\n      preventFocusOnPress='auto'\n      role='tab'\n      asChild\n      ref={forwardRef}\n      variant={variant}\n    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n  /**\n   * Change the Tabs style\n   * @default 'tabs'\n   */\n  variant?: StyledTriggerProps['variant']\n  /**\n   * The value of the tab that should be active when initially rendered.\n   * Use when you do not need to control the state of the tabs.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the tab to activate.\n   * Should be used in conjunction with onChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   * @param id the value associated with the newly selected tab.\n   */\n  onChange?: (id: string) => void\n  /**\n   * The tabs size.\n   */\n  size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n  React.ElementRef<typeof StyledRoot>,\n  TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n  <TabsContextProvider variant={variant} size={size}>\n    <StyledRoot\n      {...props}\n      ref={forwardRef}\n      onValueChange={onChange}\n      activationMode='manual'\n    />\n  </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof RadixTabs.Content\n  IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  variant?: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n}>({\n  variant: 'tabs',\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  variant: StyledTriggerProps['variant']\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ variant, size, children }) => (\n  <TabsContext.Provider\n    value={{\n      variant,\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n  typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  React.ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = React.useContext(TabsContext)\n\n  const formattedChildren = addPropsToChildren(children, isIconComponent, {\n    'data-icon-component': '',\n    size: size === 'medium' ? 'small' : 'medium',\n    weight: size === 'medium' ? 'thin' : 'normal',\n  })\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n  display: 'flex',\n  flexDirection: 'row',\n\n  variants: {\n    variant: {\n      buttons: {},\n      tabs: {\n        borderBottom: '2px solid $border-neutrals',\n      },\n    },\n    size: {\n      medium: { gap: '$50' },\n      large: { gap: '$100' },\n      'x-large': { gap: '$150' },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        gap: '$200',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        gap: '$100',\n      },\n    },\n  ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n  ({ children, ...restProps }, forwardRef) => {\n    const { variant, size } = React.useContext(TabsContext)\n\n    return (\n      <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n        {children}\n      </ListStyled>\n    )\n  }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1.2,\n  fontWeight: '$semibold',\n  border: '1px solid transparent',\n  gap: '$50',\n\n  variants: {\n    v1: {\n      true: {},\n      false: {},\n    },\n    variant: {\n      buttons: {\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n\n        _hover: {\n          backgroundColor: '$background-neutrals-hover',\n          color: '$text-neutrals-subtle-hover',\n        },\n\n        '&[data-state=active]': {\n          color: '$text-primary-selected',\n        },\n\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-active',\n          color: '$text-neutrals-subtle-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n        },\n      },\n      tabs: {\n        marginBottom: '-$25',\n        border: 'none',\n        borderRadius: '0',\n        ...focus.css({\n          boxShadow: '$focus-small',\n          borderRadius: '$25',\n          borderBottom: 'unset !important',\n        }),\n\n        backgroundColor: 'transparent',\n        color: '$text-neutrals-subtle',\n        borderBottom: '2px solid $border-neutrals',\n\n        _hover: {\n          color: '$text-neutrals-hover',\n          borderBottom: '2px solid $border-neutrals-hover',\n        },\n\n        '&[data-state=active]': {\n          color: '$text-primary-selected',\n          borderBottom: '2px solid $border-primary',\n        },\n\n        '&[data-pressed]': {\n          color: '$text-neutrals-active',\n          borderBottom: '2px solid $border-neutrals-active',\n        },\n\n        '&[disabled], &[aria-disabled]': {\n          backgroundColor: 'transparent',\n          color: '$text-neutrals-disabled',\n          borderBottom: '2px solid $border-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$250',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        height: '$14',\n        paddingX: '$100',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        height: '$12',\n        paddingX: '$50',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\n        height: '$10',\n        paddingX: '$25',\n      },\n    },\n    {\n      variant: 'buttons',\n      v1: false,\n      css: {\n        '&[data-state=active]': {\n          backgroundColor: '$background-primary-subtle',\n        },\n      },\n    },\n    {\n      variant: 'buttons',\n      v1: true,\n      css: {\n        '&[data-state=active]': {\n          backgroundColor: '$background-primary-subtle-selected',\n        },\n      },\n    },\n  ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof TriggerStyled>,\n  TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n  const { variant, size } = React.useContext(TabsContext)\n  const [v1] = useNewDesignLanguage()\n\n  return (\n    <TriggerStyled\n      {...restProps}\n      size={size}\n      preventFocusOnPress='auto'\n      role='tab'\n      asChild\n      ref={forwardRef}\n      variant={variant}\n      v1={v1}\n    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n  /**\n   * Change the Tabs style\n   * @default 'tabs'\n   */\n  variant?: StyledTriggerProps['variant']\n  /**\n   * The value of the tab that should be active when initially rendered.\n   * Use when you do not need to control the state of the tabs.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the tab to activate.\n   * Should be used in conjunction with onChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   * @param id the value associated with the newly selected tab.\n   */\n  onChange?: (id: string) => void\n  /**\n   * The tabs size.\n   */\n  size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n  React.ElementRef<typeof StyledRoot>,\n  TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n  <TabsContextProvider variant={variant} size={size}>\n    <StyledRoot\n      {...props}\n      ref={forwardRef}\n      onValueChange={onChange}\n      activationMode='manual'\n    />\n  </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof RadixTabs.Content\n  IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -11,7 +11,7 @@ import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-ho
 import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
 
 declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
-declare type StyledIconSlotProps = react__default.ComponentPropsWithRef<typeof StyledIconSlot>;
+type StyledIconSlotProps = react__default.ComponentPropsWithRef<typeof StyledIconSlot>;
 interface IconSlotProps extends StyledIconSlotProps {
     /**
      * The icon.
@@ -27,58 +27,87 @@ declare const ListStyled: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
     variant?: "buttons" | "tabs" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}>;
-declare type StyledListProps = ComponentPropsWithRef<typeof ListStyled>;
+type StyledListProps = ComponentPropsWithRef<typeof ListStyled>;
 
-declare type ListProps = StyledListProps & {};
+type ListProps = StyledListProps & {};
 declare const List: react__default.ForwardRefExoticComponent<Omit<ListProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
 declare const StyledRoot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-declare type StyledRootProps = StrictComponentProps<typeof StyledRoot>;
+type StyledRootProps = StrictComponentProps<typeof StyledRoot>;
 
-declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
-    children?: react.ReactNode;
-}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react.ReactNode | undefined;
+}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | "false" | undefined;
     variant?: "buttons" | "tabs" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
-}, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
-    children?: react.ReactNode;
-}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+}, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react.ReactNode | undefined;
+}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | "false" | undefined;
     variant?: "buttons" | "tabs" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
+    v1?: boolean | "true" | "false" | undefined;
     variant?: "buttons" | "tabs" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}>;
-declare type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
+type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
 
-declare type TriggerProps = StyledTriggerProps & {
+type TriggerProps = StyledTriggerProps & {
     /**
      * A unique value that associates the trigger with a content.
      */
     value: string;
 };
-declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
-    children?: react__default.ReactNode;
-}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react__default.ReactNode | undefined;
+}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | "false" | undefined;
     variant?: "buttons" | "tabs" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+} & {
     /**
      * A unique value that associates the trigger with a content.
      */
     value: string;
-}, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
+}, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
     href: string;
-}, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
-    children?: react__default.ReactNode;
-}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+}, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react__default.ReactNode | undefined;
+}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | "false" | undefined;
     variant?: "buttons" | "tabs" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+} & {
     /**
      * A unique value that associates the trigger with a content.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-tabs",
-  "version": "0.5.0-new-focus-keyboard.0",
+  "version": "0.5.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,11 +27,12 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "^1.0.0",
-    "@mirohq/design-system-base-button": "^0.4.69-new-focus-keyboard.0",
+    "@mirohq/design-system-base-button": "^0.5.0",
+    "@mirohq/design-system-experiments": "^0.2.0",
     "@mirohq/design-system-base-icon": "^0.1.33",
+    "@mirohq/design-system-stitches": "^2.6.30",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.31-new-focus-keyboard.0",
-    "@mirohq/design-system-styles": "^1.2.31-new-focus-keyboard.0",
+    "@mirohq/design-system-styles": "^1.2.30",
     "@mirohq/design-system-utils": "^0.15.5"
   },
   "scripts": {