{children}

) } export interface MeterFilledTrackProps extends React.HTMLAttributes { percentage: number } export const MeterFilledTrack = ({ className, percentage, ...props }: MeterFilledTrackProps) => { return (

) } `,children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BD93F9"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BD93F9"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ReactAria "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react-aria-components"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { cx } "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"../lib/cva.config"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" Meter"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" ReactAria"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"MeterProps"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"ReactAria.Meter"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"cx"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"w-full"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:", className)} {"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props} />"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" MeterTrack"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" children,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">) "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"cx"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"h-2 w-full overflow-hidden rounded bg-slate-200 dark:bg-slate-700"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" >"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {children}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" interface"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" MeterFilledTrackProps"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" extends"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"> {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" percentage"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" number"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" MeterFilledTrack"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" percentage,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" MeterFilledTrackProps"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"cx"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"h-full bg-black dark:bg-white"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:", className)}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{{ width"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" percentage "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"%"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})})]}),` `,(0,e.jsx)(r,{lvl:"2",slug:"examples",children:"Examples"}),` `,(0,e.jsx)(F,{type:"note",children:(0,e.jsxs)(l.p,{children:["Althought similar to ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"ProgressBar"})}),", ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"Meter"})}),` is used to represent an amount or quantity. For example: Storage space, download speed, or battery life.`]})}),` `,(0,e.jsx)(r,{lvl:"3",slug:"default",children:"Default"}),` `,(0,e.jsxs)(l.p,{children:["This is the default ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"Meter"})})]}),` `,(0,e.jsx)(p,{name:"meter",story:"default",children:(0,e.jsx)(l.figure,{__src__:"registry/meter/default.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import { Label, Meter, MeterFilledTrack, MeterTrack } from 'ui' export function Default() { return ( {({ percentage }) => ( <> Meter Label )} ) }`,children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Label, Meter, MeterFilledTrack, MeterTrack } "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,e.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:" Default"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Meter"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD93F9"},children:"75"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:"minValue"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD93F9"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:"maxValue"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD93F9"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"percentage"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Meter Label"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"MeterTrack"}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"MeterFilledTrack"}),(0,e.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" percentage"}),(0,e.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{percentage} />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})}),` `,(0,e.jsx)(r,{lvl:"3",slug:"with-custom-children",children:"With Custom Children"}),` `,` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.strong,{children:"Coming soon:"})," An example of ",(0,e.jsx)(l.strong,{children:(0,e.jsx)(l.code,{children:"Meter"})})," with custom children"]})]})}function S(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(u,n)})):u(n)}var T=S;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(k);})(); ;return Component;

Meter

Installation

Examples

Default

With Custom Children