{ "name": "tealmac-ui", "homepage": "https://ui.tealmac.com", "items": [ { "name": "index", "dependencies": [ "class-variance-authority", "lucide-react" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "utils" ], "files": [], "cssVars": {}, "type": "registry:style" }, { "name": "ai-chat", "title": "AI Chat", "description": "A chat layout with a message log that stays scrolled to the newest message while replies stream, a jump-to-latest button, an empty state with suggestions and a footer for the input.", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/tealmac/ai-chat.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "ai-message", "title": "AI Message", "description": "A chat message with user, assistant and system roles, an avatar slot, an actions row with a copy button and a timestamp.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/tealmac/ai-message.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "angle-slider", "title": "Angle Slider", "description": "A circular handle for choosing an angle from 0 to 359 degrees, with wrap-around, markers and snapping, for gradients, shadows and rotation.", "files": [ { "path": "registry/tealmac/angle-slider.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "animated-beam", "title": "Animated Beam", "description": "An animated beam of light which travels along a path. Useful for showcasing the \"integration\" features of a website.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/animated-beam.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "animated-gradient-text", "title": "Animated Gradient Text", "description": "An animated gradient background which transitions between colors for text.", "files": [ { "path": "registry/tealmac/animated-gradient-text.tsx", "type": "registry:ui" } ], "cssVars": { "theme": { "animate-gradient": "gradient 8s linear infinite" } }, "css": { "@keyframes gradient": { "to": { "background-position": "var(--bg-size, 300%) 0" } } }, "type": "registry:ui" }, { "name": "animated-grid-pattern", "title": "Animated Grid Pattern", "description": "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/animated-grid-pattern.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "animated-number-flow", "title": "Animated Number Flow", "description": "A number whose digits roll like an odometer to the new value, with Intl formatting for currency, percent and compact notation.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/animated-number-flow.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "animated-tabs", "title": "Animated Tabs", "description": "Radix tabs with a pill or underline indicator that slides between triggers and panels that fade in.", "dependencies": [ "motion", "@radix-ui/react-tabs" ], "files": [ { "path": "registry/tealmac/animated-tabs.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "api-endpoint", "title": "API Endpoint", "description": "A collapsible card that documents one HTTP endpoint with its parameters, request example and responses.", "dependencies": [ "@radix-ui/react-collapsible", "@radix-ui/react-tabs", "lucide-react" ], "registryDependencies": [ "@tealmac/copy-button", "@tealmac/highlight" ], "files": [ { "path": "registry/tealmac/api-endpoint.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "artifact-panel", "title": "Artifact Panel", "description": "A panel for content an assistant generates, with Preview and Code tabs, version stepping, copy, download and a streaming state.", "dependencies": [ "@radix-ui/react-tabs", "lucide-react", "motion" ], "files": [ { "path": "registry/tealmac/artifact-panel.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "async-tree", "title": "Async Tree", "description": "A tree that loads each branch the first time it opens, with a busy row, a spoken status, an error state and a retry.", "registryDependencies": [ "@tealmac/tree-view" ], "files": [ { "path": "registry/tealmac/async-tree.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "audio-player", "title": "Audio Player", "description": "A podcast-style audio player with play and pause, skip back and forward, a scrubber with chapter ticks, the current chapter and a speed control. Works with a real file or as a silent demo.", "dependencies": [ "lucide-react", "@radix-ui/react-slider" ], "files": [ { "path": "registry/tealmac/audio-player.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "aurora-background", "title": "Aurora Background", "description": "A background of blurred, slowly drifting colored light with vertical curtains, drawn with CSS layers.", "files": [ { "path": "registry/tealmac/aurora-background.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "auto-form", "title": "Auto Form", "description": "Render a complete, accessible form from a JSON Schema (or a zod schema through z.toJSONSchema): strings, numbers, booleans, enums, nested objects and arrays, with built-in validation and per-field overrides.", "registryDependencies": [ "field", "input", "textarea", "native-select", "checkbox", "switch", "radio-group", "label", "button", "spinner", "@tealmac/form-store", "@tealmac/field-array" ], "files": [ { "path": "registry/tealmac/auto-form.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "banner", "title": "Banner", "description": "A page-wide announcement bar with a tone icon, title, description, optional action and an optional dismiss button.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/banner.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "beams-background", "title": "Beams Background", "description": "A canvas background of thin vertical rails with beams of light traveling along them over a soft glow.", "files": [ { "path": "registry/tealmac/beams-background.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "blur-fade", "title": "Blur Fade", "description": "Blur fade in and out animation. Used to smoothly fade in and out content.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/blur-fade.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "border-beam", "title": "Border Beam", "description": "An animated beam of light which travels along the border of its container.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/border-beam.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "bottom-sheet", "title": "Bottom Sheet", "description": "A modal sheet that rises from the bottom edge, rests at snap points you choose, drags and flings between them, and closes with Escape, the overlay or a downward drag.", "dependencies": [ "@radix-ui/react-dialog", "@use-gesture/react" ], "files": [ { "path": "registry/tealmac/bottom-sheet.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "browser-frame", "title": "Browser Frame", "description": "A Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, at natural size or laid out at desktop width and scaled to fit.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/media" ], "files": [ { "path": "registry/tealmac/browser-frame.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "calendar-grid", "title": "Calendar Grid", "description": "An accessible month grid for single dates, ranges or whole weeks in any Intl calendar (Persian, Hijri, Hebrew, Buddhist and more), with ISO values.", "registryDependencies": [ "@tealmac/date-time-core" ], "files": [ { "path": "registry/tealmac/calendar-grid.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "calendar-month-view", "title": "Calendar Month View", "description": "A month calendar that shows dated features and lets you jump by month and year.", "dependencies": [ "date-fns", "jotai", "lucide-react" ], "registryDependencies": [ "button", "command", "popover" ], "files": [ { "path": "registry/tealmac/calendar-month-view.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "callout", "title": "Callout", "description": "A boxed note for documentation and settings pages, with a kind label, title, body and optional action.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/callout.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "carousel-aria", "title": "Carousel ARIA", "description": "The tabbed carousel from the WAI-ARIA Authoring Practices: optional rotation button, previous and next, and a roving tablist that selects one tabpanel slide.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/carousel-kit" ], "files": [ { "path": "registry/tealmac/carousel-aria.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "carousel-free-scroll", "title": "Carousel Free Scroll", "description": "A drag-and-fling row of cards that glides with momentum and stops anywhere, with edge fades, scroll buttons and a progress bar.", "dependencies": [ "embla-carousel-react@^8.6.0", "embla-carousel@^8.6.0", "lucide-react" ], "registryDependencies": [ "@tealmac/carousel-kit" ], "files": [ { "path": "registry/tealmac/carousel-free-scroll.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "carousel-kit", "title": "Carousel Kit", "description": "The parts every tealmac carousel is built from: a labelled carousel region, viewport, numbered slides, arrows, dots, a counter and the hooks to drive effects, on Embla.", "dependencies": [ "embla-carousel-react@^8.6.0", "embla-carousel@^8.6.0", "lucide-react" ], "files": [ { "path": "registry/tealmac/carousel-kit.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "carousel-peek", "title": "Carousel Peek", "description": "A responsive carousel with one slide and a peek of the next on phones, two or three per view on wider containers, paged dots and a \"Showing 1-2 of 6\" readout.", "dependencies": [ "embla-carousel-react@^8.6.0", "embla-carousel@^8.6.0", "lucide-react" ], "registryDependencies": [ "@tealmac/carousel-kit" ], "files": [ { "path": "registry/tealmac/carousel-peek.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "carousel-scale", "title": "Carousel Scale", "description": "A centred looping carousel where the middle slide is full size and the slides beside it shrink as they move.", "dependencies": [ "embla-carousel-react@^8.6.0", "embla-carousel@^8.6.0", "lucide-react" ], "registryDependencies": [ "@tealmac/carousel-kit" ], "files": [ { "path": "registry/tealmac/carousel-scale.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "carousel-snap", "title": "Carousel Snap", "description": "A carousel with no carousel library: a native scroll-snap row with buttons that scroll by a page and a position readout.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/carousel-kit" ], "files": [ { "path": "registry/tealmac/carousel-snap.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "changelog-feed", "title": "Changelog Feed", "description": "A release notes feed with a date and version column, one card per release, change type labels, filter chips and a show more toggle for long releases.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "registry/tealmac/changelog-feed.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "citation", "title": "Citation", "description": "An inline source marker for AI answers, shown as a numbered chip or a site pill, that opens a preview card with the title, excerpt and link on hover or focus.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "hover-card" ], "files": [ { "path": "registry/tealmac/citation.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "code-block", "title": "Code Block", "description": "A code panel with a filename header, line numbers, line highlights, wrap toggle and copy button, plus a tabbed variant for several files.", "dependencies": [ "@radix-ui/react-tabs", "lucide-react" ], "files": [ { "path": "registry/tealmac/code-block.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "copy-button", "title": "Copy Button", "description": "A button that copies text to the clipboard and briefly shows a check mark.", "dependencies": [ "class-variance-authority", "lucide-react", "motion" ], "files": [ { "path": "registry/tealmac/copy-button.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "dashboard-01", "title": "Dashboard 01", "description": "A dashboard with a sidebar, summary cards, an interactive area chart and a sortable data table.", "dependencies": [ "@dnd-kit/core", "@dnd-kit/modifiers", "@dnd-kit/sortable", "@dnd-kit/utilities", "@tabler/icons-react", "@tanstack/react-table", "recharts", "sonner", "zod" ], "registryDependencies": [ "avatar", "badge", "button", "card", "chart", "checkbox", "drawer", "dropdown-menu", "input", "label", "select", "separator", "sidebar", "table", "tabs", "toggle-group", "use-mobile" ], "files": [ { "path": "registry/tealmac/dashboard-01.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "date-field", "title": "Date Field", "description": "A segmented date input: day, month and year are separate spinbuttons in the order of the locale, typed or stepped with the keyboard, with an ISO date value.", "registryDependencies": [ "@tealmac/date-time-core", "@tealmac/date-time-segments" ], "files": [ { "path": "registry/tealmac/date-field.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "date-range-field", "title": "Date Range Field", "description": "Two segmented date fields for a start and an end, joined into one range value with reversed-range and length validation.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core", "@tealmac/date-time-segments" ], "files": [ { "path": "registry/tealmac/date-range-field.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "date-time-core", "title": "Date Time Core", "description": "Pure date and time functions on ISO strings with Intl formatting, Intl calendars, presets, relative ranges and recurrence rules.", "files": [ { "path": "registry/tealmac/date-time-core.ts", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "date-time-segments", "title": "Date Time Segments", "description": "The spinbutton segment engine behind the date and time fields.", "files": [ { "path": "registry/tealmac/date-time-segments.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "descriptions", "title": "Descriptions", "description": "Read-only label and value pairs in a responsive grid with column spans, a bordered table look, a title and an extra slot, rendered as a description list.", "files": [ { "path": "registry/tealmac/descriptions.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "dock", "title": "Dock", "description": "An implementation of the MacOS dock using react + tailwindcss + framer motion", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/dock.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "dotted-map", "title": "Dotted Map", "description": "A world map drawn in dots, with optional markers.", "dependencies": [ "svg-dotted-map" ], "files": [ { "path": "registry/tealmac/dotted-map.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "empty-state", "title": "Empty State", "description": "A centered placeholder for screens with no content yet.", "files": [ { "path": "registry/tealmac/empty-state.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "fab", "title": "Floating Action Button", "description": "The main-action button in plain, small, large and extended forms; the extended form collapses to its icon on scroll and keeps its name for screen readers.", "files": [ { "path": "registry/tealmac/fab.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "field", "title": "Field", "description": "Form field layout with label, description and error that wire their ids to the control automatically, plus fieldset, legend, orientation and invalid/disabled state.", "dependencies": [ "class-variance-authority" ], "files": [ { "path": "registry/tealmac/field.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "field-array", "title": "Field Array", "description": "A repeatable group of form rows with add, remove and keyboard reorder (Alt+Arrow), min and max limits, stable row keys, focus management and spoken announcements.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/tealmac/field-array.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "flag", "title": "Flag", "description": "A persistent message card with an icon, title, description, up to two actions and a dismiss button, for things that need attention but not a decision.", "registryDependencies": [ "button" ], "files": [ { "path": "registry/tealmac/flag.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "form-autosave", "title": "Form Autosave", "description": "A useAutosave hook and a status indicator: debounced saves with a single request in flight, a queued follow-up for edits made while saving, retry on failure, and a polite Saving, Saved or Failed announcement.", "files": [ { "path": "registry/tealmac/form-autosave.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "form-store", "title": "Form Store", "description": "A dependency-free form state store with typed field subscriptions, validation on change, blur and submit, schema support, nested paths and array helpers.", "files": [ { "path": "registry/tealmac/form-store.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "frame", "title": "Frame", "description": "A muted frame that holds one or more panels with a header and footer, with nested corners that stay concentric.", "dependencies": [ "class-variance-authority" ], "files": [ { "path": "registry/tealmac/frame.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "globe", "title": "Globe", "description": "An autorotating, interactive, and highly performant globe made using WebGL.", "dependencies": [ "cobe@^0.6.4", "motion" ], "files": [ { "path": "registry/tealmac/globe.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "icon-tile", "title": "Icon Tile", "description": "A square tile that gives icons a consistent surface, in outline, elevated, soft, solid and framed styles.", "dependencies": [ "@radix-ui/react-slot", "class-variance-authority" ], "files": [ { "path": "registry/tealmac/icon-tile.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "image-viewer", "title": "Image Viewer", "description": "A full-screen photo viewer with pinch and double-tap zoom, swipe sideways to change photo, swipe down to close, arrow keys, buttons and a spoken position.", "dependencies": [ "@radix-ui/react-dialog", "@use-gesture/react", "lucide-react" ], "registryDependencies": [ "@tealmac/pinch-zoom" ], "files": [ { "path": "registry/tealmac/image-viewer.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "incident-banner", "title": "Incident Banner", "description": "A status-page style banner for a live incident with the severity written out, a title, a newest-first update timeline and one action.", "files": [ { "path": "registry/tealmac/incident-banner.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "inline-edit", "title": "Inline Edit", "description": "Text that turns into a field in place with confirm and cancel buttons, validation, an async save and focus returned to the text afterwards.", "registryDependencies": [ "button", "input" ], "files": [ { "path": "registry/tealmac/inline-edit.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "install-tabs", "title": "Install Tabs", "description": "Package-manager tabs for a CLI command (pnpm, npm, yarn, bun) with a copy button. Remembers the reader's choice and keeps every instance on the page in sync.", "dependencies": [ "lucide-react", "@radix-ui/react-tabs" ], "files": [ { "path": "registry/tealmac/install-tabs.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "kbd", "title": "Kbd", "description": "A keyboard key primitive for rendering shortcuts, with size variants and a KbdGroup helper for multi-key combinations.", "dependencies": [ "class-variance-authority" ], "files": [ { "path": "registry/tealmac/kbd.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "laptop-frame", "title": "Laptop Frame", "description": "A notched laptop drawn in CSS that shows children or an image on its screen and can open its lid on scroll.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/laptop-frame.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "launchpad", "title": "Launchpad", "description": "A full-screen app launcher overlay with a search field, paged app grid and page dots.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "registry/tealmac/launchpad.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "list-row", "title": "List Row", "description": "The mobile list row and its grouped container: leading visual, title, subtitle, trailing value, chevron, in an inset-grouped or plain edge-to-edge style.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/list-row.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "login-01", "title": "Login 01", "description": "A simple login form.", "registryDependencies": [ "button", "card", "field", "input" ], "files": [ { "path": "registry/tealmac/login-01.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "login-02", "title": "Login 02", "description": "A two column login page with a cover panel.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "field", "input" ], "files": [ { "path": "registry/tealmac/login-02.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "login-03", "title": "Login 03", "description": "A login page with a muted background.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "field", "input" ], "files": [ { "path": "registry/tealmac/login-03.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "login-04", "title": "Login 04", "description": "A login page with a form and a side panel.", "registryDependencies": [ "button", "card", "field", "input" ], "files": [ { "path": "registry/tealmac/login-04.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "login-05", "title": "Login 05", "description": "A simple email-only login page.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "field", "input" ], "files": [ { "path": "registry/tealmac/login-05.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "mac-icons", "title": "Mac Icons", "description": "Decorative SVG icons for desktop mockups, including folders, files with an extension badge, drives and rounded app tiles.", "files": [ { "path": "registry/tealmac/mac-icons.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "mac-window", "title": "Mac Window", "description": "A desktop-style window frame with traffic-light controls, a title bar, an optional toolbar and a translucent sidebar.", "files": [ { "path": "registry/tealmac/mac-window.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "marquee", "title": "Marquee", "description": "An infinite scrolling component that can be used to display text, images, or videos.", "files": [ { "path": "registry/tealmac/marquee.tsx", "type": "registry:ui" } ], "cssVars": { "theme": { "animate-marquee": "marquee var(--duration) infinite linear", "animate-marquee-vertical": "marquee-vertical var(--duration) linear infinite" } }, "css": { "@keyframes marquee": { "from": { "transform": "translateX(0)" }, "to": { "transform": "translateX(calc(-100% - var(--gap)))" } }, "@keyframes marquee-vertical": { "from": { "transform": "translateY(0)" }, "to": { "transform": "translateY(calc(-100% - var(--gap)))" } } }, "type": "registry:ui" }, { "name": "media", "title": "Media", "description": "A picture slot that reserves its space, lazy-loads, takes a URL, an image with alt text and a dark-mode file, or your own element, and falls back to artwork when there is no image or it fails.", "files": [ { "path": "registry/tealmac/media.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "mega-menu", "title": "Mega Menu", "description": "A data-driven header menu with wide panels of grouped, described links, an optional featured card, and an accordion list for small screens.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "navigation-menu" ], "files": [ { "path": "registry/tealmac/mega-menu.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "menu-bar", "title": "Menu Bar", "description": "A desktop-style menu bar built on Radix Menubar, with menus, submenus, checkbox items, shortcuts, status icons and a clock.", "dependencies": [ "lucide-react", "@radix-ui/react-menubar" ], "files": [ { "path": "registry/tealmac/menu-bar.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "meter-group", "title": "Meter Group", "description": "One bar split into labelled parts against a total, with a legend that carries the numbers, for storage, budgets and quotas.", "files": [ { "path": "registry/tealmac/meter-group.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "model-picker", "title": "Model Picker", "description": "A searchable model selector grouped by provider, with capability icons, locked models and a detail pane showing context window, cost and capabilities.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "command", "popover" ], "files": [ { "path": "registry/tealmac/model-picker.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "month-picker", "title": "Month Picker", "description": "A year-at-a-glance grid of twelve months with year paging and min, max and unavailable months, giving a YYYY-MM value.", "registryDependencies": [ "@tealmac/period-grid", "@tealmac/date-time-core", "@tealmac/date-time-segments" ], "files": [ { "path": "registry/tealmac/month-picker.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "number-ticker", "title": "Number Ticker", "description": "Counts up or down to a target number when it scrolls into view.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/number-ticker.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "onboarding-checklist", "title": "Onboarding Checklist", "description": "A getting started checklist with a progress ring, a segmented progress bar, expandable steps with an action button and a completion state.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "registry/tealmac/onboarding-checklist.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "password-input", "title": "Password Input", "description": "A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/password-input.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "period-grid", "title": "Period Grid", "description": "The keyboard-navigable grid of month, year and quarter cells behind the period pickers.", "files": [ { "path": "registry/tealmac/period-grid.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "phone-frame", "title": "Phone Frame", "description": "A modern phone drawn in CSS with a titanium band, side buttons, Dynamic Island, status bar and home indicator. Children render as the screen, laid out at phone resolution and scaled to fit.", "dependencies": [ "motion" ], "registryDependencies": [ "@tealmac/media" ], "files": [ { "path": "registry/tealmac/phone-frame.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "pick-list", "title": "Pick List", "description": "A transfer list where the order of the chosen items matters, reordered by drag, by four order buttons or with Alt and the arrow keys.", "dependencies": [ "@dnd-kit/react" ], "registryDependencies": [ "button", "@tealmac/transfer-list" ], "files": [ { "path": "registry/tealmac/pick-list.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "picker-sheet", "title": "Picker Sheet", "description": "A select for touch screens: a button that shows the choice and opens a bottom sheet with large rows, optional search and single or multiple selection.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/bottom-sheet" ], "files": [ { "path": "registry/tealmac/picker-sheet.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "pinch-zoom", "title": "Pinch Zoom", "description": "A zoom and pan container for maps, diagrams and photos: pinch, double tap, Ctrl or Cmd plus wheel, drag, +/-/0 keys and on-screen buttons, with bounds so content never leaves the box.", "dependencies": [ "@use-gesture/react", "lucide-react" ], "files": [ { "path": "registry/tealmac/pinch-zoom.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "popconfirm", "title": "Popconfirm", "description": "A small confirmation anchored to the control that opened it, with a title, a consequence line and Yes/No actions that stay busy while an async confirm runs.", "registryDependencies": [ "button", "popover" ], "files": [ { "path": "registry/tealmac/popconfirm.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "prompt-input", "title": "Prompt Input", "description": "A chat composer with an auto-growing textarea, file attachments and a send button that turns into Stop while a reply streams.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/tealmac/prompt-input.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "pull-to-refresh", "title": "Pull To Refresh", "description": "A scroll area you pull down from the top to reload, with a resisting indicator, a live-region status and an always-reachable Refresh button for keyboard and mouse.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/pull-to-refresh.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "reasoning-disclosure", "title": "Reasoning Disclosure", "description": "A collapsible panel for a model's reasoning that opens while it thinks and collapses to \"Thought for 12s\" when done.", "dependencies": [ "lucide-react", "motion", "@radix-ui/react-collapsible" ], "files": [ { "path": "registry/tealmac/reasoning-disclosure.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "reui-alert", "title": "Alert (status tones)", "description": "An alert with default, destructive, info, success, warning and inverted tones, a title, a description and an action slot.", "dependencies": [ "class-variance-authority" ], "files": [ { "path": "registry/tealmac/reui-alert.tsx", "type": "registry:ui", "target": "components/reui/alert.tsx" } ], "type": "registry:ui" }, { "name": "reui-cascader", "title": "Cascader", "description": "A multi-level combobox with drill-down, column and tree modes, breadcrumbs, search, async levels and a virtualized list.", "dependencies": [ "@base-ui/react", "@radix-ui/react-slot", "@tanstack/react-virtual", "lucide-react" ], "registryDependencies": [ "scroll-area", "spinner" ], "files": [ { "path": "registry/tealmac/reui-cascader/cascader-async.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-async.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-columns.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-columns.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-context.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-context.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-footer.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-footer.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-i18n.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-i18n.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-item.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-item.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-lib.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-lib.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-nav.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-nav.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-types.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-types.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader-virtual.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader-virtual.tsx" }, { "path": "registry/tealmac/reui-cascader/cascader.tsx", "type": "registry:ui", "target": "components/reui/cascader/cascader.tsx" } ], "type": "registry:ui" }, { "name": "reui-file-type", "title": "File Type Icon", "description": "A file type icon for 99 extensions in brand and family colours, with outline, solid, light and mono variants, six sizes and a lookup from a file name, URL or MIME type.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "registry/tealmac/reui-file-type/file-type.tsx", "type": "registry:ui", "target": "components/reui/file-type.tsx" } ], "type": "registry:ui" }, { "name": "reui-filters", "title": "Filters", "description": "A stepped filter builder with nested attributes, popover value editors and a boolean query tree, in a chip bar or an advanced builder.", "dependencies": [ "class-variance-authority", "date-fns", "lucide-react" ], "registryDependencies": [ "@tealmac/reui-cascader", "button", "button-group", "dropdown-menu", "input", "popover", "tooltip" ], "files": [ { "path": "registry/tealmac/reui-filters/filters-advanced.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-advanced.tsx" }, { "path": "registry/tealmac/reui-filters/filters-builder.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-builder.tsx" }, { "path": "registry/tealmac/reui-filters/filters-chip.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-chip.tsx" }, { "path": "registry/tealmac/reui-filters/filters-context.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-context.tsx" }, { "path": "registry/tealmac/reui-filters/filters-date.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-date.tsx" }, { "path": "registry/tealmac/reui-filters/filters-dnd.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-dnd.tsx" }, { "path": "registry/tealmac/reui-filters/filters-draft.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-draft.tsx" }, { "path": "registry/tealmac/reui-filters/filters-editors.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-editors.tsx" }, { "path": "registry/tealmac/reui-filters/filters-i18n.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-i18n.tsx" }, { "path": "registry/tealmac/reui-filters/filters-lib.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-lib.tsx" }, { "path": "registry/tealmac/reui-filters/filters-operators.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-operators.tsx" }, { "path": "registry/tealmac/reui-filters/filters-query.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-query.tsx" }, { "path": "registry/tealmac/reui-filters/filters-types.tsx", "type": "registry:ui", "target": "components/reui/filters/filters-types.tsx" }, { "path": "registry/tealmac/reui-filters/filters.tsx", "type": "registry:ui", "target": "components/reui/filters/filters.tsx" } ], "type": "registry:ui" }, { "name": "scroll-progress", "title": "Scroll Progress", "description": "A thin bar that shows how far down the page the reader is.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/scroll-progress.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "search-field", "title": "Search Field", "description": "A search input with a leading icon, a clear button and an Enter-to-search callback.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/tealmac/search-field.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "section-list", "title": "Section List", "description": "A grouped list with sticky section headings and an alphabet index that jumps on tap or drag, announces the letter and works with a keyboard.", "files": [ { "path": "registry/tealmac/section-list.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "segmented-control", "title": "Segmented Control", "description": "A single-select toggle with a sliding indicator.", "files": [ { "path": "registry/tealmac/segmented-control.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "sidebar-01", "title": "Sidebar 01", "description": "A simple sidebar with navigation grouped by section.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "dropdown-menu", "label", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-01.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-02", "title": "Sidebar 02", "description": "A sidebar with collapsible sections.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "collapsible", "dropdown-menu", "label", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-02.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-03", "title": "Sidebar 03", "description": "A sidebar with submenus.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-03.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-04", "title": "Sidebar 04", "description": "A floating sidebar with submenus.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-04.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-05", "title": "Sidebar 05", "description": "A sidebar with collapsible submenus.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "collapsible", "label", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-05.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-06", "title": "Sidebar 06", "description": "A sidebar with submenus as dropdowns.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "button", "card", "dropdown-menu", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-06.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-07", "title": "Sidebar 07", "description": "A sidebar that collapses to icons.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "breadcrumb", "collapsible", "dropdown-menu", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-07.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-08", "title": "Sidebar 08", "description": "An inset sidebar with secondary navigation.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "breadcrumb", "collapsible", "dropdown-menu", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-08.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-09", "title": "Sidebar 09", "description": "Collapsible nested sidebars.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "breadcrumb", "dropdown-menu", "label", "separator", "sidebar", "switch" ], "files": [ { "path": "registry/tealmac/sidebar-09.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-10", "title": "Sidebar 10", "description": "A sidebar in a popover.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "button", "collapsible", "dropdown-menu", "popover", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-10.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-11", "title": "Sidebar 11", "description": "A sidebar with a collapsible file tree.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "collapsible", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-11.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-12", "title": "Sidebar 12", "description": "A sidebar with a calendar.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "breadcrumb", "calendar", "collapsible", "dropdown-menu", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-12.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-13", "title": "Sidebar 13", "description": "A sidebar in a dialog.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "breadcrumb", "button", "dialog", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-13.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-14", "title": "Sidebar 14", "description": "A sidebar on the right.", "registryDependencies": [ "breadcrumb", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-14.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-15", "title": "Sidebar 15", "description": "A left and a right sidebar.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "breadcrumb", "calendar", "collapsible", "dropdown-menu", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-15.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sidebar-16", "title": "Sidebar 16", "description": "A sidebar with a sticky site header.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar", "breadcrumb", "button", "collapsible", "dropdown-menu", "label", "separator", "sidebar" ], "files": [ { "path": "registry/tealmac/sidebar-16.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "signup-01", "title": "Signup 01", "description": "A simple signup form.", "registryDependencies": [ "button", "card", "field", "input" ], "files": [ { "path": "registry/tealmac/signup-01.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "signup-02", "title": "Signup 02", "description": "A two column signup page with a cover panel.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "field", "input" ], "files": [ { "path": "registry/tealmac/signup-02.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "signup-03", "title": "Signup 03", "description": "A signup page with a muted background.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "field", "input" ], "files": [ { "path": "registry/tealmac/signup-03.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "signup-04", "title": "Signup 04", "description": "A signup page with a form and a side panel.", "registryDependencies": [ "button", "card", "field", "input" ], "files": [ { "path": "registry/tealmac/signup-04.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "signup-05", "title": "Signup 05", "description": "A simple signup form with social providers.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "field", "input" ], "files": [ { "path": "registry/tealmac/signup-05.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "snippet-tabs", "title": "Snippet Tabs", "description": "Tabbed code samples in several languages with syntax highlighting, a copy button and a remembered language choice.", "dependencies": [ "@radix-ui/react-tabs" ], "registryDependencies": [ "@tealmac/copy-button", "@tealmac/highlight" ], "files": [ { "path": "registry/tealmac/snippet-tabs.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "sortable-tree", "title": "Sortable Tree", "description": "A tree whose rows reorder and nest by drag and drop, or from the keyboard with Alt and the arrow keys, with spoken feedback.", "dependencies": [ "@dnd-kit/react" ], "registryDependencies": [ "@tealmac/tree-view" ], "files": [ { "path": "registry/tealmac/sortable-tree.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "sparkline", "title": "Sparkline", "description": "A small SVG line chart of a numeric series with an optional dot on the last value.", "files": [ { "path": "registry/tealmac/sparkline.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "speed-dial", "title": "Speed Dial", "description": "A floating button that fans out three to six related actions as a menu, with arrow-key navigation, Escape and outside-press to close.", "files": [ { "path": "registry/tealmac/speed-dial.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "spinner", "title": "Spinner", "description": "A single-element loading ring drawn with a conic-gradient mask, with a polite status role.", "files": [ { "path": "registry/tealmac/spinner.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "splitter", "title": "Splitter", "description": "Resizable panels with minimum, maximum and collapsible sizes, keyboard separators that report their size, and drag that reverses in right-to-left layouts.", "files": [ { "path": "registry/tealmac/splitter.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "spotlight-card", "title": "Spotlight Card", "description": "A card with a soft radial highlight that follows the pointer.", "files": [ { "path": "registry/tealmac/spotlight-card.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "statistic", "title": "Statistic", "description": "A single figure with a title, prefix, suffix, precision, locale grouping, a custom formatter, a tone and a loading state.", "files": [ { "path": "registry/tealmac/statistic.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "status-dot", "title": "Status Dot", "description": "A colored dot next to a text label that shows online, busy, away or offline status.", "files": [ { "path": "registry/tealmac/status-dot.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "streaming-text", "title": "Streaming Text", "description": "Text that shows a blinking caret while a reply arrives, and can type out finished text at a set speed for demos and replays.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/streaming-text.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "suggestion-chips", "title": "Suggestion Chips", "description": "Starter or follow-up prompts shown as wrapping pills, a single scrolling row, or cards with descriptions, with loading and refresh states.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "registry/tealmac/suggestion-chips.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "swipe-tabs", "title": "Swipe Tabs", "description": "Tabs whose panels sit in a scroll-snapping row so a swipe changes tab natively, with an indicator that follows the finger and full WAI-ARIA tab keyboard support.", "files": [ { "path": "registry/tealmac/swipe-tabs.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "tab-bar", "title": "Tab Bar", "description": "Bottom navigation for three to five destinations in four looks (iOS, Material, pill, glass) with badges, safe-area padding and aria-current.", "files": [ { "path": "registry/tealmac/tab-bar.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "table-of-contents", "title": "Table Of Contents", "description": "An \"On this page\" list that marks the section in view and scrolls to a heading when a link is chosen.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/table-of-contents.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "tablet-frame", "title": "Tablet Frame", "description": "A modern tablet drawn in CSS with an aluminum frame, thin bezel, front camera, status bar and home indicator, in landscape or portrait. Children render as the screen at tablet resolution, scaled to fit.", "dependencies": [ "motion" ], "registryDependencies": [ "@tealmac/media" ], "files": [ { "path": "registry/tealmac/tablet-frame.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "terminal", "title": "Terminal", "description": "An implementation of the MacOS terminal. Useful for showcasing a command line interface.", "files": [ { "path": "registry/tealmac/terminal.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "thinking-indicator", "title": "Thinking Indicator", "description": "A status line for an assistant that is working, with dots, bars, wave or shimmer animation, rotating labels and an optional timer.", "dependencies": [ "motion" ], "files": [ { "path": "registry/tealmac/thinking-indicator.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "tool-call-card", "title": "Tool Call Card", "description": "A collapsible card for one AI tool call, showing its name, status and duration, with the input and result as formatted JSON.", "dependencies": [ "lucide-react", "@radix-ui/react-collapsible" ], "files": [ { "path": "registry/tealmac/tool-call-card.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "transfer-list", "title": "Transfer List", "description": "Two lists with buttons between them to move items across, with search, select-all, move-all, disabled items and spoken results.", "registryDependencies": [ "button", "input" ], "files": [ { "path": "registry/tealmac/transfer-list.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "tree-view", "title": "Tree View", "description": "An ARIA tree with roving focus, arrow-key navigation, typeahead, single or multiple selection and a headless hook, in one file.", "files": [ { "path": "registry/tealmac/tree-view.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "trial-bar", "title": "Trial Bar", "description": "A slim app bar showing days left in a trial with a progress line and an upgrade action, urgent in the last three days.", "files": [ { "path": "registry/tealmac/trial-bar.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "watch-frame", "title": "Watch Frame", "description": "A smartwatch drawn in CSS with an aluminum case, digital crown, curved glass and a sport, loop or leather strap. The screen is always dark and children render scaled to fit.", "dependencies": [ "motion" ], "registryDependencies": [ "@tealmac/media" ], "files": [ { "path": "registry/tealmac/watch-frame.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "watermark", "title": "Watermark", "description": "A faint tiled text mark over its content for confidential documents and drafts, drawn as an SVG overlay that cannot block clicks and restores itself if removed.", "files": [ { "path": "registry/tealmac/watermark.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "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", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "window-manager", "title": "Window Manager", "description": "A desktop area with draggable, resizable windows that raise on focus, zoom on double-click and minimize into a tray.", "dependencies": [ "motion" ], "registryDependencies": [ "@tealmac/mac-window" ], "files": [ { "path": "registry/tealmac/window-manager.tsx", "type": "registry:ui" } ], "type": "registry:ui" }, { "name": "accordion-demo", "title": "Accordion Demo", "description": "Example of Accordion.", "registryDependencies": [ "accordion" ], "files": [ { "path": "registry/example/accordion-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "ai-chat-demo", "title": "AI Chat Demo", "description": "Example of AI Chat.", "registryDependencies": [ "@tealmac/ai-chat", "@tealmac/ai-message", "@tealmac/prompt-input", "@tealmac/streaming-text" ], "files": [ { "path": "registry/example/ai-chat-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "ai-message-demo", "title": "AI Message Demo", "description": "Example of AI Message.", "registryDependencies": [ "@tealmac/ai-message" ], "files": [ { "path": "registry/example/ai-message-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "alert-dialog-demo", "title": "Alert Dialog Demo", "description": "Example of Alert Dialog.", "registryDependencies": [ "alert-dialog", "button" ], "files": [ { "path": "registry/example/alert-dialog-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "angle-slider-demo", "title": "Angle Slider Demo", "description": "Example of Angle Slider.", "registryDependencies": [ "@tealmac/angle-slider" ], "files": [ { "path": "registry/example/angle-slider-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-beam-bidirectional", "title": "Animated Beam Bidirectional", "description": "Example showing a bidirectional animated beam effect.", "registryDependencies": [ "@tealmac/animated-beam" ], "files": [ { "path": "registry/example/animated-beam-bidirectional.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-beam-demo", "title": "Animated Beam Demo", "description": "Example showing an animated beam of light effect.", "dependencies": [ "@radix-ui/react-icons" ], "registryDependencies": [ "@tealmac/animated-beam" ], "files": [ { "path": "registry/example/animated-beam-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-beam-multiple-inputs", "title": "Animated Beam Multiple Inputs", "description": "Example showing animated beams with multiple input points.", "registryDependencies": [ "@tealmac/animated-beam" ], "files": [ { "path": "registry/example/animated-beam-multiple-inputs.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-beam-multiple-outputs", "title": "Animated Beam Multiple Outputs", "description": "Example showing animated beams with multiple output points.", "registryDependencies": [ "@tealmac/animated-beam" ], "files": [ { "path": "registry/example/animated-beam-multiple-outputs.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-beam-unidirectional", "title": "Animated Beam Unidirectional", "description": "Example showing a unidirectional animated beam effect.", "registryDependencies": [ "@tealmac/animated-beam" ], "files": [ { "path": "registry/example/animated-beam-unidirectional.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-gradient-text-demo", "title": "Animated Gradient Text Demo", "description": "Example showing text with animated gradient backgrounds.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/animated-gradient-text" ], "files": [ { "path": "registry/example/animated-gradient-text-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-gradient-text-demo-2", "title": "Animated Gradient Text Demo 2", "description": "Second example showing text with animated gradient backgrounds.", "registryDependencies": [ "@tealmac/animated-gradient-text" ], "files": [ { "path": "registry/example/animated-gradient-text-demo-2.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-grid-pattern-demo", "title": "Animated Grid Pattern Demo", "description": "Example showing an animated grid pattern background.", "registryDependencies": [ "@tealmac/animated-grid-pattern" ], "files": [ { "path": "registry/example/animated-grid-pattern-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-number-flow-demo", "title": "Animated Number Flow Demo", "description": "Example of Animated Number Flow.", "registryDependencies": [ "@tealmac/animated-number-flow" ], "files": [ { "path": "registry/example/animated-number-flow-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "animated-tabs-demo", "title": "Animated Tabs Demo", "description": "Example of Animated Tabs.", "registryDependencies": [ "@tealmac/animated-tabs" ], "files": [ { "path": "registry/example/animated-tabs-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "api-endpoint-demo", "title": "API Endpoint Demo", "description": "Example of API Endpoint.", "registryDependencies": [ "@tealmac/api-endpoint", "@tealmac/copy-button", "@tealmac/highlight" ], "files": [ { "path": "registry/example/api-endpoint-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "artifact-panel-demo", "title": "Artifact Panel Demo", "description": "Example of Artifact Panel.", "registryDependencies": [ "@tealmac/artifact-panel" ], "files": [ { "path": "registry/example/artifact-panel-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "async-tree-demo", "title": "Async Tree Demo", "description": "Example of the async tree.", "registryDependencies": [ "@tealmac/async-tree", "@tealmac/tree-view" ], "files": [ { "path": "registry/example/async-tree-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "audio-player-demo", "title": "Audio Player Demo", "description": "Example of Audio Player.", "registryDependencies": [ "@tealmac/audio-player" ], "files": [ { "path": "registry/example/audio-player-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "aurora-background-demo", "title": "Aurora Background Demo", "description": "Example of Aurora Background.", "registryDependencies": [ "@tealmac/aurora-background" ], "files": [ { "path": "registry/example/aurora-background-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "auto-form-demo", "title": "Auto Form Demo", "description": "Example of Auto Form.", "registryDependencies": [ "@tealmac/auto-form", "@tealmac/field-array", "@tealmac/form-store" ], "files": [ { "path": "registry/example/auto-form-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "avatar-demo", "title": "Avatar Demo", "description": "Example of Avatar.", "registryDependencies": [ "avatar" ], "files": [ { "path": "registry/example/avatar-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "badge-demo", "title": "Badge Demo", "description": "Example of Badge.", "registryDependencies": [ "badge" ], "files": [ { "path": "registry/example/badge-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "banner-demo", "title": "Banner Demo", "description": "Example of Banner.", "registryDependencies": [ "@tealmac/banner" ], "files": [ { "path": "registry/example/banner-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "beams-background-demo", "title": "Beams Background Demo", "description": "Example of Beams Background.", "registryDependencies": [ "@tealmac/beams-background" ], "files": [ { "path": "registry/example/beams-background-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "blur-fade-demo", "title": "Blur Fade Demo", "description": "Example showing blur fade in and out animations.", "registryDependencies": [ "@tealmac/blur-fade" ], "files": [ { "path": "registry/example/blur-fade-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "blur-fade-text-demo", "title": "Blur Fade Text Demo", "description": "Example showing blur fade animations with text.", "registryDependencies": [ "@tealmac/blur-fade" ], "files": [ { "path": "registry/example/blur-fade-text-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "border-beam-demo", "title": "Border Beam Demo", "description": "Example showing an animated border beam effect.", "registryDependencies": [ "@tealmac/border-beam" ], "files": [ { "path": "registry/example/border-beam-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "border-beam-demo-2", "title": "Border Beam Demo", "description": "Example showing an animated border beam effect.", "registryDependencies": [ "button", "card", "@tealmac/border-beam" ], "files": [ { "path": "registry/example/border-beam-demo-2.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "border-beam-demo-3", "title": "Border Beam Demo 3", "description": "Example showing an animated border beam effect.", "registryDependencies": [ "button", "card", "input", "label", "@tealmac/border-beam" ], "files": [ { "path": "registry/example/border-beam-demo-3.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "border-beam-demo-4", "title": "Border Beam Demo 4", "description": "Example showing an animated border beam effect.", "registryDependencies": [ "button", "@tealmac/border-beam" ], "files": [ { "path": "registry/example/border-beam-demo-4.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "bottom-sheet-demo", "title": "Bottom Sheet Demo", "description": "Example of Bottom Sheet.", "registryDependencies": [ "@tealmac/bottom-sheet" ], "files": [ { "path": "registry/example/bottom-sheet-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "breadcrumb-demo", "title": "Breadcrumb Demo", "description": "Example of Breadcrumb.", "registryDependencies": [ "breadcrumb", "dropdown-menu" ], "files": [ { "path": "registry/example/breadcrumb-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "browser-frame-demo", "title": "Browser Frame Demo", "description": "Example of Browser Frame.", "registryDependencies": [ "@tealmac/browser-frame", "@tealmac/media" ], "files": [ { "path": "registry/example/browser-frame-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "bubble-demo", "title": "Bubble Demo", "description": "Example of Bubble.", "registryDependencies": [ "bubble" ], "files": [ { "path": "registry/example/bubble-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "button-demo", "title": "Button Demo", "description": "Example of Button.", "registryDependencies": [ "button" ], "files": [ { "path": "registry/example/button-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "button-group-demo", "title": "Button Group Demo", "description": "Example of Button Group.", "registryDependencies": [ "button", "button-group", "dropdown-menu" ], "files": [ { "path": "registry/example/button-group-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "calendar-demo", "title": "Calendar Demo", "description": "Example of Calendar.", "registryDependencies": [ "calendar" ], "files": [ { "path": "registry/example/calendar-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "calendar-grid-demo", "title": "Calendar Grid Demo", "description": "Example of Calendar Grid.", "registryDependencies": [ "@tealmac/calendar-grid", "@tealmac/date-time-core" ], "files": [ { "path": "registry/example/calendar-grid-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "callout-demo", "title": "Callout Demo", "description": "Example of Callout.", "registryDependencies": [ "@tealmac/callout" ], "files": [ { "path": "registry/example/callout-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "card-demo", "title": "Card Demo", "description": "Example of Card.", "registryDependencies": [ "button", "card", "input", "label" ], "files": [ { "path": "registry/example/card-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "carousel-aria-demo", "title": "Carousel ARIA Demo", "description": "Example of Carousel ARIA.", "registryDependencies": [ "@tealmac/carousel-aria", "@tealmac/carousel-kit" ], "files": [ { "path": "registry/example/carousel-aria-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "carousel-free-scroll-demo", "title": "Carousel Free Scroll Demo", "description": "Example of Carousel Free Scroll.", "registryDependencies": [ "@tealmac/carousel-free-scroll", "@tealmac/carousel-kit" ], "files": [ { "path": "registry/example/carousel-free-scroll-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "carousel-kit-demo", "title": "Carousel Kit Demo", "description": "Example of Carousel Kit.", "registryDependencies": [ "@tealmac/carousel-kit" ], "files": [ { "path": "registry/example/carousel-kit-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "carousel-peek-demo", "title": "Carousel Peek Demo", "description": "Example of Carousel Peek.", "registryDependencies": [ "@tealmac/carousel-peek", "@tealmac/carousel-kit" ], "files": [ { "path": "registry/example/carousel-peek-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "carousel-scale-demo", "title": "Carousel Scale Demo", "description": "Example of Carousel Scale.", "registryDependencies": [ "@tealmac/carousel-scale", "@tealmac/carousel-kit" ], "files": [ { "path": "registry/example/carousel-scale-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "carousel-snap-demo", "title": "Carousel Snap Demo", "description": "Example of Carousel Snap.", "registryDependencies": [ "@tealmac/carousel-snap", "@tealmac/carousel-kit" ], "files": [ { "path": "registry/example/carousel-snap-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "changelog-feed-demo", "title": "Changelog Feed Demo", "description": "Example of Changelog Feed.", "registryDependencies": [ "@tealmac/changelog-feed" ], "files": [ { "path": "registry/example/changelog-feed-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "chart-demo", "title": "Chart Demo", "description": "Example of Chart.", "registryDependencies": [ "chart" ], "files": [ { "path": "registry/example/chart-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "checkbox-demo", "title": "Checkbox Demo", "description": "Example of Checkbox.", "registryDependencies": [ "checkbox", "label" ], "files": [ { "path": "registry/example/checkbox-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "citation-demo", "title": "Citation Demo", "description": "Example of Citation.", "registryDependencies": [ "@tealmac/citation" ], "files": [ { "path": "registry/example/citation-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "code-block-demo", "title": "Code Block Demo", "description": "Example of Code Block.", "registryDependencies": [ "@tealmac/code-block" ], "files": [ { "path": "registry/example/code-block-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "collapsible-demo", "title": "Collapsible Demo", "description": "Example of Collapsible.", "registryDependencies": [ "button", "collapsible" ], "files": [ { "path": "registry/example/collapsible-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "command-demo", "title": "Command Demo", "description": "Example of Command.", "registryDependencies": [ "command" ], "files": [ { "path": "registry/example/command-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "context-menu-demo", "title": "Context Menu Demo", "description": "Example of Context Menu.", "registryDependencies": [ "context-menu" ], "files": [ { "path": "registry/example/context-menu-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "copy-button-demo", "title": "Copy Button Demo", "description": "Example of Copy Button.", "registryDependencies": [ "@tealmac/copy-button" ], "files": [ { "path": "registry/example/copy-button-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dashboard-01-demo", "title": "Dashboard 01 Demo", "description": "Example of Dashboard 01.", "registryDependencies": [ "@tealmac/dashboard-01" ], "files": [ { "path": "registry/example/dashboard-01-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "data-table-demo", "title": "Data Table Demo", "description": "Example of Data Table.", "registryDependencies": [ "button", "checkbox", "dropdown-menu", "input", "table" ], "files": [ { "path": "registry/example/data-table-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "date-field-demo", "title": "Date Field Demo", "description": "Example of Date Field.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core", "@tealmac/date-time-segments" ], "files": [ { "path": "registry/example/date-field-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "date-picker-demo", "title": "Date Picker Demo", "description": "Example of Date Picker.", "registryDependencies": [ "button", "calendar", "popover" ], "files": [ { "path": "registry/example/date-picker-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "date-picker-range-demo", "title": "Date Picker Range Demo", "description": "Example of Date Picker Range.", "registryDependencies": [ "button", "calendar", "popover" ], "files": [ { "path": "registry/example/date-picker-range-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "date-range-field-demo", "title": "Date Range Field Demo", "description": "Example of Date Range Field.", "registryDependencies": [ "@tealmac/date-range-field", "@tealmac/date-field", "@tealmac/date-time-core", "@tealmac/date-time-segments" ], "files": [ { "path": "registry/example/date-range-field-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "descriptions-demo", "title": "Descriptions Demo", "description": "Example of Descriptions.", "registryDependencies": [ "@tealmac/descriptions" ], "files": [ { "path": "registry/example/descriptions-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dialog-demo", "title": "Dialog Demo", "description": "Example of Dialog.", "registryDependencies": [ "button", "dialog", "input", "label" ], "files": [ { "path": "registry/example/dialog-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dock-demo", "title": "Dock Demo", "description": "Example showing a MacOS-style dock implementation.", "dependencies": [ "next-themes" ], "registryDependencies": [ "button", "@tealmac/dock" ], "files": [ { "path": "registry/example/dock-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dock-demo-2", "title": "Dock Demo 2", "description": "Second example showing a MacOS-style dock implementation.", "registryDependencies": [ "@tealmac/dock" ], "files": [ { "path": "registry/example/dock-demo-2.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dock-demo-3", "title": "Dock Demo 3", "description": "Third example showing a MacOS-style dock implementation.", "registryDependencies": [ "@tealmac/dock" ], "files": [ { "path": "registry/example/dock-demo-3.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dotted-map-demo", "title": "Dotted Map Demo", "description": "Example showing a dotted map.", "dependencies": [ "countries-list" ], "registryDependencies": [ "@tealmac/dotted-map" ], "files": [ { "path": "registry/example/dotted-map-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dotted-map-demo-2", "title": "Dotted Map Demo 2", "description": "Example showing a dotted map.", "registryDependencies": [ "@tealmac/dotted-map" ], "files": [ { "path": "registry/example/dotted-map-demo-2.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dotted-map-demo-3", "title": "Dotted Map Demo 3", "description": "Example showing a dotted map with pulse animation.", "registryDependencies": [ "@tealmac/dotted-map" ], "files": [ { "path": "registry/example/dotted-map-demo-3.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "dropdown-menu-demo", "title": "Dropdown Menu Demo", "description": "Example of Dropdown Menu.", "registryDependencies": [ "button", "dropdown-menu" ], "files": [ { "path": "registry/example/dropdown-menu-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "empty-demo", "title": "Empty Demo", "description": "Example of Empty.", "registryDependencies": [ "button", "empty" ], "files": [ { "path": "registry/example/empty-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "empty-state-demo", "title": "Empty State Demo", "description": "Example of Empty State.", "registryDependencies": [ "@tealmac/empty-state" ], "files": [ { "path": "registry/example/empty-state-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "fab-demo", "title": "Floating Action Button Demo", "description": "Example of Floating Action Button.", "registryDependencies": [ "@tealmac/fab" ], "files": [ { "path": "registry/example/fab-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "field-array-demo", "title": "Field Array Demo", "description": "Example of Field Array.", "registryDependencies": [ "@tealmac/field-array" ], "files": [ { "path": "registry/example/field-array-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "field-demo", "title": "Field Demo", "description": "Example of Field.", "registryDependencies": [ "@tealmac/field" ], "files": [ { "path": "registry/example/field-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "flag-demo", "title": "Flag Demo", "description": "Example of Flag.", "registryDependencies": [ "@tealmac/flag" ], "files": [ { "path": "registry/example/flag-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "form-autosave-demo", "title": "Form Autosave Demo", "description": "Example of Form Autosave.", "registryDependencies": [ "@tealmac/form-autosave" ], "files": [ { "path": "registry/example/form-autosave-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "form-demo", "title": "Form Demo", "description": "Example of Form.", "registryDependencies": [ "button", "card", "field", "input", "input-group" ], "files": [ { "path": "registry/example/form-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "form-store-demo", "title": "Form Store Demo", "description": "Example of Form Store.", "registryDependencies": [ "@tealmac/form-store" ], "files": [ { "path": "registry/example/form-store-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "frame-demo", "title": "Frame Demo", "description": "Example of Frame.", "registryDependencies": [ "@tealmac/frame" ], "files": [ { "path": "registry/example/frame-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "globe-demo", "title": "Globe Demo", "description": "Example showing an autorotating, interactive WebGL globe.", "registryDependencies": [ "@tealmac/globe" ], "files": [ { "path": "registry/example/globe-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "hover-card-demo", "title": "Hover Card Demo", "description": "Example of Hover Card.", "registryDependencies": [ "avatar", "button", "hover-card" ], "files": [ { "path": "registry/example/hover-card-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "icon-tile-demo", "title": "Icon Tile Demo", "description": "Example of Icon Tile.", "registryDependencies": [ "@tealmac/icon-tile" ], "files": [ { "path": "registry/example/icon-tile-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "image-viewer-demo", "title": "Image Viewer Demo", "description": "Example of Image Viewer.", "registryDependencies": [ "@tealmac/image-viewer", "@tealmac/pinch-zoom" ], "files": [ { "path": "registry/example/image-viewer-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "incident-banner-demo", "title": "Incident Banner Demo", "description": "Example of Incident Banner.", "registryDependencies": [ "@tealmac/incident-banner" ], "files": [ { "path": "registry/example/incident-banner-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "inline-edit-demo", "title": "Inline Edit Demo", "description": "Example of Inline Edit.", "registryDependencies": [ "@tealmac/inline-edit" ], "files": [ { "path": "registry/example/inline-edit-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "input-demo", "title": "Input Demo", "description": "Example of Input.", "registryDependencies": [ "input" ], "files": [ { "path": "registry/example/input-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "input-otp-demo", "title": "Input OTP Demo", "description": "Example of Input OTP.", "registryDependencies": [ "input-otp" ], "files": [ { "path": "registry/example/input-otp-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "install-tabs-demo", "title": "Install Tabs Demo", "description": "Example of Install Tabs.", "registryDependencies": [ "@tealmac/install-tabs" ], "files": [ { "path": "registry/example/install-tabs-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "kbd-demo", "title": "Kbd Demo", "description": "Example showing keyboard keys at different sizes and grouped into shortcuts.", "registryDependencies": [ "@tealmac/kbd" ], "files": [ { "path": "registry/example/kbd-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "label-demo", "title": "Label Demo", "description": "Example of Label.", "registryDependencies": [ "checkbox", "label" ], "files": [ { "path": "registry/example/label-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "laptop-frame-demo", "title": "Laptop Frame Demo", "description": "Example of Laptop Frame.", "registryDependencies": [ "@tealmac/laptop-frame" ], "files": [ { "path": "registry/example/laptop-frame-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "list-row-demo", "title": "List Row Demo", "description": "Example of List Row.", "registryDependencies": [ "@tealmac/list-row" ], "files": [ { "path": "registry/example/list-row-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "login-01-demo", "title": "Login 01 Demo", "description": "Example of Login 01.", "registryDependencies": [ "@tealmac/login-01" ], "files": [ { "path": "registry/example/login-01-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "login-02-demo", "title": "Login 02 Demo", "description": "Example of Login 02.", "registryDependencies": [ "@tealmac/login-02" ], "files": [ { "path": "registry/example/login-02-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "login-03-demo", "title": "Login 03 Demo", "description": "Example of Login 03.", "registryDependencies": [ "@tealmac/login-03" ], "files": [ { "path": "registry/example/login-03-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "login-04-demo", "title": "Login 04 Demo", "description": "Example of Login 04.", "registryDependencies": [ "@tealmac/login-04" ], "files": [ { "path": "registry/example/login-04-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "login-05-demo", "title": "Login 05 Demo", "description": "Example of Login 05.", "registryDependencies": [ "@tealmac/login-05" ], "files": [ { "path": "registry/example/login-05-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "mac-icons-demo", "title": "Mac Icons Demo", "description": "Example of Mac Icons.", "registryDependencies": [ "@tealmac/mac-icons" ], "files": [ { "path": "registry/example/mac-icons-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "mac-window-demo", "title": "Mac Window Demo", "description": "Example of Mac Window.", "registryDependencies": [ "@tealmac/mac-window" ], "files": [ { "path": "registry/example/mac-window-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "marquee-3d", "title": "Marquee 3D", "description": "Example showing a 3D infinite scrolling component.", "registryDependencies": [ "@tealmac/marquee" ], "files": [ { "path": "registry/example/marquee-3d.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "marquee-demo", "title": "Marquee Demo", "description": "Example showing an infinite scrolling component.", "registryDependencies": [ "@tealmac/marquee" ], "files": [ { "path": "registry/example/marquee-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "marquee-demo-vertical", "title": "Marquee Vertical Demo", "description": "Example showing a vertical infinite scrolling component.", "registryDependencies": [ "@tealmac/marquee" ], "files": [ { "path": "registry/example/marquee-demo-vertical.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "marquee-logos", "title": "Marquee Logos", "description": "Example showing an infinite scrolling logo carousel.", "registryDependencies": [ "@tealmac/marquee" ], "files": [ { "path": "registry/example/marquee-logos.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "media-demo", "title": "Media Demo", "description": "Example of Media.", "registryDependencies": [ "@tealmac/media" ], "files": [ { "path": "registry/example/media-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "mega-menu-demo", "title": "Mega Menu Demo", "description": "Example of Mega Menu.", "registryDependencies": [ "@tealmac/mega-menu" ], "files": [ { "path": "registry/example/mega-menu-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "menu-bar-demo", "title": "Menu Bar Demo", "description": "Example of Menu Bar.", "registryDependencies": [ "@tealmac/menu-bar" ], "files": [ { "path": "registry/example/menu-bar-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "menubar-demo", "title": "Menubar Demo", "description": "Example of Menubar.", "registryDependencies": [ "menubar" ], "files": [ { "path": "registry/example/menubar-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "message-demo", "title": "Message Demo", "description": "Example of Message.", "registryDependencies": [ "avatar", "bubble", "message" ], "files": [ { "path": "registry/example/message-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "meter-group-demo", "title": "Meter Group Demo", "description": "Example of Meter Group.", "registryDependencies": [ "@tealmac/meter-group" ], "files": [ { "path": "registry/example/meter-group-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "model-picker-demo", "title": "Model Picker Demo", "description": "Example of Model Picker.", "registryDependencies": [ "@tealmac/model-picker" ], "files": [ { "path": "registry/example/model-picker-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "month-picker-demo", "title": "Month Picker Demo", "description": "Example of Month Picker.", "registryDependencies": [ "@tealmac/month-picker", "@tealmac/date-time-core", "@tealmac/date-time-segments", "@tealmac/period-grid" ], "files": [ { "path": "registry/example/month-picker-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "native-select-demo", "title": "Native Select Demo", "description": "Example of Native Select.", "registryDependencies": [ "native-select" ], "files": [ { "path": "registry/example/native-select-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "navigation-menu-demo", "title": "Navigation Menu Demo", "description": "Example of Navigation Menu.", "registryDependencies": [ "navigation-menu" ], "files": [ { "path": "registry/example/navigation-menu-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "number-ticker-decimal-demo", "title": "Number Ticker Decimal Demo", "description": "Example showing animated counting decimal numbers.", "registryDependencies": [ "@tealmac/number-ticker" ], "files": [ { "path": "registry/example/number-ticker-decimal-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "number-ticker-demo", "title": "Number Ticker Demo", "description": "Example showing animated counting numbers.", "registryDependencies": [ "@tealmac/number-ticker" ], "files": [ { "path": "registry/example/number-ticker-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "number-ticker-demo-2", "title": "Number Ticker Demo 2", "description": "Example showing animated counting numbers.", "registryDependencies": [ "@tealmac/number-ticker" ], "files": [ { "path": "registry/example/number-ticker-demo-2.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "pagination-demo", "title": "Pagination Demo", "description": "Example of Pagination.", "registryDependencies": [ "pagination" ], "files": [ { "path": "registry/example/pagination-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "password-input-demo", "title": "Password Input Demo", "description": "Example of Password Input.", "registryDependencies": [ "@tealmac/password-input" ], "files": [ { "path": "registry/example/password-input-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "phone-frame-demo", "title": "Phone Frame Demo", "description": "Example of Phone Frame.", "registryDependencies": [ "@tealmac/phone-frame", "@tealmac/media" ], "files": [ { "path": "registry/example/phone-frame-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "pick-list-demo", "title": "Pick List Demo", "description": "Example of the pick list.", "registryDependencies": [ "@tealmac/pick-list", "@tealmac/transfer-list" ], "files": [ { "path": "registry/example/pick-list-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "picker-sheet-demo", "title": "Picker Sheet Demo", "description": "Example of Picker Sheet.", "registryDependencies": [ "@tealmac/picker-sheet", "@tealmac/bottom-sheet" ], "files": [ { "path": "registry/example/picker-sheet-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "pinch-zoom-demo", "title": "Pinch Zoom Demo", "description": "Example of Pinch Zoom.", "registryDependencies": [ "@tealmac/pinch-zoom" ], "files": [ { "path": "registry/example/pinch-zoom-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "popconfirm-demo", "title": "Popconfirm Demo", "description": "Example of Popconfirm.", "registryDependencies": [ "@tealmac/popconfirm" ], "files": [ { "path": "registry/example/popconfirm-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "popover-demo", "title": "Popover Demo", "description": "Example of Popover.", "registryDependencies": [ "button", "input", "label", "popover" ], "files": [ { "path": "registry/example/popover-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "progress-demo", "title": "Progress Demo", "description": "Example of Progress.", "registryDependencies": [ "progress" ], "files": [ { "path": "registry/example/progress-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "prompt-input-demo", "title": "Prompt Input Demo", "description": "Example of Prompt Input.", "registryDependencies": [ "@tealmac/prompt-input" ], "files": [ { "path": "registry/example/prompt-input-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "pull-to-refresh-demo", "title": "Pull To Refresh Demo", "description": "Example of Pull To Refresh.", "registryDependencies": [ "@tealmac/pull-to-refresh" ], "files": [ { "path": "registry/example/pull-to-refresh-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "radio-group-demo", "title": "Radio Group Demo", "description": "Example of Radio Group.", "registryDependencies": [ "label", "radio-group" ], "files": [ { "path": "registry/example/radio-group-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "reasoning-disclosure-demo", "title": "Reasoning Disclosure Demo", "description": "Example of Reasoning Disclosure.", "registryDependencies": [ "@tealmac/reasoning-disclosure" ], "files": [ { "path": "registry/example/reasoning-disclosure-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "resizable-demo", "title": "Resizable Demo", "description": "Example of Resizable.", "registryDependencies": [ "resizable" ], "files": [ { "path": "registry/example/resizable-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "reui-alert-demo", "title": "Alert (status tones) Demo", "description": "Example of Alert (status tones).", "registryDependencies": [ "@tealmac/reui-alert" ], "files": [ { "path": "registry/example/reui-alert-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "reui-file-type-demo", "title": "File Type Icon Demo", "description": "Example of File Type Icon.", "registryDependencies": [ "@tealmac/reui-file-type", "@tealmac/file-type-all-formats" ], "files": [ { "path": "registry/example/reui-file-type-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "scroll-progress-demo", "title": "Scroll Progress Demo", "description": "Example showing animated scroll progress for your pages.", "registryDependencies": [ "@tealmac/scroll-progress" ], "files": [ { "path": "registry/example/scroll-progress-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "search-field-demo", "title": "Search Field Demo", "description": "Example of Search Field.", "registryDependencies": [ "@tealmac/search-field" ], "files": [ { "path": "registry/example/search-field-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "section-list-demo", "title": "Section List Demo", "description": "Example of Section List.", "registryDependencies": [ "@tealmac/section-list" ], "files": [ { "path": "registry/example/section-list-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "segmented-control-demo", "title": "Segmented Control Demo", "description": "Example of Segmented Control.", "registryDependencies": [ "@tealmac/segmented-control" ], "files": [ { "path": "registry/example/segmented-control-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "select-demo", "title": "Select Demo", "description": "Example of Select.", "registryDependencies": [ "select" ], "files": [ { "path": "registry/example/select-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sheet-demo", "title": "Sheet Demo", "description": "Example of Sheet.", "registryDependencies": [ "button", "input", "label", "sheet" ], "files": [ { "path": "registry/example/sheet-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-01-demo", "title": "Sidebar 01 Demo", "description": "Example of Sidebar 01.", "registryDependencies": [ "@tealmac/sidebar-01" ], "files": [ { "path": "registry/example/sidebar-01-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-02-demo", "title": "Sidebar 02 Demo", "description": "Example of Sidebar 02.", "registryDependencies": [ "@tealmac/sidebar-02" ], "files": [ { "path": "registry/example/sidebar-02-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-03-demo", "title": "Sidebar 03 Demo", "description": "Example of Sidebar 03.", "registryDependencies": [ "@tealmac/sidebar-03" ], "files": [ { "path": "registry/example/sidebar-03-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-04-demo", "title": "Sidebar 04 Demo", "description": "Example of Sidebar 04.", "registryDependencies": [ "@tealmac/sidebar-04" ], "files": [ { "path": "registry/example/sidebar-04-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-05-demo", "title": "Sidebar 05 Demo", "description": "Example of Sidebar 05.", "registryDependencies": [ "@tealmac/sidebar-05" ], "files": [ { "path": "registry/example/sidebar-05-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-06-demo", "title": "Sidebar 06 Demo", "description": "Example of Sidebar 06.", "registryDependencies": [ "@tealmac/sidebar-06" ], "files": [ { "path": "registry/example/sidebar-06-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-07-demo", "title": "Sidebar 07 Demo", "description": "Example of Sidebar 07.", "registryDependencies": [ "@tealmac/sidebar-07" ], "files": [ { "path": "registry/example/sidebar-07-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-08-demo", "title": "Sidebar 08 Demo", "description": "Example of Sidebar 08.", "registryDependencies": [ "@tealmac/sidebar-08" ], "files": [ { "path": "registry/example/sidebar-08-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-09-demo", "title": "Sidebar 09 Demo", "description": "Example of Sidebar 09.", "registryDependencies": [ "@tealmac/sidebar-09" ], "files": [ { "path": "registry/example/sidebar-09-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-10-demo", "title": "Sidebar 10 Demo", "description": "Example of Sidebar 10.", "registryDependencies": [ "@tealmac/sidebar-10" ], "files": [ { "path": "registry/example/sidebar-10-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-11-demo", "title": "Sidebar 11 Demo", "description": "Example of Sidebar 11.", "registryDependencies": [ "@tealmac/sidebar-11" ], "files": [ { "path": "registry/example/sidebar-11-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-12-demo", "title": "Sidebar 12 Demo", "description": "Example of Sidebar 12.", "registryDependencies": [ "@tealmac/sidebar-12" ], "files": [ { "path": "registry/example/sidebar-12-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-13-demo", "title": "Sidebar 13 Demo", "description": "Example of Sidebar 13.", "registryDependencies": [ "@tealmac/sidebar-13" ], "files": [ { "path": "registry/example/sidebar-13-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-14-demo", "title": "Sidebar 14 Demo", "description": "Example of Sidebar 14.", "registryDependencies": [ "@tealmac/sidebar-14" ], "files": [ { "path": "registry/example/sidebar-14-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-15-demo", "title": "Sidebar 15 Demo", "description": "Example of Sidebar 15.", "registryDependencies": [ "@tealmac/sidebar-15" ], "files": [ { "path": "registry/example/sidebar-15-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sidebar-16-demo", "title": "Sidebar 16 Demo", "description": "Example of Sidebar 16.", "registryDependencies": [ "@tealmac/sidebar-16" ], "files": [ { "path": "registry/example/sidebar-16-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "signup-01-demo", "title": "Signup 01 Demo", "description": "Example of Signup 01.", "registryDependencies": [ "@tealmac/signup-01" ], "files": [ { "path": "registry/example/signup-01-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "signup-02-demo", "title": "Signup 02 Demo", "description": "Example of Signup 02.", "registryDependencies": [ "@tealmac/signup-02" ], "files": [ { "path": "registry/example/signup-02-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "signup-03-demo", "title": "Signup 03 Demo", "description": "Example of Signup 03.", "registryDependencies": [ "@tealmac/signup-03" ], "files": [ { "path": "registry/example/signup-03-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "signup-04-demo", "title": "Signup 04 Demo", "description": "Example of Signup 04.", "registryDependencies": [ "@tealmac/signup-04" ], "files": [ { "path": "registry/example/signup-04-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "signup-05-demo", "title": "Signup 05 Demo", "description": "Example of Signup 05.", "registryDependencies": [ "@tealmac/signup-05" ], "files": [ { "path": "registry/example/signup-05-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "skeleton-demo", "title": "Skeleton Demo", "description": "Example of Skeleton.", "registryDependencies": [ "skeleton" ], "files": [ { "path": "registry/example/skeleton-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "slider-demo", "title": "Slider Demo", "description": "Example of Slider.", "registryDependencies": [ "slider" ], "files": [ { "path": "registry/example/slider-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "snippet-tabs-demo", "title": "Snippet Tabs Demo", "description": "Example of Snippet Tabs.", "registryDependencies": [ "@tealmac/snippet-tabs", "@tealmac/copy-button", "@tealmac/highlight" ], "files": [ { "path": "registry/example/snippet-tabs-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sonner-demo", "title": "Sonner Demo", "description": "Example of Sonner.", "registryDependencies": [ "button" ], "files": [ { "path": "registry/example/sonner-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sortable-tree-demo", "title": "Sortable Tree Demo", "description": "Example of the sortable tree.", "registryDependencies": [ "@tealmac/sortable-tree", "@tealmac/tree-view" ], "files": [ { "path": "registry/example/sortable-tree-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "sparkline-demo", "title": "Sparkline Demo", "description": "Example of Sparkline.", "registryDependencies": [ "@tealmac/sparkline" ], "files": [ { "path": "registry/example/sparkline-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "speed-dial-demo", "title": "Speed Dial Demo", "description": "Example of Speed Dial.", "registryDependencies": [ "@tealmac/speed-dial" ], "files": [ { "path": "registry/example/speed-dial-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "spinner-demo", "title": "Spinner Demo", "description": "Example of Spinner.", "registryDependencies": [ "@tealmac/spinner" ], "files": [ { "path": "registry/example/spinner-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "splitter-demo", "title": "Splitter Demo", "description": "Example of Splitter.", "registryDependencies": [ "@tealmac/splitter" ], "files": [ { "path": "registry/example/splitter-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "spotlight-card-demo", "title": "Spotlight Card Demo", "description": "Example of Spotlight Card.", "registryDependencies": [ "@tealmac/spotlight-card" ], "files": [ { "path": "registry/example/spotlight-card-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "statistic-demo", "title": "Statistic Demo", "description": "Example of Statistic.", "registryDependencies": [ "@tealmac/statistic" ], "files": [ { "path": "registry/example/statistic-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "status-dot-demo", "title": "Status Dot Demo", "description": "Example of Status Dot.", "registryDependencies": [ "@tealmac/status-dot" ], "files": [ { "path": "registry/example/status-dot-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "streaming-text-demo", "title": "Streaming Text Demo", "description": "Example of Streaming Text.", "registryDependencies": [ "@tealmac/streaming-text" ], "files": [ { "path": "registry/example/streaming-text-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "suggestion-chips-demo", "title": "Suggestion Chips Demo", "description": "Example of Suggestion Chips.", "registryDependencies": [ "@tealmac/suggestion-chips" ], "files": [ { "path": "registry/example/suggestion-chips-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "swipe-tabs-demo", "title": "Swipe Tabs Demo", "description": "Example of Swipe Tabs.", "registryDependencies": [ "@tealmac/swipe-tabs" ], "files": [ { "path": "registry/example/swipe-tabs-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "switch-demo", "title": "Switch Demo", "description": "Example of Switch.", "registryDependencies": [ "label", "switch" ], "files": [ { "path": "registry/example/switch-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "tab-bar-demo", "title": "Tab Bar Demo", "description": "Example of Tab Bar.", "registryDependencies": [ "@tealmac/tab-bar" ], "files": [ { "path": "registry/example/tab-bar-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "table-demo", "title": "Table Demo", "description": "Example of Table.", "registryDependencies": [ "table" ], "files": [ { "path": "registry/example/table-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "table-of-contents-demo", "title": "Table Of Contents Demo", "description": "Example of Table Of Contents.", "registryDependencies": [ "@tealmac/table-of-contents" ], "files": [ { "path": "registry/example/table-of-contents-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "tablet-frame-demo", "title": "Tablet Frame Demo", "description": "Example of Tablet Frame.", "registryDependencies": [ "@tealmac/tablet-frame", "@tealmac/media" ], "files": [ { "path": "registry/example/tablet-frame-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "tabs-demo", "title": "Tabs Demo", "description": "Example of Tabs.", "registryDependencies": [ "button", "card", "input", "label", "tabs" ], "files": [ { "path": "registry/example/tabs-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "terminal-demo", "title": "Terminal Demo", "description": "Example showing a terminal with animated text.", "registryDependencies": [ "@tealmac/terminal" ], "files": [ { "path": "registry/example/terminal-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "terminal-demo-2", "title": "Terminal Demo", "description": "Example showing a terminal with animated text and custom delays", "registryDependencies": [ "@tealmac/terminal" ], "files": [ { "path": "registry/example/terminal-demo-2.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "textarea-demo", "title": "Textarea Demo", "description": "Example of Textarea.", "registryDependencies": [ "textarea" ], "files": [ { "path": "registry/example/textarea-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "thinking-indicator-demo", "title": "Thinking Indicator Demo", "description": "Example of Thinking Indicator.", "registryDependencies": [ "@tealmac/thinking-indicator" ], "files": [ { "path": "registry/example/thinking-indicator-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "toggle-demo", "title": "Toggle Demo", "description": "Example of Toggle.", "registryDependencies": [ "toggle" ], "files": [ { "path": "registry/example/toggle-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "toggle-group-demo", "title": "Toggle Group Demo", "description": "Example of Toggle Group.", "registryDependencies": [ "toggle-group" ], "files": [ { "path": "registry/example/toggle-group-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "tool-call-card-demo", "title": "Tool Call Card Demo", "description": "Example of Tool Call Card.", "registryDependencies": [ "@tealmac/tool-call-card" ], "files": [ { "path": "registry/example/tool-call-card-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "tooltip-demo", "title": "Tooltip Demo", "description": "Example of Tooltip.", "registryDependencies": [ "button", "tooltip" ], "files": [ { "path": "registry/example/tooltip-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "transfer-list-demo", "title": "Transfer List Demo", "description": "Example of the transfer list.", "registryDependencies": [ "@tealmac/transfer-list" ], "files": [ { "path": "registry/example/transfer-list-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "tree-view-demo", "title": "Tree View Demo", "description": "Example of the tree view.", "registryDependencies": [ "@tealmac/tree-view" ], "files": [ { "path": "registry/example/tree-view-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "trial-bar-demo", "title": "Trial Bar Demo", "description": "Example of Trial Bar.", "registryDependencies": [ "@tealmac/trial-bar" ], "files": [ { "path": "registry/example/trial-bar-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "typography-demo", "title": "Typography Demo", "description": "Example of Typography.", "registryDependencies": [], "files": [ { "path": "registry/example/typography-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "watch-frame-demo", "title": "Watch Frame Demo", "description": "Example of Watch Frame.", "registryDependencies": [ "@tealmac/watch-frame", "@tealmac/media" ], "files": [ { "path": "registry/example/watch-frame-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "watermark-demo", "title": "Watermark Demo", "description": "Example of Watermark.", "registryDependencies": [ "@tealmac/watermark" ], "files": [ { "path": "registry/example/watermark-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "widgets-demo", "title": "Widgets Demo", "description": "Example of Widgets.", "registryDependencies": [ "@tealmac/widgets" ], "files": [ { "path": "registry/example/widgets-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "window-manager-demo", "title": "Window Manager Demo", "description": "Example of Window Manager.", "registryDependencies": [ "@tealmac/window-manager", "@tealmac/mac-window" ], "files": [ { "path": "registry/example/window-manager-demo.tsx", "type": "registry:example" } ], "type": "registry:example" }, { "name": "highlight", "title": "Highlight", "description": "A small dependency-free tokenizer that highlights JSON, shell, JS/TS, Python, Go, HTTP and .env snippets.", "files": [ { "path": "registry/tealmac/highlight.ts", "type": "registry:lib" } ], "type": "registry:lib" }, { "name": "utils", "dependencies": [ "clsx", "tailwind-merge" ], "files": [ { "path": "registry/lib/utils.ts", "type": "registry:lib" } ], "type": "registry:lib" }, { "name": "accordion-nested", "title": "Accordion Nested", "description": "Two levels of accordion for a help centre, categories outside and questions inside, with independent open states and the question count in each category's name.", "registryDependencies": [ "accordion" ], "files": [ { "path": "registry/patterns/accordion-nested/accordion-nested.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "accordion-single-expand", "title": "A basic single-expand accordion", "description": "A basic single-expand accordion, built from the accordion component.", "registryDependencies": [ "accordion" ], "files": [ { "path": "registry/patterns/accordion-single-expand/accordion-single-expand.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "adaptive-date-input", "title": "Adaptive Date Input", "description": "A date input that uses the phone's native date picker on touch devices and the segmented date field with a calendar on desktop, with one ISO value. Use this when the same form runs on phones and desktops and each should get the date control it is best at.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/adaptive-date-input/adaptive-date-input.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "age-gate-date-field", "title": "Age Gate Date Field", "description": "A date of birth that decides whether someone is old enough, with the exact date they become eligible, without ever blocking typing. Use this when a product or purchase has a minimum age and the person should learn when they will qualify.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/age-gate-date-field/age-gate-date-field.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "alert-dialog-destructive-delete", "title": "Destructive alert dialog for irreversible actions like deletion", "description": "Destructive alert dialog for irreversible actions like deletion, built from the alert dialog component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "alert-dialog", "button" ], "files": [ { "path": "registry/patterns/alert-dialog-destructive-delete/alert-dialog-destructive-delete.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "alert-dialog-small-with-icon", "title": "Small size alert dialog with media (icon)", "description": "Small size alert dialog with media (icon), built from the alert dialog component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "alert-dialog", "button" ], "files": [ { "path": "registry/patterns/alert-dialog-small-with-icon/alert-dialog-small-with-icon.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "alert-dialog-with-icon", "title": "Alert dialog with icon", "description": "Alert dialog with icon, built from the alert dialog component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "alert-dialog", "button" ], "files": [ { "path": "registry/patterns/alert-dialog-with-icon/alert-dialog-with-icon.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "alert-success-variant", "title": "Success alert", "description": "Success alert, built from the alert component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/reui-alert" ], "files": [ { "path": "registry/patterns/alert-success-variant/alert-success-variant.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "alert-warning-variant", "title": "Warning alert", "description": "Warning alert, built from the alert component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/reui-alert" ], "files": [ { "path": "registry/patterns/alert-warning-variant/alert-warning-variant.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "angle-slider-heading-compass", "title": "Angle Slider Heading Compass", "description": "A compass bearing control that shows the heading in degrees and as a cardinal point (N, NE, E and so on), snaps to 5 degrees and has quick buttons for the four directions.", "registryDependencies": [ "button", "@tealmac/angle-slider" ], "files": [ { "path": "registry/patterns/angle-slider-heading-compass/angle-slider-heading-compass.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "app-screenshots-shelf", "title": "App Screenshots Shelf", "description": "Use this when an app listing shows screenshots: a drag-and-fling shelf with a caption under every screen and a phone or tablet switch that changes the frame shape.", "registryDependencies": [ "@tealmac/carousel-free-scroll" ], "files": [ { "path": "registry/patterns/app-screenshots-shelf/app-screenshots-shelf.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "approval-chain-pick-list", "title": "Approval Chain Pick List", "description": "An ordered approver picker that leaves the requester out, needs at least one approver and numbers the steps. Use this when an approval workflow depends on who signs, and in what order.", "registryDependencies": [ "@tealmac/pick-list", "@tealmac/transfer-list" ], "files": [ { "path": "registry/patterns/approval-chain-pick-list/approval-chain-pick-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "auto-form-field-overrides", "title": "Auto Form with Field Overrides", "description": "Shows the override layer of a generated form: relabelled fields, a textarea and a radio group instead of the defaults, a hidden field, custom option labels, a disabled field and a custom order. Use this when the schema is right but the presentation needs a nudge.", "registryDependencies": [ "@tealmac/auto-form" ], "files": [ { "path": "registry/patterns/auto-form-field-overrides/auto-form-field-overrides.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "auto-form-nested-arrays", "title": "Auto Form with Nested Objects and Arrays", "description": "A schema with a nested address object and an array of team members renders as fieldsets and a repeatable list with add, remove and reorder; errors point at the exact item. Use this when the data is a small tree, not a flat list of fields.", "registryDependencies": [ "@tealmac/auto-form" ], "files": [ { "path": "registry/patterns/auto-form-nested-arrays/auto-form-nested-arrays.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "autosave-note-with-status", "title": "Autosaving Note", "description": "A note that saves itself a moment after you stop typing, shows Saving, Saved at a time or a retryable error, and saves immediately when you leave the page or press the button. Use this when losing a draft is worse than saving too often.", "registryDependencies": [ "textarea", "label", "button", "@tealmac/form-autosave" ], "files": [ { "path": "registry/patterns/autosave-note-with-status/autosave-note-with-status.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "avatar-fallbacks", "title": "Avatar with fallback", "description": "Avatar with fallback, built from the avatar component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar" ], "files": [ { "path": "registry/patterns/avatar-fallbacks/avatar-fallbacks.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "avatar-multiple-badges", "title": "Avatar with multiple badges", "description": "Avatar with multiple badges, built from the avatar component.", "registryDependencies": [ "avatar" ], "files": [ { "path": "registry/patterns/avatar-multiple-badges/avatar-multiple-badges.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "avatar-solid-fallbacks", "title": "Avatar with a solid background color fallback", "description": "Avatar with a solid background color fallback, built from the avatar component.", "registryDependencies": [ "avatar" ], "files": [ { "path": "registry/patterns/avatar-solid-fallbacks/avatar-solid-fallbacks.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "billing-period-selector", "title": "Billing Period Selector", "description": "A month grid where only months that have an invoice can be opened, with the others dimmed and explained, and an invoice count for the chosen month. Use this when a customer browses invoices or statements and only some months have one.", "registryDependencies": [ "@tealmac/month-picker", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/billing-period-selector/billing-period-selector.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "birth-date-field", "title": "Birth Date Field", "description": "A typed date of birth that cannot be in the future or implausibly old, and that shows the age it implies so a typo in the year is caught straight away. Use this when a form asks for a date of birth and a typo in the year should be obvious.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/birth-date-field/birth-date-field.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "breadcrumb-router-link", "title": "Breadcrumb with Next.js link", "description": "Breadcrumb with Next.js link, built from the breadcrumb component.", "registryDependencies": [ "breadcrumb" ], "files": [ { "path": "registry/patterns/breadcrumb-router-link/breadcrumb-router-link.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "breadcrumb-static-ellipsis", "title": "Breadcrumb with ellipsis for long paths", "description": "Breadcrumb with ellipsis for long paths, built from the breadcrumb component.", "registryDependencies": [ "breadcrumb" ], "files": [ { "path": "registry/patterns/breadcrumb-static-ellipsis/breadcrumb-static-ellipsis.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-go-back", "title": "Go back link button", "description": "Go back link button, built from the button component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/button-go-back/button-go-back.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-active-count", "title": "Active state button group with count", "description": "Active state button group with count, built from the button group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-active-count/button-group-active-count.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-file-attachment", "title": "Attachment button group with download action", "description": "Attachment button group with download action, built from the button group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-file-attachment/button-group-file-attachment.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-follower-count", "title": "Button group with follower count", "description": "Button group with follower count, built from the button group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-follower-count/button-group-follower-count.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-icon-actions", "title": "Button group using icons for visual actions", "description": "Button group using icons for visual actions, built from the button group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-icon-actions/button-group-icon-actions.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-like-counter", "title": "Button group styled as a like button with a counter", "description": "Button group styled as a like button with a counter, built from the button group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-like-counter/button-group-like-counter.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-share-caption", "title": "Horizontal button group with primary and secondary labels", "description": "Horizontal button group with primary and secondary labels, built from the button group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-share-caption/button-group-share-caption.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-group-vertical-list", "title": "Vertical button group", "description": "Vertical button group, built from the button group component.", "registryDependencies": [ "button", "button-group" ], "files": [ { "path": "registry/patterns/button-group-vertical-list/button-group-vertical-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "button-star-count", "title": "Star button with count", "description": "Star button with count, built from the button component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/button-star-count/button-star-count.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "calendar-basic", "title": "Basic calendar", "description": "Basic calendar, built from the calendar component.", "registryDependencies": [ "calendar", "card" ], "files": [ { "path": "registry/patterns/calendar-basic/calendar-basic.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "calendar-range", "title": "Range calendar", "description": "Range calendar, built from the calendar component.", "dependencies": [ "date-fns", "react-day-picker" ], "registryDependencies": [ "calendar", "card" ], "files": [ { "path": "registry/patterns/calendar-range/calendar-range.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "cancellation-deadline-note", "title": "Cancellation Deadline Note", "description": "A check-in date field that works out the last moment for free cancellation and tells the guest whether it is still open, closing soon or already past. Use this when a booking is free to cancel until a cut-off before the stay and the guest should see that date as they choose dates.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/cancellation-deadline-note/cancellation-deadline-note.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "card-bordered-header", "title": "Card header with border", "description": "Card header with border, built from the card component.", "registryDependencies": [ "card" ], "files": [ { "path": "registry/patterns/card-bordered-header/card-bordered-header.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "card-image-hover-zoom", "title": "Card with image scale hover effect", "description": "Card with image scale hover effect, built from the card component.", "registryDependencies": [ "card" ], "files": [ { "path": "registry/patterns/card-image-hover-zoom/card-image-hover-zoom.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "category-chips-filter", "title": "Category Chips Filter", "description": "Use this when a list is filtered by one category at a time: a free-scroll row of chips with a pressed state, the chosen chip scrolled into view and a polite \"12 results\" message.", "registryDependencies": [ "@tealmac/carousel-free-scroll" ], "files": [ { "path": "registry/patterns/category-chips-filter/category-chips-filter.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "checkbox-basic-group", "title": "Checkbox group", "description": "Checkbox group, built from the checkbox component.", "registryDependencies": [ "checkbox", "field" ], "files": [ { "path": "registry/patterns/checkbox-basic-group/checkbox-basic-group.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "checkbox-label-and-description", "title": "Checkbox with label and description", "description": "Checkbox with label and description, built from the checkbox component.", "registryDependencies": [ "checkbox", "field" ], "files": [ { "path": "registry/patterns/checkbox-label-and-description/checkbox-label-and-description.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "cloud-bucket-browser", "title": "Cloud Bucket Browser", "description": "A lazily loaded storage tree with a collapse-all button, a loaded-items count and per-folder retry. Use this when people browse remote storage where each folder is a request that can be slow or fail.", "registryDependencies": [ "button", "@tealmac/async-tree", "@tealmac/tree-view" ], "files": [ { "path": "registry/patterns/cloud-bucket-browser/cloud-bucket-browser.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "collapsible-advanced-options", "title": "Collapsible Advanced Options", "description": "The Advanced options disclosure at the foot of a form that says how many hidden settings were changed and can start open to reveal an error.", "registryDependencies": [ "collapsible" ], "files": [ { "path": "registry/patterns/collapsible-advanced-options/collapsible-advanced-options.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "collapsible-animated-card", "title": "Collapsible animated card", "description": "Collapsible animated card, built from the collapsible component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "card", "collapsible" ], "files": [ { "path": "registry/patterns/collapsible-animated-card/collapsible-animated-card.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "command-shortcuts", "title": "Command with shortcuts", "description": "Command with shortcuts, built from the command component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "command" ], "files": [ { "path": "registry/patterns/command-shortcuts/command-shortcuts.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "compose-fab-collapse", "title": "Compose FAB Collapse", "description": "An extended Compose button that shrinks to an icon while the list scrolls down and grows back on the way up, always keeping its name for screen readers. Use this when a phone list screen has one dominant create action that should stay reachable without covering the content.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/fab" ], "files": [ { "path": "registry/patterns/compose-fab-collapse/compose-fab-collapse.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "confirm-delete-with-undo", "title": "Confirm Delete With Undo", "description": "Delete without a dialog and make it safe with an announced Undo bar: the item goes at once and the delete is committed only after the undo window passes.", "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/confirm-delete-with-undo/confirm-delete-with-undo.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "confirm-with-countdown", "title": "Confirm With Countdown", "description": "An alert dialog whose destructive button unlocks after a countdown that restarts each time it opens; use this when a rushed click is the main risk.", "registryDependencies": [ "alert-dialog", "button" ], "files": [ { "path": "registry/patterns/confirm-with-countdown/confirm-with-countdown.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "contacts-alphabet-list", "title": "Contacts Alphabet List", "description": "A contact list grouped by first letter with sticky headings, an edge index that jumps on tap or drag, and a count in each section. Use this when a phone screen lists more than about 30 people or items that people find by name.", "registryDependencies": [ "avatar", "@tealmac/section-list" ], "files": [ { "path": "registry/patterns/contacts-alphabet-list/contacts-alphabet-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "context-menu-icons", "title": "Context menu with icons for common actions", "description": "Context menu with icons for common actions, built from the context menu component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "context-menu" ], "files": [ { "path": "registry/patterns/context-menu-icons/context-menu-icons.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "copyable-readonly-field", "title": "Copyable Read-Only Field", "description": "A read-only input for values people need to copy (links, IDs, commands) with a Copy button that confirms in text and aria-live, selects everything on focus, and falls back when the clipboard is blocked. Use this when the value is for pasting elsewhere.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "input", "button", "label" ], "files": [ { "path": "registry/patterns/copyable-readonly-field/copyable-readonly-field.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "date-grouped-activity-list", "title": "Date Grouped Activity List", "description": "An activity feed grouped under Today, Yesterday and dated headings with sticky headings, relative times and an index that jumps between days. Use this when a phone shows a history ordered by time, such as activity, transactions or messages, and people look for a day.", "registryDependencies": [ "@tealmac/section-list" ], "files": [ { "path": "registry/patterns/date-grouped-activity-list/date-grouped-activity-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "dialog-full-width-button", "title": "Dialog with full width button", "description": "Dialog with full width button, built from the dialog component.", "registryDependencies": [ "button", "dialog" ], "files": [ { "path": "registry/patterns/dialog-full-width-button/dialog-full-width-button.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "dialog-route-hash", "title": "Dialog Route Hash", "description": "A dialog whose open state is the URL fragment: a link to #help opens it, Back closes it, loading the page with the fragment shows it and focus returns to the opener.", "registryDependencies": [ "dialog" ], "files": [ { "path": "registry/patterns/dialog-route-hash/dialog-route-hash.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "dropdown-menu-notification-items", "title": "Notifications dropdown with items", "description": "Notifications dropdown with items, built from the dropdown menu component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "dropdown-menu" ], "files": [ { "path": "registry/patterns/dropdown-menu-notification-items/dropdown-menu-notification-items.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "dropdown-menu-opening-positions", "title": "Dropdown menus opening positions", "description": "Dropdown menus opening positions, built from the dropdown menu component.", "registryDependencies": [ "button", "dropdown-menu" ], "files": [ { "path": "registry/patterns/dropdown-menu-opening-positions/dropdown-menu-opening-positions.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "empty-inbox", "title": "Inbox empty state", "description": "Inbox empty state, built from the empty component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "empty" ], "files": [ { "path": "registry/patterns/empty-inbox/empty-inbox.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "empty-no-notifications", "title": "No notifications empty state", "description": "No notifications empty state, built from the empty component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "empty" ], "files": [ { "path": "registry/patterns/empty-no-notifications/empty-no-notifications.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "empty-stacked-products", "title": "No products empty state with stacked cards and blur effect", "description": "No products empty state with stacked cards and blur effect, built from the empty component.", "registryDependencies": [ "empty" ], "files": [ { "path": "registry/patterns/empty-stacked-products/empty-stacked-products.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "event-schedule-day-tabs", "title": "Event Schedule Day Tabs", "description": "Use this when a programme runs over several days: the accessible tabbed carousel with the day names as tab text, arrow keys between days and one schedule list per panel.", "registryDependencies": [ "@tealmac/carousel-aria" ], "files": [ { "path": "registry/patterns/event-schedule-day-tabs/event-schedule-day-tabs.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "field-select-controls", "title": "Field with select control", "description": "Field with select control, built from the field component.", "registryDependencies": [ "field", "select" ], "files": [ { "path": "registry/patterns/field-select-controls/field-select-controls.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "file-type-family-glyphs", "title": "Family glyphs", "description": "One glyph per family, drawn on one grid, for family types and the glyph option.", "registryDependencies": [ "@tealmac/reui-file-type" ], "files": [ { "path": "registry/patterns/file-type-family-glyphs/file-type-family-glyphs.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "flag-new-version-reload", "title": "Flag New Version Reload", "description": "A flag that announces a new app version with Reload now and Later, where Later snoozes it for a set time and a second release overrides the snooze.", "registryDependencies": [ "@tealmac/flag" ], "files": [ { "path": "registry/patterns/flag-new-version-reload/flag-new-version-reload.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "floating-glass-tab-bar-fab", "title": "Floating Glass Tab Bar With FAB", "description": "A floating translucent tab bar with a raised centre action button that opens a speed dial, keeping the home indicator clear and the content padded so nothing hides behind it. Use this when your phone app has four destinations and one primary create action that should always be within thumb reach.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/tab-bar", "@tealmac/speed-dial" ], "files": [ { "path": "registry/patterns/floating-glass-tab-bar-fab/floating-glass-tab-bar-fab.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "frame-dense-layout", "title": "Frame with dense layout", "description": "Frame with dense layout, built from the frame component.", "registryDependencies": [ "@tealmac/frame" ], "files": [ { "path": "registry/patterns/frame-dense-layout/frame-dense-layout.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "frame-separated-panels", "title": "Frame with separated panels", "description": "Frame with separated panels, built from the frame component.", "registryDependencies": [ "@tealmac/frame" ], "files": [ { "path": "registry/patterns/frame-separated-panels/frame-separated-panels.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "habit-streak-calendar", "title": "Habit Streak Calendar", "description": "A month calendar where each click marks a day done or not, computing the current and the best streak and refusing future days. Use this when a habit or practice is logged day by day and the run of consecutive days matters.", "registryDependencies": [ "@tealmac/calendar-grid", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/habit-streak-calendar/habit-streak-calendar.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "holiday-calendar-markers", "title": "Holiday Calendar Markers", "description": "A calendar with dots under public holidays and a list of the holidays in the visible month, read from the day you focus or pick. Use this when planners need to see which days are public holidays before choosing dates.", "registryDependencies": [ "@tealmac/calendar-grid", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/holiday-calendar-markers/holiday-calendar-markers.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "hover-card-code-symbol", "title": "Hover Card Code Symbol", "description": "An inline code element for a function or type that shows its signature, a one-line description and a reference link in a hover card on hover or focus.", "registryDependencies": [ "hover-card" ], "files": [ { "path": "registry/patterns/hover-card-code-symbol/hover-card-code-symbol.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "hover-card-image-and-text", "title": "Hover card with an image and text content", "description": "Hover card with an image and text content, built from the hover card component.", "registryDependencies": [ "button", "hover-card" ], "files": [ { "path": "registry/patterns/hover-card-image-and-text/hover-card-image-and-text.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "icon-tile-all-variants", "title": "All variants", "description": "Every icon tile variant.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/icon-tile" ], "files": [ { "path": "registry/patterns/icon-tile-all-variants/icon-tile-all-variants.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "inbox-tab-bar-badges", "title": "Inbox Tab Bar Badges", "description": "A tab bar whose Inbox tab shows an unread count that reads aloud, updates as messages arrive or are read, caps at 99+ and announces new messages politely. Use this when a tab needs to show unread or pending counts that change while the app is open.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "@tealmac/tab-bar" ], "files": [ { "path": "registry/patterns/inbox-tab-bar-badges/inbox-tab-bar-badges.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "incident-banner-maintenance-window", "title": "Incident Banner Maintenance Window", "description": "A scheduled maintenance banner that changes by the clock from upcoming, with a start countdown, to in progress and to completed, without any manual update.", "registryDependencies": [ "@tealmac/incident-banner" ], "files": [ { "path": "registry/patterns/incident-banner-maintenance-window/incident-banner-maintenance-window.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "inline-edit-page-title", "title": "Inline Edit Page Title", "description": "A page heading that edits in place, refuses an empty name and keeps the browser tab title in sync with what was saved.", "registryDependencies": [ "@tealmac/inline-edit" ], "files": [ { "path": "registry/patterns/inline-edit-page-title/inline-edit-page-title.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "inline-edit-unique-name", "title": "Inline Edit Unique Name", "description": "An inline rename that checks the name against existing ones when you save, ignoring case and the item's own current name, and says which name clashes.", "registryDependencies": [ "@tealmac/inline-edit" ], "files": [ { "path": "registry/patterns/inline-edit-unique-name/inline-edit-unique-name.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "input-group-label-usage", "title": "Input group demonstrating label usage", "description": "Input group demonstrating label usage, built from the input group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "field", "input-group" ], "files": [ { "path": "registry/patterns/input-group-label-usage/input-group-label-usage.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "input-group-prefix-icon", "title": "Input group with prefix icon", "description": "Input group with prefix icon, built from the input group component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "field", "input-group" ], "files": [ { "path": "registry/patterns/input-group-prefix-icon/input-group-prefix-icon.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "input-otp-pin-code", "title": "OTP input for PIN codes", "description": "OTP input for PIN codes, built from the input otp component.", "dependencies": [ "input-otp" ], "registryDependencies": [ "field", "input-otp" ], "files": [ { "path": "registry/patterns/input-otp-pin-code/input-otp-pin-code.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "kpi-count-up", "title": "KPI Count Up", "description": "A KPI that counts up to a new value, skips the animation for reduced motion, and announces only the final value once.", "registryDependencies": [ "card" ], "files": [ { "path": "registry/patterns/kpi-count-up/kpi-count-up.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "kpi-period-compare", "title": "KPI Period Compare", "description": "A KPI card whose period switch recomputes the value and the change against the previous period, announcing the new figures politely.", "registryDependencies": [ "toggle-group", "card" ], "files": [ { "path": "registry/patterns/kpi-period-compare/kpi-period-compare.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "language-picker-field", "title": "Language Picker Field", "description": "A labelled form field that shows the chosen language in its own script and opens a searchable bottom-sheet list, with the native name and the English name for each option. Use this when a phone form or settings screen asks for a language or locale from a list too long for radio buttons.", "registryDependencies": [ "label", "@tealmac/picker-sheet" ], "files": [ { "path": "registry/patterns/language-picker-field/language-picker-field.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "menu-recent-items", "title": "Menu Recent Items", "description": "A Recent menu built from a changing list that never shows empty: one disabled line explains an empty history and Clear recent sits apart and disables itself.", "registryDependencies": [ "button", "dropdown-menu" ], "files": [ { "path": "registry/patterns/menu-recent-items/menu-recent-items.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "menubar-checkbox-and-radio", "title": "Menubar with checkbox & radio items", "description": "Menubar with checkbox & radio items, built from the menubar component.", "registryDependencies": [ "menubar" ], "files": [ { "path": "registry/patterns/menubar-checkbox-and-radio/menubar-checkbox-and-radio.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "message-two-sided-chat", "title": "Two-sided conversation", "description": "Incoming and outgoing rows separated by nothing but the align prop.", "registryDependencies": [ "bubble", "message" ], "files": [ { "path": "registry/patterns/message-two-sided-chat/message-two-sided-chat.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "meter-group-storage-breakdown", "title": "Meter Group Storage Breakdown", "description": "A storage or quota card that splits usage into categories, turns to a warning near the limit and offers the upgrade action only when it matters.", "registryDependencies": [ "@tealmac/meter-group" ], "files": [ { "path": "registry/patterns/meter-group-storage-breakdown/meter-group-storage-breakdown.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "native-datalist-autocomplete", "title": "Native Datalist Autocomplete", "description": "A text input that uses the browser's own datalist for suggestions, so there is no popup to build, mobile keyboards show their native picker, and free text is always allowed. Use this when a light suggestion list is enough.", "registryDependencies": [ "input" ], "files": [ { "path": "registry/patterns/native-datalist-autocomplete/native-datalist-autocomplete.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "navigation-menu-with-icons", "title": "Navigation menu with icons", "description": "Navigation menu with icons, built from the navigation menu component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "navigation-menu" ], "files": [ { "path": "registry/patterns/navigation-menu-with-icons/navigation-menu-with-icons.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "optimistic-transfer-save", "title": "Optimistic Transfer Save", "description": "A transfer list that shows each move immediately, saves in the background, ignores slow older responses and reverts with an error and Retry when a save fails. Use this when the lists live on a server and the interface must stay responsive.", "registryDependencies": [ "button", "@tealmac/transfer-list" ], "files": [ { "path": "registry/patterns/optimistic-transfer-save/optimistic-transfer-save.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "otp-grouped-separator", "title": "OTP Grouped Separator", "description": "A one-time code split into readable groups such as 123 456 that is still one input, with pasted 123-456 stripped to digits.", "registryDependencies": [ "input-otp" ], "files": [ { "path": "registry/patterns/otp-grouped-separator/otp-grouped-separator.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "pagination-arrow-links", "title": "Pagination with arrows buttons", "description": "Pagination with arrows buttons, built from the pagination component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "pagination" ], "files": [ { "path": "registry/patterns/pagination-arrow-links/pagination-arrow-links.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "pagination-left-page-info", "title": "Pagination with page info on left", "description": "Pagination with page info on left, built from the pagination component.", "registryDependencies": [ "pagination" ], "files": [ { "path": "registry/patterns/pagination-left-page-info/pagination-left-page-info.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "passport-expiry-validity", "title": "Passport Expiry Validity", "description": "A passport expiry date checked against the travel date: it must be valid for the required months after the trip, and the field says the exact date it needed to pass. Use this when a destination requires the passport to be valid for months beyond the trip.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/passport-expiry-validity/passport-expiry-validity.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "password-caps-lock-warning", "title": "Password Caps Lock Warning", "description": "A password field that warns when Caps Lock is on, read from key events, announced politely, linked to the field and gone on blur or when the key is toggled off.", "registryDependencies": [ "input", "label" ], "files": [ { "path": "registry/patterns/password-caps-lock-warning/password-caps-lock-warning.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "permission-prompt-sheet", "title": "Permission Prompt Sheet", "description": "A bottom sheet that explains why you need a permission before the browser asks, with Allow and Not now buttons, and remembers a refusal so it does not nag. Use this when you need notifications, location or the camera and a cold browser prompt would be refused.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "@tealmac/bottom-sheet" ], "files": [ { "path": "registry/patterns/permission-prompt-sheet/permission-prompt-sheet.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "persian-calendar-picker", "title": "Persian Calendar Picker", "description": "A right-to-left Persian (Solar Hijri) date picker with Persian month names and digits, a Saturday week start, Nowruz marked and an ISO value. Use this when your app serves Persian-speaking users who expect their own calendar, direction and week.", "registryDependencies": [ "@tealmac/calendar-grid", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/persian-calendar-picker/persian-calendar-picker.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "photo-grid-viewer", "title": "Photo Grid Viewer", "description": "A thumbnail grid whose items open a full-screen viewer at the tapped photo, and return focus to that thumbnail when the viewer closes. Use this when a phone gallery, album or post shows photos in a grid and people expect to open, swipe and pinch them.", "registryDependencies": [ "@tealmac/image-viewer" ], "files": [ { "path": "registry/patterns/photo-grid-viewer/photo-grid-viewer.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "popconfirm-publish-checklist", "title": "Popconfirm Publish Checklist", "description": "A publish button whose popconfirm lists what is missing (title, image alt text, summary) and offers Publish anyway only when there are warnings.", "registryDependencies": [ "button", "@tealmac/popconfirm" ], "files": [ { "path": "registry/patterns/popconfirm-publish-checklist/popconfirm-publish-checklist.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "popconfirm-sign-out-everywhere", "title": "Popconfirm Sign Out Everywhere", "description": "A sign-out-of-all-devices button that names how many sessions will end, then confirms with a success flag instead of a page reload.", "registryDependencies": [ "button", "@tealmac/flag", "@tealmac/popconfirm" ], "files": [ { "path": "registry/patterns/popconfirm-sign-out-everywhere/popconfirm-sign-out-everywhere.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "popover-opening-sides", "title": "Popovers opening from different sides", "description": "Popovers opening from different sides, built from the popover component.", "registryDependencies": [ "button", "popover" ], "files": [ { "path": "registry/patterns/popover-opening-sides/popover-opening-sides.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "press-quotes-linked-snap", "title": "Press Quotes Linked Snap", "description": "Use this when press coverage is shown as swipeable quote cards: a no-library scroll-snap row where each card is one link to the article and Tab brings the focused card into view.", "registryDependencies": [ "@tealmac/carousel-snap" ], "files": [ { "path": "registry/patterns/press-quotes-linked-snap/press-quotes-linked-snap.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "progress-custom-colors", "title": "Progress bar with custom colors", "description": "Progress bar with custom colors, built from the progress component.", "registryDependencies": [ "progress" ], "files": [ { "path": "registry/patterns/progress-custom-colors/progress-custom-colors.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "pull-refresh-feed", "title": "Pull Refresh Feed", "description": "A news feed that refreshes on pull or on the Refresh button, prepends new items with a \"2 new stories\" announcement and keeps the reading position when nothing changed. Use this when a phone feed has fresh content on a server and people expect to pull to update it.", "registryDependencies": [ "@tealmac/pull-to-refresh" ], "files": [ { "path": "registry/patterns/pull-refresh-feed/pull-refresh-feed.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "radio-group-inline-horizontal", "title": "Inline horizontal radio group", "description": "Inline horizontal radio group, built from the radio group component.", "registryDependencies": [ "field", "radio-group" ], "files": [ { "path": "registry/patterns/radio-group-inline-horizontal/radio-group-inline-horizontal.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "radio-group-legend-and-description", "title": "Radio group with legend and description", "description": "Radio group with legend and description, built from the radio group component.", "registryDependencies": [ "field", "radio-group" ], "files": [ { "path": "registry/patterns/radio-group-legend-and-description/radio-group-legend-and-description.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "relative-date-label", "title": "Relative Date Label", "description": "A date field that writes the date back as today, tomorrow, in 3 days, last Friday or 2 weeks ago in the viewer's language, picking the unit that reads best. Use this when a date should be read at a glance as how far away it is, not only as a number.", "registryDependencies": [ "@tealmac/date-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/relative-date-label/relative-date-label.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "resend-cooldown-button", "title": "Resend Button with Cooldown", "description": "A resend-the-code button that disables itself for a countdown after each press, says how long is left in words, and re-enables itself, with a limit on how many times it can be used. Use this when resending is rate limited.", "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/resend-cooldown-button/resend-cooldown-button.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "resizable-horizontal-layout", "title": "Horizontal resizable layout", "description": "Horizontal resizable layout, built from the resizable component.", "registryDependencies": [ "resizable" ], "files": [ { "path": "registry/patterns/resizable-horizontal-layout/resizable-horizontal-layout.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "select-font-preview", "title": "Font family select with preview", "description": "Font family select with preview, built from the select component.", "registryDependencies": [ "field", "select" ], "files": [ { "path": "registry/patterns/select-font-preview/select-font-preview.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "select-invalid", "title": "Select component in an invalid state", "description": "Select component in an invalid state, built from the select component.", "registryDependencies": [ "field", "select" ], "files": [ { "path": "registry/patterns/select-invalid/select-invalid.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "select-large-list", "title": "Select component with a large list of options", "description": "Select component with a large list of options, built from the select component.", "registryDependencies": [ "field", "select" ], "files": [ { "path": "registry/patterns/select-large-list/select-large-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "select-small-trigger", "title": "Select component with small trigger size", "description": "Select component with small trigger size, built from the select component.", "registryDependencies": [ "field", "select" ], "files": [ { "path": "registry/patterns/select-small-trigger/select-small-trigger.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "settings-grouped-list", "title": "Settings Grouped List", "description": "An inset-grouped settings screen with account, switch and navigation rows, a destructive sign-out row and footer help text. Use this when you build a settings or account screen on a phone with a mix of toggles, values and links.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "switch", "@tealmac/list-row" ], "files": [ { "path": "registry/patterns/settings-grouped-list/settings-grouped-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sheet-action-list", "title": "Sheet Action List", "description": "A bottom action sheet for one item's actions on a phone with large rows, destructive actions styled, disabled ones kept visible and Cancel always present.", "registryDependencies": [ "button", "sheet" ], "files": [ { "path": "registry/patterns/sheet-action-list/sheet-action-list.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sheet-nav-mobile", "title": "Sheet Nav Mobile", "description": "The phone navigation menu: a labelled hamburger button opens a left sheet with the site links, marks the current page and closes with focus returned on navigate.", "registryDependencies": [ "button", "sheet" ], "files": [ { "path": "registry/patterns/sheet-nav-mobile/sheet-nav-mobile.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "skeleton-card-grid", "title": "Skeleton loader for a card grid", "description": "Skeleton loader for a card grid, built from the skeleton component.", "registryDependencies": [ "card", "skeleton" ], "files": [ { "path": "registry/patterns/skeleton-card-grid/skeleton-card-grid.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "skip-link-carousel", "title": "Skip Link Carousel", "description": "Use this when a carousel holds many links or buttons: a \"Skip carousel\" link that appears on focus before it, and a labelled landmark after it that takes focus, so keyboard users are not forced through every slide.", "registryDependencies": [ "@tealmac/carousel-peek" ], "files": [ { "path": "registry/patterns/skip-link-carousel/skip-link-carousel.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "slide-view-tracking", "title": "Slide View Tracking", "description": "Use this when impressions matter: a looping scale carousel that reports each slide once after it has been selected for a second, only while the tab is visible, and never for a slide that was only scrolled past.", "registryDependencies": [ "@tealmac/carousel-scale" ], "files": [ { "path": "registry/patterns/slide-view-tracking/slide-view-tracking.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "slider-vertical", "title": "Vertical slider with range selection", "description": "Vertical slider with range selection, built from the slider component.", "registryDependencies": [ "slider" ], "files": [ { "path": "registry/patterns/slider-vertical/slider-vertical.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sonner-action-button", "title": "Toast with action button", "description": "Toast with action button, built from the sonner component.", "dependencies": [ "sonner" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/sonner-action-button/sonner-action-button.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sonner-close-top-right", "title": "Toast with close button on top-right", "description": "Toast with close button on top-right, built from the sonner component.", "dependencies": [ "sonner" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/sonner-close-top-right/sonner-close-top-right.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "sonner-promise", "title": "Promise toast with loading state", "description": "Promise toast with loading state, built from the sonner component.", "dependencies": [ "sonner" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/sonner-promise/sonner-promise.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "spec-sheet-descriptions", "title": "Spec Sheet Descriptions", "description": "A product or device specification sheet in grouped vertical label-over-value cells that wraps to one column in narrow containers, not narrow viewports.", "registryDependencies": [ "@tealmac/descriptions" ], "files": [ { "path": "registry/patterns/spec-sheet-descriptions/spec-sheet-descriptions.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "speed-dial-create-menu", "title": "Speed Dial Create Menu", "description": "A create button that fans out Note, Photo and Scan actions, dims the page behind it, closes on Escape or a press outside and announces the chosen action. Use this when one screen can create several kinds of thing and the create button should stay a single control.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/speed-dial" ], "files": [ { "path": "registry/patterns/speed-dial-create-menu/speed-dial-create-menu.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "spinner-inline-text", "title": "Inline loading text with spinner", "description": "Inline loading text with spinner, built from the spinner component.", "registryDependencies": [ "spinner" ], "files": [ { "path": "registry/patterns/spinner-inline-text/spinner-inline-text.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "splitter-responsive-orientation", "title": "Splitter Responsive Orientation", "description": "A splitter that lays its panes side by side on wide screens and stacks them top over bottom on narrow ones, keeping the same panels and sizes.", "registryDependencies": [ "@tealmac/splitter" ], "files": [ { "path": "registry/patterns/splitter-responsive-orientation/splitter-responsive-orientation.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "splitter-three-pane", "title": "Splitter Three Pane", "description": "A navigator, list and detail layout with three resizable panes where each handle only trades space with its neighbour and every pane keeps a minimum.", "registryDependencies": [ "@tealmac/splitter" ], "files": [ { "path": "registry/patterns/splitter-three-pane/splitter-three-pane.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "statistic-share-of-total", "title": "Statistic Share Of Total", "description": "A ranked list of statistics where each row shows its share of the total as a number and a thin bar, sorted largest first with a cap and an Other row.", "registryDependencies": [ "@tealmac/statistic" ], "files": [ { "path": "registry/patterns/statistic-share-of-total/statistic-share-of-total.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "swipe-tabs-feed", "title": "Swipe Tabs Feed", "description": "A feed with For you and Following tabs whose panels swipe sideways, where each panel keeps its own scroll position and the selected tab is remembered while you switch. Use this when a phone feed has two or three views of the same kind of content that people flick between.", "registryDependencies": [ "@tealmac/swipe-tabs" ], "files": [ { "path": "registry/patterns/swipe-tabs-feed/swipe-tabs-feed.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "swipe-tabs-profile-counts", "title": "Swipe Tabs Profile Counts", "description": "A profile with Posts, Replies and Likes tabs that show counts in their names, update the counts when content changes and swipe between panels under a fixed header. Use this when a profile or account screen has several lists of different things and each has a count worth showing.", "registryDependencies": [ "avatar", "@tealmac/swipe-tabs" ], "files": [ { "path": "registry/patterns/swipe-tabs-profile-counts/swipe-tabs-profile-counts.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "switch-switch-group", "title": "Switch group", "description": "Switch group, built from the switch component.", "registryDependencies": [ "field", "switch" ], "files": [ { "path": "registry/patterns/switch-switch-group/switch-switch-group.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "table-basic", "title": "Basic table", "description": "Basic table, built from the table component.", "registryDependencies": [ "table" ], "files": [ { "path": "registry/patterns/table-basic/table-basic.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "table-with-footer", "title": "Table with footer", "description": "Table with footer, built from the table component.", "registryDependencies": [ "table" ], "files": [ { "path": "registry/patterns/table-with-footer/table-with-footer.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tabs-lazy-panels", "title": "Tabs Lazy Panels", "description": "Tabs that render a panel only when its tab is first opened and then keep it mounted, so input and scroll survive tab trips, or throw it away when keepAlive is off.", "registryDependencies": [ "tabs" ], "files": [ { "path": "registry/patterns/tabs-lazy-panels/tabs-lazy-panels.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tabs-url-hash", "title": "Tabs URL Hash", "description": "Tabs whose active tab lives in location.hash, so links open the right tab, reload keeps it and Back steps through tabs, with the first render always on the first tab.", "registryDependencies": [ "tabs" ], "files": [ { "path": "registry/patterns/tabs-url-hash/tabs-url-hash.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tabs-vertical-settings", "title": "Tabs Vertical Settings", "description": "The settings-page layout with a vertical tab list on the left, ArrowUp and ArrowDown navigation, a heading at the top of each panel and stacking on narrow screens.", "registryDependencies": [ "tabs" ], "files": [ { "path": "registry/patterns/tabs-vertical-settings/tabs-vertical-settings.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "taxonomy-depth-limit", "title": "Taxonomy Depth Limit", "description": "A sortable tree that refuses any move, by pointer or keyboard, that would make it deeper than the allowed number of levels, and says so. Use this when menus or categories must stay shallow.", "registryDependencies": [ "@tealmac/sortable-tree", "@tealmac/tree-view" ], "files": [ { "path": "registry/patterns/taxonomy-depth-limit/taxonomy-depth-limit.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "template-sections-picker", "title": "Template Sections Picker", "description": "A pick list for the sections of a document template where required sections cannot be removed, with a numbered preview of the result. Use this when users assemble a report or contract from standard sections.", "registryDependencies": [ "@tealmac/pick-list", "@tealmac/transfer-list" ], "files": [ { "path": "registry/patterns/template-sections-picker/template-sections-picker.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "time-off-request-range", "title": "Time Off Request Range", "description": "A leave request range that counts only working days, takes out public holidays, compares them with the remaining balance and refuses a request that overdraws it. Use this when leave is taken in days off work and the balance is charged only for working days.", "registryDependencies": [ "@tealmac/date-range-field", "@tealmac/date-time-core", "button" ], "files": [ { "path": "registry/patterns/time-off-request-range/time-off-request-range.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "toggle-group-custom-spacing", "title": "Toggle group with custom spacing", "description": "Toggle group with custom spacing, built from the toggle group component.", "registryDependencies": [ "toggle-group" ], "files": [ { "path": "registry/patterns/toggle-group-custom-spacing/toggle-group-custom-spacing.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "toggle-group-view-mode", "title": "Toggle Group View Mode", "description": "The Grid, List, Board view switcher: a labelled single-choice group that can never be empty, with icon buttons that have text names and an announced change.", "registryDependencies": [ "toggle-group" ], "files": [ { "path": "registry/patterns/toggle-group-view-mode/toggle-group-view-mode.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "toggle-outline", "title": "Toggle buttons with outline variant", "description": "Toggle buttons with outline variant, built from the toggle component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "toggle" ], "files": [ { "path": "registry/patterns/toggle-outline/toggle-outline.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tooltip-abbr-glossary", "title": "Tooltip Abbr Glossary", "description": "An abbreviation as a semantic abbr element with its meaning in the title, the accessible description and a focus-reachable tooltip, for the first use of a term.", "registryDependencies": [ "tooltip" ], "files": [ { "path": "registry/patterns/tooltip-abbr-glossary/tooltip-abbr-glossary.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tooltip-disabled-button", "title": "Tooltip on disabled button with wrapper", "description": "Tooltip on disabled button with wrapper, built from the tooltip component.", "registryDependencies": [ "button", "tooltip" ], "files": [ { "path": "registry/patterns/tooltip-disabled-button/tooltip-disabled-button.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tooltip-icon-trigger", "title": "Tooltip with icon trigger", "description": "Tooltip with icon trigger, built from the tooltip component.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "tooltip" ], "files": [ { "path": "registry/patterns/tooltip-icon-trigger/tooltip-icon-trigger.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "tooltip-status-dot", "title": "Tooltip Status Dot", "description": "A presence or status dot that is never only a colour: a focusable image named with the status in words, plus a tooltip with optional detail.", "registryDependencies": [ "tooltip" ], "files": [ { "path": "registry/patterns/tooltip-status-dot/tooltip-status-dot.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "trial-bar-app-shell", "title": "Trial Bar App Shell", "description": "An app shell header with a trial bar computed from the trial end date, that hides for paying customers, turns urgent in the last three days and says ended after expiry.", "registryDependencies": [ "@tealmac/trial-bar" ], "files": [ { "path": "registry/patterns/trial-bar-app-shell/trial-bar-app-shell.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "update-available-snackbar", "title": "Update Available Snackbar", "description": "A snackbar that says a new version is ready with Reload and Later buttons, that does not time out because the choice matters, and that is announced once. Use this when a service worker has downloaded a new version and the person decides when to reload.", "registryDependencies": [ "button" ], "files": [ { "path": "registry/patterns/update-available-snackbar/update-available-snackbar.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "vacation-rental-minimum-stay", "title": "Vacation Rental Minimum Stay", "description": "Typed check-in and check-out dates where the minimum number of nights depends on the check-in date, such as a weekend, a holiday week or the high season. Use this when a rental host sets a longer minimum stay for some dates than for others.", "registryDependencies": [ "@tealmac/date-range-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/vacation-rental-minimum-stay/vacation-rental-minimum-stay.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "validate-on-blur-then-change", "title": "Validate on Blur, then on Change", "description": "The \"reward early, punish late\" strategy: a field stays quiet while typing, validates when you leave it, and once it has shown an error it re-validates on every keystroke so the message clears the moment it is fixed. Use this when live validation feels nagging but a stale error feels broken.", "registryDependencies": [ "field", "input", "@tealmac/form-store" ], "files": [ { "path": "registry/patterns/validate-on-blur-then-change/validate-on-blur-then-change.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "video-playlist-now-playing", "title": "Video Playlist Now Playing", "description": "Use this when a page plays one video at a time from a list: a stage with the current video and a peeking row of cards whose pressed state shows what is playing.", "registryDependencies": [ "@tealmac/carousel-peek" ], "files": [ { "path": "registry/patterns/video-playlist-now-playing/video-playlist-now-playing.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "watermark-trace-identity", "title": "Watermark Trace Identity", "description": "A sensitive screen whose mark combines the user's email, session id and a minute-resolution time stamp that refreshes, so a screenshot can be traced to a moment.", "registryDependencies": [ "@tealmac/watermark" ], "files": [ { "path": "registry/patterns/watermark-trace-identity/watermark-trace-identity.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "year-over-year-range", "title": "Year over Year Range", "description": "A day range that also shows the same dates a year earlier, moving 29 February to 28 February in non-leap years and flagging the day count mismatch. Use this when figures are read against the same dates last year and leap years must not skew the comparison.", "registryDependencies": [ "@tealmac/date-range-field", "@tealmac/date-time-core" ], "files": [ { "path": "registry/patterns/year-over-year-range/year-over-year-range.tsx", "type": "registry:block" } ], "type": "registry:block" }, { "name": "use-animation-frame", "title": "useAnimationFrame", "description": "Run a callback on every animation frame with the elapsed time, and pause it with a flag, cleaning up its frame request on unmount.", "files": [ { "path": "registry/hooks/use-animation-frame/use-animation-frame.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-async", "title": "useAsync", "description": "Run an async function and get its status, data and error, where only the latest call may update state, and nothing updates after unmount.", "files": [ { "path": "registry/hooks/use-async/use-async.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-before-unload", "title": "useBeforeUnload", "description": "Ask the browser to confirm before the tab closes or reloads while there is unsaved work, and switch the guard off the moment it is saved.", "files": [ { "path": "registry/hooks/use-before-unload/use-before-unload.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-breakpoint", "title": "useBreakpoint", "description": "Know which named breakpoint is active (Tailwind defaults or your own) and ask isAtLeast or isBelow, with a server default.", "files": [ { "path": "registry/hooks/use-breakpoint/use-breakpoint.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-broadcast-channel", "title": "useBroadcastChannel", "description": "Send and receive messages between tabs, windows and iframes of the same origin, with the latest message in state and a cleanup on unmount.", "files": [ { "path": "registry/hooks/use-broadcast-channel/use-broadcast-channel.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-click-outside", "title": "useClickOutside", "description": "Call a handler when a pointer press lands outside one or more elements, for closing menus, popovers and inline editors.", "files": [ { "path": "registry/hooks/use-click-outside/use-click-outside.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-clipboard", "title": "useClipboard", "description": "Copy text to the clipboard with a copied flag that resets after a delay, an error state and a fallback for pages where the Clipboard API is blocked.", "files": [ { "path": "registry/hooks/use-clipboard/use-clipboard.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-color-scheme", "title": "useColorScheme", "description": "Read the system light or dark preference as a string, updating live, with a server default, for canvas, charts and embeds that CSS cannot theme.", "files": [ { "path": "registry/hooks/use-color-scheme/use-color-scheme.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-controllable-state", "title": "useControllableState", "description": "State that works controlled or uncontrolled: pass value to control it, or defaultValue to let the hook own it, and onChange fires either way.", "files": [ { "path": "registry/hooks/use-controllable-state/use-controllable-state.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-countdown", "title": "useCountdown", "description": "A countdown from a number of seconds that does not drift, with start, pause, resume and reset, and a callback when it reaches zero.", "files": [ { "path": "registry/hooks/use-countdown/use-countdown.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-counter", "title": "useCounter", "description": "A number with increment, decrement, set and reset, optional min, max and step, always clamped into range.", "files": [ { "path": "registry/hooks/use-counter/use-counter.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-debounced-callback", "title": "useDebouncedCallback", "description": "Turn a function into one that runs only after calls have stopped for a delay, with cancel, flush and an optional leading call.", "files": [ { "path": "registry/hooks/use-debounced-callback/use-debounced-callback.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-debounced-value", "title": "useDebouncedValue", "description": "Follow a fast-changing value only after it has settled for a delay, with an isPending flag and a flush to apply it now.", "files": [ { "path": "registry/hooks/use-debounced-value/use-debounced-value.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-document-title", "title": "useDocumentTitle", "description": "Set document.title from a component, and restore the previous title when it unmounts, so each view of a single-page app names itself.", "files": [ { "path": "registry/hooks/use-document-title/use-document-title.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-drag-gesture", "title": "useDragGesture", "description": "Drag an element with the pointer and keep its x and y offset in state, with axis lock, bounds, tap tolerance, spring-back and arrow-key movement as a keyboard alternative.", "dependencies": [ "@use-gesture/react" ], "files": [ { "path": "registry/hooks/use-drag-gesture/use-drag-gesture.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-event-listener", "title": "useEventListener", "description": "Attach a typed event listener to the window, the document or an element, always calling your newest handler and removing it on cleanup.", "files": [ { "path": "registry/hooks/use-event-listener/use-event-listener.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-fullscreen", "title": "useFullscreen", "description": "Put an element, or the page, in full screen with enter, exit and toggle, an isFullscreen flag that follows the Escape key, and a supported flag.", "files": [ { "path": "registry/hooks/use-fullscreen/use-fullscreen.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-fuzzy-search", "title": "useFuzzySearch", "description": "Typo-tolerant search over a list of strings or objects with Fuse.js, returning ranked results with match positions, and a helper to highlight them.", "dependencies": [ "fuse.js" ], "files": [ { "path": "registry/hooks/use-fuzzy-search/use-fuzzy-search.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-hotkey", "title": "useHotkey", "description": "Bind a keyboard shortcut such as mod+k to a handler, with sensible defaults, form-field safety and a formatHotkey helper that shows the right keys for Mac and PC.", "dependencies": [ "react-hotkeys-hook" ], "files": [ { "path": "registry/hooks/use-hotkey/use-hotkey.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-hover", "title": "useHover", "description": "Track whether a mouse or pen pointer is over an element, with optional open and close delays so a popover does not flicker, and touch ignored.", "files": [ { "path": "registry/hooks/use-hover/use-hover.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-idle", "title": "useIdle", "description": "Report true after a period with no pointer, keyboard, scroll or touch activity, and false again as soon as the person returns.", "files": [ { "path": "registry/hooks/use-idle/use-idle.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-in-view", "title": "useInView", "description": "A single true or false for whether an element is on screen, with an amount to show, a margin and a once option for reveal-on-scroll.", "files": [ { "path": "registry/hooks/use-in-view/use-in-view.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-infinite-scroll", "title": "useInfiniteScroll", "description": "Call a loader when a sentinel at the end of a list scrolls near the view, again after each load while it is still visible, and stop when there is no more.", "files": [ { "path": "registry/hooks/use-infinite-scroll/use-infinite-scroll.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-intersection-observer", "title": "useIntersectionObserver", "description": "Watch an element with an IntersectionObserver and get its latest entry and an isIntersecting flag, with threshold, root, margin and freeze-once-visible options.", "files": [ { "path": "registry/hooks/use-intersection-observer/use-intersection-observer.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-interval", "title": "useInterval", "description": "A declarative setInterval: pass a delay to run a callback repeatedly, or null to pause, and the callback always sees the newest props and state.", "files": [ { "path": "registry/hooks/use-interval/use-interval.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-is-mounted", "title": "useIsMounted", "description": "A function that tells you whether the component is still mounted, to skip state updates after an async call finishes late.", "files": [ { "path": "registry/hooks/use-is-mounted/use-is-mounted.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-isomorphic-layout-effect", "title": "useIsomorphicLayoutEffect", "description": "useLayoutEffect on the client and useEffect on the server, so layout measurements never log the server-rendering warning.", "files": [ { "path": "registry/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-key-held", "title": "useKeyHeld", "description": "True while a key (or any of several) is held down, resetting when the window loses focus so a stuck key never lingers.", "files": [ { "path": "registry/hooks/use-key-held/use-key-held.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-key-sequence", "title": "useKeySequence", "description": "Run a callback when a sequence of keys is typed in order, such as g then i or the Konami code, with a timeout between keys.", "files": [ { "path": "registry/hooks/use-key-sequence/use-key-sequence.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-latest", "title": "useLatest", "description": "A ref that always holds the newest value, so a timer, listener or async callback can read current props and state without being re-created.", "files": [ { "path": "registry/hooks/use-latest/use-latest.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-local-storage-state", "title": "useLocalStorageState", "description": "State saved in localStorage that is safe to server-render, syncs across tabs and components, ignores unreadable values and works when storage is blocked.", "files": [ { "path": "registry/hooks/use-local-storage-state/use-local-storage-state.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-long-press", "title": "useLongPress", "description": "Detect a press held for a set time with pointer or keyboard, with start, cancel and click handlers, and cancel when the pointer moves away.", "files": [ { "path": "registry/hooks/use-long-press/use-long-press.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-media-query", "title": "useMediaQuery", "description": "Subscribe to any CSS media query and get a boolean that stays in sync, with a server default so hydration does not mismatch.", "files": [ { "path": "registry/hooks/use-media-query/use-media-query.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-merged-refs", "title": "useMergedRefs", "description": "Combine several refs, callback or object, into one ref callback, so a component can forward a ref and keep its own.", "files": [ { "path": "registry/hooks/use-merged-refs/use-merged-refs.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-minimum-duration", "title": "useMinimumDuration", "description": "Turn a loading flag into one that waits a short delay before showing and, once shown, stays on for a minimum time, so spinners never flash.", "files": [ { "path": "registry/hooks/use-minimum-duration/use-minimum-duration.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-mutation-observer", "title": "useMutationObserver", "description": "Run a callback when an element's attributes, children or text change, with the observed node given as a ref, an element or a selector.", "files": [ { "path": "registry/hooks/use-mutation-observer/use-mutation-observer.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-online-status", "title": "useOnlineStatus", "description": "True while the browser reports a network connection, updating when it goes offline or comes back, safe for server rendering.", "files": [ { "path": "registry/hooks/use-online-status/use-online-status.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-page-visibility", "title": "usePageVisibility", "description": "Report whether the tab is visible or hidden, so you can pause polling, video and animation when nobody is looking.", "files": [ { "path": "registry/hooks/use-page-visibility/use-page-visibility.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-pagination", "title": "usePagination", "description": "Page numbers, page ranges with ellipses and from-to counts for a paginated list or table, controlled or uncontrolled.", "files": [ { "path": "registry/hooks/use-pagination/use-pagination.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-pointer-position", "title": "usePointerPosition", "description": "Track the pointer inside an element as pixels and as 0 to 1 fractions, with an inside flag, updated once per frame for spotlight, tilt and parallax effects.", "files": [ { "path": "registry/hooks/use-pointer-position/use-pointer-position.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-prefers-reduced-motion", "title": "usePrefersReducedMotion", "description": "True when the person asked their system for less motion, updating live, and assuming reduced motion on the server so no animation flashes.", "files": [ { "path": "registry/hooks/use-prefers-reduced-motion/use-prefers-reduced-motion.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-previous", "title": "usePrevious", "description": "Return the value from before the latest change, so you can compare it with the current one, for example to animate a change or detect a direction.", "files": [ { "path": "registry/hooks/use-previous/use-previous.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-resize-observer", "title": "useResizeObserver", "description": "Measure an element and keep its width and height up to date as it resizes, with a choice of content box or border box.", "files": [ { "path": "registry/hooks/use-resize-observer/use-resize-observer.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-roving-tabindex", "title": "useRovingTabindex", "description": "One tab stop for a group of items with arrow-key, Home and End movement, wrapping and RTL support, for toolbars, tab lists, radio groups and grids you build yourself.", "files": [ { "path": "registry/hooks/use-roving-tabindex/use-roving-tabindex.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-scroll-direction", "title": "useScrollDirection", "description": "Report whether the page or an element is scrolling up or down, ignoring small movements, plus whether it is at the top.", "files": [ { "path": "registry/hooks/use-scroll-direction/use-scroll-direction.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-scroll-lock", "title": "useScrollLock", "description": "Lock page scrolling while a modal, drawer or menu is open, without the layout shifting when the scrollbar disappears, and safe for nested locks.", "files": [ { "path": "registry/hooks/use-scroll-lock/use-scroll-lock.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-scroll-position", "title": "useScrollPosition", "description": "Track the scroll offset of the window or of one element, batched to one update per frame, with horizontal and vertical values.", "files": [ { "path": "registry/hooks/use-scroll-position/use-scroll-position.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-selection", "title": "useSelection", "description": "Multi-select state for rows or items with toggle, shift-click range selection, select all, and the all, some and none states a header checkbox needs.", "files": [ { "path": "registry/hooks/use-selection/use-selection.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-set", "title": "useSet", "description": "State for a Set with add, delete, toggle, has, clear and reset that always returns a new Set, so React sees the change.", "files": [ { "path": "registry/hooks/use-set/use-set.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-stable-callback", "title": "useStableCallback", "description": "A function with a stable identity that always calls the newest version of your handler, so memoised children and effects never re-run for it.", "files": [ { "path": "registry/hooks/use-stable-callback/use-stable-callback.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-stopwatch", "title": "useStopwatch", "description": "A stopwatch that counts up from the clock, with start, stop, reset and lap times, and does not drift when the tab is throttled.", "files": [ { "path": "registry/hooks/use-stopwatch/use-stopwatch.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-swipe", "title": "useSwipe", "description": "Detect swipes left, right, up and down on an element with a distance threshold and a time limit, returning props to spread on it.", "files": [ { "path": "registry/hooks/use-swipe/use-swipe.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-theme-scope", "title": "useThemeScope", "description": "Scope a set of theme tokens to one element, so many themes can live on the same page, with an optional light, dark or inherited mode.", "files": [ { "path": "registry/hooks/use-theme-scope/use-theme-scope.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-theme-transition", "title": "useThemeTransition", "description": "Run a theme change inside a View Transition with a circular reveal, falling back to an instant change when motion is reduced or unsupported.", "files": [ { "path": "registry/hooks/use-theme-transition/use-theme-transition.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-throttled-callback", "title": "useThrottledCallback", "description": "Turn a function into one that runs at most once per interval, on the first call and again with the latest arguments when the interval ends.", "files": [ { "path": "registry/hooks/use-throttled-callback/use-throttled-callback.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-throttled-value", "title": "useThrottledValue", "description": "Follow a fast-changing value at most once per interval, applying the first change at once and the latest one when the interval ends.", "files": [ { "path": "registry/hooks/use-throttled-value/use-throttled-value.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-timeout", "title": "useTimeout", "description": "A declarative setTimeout with reset and clear controls, for toasts, auto-dismiss and delayed actions that follow props.", "files": [ { "path": "registry/hooks/use-timeout/use-timeout.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-toggle", "title": "useToggle", "description": "A boolean you can flip, set on, set off or reset, with stable handlers, or cycle through a list of values.", "files": [ { "path": "registry/hooks/use-toggle/use-toggle.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-typeahead", "title": "useTypeahead", "description": "Jump to the item whose label starts with the letters just typed, with a reset timer, for listboxes, menus and trees built from scratch.", "files": [ { "path": "registry/hooks/use-typeahead/use-typeahead.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-undo-state", "title": "useUndoState", "description": "State with a history: set, undo, redo, jump back to a point and reset, with a cap on how many steps are kept.", "files": [ { "path": "registry/hooks/use-undo-state/use-undo-state.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-update-effect", "title": "useUpdateEffect", "description": "An effect that skips the first run and fires only when its dependencies change afterwards, to react to changes and not to the initial value.", "files": [ { "path": "registry/hooks/use-update-effect/use-update-effect.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-value-history", "title": "useValueHistory", "description": "Keep the last N values a variable has held, newest last, for sparklines, recent searches, change logs and trend arrows.", "files": [ { "path": "registry/hooks/use-value-history/use-value-history.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-virtual-list", "title": "useVirtualList", "description": "Render only the rows in view of a very long list, with a scroll element ref, dynamic row measuring and scroll to index, built on TanStack Virtual.", "dependencies": [ "@tanstack/react-virtual" ], "files": [ { "path": "registry/hooks/use-virtual-list/use-virtual-list.ts", "type": "registry:hook" } ], "type": "registry:hook" }, { "name": "use-window-size", "title": "useWindowSize", "description": "The browser window's inner width and height, updated on resize and orientation change, safe for server rendering.", "files": [ { "path": "registry/hooks/use-window-size/use-window-size.ts", "type": "registry:hook" } ], "type": "registry:hook" } ] }