@mirohq/design-system-tabs 0.2.8-style-dictionary.0 → 0.2.9

package/dist/main.js

@@ -35,7 +35,7 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 
-const Root = designSystemStitches.styled(RadixTabs__namespace.Root, {
+const StyledRoot = designSystemStitches.styled(RadixTabs__namespace.Root, {
   display: "flex",
   gap: "$100",
   flexDirection: "column"
@@ -109,11 +109,7 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
   }
 });
 
-const Trigger = ({
-  children,
-  value,
-  ...restProps
-}) => {
+const Trigger = React__default["default"].forwardRef(({ children, value, ...restProps }, forwardRef) => {
   const { size } = React__default["default"].useContext(TabsContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TriggerStyled,
@@ -123,10 +119,11 @@ const Trigger = ({
       preventFocusOnPress: "auto",
       role: "tab",
       asChild: true,
+      ref: forwardRef,
       children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, children })
     }
   );
-};
+});
 
 const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
 const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
@@ -139,17 +136,15 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
   return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
 });
 
-const Tabs = React__default["default"].forwardRef(
-  ({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Root,
-    {
-      ...props,
-      ref: forwardRef,
-      onValueChange: onChange,
-      activationMode: "manual"
-    }
-  ) })
-);
+const Tabs = React__default["default"].forwardRef(({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
+  StyledRoot,
+  {
+    ...props,
+    ref: forwardRef,
+    onValueChange: onChange,
+    activationMode: "manual"
+  }
+) }));
 Tabs.List = List;
 Tabs.Trigger = Trigger;
 Tabs.Content = RadixTabs__namespace.Content;

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/provider.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/icon-slot.tsx","../src/tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Root = styled(RadixTabs.Root, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'column',\n})\n\nexport type RootProps = StrictComponentProps<typeof Root>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(RadixTabs.List, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'row',\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  size: StyledTriggerProps['size']\n}>({\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ size, children }) => (\n  <TabsContext.Provider\n    value={{\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1,\n  border: '1px solid transparent',\n  gap: '$50',\n\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-selected',\n    color: '$text-primary-selected',\n  },\n\n  variants: {\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\n  '&[disabled], &[aria-disabled]': {\n    backgroundColor: 'transparent',\n    color: '$text-neutrals-disabled',\n  },\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { HoverEvents } from '@react-types/shared'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\n\nexport const Trigger: React.FC<RadixTabs.TabsTriggerProps & HoverEvents> = ({\n  children,\n  value,\n  ...restProps\n}) => {\n  const { size } = React.useContext(TabsContext)\n\n  return (\n    <TriggerStyled\n      {...restProps}\n      size={size}\n      preventFocusOnPress='auto'\n      role='tab'\n      asChild\n    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\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 React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { Root } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger'\nimport { IconSlot } from './partials/icon-slot'\nimport { TabsContextProvider } from './partials/provider'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<RadixTabs.TabsProps, 'onValueChange' | 'onChange'> {\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<React.ElementRef<typeof Root>, TabsProps>(\n  ({ size = 'large', onChange, ...props }, forwardRef) => (\n    <TabsContextProvider size={size}>\n      <Root\n        {...props}\n        ref={forwardRef}\n        onValueChange={onChange}\n        activationMode='manual'\n      />\n    </TabsContextProvider>\n  )\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":["styled","RadixTabs","React","jsx","BaseButton","focus","sizes","Primitive","addPropsToChildren","isIconComponent"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/provider.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/icon-slot.tsx","../src/tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\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 * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(RadixTabs.List, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'row',\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  size: StyledTriggerProps['size']\n}>({\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ size, children }) => (\n  <TabsContext.Provider\n    value={{\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1,\n  border: '1px solid transparent',\n  gap: '$50',\n\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-selected',\n    color: '$text-primary-selected',\n  },\n\n  variants: {\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\n  '&[disabled], &[aria-disabled]': {\n    backgroundColor: 'transparent',\n    color: '$text-neutrals-disabled',\n  },\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\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 { 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    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\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 React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger'\nimport { IconSlot } from './partials/icon-slot'\nimport { TabsContextProvider } from './partials/provider'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\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>(({ size = 'large', onChange, ...props }, forwardRef) => (\n  <TabsContextProvider 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":["styled","RadixTabs","React","jsx","BaseButton","focus","sizes","Primitive","addPropsToChildren","isIconComponent"],"mappings":"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"}

package/dist/module.js

@@ -8,7 +8,7 @@ import { Primitive } from '@mirohq/design-system-primitive';
 import { addPropsToChildren } from '@mirohq/design-system-utils';
 import { isIconComponent } from '@mirohq/design-system-base-icon';
 
-const Root = styled(RadixTabs.Root, {
+const StyledRoot = styled(RadixTabs.Root, {
   display: "flex",
   gap: "$100",
   flexDirection: "column"
@@ -82,11 +82,7 @@ const TriggerStyled = styled(BaseButton, {
   }
 });
 
-const Trigger = ({
-  children,
-  value,
-  ...restProps
-}) => {
+const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef) => {
   const { size } = React.useContext(TabsContext);
   return /* @__PURE__ */ jsx(
     TriggerStyled,
@@ -96,10 +92,11 @@ const Trigger = ({
       preventFocusOnPress: "auto",
       role: "tab",
       asChild: true,
+      ref: forwardRef,
       children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, children })
     }
   );
-};
+});
 
 const StyledIconSlot = styled(Primitive.div, {});
 const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
@@ -112,17 +109,15 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
   return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
 });
 
-const Tabs = React.forwardRef(
-  ({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsx(
-    Root,
-    {
-      ...props,
-      ref: forwardRef,
-      onValueChange: onChange,
-      activationMode: "manual"
-    }
-  ) })
-);
+const Tabs = React.forwardRef(({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsx(
+  StyledRoot,
+  {
+    ...props,
+    ref: forwardRef,
+    onValueChange: onChange,
+    activationMode: "manual"
+  }
+) }));
 Tabs.List = List;
 Tabs.Trigger = Trigger;
 Tabs.Content = RadixTabs.Content;

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/provider.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/icon-slot.tsx","../src/tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Root = styled(RadixTabs.Root, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'column',\n})\n\nexport type RootProps = StrictComponentProps<typeof Root>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(RadixTabs.List, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'row',\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  size: StyledTriggerProps['size']\n}>({\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ size, children }) => (\n  <TabsContext.Provider\n    value={{\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1,\n  border: '1px solid transparent',\n  gap: '$50',\n\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-selected',\n    color: '$text-primary-selected',\n  },\n\n  variants: {\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\n  '&[disabled], &[aria-disabled]': {\n    backgroundColor: 'transparent',\n    color: '$text-neutrals-disabled',\n  },\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { HoverEvents } from '@react-types/shared'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\n\nexport const Trigger: React.FC<RadixTabs.TabsTriggerProps & HoverEvents> = ({\n  children,\n  value,\n  ...restProps\n}) => {\n  const { size } = React.useContext(TabsContext)\n\n  return (\n    <TriggerStyled\n      {...restProps}\n      size={size}\n      preventFocusOnPress='auto'\n      role='tab'\n      asChild\n    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\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 React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { Root } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger'\nimport { IconSlot } from './partials/icon-slot'\nimport { TabsContextProvider } from './partials/provider'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<RadixTabs.TabsProps, 'onValueChange' | 'onChange'> {\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<React.ElementRef<typeof Root>, TabsProps>(\n  ({ size = 'large', onChange, ...props }, forwardRef) => (\n    <TabsContextProvider size={size}>\n      <Root\n        {...props}\n        ref={forwardRef}\n        onValueChange={onChange}\n        activationMode='manual'\n      />\n    </TabsContextProvider>\n  )\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/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/provider.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/icon-slot.tsx","../src/tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\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 * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(RadixTabs.List, {\n  display: 'flex',\n  gap: '$100',\n  flexDirection: 'row',\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n  size: StyledTriggerProps['size']\n}>({\n  size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n  size: StyledTriggerProps['size']\n  children: React.ReactNode\n}> = ({ size, children }) => (\n  <TabsContext.Provider\n    value={{\n      size,\n    }}\n  >\n    {children}\n  </TabsContext.Provider>\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n  lineHeight: 1,\n  border: '1px solid transparent',\n  gap: '$50',\n\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-selected',\n    color: '$text-primary-selected',\n  },\n\n  variants: {\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\n  '&[disabled], &[aria-disabled]': {\n    backgroundColor: 'transparent',\n    color: '$text-neutrals-disabled',\n  },\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\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 { 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    >\n      <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n    </TriggerStyled>\n  )\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 React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger'\nimport { IconSlot } from './partials/icon-slot'\nimport { TabsContextProvider } from './partials/provider'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n  extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\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>(({ size = 'large', onChange, ...props }, forwardRef) => (\n  <TabsContextProvider 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

@@ -1,27 +1,20 @@
+import * as RadixTabs from '@radix-ui/react-tabs';
+export { TabsContentProps } from '@radix-ui/react-tabs';
 import * as react from 'react';
 import react__default, { ComponentPropsWithRef } from 'react';
-import * as RadixTabs from '@radix-ui/react-tabs';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
-import { HoverEvents } from '@react-types/shared';
-import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
 import * as packages_components_internal_base_button_src_base_button from 'packages/components/internal/base-button/src/base-button';
 import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-hooks/use-press';
 import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 
-declare const List: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & 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.TabsListProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-
-declare const Trigger: react__default.FC<RadixTabs.TabsTriggerProps & HoverEvents>;
+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>;
 
-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>;
-interface IconSlotProps extends StyledIconSlotProps {
-    /**
-     * The icon.
-     */
-    children: react__default.ReactNode;
-}
-declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const List: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & 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.TabsListProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type ListProps = StrictComponentProps<typeof List>;
 
 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;
@@ -40,7 +33,45 @@ declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omi
 }, {}>;
 declare type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
 
-interface TabsProps extends Omit<RadixTabs.TabsProps, 'onValueChange' | 'onChange'> {
+declare 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"> & _stitches_react_types_styled_component.TransformProps<{
+    size?: "medium" | "large" | "x-large" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    /**
+     * 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"> & {
+    href: string;
+}, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react__default.ReactNode;
+}, "size"> & _stitches_react_types_styled_component.TransformProps<{
+    size?: "medium" | "large" | "x-large" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    value: string;
+}, "ref">) & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+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>;
+interface IconSlotProps extends StyledIconSlotProps {
+    /**
+     * The icon.
+     */
+    children: react__default.ReactNode;
+}
+declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+interface TabsProps extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {
     /**
      * The value of the tab that should be active when initially rendered.
      * Use when you do not need to control the state of the tabs.
@@ -69,4 +100,4 @@ interface Partials {
     IconSlot: typeof IconSlot;
 }
 
-export { Tabs, TabsProps };
+export { Tabs, IconSlotProps as TabsIconSlotProps, ListProps as TabsListProps, TabsProps, TriggerProps as TabsTriggerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-tabs",
-  "version": "0.2.8-style-dictionary.0",
+  "version": "0.2.9",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,16 +27,12 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "^1.0.0",
-    "@react-aria/interactions": "^3.13.0",
-    "@react-aria/utils": "^3.13.0",
-    "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-base-button": "^0.4.48-style-dictionary.0",
-    "@mirohq/design-system-base-icon": "^0.1.33-style-dictionary.0",
-    "@mirohq/design-system-stitches": "^2.6.12-style-dictionary.0",
+    "@mirohq/design-system-base-button": "^0.4.49",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-use-press": "^0.3.5",
-    "@mirohq/design-system-styles": "^1.2.12-style-dictionary.0",
-    "@mirohq/design-system-utils": "^0.15.4"
+    "@mirohq/design-system-base-icon": "^0.1.33",
+    "@mirohq/design-system-utils": "^0.15.4",
+    "@mirohq/design-system-stitches": "^2.6.12",
+    "@mirohq/design-system-styles": "^1.2.12"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",