@atom-learning/components 6.0.0-beta.37 → 6.0.0-beta.38
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Loader as
|
|
1
|
+
import*as e from"react";import{Loader as p}from"../loader/Loader.js";import{styled as s}from"../../styled.js";import{getExternalAnchorProps as b}from"../../utilities/uri/index.js";const l=s("button",{base:["items-center","bg-[unset]","rounded-md","cursor-pointer","flex","font-body","font-semibold","justify-center","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)]","[--text:var(--color-grey-800)]"],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","leading-[1.53]","h-8","px-4","gap-2","[&_svg]:size-4"],md:["text-md","leading-normal","h-10","px-8","gap-3","[&_svg]:size-5"],lg:["text-lg","leading-normal","h-12","px-8","gap-3","[&_svg]:size-[22px]"],xl:["text-lg","leading-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}),v=s("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}),g=({size:a,children:r})=>e.createElement(e.Fragment,null,e.createElement(p,{className:"absolute"}),e.createElement(v,{size:a},r)),d=e.forwardRef(({children:a,as:r,href:t,isLoading:i=!1,onClick:c,disabled:o,...n},m)=>e.createElement(l,{as:r||(t?"a":void 0),...!o&&!i&&{href:t,onClick:c},isLoading:i,type:t?void 0:"button",disabled:o,...n,...b(t),ref:m},i?e.createElement(g,{size:n.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 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\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 '[--text:var(--color-grey-800)]'\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-
|
|
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 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\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 '[--text:var(--color-grey-800)]'\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 '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: [\n 'text-sm',\n 'leading-[1.53]',\n 'h-8',\n 'px-4',\n 'gap-2',\n '[&_svg]:size-4'\n ],\n md: [\n 'text-md',\n 'leading-normal',\n 'h-10',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-5'\n ],\n lg: [\n 'text-lg',\n 'leading-normal',\n 'h-12',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ],\n xl: [\n 'text-lg',\n 'leading-normal',\n 'h-16',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ]\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,aACA,iBACA,OACA,YACA,gBACA,iBACA,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,uCACA,gCACF,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,SACA,iBACA,gBACA,sBACA,8BACA,kCACA,uCACA,kCACA,uCACA,qCACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,UACA,iBACA,MACA,OACA,QACA,gBACF,EACA,GAAI,CACF,UACA,iBACA,OACA,OACA,QACA,gBACF,EACA,GAAI,CACF,UACA,iBACA,OACA,OACA,QACA,qBACF,EACA,GAAI,CACF,UACA,iBACA,OACA,OACA,QACA,qBACF,CACF,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"}
|