@atom-learning/components 6.0.0-beta.24 → 6.0.0-beta.26
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/components/avatar/Avatar.js +1 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +3 -3
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/BadgeText.d.ts +3 -3
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map +1 -1
- package/dist/components/combobox/ComboboxInput.js +1 -1
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/empty-state/EmptyState.d.ts +3 -3
- package/dist/components/empty-state/EmptyStateBody.d.ts +3 -3
- package/dist/components/heading/Heading.d.ts +1 -1
- package/dist/components/heading/Heading.js +1 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/input/Input.d.ts +3 -3
- package/dist/components/keyboard-shortcut/KeyboardShortcut.d.ts +3 -3
- package/dist/components/keyboard-shortcut/index.d.ts +3 -3
- package/dist/components/label/Label.js +1 -1
- package/dist/components/label/Label.js.map +1 -1
- package/dist/components/link/Link.js +1 -1
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/list/List.d.ts +2 -2
- package/dist/components/list/List.js +1 -1
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownCode.js +1 -1
- package/dist/components/markdown-content/components/MarkdownCode.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.d.ts +3 -3
- package/dist/components/navigation/NavigationMenu.styles.js +1 -1
- package/dist/components/navigation/NavigationMenu.styles.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownItem.d.ts +3 -3
- package/dist/components/navigation/NavigationMenuLink.js +1 -1
- package/dist/components/navigation/NavigationMenuLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts +3 -3
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.d.ts +3 -3
- package/dist/components/pagination/PaginationPage.js +1 -1
- package/dist/components/pagination/PaginationPage.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.d.ts +6 -6
- package/dist/components/segmented-control/SegmentedControlDescription.d.ts +3 -3
- package/dist/components/segmented-control/SegmentedControlHeading.d.ts +3 -3
- package/dist/components/side-bar/SideBar.d.ts +3 -3
- package/dist/components/side-bar/SideBarComponents.d.ts +3 -3
- package/dist/components/stepper/StepperStepLabel.d.ts +3 -3
- package/dist/components/tabs/TabsTrigger.js +1 -1
- package/dist/components/tabs/TabsTrigger.js.map +1 -1
- package/dist/components/text/Text.d.ts +3 -18
- package/dist/components/text/Text.js +1 -1
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/textarea/Textarea.js +1 -1
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.js +1 -1
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.js +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- package/dist/components/tooltip/TooltipContent.js +1 -1
- package/dist/components/tooltip/TooltipContent.js.map +1 -1
- package/dist/components/top-bar/TopBar.d.ts +20 -8
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/components/top-bar/TopBarBrand.d.ts +3 -3
- package/dist/components/tree/Tree.d.ts +3 -3
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/styled.js +1 -1
- package/dist/styled.js.map +1 -1
- package/package.json +1 -1
- package/src/responsive-variant-classes.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as i from"react";import{styled as l}from"../../styled.js";import{AvatarIcon as c}from"./AvatarIcon.js";import{AvatarImage as b}from"./AvatarImage.js";import{AvatarInitial as v}from"./AvatarInitial.js";import{AvatarPlaceholder as z}from"./AvatarPlaceholder.js";const d=["flex","justify-center","items-center","text-grey-800","rounded-full","border-2","border-grey-200","bg-white","overflow-hidden"],x=l("div",{base:d,variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),p=l("button",{base:["[all:unset]",...d,"not-disabled:active:bg-grey-200","not-disabled:active:border-primary-800","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[
|
|
1
|
+
import*as i from"react";import{styled as l}from"../../styled.js";import{AvatarIcon as c}from"./AvatarIcon.js";import{AvatarImage as b}from"./AvatarImage.js";import{AvatarInitial as v}from"./AvatarInitial.js";import{AvatarPlaceholder as z}from"./AvatarPlaceholder.js";const d=["flex","justify-center","items-center","text-grey-800","rounded-full","border-2","border-grey-200","bg-white","overflow-hidden"],x=l("div",{base:d,variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),p=l("button",{base:["[all:unset]",...d,"not-disabled:active:bg-grey-200","not-disabled:active:border-primary-800","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-grey-100","not-disabled:hover:border-grey-800","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{size:{xs:["size-6"],sm:["size-8"],md:["size-10"],lg:["size-12"],xl:["size-16"],xxl:["size-24"]}}}),n=i.createContext({name:void 0,size:"lg"}),m=({children:a,name:e,size:r})=>{const o=i.useMemo(()=>({name:e,size:r}),[e,r]);return i.createElement(n.Provider,{value:o},a)},s=({children:a,size:e="lg",name:r,disabled:o=!1,onClick:t})=>i.createElement(m,{name:r,size:e},t?i.createElement(p,{size:e,disabled:o,onClick:o?void 0:t,className:o?"cursor-auto":"cursor-pointer"},a):i.createElement(x,{size:e},a)),u=Object.assign(s,{Image:b,Initial:v,Placeholder:z,Icon:c});s.displayName="Avatar";export{u as Avatar,s as AvatarRoot,n as AvatarRootContext,m as AvatarRootProvider};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n 'flex',\n 'justify-center',\n 'items-center',\n 'text-grey-800',\n 'rounded-full',\n 'border-2',\n\n 'border-grey-200',\n 'bg-white',\n 'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n base: avatarRootStyles,\n variants: {\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12'],\n xl: ['size-16'],\n xxl: ['size-24']\n }\n }\n})\n\nconst StyledButton = styled('button', {\n base: [\n '[all:unset]',\n ...avatarRootStyles,\n 'not-disabled:active:bg-grey-200',\n 'not-disabled:active:border-primary-800',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n 'flex',\n 'justify-center',\n 'items-center',\n 'text-grey-800',\n 'rounded-full',\n 'border-2',\n\n 'border-grey-200',\n 'bg-white',\n 'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n base: avatarRootStyles,\n variants: {\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12'],\n xl: ['size-16'],\n xxl: ['size-24']\n }\n }\n})\n\nconst StyledButton = styled('button', {\n base: [\n '[all:unset]',\n ...avatarRootStyles,\n 'not-disabled:active:bg-grey-200',\n 'not-disabled:active:border-primary-800',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-grey-100',\n 'not-disabled:hover:border-grey-800',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12'],\n xl: ['size-16'],\n xxl: ['size-24']\n }\n }\n})\n\ntype TAvatarProps = React.ComponentProps<\n typeof StyledDiv | typeof StyledButton\n> & { name?: string } & (\n | {\n onClick: React.MouseEventHandler<HTMLButtonElement>\n disabled?: boolean\n }\n | { onClick?: never; disabled?: never }\n )\n\nexport type TAvatarRootContext = {\n name?: TAvatarProps['name']\n size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n name: undefined,\n size: 'lg'\n})\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n const value = React.useMemo<TAvatarRootContext>(\n () => ({ name, size }),\n [name, size]\n )\n\n return (\n <AvatarRootContext.Provider value={value}>\n {children}\n </AvatarRootContext.Provider>\n )\n}\n\nexport const AvatarRoot = ({\n children,\n size = 'lg',\n name,\n disabled = false,\n onClick\n}: TAvatarProps) => (\n <AvatarRootProvider name={name} size={size}>\n {onClick ? (\n <StyledButton\n size={size}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n className={disabled ? 'cursor-auto' : 'cursor-pointer'}\n >\n {children}\n </StyledButton>\n ) : (\n <StyledDiv size={size}>{children}</StyledDiv>\n )}\n </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n Image: AvatarImage,\n Initial: AvatarInitial,\n Placeholder: AvatarPlaceholder,\n Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"2QASA,MAAMA,EAAmB,CACvB,OACA,iBACA,eACA,gBACA,eACA,WAEA,kBACA,WACA,iBACF,EAEMC,EAAYC,EAAO,MAAO,CAC9B,KAAMF,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,IAAK,CAAC,SAAS,CACjB,CACF,CACF,CAAC,EAEKG,EAAeD,EAAO,SAAU,CACpC,KAAM,CACJ,cACA,GAAGF,EACH,kCACA,yCACA,0CACA,sCACA,+EACA,4DACA,iCACA,iCACA,qCACA,8BACA,qBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,GAAI,CAAC,SAAS,EACd,IAAK,CAAC,SAAS,CACjB,CACF,CACF,CAAC,EAiBYI,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAAAA,EAChCH,CACH,CAEJ,EAEaI,EAAa,CAAC,CACzB,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAmB,CAAA,KAAME,EAAM,KAAMC,CACnCI,EAAAA,EACCR,EAAA,cAACF,EAAA,CACC,KAAMM,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,UAAWD,EAAW,cAAgB,gBAErCL,EAAAA,CACH,EAEAF,EAAA,cAACJ,EAAA,CAAU,KAAMQ,CAAOF,EAAAA,CAAS,CAErC,EAGWO,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}
|
|
@@ -28,11 +28,11 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<TBadgeProps, "r
|
|
|
28
28
|
Icon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
|
|
29
29
|
Text: ({ children, ...rest }: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
30
30
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
31
|
-
}, "size" | "
|
|
32
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
33
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
31
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
34
32
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
35
33
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
34
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
35
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
36
36
|
} & {
|
|
37
37
|
as?: React.ElementType;
|
|
38
38
|
}, "as"> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Flex as f}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{styled as w,Theme as k}from"../../styled.js";import{useCallbackRefState as y}from"../../utilities/hooks/useCallbackRef.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as a}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const T=w(f,{base:["justify-center","items-center","rounded-sm","min-w-
|
|
1
|
+
import*as e from"react";import{Flex as f}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{styled as w,Theme as k}from"../../styled.js";import{useCallbackRefState as y}from"../../utilities/hooks/useCallbackRef.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as a}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const T=w(f,{base:["justify-center","items-center","rounded-sm","min-w-0","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]},{enabledResponsiveVariants:!0}),j=e.forwardRef(({theme:s="info",emphasis:r="subtle",children:i,...o},b)=>{const{size:h,overflow:c,isOverflowing:d}=e.useContext(B),[l,p]=y();e.useImperativeHandle(b,()=>l);const g=l==null?void 0:l.textContent,u=E.includes(s),x=Object.keys(o).includes("onClick")||Object.keys(o).includes("href");return e.createElement(z,{hasTooltip:c==="ellipsis"&&d,label:g},e.createElement(k,{theme:C[s]},e.createElement(T,{role:"status",emphasis:r,size:h,...o,ref:p,isClickable:x&&!u},e.Children.map(i,t=>typeof t=="string"||typeof t=="number"?e.createElement(n,null,t):e.isValidElement(t)&&t.type===v?e.createElement(a,{...t.props}):t))))}),m=e.forwardRef(({size:s="sm",overflow:r="wrap",...i},o)=>e.createElement(O,{size:s,overflow:r},e.createElement(j,{...i,ref:o}))),I=Object.assign(m,{Icon:a,Text:n});m.displayName="Badge";export{I 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 { styled, Theme } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n colorSchemes as badgeColorSchemes,\n badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n Flex,\n {\n base: [\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'min-w-
|
|
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 { styled, Theme } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n colorSchemes as badgeColorSchemes,\n badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n Flex,\n {\n base: [\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'min-w-0',\n 'border',\n 'border-white',\n 'font-body',\n '*:not-last:mr-1'\n ],\n variants: {\n emphasis: {\n white: ['text-(--text-on-white)', 'bg-white'],\n subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n },\n size: {\n xs: ['px-1'],\n sm: ['px-1', 'py-0.5'],\n md: ['px-2', 'py-1']\n },\n isClickable: {\n true: ['cursor-pointer']\n },\n highlighted: {\n true: []\n }\n },\n compoundVariants: [\n {\n isClickable: true,\n emphasis: 'white',\n class: [\n 'hover:text-(--text-on-white)',\n 'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n isClickable: true,\n emphasis: 'subtle',\n class: [\n 'hover:bg-(--background-subtle-hover)',\n 'hover:text-(--text-subtle-hover)'\n ]\n },\n {\n isClickable: true,\n emphasis: 'bold',\n class: [\n 'hover:bg-(--background-bold-hover)',\n 'hover:text-(--text-bold)'\n ]\n },\n {\n emphasis: 'white',\n highlighted: true,\n class: [\n 'text-(--text-on-white)',\n 'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n emphasis: 'subtle',\n highlighted: true,\n class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n },\n {\n emphasis: 'bold',\n highlighted: true,\n class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n ({ theme = 'info', 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 label = badgeElRef?.textContent\n\n const isInfoOnly = badgeSemanticNames.includes(theme)\n\n const isClickable =\n Object.keys(rest).includes('onClick') ||\n Object.keys(rest).includes('href')\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <Theme theme={badgeColorSchemes[theme]}>\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n {...rest}\n ref={setBadgeElRef}\n isClickable={isClickable && !isInfoOnly}\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 </Theme>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nconst BadgeComponent = 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)\n\nexport const Badge = Object.assign(BadgeComponent, {\n Icon: BadgeIcon,\n Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","Theme","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"okBAgBA,MAAMA,EAAcC,EAClBC,EACA,CACE,KAAM,CACJ,iBACA,eACA,aACA,UACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,CAAA,CACR,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CACL,qCACA,0BACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EASMC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,IACpCZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,KAAA,OAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASd,CAAK,EAE9Ce,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEJ,EAAA,cAACiB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAAAA,EAEPb,EAAA,cAACkB,EAAA,CAAM,MAAOC,EAAkBlB,CAAK,CACnCD,EAAAA,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAE5Bd,EAAAA,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,KAAA,CAAO,EAE9BA,CACR,CACH,CACF,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CL,EAAA,cAACyB,EAAA,CAAc,KAAMnB,EAAM,SAAUC,GACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaqB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
declare const StyledBadgeText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
4
|
-
}, "size" | "
|
|
5
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
6
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
4
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
7
5
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
8
6
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
7
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
8
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
11
|
}, "as"> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Loader as p}from"../loader/Loader.js";import{styled as
|
|
1
|
+
import*as e from"react";import{Loader as p}from"../loader/Loader.js";import{styled as n}from"../../styled.js";import{getExternalAnchorProps as b}from"../../utilities/uri/index.js";const l=n("button",{base:["items-center","bg-[unset]","border-[unset]","rounded-md","cursor-pointer","flex","font-body","font-semibold","justify-center","px-[unset]","py-[unset]","no-underline","transition-all","duration-100","ease-out","whitespace-nowrap","w-max","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{primary:["[--base:var(--color-primary-800)]","[--interact:var(--color-primary-900)]","[--active:var(--color-primary-1000)]"],secondary:["[--base:var(--color-primary-1000)]","[--interact:var(--color-primary-1100)]","[--active:var(--color-primary-1200)]"],success:["[--base:var(--color-success)]","[--interact:var(--color-success-mid)]","[--active:var(--color-success-dark)]"],warning:["[--base:var(--color-warning)]","[--interact:var(--color-warning-mid)]","[--active:var(--color-warning-dark)]"],danger:["[--base:var(--color-danger)]","[--interact:var(--color-danger-mid)]","[--active:var(--color-danger-dark)]"],neutral:["[--base:white]","[--interact:rgba(255,255,255,0.9)]","[--active:rgba(255,255,255,0.75)]","[--text:var(--color-primary-800)]"]},appearance:{solid:["bg-(--base)","text-(--text,white)","disabled:opacity-30","disabled:cursor-not-allowed","not-disabled:hover:bg-(--interact)","not-disabled:hover:text-(--text,white)","not-disabled:focus:bg-(--interact)","not-disabled:focus:text-(--text,white)","not-disabled:active:bg-(--active)"],outline:["border","border-current","text-(--base)","disabled:opacity-30","disabled:cursor-not-allowed","not-disabled:hover:no-underline","not-disabled:hover:text-(--interact)","not-disabled:focus:no-underline","not-disabled:focus:text-(--interact)","not-disabled:active:text-(--active)"]},size:{sm:["text-sm/[1.53]","h-8","px-4","gap-2","[&_svg]:size-4"],md:["text-md/normal","h-10","px-8","gap-3","[&_svg]:size-5"],lg:["text-lg/normal","h-12","px-8","gap-3","[&_svg]:size-[22px]"],xl:["text-lg/normal","h-16","px-8","gap-3","[&_svg]:size-[22px]"]},isLoading:{true:["cursor-not-allowed opacity-60 pointer-events-none"]},fullWidth:{true:["w-full"],false:["w-max"]}},defaultVariants:{appearance:"solid",size:"md",theme:"primary"}},{enabledResponsiveVariants:!0}),u=n("span",{base:["items-center","flex","justify-center","invisible"],variants:{size:{sm:["gap-2"],md:["gap-3"],lg:["gap-3"],xl:["gap-3"]}},defaultVariants:{size:"md"}},{enabledResponsiveVariants:!0}),v=({size:a,children:r})=>e.createElement(e.Fragment,null,e.createElement(p,{className:"absolute"}),e.createElement(u,{size:a},r)),d=e.forwardRef(({children:a,as:r,href:t,isLoading:o=!1,onClick:c,disabled:i,...s},m)=>e.createElement(l,{as:r||(t?"a":void 0),...!i&&!o&&{href:t,onClick:c},isLoading:o,type:t?void 0:"button",disabled:i,...s,...b(t),ref:m},o?e.createElement(v,{size:s.size},a):a));d.displayName="Button";export{d as Button,l as StyledButton};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'border-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: ['text-sm
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'border-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'px-[unset]',\n 'py-[unset]',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: ['text-sm/[1.53]', 'h-8', 'px-4', 'gap-2', '[&_svg]:size-4'],\n md: ['text-md/normal', 'h-10', 'px-8', 'gap-3', '[&_svg]:size-5'],\n lg: ['text-lg/normal', 'h-12', 'px-8', 'gap-3', '[&_svg]:size-[22px]'],\n xl: ['text-lg/normal', 'h-16', 'px-8', 'gap-3', '[&_svg]:size-[22px]']\n },\n isLoading: {\n true: ['cursor-not-allowed opacity-60 pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nconst LoaderContentsWrapper = styled(\n 'span',\n {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, ...rest },\n ref\n ) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\n"],"names":["StyledButton","styled","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","disabled","rest","ref","getExternalAnchorProps"],"mappings":"oLAQO,MAAMA,EAAeC,EAC1B,SACA,CACE,KAAM,CACJ,eACA,aACA,iBACA,aACA,iBACA,OACA,YACA,gBACA,iBACA,aACA,aACA,eACA,iBACA,eACA,WACA,oBACA,QACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,oCACA,wCACA,sCACF,EACA,UAAW,CACT,qCACA,yCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,QAAS,CACP,gCACA,wCACA,sCACF,EACA,OAAQ,CACN,+BACA,uCACA,qCACF,EACA,QAAS,CACP,iBACA,qCACA,oCACA,mCACF,CACF,EACA,WAAY,CACV,MAAO,CACL,cACA,sBACA,sBACA,8BACA,qCACA,yCACA,qCACA,yCACA,mCACF,EACA,QAAS,CACP,SAEA,iBACA,gBACA,sBACA,8BACA,kCACA,uCACA,kCACA,uCACA,qCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,iBAAkB,MAAO,OAAQ,QAAS,gBAAgB,EAC/D,GAAI,CAAC,iBAAkB,OAAQ,OAAQ,QAAS,gBAAgB,EAChE,GAAI,CAAC,iBAAkB,OAAQ,OAAQ,QAAS,qBAAqB,EACrE,GAAI,CAAC,iBAAkB,OAAQ,OAAQ,QAAS,qBAAqB,CACvE,EACA,UAAW,CACT,KAAM,CAAC,mDAAmD,CAC5D,EACA,UAAW,CACT,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,EACA,gBAAiB,CACf,WAAY,QACZ,KAAM,KACN,MAAO,SACT,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEMC,EAAwBD,EAC5B,OACA,CACE,KAAM,CAAC,eAAgB,OAAQ,iBAAkB,WAAW,EAC5D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,CACd,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEME,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,CAAO,UAAU,UAAW,CAAA,EAC7BD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAOC,EAAAA,CAAS,CAC/C,EAYWG,EAASF,EAAM,WAC1B,CACE,CAAE,SAAAD,EAAU,GAAAI,EAAI,KAAAC,EAAM,UAAAC,EAAY,GAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAK,EACpEC,IAEAT,EAAA,cAACN,EAAA,CACC,GAAIS,IAAOC,EAAO,IAAM,QACvB,GAAI,CAACG,GAAY,CAACF,GAAa,CAAE,KAAAD,EAAM,QAAAE,CAAQ,EAChD,UAAWD,EACX,KAAOD,EAAkB,OAAX,SACd,SAAUG,EACT,GAAGC,EACH,GAAGE,EAAuBN,CAAI,EAC/B,IAAKK,CAAAA,EAEJJ,EACCL,EAAA,cAACH,EAAA,CAAW,KAAMW,EAAK,MAAOT,CAAS,EAEvCA,CAEJ,CAEJ,EAEAG,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Icon as
|
|
1
|
+
import*as e from"react";import{Icon as m}from"../icon/Icon.js";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as x}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";const p=l("span",{base:["inline-flex","items-center","px-1","grow","overflow-hidden","text-ellipsis","whitespace-nowrap","*:not-last:mr-1"]}),f={sm:"sm",md:"sm",lg:"md"},i=t=>{const s=e.useContext(a),{size:o}=s,r=e.useMemo(()=>x(o,n=>f[n]),[o]);return e.createElement(m,{...t,size:r})},C=({children:t,...s})=>{const o=e.Children.toArray(t),r=o.length<=1;return e.createElement(p,{...s},o.map((n,y)=>!r&&typeof n=="string"?e.createElement("span",{key:n,className:"overflow-hidden text-ellipsis whitespace-nowrap"},n):e.isValidElement(n)&&n.type===m?e.createElement(i,{key:"icon-".concat(y),...n.props}):n))},c=l("div",{base:["px-2","border","rounded-md","items-center","font-body","max-w-full","border-primary-800","text-primary-900","bg-primary-100","disabled:opacity-30","disabled:pointer-events-none"],variants:{size:{sm:["h-6","text-sm/[1.53]","capsize-[0.4056]"],md:["h-8","text-sm/[1.53]","capsize-[0.4056]"],lg:["h-10","text-md/normal","capsize-[0.3864]"]}}}),a=e.createContext({}),d=({size:t,children:s})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},s)},h=e.forwardRef(({size:t="md",...s},o)=>e.createElement(d,{size:t},e.createElement(c,{ref:o,size:t,...s}))),z=Object.assign(h,{Content:C,Icon:i});h.displayName="Chip";export{z as Chip,i as ChipIcon,a as ChipRootContext,d as ChipRootProvider,p as StyledChipContent,c as StyledRoot};
|
|
2
2
|
//# sourceMappingURL=Chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport {
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n '*:not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.useContext(ChipRootContext)\n const { size } = rootContext\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <span\n key={child}\n className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n >\n {child}\n </span>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n return <ChipIcon key={`icon-${index}`} {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled('div', {\n base: [\n 'px-2',\n 'border',\n 'rounded-md',\n 'items-center',\n 'font-body',\n 'max-w-full',\n 'border-primary-800',\n 'text-primary-900',\n 'bg-primary-100',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n sm: ['h-6', 'text-sm/[1.53]', 'capsize-[0.4056]'],\n md: ['h-8', 'text-sm/[1.53]', 'capsize-[0.4056]'],\n lg: ['h-10', 'text-md/normal', 'capsize-[0.3864]']\n }\n }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n size,\n children\n}: TChipRootProviderProps) => {\n const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n return (\n <ChipRootContext.Provider value={value}>\n {children}\n </ChipRootContext.Provider>\n )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot = React.forwardRef<HTMLDivElement, TChipRootProps>(\n ({ size = 'md', ...rest }, ref) => {\n return (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n )\n }\n)\n\nexport const Chip = Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStyledVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","StyledRoot","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"iOAMO,MAAMA,EAAoBC,EAAO,OAAQ,CAC9C,KAAM,CACJ,cACA,eACA,OACA,OACA,kBACA,gBACA,oBACA,iBACF,CACF,CAAC,EAEKC,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,CAAU,CAAA,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,EAAmB,CAAA,GAAGe,GAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAAC,OAAA,CACC,IAAKY,EACL,UAAU,iDAAA,EAETA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQ,OAAAgB,CAAAA,EAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaE,EAAanB,EAAO,MAAO,CACtC,KAAM,CACJ,OACA,SACA,aACA,eACA,YACA,aACA,qBACA,mBACA,iBACA,sBACA,8BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAO,iBAAkB,kBAAkB,EAChD,GAAI,CAAC,MAAO,iBAAkB,kBAAkB,EAChD,GAAI,CAAC,OAAQ,iBAAkB,kBAAkB,CACnD,CACF,CACF,CAAC,EAKYM,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1De,EAAmB,CAAC,CAC/B,KAAAb,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMQ,EAAQhB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOe,CAAAA,EAC9BR,CACH,CAEJ,EAIMS,EAAWjB,EAAM,WACrB,CAAC,CAAE,KAAAE,EAAO,KAAM,GAAGO,CAAK,EAAGS,IAEvBlB,EAAA,cAACe,GAAiB,KAAMb,CAAAA,EACtBF,EAAA,cAACc,EAAW,CAAA,IAAKI,EAAK,KAAMhB,EAAO,GAAGO,CAAAA,CAAM,CAC9C,CAGN,EAEaU,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASV,EACT,KAAMV,CACR,CAAC,EAEDoB,EAAS,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ok as
|
|
1
|
+
import{Ok as s}from"@atom-learning/icons";import*as d from"@radix-ui/react-toggle-group";import*as e from"react";import{Chip as t}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as l}from"../icon/Icon.js";import{styled as o}from"../../styled.js";const n=o(l,{base:["hidden"]}),b=o(t,{base:["flex","not-disabled:cursor-pointer","not-disabled:data-[state=on]:hover:bg-white","not-disabled:data-[state=on]:hover:text-primary-1000","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-grey-200","not-disabled:hover:border-current","not-disabled:hover:text-grey-1000","data-[state=off]:bg-white","data-[state=off]:border-grey-600","data-[state=off]:text-grey-800","data-[state=on]:[&_svg]:block"]}),m=({size:a="md",children:r,...i})=>e.createElement(d.Item,{...i,asChild:!0},e.createElement(b,{as:"button"},e.createElement(n,{is:s,size:a==="lg"?"md":"sm"}),e.createElement(t.Content,null,r)));export{m as ChipToggleGroupItem};
|
|
2
2
|
//# sourceMappingURL=ChipToggleGroupItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nconst StyledChipToggleIcon = styled(Icon, {\n base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n base: [\n 'flex',\n 'not-disabled:cursor-pointer',\n 'not-disabled:data-[state=on]:hover:bg-white',\n 'not-disabled:data-[state=on]:hover:text-primary-1000',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[
|
|
1
|
+
{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nconst StyledChipToggleIcon = styled(Icon, {\n base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n base: [\n 'flex',\n 'not-disabled:cursor-pointer',\n 'not-disabled:data-[state=on]:hover:bg-white',\n 'not-disabled:data-[state=on]:hover:text-primary-1000',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-grey-200',\n 'not-disabled:hover:border-current',\n 'not-disabled:hover:text-grey-1000',\n 'data-[state=off]:bg-white',\n 'data-[state=off]:border-grey-600',\n 'data-[state=off]:text-grey-800',\n 'data-[state=on]:[&_svg]:block'\n ]\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n size = 'md',\n children,\n ...rest\n}: TChipToggleGroupItem) => {\n return (\n <ToggleGroup.Item {...rest} asChild>\n <StyledChipToggleGroupItem as=\"button\">\n <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n <Chip.Content>{children}</Chip.Content>\n </StyledChipToggleGroupItem>\n </ToggleGroup.Item>\n )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","Chip","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"qQAQA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,KAAM,CAAC,QAAQ,CACjB,CAAC,EAEKC,EAA4BF,EAAOG,EAAM,CAC7C,KAAM,CACJ,OACA,8BACA,8CACA,uDACA,0CACA,sCACA,+EACA,4DACA,iCACA,iCACA,oCACA,oCACA,4BACA,mCACA,iCACA,+BACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,EACA,GAAGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACN,EAAA,CAA0B,GAAG,QAAA,EAC5BM,EAAA,cAACT,EAAA,CAAqB,GAAIW,EAAI,KAAML,IAAS,KAAO,KAAO,IAAM,CAAA,EACjEG,EAAA,cAACL,EAAK,QAAL,KAAcG,CAAS,CAC1B,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ComboboxInput as d}from"@reach/combobox";import*as e from"react";import{styled as n}from"../../styled.js";const o=n(d,{base:["bg-white","bg-(image:--bg-chevron)","bg-position-[right_--spacing(3)_top_50%,0_0]","[background-repeat:no-repeat,repeat-x]","bg-size-[--spacing(5)_auto,100%]","shadow-none","appearance-none","border","border-grey-700","rounded-md","box-border","text-grey-1000","cursor-text","block","font-body","h-10","pl-3","pr-10","transition-all","duration-100","ease-out","w-full","placeholder:opacity-100","placeholder:text-grey-700","focus-within:border-primary-800","focus-within:outline-none","disabled:bg-grey-200","disabled:cursor-not-allowed","disabled:text-grey-800"],variants:{size:{sm:["h-8","text-sm
|
|
1
|
+
import{ComboboxInput as d}from"@reach/combobox";import*as e from"react";import{styled as n}from"../../styled.js";const o=n(d,{base:["bg-white","bg-(image:--bg-chevron)","bg-position-[right_--spacing(3)_top_50%,0_0]","[background-repeat:no-repeat,repeat-x]","bg-size-[--spacing(5)_auto,100%]","shadow-none","appearance-none","border","border-grey-700","rounded-md","box-border","text-grey-1000","cursor-text","block","font-body","h-10","pl-3","pr-10","transition-all","duration-100","ease-out","w-full","placeholder:opacity-100","placeholder:text-grey-700","focus-within:border-primary-800","focus-within:outline-none","disabled:bg-grey-200","disabled:cursor-not-allowed","disabled:text-grey-800"],variants:{size:{sm:["h-8","text-sm/[1.7]"],md:["h-10","text-md/loose"],lg:["h-12","text-md/loose"]},state:{error:["border","border-danger"]}}}),b=e.forwardRef(({size:r="md",...t},a)=>e.createElement(o,{size:r,...t,ref:a}));export{b as ComboboxInput,o as StyledComboboxInput};
|
|
2
2
|
//# sourceMappingURL=ComboboxInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n base: [\n 'bg-white',\n 'bg-(image:--bg-chevron)',\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n '[background-repeat:no-repeat,repeat-x]',\n 'bg-size-[--spacing(5)_auto,100%]',\n 'shadow-none',\n 'appearance-none',\n 'border',\n 'border-grey-700',\n 'rounded-md',\n 'box-border',\n 'text-grey-1000',\n 'cursor-text',\n 'block',\n 'font-body',\n 'h-10',\n 'pl-3',\n 'pr-10',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'w-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n\n variants: {\n size: {\n sm: ['h-8', 'text-sm
|
|
1
|
+
{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n base: [\n 'bg-white',\n 'bg-(image:--bg-chevron)',\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n '[background-repeat:no-repeat,repeat-x]',\n 'bg-size-[--spacing(5)_auto,100%]',\n 'shadow-none',\n 'appearance-none',\n 'border',\n 'border-grey-700',\n 'rounded-md',\n 'box-border',\n 'text-grey-1000',\n 'cursor-text',\n 'block',\n 'font-body',\n 'h-10',\n 'pl-3',\n 'pr-10',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'w-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n\n variants: {\n size: {\n sm: ['h-8', 'text-sm/[1.7]'],\n md: ['h-10', 'text-md/loose'],\n lg: ['h-12', 'text-md/loose']\n },\n state: {\n error: ['border', 'border-danger']\n }\n }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ size = 'md', ...rest }, ref) => (\n <StyledComboboxInput\n size={size as React.ComponentProps<typeof StyledComboboxInput>['size']}\n {...rest}\n ref={ref}\n />\n))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","ComboboxInput","React","size","rest","ref"],"mappings":"uHAKaA,EAAsBC,EAAOC,EAAmB,CAC3D,KAAM,CACJ,WACA,0BACA,+CACA,yCACA,mCACA,cACA,kBACA,SACA,kBACA,aACA,aACA,iBACA,cACA,QACA,YACA,OACA,OACA,QACA,iBACA,eACA,WACA,SACA,0BACA,4BACA,kCACA,4BACA,uBACA,8BACA,wBACF,EAEA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAO,eAAe,EAC3B,GAAI,CAAC,OAAQ,eAAe,EAC5B,GAAI,CAAC,OAAQ,eAAe,CAC9B,EACA,MAAO,CACL,MAAO,CAAC,SAAU,eAAe,CACnC,CACF,CACF,CAAC,EAMYC,EAAgBC,EAAM,WAGjC,CAAC,CAAE,KAAAC,EAAO,KAAM,GAAGC,CAAK,EAAGC,IAC3BH,EAAA,cAACJ,EACC,CAAA,KAAMK,EACL,GAAGC,EACJ,IAAKC,CAAAA,CACP,CACD"}
|
|
@@ -43,11 +43,11 @@ export declare const EmptyState: {
|
|
|
43
43
|
}) => React.JSX.Element;
|
|
44
44
|
Body: (props: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
45
45
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
46
|
-
}, "size" | "
|
|
47
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
48
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
46
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
49
47
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
50
48
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
49
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
50
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
51
51
|
} & {
|
|
52
52
|
as?: React.ElementType;
|
|
53
53
|
}, "as"> & {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
declare const StyledEmptyStateBody: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
4
|
-
}, "size" | "
|
|
5
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
6
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
4
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
7
5
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
8
6
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
7
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
8
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
11
|
}, "as"> & {
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import type { Override } from '../../utilities';
|
|
3
3
|
export declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
|
|
5
|
-
}, "size" | "
|
|
5
|
+
}, "size" | "noCapsize" | "weight"> & {
|
|
6
6
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | "xxl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "xxl">>) | undefined;
|
|
7
7
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
8
8
|
weight?: ("bold" | "medium" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "medium">>) | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as
|
|
1
|
+
import*as e from"react";import{styled as n}from"../../styled.js";const t=n("h2",{base:["m-0"],variants:{size:{xs:["font-body","text-md/normal","capsize-[0.3864]"],sm:["font-body","text-lg/[1.14]","capsize-[0.2078]"],md:["font-display","text-xl/[1.14]","tracking-[0.01em]","capsize-before-[0.2114]","capsize-after-[0.2634]"],lg:["font-display","text-2xl/[1.08]","tracking-[0.01em]","capsize-before-[0.1405]","capsize-after-[0.2405]"],xl:["font-display","text-3xl/[1.12]","capsize-before-[0.16]","capsize-after-[0.26]"],xxl:["font-display","text-4xl/none","capsize-before-[0.1]","capsize-after-[0.2]"]},noCapsize:{true:["before:hidden!","after:hidden!"]},weight:{medium:["font-medium"],bold:["font-bold"]}}},{enabledResponsiveVariants:!0}),a=e.forwardRef(({size:i="md",weight:o="bold",...s},d)=>e.createElement(t,{ref:d,size:i,weight:o,...s}));a.displayName="Heading";export{a as Heading,t as StyledHeading};
|
|
2
2
|
//# sourceMappingURL=Heading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const StyledHeading = styled(\n 'h2',\n {\n base: ['m-0'],\n variants: {\n size: {\n xs: ['font-body', 'text-md
|
|
1
|
+
{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const StyledHeading = styled(\n 'h2',\n {\n base: ['m-0'],\n variants: {\n size: {\n xs: ['font-body', 'text-md/normal', 'capsize-[0.3864]'],\n sm: ['font-body', 'text-lg/[1.14]', 'capsize-[0.2078]'],\n md: [\n 'font-display',\n 'text-xl/[1.14]',\n 'tracking-[0.01em]',\n 'capsize-before-[0.2114]',\n 'capsize-after-[0.2634]'\n ],\n lg: [\n 'font-display',\n 'text-2xl/[1.08]',\n 'tracking-[0.01em]',\n 'capsize-before-[0.1405]',\n 'capsize-after-[0.2405]'\n ],\n xl: [\n 'font-display',\n 'text-3xl/[1.12]',\n 'capsize-before-[0.16]',\n 'capsize-after-[0.26]'\n ],\n xxl: [\n 'font-display',\n 'text-4xl/none',\n 'capsize-before-[0.1]',\n 'capsize-after-[0.2]'\n ]\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n },\n weight: {\n medium: ['font-medium'],\n bold: ['font-bold']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n | 'h1'\n | 'h2'\n | 'h3'\n | 'h4'\n | 'h5'\n | 'h6'\n | React.ComponentType\n | React.ElementType\n }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n )\n)\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","Heading","React","size","weight","remainingProps","ref"],"mappings":"iEAKO,MAAMA,EAAgBC,EAC3B,KACA,CACE,KAAM,CAAC,KAAK,EACZ,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,YAAa,iBAAkB,kBAAkB,EACtD,GAAI,CAAC,YAAa,iBAAkB,kBAAkB,EACtD,GAAI,CACF,eACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,kBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,kBACA,wBACA,sBACF,EACA,IAAK,CACH,eACA,gBACA,uBACA,qBACF,CACF,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAiBaC,EAAUC,EAAM,WAC3B,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EAAc,CAAA,IAAKO,EAAK,KAAMH,EAAM,OAAQC,EAAS,GAAGC,CAAgB,CAAA,CAE7E,EAEAJ,EAAQ,YAAc"}
|
|
@@ -19,11 +19,11 @@ export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<
|
|
|
19
19
|
}>;
|
|
20
20
|
declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
21
21
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
22
|
-
}, "size" | "
|
|
23
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
24
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
22
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
25
23
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
26
24
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
25
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
26
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
27
27
|
} & {
|
|
28
28
|
as?: React.ElementType;
|
|
29
29
|
}, "as"> & {
|
|
@@ -15,11 +15,11 @@ export declare const KeyboardShortcut: React.ForwardRefExoticComponent<React.HTM
|
|
|
15
15
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
declare const StyledKeyboardShortcutIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
17
17
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
18
|
-
}, "size" | "
|
|
19
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
20
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
18
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
21
19
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
22
20
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
21
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
22
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
23
23
|
} & {
|
|
24
24
|
as?: React.ElementType;
|
|
25
25
|
}, "as"> & {
|
|
@@ -13,11 +13,11 @@ export declare const KeyboardShortcut: import("react").ForwardRefExoticComponent
|
|
|
13
13
|
Indicator: {
|
|
14
14
|
(props: Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
15
15
|
ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
|
|
16
|
-
}, "size" | "
|
|
17
|
-
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
18
|
-
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
16
|
+
}, "size" | "noCapsize" | "weight" | "family"> & {
|
|
19
17
|
size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
|
|
20
18
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
19
|
+
weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
|
|
20
|
+
family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
|
|
21
21
|
} & {
|
|
22
22
|
as?: import("react").ElementType;
|
|
23
23
|
}, "as"> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as t}from"../../styled.js";
|
|
1
|
+
import*as e from"react";import{styled as t}from"../../styled.js";const d=t("label",{base:["text-grey-900","font-body","m-0"],variants:{size:{sm:["text-sm/[1.53]","capsize-[0.4056]"],md:["text-md/normal","capsize-[0.3864]"]},type:{block:["block","font-semibold"],inline:["flex","font-normal","max-w-max"]},align:{start:[],center:[]},direction:{reverse:[],row:[]},appearance:{standard:[],modern:[]}},compoundVariants:[{type:"inline",align:"start",class:["items-start"]},{type:"inline",align:"center",class:["items-center"]},{type:"inline",direction:"reverse",class:["flex-row-reverse"]},{type:"inline",direction:"row",class:["flex-row"]},{type:"block",appearance:"modern",class:["font-normal"]}]}),p=t("span",{base:["text-danger","ml-1","font-normal"]}),a=({align:n="start",as:r="label",direction:i="row",size:s="md",type:l="block",children:o,required:c,...m})=>e.createElement(d,{as:r,size:s,type:l,align:n,direction:i,...m},o,c&&e.createElement(p,{"aria-hidden":!0},"*"));a.displayName="Label";export{a as Label};
|
|
2
2
|
//# sourceMappingURL=Label.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nconst StyledLabel = styled('label', {\n base: ['text-grey-900', 'font-body', 'm-0'],\n variants: {\n size: {\n sm: ['text-sm/[1.53]', 'capsize-[0.4056]'],\n md: ['text-md/normal', 'capsize-[0.3864]']\n },\n type: {\n block: ['block', 'font-semibold'],\n inline: ['flex', 'font-normal', 'max-w-max']\n },\n align: { start: [], center: [] },\n direction: { reverse: [], row: [] },\n appearance: { standard: [], modern: [] }\n },\n compoundVariants: [\n {\n type: 'inline',\n align: 'start',\n class: ['items-start']\n },\n {\n type: 'inline',\n align: 'center',\n class: ['items-center']\n },\n {\n type: 'inline',\n direction: 'reverse',\n class: ['flex-row-reverse']\n },\n {\n type: 'inline',\n direction: 'row',\n class: ['flex-row']\n },\n {\n type: 'block',\n appearance: 'modern',\n class: ['font-normal']\n }\n ]\n})\n\nconst StyledAsterisk = styled('span', {\n base: ['text-danger', 'ml-1', 'font-normal']\n})\n\nexport type LabelProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledLabel>,\n {\n as?: 'label' | 'legend'\n required?: boolean\n }\n>\n\nexport const Label = ({\n align = 'start',\n as = 'label',\n direction = 'row',\n size = 'md',\n type = 'block',\n children,\n required,\n ...rest\n}: LabelProps) => (\n <StyledLabel\n as={as}\n size={size}\n type={type}\n align={align}\n direction={direction}\n {...rest}\n >\n {children}\n {required && <StyledAsterisk aria-hidden>*</StyledAsterisk>}\n </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"names":["StyledLabel","styled","StyledAsterisk","Label","align","as","direction","size","type","children","required","rest","React"],"mappings":"iEAKA,MAAMA,EAAcC,EAAO,QAAS,CAClC,KAAM,CAAC,gBAAiB,YAAa,KAAK,EAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,CAC3C,EACA,KAAM,CACJ,MAAO,CAAC,QAAS,eAAe,EAChC,OAAQ,CAAC,OAAQ,cAAe,WAAW,CAC7C,EACA,MAAO,CAAE,MAAO,GAAI,OAAQ,CAAA,CAAG,EAC/B,UAAW,CAAE,QAAS,GAAI,IAAK,CAAA,CAAG,EAClC,WAAY,CAAE,SAAU,GAAI,OAAQ,CAAA,CAAG,CACzC,EACA,iBAAkB,CAChB,CACE,KAAM,SACN,MAAO,QACP,MAAO,CAAC,aAAa,CACvB,EACA,CACE,KAAM,SACN,MAAO,SACP,MAAO,CAAC,cAAc,CACxB,EACA,CACE,KAAM,SACN,UAAW,UACX,MAAO,CAAC,kBAAkB,CAC5B,EACA,CACE,KAAM,SACN,UAAW,MACX,MAAO,CAAC,UAAU,CACpB,EACA,CACE,KAAM,QACN,WAAY,SACZ,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAEKC,EAAiBD,EAAO,OAAQ,CACpC,KAAM,CAAC,cAAe,OAAQ,aAAa,CAC7C,CAAC,EAUYE,EAAQ,CAAC,CACpB,MAAAC,EAAQ,QACR,GAAAC,EAAK,QACL,UAAAC,EAAY,MACZ,KAAAC,EAAO,KACP,KAAAC,EAAO,QACP,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACZ,EAAA,CACC,GAAIK,EACJ,KAAME,EACN,KAAMC,EACN,MAAOJ,EACP,UAAWE,EACV,GAAGK,CAEHF,EAAAA,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as n from"react";import{styled as
|
|
1
|
+
import*as n from"react";import{styled as d}from"../../styled.js";import{getExternalAnchorProps as c}from"../../utilities/uri/index.js";const t=d("a",{base:["bg-[unset]","border-[unset]","px-[unset]","py-[unset]","text-primary-800","cursor-pointer","font-body","no-underline","focus:text-primary-900","focus:underline","hover:text-primary-900","hover:underline","active:text-primary-1000","disabled:cursor-not-allowed","disabled:opacity-30","disabled:pointer-events-none","[p_>_&]:after:content-none","[p_>_&]:before:content-none","[p_>_&]:text-[100%]/none","[h1>&]:after:content-none","[h1>&]:before:content-none","[h1>&]:text-[100%]/none","[h2>&]:after:content-none","[h2>&]:before:content-none","[h2>&]:text-[100%]/none","[h3>&]:after:content-none","[h3>&]:before:content-none","[h3>&]:text-[100%]/none","[h4>&]:after:content-none","[h4>&]:before:content-none","[h4>&]:text-[100%]/none","[li>&]:after:content-none","[li>&]:before:content-none","[li>&]:text-[100%]/none","[em>&]:after:content-none","[em>&]:before:content-none","[em>&]:text-[100%]/none"],variants:{size:{xs:["text-xs/[1.6]","capsize-[0.4364]"],sm:["text-sm/[1.53]","capsize-[0.4056]"],md:["text-md/normal","capsize-[0.3864]"],lg:["text-lg/[1.52]","capsize-[0.3983]"],xl:["text-xl/[1.42]","capsize-[0.3506]"]},noCapsize:{true:["before:hidden!","after:hidden!"]}},defaultVariants:{size:"md"}},{enabledResponsiveVariants:!0}),o=n.forwardRef(({as:r,disabled:a,href:e,...i},s)=>n.createElement(t,{as:r||(e?void 0:"button"),noCapsize:e?void 0:!0,href:e,...a&&{disabled:!0},...i,...c(e),ref:s}));o.displayName="Link";export{o as Link,t 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 '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledLink = styled(\n 'a',\n {\n base: [\n 'bg-[unset]',\n 'border-[unset]',\n 'px-[unset]',\n 'py-[unset]',\n 'text-primary-800',\n 'cursor-pointer',\n 'font-body',\n 'no-underline',\n 'focus:text-primary-900',\n 'focus:underline',\n 'hover:text-primary-900',\n 'hover:underline',\n 'active:text-primary-1000',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n '[p_>_&]:after:content-none',\n '[p_>_&]:before:content-none',\n '[p_>_&]:text-[100%]/none',\n '[h1>&]:after:content-none',\n '[h1>&]:before:content-none',\n '[h1>&]:text-[100%]/none',\n '[h2>&]:after:content-none',\n '[h2>&]:before:content-none',\n '[h2>&]:text-[100%]/none',\n '[h3>&]:after:content-none',\n '[h3>&]:before:content-none',\n '[h3>&]:text-[100%]/none',\n '[h4>&]:after:content-none',\n '[h4>&]:before:content-none',\n '[h4>&]:text-[100%]/none',\n '[li>&]:after:content-none',\n '[li>&]:before:content-none',\n '[li>&]:text-[100%]/none',\n '[em>&]:after:content-none',\n '[em>&]:before:content-none',\n '[em>&]:text-[100%]/none'\n ],\n variants: {\n size: {\n xs: ['text-xs/[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm/[1.53]', 'capsize-[0.4056]'],\n md: ['text-md/normal', 'capsize-[0.3864]'],\n lg: ['text-lg/[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl/[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype LinkProps = Override<\n React.ComponentProps<typeof StyledLink>,\n NavigatorActions & { disabled?: boolean }\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n ({ as, disabled, href, ...rest }, ref) => (\n <StyledLink\n as={as || (!href ? 'button' : undefined)}\n noCapsize={!href ? true : undefined}\n href={href}\n {...(disabled && { disabled: true })}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n />\n )\n)\n\nLink.displayName = 'Link'\n"],"names":["StyledLink","styled","Link","React","as","disabled","href","rest","ref","getExternalAnchorProps"],"mappings":"uIAOa,MAAAA,EAAaC,EACxB,IACA,CACE,KAAM,CACJ,aACA,iBACA,aACA,aACA,mBACA,iBACA,YACA,eACA,yBACA,kBACA,yBACA,kBACA,2BACA,8BACA,sBACA,+BACA,6BACA,8BACA,2BACA,4BACA,6BACA,0BACA,4BACA,6BACA,0BACA,4BACA,6BACA,0BACA,4BACA,6BACA,0BACA,4BACA,6BACA,0BACA,4BACA,6BACA,yBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,gBAAiB,kBAAkB,EACxC,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,CAC3C,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAOC,EAAM,WACxB,CAAC,CAAE,GAAAC,EAAI,SAAAC,EAAU,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAChCL,EAAA,cAACH,EAAA,CACC,GAAII,IAAQE,EAAkB,OAAX,UACnB,UAAYA,EAAc,OAAP,GACnB,KAAMA,EACL,GAAID,GAAY,CAAE,SAAU,EAAK,EACjC,GAAGE,EACH,GAAGE,EAAuBH,CAAI,EAC/B,IAAKE,CAAAA,CACP,CAEJ,EAEAN,EAAK,YAAc"}
|
|
@@ -7,10 +7,10 @@ export declare const StyledLi: React.ForwardRefExoticComponent<Omit<Omit<React.D
|
|
|
7
7
|
export declare const StyledList: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
|
|
8
8
|
ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
|
|
9
9
|
}, "theme" | "size" | "noCapsize" | "ordered"> & {
|
|
10
|
-
ordered?: boolean | undefined;
|
|
11
|
-
theme?: "primary" | undefined;
|
|
12
10
|
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
13
11
|
noCapsize?: boolean | undefined;
|
|
12
|
+
ordered?: boolean | undefined;
|
|
13
|
+
theme?: "primary" | undefined;
|
|
14
14
|
} & {
|
|
15
15
|
as?: React.ElementType;
|
|
16
16
|
}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{styled as
|
|
1
|
+
import*as t from"react";import{styled as s}from"../../styled.js";const i=s("li",{base:["last:mb-0","not-last:mb-2"]}),r=s("ul",{base:["list-inside","font-body"],variants:{size:{xs:["text-xs/[1.6]","capsize-[0.4364]"],sm:["text-sm/[1.53]","capsize-[0.4056]"],md:["text-md/normal","capsize-[0.3864]"],lg:["text-lg/[1.52]","capsize-[0.3983]"],xl:["text-xl/[1.42]","capsize-[0.3506]"]},noCapsize:{true:["before:hidden!","after:hidden!"]},ordered:{true:["pl-4","list-decimal","[&_>_li]:pl-1"],false:["pl-3","list-disc","[&_>_li]:pl-2"]},theme:{primary:["marker:text-primary-800"]}}}),l=t.forwardRef(({size:a="md",noCapsize:d=!0,ordered:e=!1,...m},o)=>t.createElement(r,{ref:o,as:e?"ol":"ul",ordered:e,size:a,noCapsize:d,...m}));l.Item=i;export{l as List,i as StyledLi,r as StyledList};
|
|
2
2
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n base: ['list-inside', 'font-body'],\n variants: {\n size: {\n xs: ['text-xs/[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm/[1.53]', 'capsize-[0.4056]'],\n md: ['text-md/normal', 'capsize-[0.3864]'],\n lg: ['text-lg/[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl/[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n },\n ordered: {\n true: ['pl-4', 'list-decimal', '[&_>_li]:pl-1'],\n false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n },\n theme: {\n primary: ['marker:text-primary-800']\n }\n }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n ordered?: boolean\n}\n\ntype ListType = ReturnType<\n typeof React.forwardRef<HTMLUListElement, ListProps>\n> & {\n Item: typeof StyledLi\n}\n\nexport const List = React.forwardRef<HTMLUListElement, ListProps>(\n (\n { size = 'md', noCapsize = true, ordered = false, ...remainingProps },\n ref\n ) => (\n <StyledList\n ref={ref}\n as={ordered ? 'ol' : 'ul'}\n ordered={ordered}\n size={size}\n noCapsize={noCapsize}\n {...remainingProps}\n />\n )\n) as ListType\n\nList.Item = StyledLi\n"],"names":["StyledLi","styled","StyledList","List","React","size","noCapsize","ordered","remainingProps","ref"],"mappings":"iEAIa,MAAAA,EAAWC,EAAO,KAAM,CACnC,KAAM,CAAC,YAAa,eAAe,CACrC,CAAC,EAEYC,EAAaD,EAAO,KAAM,CACrC,KAAM,CAAC,cAAe,WAAW,EACjC,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,gBAAiB,kBAAkB,EACxC,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,EACzC,GAAI,CAAC,iBAAkB,kBAAkB,CAC3C,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAQ,eAAgB,eAAe,EAC9C,MAAO,CAAC,OAAQ,YAAa,eAAe,CAC9C,EACA,MAAO,CACL,QAAS,CAAC,yBAAyB,CACrC,CACF,CACF,CAAC,EAYYE,EAAOC,EAAM,WACxB,CACE,CAAE,KAAAC,EAAO,KAAM,UAAAC,EAAY,GAAM,QAAAC,EAAU,GAAO,GAAGC,CAAe,EACpEC,IAEAL,EAAA,cAACF,EAAA,CACC,IAAKO,EACL,GAAIF,EAAU,KAAO,KACrB,QAASA,EACT,KAAMF,EACN,UAAWC,EACV,GAAGE,CAAAA,CACN,CAEJ,EAEAL,EAAK,KAAOH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as o from"react";import{styled as t}from"../../../styled.js";const r=t("div",{base:["bg-grey-200","rounded-md","text-grey-1000","font-mono","text-sm
|
|
1
|
+
import*as o from"react";import{styled as t}from"../../../styled.js";const r=t("div",{base:["bg-grey-200","rounded-md","text-grey-1000","font-mono","text-sm/[1.4]","my-4","p-3"]}),m=({node:e})=>o.createElement(r,{as:"pre"},e.value);export{m as MarkdownCode};
|
|
2
2
|
//# sourceMappingURL=MarkdownCode.js.map
|