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

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

{"version":3,"file":"indicator.cjs","names":["createSlotComponent","indicatorStyle","styled","Float"],"sources":["../../../../src/components/indicator/indicator.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FloatProps } from \"../float\"\nimport type { IndicatorStyle } from \"./indicator.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { dataAttr, isNumber, isObject } from \"../../utils\"\nimport { Float } from \"../float\"\nimport { indicatorStyle } from \"./indicator.style\"\n\ninterface PingOptions {\n  /**\n   * It is used for the color of the ping animation.\n   */\n  color?: CSSProps[\"backgroundColor\"]\n  /**\n   * It is used for the duration of the ping animation.\n   */\n  duration?: CSSProps[\"animationDuration\"]\n  /**\n   * It is used for the count of the ping animation.\n   */\n  iterationCount?: CSSProps[\"animationIterationCount\"]\n  /**\n   * It is used for the scale of the ping animation.\n   */\n  scale?: CSSProps[\"scale\"]\n  /**\n   * It is used for the timing function of the ping animation.\n   */\n  timingFunction?: CSSProps[\"animationTimingFunction\"]\n}\n\nexport interface IndicatorProps\n  extends Omit<HTMLStyledProps, \"offset\">,\n    Omit<ThemeProps<IndicatorStyle>, \"ping\">,\n    Pick<FloatProps, \"offset\" | \"placement\"> {\n  /**\n   * If `true`, the indicator will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The indicator label to use.\n   */\n  label?: ReactNode\n  /**\n   * If `label` is of type number, the maximum number displayed.\n   *\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * If `true`, make an element scale and fade like a radar ping or ripple of water.\n   *\n   * @default false\n   */\n  ping?: boolean | PingOptions\n  /**\n   * If `true`, display 0.\n   *\n   * @default true\n   */\n  showZero?: boolean\n  /**\n   * Props for the float element.\n   */\n  floatProps?: IndicatorFloatProps\n  /**\n   * Props for the label element.\n   */\n  labelProps?: IndicatorLabelProps\n}\n\nconst {\n  PropsContext: IndicatorPropsContext,\n  usePropsContext: useIndicatorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<IndicatorProps, IndicatorStyle>(\n  \"indicator\",\n  indicatorStyle,\n)\n\nexport { IndicatorPropsContext, useIndicatorPropsContext }\n\n/**\n * `Indicator` is a component that displays at the corner of elements such as avatars.\n *\n * @see https://yamada-ui.com/docs/components/indicator\n */\nexport const Indicator = withProvider(\n  ({\n    children,\n    disabled,\n    label,\n    offset,\n    overflowCount = 99,\n    placement,\n    showZero = true,\n    floatProps,\n    labelProps,\n    ...rest\n  }) => {\n    const numeric = isNumber(label)\n\n    disabled ??= numeric && !showZero && (label as number) <= 0\n\n    const computedLabel = useMemo(() => {\n      if (numeric && label > overflowCount) {\n        return (\n          <>\n            {overflowCount}\n            <styled.span>+</styled.span>\n          </>\n        )\n      } else {\n        return label\n      }\n    }, [numeric, label, overflowCount])\n\n    return (\n      <styled.div {...rest}>\n        {children}\n\n        {!disabled ? (\n          <IndicatorFloat offset={offset} placement={placement} {...floatProps}>\n            <IndicatorLabel data-numeric={dataAttr(numeric)} {...labelProps}>\n              {computedLabel}\n            </IndicatorLabel>\n          </IndicatorFloat>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ ping, ...rest }) => {\n  if (isObject(ping)) {\n    const { color, duration, iterationCount, scale, timingFunction } = ping\n\n    return {\n      ...rest,\n      \"--animation-scale\": scale,\n      \"--duration\": duration ? `durations.${duration}` : undefined,\n      \"--iteration-count\": iterationCount,\n      \"--ping-color\": color ? `colors.${color}` : undefined,\n      \"--timing-function\": timingFunction\n        ? `easings.${timingFunction}`\n        : undefined,\n      ping: true,\n    }\n  } else {\n    return { ...rest, ping }\n  }\n})\n\ninterface IndicatorFloatProps extends FloatProps {}\n\nconst IndicatorFloat = withContext<\"div\", IndicatorFloatProps>(Float, \"float\")()\n\ninterface IndicatorLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst IndicatorLabel = withContext<\"span\", IndicatorLabelProps>(\n  \"span\",\n  \"label\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AA6EA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,6CACF,aACAC,uCACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,UACA,UACA,OACA,QACA,gBAAgB,IAChB,WACA,WAAW,MACX,YACA,WACA,GAAG,WACC;CACJ,MAAM,0DAAmB,MAAM;AAE/B,cAAa,WAAW,CAAC,YAAa,SAAoB;CAE1D,MAAM,yCAA8B;AAClC,MAAI,WAAW,QAAQ,cACrB,QACE,qFACG,eACD,2CAACC,uBAAO,kBAAK,MAAe,IAC3B;MAGL,QAAO;IAER;EAAC;EAAS;EAAO;EAAc,CAAC;AAEnC,QACE,4CAACA,uBAAO;EAAI,GAAI;aACb,UAEA,CAAC,WACA,2CAAC;GAAuB;GAAmB;GAAW,GAAI;aACxD,2CAAC;IAAe,gEAAuB,QAAQ;IAAE,GAAI;cAClD;KACc;IACF,GACf;GACO;GAGjB,OACD,EAAE,EAAE,KAAM,GAAG,WAAW;AACvB,qDAAa,KAAK,EAAE;EAClB,MAAM,EAAE,OAAO,UAAU,gBAAgB,OAAO,mBAAmB;AAEnE,SAAO;GACL,GAAG;GACH,qBAAqB;GACrB,cAAc,WAAW,aAAa,aAAa;GACnD,qBAAqB;GACrB,gBAAgB,QAAQ,UAAU,UAAU;GAC5C,qBAAqB,iBACjB,WAAW,mBACX;GACJ,MAAM;GACP;OAED,QAAO;EAAE,GAAG;EAAM;EAAM;EAE1B;AAIF,MAAM,iBAAiB,YAAwCC,qBAAO,QAAQ,EAAE;AAIhF,MAAM,iBAAiB,YACrB,QACA,QACD,EAAE"}