{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "widgets", "title": "Widgets", "description": "Desktop widgets for weather, a calendar day and device batteries, in small, medium and large sizes that scale with their width.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/widgets.tsx", "content": "// Adapted from Ballmac UI (https://github.com/vamsiy78/ballmac-ui), MIT License, Copyright (c) 2026 Ballmac.\n\"use client\"\n\nimport * as React from \"react\"\nimport {\n Cloud,\n CloudLightning,\n CloudRain,\n CloudSnow,\n CloudSun,\n Moon,\n Navigation,\n Sun,\n Zap,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype WidgetSize = \"small\" | \"medium\" | \"large\"\n\n/** Small is a square, medium is twice as wide, large is twice as wide and as tall. Every size scales with its width. */\nconst SHAPE: Record = {\n small: \"aspect-square\",\n medium: \"aspect-[2.14/1]\",\n large: \"aspect-[0.955/1]\",\n}\n\ntype WidgetProps = React.ComponentProps<\"section\"> & {\n /** Which size the widget draws at. Set the width with `className` (a small widget is about 10rem wide). */\n size?: WidgetSize\n /** Accessible name of the widget. */\n label: string\n /** Class names for the widget's surface (background and text color). `className` sizes and places the widget. */\n surfaceClassName?: string\n}\n\n/** Frame for a desktop widget: rounded, container-scaled, and one of three sizes. Use it for your own widgets. */\nfunction Widget({\n size = \"small\",\n label,\n className,\n surfaceClassName,\n children,\n ...props\n}: WidgetProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\n/** Font size in the widget's own unit. */\nconst fs = (n: number): React.CSSProperties => ({\n fontSize: `calc(var(--u) * ${n})`,\n})\nconst sp = (n: number) => `calc(var(--u) * ${n})`\n\n// Weather\n\ntype WeatherCondition =\n \"clear\" | \"partly-cloudy\" | \"cloudy\" | \"rain\" | \"snow\" | \"storm\" | \"night\"\n\nconst SKY: Record = {\n clear:\n \"bg-[linear-gradient(165deg,oklch(0.47_0.17_255),oklch(0.58_0.13_232))]\",\n \"partly-cloudy\":\n \"bg-[linear-gradient(165deg,oklch(0.46_0.15_255),oklch(0.57_0.1_238))]\",\n cloudy:\n \"bg-[linear-gradient(165deg,oklch(0.44_0.04_255),oklch(0.55_0.035_245))]\",\n rain: \"bg-[linear-gradient(165deg,oklch(0.36_0.06_260),oklch(0.48_0.06_245))]\",\n snow: \"bg-[linear-gradient(165deg,oklch(0.46_0.06_245),oklch(0.57_0.045_235))]\",\n storm:\n \"bg-[linear-gradient(165deg,oklch(0.28_0.07_290),oklch(0.4_0.08_270))]\",\n night:\n \"bg-[linear-gradient(165deg,oklch(0.22_0.08_275),oklch(0.34_0.1_262))]\",\n}\n\nconst SKY_ICON: Record<\n WeatherCondition,\n React.ComponentType<{ className?: string }>\n> = {\n clear: Sun,\n \"partly-cloudy\": CloudSun,\n cloudy: Cloud,\n rain: CloudRain,\n snow: CloudSnow,\n storm: CloudLightning,\n night: Moon,\n}\n\nconst SKY_WORD: Record = {\n clear: \"Clear\",\n \"partly-cloudy\": \"Partly Cloudy\",\n cloudy: \"Cloudy\",\n rain: \"Rain\",\n snow: \"Snow\",\n storm: \"Thunderstorms\",\n night: \"Clear Night\",\n}\n\ntype HourlyForecast = {\n label: string\n temp: number\n condition: WeatherCondition\n}\ntype DailyForecast = {\n day: string\n low: number\n high: number\n condition: WeatherCondition\n}\n\ntype WeatherWidgetProps = Omit<\n WidgetProps,\n \"label\" | \"children\" | \"surfaceClassName\"\n> & {\n /** Place name. */\n city: string\n /** Current temperature, in degrees. */\n temperature: number\n /** Current sky. Chooses the gradient, icon and wording. */\n condition?: WeatherCondition\n /** Today's high. */\n high: number\n /** Today's low. */\n low: number\n /** Upcoming hours, shown on medium and large widgets. */\n hourly?: HourlyForecast[]\n /** Upcoming days, shown on the large widget. */\n daily?: DailyForecast[]\n}\n\nfunction SkyIcon({\n condition,\n className,\n style,\n}: {\n condition: WeatherCondition\n className?: string\n style?: React.CSSProperties\n}) {\n const Icon = SKY_ICON[condition]\n return (\n \n \n \n )\n}\n\n/** A weather widget with a sky gradient that follows the condition, hourly strip and daily ranges. */\nfunction WeatherWidget({\n city,\n temperature,\n condition = \"clear\",\n high,\n low,\n hourly = [],\n daily = [],\n size = \"small\",\n className,\n ...props\n}: WeatherWidgetProps) {\n const min = Math.min(...daily.map((d) => d.low), low)\n const max = Math.max(...daily.map((d) => d.high), high)\n const summary = `${city}, ${temperature} degrees, ${SKY_WORD[condition]}. High ${high}, low ${low}.`\n return (\n \n

{summary}

\n \n
\n
\n \n {city}\n \n

\n \n {temperature}°\n

\n
\n {size !== \"small\" && (\n \n \n

\n {SKY_WORD[condition]}\n

\n

\n H:{high}° L:{low}°\n

\n
\n )}\n \n {size === \"small\" && (\n
\n \n \n {SKY_WORD[condition]}\n

\n

\n H:{high}° L:{low}°\n

\n
\n )}\n {size !== \"small\" && hourly.length > 0 && (\n \n {hourly.slice(0, 6).map((h) => (\n \n {h.label}\n \n \n {h.temp}°\n \n \n ))}\n \n )}\n {size === \"large\" && daily.length > 0 && (\n \n {daily.slice(0, 5).map((d) => (\n \n {d.day}\n \n \n \n {d.low}°\n \n \n \n \n {d.high}°\n \n \n ))}\n \n )}\n \n \n )\n}\n\n// Calendar\n\nconst WEEKDAYS = [\n \"Sunday\",\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\",\n \"Saturday\",\n]\nconst MONTHS = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n]\n\ntype CalendarEvent = {\n id: string\n title: string\n time: string\n tone?: \"red\" | \"blue\" | \"green\" | \"orange\" | \"purple\"\n}\n\nconst EVENT_TONE: Record, string> = {\n red: \"bg-destructive\",\n blue: \"bg-chart-1\",\n green: \"bg-chart-3\",\n orange: \"bg-chart-5\",\n purple: \"bg-chart-2\",\n}\n\ntype CalendarWidgetProps = Omit<\n WidgetProps,\n \"label\" | \"children\" | \"surfaceClassName\"\n> & {\n /** The day to show, as an ISO date such as \"2026-10-01\". Read as UTC, so every viewer sees the same day. */\n date: string\n /** Events on that day, in order. */\n events?: CalendarEvent[]\n}\n\nfunction monthGrid(year: number, month: number) {\n const first = new Date(Date.UTC(year, month, 1)).getUTCDay()\n const days = new Date(Date.UTC(year, month + 1, 0)).getUTCDate()\n return { lead: first, days }\n}\n\nfunction Events({ events, limit }: { events: CalendarEvent[]; limit: number }) {\n if (events.length === 0)\n return (\n

\n {\"No events today\"}\n

\n )\n return (\n
    \n {events.slice(0, limit).map((e) => (\n
  • \n \n \n {e.title}\n \n {e.time}\n \n \n
    • \n ))}\n
\n )\n}\n\n/** A calendar widget: the day in big type, a month grid with today circled, and the day's events. */\nfunction CalendarWidget({\n date,\n events = [],\n size = \"small\",\n className,\n ...props\n}: CalendarWidgetProps) {\n const d = new Date(`${date}T00:00:00Z`)\n const year = d.getUTCFullYear()\n const month = d.getUTCMonth()\n const day = d.getUTCDate()\n const weekday = WEEKDAYS[d.getUTCDay()]!\n const { lead, days } = monthGrid(year, month)\n const label = `${weekday}, ${MONTHS[month]} ${day}, ${year}`\n const compact = size === \"medium\"\n const cell = compact ? 8.5 : 12\n const grid = (\n \n

\n {MONTHS[month]!.toUpperCase()}\n

\n \n {[\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"].map((w, i) => (\n \n {w}\n \n ))}\n {Array.from({ length: lead }, (_, i) => (\n \n ))}\n {Array.from({ length: days }, (_, i) => (\n \n {i + 1}\n \n ))}\n \n \n )\n return (\n \n \n {size === \"large\" ? (\n <>\n {grid}\n
\n

{label}

\n \n
\n \n ) : (\n <>\n
\n

{label}

\n \n {weekday}\n

\n \n {day}\n

\n
\n \n
\n
\n {size === \"medium\" && grid}\n \n )}\n \n \n )\n}\n\n// Battery\n\ntype BatteryDevice = {\n id: string\n /** Device name. */\n name: string\n /** Charge from 0 to 100. */\n level: number\n /** Whether it is charging. */\n charging?: boolean\n /** Icon for the device. */\n icon: React.ReactNode\n}\n\ntype BatteryWidgetProps = Omit<\n WidgetProps,\n \"label\" | \"children\" | \"surfaceClassName\"\n> & {\n /** Devices and their charge. Small shows four, medium four, large lists them all. */\n devices: BatteryDevice[]\n}\n\nfunction Ring({ device, big }: { device: BatteryDevice; big?: boolean }) {\n const r = 20\n const c = 2 * Math.PI * r\n const level = Math.max(0, Math.min(100, device.level))\n const low = level <= 20 && !device.charging\n return (\n \n \n \n \n \n \n {device.icon}\n \n {device.charging && (\n \n \n \n )}\n \n )\n}\n\n/** A battery widget: one ring per device, red when low, with a bolt while charging. The large size lists devices with bars. */\nfunction BatteryWidget({\n devices,\n size = \"small\",\n className,\n ...props\n}: BatteryWidgetProps) {\n const spoken = (d: BatteryDevice) =>\n `${d.name}, ${Math.round(d.level)} percent${d.charging ? \", charging\" : \"\"}`\n return (\n \n \n {devices.slice(0, size === \"large\" ? 6 : 4).map((d) =>\n size === \"large\" ? (\n \n \n \n \n \n {spoken(d)}\n \n {d.name}\n \n \n \n \n \n \n {Math.round(d.level)}%\n \n \n ) : (\n \n {spoken(d)}\n \n \n \n \n {Math.round(d.level)}%\n \n \n )\n )}\n \n \n )\n}\n\nexport {\n Widget,\n WeatherWidget,\n CalendarWidget,\n BatteryWidget,\n type WidgetProps,\n type WidgetSize,\n type WeatherWidgetProps,\n type WeatherCondition,\n type HourlyForecast,\n type DailyForecast,\n type CalendarWidgetProps,\n type CalendarEvent,\n type BatteryWidgetProps,\n type BatteryDevice,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }