@yamada-ui/transitions/dist/chunk-GDH5X5LN.mjs.map

Yamada UI transitions components

{"version":3,"sources":["../src/rotate.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport {\n  omitThemeProps,\n  useComponentStyle,\n  useCreateVars,\n} from \"@yamada-ui/core\"\nimport { motion, motionForwardRef, useMotionAnimation } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\n\nexport type RotateIdent = \"from\" | \"to\"\n\ninterface RotateOptions {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactElement\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactElement\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: RotateIdent\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.4\n   */\n  duration?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   * @deprecated Use `readOnly` instead.\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The animation rotation.\n   *\n   * @default 45\n   */\n  rotate?: number\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: RotateIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: RotateIdent) => void\n}\n\nexport interface RotateProps\n  extends Merge<MotionProps<\"button\">, RotateOptions>,\n    ThemeProps<\"Rotate\"> {}\n\n/**\n * `Rotate` is an animation component that alternately rotates two elements as they switch.\n *\n * @see Docs https://yamada-ui.com/components/transitions/rotate\n */\nexport const Rotate = motionForwardRef<RotateProps, \"button\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Rotate\", props)\n  const {\n    className,\n    defaultValue = \"from\",\n    delay = 0,\n    isDisabled,\n    disabled = isDisabled,\n    duration = 0.4,\n    from,\n    isReadOnly,\n    readOnly = isReadOnly,\n    rotate = 45,\n    to,\n    value: valueProp,\n    onChange: onChangeProp,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [vars, { opacity }] = useCreateVars(\n    { opacity: 1, ...styles, ...rest },\n    [\"opacity\"],\n    { transform: true },\n  )\n  const animate = useMotionAnimation()\n  const [value, setValue] = useControllableState<RotateIdent>({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const css: CSSUIObject = {\n    vars,\n    ...styles,\n  }\n\n  const onClick = useCallback(async () => {\n    if (readOnly) return\n\n    await animate.start({\n      opacity: 0,\n      rotate: `${rotate}deg`,\n      transition: { delay, duration },\n    })\n\n    setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n    await animate.start({\n      opacity: opacity,\n      rotate: \"0deg\",\n      transition: { duration },\n    })\n  }, [readOnly, animate, rotate, duration, delay, setValue, opacity])\n\n  return (\n    <motion.button\n      ref={ref}\n      type=\"button\"\n      className={cx(\"ui-rotate\", `ui-rotate--${value}`, className)}\n      data-disabled={dataAttr(disabled)}\n      data-readonly={dataAttr(readOnly)}\n      data-value={value}\n      animate={animate}\n      custom={rotate}\n      disabled={disabled}\n      initial={{ opacity, rotate: \"0deg\" }}\n      onClick={onClick}\n      __css={css}\n      {...rest}\n    >\n      {value === \"from\" ? from : to}\n    </motion.button>\n  )\n})\n\nRotate.displayName = \"Rotate\"\nRotate.__ui__ = \"Rotate\"\n"],"mappings":";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,kBAAkB,0BAA0B;AAC7D,SAAS,4BAA4B;AACrC,SAAS,IAAI,gBAAgB;AAC7B,SAAS,mBAAmB;AAuIxB;AArDG,IAAM,SAAS,iBAAwC,CAAC,OAAO,QAAQ;AAC5E,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,UAAU,KAAK;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;AAAA,IAC1B,EAAE,SAAS,GAAG,GAAG,QAAQ,GAAG,KAAK;AAAA,IACjC,CAAC,SAAS;AAAA,IACV,EAAE,WAAW,KAAK;AAAA,EACpB;AACA,QAAM,UAAU,mBAAmB;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAkC;AAAA,IAC1D;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,MAAmB;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,EACL;AAEA,QAAM,UAAU,YAAY,YAAY;AACtC,QAAI,SAAU;AAEd,UAAM,QAAQ,MAAM;AAAA,MAClB,SAAS;AAAA,MACT,QAAQ,GAAG,MAAM;AAAA,MACjB,YAAY,EAAE,OAAO,SAAS;AAAA,IAChC,CAAC;AAED,aAAS,CAAC,SAAU,SAAS,SAAS,OAAO,MAAO;AAEpD,UAAM,QAAQ,MAAM;AAAA,MAClB;AAAA,MACA,QAAQ;AAAA,MACR,YAAY,EAAE,SAAS;AAAA,IACzB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,SAAS,QAAQ,UAAU,OAAO,UAAU,OAAO,CAAC;AAElE,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW,GAAG,aAAa,cAAc,KAAK,IAAI,SAAS;AAAA,MAC3D,iBAAe,SAAS,QAAQ;AAAA,MAChC,iBAAe,SAAS,QAAQ;AAAA,MAChC,cAAY;AAAA,MACZ;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,OAAO;AAAA,MACnC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,oBAAU,SAAS,OAAO;AAAA;AAAA,EAC7B;AAEJ,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}