{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"indicator","type":"registry:ui","title":"Indicator","description":"A dot or a count on the corner of a button, an avatar or a tab.","dependencies":[],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-locale.json"],"files":[{"path":"registry/dashral/indicator.tsx","type":"registry:file","target":"components/dashral/indicator.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { useLocale } from \"./lib/locale\"\nimport { cn } from \"./lib/utils\"\n\ntype IndicatorColor = \"primary\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"destructive\" | \"highlight\"\n\n// The dot or badge, and its ping. Every class is written out in full so Tailwind finds it.\nconst colors: Record = {\n primary: { fill: \"bg-primary text-primary-foreground\", ping: \"bg-primary\" },\n neutral: { fill: \"bg-foreground text-background\", ping: \"bg-foreground\" },\n info: { fill: \"bg-info text-info-foreground\", ping: \"bg-info\" },\n success: { fill: \"bg-success text-success-foreground\", ping: \"bg-success\" },\n warning: { fill: \"bg-warning text-warning-foreground\", ping: \"bg-warning\" },\n destructive: { fill: \"bg-destructive text-destructive-foreground\", ping: \"bg-destructive\" },\n highlight: { fill: \"bg-highlight text-highlight-foreground\", ping: \"bg-highlight\" },\n}\n\ntype IndicatorPosition = \"top-end\" | \"bottom-end\" | \"top-start\" | \"bottom-start\"\n\n// Where it sits: its centre on the corner of a square element, or on the edge of a round one (an avatar), where the\n// corner would leave it floating in the air.\nconst positions: Record<\"square\" | \"round\", Record> = {\n square: {\n \"top-end\": \"top-0 end-0 -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2\",\n \"bottom-end\": \"bottom-0 end-0 translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2\",\n \"top-start\": \"top-0 start-0 -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2\",\n \"bottom-start\": \"bottom-0 start-0 translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2\",\n },\n round: {\n \"top-end\": \"top-[14.6%] end-[14.6%] -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2\",\n \"bottom-end\": \"bottom-[14.6%] end-[14.6%] translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2\",\n \"top-start\": \"top-[14.6%] start-[14.6%] -translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2\",\n \"bottom-start\": \"bottom-[14.6%] start-[14.6%] translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2\",\n },\n}\n\ntype IndicatorProps = Omit, \"children\"> & {\n /** What it sits on: an icon button, an avatar, a tab, a nav link. */\n children: React.ReactNode\n /** A number in a small badge (\"3\", \"99+\"); without it, a dot. 0 hides it, unless showZero. */\n count?: number\n /** Above this, \"99+\". */\n max?: number\n showZero?: boolean\n /** Whether it shows. It scales in and out on the spring, so toggling it never pops. */\n show?: boolean\n color?: IndicatorColor\n position?: IndicatorPosition\n /** round: for a round element (an avatar), so it sits on the edge rather than off the corner. */\n shape?: \"square\" | \"round\"\n /** A soft ring pulsing out from it, for something live or urgent. Still with reduced motion. */\n pulse?: boolean\n /**\n * What it means, for screen readers: \"3 unread messages\", \"New\". Without it, it's decoration (hidden from them), so\n * say it in the element's own label instead.\n */\n label?: string\n classNames?: { indicator?: string }\n}\n\n/**\n * A dot or a count on the corner of something, in one tag: `