@atom-learning/components 2.66.0 → 2.66.1
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/CHANGELOG.md +3 -11
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +1 -1
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/BadgeIcon.js.map +1 -1
- package/dist/components/badge/BadgeText.js +1 -1
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/button/Button.d.ts +1 -0
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/link/Link.js +1 -1
- package/dist/components/link/Link.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/utilities/uri/index.d.ts +1 -0
- package/dist/utilities/uri/index.js +2 -0
- package/dist/utilities/uri/index.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
## [2.66.1](https://github.com/Atom-Learning/components/compare/v2.66.0...v2.66.1) (2023-08-23)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* type export ([9a270cb](https://github.com/Atom-Learning/components/commit/9a270cbb1f0c118e4d78f0d2cbbc5bbcd7896602))
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
### Features
|
|
12
|
-
|
|
13
|
-
* better test for OptionalTooltipWrapper ([cb23706](https://github.com/Atom-Learning/components/commit/cb237064175d7cf19de373f44300fb57554a7a0f))
|
|
14
|
-
* move OptionalTooltipWrapper out of ActionIcon and into reusable utilitiy ([45ce733](https://github.com/Atom-Learning/components/commit/45ce733b1cc1394f20142efa2c545af0159a8657))
|
|
15
|
-
* rework Badge add new colour themes and overflow types ([7b1c543](https://github.com/Atom-Learning/components/commit/7b1c5432beea9232f7f1b417b2ea7760e908e0f5))
|
|
6
|
+
* external link handling, improve button children spacing/sizing ([e6d95ea](https://github.com/Atom-Learning/components/commit/e6d95ea4333a33b3cfa758a4b7a6eb2c7524510f))
|
|
7
|
+
* snapshots, include uri util ([cb96294](https://github.com/Atom-Learning/components/commit/cb9629462c5b30c29e6448919bee305dd9c07cf6))
|
|
16
8
|
|
|
17
9
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
18
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken } from 'color2k'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (base: string, interact: string, active: string) => ({\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getSolidVariant = (base: string, interact: string, active: string) => ({\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': {\n bg: active\n },\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getOutlineVariant = (base: string, interact: string, active: string) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n compoundVariants: [\n // Appearance Simple\n {\n theme: 'neutral',\n appearance: 'simple',\n css: getSimpleVariant('$tonal300', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primary',\n appearance: 'simple',\n css: getSimpleVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'simple',\n css: getSimpleVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'simple',\n css: getSimpleVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'simple',\n css: getSimpleVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'simple',\n css: getSimpleVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Solid\n {\n theme: 'primary',\n appearance: 'solid',\n css: getSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'solid',\n css: getSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getSolidVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Outline\n {\n theme: 'primary',\n appearance: 'outline',\n css: getOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'outline',\n css: getOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'outline',\n css: getOutlineVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'outline',\n css: getOutlineVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'outline',\n css: getOutlineVariant('$danger', '$dangerMid', '$dangerDark')\n }\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(child, {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n })\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","darken","theme","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","child","ActionIconSizeMap"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken } from 'color2k'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (base: string, interact: string, active: string) => ({\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getSolidVariant = (base: string, interact: string, active: string) => ({\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': {\n bg: active\n },\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getOutlineVariant = (base: string, interact: string, active: string) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n compoundVariants: [\n // Appearance Simple\n {\n theme: 'neutral',\n appearance: 'simple',\n css: getSimpleVariant('$tonal300', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primary',\n appearance: 'simple',\n css: getSimpleVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'simple',\n css: getSimpleVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'simple',\n css: getSimpleVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'simple',\n css: getSimpleVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'simple',\n css: getSimpleVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Solid\n {\n theme: 'primary',\n appearance: 'solid',\n css: getSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'solid',\n css: getSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getSolidVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Outline\n {\n theme: 'primary',\n appearance: 'outline',\n css: getOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'outline',\n css: getOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'outline',\n css: getOutlineVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'outline',\n css: getOutlineVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'outline',\n css: getOutlineVariant('$danger', '$dangerMid', '$dangerDark')\n }\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(child, {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n })\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","darken","theme","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","child","ActionIconSizeMap"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TcolorScheme } from '../../experiments/color-scheme';
|
|
3
|
-
import { BadgeText } from './BadgeText';
|
|
4
3
|
import { BadgeIcon } from './BadgeIcon';
|
|
4
|
+
import { BadgeText } from './BadgeText';
|
|
5
5
|
import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config';
|
|
6
6
|
declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
7
7
|
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Flex as x}from"../flex/Flex.js";import{Icon as $}from"../icon/Icon.js";import{ColorScheme as h}from"../../experiments/color-scheme/ColorScheme.js";import{styled as y}from"../../stitches.js";import{useCallbackRefState as v}from"../../utilities/hooks/useCallbackRef.js";import{
|
|
1
|
+
import*as e from"react";import{Flex as x}from"../flex/Flex.js";import{Icon as $}from"../icon/Icon.js";import{ColorScheme as h}from"../../experiments/color-scheme/ColorScheme.js";import{styled as y}from"../../stitches.js";import{useCallbackRefState as v}from"../../utilities/hooks/useCallbackRef.js";import{BadgeContext as w,BadgeProvider as B}from"./Badge.context.js";import{BadgeIcon as m}from"./BadgeIcon.js";import{BadgeText as c}from"./BadgeText.js";import{colorSchemes as C}from"./stitches.badge.colorscheme.config.js";import{OptionalTooltipWrapper as E}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const F=y(x,{justifyContent:"center",alignItems:"center",borderRadius:"$0",minWidth:0,border:"1px solid #FFFFFF",fontFamily:"$body","& > *:not(:last-child)":{mr:"$1"},variants:{emphasis:{subtle:{color:"$textSubtle",background:"$backgroundSubtle"},bold:{color:"$textBold",background:"$backgroundBold"}},size:{xs:{px:"$1"},sm:{px:"$1",py:"$0"},md:{px:"$2",py:"$1"}}}}),I=e.forwardRef(({theme:o="non-semantic",emphasis:n="subtle",children:a,...l},p)=>{const{size:d,overflow:f,isOverflowing:u}=e.useContext(w),[i,g]=v();e.useImperativeHandle(p,()=>i);const s=["info","success","neutral","warning","danger"].includes(o),b=i==null?void 0:i.textContent;return e.createElement(E,{hasTooltip:f==="ellipsis"&&u,label:b},e.createElement(h,{className:C[s?o:"non-semantic"],accent:s||!o?void 0:`${o}2`,asChild:!0},e.createElement(F,{role:"status",emphasis:n,size:d,...l,ref:g},e.Children.map(a,t=>typeof t=="string"||typeof t=="number"?e.createElement(c,null,t):e.isValidElement(t)&&t.type===$?e.createElement(m,{...t.props}):t))))}),r=e.forwardRef(({size:o="sm",overflow:n="wrap",...a},l)=>e.createElement(B,{size:o,overflow:n},e.createElement(I,{...a,ref:l})));r.displayName="Badge",r.Icon=m,r.Text=c;export{r as Badge};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport {
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\nimport { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config'\n\nconst StyledBadge = styled(Flex, {\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$0',\n minWidth: 0,\n border: '1px solid #FFFFFF',\n fontFamily: '$body',\n '& > *:not(:last-child)': {\n mr: '$1'\n },\n variants: {\n emphasis: {\n subtle: {\n color: '$textSubtle',\n background: '$backgroundSubtle'\n },\n bold: {\n color: '$textBold',\n background: '$backgroundBold'\n }\n },\n size: {\n xs: {\n px: '$1'\n },\n sm: {\n px: '$1',\n py: '$0'\n },\n md: {\n px: '$2',\n py: '$1'\n }\n }\n }\n})\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n colorScheme?: TcolorScheme\n}\n\ntype TBadge = React.ForwardRefExoticComponent<TBadgeProps> & {\n Icon: typeof BadgeIcon\n Text: typeof BadgeText\n}\n\ntype TBadgeInnerProps = Omit<Omit<TBadgeProps, 'size'>, 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n ({ theme = 'non-semantic', emphasis = 'subtle', children, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const isSemanticTheme = [\n 'info',\n 'success',\n 'neutral',\n 'warning',\n 'danger'\n ].includes(theme)\n\n const label = badgeElRef?.textContent\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <ColorScheme\n className={\n badgeColorSchemes[isSemanticTheme ? theme : 'non-semantic']\n }\n accent={\n isSemanticTheme || !theme\n ? undefined\n : (`${theme}2` as TcolorScheme['accent'])\n }\n asChild\n >\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n {...rest}\n ref={setBadgeElRef}\n >\n {React.Children.map(children, (child) => {\n if (typeof child === 'string' || typeof child === 'number') {\n return <BadgeText>{child}</BadgeText>\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <BadgeIcon {...child.props} />\n }\n return child\n })}\n </StyledBadge>\n </ColorScheme>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nexport const Badge = React.forwardRef<HTMLDivElement, TBadgeProps>(\n ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n return (\n <BadgeProvider size={size} overflow={overflow}>\n <BadgeInner {...rest} ref={ref} />\n </BadgeProvider>\n )\n }\n) as TBadge\n\nBadge.displayName = 'Badge'\nBadge.Icon = BadgeIcon\nBadge.Text = BadgeText\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","isSemanticTheme","label","OptionalTooltipWrapper","ColorScheme","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","Badge","BadgeProvider"],"mappings":"wnBAcA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,SAAU,EACV,OAAQ,oBACR,WAAY,QACZ,yBAA0B,CACxB,GAAI,IACN,EACA,SAAU,CACR,SAAU,CACR,OAAQ,CACN,MAAO,cACP,WAAY,mBACd,EACA,KAAM,CACJ,MAAO,YACP,WAAY,iBACd,CACF,EACA,KAAM,CACJ,GAAI,CACF,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAeKC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,eAAgB,SAAAC,EAAW,SAAU,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CAC3E,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,EAAoB,EACxDZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAkB,CACtB,OACA,UACA,UACA,UACA,QACF,EAAE,SAASZ,CAAK,EAEVa,EAAQJ,GAAA,KAAAA,OAAAA,EAAY,YAE1B,OACEV,EAAA,cAACe,EAAA,CACC,WAAYR,IAAa,YAAcC,EACvC,MAAOM,CAAAA,EAEPd,EAAA,cAACgB,EAAA,CACC,UACEC,EAAkBJ,EAAkBZ,EAAQ,gBAE9C,OACEY,GAAmB,CAACZ,EAChB,OACC,GAAGA,KAEV,QAAO,EAAA,EAEPD,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,IAAKO,CAAAA,EAEJX,EAAM,SAAS,IAAIG,EAAWe,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzClB,EAAA,cAACmB,EAAA,KAAWD,CAAM,EAEvBlB,EAAM,eAAekB,CAAK,GAAKA,EAAM,OAASE,EACzCpB,EAAA,cAACqB,EAAA,CAAW,GAAGH,EAAM,KAAO,CAAA,EAE9BA,CACR,CACH,CACF,CACF,CAEJ,CACF,EAEaI,EAAQtB,EAAM,WACzB,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,UAAWH,CAAK,EAAGC,IAE1CL,EAAA,cAACuB,EAAA,CAAc,KAAMjB,EAAM,SAAUC,CACnCP,EAAAA,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,EAAK,CAClC,CAGN,EAEAiB,EAAM,YAAc,QACpBA,EAAM,KAAOD,EACbC,EAAM,KAAOH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.js","sources":["../../../src/components/badge/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\n\nconst StyledBadgeIcon = styled(Icon, { flexShrink: 0 })\nexport const BadgeIcon = (props: React.ComponentProps<typeof StyledBadgeIcon
|
|
1
|
+
{"version":3,"file":"BadgeIcon.js","sources":["../../../src/components/badge/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\n\nconst StyledBadgeIcon = styled(Icon, { flexShrink: 0 })\nexport const BadgeIcon = (\n props: React.ComponentProps<typeof StyledBadgeIcon>\n) => <StyledBadgeIcon size=\"sm\" {...props} />\n"],"names":["StyledBadgeIcon","styled","Icon","BadgeIcon","props","React"],"mappings":"0GAKA,MAAMA,EAAkBC,EAAOC,EAAM,CAAE,WAAY,CAAE,CAAC,EACzCC,EACXC,GACGC,EAAA,cAACL,EAAA,CAAgB,KAAK,KAAM,GAAGI,CAAO,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{
|
|
1
|
+
import*as t from"react";import{Text as p}from"../text/Text.js";import{styled as f}from"../../stitches.js";import{useCallbackRefState as c}from"../../utilities/hooks/useCallbackRef.js";import{useResizeObserver as d}from"../../utilities/hooks/useResizeObserver.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{BadgeContext as s}from"./Badge.context.js";const w=({elRef:e})=>{const{setIsOverflowing:r}=t.useContext(s);return d({delay:0,elements:[e],onResize:()=>{!(e!=null&&e.scrollWidth)||!(e!=null&&e.clientWidth)||r==null||r(e.scrollWidth>e.clientWidth)}}),null},h=f(p,{py:"$0",variants:{overflow:{ellipsis:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis"},wrap:{whiteSpace:"wrap"}}}}),v={xs:"sm",sm:"md",md:"md"},x=({children:e,...r})=>{const{size:l,overflow:o}=t.useContext(s),i=t.useMemo(()=>u(l,a=>v[a]),[l]),[n,m]=c();return t.createElement(t.Fragment,null,o==="ellipsis"&&t.createElement(w,{elRef:n}),t.createElement(h,{noCapsize:!0,size:i,overflow:o,ref:m,...r},e))};export{x as BadgeText};
|
|
2
2
|
//# sourceMappingURL=BadgeText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeText.js","sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"BadgeText.js","sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n py: '$0',\n variants: {\n overflow: {\n ellipsis: {\n whiteSpace: 'nowrap',\n overflowX: 'hidden',\n textOverflow: 'ellipsis'\n },\n wrap: {\n whiteSpace: 'wrap'\n }\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStitchesVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n noCapsize\n size={size}\n overflow={overflow}\n ref={setElRef}\n {...rest}\n >\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"names":["ObserveBadgeTextOverflow","elRef","setIsOverflowing","React","BadgeContext","useResizeObserver","StyledBadgeText","styled","Text","toTextSize","BadgeText","children","rest","badgeSize","overflow","size","overrideStitchesVariantValue","s","setElRef","useCallbackRefState"],"mappings":"wbAiBA,MAAMA,EAAqE,CAAC,CAC1E,MAAAC,CACF,IAAM,CACJ,KAAM,CAAE,iBAAAC,CAAiB,EAAIC,EAAM,WAAWC,CAAY,EAE1D,OAAAC,EAAkB,CAChB,MAAO,EACP,SAAU,CAACJ,CAAK,EAChB,SAAU,IAAM,CACV,EAACA,GAAA,MAAAA,EAAO,cAAe,EAACA,GAAA,MAAAA,EAAO,cACnCC,GAAA,MAAAA,EAAmBD,EAAM,YAAcA,EAAM,YAC/C,CACF,CAAC,EAEM,IACT,EAEMK,EAAkBC,EAAOC,EAAM,CACnC,GAAI,KACJ,SAAU,CACR,SAAU,CACR,SAAU,CACR,WAAY,SACZ,UAAW,SACX,aAAc,UAChB,EACA,KAAM,CACJ,WAAY,MACd,CACF,CACF,CACF,CAAC,EAIKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAY,CAAC,CACxB,SAAAC,KACGC,CACL,IAAoC,CAElC,KAAM,CAAE,KAAMC,EAAW,SAAAC,CAAS,EAAIX,EAAM,WAAWC,CAAY,EAE7DW,EAAOZ,EAAM,QACjB,IAAMa,EAA6BH,EAAYI,GAAMR,EAAWQ,EAAE,EAClE,CAACJ,CAAS,CACZ,EAEM,CAACZ,EAAOiB,CAAQ,EAAIC,IAE1B,OACEhB,EAAA,cAAAA,EAAA,SAAA,KACGW,IAAa,YAAcX,EAAA,cAACH,EAAA,CAAyB,MAAOC,CAAO,CAAA,EACpEE,EAAA,cAACG,EAAA,CACC,UAAS,GACT,KAAMS,EACN,SAAUD,EACV,IAAKI,EACJ,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}
|
|
@@ -330,6 +330,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
|
|
|
330
330
|
declare type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, VariantProps<typeof StyledButton> & {
|
|
331
331
|
as?: React.ComponentType | React.ElementType;
|
|
332
332
|
children: React.ReactNode;
|
|
333
|
+
href?: string;
|
|
333
334
|
isLoading?: boolean;
|
|
334
335
|
} & NavigatorActions>;
|
|
335
336
|
export declare const Button: React.FC<ButtonProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{darken as
|
|
1
|
+
import{darken as n,opacify as s}from"color2k";import*as o from"react";import{Box as w}from"../box/Box.js";import{StyledIcon as c}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as D,theme as l}from"../../stitches.js";import{isExternalLink as v}from"../../utilities/uri/index.js";const p=(r,e,i)=>({border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:e},"&:not([disabled]):active":{color:i}}),t=(r,e,i,a="white")=>({bg:r,color:a,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:e,color:a},"&:not([disabled]):active":{bg:i}}),d=D("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${c}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${c}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",[`& ${c}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:t("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:t("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:t("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:t("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:t("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:t("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}]}),x=({isLoading:r,children:e})=>typeof r!="boolean"?e:o.createElement(o.Fragment,null,o.createElement(k,{css:{opacity:r?1:0,position:"absolute",transition:"opacity 150ms"}}),o.createElement(w,{as:"span",css:r?{opacity:0,transition:"opacity 150ms"}:{}},e)),m=o.forwardRef(({children:r,isLoading:e,onClick:i,href:a,appearance:h="solid",size:u="md",theme:y="primary",type:$="button",...g},f)=>{const b=a?{as:"a",href:a,...v(a)?{target:"_blank",rel:"noopener noreferrer"}:{}}:{};return o.createElement(d,{isLoading:e||!1,onClick:e?void 0:i,appearance:h,size:u,theme:y,...g,...b,...a?{}:{type:$},ref:f},o.createElement(x,{isLoading:e},r))});m.displayName="Button";export{m as Button,d as StyledButton};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Icon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\n\nconst getButtonOutlineVariant = (\n base: string,\n interact: string,\n active: string\n) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': {\n color: active\n }\n})\n\nconst getButtonSolidVariant = (\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n bg: base,\n color: text,\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': {\n bg: active\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4'\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5'\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5'\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n false: {\n width: 'max-content'\n },\n true: {\n width: '100%'\n }\n }\n },\n\n compoundVariants: [\n {\n theme: 'primary',\n appearance: 'solid',\n css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'secondary',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$warning',\n '$warningMid',\n '$warningDark',\n '$tonal500'\n )\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n {\n theme: 'neutral',\n appearance: 'solid',\n css: getButtonSolidVariant(\n 'white',\n opacify('white', -0.1),\n opacify('white', -0.25),\n '$primary'\n )\n },\n {\n theme: 'primary',\n appearance: 'outline',\n css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'neutral',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n 'white',\n opacify('white', -0.2),\n opacify('white', -0.35)\n )\n },\n {\n theme: 'secondary',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n }\n ]\n})\n\nconst WithLoader = ({ isLoading, children }) => (\n <>\n <Loader\n css={{\n opacity: isLoading ? 1 : 0,\n position: 'absolute',\n transition: 'opacity 150ms'\n }}\n />\n <Box\n as=\"span\"\n css={isLoading ? { opacity: 0, transition: 'opacity 150ms' } : {}}\n >\n {children}\n </Box>\n </>\n)\n\nconst getIconSize = (size) => {\n switch (size) {\n case 'lg':\n return 22\n case 'md':\n return 20\n case 'sm':\n default:\n return 16\n }\n}\n\nconst getChildren = (children, size) =>\n React.Children.map(children, (child, i) => {\n if (child?.type === Icon) {\n return React.cloneElement(child, {\n css: {\n [i === 0 ? 'mr' : 'ml']: size === 'sm' ? '$2' : '$3',\n size: getIconSize(size),\n ...(child.props.css ? child.props.css : {})\n }\n })\n }\n return child\n })\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n isLoading,\n onClick,\n href,\n appearance = 'solid',\n size = 'md',\n theme = 'primary',\n type = 'button',\n ...rest\n },\n ref\n ) => {\n const linkSpecificProps = href\n ? {\n as: 'a',\n href,\n onClick: undefined\n }\n : {}\n\n const buttonSpecificProps = href ? {} : { type }\n\n // Note: button is not disabled when loading for accessibility purposes.\n // Instead the click action is not fired and the button looks faded\n return (\n <StyledButton\n isLoading={isLoading || false}\n onClick={!isLoading ? onClick : undefined}\n appearance={appearance}\n size={size}\n theme={theme}\n {...rest}\n {...linkSpecificProps}\n {...buttonSpecificProps}\n ref={ref}\n >\n {typeof isLoading === 'boolean' ? (\n <WithLoader isLoading={isLoading}>\n {getChildren(children, size)}\n </WithLoader>\n ) : (\n getChildren(children, size)\n )}\n </StyledButton>\n )\n }\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","darken","theme","opacify","WithLoader","isLoading","children","React","Loader","Box","getIconSize","size","getChildren","child","i","Icon","Button","onClick","href","appearance","type","rest","ref"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n base: string,\n interact: string,\n active: string\n) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': {\n color: active\n }\n})\n\nconst getButtonSolidVariant = (\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n bg: base,\n color: text,\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': {\n bg: active\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n false: {\n width: 'max-content'\n },\n true: {\n width: '100%'\n }\n }\n },\n\n compoundVariants: [\n {\n theme: 'primary',\n appearance: 'solid',\n css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'secondary',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$warning',\n '$warningMid',\n '$warningDark',\n '$tonal500'\n )\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n {\n theme: 'neutral',\n appearance: 'solid',\n css: getButtonSolidVariant(\n 'white',\n opacify('white', -0.1),\n opacify('white', -0.25),\n '$primary'\n )\n },\n {\n theme: 'primary',\n appearance: 'outline',\n css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'neutral',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n 'white',\n opacify('white', -0.2),\n opacify('white', -0.35)\n )\n },\n {\n theme: 'secondary',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n }\n ]\n})\n\nconst WithLoader = ({ isLoading, children }) => {\n if (typeof isLoading !== 'boolean') {\n return children\n }\n return (\n <>\n <Loader\n css={{\n opacity: isLoading ? 1 : 0,\n position: 'absolute',\n transition: 'opacity 150ms'\n }}\n />\n <Box\n as=\"span\"\n css={isLoading ? { opacity: 0, transition: 'opacity 150ms' } : {}}\n >\n {children}\n </Box>\n </>\n )\n}\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n isLoading,\n onClick,\n href,\n appearance = 'solid',\n size = 'md',\n theme = 'primary',\n type = 'button',\n ...rest\n },\n ref\n ) => {\n const linkSpecificProps = href\n ? {\n as: 'a',\n href,\n ...(isExternalLink(href)\n ? { target: '_blank', rel: 'noopener noreferrer' }\n : {})\n }\n : {}\n const buttonSpecificProps = !href ? { type } : {}\n\n // Note: button is not disabled when loading for accessibility purposes.\n // Instead the click action is not fired and the button looks faded\n return (\n <StyledButton\n isLoading={isLoading || false}\n onClick={!isLoading ? onClick : undefined}\n appearance={appearance}\n size={size}\n theme={theme}\n {...rest}\n {...linkSpecificProps}\n {...buttonSpecificProps}\n ref={ref}\n >\n <WithLoader isLoading={isLoading}>{children}</WithLoader>\n </StyledButton>\n )\n }\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","darken","theme","opacify","WithLoader","isLoading","children","React","Loader","Box","Button","onClick","href","appearance","size","type","rest","ref","linkSpecificProps","isExternalLink"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as
|
|
1
|
+
import*as e from"react";import{styled as m}from"../../stitches.js";import{isExternalLink as p}from"../../utilities/uri/index.js";import{StyledHeading as f}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import"../markdown-content/components/MarkdownCode.js";import{StyledMarkdownEmphasis as l}from"../markdown-content/components/MarkdownEmphasis.js";import"../markdown-content/components/MarkdownInlineCode.js";import"../image/Image.js";import{StyledText as d,textVariants as y}from"../text/Text.js";import"../markdown-content/components/MarkdownStrong.js";import"../divider/Divider.js";const o=m("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${d} > &, ${f} > &, ${s} > &, ${l} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:y}),t=e.forwardRef(({size:i="md",href:r,...n},a)=>e.createElement(o,{...p(r)?{target:"_blank",rel:"noopener noreferrer"}:{},...!r&&{as:"button",noCapsize:!0},size:i,href:r,...n,ref:a}));t.displayName="Link";export{t as Link,o as StyledLink};
|
|
2
2
|
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n bg: 'unset',\n border: 'unset',\n p: 'unset',\n color: '$primary',\n cursor: 'pointer',\n fontFamily: '$body',\n textDecoration: 'none',\n '&:focus, &:hover': {\n color: '$primaryMid',\n textDecoration: 'underline'\n },\n '&:active': {\n color: '$primaryDark'\n },\n [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n {\n fontSize: '100%',\n lineHeight: 1,\n '&::before, &::after': {\n content: 'none'\n }\n },\n variants: textVariants\n})\n\ntype LinkProps = Override<\n React.ComponentProps<typeof StyledLink>,\n {\n as?: React.ComponentType | React.ElementType\n } & NavigatorActions\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n ({ size = 'md', href, ...props }, ref) => (\n <StyledLink\n {...(!href && { as: 'button', noCapsize: true })}\n size={size}\n href={href}\n {...props}\n ref={ref}\n />\n )\n) as React.FC<LinkProps>\n\nLink.displayName = 'Link'\n"],"names":["StyledLink","styled","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","size","href","props","ref"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n bg: 'unset',\n border: 'unset',\n p: 'unset',\n color: '$primary',\n cursor: 'pointer',\n fontFamily: '$body',\n textDecoration: 'none',\n '&:focus, &:hover': {\n color: '$primaryMid',\n textDecoration: 'underline'\n },\n '&:active': {\n color: '$primaryDark'\n },\n [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n {\n fontSize: '100%',\n lineHeight: 1,\n '&::before, &::after': {\n content: 'none'\n }\n },\n variants: textVariants\n})\n\ntype LinkProps = Override<\n React.ComponentProps<typeof StyledLink>,\n {\n as?: React.ComponentType | React.ElementType\n } & NavigatorActions\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n ({ size = 'md', href, ...props }, ref) => (\n <StyledLink\n {...(isExternalLink(href)\n ? { target: '_blank', rel: 'noopener noreferrer' }\n : {})}\n {...(!href && { as: 'button', noCapsize: true })}\n size={size}\n href={href}\n {...props}\n ref={ref}\n />\n )\n) as React.FC<LinkProps>\n\nLink.displayName = 'Link'\n"],"names":["StyledLink","styled","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","size","href","props","ref","isExternalLink"],"mappings":"wmBAYaA,EAAaC,EAAO,IAAK,CACpC,GAAI,QACJ,OAAQ,QACR,EAAG,QACH,MAAO,WACP,OAAQ,UACR,WAAY,QACZ,eAAgB,OAChB,mBAAoB,CAClB,MAAO,cACP,eAAgB,WAClB,EACA,WAAY,CACV,MAAO,cACT,EACA,CAAC,GAAGC,UAAmBC,UAAsBC,UAAiBC,SAC5D,CACE,SAAU,OACV,WAAY,EACZ,sBAAuB,CACrB,QAAS,MACX,CACF,EACF,SAAUC,CACZ,CAAC,EASYC,EAAOC,EAAM,WACxB,CAAC,CAAE,KAAAC,EAAO,KAAM,KAAAC,KAASC,CAAM,EAAGC,IAChCJ,EAAA,cAACR,EACE,CAAA,GAAIa,EAAeH,CAAI,EACpB,CAAE,OAAQ,SAAU,IAAK,qBAAsB,EAC/C,CAAA,EACH,GAAI,CAACA,GAAQ,CAAE,GAAI,SAAU,UAAW,EAAK,EAC9C,KAAMD,EACN,KAAMC,EACL,GAAGC,EACJ,IAAKC,CAAAA,CACP,CAEJ,EAEAL,EAAK,YAAc"}
|