@atom-learning/components 6.0.0-beta.15 → 6.0.0-beta.16
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/badge/Badge.d.ts +4 -4
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/dialog/Dialog.d.ts +1 -1
- package/dist/components/dialog/DialogContent.d.ts +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/form/Form.d.ts +2 -1
- package/dist/components/form/Form.js +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/progress-bar/ProgressBar.d.ts +2 -2
- package/dist/components/progress-bar/ProgressBar.js +1 -1
- package/dist/components/progress-bar/ProgressBar.js.map +1 -1
- package/dist/components/select/Select.d.ts +3 -3
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/Select.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 +1 -1
- package/src/responsive-variant-classes.css +1 -1
|
@@ -13,10 +13,10 @@ declare const StyledBadge: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
|
|
|
13
13
|
} & {
|
|
14
14
|
as?: React.ElementType;
|
|
15
15
|
}, "size" | "emphasis" | "isClickable" | "highlighted"> & {
|
|
16
|
-
emphasis?: "bold" | "white" | "subtle" | undefined;
|
|
17
|
-
size?: "sm" | "md" | "xs" | undefined;
|
|
18
|
-
isClickable?: boolean | undefined;
|
|
19
|
-
highlighted?: boolean | undefined;
|
|
16
|
+
emphasis?: ("bold" | "white" | "subtle" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "white" | "subtle">>) | undefined;
|
|
17
|
+
size?: ("sm" | "md" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "xs">>) | undefined;
|
|
18
|
+
isClickable?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
19
|
+
highlighted?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
20
20
|
} & {
|
|
21
21
|
as?: React.ElementType;
|
|
22
22
|
}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Flex as f}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{styled as w,Theme as k}from"../../styled.js";import{useCallbackRefState as y}from"../../utilities/hooks/useCallbackRef.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as a}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const T=w(f,{base:["justify-center","items-center","rounded-sm","min-w-none","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]}),j=e.forwardRef(({theme:
|
|
1
|
+
import*as e from"react";import{Flex as f}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{styled as w,Theme as k}from"../../styled.js";import{useCallbackRefState as y}from"../../utilities/hooks/useCallbackRef.js";import{colorSchemes as C,badgeSemanticNames as E}from"./Badge.colorscheme.config.js";import{BadgeContext as B,BadgeProvider as O}from"./Badge.context.js";import{BadgeIcon as a}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const T=w(f,{base:["justify-center","items-center","rounded-sm","min-w-none","border","border-white","font-body","*:not-last:mr-1"],variants:{emphasis:{white:["text-(--text-on-white)","bg-white"],subtle:["text-(--text-subtle)","bg-(--background-subtle)"],bold:["text-(--text-bold)","bg-(--background-bold)"]},size:{xs:["px-1"],sm:["px-1","py-0.5"],md:["px-2","py-1"]},isClickable:{true:["cursor-pointer"]},highlighted:{true:[]}},compoundVariants:[{isClickable:!0,emphasis:"white",class:["hover:text-(--text-on-white)","hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{isClickable:!0,emphasis:"subtle",class:["hover:bg-(--background-subtle-hover)","hover:text-(--text-subtle-hover)"]},{isClickable:!0,emphasis:"bold",class:["hover:bg-(--background-bold-hover)","hover:text-(--text-bold)"]},{emphasis:"white",highlighted:!0,class:["text-(--text-on-white)","bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]"]},{emphasis:"subtle",highlighted:!0,class:["text-(--text-subtle-hover)","(--bg-background-subtle-hover)"]},{emphasis:"bold",highlighted:!0,class:["text-(--text-bold)","bg-(--background-bold-hover)"]}]},{enabledResponsiveVariants:!0}),j=e.forwardRef(({theme:s="info",emphasis:r="subtle",children:i,...o},b)=>{const{size:h,overflow:c,isOverflowing:d}=e.useContext(B),[l,p]=y();e.useImperativeHandle(b,()=>l);const g=l==null?void 0:l.textContent,u=E.includes(s),x=Object.keys(o).includes("onClick")||Object.keys(o).includes("href");return e.createElement(z,{hasTooltip:c==="ellipsis"&&d,label:g},e.createElement(k,{theme:C[s]},e.createElement(T,{role:"status",emphasis:r,size:h,...o,ref:p,isClickable:x&&!u},e.Children.map(i,t=>typeof t=="string"||typeof t=="number"?e.createElement(n,null,t):e.isValidElement(t)&&t.type===v?e.createElement(a,{...t.props}):t))))}),m=e.forwardRef(({size:s="sm",overflow:r="wrap",...i},o)=>e.createElement(O,{size:s,overflow:r},e.createElement(j,{...i,ref:o}))),I=Object.assign(m,{Icon:a,Text:n});m.displayName="Badge";export{I as Badge};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled, Theme } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n colorSchemes as badgeColorSchemes,\n badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(Flex
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled, Theme } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport {\n colorSchemes as badgeColorSchemes,\n badgeSemanticNames\n} from './Badge.colorscheme.config'\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\n\nconst StyledBadge = styled(\n Flex,\n {\n base: [\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'min-w-none',\n 'border',\n 'border-white',\n 'font-body',\n '*:not-last:mr-1'\n ],\n variants: {\n emphasis: {\n white: ['text-(--text-on-white)', 'bg-white'],\n subtle: ['text-(--text-subtle)', 'bg-(--background-subtle)'],\n bold: ['text-(--text-bold)', 'bg-(--background-bold)']\n },\n size: {\n xs: ['px-1'],\n sm: ['px-1', 'py-0.5'],\n md: ['px-2', 'py-1']\n },\n isClickable: {\n true: ['cursor-pointer']\n },\n highlighted: {\n true: []\n }\n },\n compoundVariants: [\n {\n isClickable: true,\n emphasis: 'white',\n class: [\n 'hover:text-(--text-on-white)',\n 'hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n isClickable: true,\n emphasis: 'subtle',\n class: [\n 'hover:bg-(--background-subtle-hover)',\n 'hover:text-(--text-subtle-hover)'\n ]\n },\n {\n isClickable: true,\n emphasis: 'bold',\n class: [\n 'hover:bg-(--background-bold-hover)',\n 'hover:text-(--text-bold)'\n ]\n },\n {\n emphasis: 'white',\n highlighted: true,\n class: [\n 'text-(--text-on-white)',\n 'bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)]'\n ]\n },\n {\n emphasis: 'subtle',\n highlighted: true,\n class: ['text-(--text-subtle-hover)', '(--bg-background-subtle-hover)']\n },\n {\n emphasis: 'bold',\n highlighted: true,\n class: ['text-(--text-bold)', 'bg-(--background-bold-hover)']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n ({ theme = 'info', emphasis = 'subtle', children, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const label = badgeElRef?.textContent\n\n const isInfoOnly = badgeSemanticNames.includes(theme)\n\n const isClickable =\n Object.keys(rest).includes('onClick') ||\n Object.keys(rest).includes('href')\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <Theme theme={badgeColorSchemes[theme]}>\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n {...rest}\n ref={setBadgeElRef}\n isClickable={isClickable && !isInfoOnly}\n >\n {React.Children.map(children, (child) => {\n if (typeof child === 'string' || typeof child === 'number') {\n return <BadgeText>{child}</BadgeText>\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <BadgeIcon {...child.props} />\n }\n return child\n })}\n </StyledBadge>\n </Theme>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nconst BadgeComponent = React.forwardRef<HTMLDivElement, TBadgeProps>(\n ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n return (\n <BadgeProvider size={size} overflow={overflow}>\n <BadgeInner {...rest} ref={ref} />\n </BadgeProvider>\n )\n }\n)\n\nexport const Badge = Object.assign(BadgeComponent, {\n Icon: BadgeIcon,\n Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","Theme","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"okBAgBA,MAAMA,EAAcC,EAClBC,EACA,CACE,KAAM,CACJ,iBACA,eACA,aACA,aACA,SACA,eACA,YACA,iBACF,EACA,SAAU,CACR,SAAU,CACR,MAAO,CAAC,yBAA0B,UAAU,EAC5C,OAAQ,CAAC,uBAAwB,0BAA0B,EAC3D,KAAM,CAAC,qBAAsB,wBAAwB,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAQ,QAAQ,EACrB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,gBAAgB,CACzB,EACA,YAAa,CACX,KAAM,CAAA,CACR,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,MAAO,CACL,+BACA,iEACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,MAAO,CACL,uCACA,kCACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,MAAO,CACL,qCACA,0BACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,MAAO,CACL,yBACA,2DACF,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,MAAO,CAAC,6BAA8B,gCAAgC,CACxE,EACA,CACE,SAAU,OACV,YAAa,GACb,MAAO,CAAC,qBAAsB,8BAA8B,CAC9D,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EASMC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,IACpCZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,KAAA,OAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASd,CAAK,EAE9Ce,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEJ,EAAA,cAACiB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAAAA,EAEPb,EAAA,cAACkB,EAAA,CAAM,MAAOC,EAAkBlB,CAAK,CACnCD,EAAAA,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,IAAKO,EACL,YAAaK,GAAe,CAACF,CAE5Bd,EAAAA,EAAM,SAAS,IAAIG,EAAWiB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCpB,EAAA,cAACqB,EAAA,KAAWD,CAAM,EAEvBpB,EAAM,eAAeoB,CAAK,GAAKA,EAAM,OAASE,EACzCtB,EAAA,cAACuB,EAAA,CAAW,GAAGH,EAAM,KAAA,CAAO,EAE9BA,CACR,CACH,CACF,CACF,CAEJ,CACF,EAEMI,EAAiBxB,EAAM,WAC3B,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,OAAQ,GAAGH,CAAK,EAAGC,IAE1CL,EAAA,cAACyB,EAAA,CAAc,KAAMnB,EAAM,SAAUC,GACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAAA,CAAK,CAClC,CAGN,EAEaqB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}
|
|
@@ -6,7 +6,7 @@ export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog")
|
|
|
6
6
|
}>;
|
|
7
7
|
Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
8
8
|
Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size"> & {
|
|
9
|
-
size?: "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | undefined;
|
|
9
|
+
size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
|
|
10
10
|
} & {
|
|
11
11
|
as?: import("react").ElementType;
|
|
12
12
|
} & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
|
|
3
|
-
size?: "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | undefined;
|
|
3
|
+
size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
|
|
4
4
|
} & {
|
|
5
5
|
as?: React.ElementType;
|
|
6
6
|
}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as c,Portal as v,Close as f}from"@radix-ui/react-dialog";import*as o from"react";import{styled as n}from"../../styled.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const l="modal_overlay",
|
|
1
|
+
import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as c,Portal as v,Close as f}from"@radix-ui/react-dialog";import*as o from"react";import{styled as n}from"../../styled.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const l="modal_overlay",b=n(u,{base:w}),t=["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none"],C=n(c,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:[...t,"rounded-md","w-95"],sm:[...t,"rounded-md","w-120"],md:[...t,"rounded-md","w-150"],lg:[...t,"rounded-md","w-200"],xl:[...t,"rounded-md","w-275"],fullscreen:["w-screen","h-screen","max-w-screen","max-h-screen","supports-[height:100svh]:h-svh","supports-[height:100svh]:max-h-svh"]}}},{enabledResponsiveVariants:!0}),y=({size:i="sm",children:a,closeDialogText:m="Close dialog",showCloseButton:d=!0,...h})=>o.createElement(v,null,o.createElement(b,{id:l},o.Children.map(a,e=>(e==null?void 0:e.type)===r&&e),o.createElement(C,{size:i,"aria-label":"Dialog",onPointerDownOutside:e=>{const s=e.target;(s==null?void 0:s.id)!==l&&e.preventDefault()},...h},d&&o.createElement(x,{as:f,label:m,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(g,{is:p})),o.Children.map(a,e=>(e==null?void 0:e.type)!==r&&e))));export{y as DialogContent};
|
|
2
2
|
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","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 sizeReset = [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none'\n]\n\nconst StyledDialogContent = styled(Content
|
|
1
|
+
{"version":3,"file":"DialogContent.js","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 sizeReset = [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none'\n]\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n '-translate-1/2',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\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: [...sizeReset, 'rounded-md', 'w-95'],\n sm: [...sizeReset, 'rounded-md', 'w-120'],\n md: [...sizeReset, 'rounded-md', 'w-150'],\n lg: [...sizeReset, 'rounded-md', 'w-200'],\n xl: [...sizeReset, 'rounded-md', 'w-275'],\n fullscreen: [\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-[height:100svh]:h-svh',\n 'supports-[height:100svh]: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"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","sizeReset","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWA,MAAMA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAEKC,EAAY,CAChB,SACA,SACA,aACA,aACA,kCACA,qCACF,EAEMC,EAAsBJ,EAC1BK,EACA,CACE,KAAM,CACJ,iBACA,WACA,YACA,aACA,WACA,eACA,eACA,kBACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,GAAGF,EAAW,aAAc,MAAM,EACvC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,WAAY,CACV,WACA,WACA,eACA,eACA,iCACA,oCACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaG,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACb,EAAA,CAAoB,GAAID,CAAAA,EACtBc,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOnB,GAClBkB,EAAM,gBAEV,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
|
|
3
3
|
import { type FormCustomContextType } from './useFormCustomContext';
|
|
4
|
-
type FormProps<TFormData extends FieldValues> = Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'> & {
|
|
4
|
+
type FormProps<TFormData extends FieldValues> = Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError' | 'children'> & {
|
|
5
5
|
defaultValues?: DefaultValues<TFormData>;
|
|
6
6
|
validationMode?: Mode;
|
|
7
7
|
onSubmit: SubmitHandler<TFormData>;
|
|
8
8
|
onError?: SubmitErrorHandler<TFormData>;
|
|
9
|
+
noValidate?: boolean;
|
|
9
10
|
children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
|
|
10
11
|
};
|
|
11
12
|
export declare const Form: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as o from"react";import{useForm as p,FormProvider as c}from"react-hook-form";import{FormCustomContext as f}from"./useFormCustomContext.js";const a=t=>{const{children:e,defaultValues:m,validationMode:n="onBlur",onSubmit:
|
|
1
|
+
import*as o from"react";import{useForm as p,FormProvider as c}from"react-hook-form";import{FormCustomContext as f}from"./useFormCustomContext.js";const a=t=>{const{children:e,defaultValues:m,validationMode:n="onBlur",onSubmit:l,onError:i,appearance:u,...d}=t,r=p({defaultValues:m,mode:n});return o.createElement(c,{...r},o.createElement(f.Provider,{value:{appearance:u}},o.createElement("form",{"aria-label":"form",onSubmit:r.handleSubmit(l,i),...d},typeof e=="function"?e(r):e)))};a.displayName="Form";export{a as Form};
|
|
2
2
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n FormCustomContext,\n type FormCustomContextType\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n React.HTMLAttributes<HTMLFormElement>,\n 'onSubmit' | 'onError'\n> & {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n | React.ReactNode\n | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <form\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </form>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n FormCustomContext,\n type FormCustomContextType\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n React.HTMLAttributes<HTMLFormElement>,\n 'onSubmit' | 'onError' | 'children'\n> & {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n noValidate?: boolean\n children:\n | React.ReactNode\n | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <form\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </form>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"kJA8Ba,MAAAA,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,EACA,GAAGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,CAAAA,EAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAC9CI,EAAAA,EAAA,cAAC,OACC,CAAA,aAAW,OACX,SAAUF,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,GAEH,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as Progress from '@radix-ui/react-progress';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const StyledProgressBar: React.ForwardRefExoticComponent<Omit<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>, "theme" | "size"> & {
|
|
4
|
-
size?: "sm" | "md" | undefined;
|
|
5
|
-
theme?: "warning" | "success" | "info" | "neutral" | "primary" | "danger" | undefined;
|
|
4
|
+
size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
|
|
5
|
+
theme?: ("warning" | "success" | "info" | "neutral" | "primary" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "info" | "neutral" | "primary" | "danger">>) | undefined;
|
|
6
6
|
} & {
|
|
7
7
|
as?: React.ElementType;
|
|
8
8
|
}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"@radix-ui/react-progress";import*as a from"react";import{styled as s}from"../../styled.js";const m=s(t.Root,{base:["rounded-full","bg-grey-200","relative","overflow-hidden","w-full"],variants:{size:{sm:["h-1"],md:["h-2"]},theme:{primary:["text-primary-800"],info:["text-info"],success:["text-success"],warning:["text-warning"],danger:["text-danger"],neutral:["bg-grey-400","text-grey-800"]}}}),
|
|
1
|
+
import*as t from"@radix-ui/react-progress";import*as a from"react";import{styled as s}from"../../styled.js";const m=s(t.Root,{base:["rounded-full","bg-grey-200","relative","overflow-hidden","w-full"],variants:{size:{sm:["h-1"],md:["h-2"]},theme:{primary:["text-primary-800"],info:["text-info"],success:["text-success"],warning:["text-warning"],danger:["text-danger"],neutral:["bg-grey-400","text-grey-800"]}}},{enabledResponsiveVariants:!0}),d=s(t.Indicator,{base:["bg-current","rounded-full","box-border","h-full","absolute","transition-all","duration-300","ease-out"]}),o=({value:e,max:r=100,size:l="md",theme:n="primary",...i})=>a.createElement(m,{value:e,max:r,theme:n,size:l,...i},a.createElement(d,{className:"w-full translate-x-(--progress)",style:{"--progress":"-".concat(100-(e||0)/r*100,"%")}}));o.displayName="ProgressBar";export{o as ProgressBar};
|
|
2
2
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","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(Progress.Root
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","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"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","size","theme","remainingProps","React"],"mappings":"4GAKA,MAAMA,EAAoBC,EACxBC,EAAS,KACT,CACE,KAAM,CACJ,eACA,cACA,WACA,kBACA,QACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,KAAK,CACZ,EACA,MAAO,CACL,QAAS,CAAC,kBAAkB,EAC5B,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,cAAc,EACxB,OAAQ,CAAC,aAAa,EACtB,QAAS,CAAC,cAAe,eAAe,CAC1C,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,KAAM,CACJ,aACA,eACA,aACA,SACA,WACA,iBACA,eACA,UACF,CACF,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,GAAGC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,CAAAA,EAEJC,EAAA,cAACP,EAAA,CACC,UAAU,kCACV,MAAO,CACL,aAAc,IAAI,OAAQE,KAAAA,GAAS,GAAKC,EAAO,IAAG,GACpD,CAAA,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}
|
|
@@ -3,9 +3,9 @@ import { Override } from '../../utilities/types';
|
|
|
3
3
|
declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
|
|
5
5
|
}, "size" | "appearance" | "state"> & {
|
|
6
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
7
|
-
state?: "error" | undefined;
|
|
8
|
-
appearance?: "standard" | "modern" | undefined;
|
|
6
|
+
size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
|
|
7
|
+
state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
|
|
8
|
+
appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
11
|
}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as r from"react";import{styled as p}from"../../styled.js";const c=p("select",{base:["bg-(image:--bg-chevron)","appearance-none","[background-repeat:no-repeat,repeat-x]","rounded-md","text-grey-1000","block","font-body","font-normal","leading-[1.4]","w-full","hover:cursor-pointer","-ms-expand:hidden","disabled:opacity-30","disabled:cursor-not-allowed","*[[disabled]]:opacity-30","*[[disabled]]:cursor-not-allowed"],variants:{size:{sm:["bg-position-[right_--spacing(2)_top_50%,0_0]","bg-size-[18px_auto,100%]","text-sm","h-8","pl-2","pr-8"],md:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-10","pl-3","pr-10"],lg:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-12","pl-3","pr-10"]},state:{error:[]},appearance:{standard:["bg-white","border","border-grey-700","focus:border-primary-800","focus:outline-none"],modern:["bg-grey-100","border-none","focus:outline-2","focus:outline-blue-800","focus:outline-offset-1","focus:outline-solid","focus:z-1"]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus:outline-danger"]}]}),t=r.forwardRef(({placeholder:
|
|
1
|
+
import*as r from"react";import{styled as p}from"../../styled.js";const c=p("select",{base:["bg-(image:--bg-chevron)","appearance-none","[background-repeat:no-repeat,repeat-x]","rounded-md","text-grey-1000","block","font-body","font-normal","leading-[1.4]","w-full","hover:cursor-pointer","-ms-expand:hidden","disabled:opacity-30","disabled:cursor-not-allowed","*[[disabled]]:opacity-30","*[[disabled]]:cursor-not-allowed"],variants:{size:{sm:["bg-position-[right_--spacing(2)_top_50%,0_0]","bg-size-[18px_auto,100%]","text-sm","h-8","pl-2","pr-8"],md:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-10","pl-3","pr-10"],lg:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-12","pl-3","pr-10"]},state:{error:[]},appearance:{standard:["bg-white","border","border-grey-700","focus:border-primary-800","focus:outline-none"],modern:["bg-grey-100","border-none","focus:outline-2","focus:outline-blue-800","focus:outline-offset-1","focus:outline-solid","focus:z-1"]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus:outline-danger"]}]},{enabledResponsiveVariants:!0}),t=r.forwardRef(({placeholder:a,children:n,size:s="md",appearance:d="standard",...e},i)=>{const o={size:s,appearance:d,ref:i,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(o.defaultValue=""),r.createElement(c,{...o},a&&r.createElement("option",{disabled:!0,hidden:!0,value:""},a),n)});t.displayName="Select";export{t as Select};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select'
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n 'select',\n {\n base: [\n 'bg-(image:--bg-chevron)',\n 'appearance-none',\n '[background-repeat:no-repeat,repeat-x]',\n 'rounded-md',\n 'text-grey-1000',\n 'block',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'w-full',\n 'hover:cursor-pointer',\n '-ms-expand:hidden',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n '*[[disabled]]:opacity-30',\n '*[[disabled]]:cursor-not-allowed'\n ],\n variants: {\n size: {\n sm: [\n 'bg-position-[right_--spacing(2)_top_50%,0_0]',\n 'bg-size-[18px_auto,100%]',\n 'text-sm',\n 'h-8',\n 'pl-2',\n 'pr-8'\n ],\n md: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-10',\n 'pl-3',\n 'pr-10'\n ],\n lg: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-12',\n 'pl-3',\n 'pr-10'\n ]\n },\n state: {\n error: []\n },\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-700',\n 'focus:border-primary-800',\n 'focus:outline-none'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus:outline-2',\n 'focus:outline-blue-800',\n 'focus:outline-offset-1',\n 'focus:outline-solid',\n 'focus:z-1'\n ]\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:outline-danger']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // | { id: string; 'aria-label'?: string }\n // | { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n // Type assertion needed due to responsive variant size prop compatibility\n const props: React.ComponentProps<typeof StyledSelect> = {\n size,\n appearance,\n ref,\n ...remainingProps\n }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"iEAKA,MAAMA,EAAeC,EACnB,SACA,CACE,KAAM,CACJ,0BACA,kBACA,yCACA,aACA,iBACA,QACA,YACA,cACA,gBACA,SACA,uBACA,oBACA,sBACA,8BACA,2BACA,kCACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,+CACA,2BACA,UACA,MACA,OACA,MACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,CACF,EACA,MAAO,CACL,MAAO,CAAA,CACT,EACA,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,2BACA,oBACF,EACA,OAAQ,CACN,cACA,cACA,kBACA,yBACA,yBACA,sBACA,WACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,sBAAsB,CACnD,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAgBaC,EAASC,EAAM,WAC1B,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,GAAGC,CACL,EACAC,IACG,CAEH,MAAMC,EAAmD,CACvD,KAAAJ,EACA,WAAAC,EACA,IAAAE,EACA,GAAGD,CACL,EAEA,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACH,EAAA,CAAc,GAAGU,CAAAA,EACfN,GACCD,EAAA,cAAC,UAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}
|