@yamada-ui/react/dist/cjs/components/skeleton/skeleton.cjs.map

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

{"version":3,"file":"skeleton.cjs","names":["createComponent","skeletonStyle","useValidChildren","varAttr"],"sources":["../../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SkeletonStyle } from \"./skeleton.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { dataAttr, isNumber, useValidChildren } from \"../../utils\"\nimport { skeletonStyle } from \"./skeleton.style\"\n\nexport interface SkeletonProps\n  extends HTMLStyledProps,\n    ThemeProps<SkeletonStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSProps[\"color\"]\n  /**\n   * The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  fitContent?: boolean\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSProps[\"color\"]\n}\n\nconst {\n  PropsContext: SkeletonPropsContext,\n  usePropsContext: useSkeletonPropsContext,\n  withContext,\n} = createComponent<SkeletonProps, SkeletonStyle>(\"skeleton\", skeletonStyle)\n\nexport { SkeletonPropsContext, useSkeletonPropsContext }\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see https://yamada-ui.com/docs/components/skeleton\n */\nexport const Skeleton = withContext(\"div\", { transferProps: [\"loading\"] })(\n  undefined,\n  ({\n    children,\n    duration,\n    endColor,\n    fadeDuration,\n    fitContent,\n    loading,\n    startColor,\n    ...rest\n  }) => {\n    const validChildren = useValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    fitContent ??= hasChildren\n\n    return {\n      \"aria-busy\": loading,\n      \"data-loaded\": dataAttr(!loading),\n      \"data-loading\": dataAttr(loading),\n      \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n      \"--end-color\": varAttr(endColor, \"colors\"),\n      \"--fade-duration\": isNumber(fadeDuration)\n        ? `${fadeDuration}s`\n        : fadeDuration,\n      \"--height\": fitContent ? \"fit-content\" : undefined,\n      \"--start-color\": varAttr(startColor, \"colors\"),\n      \"--width\": fitContent ? \"fit-content\" : undefined,\n      children,\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACEA,yCAA8C,YAAYC,qCAAc;;;;;;AAS5E,MAAa,WAAW,YAAY,OAAO,EAAE,eAAe,CAAC,UAAU,EAAE,CAAC,CACxE,SACC,EACC,UACA,UACA,UACA,cACA,YACA,SACA,WACA,GAAG,WACC;CAEJ,MAAM,cAAc,CAAC,CADCC,kCAAiB,SAAS,CACZ;AAEpC,gBAAe;AAEf,QAAO;EACL,aAAa;EACb,+DAAwB,CAAC,QAAQ;EACjC,gEAAyB,QAAQ;EACjC,8DAAuB,SAAS,GAAG,GAAG,SAAS,KAAK;EACpD,eAAeC,oBAAQ,UAAU,SAAS;EAC1C,mEAA4B,aAAa,GACrC,GAAG,aAAa,KAChB;EACJ,YAAY,aAAa,gBAAgB;EACzC,iBAAiBA,oBAAQ,YAAY,SAAS;EAC9C,WAAW,aAAa,gBAAgB;EACxC;EACA,GAAG;EACJ;EAEJ"}