@atom-learning/components 4.0.0-beta.8 → 4.0.0

package/dist/components/radio-card/RadioCard.js

@@ -1,2 +1,2 @@
-import*as l from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";import{Box as d}from"../box/Box.js";const o=t(l.Item,{alignItems:"center",bg:"white",border:"1px solid $tonal200",borderRadius:"$0",cursor:"pointer",display:"flex",textAlign:"left",'&[data-state="checked"]':{outline:"2px solid $primary800",outlineOffset:"-2px"},variants:{align:{left:{flexDirection:"row"},right:{flexDirection:"row-reverse"}},size:{md:{px:"$4",py:"$3"},lg:{px:"$5",py:"$4"}},isFullWidth:{true:{width:"100%"},false:{width:"max-content"}}}}),c=t("div",{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $tonal500",borderRadius:"$round",display:"flex",flexShrink:0,justifyContent:"center",p:0,size:"$1",transition:"all 50ms ease-out",'[data-state="checked"] &':{backgroundColor:"$primary800",borderColor:"$primary800"},variants:{containerIsFullWidth:{true:{},false:{}},align:{left:{mr:"$4"},right:{}}},compoundVariants:[{containerIsFullWidth:!0,align:"right",css:{ml:"auto"}},{containerIsFullWidth:!1,align:"right",css:{ml:"$4"}}]}),p=t(l.Indicator,{backgroundColor:"white",borderRadius:"$round",position:"absolute",size:"6px"}),u=({children:a,isFullWidth:r=!1,size:n="md",align:i="left",...s})=>e.createElement(o,{...s,align:i,isFullWidth:r,size:n},e.createElement(c,{align:i,containerIsFullWidth:r},e.createElement(p,null)),e.createElement(d,null,a));export{u as RadioCard,o as StyledRadioCard};
+import*as l from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";import{Box as d}from"../box/Box.js";const o=t(l.Item,{alignItems:"center",bg:"white",border:"1px solid $grey600",borderRadius:"$0",cursor:"pointer",display:"flex",textAlign:"left",'&[data-state="checked"]':{outline:"2px solid $primary800",outlineOffset:"-2px"},variants:{align:{left:{flexDirection:"row"},right:{flexDirection:"row-reverse"}},size:{md:{px:"$4",py:"$3"},lg:{px:"$5",py:"$4"}},isFullWidth:{true:{width:"100%"},false:{width:"max-content"}}}}),c=t("div",{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey900",borderRadius:"$round",display:"flex",flexShrink:0,justifyContent:"center",p:0,size:"$1",transition:"all 50ms ease-out",'[data-state="checked"] &':{backgroundColor:"$primary800",borderColor:"$primary800"},variants:{containerIsFullWidth:{true:{},false:{}},align:{left:{mr:"$4"},right:{}}},compoundVariants:[{containerIsFullWidth:!0,align:"right",css:{ml:"auto"}},{containerIsFullWidth:!1,align:"right",css:{ml:"$4"}}]}),p=t(l.Indicator,{backgroundColor:"white",borderRadius:"$round",position:"absolute",size:"6px"}),u=({children:a,isFullWidth:r=!1,size:n="md",align:i="left",...s})=>e.createElement(o,{...s,align:i,isFullWidth:r,size:n},e.createElement(c,{align:i,containerIsFullWidth:r},e.createElement(p,null)),e.createElement(d,null,a));export{u as RadioCard,o as StyledRadioCard};
 //# sourceMappingURL=RadioCard.js.map

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $tonal200',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $tonal500',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,sBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,sBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}
+{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $grey600',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $grey900',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}

package/dist/components/radio-card/RadioCardGroup.d.ts

@@ -4,6 +4,6 @@ import * as React from 'react';
 import type { Override } from '../../utilities';
 import { Flex } from '../flex';
 import { StyledRadioCard } from './RadioCard';
-declare type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> & VariantProps<typeof StyledRadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
+type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> & VariantProps<typeof StyledRadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
 export declare const RadioCardGroup: ({ css, children, size, isFullWidth, align, gap, justify, ...rest }: RadioCardGroupProps) => React.JSX.Element;
 export {};

package/dist/components/radio-card/RadioCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { RadioCard, StyledRadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> &\n    VariantProps<typeof StyledRadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  css,\n  children,\n  size,\n  isFullWidth,\n  align,\n  gap = '3',\n  justify,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <Flex direction=\"row\" justify={justify} gap={gap} wrap=\"wrap\" css={css}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(child, { size, isFullWidth, align })\n        }\n        return child\n      })}\n    </Flex>\n  </RadioGroup.Root>\n)\n"],"names":["RadioCardGroup","css","children","size","isFullWidth","align","gap","justify","rest","React","RadioGroup","Flex","child","RadioCard"],"mappings":"8JAeaA,EAAiB,CAAC,CAC7B,IAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,QAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CAAAA,EACnBC,EAAA,cAACE,EAAA,CAAK,UAAU,MAAM,QAASJ,EAAS,IAAKD,EAAK,KAAK,OAAO,IAAKL,GAChEQ,EAAM,SAAS,IAAIP,EAAWU,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,YAAAA,EAAO,QAASC,EAC1CJ,EAAM,aAAaG,EAAO,CAAE,KAAAT,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAAC,EAExDO,CACR,CACH,CACF"}
+{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { RadioCard, StyledRadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> &\n    VariantProps<typeof StyledRadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  css,\n  children,\n  size,\n  isFullWidth,\n  align,\n  gap = '3',\n  justify,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <Flex direction=\"row\" justify={justify} gap={gap} wrap=\"wrap\" css={css}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </Flex>\n  </RadioGroup.Root>\n)\n"],"names":["RadioCardGroup","css","children","size","isFullWidth","align","gap","justify","rest","React","RadioGroup","Flex","child","RadioCard"],"mappings":"8JAeaA,EAAiB,CAAC,CAC7B,IAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,QAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CAAAA,EACnBC,EAAA,cAACE,EAAA,CAAK,UAAU,MAAM,QAASJ,EAAS,IAAKD,EAAK,KAAK,OAAO,IAAKL,GAChEQ,EAAM,SAAS,IAAIP,EAAWU,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,YAAAA,EAAO,QAASC,EAC1CJ,EAAM,aACXG,EACA,CAAE,KAAAT,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAC7B,EAEKO,CACR,CACH,CACF"}

