@atom-learning/components 6.0.0-beta.42 → 6.0.0-beta.44
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/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/radio-button/RadioButton.js +1 -1
- package/dist/components/radio-button/RadioButton.js.map +1 -1
- package/dist/components/section-message/SectionMessage.js +1 -1
- package/dist/components/section-message/SectionMessage.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as r from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as
|
|
1
|
+
import*as r from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as m}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as b}from"../text/Text.js";const d=l("div",{base:["flex","text-grey-1000","transition-[background,border-color]","duration-100","ease-out","w-full"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-blue-800","rounded-md"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1","rounded-md"]},size:{sm:["h-8"],md:["h-10"],lg:["h-12"],xl:["h-16"]},disabled:{true:["cursor-not-allowed","opacity-30"]},state:{error:[]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]});d.displayName="InputBackground";const f=l(b,{base:["appearance-none","border-none","bg-none","bg-transparent","shadow-none","box-border","focus:outline-none","px-3","size-full","placeholder:opacity-100","placeholder:text-grey-700"]}),g={sm:"sm",md:"md",lg:"md",xl:"lg"},i=r.forwardRef(({type:e="text",size:t,...o},n)=>{const a=r.useMemo(()=>m(t,s=>g[s]),[t]);return r.createElement(f,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:a,...o})});i.displayName="InputText";const u=r.forwardRef(({className:e,size:t="md",appearance:o="standard",state:n,disabled:a,style:s,...c},p)=>r.createElement(d,{size:t,appearance:o,disabled:a,state:n,className:e,style:s},r.createElement(i,{size:t,ref:p,disabled:a,...c})));u.displayName="Input";export{u as Input,d as InputBackground,i as InputText};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1',\n 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...(rest as any)}\n />\n )\n }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' | 'state' | 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string | number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","StyledInputText","Text","toTextSize","InputText","React","type","size","rest","ref","textSize","overrideStyledVariantValue","s","Input","className","appearance","state","disabled","style"],"mappings":"iOAQa,MAAAA,EAAkBC,EAAO,MAAO,CAC3C,KAAM,CACJ,OACA,iBACA,uCACA,eACA,WACA,QACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,+BACA,YACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,mBACA,YACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CAAC,qBAAsB,YAAY,CAC3C,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAEDD,EAAgB,YAAc,kBAE9B,MAAME,EAAkBD,EAAOE,EAAM,CACnC,KAAM,CACJ,kBACA,cACA,UACA,iBACA,cACA,aACA,qBACA,OACA,YACA,0BACA,2BACF,CACF,CAAC,EAcKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAAQ,CACzC,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA2BJ,EAAOK,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACL,CAAI,CACP,EAEA,OACEF,EAAA,cAACJ,EAAA,CACC,IAAKQ,EACL,GAAG,QACH,KAAMH,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMI,EACL,GAAIF,CAAAA,CACP,CAEJ,CACF,EAEAJ,EAAU,YAAc,YAiBX,MAAAS,EAAQR,EAAM,WACzB,CACE,CACE,UAAAS,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAGV,CACL,EACAC,IAGEJ,EAAA,cAACN,EACC,CAAA,KAAMQ,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,UAAWF,EACX,MAAOI,CAAAA,EAEPb,EAAA,cAACD,EAAU,CAAA,KAAMG,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAM,CAAA,CACjE,CAGN,EAEAK,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"@radix-ui/react-radio-group";import*as
|
|
1
|
+
import*as t from"@radix-ui/react-radio-group";import*as a from"react";import{styled as r}from"../../styled.js";const o=r(t.Item,{base:["items-center","appearance-none","bg-transparent","border","border-grey-800","rounded-full","text-white","cursor-pointer","flex","justify-center","p-0","size-4","transition-all","duration-50","ease-out","focus:outline-2","focus:outline-offset-1","focus:outline-primary-800","focus:outline-solid","data-[state=checked]:bg-primary-800","data-[state=checked]:border-primary-800","disabled:bg-grey-200","disabled:border-grey-800","disabled:cursor-not-allowed","disabled:text-grey-800","disabled:data-[state=checked]:bg-grey-800","disabled:data-[state=checked]:border-grey-800"],variants:{size:{md:["size-4"],lg:["-mt-1","size-6"]}}},{enabledResponsiveVariants:!0}),d=r(t.Indicator,{base:["size-1.5","rounded-full","bg-current","absolute"],variants:{size:{md:["size-1.5"],lg:["size-3"]}}},{enabledResponsiveVariants:!0}),s=({size:e,...i})=>a.createElement(o,{...i,size:e},a.createElement(d,{size:e}));s.displayName="RadioButton";export{s as RadioButton};
|
|
2
2
|
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n RadioGroup.Item,\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-full',\n 'text-white',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'p-0',\n 'size-4',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'focus:outline-2',\n 'focus:outline-offset-1',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'disabled:bg-grey-200',\n 'disabled:border-grey-800',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n variants: {\n size: {\n md: ['size-4'],\n lg: ['-mt-1', 'size-6']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n RadioGroup.Indicator,\n {\n base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n variants: {\n size: {\n md: ['size-1.5'],\n lg: ['size-3']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"+GAMA,MAAMA,EAAoBC,EACxBC,EAAW,KACX,CACE,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,eACA,aACA,iBACA,OACA,iBACA,MACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n RadioGroup.Item,\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-full',\n 'text-white',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'p-0',\n 'size-4',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'focus:outline-2',\n 'focus:outline-offset-1',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'disabled:bg-grey-200',\n 'disabled:border-grey-800',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800',\n 'disabled:data-[state=checked]:bg-grey-800',\n 'disabled:data-[state=checked]:border-grey-800'\n ],\n variants: {\n size: {\n md: ['size-4'],\n lg: ['-mt-1', 'size-6']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n RadioGroup.Indicator,\n {\n base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n variants: {\n size: {\n md: ['size-1.5'],\n lg: ['size-3']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"+GAMA,MAAMA,EAAoBC,EACxBC,EAAW,KACX,CACE,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,eACA,aACA,iBACA,OACA,iBACA,MACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,yBACA,4CACA,+CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAS,QAAQ,CACxB,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EACtBC,EAAW,UACX,CACE,KAAM,CAAC,WAAY,eAAgB,aAAc,UAAU,EAC3D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAWaE,EAAc,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,CAClCE,EAAAA,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAM,CAAA,CAC/B,EAIJD,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as h}from"./SectionMessageDescription.js";import{SectionMessageDismiss as f}from"./SectionMessageDismiss.js";import{SectionMessageIcon as d}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as x}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const M=a(c,{base:["relative","rounded-md","flex","shrink","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),S=({children:s,...r})=>{const{theme:i,hasIcon:o,hasDismiss:n}=p();return t.createElement(M,{...r,theme:i,hasIcon:o,hasDismiss:n},t.createElement(g,{gap:3,justify:"space-between",className:"grow"},s))},e=({theme:s="info",...r})=>t.createElement(m,null,t.createElement(l,{theme:s},t.createElement(S,{...r})));e.Title=b,e.Description=h,e.Icon=d,e.Dismiss=f,e.Content=u,e.Actions=x;export{e as SectionMessage};
|
|
1
|
+
import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as h}from"./SectionMessageDescription.js";import{SectionMessageDismiss as f}from"./SectionMessageDismiss.js";import{SectionMessageIcon as d}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as x}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const M=a(c,{base:["relative","rounded-md","flex","shrink-0","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),S=({children:s,...r})=>{const{theme:i,hasIcon:o,hasDismiss:n}=p();return t.createElement(M,{...r,theme:i,hasIcon:o,hasDismiss:n},t.createElement(g,{gap:3,justify:"space-between",className:"grow"},s))},e=({theme:s="info",...r})=>t.createElement(m,null,t.createElement(l,{theme:s},t.createElement(S,{...r})));e.Title=b,e.Description=h,e.Icon=d,e.Dismiss=f,e.Content=u,e.Actions=x;export{e as SectionMessage};
|
|
2
2
|
//# sourceMappingURL=SectionMessage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n SectionMessageProvider,\n useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n SectionMessageActions,\n SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n base: [\n 'relative',\n 'rounded-md',\n 'flex',\n 'shrink',\n 'min-h-12',\n 'p-4',\n 'border',\n 'border-white'\n ],\n variants: {\n theme: {\n success: ['bg-success-light', 'text-success-dark'],\n warning: ['bg-warning-light', 'text-warning-text'],\n error: ['bg-danger-light', 'text-danger-dark'],\n neutral: ['bg-grey-100', 'text-grey-1000'],\n info: ['bg-info-light', 'text-info-dark']\n },\n hasIcon: {\n true: ['pl-10']\n },\n hasDismiss: {\n true: ['pr-12']\n }\n }\n})\n\nconst SectionMessageRoot = ({\n children,\n ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n className?: string\n}) => {\n const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n return (\n <StyledSectionMessage\n {...rest}\n theme={theme}\n hasIcon={hasIcon}\n hasDismiss={hasDismiss}\n >\n <Flex gap={3} justify=\"space-between\" className=\"grow\">\n {children}\n </Flex>\n </StyledSectionMessage>\n )\n}\n\nexport type SectionMessageTheme =\n | 'success'\n | 'warning'\n | 'error'\n | 'neutral'\n | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n typeof SectionMessageRoot\n> & {\n theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n theme = 'info',\n ...rest\n}: SectionMessageProps) => (\n <TooltipProvider>\n <SectionMessageProvider theme={theme}>\n <SectionMessageRoot {...rest} />\n </SectionMessageProvider>\n </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"8pBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,
|
|
1
|
+
{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n SectionMessageProvider,\n useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n SectionMessageActions,\n SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n base: [\n 'relative',\n 'rounded-md',\n 'flex',\n 'shrink-0',\n 'min-h-12',\n 'p-4',\n 'border',\n 'border-white'\n ],\n variants: {\n theme: {\n success: ['bg-success-light', 'text-success-dark'],\n warning: ['bg-warning-light', 'text-warning-text'],\n error: ['bg-danger-light', 'text-danger-dark'],\n neutral: ['bg-grey-100', 'text-grey-1000'],\n info: ['bg-info-light', 'text-info-dark']\n },\n hasIcon: {\n true: ['pl-10']\n },\n hasDismiss: {\n true: ['pr-12']\n }\n }\n})\n\nconst SectionMessageRoot = ({\n children,\n ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n className?: string\n}) => {\n const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n return (\n <StyledSectionMessage\n {...rest}\n theme={theme}\n hasIcon={hasIcon}\n hasDismiss={hasDismiss}\n >\n <Flex gap={3} justify=\"space-between\" className=\"grow\">\n {children}\n </Flex>\n </StyledSectionMessage>\n )\n}\n\nexport type SectionMessageTheme =\n | 'success'\n | 'warning'\n | 'error'\n | 'neutral'\n | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n typeof SectionMessageRoot\n> & {\n theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n theme = 'info',\n ...rest\n}: SectionMessageProps) => (\n <TooltipProvider>\n <SectionMessageProvider theme={theme}>\n <SectionMessageRoot {...rest} />\n </SectionMessageProvider>\n </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"8pBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,WACA,WACA,MACA,SACA,cACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,MAAO,CAAC,kBAAmB,kBAAkB,EAC7C,QAAS,CAAC,cAAe,gBAAgB,EACzC,KAAM,CAAC,gBAAiB,gBAAgB,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAO,CAChB,EACA,WAAY,CACV,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,EACA,GAAGC,CACL,IAEM,CACJ,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,IAEvC,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,GAEZE,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,UAAU,QAC7CP,CACH,CACF,CAEJ,EAeaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,CAC7BI,EAAAA,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAM,CAAA,CAChC,CACF,EAGFO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import c from"clsx";import
|
|
1
|
+
import c from"clsx";import p from"react";import{useStickyColumnsStyle as i}from"./useStickyColumnsCss.js";const r=({children:n,numberOfStickyColumns:t=0,className:_,...f})=>{const[e,y]=p.useState(!1),o=p.useRef(null),{columnsStyle:l}=i({numberOfStickyColumns:t,wrapperRef:o});return p.createElement("div",{onScroll:s=>{const h=s.currentTarget.scrollLeft>0;h!==e&&y(h)},role:"scrollbar",ref:o,style:l,className:c("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td,&_th]:bg-inherit",_,t>=1&&["[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2"],t>=2&&["[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2"],t>=3&&["[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2"],t>=4&&["[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2"],t===1&&e&&["[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]"],t===2&&e&&["[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]"],t===3&&e&&["[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]"],t===4&&e&&["[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]"]),...f},n)};export{r as TableStickyColumnsContainer};
|
|
2
2
|
//# sourceMappingURL=TableStickyColumnsContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n className,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n className?: string\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsStyle } = useStickyColumnsStyle({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <div\n onScroll={handleScroll}\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"scrollbar\"\n ref={wrapperRef}\n style={columnsStyle}\n className={clsx(\n 'overflow-auto',\n 'max-w-full',\n 'relative',\n 'overscroll-x-contain',\n '[&_td,&_th]:bg-inherit',\n className,\n numberOfStickyColumns >= 1 && [\n '[&_td,&_th
|
|
1
|
+
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n className,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n className?: string\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsStyle } = useStickyColumnsStyle({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <div\n onScroll={handleScroll}\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"scrollbar\"\n ref={wrapperRef}\n style={columnsStyle}\n className={clsx(\n 'overflow-auto',\n 'max-w-full',\n 'relative',\n 'overscroll-x-contain',\n '[&_td,&_th]:bg-inherit',\n className,\n numberOfStickyColumns >= 1 && [\n '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky',\n '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)',\n '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)',\n '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2'\n ],\n numberOfStickyColumns >= 2 && [\n '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky',\n '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)',\n '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)',\n '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2'\n ],\n numberOfStickyColumns >= 3 && [\n '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky',\n '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)',\n '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)',\n '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2'\n ],\n numberOfStickyColumns >= 4 && [\n '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky',\n '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)',\n '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)',\n '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2'\n ],\n numberOfStickyColumns === 1 &&\n hasScroll && [\n '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n ],\n numberOfStickyColumns === 2 &&\n hasScroll && [\n '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n ],\n numberOfStickyColumns === 3 &&\n hasScroll && [\n '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n ],\n numberOfStickyColumns === 4 &&\n hasScroll && [\n '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n ]\n )}\n {...restProps}\n >\n {children}\n </div>\n )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","className","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsStyle","useStickyColumnsStyle","event","newHasScroll","clsx"],"mappings":"0GAKa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,UAAAC,EACA,GAAGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,aAAAE,CAAa,EAAIC,EAAsB,CAC7C,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAAC,MAAA,CACC,SATkBI,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBP,GACnBC,EAAaM,CAAY,CAE7B,EAMI,KAAK,YACL,IAAKJ,EACL,MAAOC,EACP,UAAWI,EACT,gBACA,aACA,WACA,uBACA,yBACAV,EACAD,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,EACFH,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,EACFH,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,EACFH,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,CACJ,EACC,GAAGD,CAAAA,EAEHH,CACH,CAEJ"}
|