@atom-learning/components 6.5.3 → 6.6.0-beta.0
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/accordion/AccordionContent.js +1 -0
- package/dist/components/accordion/AccordionContent.js.map +1 -1
- package/dist/components/accordion/AccordionTrigger.js +1 -0
- package/dist/components/accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/action-icon/ActionIcon.js +1 -0
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/alert-dialog/AlertDialogContent.js +1 -0
- package/dist/components/alert-dialog/AlertDialogContent.js.map +1 -1
- package/dist/components/badge/Badge.colorscheme.config.js.map +1 -1
- package/dist/components/calendar/Day.js +2 -0
- package/dist/components/calendar/Day.js.map +1 -1
- package/dist/components/carousel/CarouselPagination.js +1 -0
- package/dist/components/carousel/CarouselPagination.js.map +1 -1
- package/dist/components/carousel/CarouselSlider.js +1 -1
- package/dist/components/carousel/CarouselSlider.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/combobox/ComboboxInput.js +1 -1
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/combobox/ComboboxPopover.js +1 -0
- package/dist/components/combobox/ComboboxPopover.js.map +1 -1
- package/dist/components/data-table/DataTableGlobalFilter.js.map +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -0
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/field-wrapper/FieldWrapper.js.map +1 -1
- package/dist/components/input/Input.js +3 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/loader/Loader.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/progress-bar/ProgressBar.js +1 -0
- package/dist/components/progress-bar/ProgressBar.js.map +1 -1
- package/dist/components/radio-button/RadioButton.js +1 -27
- package/dist/components/radio-button/RadioButton.js.map +1 -1
- package/dist/components/radio-card/RadioCard.js +1 -0
- package/dist/components/radio-card/RadioCard.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js +2 -0
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/components/slider/SliderSteps.js +1 -1
- package/dist/components/slider/SliderSteps.js.map +1 -1
- package/dist/components/switch/Switch.js +1 -0
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/table/TableCell.js +1 -0
- package/dist/components/table/TableCell.js.map +1 -1
- package/dist/components/textarea/Textarea.js +1 -0
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/tile/Tile.js +1 -0
- package/dist/components/tile/Tile.js.map +1 -1
- package/dist/components/toast/Toast.js +1 -0
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +1 -0
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/tree/TreeIcon.js +1 -1
- package/dist/components/tree/TreeIcon.js.map +1 -1
- package/dist/components/tree/TreeListItem.js +1 -1
- package/dist/components/tree/TreeListItem.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n base: [\n 'w-full',\n 'bg-(--base-1)',\n 'overflow-hidden',\n 'data-[state=open]:rounded-b-sm',\n 'data-[state=open]:rounded-t-none',\n 'motion-safe:data-[state=open]:animate-accordion-open',\n 'motion-safe:data-[state=closed]:animate-accordion-close'\n ]\n})\n\nexport const AccordionContent = ({\n children,\n className,\n ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n <StyledContent {...remainingProps}>\n <CSSWrapper className={className}>{children}</CSSWrapper>\n </StyledContent>\n)\n"],"mappings":";;;;;AAMA,IAAM,IAAgB,EAAO,GAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAoB,EAC/B,aACA,cACA,GAAG,QAEH,kBAAA,cAAC,GAAkB,GACjB,kBAAA,cAAC,GAAD,EAAuB,cAAkC,EAAtB,EAAsB,CAC3C"}
|
|
1
|
+
{"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n base: [\n 'border-none',\n 'w-full',\n 'bg-(--base-1)',\n 'overflow-hidden',\n 'data-[state=open]:rounded-b-sm',\n 'data-[state=open]:rounded-t-none',\n 'motion-safe:data-[state=open]:animate-accordion-open',\n 'motion-safe:data-[state=closed]:animate-accordion-close'\n ]\n})\n\nexport const AccordionContent = ({\n children,\n className,\n ...remainingProps\n}: React.ComponentProps<typeof StyledContent>) => (\n <StyledContent {...remainingProps}>\n <CSSWrapper className={className}>{children}</CSSWrapper>\n </StyledContent>\n)\n"],"mappings":";;;;;AAMA,IAAM,IAAgB,EAAO,GAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAoB,EAC/B,aACA,cACA,GAAG,QAEH,kBAAA,cAAC,GAAkB,GACjB,kBAAA,cAAC,GAAD,EAAuB,cAAkC,EAAtB,EAAsB,CAC3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport {\n ColorScheme,\n TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n base: [\n 'transition-transform',\n 'duration-300',\n '[[data-state=open]>&]:rotate-180',\n '[[data-state=closed]>&]:rotate-0'\n ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n base: [\n 'py-3',\n 'px-4',\n 'w-full',\n 'flex',\n 'justify-between',\n 'items-center',\n 'cursor-pointer',\n 'bg-(--interactive-2)',\n 'text-(--interactive-foreground)',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--interactive-3)',\n 'not-disabled:focus-visible:bg-(--interactive-3)',\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-(--interactive-3)',\n 'data-[state=open]:rounded-b-none',\n 'data-[state=open]:rounded-t-sm',\n 'data-[state=closed]:rounded-sm'\n ],\n variants: {\n arrowPosition: {\n left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n right: []\n }\n }\n})\n\nexport const AccordionTrigger = ({\n children,\n colorScheme = {},\n asChild,\n arrowPosition = 'right',\n ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n colorScheme?: TcolorScheme\n}) => (\n <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n <StyledTrigger\n asChild={asChild}\n arrowPosition={arrowPosition}\n {...remainingProps}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n </>\n )}\n </StyledTrigger>\n </ColorScheme>\n)\n"],"mappings":";;;;;;;AAYA,IAAM,IAAe,EAAO,GAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAgB,EAAO,GAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;GAAc;EAClD,OAAO,EAAE;EACV,EACF;CACF,CAAC,EAEW,KAAoB,EAC/B,aACA,iBAAc,EAAE,EAChB,YACA,mBAAgB,SAChB,GAAG,QAIH,kBAAA,cAAC,GAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;CAenD,EAdZ,kBAAA,cAAC,GAAD;CACW;CACM;CACf,GAAI;CAUU,EARb,IACC,IAEA,kBAAA,cAAA,EAAA,UAAA,MACG,GACD,kBAAA,cAAC,GAAD;CAAc,IAAI;CAAa,eAAY;CAAsB,CAAA,CAChE,CAES,CACJ"}
|
|
1
|
+
{"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport {\n ColorScheme,\n TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n base: [\n 'transition-transform',\n 'duration-300',\n '[[data-state=open]>&]:rotate-180',\n '[[data-state=closed]>&]:rotate-0'\n ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n base: [\n 'border-none',\n 'py-3',\n 'px-4',\n 'w-full',\n 'flex',\n 'justify-between',\n 'items-center',\n 'cursor-pointer',\n 'bg-(--interactive-2)',\n 'text-(--interactive-foreground)',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--interactive-3)',\n 'not-disabled:focus-visible:bg-(--interactive-3)',\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-(--interactive-3)',\n 'data-[state=open]:rounded-b-none',\n 'data-[state=open]:rounded-t-sm',\n 'data-[state=closed]:rounded-sm'\n ],\n variants: {\n arrowPosition: {\n left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n right: []\n }\n }\n})\n\nexport const AccordionTrigger = ({\n children,\n colorScheme = {},\n asChild,\n arrowPosition = 'right',\n ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n colorScheme?: TcolorScheme\n}) => (\n <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n <StyledTrigger\n asChild={asChild}\n arrowPosition={arrowPosition}\n {...remainingProps}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n </>\n )}\n </StyledTrigger>\n </ColorScheme>\n)\n"],"mappings":";;;;;;;AAYA,IAAM,IAAe,EAAO,GAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAgB,EAAO,GAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;GAAc;EAClD,OAAO,EAAE;EACV,EACF;CACF,CAAC,EAEW,KAAoB,EAC/B,aACA,iBAAc,EAAE,EAChB,YACA,mBAAgB,SAChB,GAAG,QAIH,kBAAA,cAAC,GAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;CAenD,EAdZ,kBAAA,cAAC,GAAD;CACW;CACM;CACf,GAAI;CAUU,EARb,IACC,IAEA,kBAAA,cAAA,EAAA,UAAA,MACG,GACD,kBAAA,cAAC,GAAD;CAAc,IAAI;CAAa,eAAY;CAAsB,CAAA,CAChE,CAES,CACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n neutral: [\n '[--solid-base:var(--color-white)]',\n '[--solid-interact:var(--color-grey-100)]',\n '[--solid-active:var(--color-grey-200)]',\n '[--solid-text:var(--color-grey-1200)]',\n '[--base:var(--color-grey-700)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1100)]'\n ],\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n primaryDark: [\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 white: [\n '[--base:var(--color-white)]',\n '[--interact:var(--color-white)]',\n '[--active:var(--color-white)]'\n ]\n },\n appearance: {\n simple: [\n 'bg-transparent',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n outline: [\n 'bg-[unset]',\n 'border',\n 'border-current',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n solid: [\n 'bg-(--solid-base,var(--base))',\n 'text-(--solid-text,white)',\n 'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n 'not-disabled:hover:text-(--solid-text,white)',\n 'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n 'not-disabled:focus:text-(--solid-text,white)',\n 'not-disabled:active:bg-(--solid-active,var(--active))'\n ]\n },\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12']\n },\n isRounded: {\n true: ['rounded-full']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n // Polymorphic props: can be either button or anchor element\n // Type assertion needed due to TypeScript limitations with polymorphic components\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? undefined : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...(optionalLinkProps as any)}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref as any}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string]\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAe,EACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GAChB;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAWY,IAAa,EAAM,YAE5B,EACE,aACA,WAAQ,WACR,gBAAa,UACb,UAAO,MACP,UACA,SACA,aACA,gBAAa,IACb,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,YAAY,EAAK,YAAY,wCAAwC,EAAW;AAEjH,GAAU,EAAM,SAAS,MAAM,EAAS,KAAK,GAAG,EAAyB;CAIzE,IAAM,IAAoB,IACrB;EACC,IAAI;EACJ,MAAM,IAAW,KAAA,IAAY;EAC7B,SAAS,KAAA;EACT,iBAAiB,CAAC,CAAC;EACpB,GACA,EAAE,MAAM,UAAU;AAEvB,QACE,kBAAA,cAAC,GAAD;EACc;EACL;EACM;EAiCU,EA/BvB,kBAAA,cAAC,GAAD;EACE,GAAK;EACL,GAAI,EAAuB,EAAK;EAChC,GAAI;EACJ,cAAY;EACL;EACK;EACN;EACD;EACK;EAqBG,EAnBZ,EAAM,SAAS,IAAI,IAAW,MAAU;AAGvC,MAAI,CAAC,EAAM,eAAe,EAAM,CAC9B,OAAU,MAAM,EAAyB;AAQ3C,SALA,EACE,EAAM,SAAS,GACf,oBAAoB,GAAO,KAAK,6BAA6B,EAAK,YAAY,2BAA2B,EAAW,cACrH,EAEM,EAAM,aACX,GACA,EACE,MAAM,EAAkB,IACzB,CACF;GACD,CACW,CACQ;EAG9B;AAED,EAAW,cAAc"}
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'rounded-md',\n 'box-border',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n neutral: [\n '[--solid-base:var(--color-white)]',\n '[--solid-interact:var(--color-grey-100)]',\n '[--solid-active:var(--color-grey-200)]',\n '[--solid-text:var(--color-grey-1200)]',\n '[--base:var(--color-grey-700)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1100)]'\n ],\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n primaryDark: [\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 white: [\n '[--base:var(--color-white)]',\n '[--interact:var(--color-white)]',\n '[--active:var(--color-white)]'\n ]\n },\n appearance: {\n simple: [\n 'bg-transparent',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n outline: [\n 'bg-[unset]',\n 'border',\n 'border-current',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n solid: [\n 'bg-(--solid-base,var(--base))',\n 'text-(--solid-text,white)',\n 'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n 'not-disabled:hover:text-(--solid-text,white)',\n 'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n 'not-disabled:focus:text-(--solid-text,white)',\n 'not-disabled:active:bg-(--solid-active,var(--active))'\n ]\n },\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12']\n },\n isRounded: {\n true: ['rounded-full']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n // Polymorphic props: can be either button or anchor element\n // Type assertion needed due to TypeScript limitations with polymorphic components\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? undefined : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...(optionalLinkProps as any)}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref as any}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string]\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAe,EACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GAChB;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAWY,IAAa,EAAM,YAE5B,EACE,aACA,WAAQ,WACR,gBAAa,UACb,UAAO,MACP,UACA,SACA,aACA,gBAAa,IACb,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,YAAY,EAAK,YAAY,wCAAwC,EAAW;AAEjH,GAAU,EAAM,SAAS,MAAM,EAAS,KAAK,GAAG,EAAyB;CAIzE,IAAM,IAAoB,IACrB;EACC,IAAI;EACJ,MAAM,IAAW,KAAA,IAAY;EAC7B,SAAS,KAAA;EACT,iBAAiB,CAAC,CAAC;EACpB,GACA,EAAE,MAAM,UAAU;AAEvB,QACE,kBAAA,cAAC,GAAD;EACc;EACL;EACM;EAiCU,EA/BvB,kBAAA,cAAC,GAAD;EACE,GAAK;EACL,GAAI,EAAuB,EAAK;EAChC,GAAI;EACJ,cAAY;EACL;EACK;EACN;EACD;EACK;EAqBG,EAnBZ,EAAM,SAAS,IAAI,IAAW,MAAU;AAGvC,MAAI,CAAC,EAAM,eAAe,EAAM,CAC9B,OAAU,MAAM,EAAyB;AAQ3C,SALA,EACE,EAAM,SAAS,GACf,oBAAoB,GAAO,KAAK,6BAA6B,EAAK,YAAY,2BAA2B,EAAW,cACrH,EAEM,EAAM,aACX,GACA,EACE,MAAM,EAAkB,IACzB,CACF;GACD,CACW,CACQ;EAG9B;AAED,EAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n base: [\n 'bg-alpha-600',\n 'top-0',\n 'right-0',\n 'bottom-0',\n 'left-0',\n 'fixed',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-fade-in',\n 'motion-safe:data-[state=closed]:animate-fade-out'\n ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'rounded-md',\n 'shadow-xl',\n 'left-1/2',\n 'max-w-[90vw]',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'focus:outline-none',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n sm: ['w-95'],\n md: ['w-120'],\n lg: ['w-150']\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...remainingProps} />\n </Portal>\n)\n"],"mappings":";;;;AAKA,IAAM,IAA2B,EAAO,GAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EACI,IAA2B,EAAO,GAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACF,CAAC,EAEW,KAAsB,EACjC,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAA,KAA2B,EAC5B,kBAAA,cAAC,GAAD;CAAgC;CAAM,GAAI;CAAkB,CAAA,CACrD"}
|
|
1
|
+
{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n base: [\n 'bg-alpha-600',\n 'top-0',\n 'right-0',\n 'bottom-0',\n 'left-0',\n 'fixed',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-fade-in',\n 'motion-safe:data-[state=closed]:animate-fade-out'\n ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'rounded-md',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'max-w-[90vw]',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'focus:outline-none',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n sm: ['w-95'],\n md: ['w-120'],\n lg: ['w-150']\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...remainingProps\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...remainingProps} />\n </Portal>\n)\n"],"mappings":";;;;AAKA,IAAM,IAA2B,EAAO,GAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EACI,IAA2B,EAAO,GAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACF,CAAC,EAEW,KAAsB,EACjC,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAA,KAA2B,EAC5B,kBAAA,cAAC,GAAD;CAAgC;CAAM,GAAI;CAAkB,CAAA,CACrD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (
|
|
1
|
+
{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (c: string, overrides: Record<string, string> = {}) => ({\n '--text-subtle': `var(--color-${c}-1000)`,\n '--background-subtle': `var(--color-${c}-200)`,\n '--text-subtle-hover': `var(--color-${c}-1100)`,\n '--background-subtle-hover': `var(--color-${c}-300)`,\n '--text-bold': 'white',\n '--background-bold': `var(--color-${c}-800)`,\n '--background-bold-hover': `var(--color-${c}-900)`,\n '--text-on-white': `var(--color-${c}-800)`,\n ...overrides\n})\n\n/*\n\t•\tSemantic themes\n*/\nconst info = {\n '--text-subtle': 'var(--color-info-mid)',\n '--background-subtle': 'var(--color-info-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-info)',\n '--text-on-white': 'var(--color-info)'\n}\nconst neutral = {\n '--text-subtle': 'var(--color-grey-900)',\n '--background-subtle': 'var(--color-grey-100)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-grey-800)',\n '--text-on-white': 'var(--color-grey-800)'\n}\nconst success = {\n '--text-subtle': 'var(--color-success-mid)',\n '--background-subtle': 'var(--color-success-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-success)',\n '--text-on-white': 'var(--color-success)'\n}\nconst danger = {\n '--text-subtle': 'var(--color-danger-mid)',\n '--background-subtle': 'var(--color-danger-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-danger)',\n '--text-on-white': 'var(--color-danger)'\n}\nconst warning = {\n '--text-subtle': 'var(--color-warning-text)',\n '--background-subtle': 'var(--color-warning-light)',\n '--text-bold': 'var(--color-grey-1000)',\n '--background-bold': 'var(--color-warning)',\n '--text-on-white': 'var(--color-warning)'\n}\n\n/*\n\t•\tNon-semantic themes\n*/\nexport const badgeSemanticNames = [\n 'info',\n 'neutral',\n 'success',\n 'danger',\n 'warning'\n]\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n primary: createScheme('primary'),\n grey: createScheme('grey'),\n blue: createScheme('blue'),\n pink: createScheme('pink'),\n purple: createScheme('purple', {\n '--text-on-white': 'var(--color-purple-700)'\n }),\n cyan: createScheme('cyan'),\n green: createScheme('green'),\n magenta: createScheme('magenta'),\n red: createScheme('red', {\n '--background-subtle-hover': 'var(--color-red-400)'\n }),\n teal: createScheme('teal'),\n orange: createScheme('orange', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-orange-600)',\n '--background-bold-hover': 'var(--color-orange-700)',\n '--text-on-white': 'var(--color-orange-1000)'\n }),\n yellow: createScheme('yellow', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-yellow-500)',\n '--background-bold-hover': 'var(--color-yellow-600)',\n '--text-on-white': 'var(--color-yellow-900)'\n }),\n lime: createScheme('lime', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-lime-600)',\n '--background-bold-hover': 'var(--color-lime-700)',\n '--text-on-white': 'var(--color-lime-900)'\n }),\n lapis: createScheme('lapis', {\n '--background-bold': 'var(--color-lapis-700)',\n '--text-on-white': 'var(--color-lapis-700)'\n }),\n maroon: createScheme('maroon', {\n '--text-on-white': 'var(--color-maroon-700)'\n }),\n marsh: createScheme('marsh', { '--text-on-white': 'var(--color-marsh-700)' })\n}\n"],"mappings":";AAGA,IAAM,KAAgB,GAAW,IAAoC,EAAE,MAAM;CAC3E,iBAAiB,eAAe,EAAE;CAClC,uBAAuB,eAAe,EAAE;CACxC,uBAAuB,eAAe,EAAE;CACxC,6BAA6B,eAAe,EAAE;CAC9C,eAAe;CACf,qBAAqB,eAAe,EAAE;CACtC,2BAA2B,eAAe,EAAE;CAC5C,mBAAmB,eAAe,EAAE;CACpC,GAAG;CACJ,GAKK,IAAO;CACX,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAS;CACb,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EACK,IAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;CACpB,EAKY,IAAqB;CAChC;CACA;CACA;CACA;CACA;CACD,EACY,IAAe;CAC1B;CACA;CACA;CACA;CACA;CACA,SAAS,EAAa,UAAU;CAChC,MAAM,EAAa,OAAO;CAC1B,MAAM,EAAa,OAAO;CAC1B,MAAM,EAAa,OAAO;CAC1B,QAAQ,EAAa,UAAU,EAC7B,mBAAmB,2BACpB,CAAC;CACF,MAAM,EAAa,OAAO;CAC1B,OAAO,EAAa,QAAQ;CAC5B,SAAS,EAAa,UAAU;CAChC,KAAK,EAAa,OAAO,EACvB,6BAA6B,wBAC9B,CAAC;CACF,MAAM,EAAa,OAAO;CAC1B,QAAQ,EAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,QAAQ,EAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,MAAM,EAAa,QAAQ;EACzB,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;EACpB,CAAC;CACF,OAAO,EAAa,SAAS;EAC3B,qBAAqB;EACrB,mBAAmB;EACpB,CAAC;CACF,QAAQ,EAAa,UAAU,EAC7B,mBAAmB,2BACpB,CAAC;CACF,OAAO,EAAa,SAAS,EAAE,mBAAmB,0BAA0B,CAAC;CAC9E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Day = styled('button', {\n base: [\n 'rounded-full',\n 'text-grey-900',\n 'cursor-pointer',\n 'font-body',\n 'text-sm',\n 'size-8',\n 'transition-all',\n 'duration-75',\n 'hover:bg-grey-200',\n 'active:bg-primary-800',\n 'active:text-white',\n 'focus:outline-2',\n 'focus:outline-offset-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-default',\n 'disabled:opacity-30'\n ],\n variants: {\n isSelected: {\n true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n },\n isToday: {\n true: ['bg-grey-200']\n },\n isOutsideMonth: {\n true: ['text-grey-600']\n }\n }\n})\n"],"mappings":";;AAEA,IAAa,IAAM,EAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;GAAa,EAC/D;EACD,SAAS,EACP,MAAM,CAAC,cAAc,EACtB;EACD,gBAAgB,EACd,MAAM,CAAC,gBAAgB,EACxB;EACF;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Day = styled('button', {\n base: [\n 'bg-transparent',\n 'border-none',\n 'rounded-full',\n 'text-grey-900',\n 'cursor-pointer',\n 'font-body',\n 'text-sm',\n 'size-8',\n 'transition-all',\n 'duration-75',\n 'hover:bg-grey-200',\n 'active:bg-primary-800',\n 'active:text-white',\n 'focus:outline-2',\n 'focus:outline-offset-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-default',\n 'disabled:opacity-30'\n ],\n variants: {\n isSelected: {\n true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n },\n isToday: {\n true: ['bg-grey-200']\n },\n isOutsideMonth: {\n true: ['text-grey-600']\n }\n }\n})\n"],"mappings":";;AAEA,IAAa,IAAM,EAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;GAAa,EAC/D;EACD,SAAS,EACP,MAAM,CAAC,cAAc,EACtB;EACD,gBAAgB,EACd,MAAM,CAAC,gBAAgB,EACxB;EACF;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n base: [\n 'justify-center',\n '[&_button]:[[class*=selected]]:bg-primary-800',\n '[&_button]:bg-grey-600',\n '[&_button]:cursor-pointer',\n '[&_button]:duration-100',\n '[&_button]:ease-in',\n '[&_button]:focus:bg-primary-900',\n '[&_button]:hover:bg-primary-900',\n '[&_button]:mx-1',\n '[&_button]:p-1',\n '[&_button]:rounded-[50%]',\n '[&_button]:size-3',\n '[&_button]:transition-all'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAqB,EAAO,GAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n base: [\n 'justify-center',\n '[&_button]:[[class*=selected]]:bg-primary-800',\n '[&_button]:bg-grey-600',\n '[&_button]:border-none',\n '[&_button]:cursor-pointer',\n '[&_button]:duration-100',\n '[&_button]:ease-in',\n '[&_button]:focus:bg-primary-900',\n '[&_button]:hover:bg-primary-900',\n '[&_button]:mx-1',\n '[&_button]:p-1',\n '[&_button]:rounded-[50%]',\n '[&_button]:size-3',\n '[&_button]:transition-all'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAqB,EAAO,GAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { Slider as n } from "pure-react-carousel";
|
|
|
4
4
|
//#region src/components/carousel/CarouselSlider.tsx
|
|
5
5
|
var r = ({ children: r, className: i, overflow: a, ...o }) => /* @__PURE__ */ t.createElement(n, {
|
|
6
6
|
...o,
|
|
7
|
-
className: String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]
|
|
7
|
+
className: e(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, a && "overflow-visible", i)
|
|
8
8
|
}, r);
|
|
9
9
|
//#endregion
|
|
10
10
|
export { r as CarouselSlider };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n ...rest\n}: React.PropsWithChildren<\n typeof BaseSlider & {\n tabIndex?: number\n className?: string\n overflow?: boolean\n }\n>) => (\n <BaseSlider\n {...rest}\n className={\n String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]
|
|
1
|
+
{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n ...rest\n}: React.PropsWithChildren<\n typeof BaseSlider & {\n tabIndex?: number\n className?: string\n overflow?: boolean\n }\n>) => (\n <BaseSlider\n {...rest}\n className={clsx(\n String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`,\n overflow && 'overflow-visible',\n className\n )}\n >\n {children}\n </BaseSlider>\n)\n"],"mappings":";;;;AAIA,IAAa,KAAkB,EAC7B,aACA,cACA,aACA,GAAG,QAQH,kBAAA,cAAC,GAAD;CACE,GAAI;CACJ,WAAW,EACT,OAAO,GAAG,qVACV,KAAY,oBACZ,EACD;CAGU,EADV,EACU"}
|
|
@@ -6,7 +6,7 @@ import { Minus as i, Ok as a } from "@atom-learning/icons";
|
|
|
6
6
|
import * as o from "@radix-ui/react-checkbox";
|
|
7
7
|
//#region src/components/checkbox/Checkbox.tsx
|
|
8
8
|
var s = e(o.Root, {
|
|
9
|
-
base: /* @__PURE__ */ "appearance-none.relative.border.border-grey-800.rounded-[3px].text-white.bg-white.cursor-pointer.size-4.flex.items-center.justify-center.transition-all.duration-50.ease-out.shrink-0.not-disabled:before:-inset-2.not-disabled:before:-z-1.not-disabled:before:absolute.not-disabled:before:bg-primary-300.not-disabled:before:content-[''].not-disabled:before:duration-125.not-disabled:before:ease-in-out.not-disabled:before:opacity-0.not-disabled:before:rounded-[50%].not-disabled:before:scale-0.not-disabled:before:transition-[opacity,scale].not-disabled:hover:before:opacity-100.not-disabled:hover:before:scale-100.data-[state=checked]:bg-primary-800.data-[state=checked]:border-primary-800.data-[state=indeterminate]:bg-primary-800.data-[state=indeterminate]:border-primary-800.focus:-outline-offset-1.focus:outline-2.focus:outline-primary-800.focus:outline-solid.disabled:cursor-not-allowed.disabled:opacity-30".split("."),
|
|
9
|
+
base: /* @__PURE__ */ "appearance-none.relative.bg-transparent.border.border-grey-800.rounded-[3px].text-white.bg-white.cursor-pointer.size-4.flex.items-center.justify-center.transition-all.duration-50.ease-out.shrink-0.not-disabled:before:-inset-2.not-disabled:before:-z-1.not-disabled:before:absolute.not-disabled:before:bg-primary-300.not-disabled:before:content-[''].not-disabled:before:duration-125.not-disabled:before:ease-in-out.not-disabled:before:opacity-0.not-disabled:before:rounded-[50%].not-disabled:before:scale-0.not-disabled:before:transition-[opacity,scale].not-disabled:hover:before:opacity-100.not-disabled:hover:before:scale-100.data-[state=checked]:bg-primary-800.data-[state=checked]:border-primary-800.data-[state=indeterminate]:bg-primary-800.data-[state=indeterminate]:border-primary-800.focus:-outline-offset-1.focus:outline-2.focus:outline-primary-800.focus:outline-solid.disabled:cursor-not-allowed.disabled:opacity-30".split("."),
|
|
10
10
|
variants: {
|
|
11
11
|
state: { error: ["border-danger"] },
|
|
12
12
|
size: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n base: [\n 'appearance-none',\n 'relative',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-[3px]',\n 'text-white',\n 'bg-white',\n 'cursor-pointer',\n 'size-4',\n 'flex',\n 'items-center',\n 'justify-center',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'shrink-0',\n 'not-disabled:before:-inset-2',\n 'not-disabled:before:-z-1',\n 'not-disabled:before:absolute',\n 'not-disabled:before:bg-primary-300',\n \"not-disabled:before:content-['']\",\n 'not-disabled:before:duration-125',\n 'not-disabled:before:ease-in-out',\n 'not-disabled:before:opacity-0',\n 'not-disabled:before:rounded-[50%]',\n 'not-disabled:before:scale-0',\n 'not-disabled:before:transition-[opacity,scale]',\n 'not-disabled:hover:before:opacity-100',\n 'not-disabled:hover:before:scale-100',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'data-[state=indeterminate]:bg-primary-800',\n 'data-[state=indeterminate]:border-primary-800',\n 'focus:-outline-offset-1',\n 'focus:outline-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n state: {\n error: ['border-danger']\n },\n size: {\n md: ['size-4'],\n lg: ['mt-px', 'size-6']\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n\n return (\n <div className=\"relative z-1\">\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <div className=\"absolute -inset-3 opacity-50\" />\n <RadixCheckbox.Indicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n size={iconSize}\n className=\"stroke-3\"\n />\n </RadixCheckbox.Indicator>\n </StyledCheckbox>\n </div>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;AASA,IAAM,IAAiB,EAAO,EAAc,MAAM;CAChD,MAAM,w7BAyCL;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC,EAEI,IAAa;CACjB,IAAI;CACJ,IAAI;CACL,EAEY,IAAW,EAAM,YAG3B,EAAE,UAAO,MAAM,YAAS,GAAG,KAAQ,MAAQ;CAC5C,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,OAAD,EAAK,WAAU,gBAWT,EAVJ,kBAAA,cAAC,GAAD;EAAqB;EAAc;EAAe;EAAM,GAAI;EAS3C,EARf,kBAAA,cAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,kBAAA,cAAC,EAAc,WAAf,EAAyB,SAAA,IAMC,EALxB,kBAAA,cAAC,GAAD;EACE,IAAI,MAAY,kBAAkB,IAAQ;EAC1C,MAAM;EACN,WAAU;EACV,CAAA,CACsB,CACX,CACb;EAER;AAEF,EAAS,cAAc"}
|
|
@@ -3,7 +3,7 @@ import * as t from "react";
|
|
|
3
3
|
import { ComboboxInput as n } from "@reach/combobox";
|
|
4
4
|
//#region src/components/combobox/ComboboxInput.tsx
|
|
5
5
|
var r = e(n, {
|
|
6
|
-
base: /* @__PURE__ */ "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.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".split("."),
|
|
6
|
+
base: /* @__PURE__ */ "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".split("."),
|
|
7
7
|
variants: {
|
|
8
8
|
size: {
|
|
9
9
|
sm: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.js","names":[],"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 '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', 'leading-[1.7]'],\n md: ['h-10', 'text-md', 'leading-loose'],\n lg: ['h-12', 'text-md', 'leading-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"],"mappings":";;;;AAKA,IAAa,IAAsB,EAAO,GAAmB;CAC3D,MAAM,
|
|
1
|
+
{"version":3,"file":"ComboboxInput.js","names":[],"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', 'leading-[1.7]'],\n md: ['h-10', 'text-md', 'leading-loose'],\n lg: ['h-12', 'text-md', 'leading-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"],"mappings":";;;;AAKA,IAAa,IAAsB,EAAO,GAAmB;CAC3D,MAAM,shBA8BL;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,OAAO,EACL,OAAO,CAAC,UAAU,gBAAgB,EACnC;EACF;CACF,CAAC,EAMW,IAAgB,EAAM,YAGhC,EAAE,UAAO,MAAM,GAAG,KAAQ,MAC3B,kBAAA,cAAC,GAAD;CACQ;CACN,GAAI;CACC;CACL,CAAA,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n base: [\n 'bg-white',\n 'border',\n 'border-grey-200',\n 'rounded-md',\n 'shadow-md',\n 'font-body',\n 'text-md',\n 'outline-none',\n 'p-1',\n 'translate-y-2'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAkB,EAAO,GAAqB,EACzD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n base: [\n 'bg-white',\n 'border',\n 'border-grey-200',\n 'rounded-md',\n 'shadow-md',\n 'box-border',\n 'font-body',\n 'text-md',\n 'outline-none',\n 'p-1',\n 'translate-y-2'\n ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAkB,EAAO,GAAqB,EACzD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\
|
|
1
|
+
{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n label: string\n hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n onChange,\n label,\n hideLabel = false,\n ...props\n}: DataTableSearchProps) => {\n const {\n setGlobalFilter,\n getState,\n resetPagination,\n getTotalRows,\n asyncDataState\n } = useDataTable()\n const { globalFilter } = getState()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (isEmpty) return null\n\n const handleChange = debounce(250, (event) => {\n const {\n target: { value }\n } = event\n\n onChange?.(event)\n resetPagination()\n setGlobalFilter(value)\n })\n\n return (\n <>\n <Label htmlFor={label} className={clsx('mb-3', hideLabel && 'sr-only')}>\n {label}\n </Label>\n <SearchInput\n {...props}\n defaultValue={globalFilter}\n onChange={handleChange}\n name={label}\n />\n </>\n )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,KAAyB,EACpC,aACA,UACA,eAAY,IACZ,GAAG,QACuB;CAC1B,IAAM,EACJ,oBACA,aACA,oBACA,iBACA,sBACE,GAAc,EACZ,EAAE,oBAAiB,GAAU;AAKnC,KAHkB,MAAmB,EAAe,WACtB,GAAc,KAAK,EAEpC,QAAO;CAEpB,IAAM,IAAe,EAAS,MAAM,MAAU;EAC5C,IAAM,EACJ,QAAQ,EAAE,eACR;AAIJ,EAFA,IAAW,EAAM,EACjB,GAAiB,EACjB,EAAgB,EAAM;GACtB;AAEF,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD;EAAO,SAAS;EAAO,WAAW,EAAK,QAAQ,KAAa,UAAU;EAE9D,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;EACN,CAAA,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean | 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <label htmlFor={`${tableId}_row_${row.id}_selection`} className
|
|
1
|
+
{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n row,\n checked,\n onCheckedChange,\n label = `Row ${row.id} selection`\n}: {\n row: Row<Record<string, unknown>>\n checked: boolean | 'indeterminate'\n onCheckedChange: (value: boolean) => void\n label?: string\n}): React.ReactElement => {\n const { tableId } = useDataTable()\n\n return (\n <>\n <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n style={{ '--depth': row.depth }}\n checked={checked}\n onCheckedChange={onCheckedChange}\n name={`${tableId}_row_${row.id}_selection`}\n disabled={!row.getCanSelect()}\n className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n />\n </>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,KAAiC,EAC5C,QACA,YACA,oBACA,WAAQ,OAAO,EAAI,GAAG,kBAME;CACxB,IAAM,EAAE,eAAY,GAAc;AAElC,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ,OAAO,EAAI,GAAG;EAAa,WAAU;EAExD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,EAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,EAAQ,OAAO,EAAI,GAAG;EAC/B,UAAU,CAAC,EAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className
|
|
1
|
+
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n checked={getCheckedState()}\n onCheckedChange={updateCheckedState}\n name={`${tableId}_allRowsSelection`}\n />\n </>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,KAAkC,EAC7C,WAAQ,2BAGJ;CACJ,IAAM,EACJ,6BACA,8BACA,8BACA,eACE,GAAc;AAelB,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ;EAAsB,WAAU;EAEnD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,SAnBA,GAA2B,GAAS,kBACxC,EAAI,GAA0B;EAmB1B,uBAdA,GAA2B,GACtB,EAA0B,GAAM,GAElC,EAA0B,CAAC,GAA0B,CAAC;EAYzD,MAAM,GAAG,EAAQ;EACjB,CAAA,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAiB,iBAEjB,IAAsB,EAAO,GAAS,EAC1C,MAAM,GACP,CAAC,EAEI,IAAsB,EAC1B,GACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAOY,KAAiB,EAC5B,UAAO,MACP,aACA,qBAAkB,gBAClB,qBAAkB,IAClB,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAAqB,IAAI,GAmCH,EAlCnB,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,EACD,kBAAA,cAAC,GAAD;CACQ;CACN,cAAW;CACX,uBAAuB,MAAU;AAE/B,EADgB,EAAM,QACT,OAAO,KAClB,EAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,KACC,kBAAA,cAAC,GAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAa,CAAA,CACZ,EAEd,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,CACmB,CACF,CACf"}
|
|
1
|
+
{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAiB,iBAEjB,IAAsB,EAAO,GAAS,EAC1C,MAAM,GACP,CAAC,EAEI,IAAsB,EAC1B,GACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAOY,KAAiB,EAC5B,UAAO,MACP,aACA,qBAAkB,gBAClB,qBAAkB,IAClB,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAAqB,IAAI,GAmCH,EAlCnB,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,EACD,kBAAA,cAAC,GAAD;CACQ;CACN,cAAW;CACX,uBAAuB,MAAU;AAE/B,EADgB,EAAM,QACT,OAAO,KAClB,EAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,KACC,kBAAA,cAAC,GAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAa,CAAA,CACZ,EAEd,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,CACmB,CACF,CACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\
|
|
1
|
+
{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n className?: string\n error?: string\n fieldId: string\n label: string\n prompt?: { link?: string; label: string; onClick?: () => void }\n description?: string\n required?: boolean\n hideLabel?: boolean\n appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n name: string\n validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n children,\n error,\n fieldId,\n label,\n prompt,\n description,\n required,\n hideLabel,\n appearance,\n ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n <div {...rest}>\n <div\n className={clsx(\n 'mb-3',\n 'flex',\n 'items-center',\n 'justify-between',\n hideLabel && 'sr-only'\n )}\n >\n <Label htmlFor={fieldId} required={required} appearance={appearance}>\n {label}\n </Label>\n {prompt && (\n <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n {prompt.label}\n </Link>\n )}\n </div>\n {description && <Description className=\"mb-3\">{description}</Description>}\n {children}\n {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;AA4BA,IAAa,KAAgB,EAC3B,aACA,UACA,YACA,UACA,WACA,gBACA,aACA,cACA,eACA,GAAG,QAEH,kBAAA,cAAC,OAAQ,GACP,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,QACA,QACA,gBACA,mBACA,KAAa,UACd,EAUG,EARJ,kBAAA,cAAC,GAAD;CAAO,SAAS;CAAmB;CAAsB;CAEjD,EADL,EACK,EACP,KACC,kBAAA,cAAC,GAAD;CAAM,MAAM,GAAQ;CAAM,SAAS,GAAQ;CAAS,MAAK;CAElD,EADJ,EAAO,MACH,CAEL,EACL,KAAe,kBAAA,cAAC,GAAD,EAAa,WAAU,QAAkC,EAA1B,EAA0B,EACxE,GACA,KAAS,kBAAA,cAAC,GAAD,EAAe,WAAU,QAA8B,EAAtB,EAAsB,CAC7D;AAGR,EAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":[],"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 { Text } from '../text/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 'bg-none',\n 'shadow-none',\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"],"mappings":";;;;;AAOA,IAAa,IAAkB,EAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAEF,EAAgB,cAAc;AAE9B,IAAM,IAAkB,EAAO,GAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAcI,IAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAY,EAAM,YAC5B,EAAE,UAAO,QAAQ,SAAM,GAAG,KAAQ,MAAQ;CACzC,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,GAAD;EACO;EACL,IAAG;EACH,MAAM,MAAS,WAAW,SAAS;EACnC,WAAW,MAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,MAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,EAAU,cAAc;AAiBxB,IAAa,IAAQ,EAAM,YAEvB,EACE,cACA,UAAO,MACP,gBAAa,YACb,UACA,aACA,UACA,GAAG,KAEL,MAGE,kBAAA,cAAC,GAAD;CACQ;CACM;CACF;CACH;CACI;CACJ;CAGS,EADhB,kBAAA,cAAC,GAAD;CAAiB;CAAW;CAAe;CAAU,GAAI;CAAQ,CAAA,CACjD,CAGvB;AAED,EAAM,cAAc"}
|
|
1
|
+
{"version":3,"file":"Input.js","names":[],"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 { Text } from '../text/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"],"mappings":";;;;;AAOA,IAAa,IAAkB,EAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAEF,EAAgB,cAAc;AAE9B,IAAM,IAAkB,EAAO,GAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAcI,IAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAY,EAAM,YAC5B,EAAE,UAAO,QAAQ,SAAM,GAAG,KAAQ,MAAQ;CACzC,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,GAAD;EACO;EACL,IAAG;EACH,MAAM,MAAS,WAAW,SAAS;EACnC,WAAW,MAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,MAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,EAAU,cAAc;AAiBxB,IAAa,IAAQ,EAAM,YAEvB,EACE,cACA,UAAO,MACP,gBAAa,YACb,UACA,aACA,UACA,GAAG,KAEL,MAGE,kBAAA,cAAC,GAAD;CACQ;CACM;CACF;CACH;CACI;CACJ;CAGS,EADhB,kBAAA,cAAC,GAAD;CAAiB;CAAW;CAAe;CAAU,GAAI;CAAQ,CAAA,CACjD,CAGvB;AAED,EAAM,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n base: [\n 'animate-pulse',\n 'bg-current',\n 'rounded-full',\n 'animation-duration-900',\n 'nth-3:animation-delay-300',\n 'nth-4:animation-delay-600'\n ],\n variants: {\n size: {\n sm: ['size-1', 'mx-0.5'],\n md: ['size-1.5', 'mx-0.5'],\n lg: ['size-2', 'mx-[3px]']\n }\n }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n message?: string\n size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n className,\n message = 'Loading',\n size = 'md',\n ...props\n}: LoaderProps) => (\n <div\n className={clsx('flex', 'justify-center', className)}\n role=\"alert\"\n {...props}\n >\n <span className
|
|
1
|
+
{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n base: [\n 'animate-pulse',\n 'bg-current',\n 'rounded-full',\n 'animation-duration-900',\n 'nth-3:animation-delay-300',\n 'nth-4:animation-delay-600'\n ],\n variants: {\n size: {\n sm: ['size-1', 'mx-0.5'],\n md: ['size-1.5', 'mx-0.5'],\n lg: ['size-2', 'mx-[3px]']\n }\n }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n message?: string\n size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n className,\n message = 'Loading',\n size = 'md',\n ...props\n}: LoaderProps) => (\n <div\n className={clsx('flex', 'justify-center', className)}\n role=\"alert\"\n {...props}\n >\n <span className=\"sr-only\">{message}</span>\n <Dot size={size} />\n <Dot size={size} />\n <Dot size={size} />\n </div>\n)\n"],"mappings":";;;;AAKA,IAAM,IAAM,EAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,SAAS;EACxB,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,CAAC,EAOW,KAAU,EACrB,cACA,aAAU,WACV,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,OAAD;CACE,WAAW,EAAK,QAAQ,kBAAkB,EAAU;CACpD,MAAK;CACL,GAAI;CAMA,EAJJ,kBAAA,cAAC,QAAD,EAAM,WAAU,WAA0B,EAAf,EAAe,EAC1C,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,EACnB,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,EACnB,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,CACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\
|
|
1
|
+
{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <span className=\"z-1\" tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </span>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"mappings":";;;;;;AAQA,IAAM,IAAsB,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC,EAYW,IAAqB,EAAM,YAGrC,GAAO,MAAiB;CACzB,IAAM,EACJ,SACA,2BACA,gBACA,qBAAkB,YAClB,GAAG,MACD;AAOJ,QACE,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAaC,EAZhB,kBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAWzB,EAVL,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAQ,CAAA,CACE,CACjB,CACS,EACjB,KACC,kBAAA,cAAC,EAAQ,SAAA,MAAS,EAAyC,CAErD;EAEZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n Progress.Root,\n {\n base: [\n 'rounded-full',\n 'bg-grey-200',\n 'relative',\n 'overflow-hidden',\n 'w-full'\n ],\n variants: {\n size: {\n sm: ['h-1'],\n md: ['h-2']\n },\n theme: {\n primary: ['text-primary-800'],\n info: ['text-info'],\n success: ['text-success'],\n warning: ['text-warning'],\n danger: ['text-danger'],\n neutral: ['bg-grey-400', 'text-grey-800']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n base: [\n 'bg-current',\n 'rounded-full',\n 'h-full',\n 'absolute',\n 'transition-all',\n 'duration-300',\n 'ease-out'\n ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n | { id: string; 'aria-label'?: string }\n | { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n className=\"w-full translate-x-(--progress)\"\n style={{\n '--progress': `-${100 - ((value || 0) / max) * 100}%`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,IAAoB,EACxB,EAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EAAO,EAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAUW,KAAe,EAC1B,UACA,SAAM,KACN,UAAO,MACP,WAAQ,WACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,kBAAA,cAAC,GAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,KAAS,KAAK,IAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,EAAY,cAAc"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n Progress.Root,\n {\n base: [\n 'rounded-full',\n 'bg-grey-200',\n 'relative',\n 'overflow-hidden',\n 'w-full'\n ],\n variants: {\n size: {\n sm: ['h-1'],\n md: ['h-2']\n },\n theme: {\n primary: ['text-primary-800'],\n info: ['text-info'],\n success: ['text-success'],\n warning: ['text-warning'],\n danger: ['text-danger'],\n neutral: ['bg-grey-400', 'text-grey-800']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n base: [\n 'bg-current',\n 'rounded-full',\n 'box-border',\n 'h-full',\n 'absolute',\n 'transition-all',\n 'duration-300',\n 'ease-out'\n ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n | { id: string; 'aria-label'?: string }\n | { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n className=\"w-full translate-x-(--progress)\"\n style={{\n '--progress': `-${100 - ((value || 0) / max) * 100}%`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,IAAoB,EACxB,EAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EAAO,EAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAUW,KAAe,EAC1B,UACA,SAAM,KACN,UAAO,MACP,WAAQ,WACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,kBAAA,cAAC,GAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,KAAS,KAAK,IAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,EAAY,cAAc"}
|
|
@@ -3,33 +3,7 @@ import * as t from "react";
|
|
|
3
3
|
import * as n from "@radix-ui/react-radio-group";
|
|
4
4
|
//#region src/components/radio-button/RadioButton.tsx
|
|
5
5
|
var r = e(n.Item, {
|
|
6
|
-
base: [
|
|
7
|
-
"items-center",
|
|
8
|
-
"appearance-none",
|
|
9
|
-
"border",
|
|
10
|
-
"border-grey-800",
|
|
11
|
-
"rounded-full",
|
|
12
|
-
"text-white",
|
|
13
|
-
"cursor-pointer",
|
|
14
|
-
"flex",
|
|
15
|
-
"justify-center",
|
|
16
|
-
"size-4",
|
|
17
|
-
"transition-all",
|
|
18
|
-
"duration-50",
|
|
19
|
-
"ease-out",
|
|
20
|
-
"focus:outline-2",
|
|
21
|
-
"focus:outline-offset-1",
|
|
22
|
-
"focus:outline-primary-800",
|
|
23
|
-
"focus:outline-solid",
|
|
24
|
-
"data-[state=checked]:bg-primary-800",
|
|
25
|
-
"data-[state=checked]:border-primary-800",
|
|
26
|
-
"disabled:bg-grey-200",
|
|
27
|
-
"disabled:border-grey-800",
|
|
28
|
-
"disabled:cursor-not-allowed",
|
|
29
|
-
"disabled:text-grey-800",
|
|
30
|
-
"disabled:data-[state=checked]:bg-grey-800",
|
|
31
|
-
"disabled:data-[state=checked]:border-grey-800"
|
|
32
|
-
],
|
|
6
|
+
base: /* @__PURE__ */ "items-center.appearance-none.bg-transparent.border.border-grey-800.rounded-full.text-white.cursor-pointer.flex.justify-center.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".split("."),
|
|
33
7
|
variants: { size: {
|
|
34
8
|
md: ["size-4"],
|
|
35
9
|
lg: ["-mt-1", "size-6"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":[],"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 'border',\n 'border-grey-800',\n 'rounded-full',\n 'text-white',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\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"],"mappings":";;;;AAMA,IAAM,IAAoB,EACxB,EAAW,MACX;CACE,MAAM;
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":[],"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 '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"],"mappings":";;;;AAMA,IAAM,IAAoB,EACxB,EAAW,MACX;CACE,MAAM,+hBA2BL;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS,SAAS;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EACtB,EAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;EAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAWY,KAAe,EAAE,SAAM,GAAG,QAEnC,kBAAA,cAAC,GAAD;CAAmB,GAAI;CAAa;CAEhB,EADlB,kBAAA,cAAC,GAAD,EAAuB,SAAQ,CAAA,CACb;AAIxB,EAAY,cAAc"}
|