UNPKG

@royyanbach-mhg-test/material-tailwind-react

Version:

@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.

1 lines 2.2 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:true});function _export(target,all){for(var name in all)Object.defineProperty(target,name,{enumerable:true,get:all[name]})}_export(exports,{badge:function(){return badge},default:function(){return _default}});var _badge=require("../../../types/components/badge");var _badgeColors=_interopRequireDefault(require("./badgeColors"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var badge={defaultProps:{color:"red",invisible:false,withBorder:false,overlap:"square",content:undefined,placement:"top-end",className:undefined,containerProps:undefined},valid:{colors:_badge.propTypesColor,overlaps:_badge.propTypesOverlap,placements:_badge.propTypesPlacement},styles:{base:{container:{position:"relative",display:"inline-flex"},badge:{initial:{position:"absolute",minWidth:"min-w-[12px]",minHeight:"min-h-[12px]",borderRadius:"rounded-full",paddingY:"py-1",paddingX:"px-1",fontSize:"text-xs",fontWeight:"font-medium",content:"content-['']",lineHeight:"leading-none",display:"grid",placeItems:"place-items-center"},withBorder:{borderWidth:"border-2",borderColor:"border-white"},withContent:{minWidth:"min-w-[24px]",minHeight:"min-h-[24px]"}}},placements:{"top-start":{square:{top:"top-[4%]",left:"left-[2%]",translateX:"-translate-x-2/4",translateY:"-translate-y-2/4"},circular:{top:"top-[14%]",left:"left-[14%]",translateX:"-translate-x-2/4",translateY:"-translate-y-2/4"}},"top-end":{square:{top:"top-[4%]",right:"right-[2%]",translateX:"translate-x-2/4",translateY:"-translate-y-2/4"},circular:{top:"top-[14%]",right:"right-[14%]",translateX:"translate-x-2/4",translateY:"-translate-y-2/4"}},"bottom-start":{square:{bottom:"bottom-[4%]",left:"left-[2%]",translateX:"-translate-x-2/4",translateY:"translate-y-2/4"},circular:{bottom:"bottom-[14%]",left:"left-[14%]",translateX:"-translate-x-2/4",translateY:"translate-y-2/4"}},"bottom-end":{square:{bottom:"bottom-[4%]",right:"right-[2%]",translateX:"translate-x-2/4",translateY:"translate-y-2/4"},circular:{bottom:"bottom-[14%]",right:"right-[14%]",translateX:"translate-x-2/4",translateY:"translate-y-2/4"}}},colors:_badgeColors.default}};var _default=badge;