UNPKG

@yamada-ui/react

Version:

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

1 lines 4.68 kB
{"version":3,"file":"airy.cjs","names":["createComponent","airyStyle","useControllableState","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"sources":["../../../../src/components/airy/airy.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { AiryStyle } from \"./airy.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n createComponent,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { airyStyle } from \"./airy.style\"\n\nexport interface AiryProps\n extends Omit<HTMLMotionProps<\"button\">, \"onChange\">,\n ThemeProps<AiryStyle> {\n /**\n * Passing React elements to \"from\" is required.\n */\n from: ReactNode\n /**\n * Passing React elements to \"to\" is required.\n */\n to: ReactNode\n /**\n * You can set the initial state.\n *\n * @default 'from'\n */\n defaultValue?: KeyframeIdent\n /**\n * The animation delay.\n *\n * @default 0\n */\n delay?: number\n /**\n * If `true`, the component is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The animation duration.\n *\n * @default 0.2\n */\n duration?: number\n /**\n * If `true`, the component is readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * Use this when you want to control the animation from outside the component.\n */\n value?: KeyframeIdent\n /**\n * This is a callback function that is called when the animation state changes.\n */\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: AiryPropsContext,\n usePropsContext: useAiryPropsContext,\n withContext,\n} = createComponent<AiryProps, AiryStyle>(\"airy\", airyStyle)\n\nexport { AiryPropsContext, useAiryPropsContext }\n\n/**\n * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.\n *\n * @see https://yamada-ui.com/docs/components/airy\n */\nexport const Airy = withContext<\"button\", AiryProps>(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.2,\n from,\n readOnly,\n to,\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const opacity = \"var(--opacity)\"\n const animate = useAnimation()\n const [value, setValue] = useControllableState<KeyframeIdent>({\n defaultValue,\n value: valueProp,\n onChange,\n })\n\n const onClick = useCallback(async () => {\n if (readOnly) return\n\n await animate.start({ opacity: 0, transition: { delay, duration } })\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n await animate.start({ opacity, transition: { duration } })\n }, [animate, setValue, readOnly, opacity, duration, delay])\n\n return (\n <motion.button\n type=\"button\"\n data-disabled={dataAttr(disabled)}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n animate={animate}\n disabled={disabled}\n initial={{ opacity }}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n {value === \"from\" ? from : to}\n </motion.button>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqEA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACEA,yCAAsC,QAAQC,6BAAU;;;;;;AAS5D,MAAa,OAAO,aACjB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,IACA,OAAO,WACP,UACA,SAAS,YACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,0CAAwB;CAC9B,MAAM,CAAC,OAAO,YAAYC,gEAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,iCAAsB,YAAY;AACtC,MAAI,SAAU;AAEd,QAAM,QAAQ,MAAM;GAAE,SAAS;GAAG,YAAY;IAAE;IAAO;IAAU;GAAE,CAAC;AAEpE,YAAU,SAAU,SAAS,SAAS,OAAO,OAAQ;AAErD,QAAM,QAAQ,MAAM;GAAE;GAAS,YAAY,EAAE,UAAU;GAAE,CAAC;IACzD;EAAC;EAAS;EAAU;EAAU;EAAS;EAAU;EAAM,CAAC;AAE3D,QACE,2CAACC,uBAAO;EACN,MAAK;EACL,iEAAwB,SAAS;EACjC,iEAAwB,SAAS;EACjC,cAAY;EACH;EACC;EACV,SAAS,EAAE,SAAS;EACpB,2DAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;GACb;EAGrB,CAAC,SAAY,UAAU;CACtB,MAAM,MAAMC,6CAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;AAGnE,QAAO;EAAE,GAFIC,+CAAuB,OAAO,EAAE,SAAS,WAAW,CAAC;EAEhD;EAAK,SAAS;EAAa;EAC7C"}