npm - @mirohq/design-system-tabs - Versions diffs - 0.2.8 → 0.2.10-style-dictionary.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/main.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;AAIa,MAAA,IAAA,GAAO,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EACzC,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EACL,aAAe,EAAA,QAAA;AACjB,CAAC,CAAA;;ACJY,MAAA,IAAA,GAAO,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EACzC,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EACL,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;ACJY,MAAA,WAAA,GAAc,MAAM,aAE9B,CAAA;AAAA,EACD,IAAM,EAAA,QAAA;AACR,CAAC,CAAA,CAAA;AAEM,MAAM,mBAGR,GAAA,CAAC,EAAE,IAAA,EAAM,UACZ,qBAAA,GAAA;AAAA,EAAC,WAAY,CAAA,QAAA;AAAA,EAAZ;AAAA,IACC,KAAO,EAAA;AAAA,MACL,IAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA;;ACfF,MAAM,YAAe,GAAA,CAAA,CAAA;AAER,MAAA,aAAA,GAAgB,OAAO,UAAY,EAAA;AAAA,EAC9C,UAAY,EAAA,CAAA;AAAA,EACZ,MAAQ,EAAA,uBAAA;AAAA,EACR,GAAK,EAAA,KAAA;AAAA,EAEL,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,cAAA;AAAA,GACZ,CAAA;AAAA,EAED,eAAiB,EAAA,aAAA;AAAA,EACjB,KAAO,EAAA,uBAAA;AAAA,EAEP,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,4BAAA;AAAA,IACjB,KAAO,EAAA,6BAAA;AAAA,GACT;AAAA,EAEA,sBAAwB,EAAA;AAAA,IACtB,eAAiB,EAAA,qCAAA;AAAA,IACjB,KAAO,EAAA,wBAAA;AAAA,GACT;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,QACT,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA,EAAU,eAAe,MAAY,CAAA,YAAA,EAAA,KAAA,CAAA;AAAA,OACvC;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQ,KAAM,CAAA,KAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA,EAAU,eAAe,MAAY,CAAA,YAAA,EAAA,KAAA,CAAA;AAAA,OACvC;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA,EAAU,eAAe,MAAY,CAAA,YAAA,EAAA,KAAA,CAAA;AAAA,OACvC;AAAA,KACF;AAAA,GACF;AAAA,EAEA,+BAAiC,EAAA;AAAA,IAC/B,eAAiB,EAAA,aAAA;AAAA,IACjB,KAAO,EAAA,yBAAA;AAAA,GACT;AACF,CAAC,CAAA;;ACpDM,MAAM,UAA8D,CAAC;AAAA,EAC1E,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,IAAA;AAAA,MACA,mBAAoB,EAAA,MAAA;AAAA,MACpB,IAAK,EAAA,KAAA;AAAA,MACL,OAAO,EAAA,IAAA;AAAA,MAEP,QAAC,kBAAA,GAAA,CAAA,SAAA,CAAU,OAAV,EAAA,EAAkB,OAAe,QAAS,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7C,CAAA;AAEJ,CAAA;;ACjBO,MAAM,cAAiB,GAAA,MAAA,CAAO,SAAU,CAAA,GAAA,EAAK,EAAE,CAAA,CAAA;AAazC,MAAA,QAAA,GAAW,MAAM,UAG5B,CAAA,CAAC,EAAE,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAE7C,EAAM,MAAA,iBAAA,GAAoB,kBAAmB,CAAA,QAAA,EAAU,eAAiB,EAAA;AAAA,IACtE,qBAAuB,EAAA,EAAA;AAAA,IACvB,IAAA,EAAM,IAAS,KAAA,QAAA,GAAW,OAAU,GAAA,QAAA;AAAA,IACpC,MAAA,EAAQ,IAAS,KAAA,QAAA,GAAW,MAAS,GAAA,QAAA;AAAA,GACtC,CAAA,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,cAAgB,EAAA,EAAA,GAAG,SAAW,EAAA,GAAA,EAAK,YAAY,aAAW,EAAA,IAAA,EAAC,OAAO,EAAA,IAAA,EAChE,QACH,EAAA,iBAAA,EAAA,CAAA,CAAA;AAEJ,CAAC,CAAA;;ACLM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,IAAA,GAAO,OAAS,EAAA,QAAA,EAAU,GAAG,KAAA,EAAS,EAAA,UAAA,qBACtC,GAAA,CAAA,mBAAA,EAAA,EAAoB,IACnB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,aAAe,EAAA,QAAA;AAAA,MACf,cAAe,EAAA,QAAA;AAAA,KAAA;AAAA,GAEnB,EAAA,CAAA;AAEJ,EAAA;AASA,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AACZ,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AACf,IAAA,CAAK,UAAU,SAAU,CAAA,OAAA,CAAA;AACzB,IAAA,CAAK,QAAW,GAAA,QAAA;;;;"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-tabs",
-  "version": "0.2.8",
+  "version": "0.2.10-style-dictionary.0",
   "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",
-    "@mirohq/design-system-base-icon": "^0.1.32",
+    "@mirohq/design-system-base-button": "^0.4.50-style-dictionary.0",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.11",
-    "@mirohq/design-system-styles": "^1.2.11",
-    "@mirohq/design-system-use-press": "^0.4.0",
-    "@mirohq/design-system-utils": "^0.15.4"
+    "@mirohq/design-system-utils": "^0.15.4",
+    "@mirohq/design-system-stitches": "^2.6.13-style-dictionary.0",
+    "@mirohq/design-system-base-icon": "^0.1.33-style-dictionary.0",
+    "@mirohq/design-system-styles": "^1.2.13-style-dictionary.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",