@mirohq/design-system-tabs 0.3.1 → 0.4.0

package/dist/main.js

@@ -63,22 +63,49 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
 
 const ListStyled = designSystemStitches.styled(RadixTabs__namespace.List, {
   display: "flex",
-  gap: "$100",
   flexDirection: "row",
   variants: {
     variant: {
       buttons: {},
       tabs: {
-        gap: "$0"
+        borderBottom: "2px solid $border-neutrals"
       }
+    },
+    size: {
+      medium: { gap: "$50" },
+      large: { gap: "$100" },
+      "x-large": { gap: "$150" }
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variant: "tabs",
+      size: "x-large",
+      css: {
+        gap: "$200"
+      }
+    },
+    {
+      variant: "tabs",
+      size: "large",
+      css: {
+        gap: "$200"
+      }
+    },
+    {
+      variant: "tabs",
+      size: "medium",
+      css: {
+        gap: "$100"
+      }
+    }
+  ]
 });
 
 const List = React__default["default"].forwardRef(
   ({ children, ...restProps }, forwardRef) => {
-    const { variant } = React__default["default"].useContext(TabsContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(ListStyled, { ...restProps, variant, ref: forwardRef, children });
+    const { variant, size } = React__default["default"].useContext(TabsContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(ListStyled, { ...restProps, variant, size, ref: forwardRef, children });
   }
 );
 
@@ -90,7 +117,8 @@ const StyledRoot = designSystemStitches.styled(RadixTabs__namespace.Root, {
 
 const LABEL_OFFSET = 2;
 const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
-  lineHeight: 1,
+  lineHeight: 1.2,
+  fontWeight: "$semibold",
   border: "1px solid transparent",
   gap: "$50",
   variants: {
@@ -119,6 +147,7 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
         }
       },
       tabs: {
+        marginBottom: "-$25",
         border: "none",
         borderRadius: "0",
         ...designSystemStyles.focus.css({
@@ -152,22 +181,16 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
       "x-large": {
         height: designSystemBaseButton.sizes.xLarge,
         fontSize: "$250",
-        fontWeight: "500",
-        lineHeight: 1.4,
         paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)")
       },
       large: {
         height: designSystemBaseButton.sizes.large,
         fontSize: "$200",
-        fontWeight: "600",
-        lineHeight: 1.5,
         paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)")
       },
       medium: {
         height: designSystemBaseButton.sizes.medium,
         fontSize: "$175",
-        fontWeight: "650",
-        lineHeight: 1.5,
         paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)")
       }
     }
@@ -177,13 +200,15 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
       variant: "tabs",
       size: "x-large",
       css: {
-        paddingX: "$75"
+        height: "$14",
+        paddingX: "$100"
       }
     },
     {
       variant: "tabs",
       size: "large",
       css: {
+        height: "$12",
         paddingX: "$50"
       }
     },
@@ -191,7 +216,8 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
       variant: "tabs",
       size: "medium",
       css: {
-        paddingX: "25$"
+        height: "$10",
+        paddingX: "$25"
       }
     }
   ]

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  gap: '$100',\n  flexDirection: 'row',\n\n  variants: {\n    variant: {\n      buttons: {},\n      tabs: {\n        gap: '$0',\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 } = React.useContext(TabsContext)\n\n    return (\n      <ListStyled {...restProps} variant={variant} 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,\n  border: '1px solid transparent',\n  gap: '$50',\n\n  variants: {\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          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        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        fontWeight: '500',\n        lineHeight: 1.4,\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        fontWeight: '600',\n        lineHeight: 1.5,\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        fontWeight: '650',\n        lineHeight: 1.5,\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        paddingX: '$75',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        paddingX: '$50',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\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 'panel'\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    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          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-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})\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 'panel'\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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"}

package/dist/module.js

@@ -36,22 +36,49 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
 
 const ListStyled = styled(RadixTabs.List, {
   display: "flex",
-  gap: "$100",
   flexDirection: "row",
   variants: {
     variant: {
       buttons: {},
       tabs: {
-        gap: "$0"
+        borderBottom: "2px solid $border-neutrals"
       }
+    },
+    size: {
+      medium: { gap: "$50" },
+      large: { gap: "$100" },
+      "x-large": { gap: "$150" }
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variant: "tabs",
+      size: "x-large",
+      css: {
+        gap: "$200"
+      }
+    },
+    {
+      variant: "tabs",
+      size: "large",
+      css: {
+        gap: "$200"
+      }
+    },
+    {
+      variant: "tabs",
+      size: "medium",
+      css: {
+        gap: "$100"
+      }
+    }
+  ]
 });
 
 const List = React.forwardRef(
   ({ children, ...restProps }, forwardRef) => {
-    const { variant } = React.useContext(TabsContext);
-    return /* @__PURE__ */ jsx(ListStyled, { ...restProps, variant, ref: forwardRef, children });
+    const { variant, size } = React.useContext(TabsContext);
+    return /* @__PURE__ */ jsx(ListStyled, { ...restProps, variant, size, ref: forwardRef, children });
   }
 );
 
@@ -63,7 +90,8 @@ const StyledRoot = styled(RadixTabs.Root, {
 
 const LABEL_OFFSET = 2;
 const TriggerStyled = styled(BaseButton, {
-  lineHeight: 1,
+  lineHeight: 1.2,
+  fontWeight: "$semibold",
   border: "1px solid transparent",
   gap: "$50",
   variants: {
@@ -92,6 +120,7 @@ const TriggerStyled = styled(BaseButton, {
         }
       },
       tabs: {
+        marginBottom: "-$25",
         border: "none",
         borderRadius: "0",
         ...focus.css({
@@ -125,22 +154,16 @@ const TriggerStyled = styled(BaseButton, {
       "x-large": {
         height: sizes.xLarge,
         fontSize: "$250",
-        fontWeight: "500",
-        lineHeight: 1.4,
         paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)")
       },
       large: {
         height: sizes.large,
         fontSize: "$200",
-        fontWeight: "600",
-        lineHeight: 1.5,
         paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)")
       },
       medium: {
         height: sizes.medium,
         fontSize: "$175",
-        fontWeight: "650",
-        lineHeight: 1.5,
         paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)")
       }
     }
@@ -150,13 +173,15 @@ const TriggerStyled = styled(BaseButton, {
       variant: "tabs",
       size: "x-large",
       css: {
-        paddingX: "$75"
+        height: "$14",
+        paddingX: "$100"
       }
     },
     {
       variant: "tabs",
       size: "large",
       css: {
+        height: "$12",
         paddingX: "$50"
       }
     },
@@ -164,7 +189,8 @@ const TriggerStyled = styled(BaseButton, {
       variant: "tabs",
       size: "medium",
       css: {
-        paddingX: "25$"
+        height: "$10",
+        paddingX: "$25"
       }
     }
   ]

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  gap: '$100',\n  flexDirection: 'row',\n\n  variants: {\n    variant: {\n      buttons: {},\n      tabs: {\n        gap: '$0',\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 } = React.useContext(TabsContext)\n\n    return (\n      <ListStyled {...restProps} variant={variant} 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,\n  border: '1px solid transparent',\n  gap: '$50',\n\n  variants: {\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          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        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        fontWeight: '500',\n        lineHeight: 1.4,\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        fontWeight: '600',\n        lineHeight: 1.5,\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        fontWeight: '650',\n        lineHeight: 1.5,\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'tabs',\n      size: 'x-large',\n      css: {\n        paddingX: '$75',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'large',\n      css: {\n        paddingX: '$50',\n      },\n    },\n    {\n      variant: 'tabs',\n      size: 'medium',\n      css: {\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 'panel'\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    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          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-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})\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 'panel'\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

@@ -20,10 +20,12 @@ interface IconSlotProps extends StyledIconSlotProps {
 }
 declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const ListStyled: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const ListStyled: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>>, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
     variant?: "buttons" | "tabs" | undefined;
+    size?: "medium" | "large" | "x-large" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>, {
     variant?: "buttons" | "tabs" | undefined;
+    size?: "medium" | "large" | "x-large" | undefined;
 }, {}>;
 declare type StyledListProps = ComponentPropsWithRef<typeof ListStyled>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-tabs",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "^1.0.0",
-    "@mirohq/design-system-base-button": "^0.4.59",
-    "@mirohq/design-system-base-icon": "^0.1.33",
+    "@mirohq/design-system-base-button": "^0.4.60",
+    "@mirohq/design-system-stitches": "^2.6.23",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.22",
-    "@mirohq/design-system-utils": "^0.15.4",
-    "@mirohq/design-system-styles": "^1.2.22"
+    "@mirohq/design-system-styles": "^1.2.23",
+    "@mirohq/design-system-base-icon": "^0.1.33",
+    "@mirohq/design-system-utils": "^0.15.4"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",