@mirohq/design-system-tabs 1.2.21 → 1.2.22-canvas-26.2
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.
- package/dist/main.js +22 -22
- package/dist/main.js.map +1 -1
- package/dist/module.js +22 -22
- package/dist/module.js.map +1 -1
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -69,7 +69,7 @@ const ListStyled = designSystemStitches.styled(RadixTabs__namespace.List, {
|
|
|
69
69
|
variant: {
|
|
70
70
|
buttons: {},
|
|
71
71
|
tabs: {
|
|
72
|
-
borderBottom: "2px solid $border-
|
|
72
|
+
borderBottom: "2px solid $border-interactive-secondary"
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
75
|
size: {
|
|
@@ -129,22 +129,22 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
|
|
|
129
129
|
boxShadow: "$focus"
|
|
130
130
|
}),
|
|
131
131
|
backgroundColor: "transparent",
|
|
132
|
-
color: "$text-
|
|
133
|
-
|
|
134
|
-
backgroundColor: "$background-
|
|
135
|
-
color: "$text-
|
|
132
|
+
color: "$text-interactive-secondary",
|
|
133
|
+
"&[data-hovered]": {
|
|
134
|
+
backgroundColor: "$background-interactive-surface-hover",
|
|
135
|
+
color: "$text-interactive-secondary-hover"
|
|
136
136
|
},
|
|
137
137
|
"&[data-state=active]": {
|
|
138
|
-
backgroundColor: "$background-
|
|
139
|
-
color: "$text-
|
|
138
|
+
backgroundColor: "$background-interactive-secondary-selected",
|
|
139
|
+
color: "$text-on-interactive-selected"
|
|
140
140
|
},
|
|
141
141
|
"&[data-pressed]": {
|
|
142
|
-
backgroundColor: "$background-
|
|
143
|
-
color: "$text-
|
|
142
|
+
backgroundColor: "$background-interactive-surface-pressed",
|
|
143
|
+
color: "$text-interactive-secondary-pressed"
|
|
144
144
|
},
|
|
145
145
|
"&[disabled], &[aria-disabled]": {
|
|
146
146
|
backgroundColor: "transparent",
|
|
147
|
-
color: "$text-
|
|
147
|
+
color: "$text-disabled"
|
|
148
148
|
}
|
|
149
149
|
},
|
|
150
150
|
tabs: {
|
|
@@ -153,28 +153,28 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
|
|
|
153
153
|
borderRadius: "0",
|
|
154
154
|
...designSystemStyles.focus.css({
|
|
155
155
|
boxShadow: "$focus",
|
|
156
|
-
borderRadius: "$
|
|
156
|
+
borderRadius: "$button",
|
|
157
157
|
borderBottom: "unset !important"
|
|
158
158
|
}),
|
|
159
159
|
backgroundColor: "transparent",
|
|
160
|
-
color: "$text-
|
|
161
|
-
borderBottom: "2px solid $border-
|
|
162
|
-
|
|
163
|
-
color: "$text-
|
|
164
|
-
borderBottom: "2px solid $border-
|
|
160
|
+
color: "$text-interactive-secondary",
|
|
161
|
+
borderBottom: "2px solid $border-interactive-secondary",
|
|
162
|
+
"&[data-hovered]": {
|
|
163
|
+
color: "$text-interactive-secondary-hover",
|
|
164
|
+
borderBottom: "2px solid $border-interactive-secondary-hover"
|
|
165
165
|
},
|
|
166
166
|
"&[data-state=active]": {
|
|
167
|
-
color: "$text-
|
|
168
|
-
borderBottom: "2px solid $border-
|
|
167
|
+
color: "$text-interactive-selected",
|
|
168
|
+
borderBottom: "2px solid $border-interactive-selected"
|
|
169
169
|
},
|
|
170
170
|
"&[data-pressed]": {
|
|
171
|
-
color: "$text-
|
|
172
|
-
borderBottom: "2px solid $border-
|
|
171
|
+
color: "$text-interactive-secondary-pressed",
|
|
172
|
+
borderBottom: "2px solid $border-interactive-secondary-pressed"
|
|
173
173
|
},
|
|
174
174
|
"&[disabled], &[aria-disabled]": {
|
|
175
175
|
backgroundColor: "transparent",
|
|
176
|
-
color: "$text-
|
|
177
|
-
borderBottom: "2px solid $border-
|
|
176
|
+
color: "$text-on-disabled",
|
|
177
|
+
borderBottom: "2px solid $border-disabled"
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
},
|
package/dist/main.js.map
CHANGED
|
@@ -1 +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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\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',\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 '&[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',\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, MouseEvent } 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, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\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\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\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":["jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useControllableState"],"mappings":"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"}
|
|
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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\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-interactive-secondary',\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',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n\n '&[data-hovered]': {\n backgroundColor: '$background-interactive-surface-hover',\n color: '$text-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$text-on-interactive-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\n color: '$text-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus',\n borderRadius: '$button',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n borderBottom: '2px solid $border-interactive-secondary',\n\n '&[data-hovered]': {\n color: '$text-interactive-secondary-hover',\n borderBottom: '2px solid $border-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-interactive-selected',\n borderBottom: '2px solid $border-interactive-selected',\n },\n\n '&[data-pressed]': {\n color: '$text-interactive-secondary-pressed',\n borderBottom: '2px solid $border-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-on-disabled',\n borderBottom: '2px solid $border-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, MouseEvent } 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, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\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\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\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":["jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useControllableState"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -48,7 +48,7 @@ const ListStyled = styled(RadixTabs.List, {
|
|
|
48
48
|
variant: {
|
|
49
49
|
buttons: {},
|
|
50
50
|
tabs: {
|
|
51
|
-
borderBottom: "2px solid $border-
|
|
51
|
+
borderBottom: "2px solid $border-interactive-secondary"
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
54
|
size: {
|
|
@@ -108,22 +108,22 @@ const TriggerStyled = styled(BaseButton, {
|
|
|
108
108
|
boxShadow: "$focus"
|
|
109
109
|
}),
|
|
110
110
|
backgroundColor: "transparent",
|
|
111
|
-
color: "$text-
|
|
112
|
-
|
|
113
|
-
backgroundColor: "$background-
|
|
114
|
-
color: "$text-
|
|
111
|
+
color: "$text-interactive-secondary",
|
|
112
|
+
"&[data-hovered]": {
|
|
113
|
+
backgroundColor: "$background-interactive-surface-hover",
|
|
114
|
+
color: "$text-interactive-secondary-hover"
|
|
115
115
|
},
|
|
116
116
|
"&[data-state=active]": {
|
|
117
|
-
backgroundColor: "$background-
|
|
118
|
-
color: "$text-
|
|
117
|
+
backgroundColor: "$background-interactive-secondary-selected",
|
|
118
|
+
color: "$text-on-interactive-selected"
|
|
119
119
|
},
|
|
120
120
|
"&[data-pressed]": {
|
|
121
|
-
backgroundColor: "$background-
|
|
122
|
-
color: "$text-
|
|
121
|
+
backgroundColor: "$background-interactive-surface-pressed",
|
|
122
|
+
color: "$text-interactive-secondary-pressed"
|
|
123
123
|
},
|
|
124
124
|
"&[disabled], &[aria-disabled]": {
|
|
125
125
|
backgroundColor: "transparent",
|
|
126
|
-
color: "$text-
|
|
126
|
+
color: "$text-disabled"
|
|
127
127
|
}
|
|
128
128
|
},
|
|
129
129
|
tabs: {
|
|
@@ -132,28 +132,28 @@ const TriggerStyled = styled(BaseButton, {
|
|
|
132
132
|
borderRadius: "0",
|
|
133
133
|
...focus.css({
|
|
134
134
|
boxShadow: "$focus",
|
|
135
|
-
borderRadius: "$
|
|
135
|
+
borderRadius: "$button",
|
|
136
136
|
borderBottom: "unset !important"
|
|
137
137
|
}),
|
|
138
138
|
backgroundColor: "transparent",
|
|
139
|
-
color: "$text-
|
|
140
|
-
borderBottom: "2px solid $border-
|
|
141
|
-
|
|
142
|
-
color: "$text-
|
|
143
|
-
borderBottom: "2px solid $border-
|
|
139
|
+
color: "$text-interactive-secondary",
|
|
140
|
+
borderBottom: "2px solid $border-interactive-secondary",
|
|
141
|
+
"&[data-hovered]": {
|
|
142
|
+
color: "$text-interactive-secondary-hover",
|
|
143
|
+
borderBottom: "2px solid $border-interactive-secondary-hover"
|
|
144
144
|
},
|
|
145
145
|
"&[data-state=active]": {
|
|
146
|
-
color: "$text-
|
|
147
|
-
borderBottom: "2px solid $border-
|
|
146
|
+
color: "$text-interactive-selected",
|
|
147
|
+
borderBottom: "2px solid $border-interactive-selected"
|
|
148
148
|
},
|
|
149
149
|
"&[data-pressed]": {
|
|
150
|
-
color: "$text-
|
|
151
|
-
borderBottom: "2px solid $border-
|
|
150
|
+
color: "$text-interactive-secondary-pressed",
|
|
151
|
+
borderBottom: "2px solid $border-interactive-secondary-pressed"
|
|
152
152
|
},
|
|
153
153
|
"&[disabled], &[aria-disabled]": {
|
|
154
154
|
backgroundColor: "transparent",
|
|
155
|
-
color: "$text-
|
|
156
|
-
borderBottom: "2px solid $border-
|
|
155
|
+
color: "$text-on-disabled",
|
|
156
|
+
borderBottom: "2px solid $border-disabled"
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
},
|
package/dist/module.js.map
CHANGED
|
@@ -1 +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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\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',\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 '&[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',\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, MouseEvent } 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, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\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\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\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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"}
|
|
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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\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-interactive-secondary',\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',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n\n '&[data-hovered]': {\n backgroundColor: '$background-interactive-surface-hover',\n color: '$text-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$text-on-interactive-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\n color: '$text-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus',\n borderRadius: '$button',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-interactive-secondary',\n borderBottom: '2px solid $border-interactive-secondary',\n\n '&[data-hovered]': {\n color: '$text-interactive-secondary-hover',\n borderBottom: '2px solid $border-interactive-secondary-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-interactive-selected',\n borderBottom: '2px solid $border-interactive-selected',\n },\n\n '&[data-pressed]': {\n color: '$text-interactive-secondary-pressed',\n borderBottom: '2px solid $border-interactive-secondary-pressed',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-on-disabled',\n borderBottom: '2px solid $border-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, MouseEvent } 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, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\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\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\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":";;;;;;;;;;;AAcO,MAAM,WAAA,GAAc,MAAM,aAAA,CAAgC;AAAA,EAC/D,OAAA,EAAS,MAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAC,CAAA;AAEM,MAAM,sBAAsB,CAAC;AAAA,EAClC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,qBACE,GAAA;AAAA,EAAC,WAAA,CAAY,QAAA;AAAA,EAAZ;AAAA,IACC,KAAA,EAAO;AAAA,MACL,OAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACF;AAAA,IAEC;AAAA;AACH,CAAA;;ACzBK,MAAM,cAAA,GAAiB,MAAA,CAAO,SAAA,CAAU,GAAA,EAAK,EAAE,CAAA;AAa/C,MAAM,QAAA,GAAW,MAAM,UAAA,CAG5B,CAAC,EAAE,QAAA,EAAU,GAAG,SAAA,EAAU,EAAG,UAAA,KAAe;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,KAAA,CAAM,WAAW,WAAW,CAAA;AAE7C,EAAA,MAAM,iBAAA,GAAoB,kBAAA,CAAmB,QAAA,EAAU,eAAA,EAAiB;AAAA,IACtE,qBAAA,EAAuB,EAAA;AAAA,IACvB,IAAA,EAAM,IAAA,KAAS,QAAA,GAAW,OAAA,GAAU,QAAA;AAAA,IACpC,MAAA,EAAQ,IAAA,KAAS,QAAA,GAAW,MAAA,GAAS;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAgB,GAAG,SAAA,EAAW,GAAA,EAAK,YAAY,aAAA,EAAW,IAAA,EAAC,OAAA,EAAO,IAAA,EAChE,QAAA,EAAA,iBAAA,EACH,CAAA;AAEJ,CAAC,CAAA;;AClCM,MAAM,UAAA,GAAa,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM;AAAA,EAC/C,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,KAAA;AAAA,EAEf,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,SAAS,EAAC;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,YAAA,EAAc;AAAA;AAChB,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ,EAAE,GAAA,EAAK,KAAA,EAAM;AAAA,MACrB,KAAA,EAAO,EAAE,GAAA,EAAK,MAAA,EAAO;AAAA,MACrB,SAAA,EAAW,EAAE,GAAA,EAAK,MAAA;AAAO;AAC3B,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,SAAA;AAAA,MACN,GAAA,EAAK;AAAA,QACH,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,OAAA;AAAA,MACN,GAAA,EAAK;AAAA,QACH,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,QAAA;AAAA,MACN,GAAA,EAAK;AAAA,QACH,GAAA,EAAK;AAAA;AACP;AACF;AAEJ,CAAC,CAAA;;ACnCM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,GAAG,SAAA,IAAa,UAAA,KAAe;AAC1C,IAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAK,GAAI,KAAA,CAAM,WAAW,WAAW,CAAA;AAEtD,IAAA,uBACE,GAAA,CAAC,cAAY,GAAG,SAAA,EAAW,SAAkB,IAAA,EAAY,GAAA,EAAK,YAC3D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF,CAAA;;ACfO,MAAM,UAAA,GAAa,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM;AAAA,EAC/C,OAAA,EAAS,MAAA;AAAA,EACT,GAAA,EAAK,MAAA;AAAA,EACL,aAAA,EAAe;AACjB,CAAC,CAAA;;ACHD,MAAM,YAAA,GAAe,CAAA;AAEd,MAAM,aAAA,GAAgB,OAAO,UAAA,EAAY;AAAA,EAC9C,UAAA,EAAY,GAAA;AAAA,EACZ,UAAA,EAAY,WAAA;AAAA,EACZ,MAAA,EAAQ,uBAAA;AAAA,EACR,GAAA,EAAK,KAAA;AAAA,EAEL,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS;AAAA,QACP,GAAG,MAAM,GAAA,CAAI;AAAA,UACX,SAAA,EAAW;AAAA,SACZ,CAAA;AAAA,QAED,eAAA,EAAiB,aAAA;AAAA,QACjB,KAAA,EAAO,6BAAA;AAAA,QAEP,iBAAA,EAAmB;AAAA,UACjB,eAAA,EAAiB,uCAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QAEA,sBAAA,EAAwB;AAAA,UACtB,eAAA,EAAiB,4CAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QAEA,iBAAA,EAAmB;AAAA,UACjB,eAAA,EAAiB,yCAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QAEA,+BAAA,EAAiC;AAAA,UAC/B,eAAA,EAAiB,aAAA;AAAA,UACjB,KAAA,EAAO;AAAA;AACT,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,YAAA,EAAc,MAAA;AAAA,QACd,MAAA,EAAQ,MAAA;AAAA,QACR,YAAA,EAAc,GAAA;AAAA,QACd,GAAG,MAAM,GAAA,CAAI;AAAA,UACX,SAAA,EAAW,QAAA;AAAA,UACX,YAAA,EAAc,SAAA;AAAA,UACd,YAAA,EAAc;AAAA,SACf,CAAA;AAAA,QAED,eAAA,EAAiB,aAAA;AAAA,QACjB,KAAA,EAAO,6BAAA;AAAA,QACP,YAAA,EAAc,yCAAA;AAAA,QAEd,iBAAA,EAAmB;AAAA,UACjB,KAAA,EAAO,mCAAA;AAAA,UACP,YAAA,EAAc;AAAA,SAChB;AAAA,QAEA,sBAAA,EAAwB;AAAA,UACtB,KAAA,EAAO,4BAAA;AAAA,UACP,YAAA,EAAc;AAAA,SAChB;AAAA,QAEA,iBAAA,EAAmB;AAAA,UACjB,KAAA,EAAO,qCAAA;AAAA,UACP,YAAA,EAAc;AAAA,SAChB;AAAA,QAEA,+BAAA,EAAiC;AAAA,UAC/B,eAAA,EAAiB,aAAA;AAAA,UACjB,KAAA,EAAO,mBAAA;AAAA,UACP,YAAA,EAAc;AAAA;AAChB;AACF,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,SAAA,EAAW;AAAA,QACT,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,QAAA,EAAU,MAAA;AAAA,QACV,QAAA,EAAU,eAAe,MAAA,CAAA,YAAA,EAAY,KAAA;AAAA,OACvC;AAAA,MACA,KAAA,EAAO;AAAA,QACL,QAAQ,KAAA,CAAM,KAAA;AAAA,QACd,QAAA,EAAU,MAAA;AAAA,QACV,QAAA,EAAU,eAAe,MAAA,CAAA,YAAA,EAAY,KAAA;AAAA,OACvC;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,QAAA,EAAU,MAAA;AAAA,QACV,QAAA,EAAU,eAAe,MAAA,CAAA,YAAA,EAAY,KAAA;AAAA;AACvC;AACF,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,SAAA;AAAA,MACN,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ,KAAA;AAAA,QACR,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,OAAA;AAAA,MACN,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ,KAAA;AAAA,QACR,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,QAAA;AAAA,MACN,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ,KAAA;AAAA,QACR,QAAA,EAAU;AAAA;AACZ;AACF;AAEJ,CAAC,CAAA;;AC5GM,MAAM,OAAA,GAAU,KAAA,CAAM,UAAA,CAG3B,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,OAAA,EAAS,WAAA,EAAa,GAAG,SAAA,EAAU,EAAG,UAAA,KAAe;AACzE,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,eAAc,GAAI,KAAA,CAAM,WAAW,WAAW,CAAA;AAErE,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAA,KAA2C;AAElE,IAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,CAAA,CAAA;AAEd,IAAA,IAAI,SAAA,CAAU,aAAa,IAAA,EAAM;AAC/B,MAAA;AAAA,IACF;AACA,IAAA,CAAA,CAAE,cAAA,EAAe;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA2C;AAC9D,IAAA,IAAI,SAAA,CAAU,aAAa,IAAA,EAAM;AAC/B,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,CAAA,CAAA;AACV,IAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAgB,KAAA,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,IAAA;AAAA,MACA,mBAAA,EAAoB,MAAA;AAAA,MACpB,IAAA,EAAK,KAAA;AAAA,MACL,OAAA,EAAO,IAAA;AAAA,MACP,GAAA,EAAK,UAAA;AAAA,MACL,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA,CAAU,OAAA;AAAA,QAAV;AAAA,UACC,KAAA;AAAA,UACA,WAAA,EAAa,eAAA;AAAA,UACb,OAAA,EAAS,WAAA;AAAA,UAER;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAC,CAAA;;ACnBM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EAIxB,CACE;AAAA,IACE,OAAA,GAAU,MAAA;AAAA,IACV,IAAA,GAAO,OAAA;AAAA,IACP,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,oBAAA,CAAqB;AAAA,MAC3D,IAAA,EAAM,KAAA;AAAA,MACN,WAAA,EAAa,YAAA;AAAA,MACb;AAAA,KACD,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA,EAAe,eAAA;AAAA,QAEf,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACE,GAAG,KAAA;AAAA,YACJ,GAAA,EAAK,UAAA;AAAA,YACL,KAAA,EAAO,YAAA;AAAA,YACP,aAAA,EAAe,eAAA;AAAA,YACf,cAAA,EAAe;AAAA;AAAA;AACjB;AAAA,KACF;AAAA,EAEJ;AACF;AASA,IAAA,CAAK,IAAA,GAAO,IAAA;AACZ,IAAA,CAAK,OAAA,GAAU,OAAA;AACf,IAAA,CAAK,UAAU,SAAA,CAAU,OAAA;AACzB,IAAA,CAAK,QAAA,GAAW,QAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-tabs",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.22-canvas-26.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@radix-ui/react-tabs": "^1.0.0",
|
|
30
30
|
"@radix-ui/react-use-controllable-state": "1.1.1",
|
|
31
|
-
"@mirohq/design-system-base-button": "^1.2.
|
|
31
|
+
"@mirohq/design-system-base-button": "^1.2.20-canvas-26.0",
|
|
32
32
|
"@mirohq/design-system-base-icon": "^1.2.1",
|
|
33
33
|
"@mirohq/design-system-primitive": "^2.2.1",
|
|
34
34
|
"@mirohq/design-system-stitches": "^3.3.16",
|
|
35
|
-
"@mirohq/design-system-styles": "^3.2.
|
|
35
|
+
"@mirohq/design-system-styles": "^3.2.16-canvas-26.0",
|
|
36
36
|
"@mirohq/design-system-utils": "^1.3.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|