package/dist/components/search-field/SearchField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SearchInputProps } from '../../components/search-input';
-declare type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
+type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
 export declare const SearchField: {
     ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: SearchFieldProps): React.JSX.Element;
     displayName: string;

package/dist/components/search-input/SearchInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Input } from '../../components/input';
 import { CSS } from '../../stitches';
-export declare type SearchInputProps = React.ComponentProps<typeof Input> & {
+export type SearchInputProps = React.ComponentProps<typeof Input> & {
     size?: 'sm' | 'md' | 'lg';
     css?: CSS;
     value?: string;

package/dist/components/search-input/SearchInput.js

@@ -1,2 +1,2 @@
-import{Search as I,Close as $}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Box as L}from"../box/Box.js";import{Icon as f}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";import{styled as h}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(t=>(t.SEARCH="SEARCH",t.CLEAR="CLEAR",t))(O||{});const T=h(f,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=h(x,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),E=e.forwardRef(({size:t="md",css:C,value:n,defaultValue:l="",onValueChange:s,clearText:b="Clear",onChange:c,...d},v)=>{const[m,R]=N(),[A,u]=e.useState(l),[g,p]=e.useState(l?"CLEAR":"SEARCH");e.useEffect(()=>{typeof n>"u"||(u(n),p(n?"CLEAR":"SEARCH"))},[n]);const S=e.useMemo(()=>M(t),[t]);e.useImperativeHandle(v,()=>m.current);const z=()=>{var r,o;const a=m.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const H=new Event("input",{bubbles:!0});a.dispatchEvent(H),a.focus(),s==null||s("")},w=r=>{c==null||c(r);const o=r.target.value;u(o),s==null||s(o),p(o?"CLEAR":"SEARCH")},y=()=>g==="SEARCH"?e.createElement(T,{is:I,size:t,css:{size:t=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):e.createElement(k,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:z},e.createElement(f,{is:$}));return e.createElement(L,{css:{position:"relative",height:"max-content",...C}},e.createElement(V,{ref:R,size:t,type:"search",...d,value:A,onChange:w,css:{pr:t==="sm"?"$5":"$6"}}),y())});E.displayName="SearchInput";export{E as SearchInput};
+import{Search as H,Close as $}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as L,InputBackground as x}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as T}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as M}from"../../utilities/hooks/useCallbackRef.js";var N=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(N||{});const O=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=f(L,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),h=t.forwardRef(({size:e="md",css:C,value:s,defaultValue:l="",onValueChange:n,clearText:d="Clear",onChange:c,...b},v)=>{const[u,R]=M(),[g,m]=t.useState(l),[A,p]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof s>"u"||(m(s),p(s?"CLEAR":"SEARCH"))},[s]);const z=t.useMemo(()=>T(e),[e]);t.useImperativeHandle(v,()=>u.current);const S=()=>{var r,o;const a=u.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const y=new Event("input",{bubbles:!0});a.dispatchEvent(y),a.focus(),n==null||n("")},w=r=>{c==null||c(r);const o=r.target.value;m(o),n==null||n(o),p(o?"CLEAR":"SEARCH")},I=()=>A==="SEARCH"?t.createElement(O,{is:H,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(k,{label:d,theme:"neutral",size:z,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:S},t.createElement(E,{is:$}));return t.createElement(x,{css:{position:"relative",width:"auto",...C},size:e},t.createElement(V,{ref:R,size:e,type:"search",...b,value:g,onChange:w,css:{pr:e==="sm"?"$5":"$6"}}),I())});h.displayName="SearchInput";export{h as SearchInput};
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box/'\nimport { Icon } from '~/components/icon/'\nimport { Input } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$tonal300',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInput = styled(Input, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type=\"search\"]::-webkit-search-results-decoration':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content', ...css }}>\n          <StyledSearchInput\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </Box>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInput","Input","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","Box"],"mappings":"snBAqBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAoBF,EAAOG,EAAO,CACtC,6JACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAxFhC,IAAAC,EAAAC,EAyFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EACxC,EAAA,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,OAAQ,cAAe,GAAG9B,CAAI,CAAA,EAC9DF,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$grey700',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <InputBackground\n          css={{ position: 'relative', width: 'auto', ...css }}\n          size={size}\n        >\n          <StyledSearchInputText\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </InputBackground>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,OAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAvFhC,IAAAC,EAAAC,EAwFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAAA,OAAAA,EAG5B,KACHC,EAAAE,GAAA,YAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,EACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,MACRjB,EAAAA,GAAA,MAAAA,EAAgB,EAAA,CAClB,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,CAEX,EAAA,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,CAChBX,EAAAA,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CAAA,CACF,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAAAA,EAETnB,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAAA,CAAO,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,MAAO,OAAQ,GAAG9B,CAAI,EACnD,KAAMD,CAAAA,EAEND,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}