{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "txbrendan", "homepage": "https://txbrendan.dev", "items": [ { "name": "theme", "type": "registry:theme", "title": "txbrendan theme", "description": "Color, tone, density, and motion tokens that every txbrendan component reads. Install it first: it replaces your color tokens. A component install only adds missing tokens.", "cssVars": { "theme": { "shadow-card": "var(--elevation-card)", "shadow-float": "var(--elevation-float)", "color-background": "var(--background)", "color-foreground": "var(--foreground)", "color-card": "var(--card)", "color-card-foreground": "var(--card-foreground)", "color-popover": "var(--popover)", "color-popover-foreground": "var(--popover-foreground)", "color-muted": "var(--muted)", "color-muted-foreground": "var(--muted-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-secondary": "var(--secondary)", "color-secondary-foreground": "var(--secondary-foreground)", "color-neutral": "var(--neutral)", "color-neutral-foreground": "var(--neutral-foreground)", "color-neutral-hover": "var(--neutral-hover)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-primary-hover": "var(--primary-hover)", "color-primary-soft": "var(--primary-soft)", "color-primary-soft-foreground": "var(--primary-soft-foreground)", "color-destructive": "var(--destructive)", "color-destructive-foreground": "var(--destructive-foreground)", "color-destructive-hover": "var(--destructive-hover)", "color-destructive-soft": "var(--destructive-soft)", "color-destructive-soft-foreground": "var(--destructive-soft-foreground)", "color-success": "var(--success)", "color-success-foreground": "var(--success-foreground)", "color-success-hover": "var(--success-hover)", "color-success-soft": "var(--success-soft)", "color-success-soft-foreground": "var(--success-soft-foreground)", "color-warning": "var(--warning)", "color-warning-foreground": "var(--warning-foreground)", "color-warning-hover": "var(--warning-hover)", "color-warning-soft": "var(--warning-soft)", "color-warning-soft-foreground": "var(--warning-soft-foreground)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-chart-1": "var(--chart-1)", "color-chart-2": "var(--chart-2)", "color-chart-3": "var(--chart-3)", "color-chart-4": "var(--chart-4)", "color-chart-5": "var(--chart-5)", "color-sidebar": "var(--sidebar)", "color-sidebar-foreground": "var(--sidebar-foreground)", "color-sidebar-primary": "var(--sidebar-primary)", "color-sidebar-primary-foreground": "var(--sidebar-primary-foreground)", "color-sidebar-accent": "var(--sidebar-accent)", "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)", "color-sidebar-border": "var(--sidebar-border)", "color-sidebar-ring": "var(--sidebar-ring)", "color-tone": "var(--tone)", "color-tone-foreground": "var(--tone-foreground)", "color-tone-hover": "var(--tone-hover)", "color-tone-soft": "var(--tone-soft)", "color-tone-soft-foreground": "var(--tone-soft-foreground)", "color-tone-soft-hover": "color-mix(in oklab, var(--tone-soft), var(--tone) 12%)", "color-tone-line": "color-mix(in oklab, var(--tone-soft-foreground), var(--background) 35%)", "color-skeleton": "color-mix(in oklab, var(--foreground) 10%, transparent)", "color-track": "color-mix(in oklab, var(--card), var(--foreground) 14%)", "radius-sm": "calc(var(--radius) * 0.6)", "radius-md": "calc(var(--radius) * 0.8)", "radius-lg": "var(--radius)", "radius-xl": "calc(var(--radius) * 1.4)", "radius-2xl": "calc(var(--radius) * 1.8)", "radius-3xl": "calc(var(--radius) * 2.2)", "radius-4xl": "calc(var(--radius) * 2.6)", "font-headline": "var(--font-geist-serif, ui-serif), ui-serif, Georgia, \"Times New Roman\", serif" }, "light": { "radius": "0.875rem", "background": "oklch(0.982 0 0)", "foreground": "oklch(0.163 0 0)", "card": "oklch(1 0 0)", "card-foreground": "oklch(0.208 0 0)", "popover": "oklch(1 0 0)", "popover-foreground": "oklch(0.208 0 0)", "muted": "oklch(0.952 0 0)", "muted-foreground": "oklch(0.502 0 0)", "accent": "oklch(0.955 0 0)", "accent-foreground": "oklch(0.208 0 0)", "secondary": "oklch(0.952 0 0)", "secondary-foreground": "oklch(0.208 0 0)", "neutral": "oklch(0.208 0 0)", "neutral-foreground": "oklch(0.99 0 0)", "neutral-hover": "oklch(0.3 0 0)", "primary": "oklch(0.542 0.212 266)", "primary-foreground": "oklch(0.99 0 0)", "primary-hover": "oklch(0.517 0.199 266)", "primary-soft": "oklch(0.957 0.02 266)", "primary-soft-foreground": "oklch(0.469 0.182 266)", "destructive": "oklch(0.57 0.2 24)", "destructive-foreground": "oklch(0.99 0 0)", "destructive-hover": "oklch(0.545 0.19 24)", "destructive-soft": "oklch(0.949 0.021 15)", "destructive-soft-foreground": "oklch(0.483 0.138 18)", "success": "oklch(0.511 0.12 157)", "success-foreground": "oklch(0.99 0 0)", "success-hover": "oklch(0.485 0.113 157)", "success-soft": "oklch(0.953 0.023 168)", "success-soft-foreground": "oklch(0.452 0.099 160)", "warning": "oklch(0.531 0.113 73)", "warning-foreground": "oklch(0.99 0 0)", "warning-hover": "oklch(0.505 0.106 73)", "warning-soft": "oklch(0.959 0.023 83)", "warning-soft-foreground": "oklch(0.468 0.095 76)", "border": "oklch(0.907 0 0)", "input": "oklch(0.64 0 0)", "ring": "oklch(0.542 0.212 266)", "chart-1": "oklch(0.542 0.212 266)", "chart-2": "oklch(0.58 0.099 193)", "chart-3": "oklch(0.62 0.135 68)", "chart-4": "oklch(0.55 0.18 308)", "chart-5": "oklch(0.58 0.19 23)", "sidebar": "oklch(0.973 0 0)", "sidebar-foreground": "oklch(0.163 0 0)", "sidebar-primary": "oklch(0.542 0.212 266)", "sidebar-primary-foreground": "oklch(0.99 0 0)", "sidebar-accent": "oklch(0.955 0 0)", "sidebar-accent-foreground": "oklch(0.208 0 0)", "sidebar-border": "oklch(0.907 0 0)", "sidebar-ring": "oklch(0.542 0.212 266)", "control-h-sm": "1.75rem", "control-h-md": "2.25rem", "control-h-lg": "2.75rem", "control-px-sm": "0.625rem", "control-px-md": "0.875rem", "control-px-lg": "1.125rem", "control-gap": "0.5rem", "space-inset": "0.75rem", "space-stack": "0.5rem", "motion-duration-fast": "120ms", "motion-duration-base": "240ms", "motion-duration-slow": "320ms", "motion-duration-layout": "280ms", "motion-duration-close": "100ms", "motion-ease-out": "cubic-bezier(0.2, 0, 0, 1)", "motion-ease-in-out": "cubic-bezier(0.45, 0, 0.2, 1)", "motion-ease-spring": "linear(0, 0.018, 0.065, 0.131, 0.207, 0.289, 0.372, 0.452, 0.528, 0.598, 0.661, 0.718, 0.768, 0.812, 0.849, 0.881, 0.907, 0.929, 0.947, 0.962, 0.974, 0.983, 0.99, 0.995, 0.999, 1.002, 1.004, 1.005, 1.006, 1.006, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1)", "motion-ease-close": "cubic-bezier(0.25, 0.1, 0.25, 1)", "motion-press-scale": "0.96", "motion-close-scale": "0.95", "motion-distance": "6px", "motion-pulse-duration": "2s", "motion-crossfade-delay": "50%", "elevation-card": "0 1px 2px oklch(0.208 0 0 / 0.05), 0 2px 10px oklch(0.208 0 0 / 0.05)", "elevation-float": "0 2px 6px oklch(0.208 0 0 / 0.06), 0 14px 36px oklch(0.208 0 0 / 0.14)", "elevation-glow": "0px", "type-meta": "0.75rem", "type-meta-leading": "1rem", "type-body": "0.8125rem", "type-body-leading": "1.125rem", "type-prose-leading": "1.25rem", "type-section": "1rem", "type-section-leading": "1.25rem", "type-display": "1.25rem", "type-display-leading": "1.5rem", "type-display-tracking": "-0.02em", "type-headline": "clamp(1.75rem, 1.25rem + 2cqi, 2.25rem)", "type-hero": "clamp(2.25rem, 1.5rem + 3.5cqi, 3rem)", "type-headline-leading": "1.12", "type-headline-tracking": "-0.02em", "type-weight-regular": "450", "type-weight-strong": "550" }, "dark": { "background": "oklch(0.17 0 0)", "foreground": "oklch(0.97 0 0)", "card": "oklch(0.205 0 0)", "card-foreground": "oklch(0.97 0 0)", "popover": "oklch(0.225 0 0)", "popover-foreground": "oklch(0.97 0 0)", "muted": "oklch(0.25 0 0)", "muted-foreground": "oklch(0.72 0 0)", "accent": "oklch(0.28 0 0)", "accent-foreground": "oklch(0.97 0 0)", "secondary": "oklch(0.26 0 0)", "secondary-foreground": "oklch(0.96 0 0)", "neutral": "oklch(0.93 0 0)", "neutral-foreground": "oklch(0.208 0 0)", "neutral-hover": "oklch(0.86 0 0)", "primary": "oklch(0.55 0.191 266)", "primary-foreground": "oklch(0.99 0 0)", "primary-hover": "oklch(0.525 0.191 266)", "primary-soft": "oklch(0.29 0.075 266)", "primary-soft-foreground": "oklch(0.84 0.078 266)", "destructive": "oklch(0.57 0.19 24)", "destructive-foreground": "oklch(0.99 0 0)", "destructive-hover": "oklch(0.545 0.18 24)", "destructive-soft": "oklch(0.3 0.08 25)", "destructive-soft-foreground": "oklch(0.85 0.08 25)", "success": "oklch(0.53 0.12 157)", "success-foreground": "oklch(0.99 0 0)", "success-hover": "oklch(0.505 0.113 157)", "success-soft": "oklch(0.29 0.06 155)", "success-soft-foreground": "oklch(0.86 0.09 155)", "warning": "oklch(0.55 0.113 73)", "warning-foreground": "oklch(0.99 0 0)", "warning-hover": "oklch(0.525 0.106 73)", "warning-soft": "oklch(0.31 0.06 75)", "warning-soft-foreground": "oklch(0.88 0.09 85)", "border": "oklch(1 0 0 / 10%)", "input": "oklch(0.53 0 0)", "ring": "oklch(0.55 0.191 266)", "chart-1": "oklch(0.72 0.14 266)", "chart-2": "oklch(0.74 0.11 193)", "chart-3": "oklch(0.78 0.14 78)", "chart-4": "oklch(0.72 0.15 308)", "chart-5": "oklch(0.72 0.16 23)", "sidebar": "oklch(0.15 0 0)", "sidebar-foreground": "oklch(0.97 0 0)", "sidebar-primary": "oklch(0.55 0.191 266)", "sidebar-primary-foreground": "oklch(0.99 0 0)", "sidebar-accent": "oklch(0.28 0 0)", "sidebar-accent-foreground": "oklch(0.97 0 0)", "sidebar-border": "oklch(1 0 0 / 10%)", "sidebar-ring": "oklch(0.55 0.191 266)", "elevation-card": "0 1px 2px oklch(0 0 0 / 0.3), 0 2px 10px oklch(0 0 0 / 0.22)", "elevation-float": "0 2px 6px oklch(0 0 0 / 0.32), 0 16px 40px oklch(0 0 0 / 0.5)", "elevation-glow": "6px" } }, "css": { "@utility tone-neutral": { "--tone": "var(--neutral)", "--tone-foreground": "var(--neutral-foreground)", "--tone-hover": "var(--neutral-hover)", "--tone-soft": "var(--secondary)", "--tone-soft-foreground": "var(--secondary-foreground)" }, "@utility tone-brand": { "--tone": "var(--primary)", "--tone-foreground": "var(--primary-foreground)", "--tone-hover": "var(--primary-hover)", "--tone-soft": "var(--primary-soft)", "--tone-soft-foreground": "var(--primary-soft-foreground)" }, "@utility tone-danger": { "--tone": "var(--destructive)", "--tone-foreground": "var(--destructive-foreground)", "--tone-hover": "var(--destructive-hover)", "--tone-soft": "var(--destructive-soft)", "--tone-soft-foreground": "var(--destructive-soft-foreground)" }, "@utility tone-success": { "--tone": "var(--success)", "--tone-foreground": "var(--success-foreground)", "--tone-hover": "var(--success-hover)", "--tone-soft": "var(--success-soft)", "--tone-soft-foreground": "var(--success-soft-foreground)" }, "@utility tone-warning": { "--tone": "var(--warning)", "--tone-foreground": "var(--warning-foreground)", "--tone-hover": "var(--warning-hover)", "--tone-soft": "var(--warning-soft)", "--tone-soft-foreground": "var(--warning-soft-foreground)" }, "@property --dither": { "syntax": "\"\"", "inherits": "true", "initial-value": "0" }, "@property --dither-swap": { "syntax": "\"\"", "inherits": "true", "initial-value": "0" }, "@property --dither-third": { "syntax": "\"\"", "inherits": "true", "initial-value": "0" }, "@property --texture-gradient": { "syntax": "\"\"", "inherits": "true", "initial-value": "0" }, "@property --texture-grain": { "syntax": "\"\"", "inherits": "true", "initial-value": "0" }, "@property --texture-hover": { "syntax": "\"\"", "inherits": "true", "initial-value": "0" }, "html": { "--texture-tile-64": "image-set(url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAJLSURBVHjaAUACv/0AQzHuVYcI/A8ApD8Y1NW0BKsAeSOFhjrTwngArwiUxzF/xbsAe9hvQJ8OrxsAeHP09z2VeHMAP9+Y7baHr4AASza3lRK7xI0AknYTJong3BYAtn/9OUmrojIAWn7rj1ekBkQAJaUtpjG/YXsAxzetyMnw/4YAYeUGh2JcaQcAxCBwQPigZk0AuhOMNYdT0PEAe5+MXvMmDpcAkNQpDnE6w1gAMvZThEe0hS8Au0iwCr6w9PQAinj+SLzY66cAENt6xOkySk0A292BXIcemfkA/3CwA5CpNQUATtCILUitP7YAWt0opMn5klIAJcLsqAgyxn8A7nAWWpTeucsAg0q9E3BD3uIA/j7Z0KSSkzIAk+b5fjQKUxQALeDj8E9iELQAmX1JZaGkIPIAyY7VXpifgOkAjxyKdWPvfzoApl3/l53OitwAR3NBHDtnVCoAKB8S2bpfQ88AHO5c12IN8KsA+XFfgu81H4AArDILwjPt78oAUSEe4kOuoIkADu7HpA+mteUAHcM/OD+A2NUA6WXkBtdKmTQAUtZkOEmZIHkACmzEPxGgkmoAmHi7jbT3jJUA8p/qYQlLHYIAqPDMElI7uf0AHyPwqHTQhvoA7KQVZlA58EcAAFuOtvz+r7UAVe9Aq2kq+mUAB3WcHtJav9oAUSiO1sndhakAZ7K2/cZba+IAJG/SxZiB2EUAB7B5IgFTcpwAgloCN0Jyw5MAng6mengAMIIAoWgVbta/SgwAndmOff91rL4A8kKwYsswgTOPdgYh4zKVvgAAAABJRU5ErkJggg==\") 1x, url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAK5SURBVHjabdVNqkMxCAXgQKaCWwlkGnDrglPBrQScBuy5Yzt5ff1Kmx/13LGY53t7qwytO2o08MU1NVfuWGN5dBAj1q2HPfmSaAevobau8JS6O6KDROqpNazG85r/QIVrlXDa/v7vwJVl+jKOipeODiv4hNieFHGXZgcjOZPpqL2Rd54OcaQq2ZZ5ODF12C7vhdYWX+Os1YG2b0o/PKPOlOiAqxHPqxfnr9LT4cy3Bw52aN9jQzrcRfi7RqmPc1Z2CJ+sl1HszTlqdpCw0rtf4QrGM+lgIxfZeDLZv292YKqzWdeSWLqpOgReYwyPFwMlXR3UResBb+oLlw5zZIjf9YxpOQ7XICNT574q85mVdaiSgWXZhhvvsTusl0OVcil6u+J02J5J6guFMqNNHVAfetd1KNNF83R4D+c5223lC7vRQRmTl5NRTs73qEM9fmmJcTUy5j9g/E6ZPF7DN8/VgfKNxwiFOoTm+ANmksuws+lorqIO95vAvZ8pGgcd00FrXpRzH34lxd7Bz87Czizvwz3fDkuE15yXMY17kXcgnTUpLXzX4lsd5kXw3cQAjUTuRQesOHcpofv3/AKlAToeiXCJcdevrndA1kwkLC32h6NaB1T73S8qyk9sDHWDmZe5WBlLpuYfeCjBQ9ikLDdDQRsgb5ABmEJDVyKyO+CW7/3Cfjpi8HgHU9EIzUAMI5l2hyKr52cOWzFTqYNrjXsnBoMD2ZIdZhFazlUww3gmeAcMz5r7nI1JRXNKhzF2ICdOXaxesTugI5EzHsfIcc9/YIhsu/Ml0joqvQNKqWjucw3BgmntcCQIi+Y9O05gTBvQwju621RxP2t3QAZ/j1gac7OQ3Q6KDQ1iWSR02bgDnmaogiBEkW74uIPPg2w82HzU8nE74EwYZcEgyvYbr0PRohiHbuAnJ3ODHwSZCuMs7pOPAAAAAElFTkSuQmCC\") 2x, url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADAAQMAAABoEv5EAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAQ7SURBVHjanZjBrYNADESNOOyNNLASbeyNlqABCA2ElrjRxko0ALc9IPyf+RXgy/9RJgrr9XhmHInS1UfQpcRhy5VKI6qrfFTeA/u81qoyyjWs17Dt5yrVuv86B9Deof52ueIBpb7T1XeXpPYWB7AvdsTMAyrl3K3qVW373TmA9u6uUdpFo0ieVD7FPjr6AGmPTs9VT611y8P2/44D4AavSfMounCDhZbwjCziAGLT1WfZT+XbpU/UfFVr/mwOIPepPYv0XT2X3AT9yjWtMhQHwBHpgepW3yE2AX7s31QfyQHEMbVa9Nflj8ZB4Z9UJVarA6jnbZ+3mhucCyzZVdtvoN8OwHh20oPtauSi8oOJUnjsAPhGnTeOSFPbb4rT2v6CMKXvARpZf2EYAy96y87ruURa+x7Y70Rf82etT5OMyHD2okdwANwXgwQQp6KHcYWhyoM6gNyb7tRU+yntEUw1pIujOAC4pWfhlLlaI+N0rihRzai/Bxih2Mh+iDRp18KLZ+ZXB5AbU0DVYrCuKBE83md1AELlY9dScLXqL3D62CRr7XuAd69pyxKgmvnHVPIY9A4OANLDNqtcOnqz85gTKm8OIH4KDMuNMJ9W/LKhkuiIBxgTx61/Zm82nHdA2mKfHACSgY3pginSXSPNVZm0OQAMm8rRUx5m3jaV/Q5X0zmADOmNaih+90w77Sn6TQ4AqtVarjFwlRRP2RkDODwA/3Qu3B16XcN+2NZ3MqwOgI5iP/rtENb4MVmEzZZO3gMwtVX4EVrU/xss8fA5O+5rAGZkODds0QbA8gSezWg5AMxMmCWm/dxaDr0oFEHOHABmFqfN7GfQPG0X2tokc+73ADpIoIkSeFJ9d+2M46K2yQEwS0Le6hNEwUvipMY5angP8NUWdicS6tPXz0aPLaS+B4xqBypGGxhRNel5WuIA9mU10jcWc2tyIfxb9GqSA4g90ZkbtIGk5n0pODcJzAHgi1ROOrGc9OEv0XCzeOEAYAabhpHMAis1X7YneAAYzyzpE91oCUrEjNnAvwcQ5WsoLTN5k32Dvfu13cMBIDftslpmQp37YDdIAoa77wFmG9smB5C892dDIO5YIn8PIDTIhP4SuVAa0nMnZr3JAeBA8P76rPKYGfOJfxDKHQCkrx9t5RPtuZrvVgh3cgBmjfSV9QkZ6oUNwSS7UgdgG9PIDULZwg6MM7FHQV8HwC6tz5aITJC/kTDOCgUdANkdjc7o6URASZg3m8Y1Jgdgc/6Tx0IKXmIhjE34FxwA0rwf6Sl7I5FwC+2vswTwHqjnlY2ag7KWm6tJYM4jGe49QOVkwee3A64hREsnyS7iPQDjo91lYjGLknj3sojZeYDJVhSkkPRsP2HYfmGfdgAEiBZjg7uLtYS+omXCgL0HzKpHyxOkE4vR54ajsG84ACSDgu0ev4lA+ZyVDaF7D/wBe+EmpPPxYRQAAAAASUVORK5CYII=\") 3x)", "--texture-tile-59": "image-set(url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAA7AQMAAAD/62DwAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAIeSURBVHjaARMC7P0AIyGgSzC8n6AAioYyVZFE1sAAfHK5bc5ul6AAnXQlt4gYgIAADLcL2oXu1uAApuuzj9efEoAA7t5KIUS6WEAAnNSOusrW+yAASXNQWx8EFcAAm6QWHPXRd4AAMr9fDjOsXuAAAGj3HWq+JGAAyRQBiA2xIeAAxgVjczLczgAAdjoQnfF+buAA+Vyrsf0NZ8AAp023XoAyCqAA6TSD8eYvr0AAKIaw16ojuyAAHuiFND53tqAAdk8egIFnoeAAgBQWAakMXWAAEVP6v0+y3UAA+AZCcySegiAAchY98AJC32AAdoPxEU0EbyAAgXYFLFyyKYAA6VtxhRVdYMAARnIXpjA9pOAASKRAbbvSbMAAnWlfe1kvSqAA/nhhAj65CMAAfi4d6tmtVcAAi3mbbqifJqAA136SKSNnC4AARRgNxnTfjmAAD54eAKlVN8AAyHPc09qSnoAA3JX/pd0/JOAAiKB+IIMJN4AAelysSTA7tAAA4WLehvjgWGAAlA1CodaV2gAAkgOXhw2AfAAAHcp6MMaWxMAA1mQYU8qQBYAAXf/h0na/4oAAI++gLi6JxyAA1HKqkTWQSKAAyXB0pPe3LMAAXnM4/TPjDWAAivYNIxgMEmAA6TjNWEku46AAf6sVD2Skf6AAAaMcBtAqWCAAxJIMkc7wqwAApyXULoKRrEAAstu0g8KF+4AADji4WWZYKIDw69/Xu6tF2wAAAABJRU5ErkJggg==\") 1x, url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAB2AQMAAAAnafVSAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAJWSURBVHjaZdQxCoMxCAZQwVXwKoGsglcXXIVcJeAqpP5r3fpKaRL9FIgJA9ZhONdfwL8tTJj2dlwr5Q7rVToueUvKNYY9ddE+aoZmYMNwj8LJsF2VUsMhdQ7bS/WHZMP9q1pBfZsT29aw31xWJ26kvEPDy5U37IMPFu477CcWCt63E1VtmOm8/aCY4/aVhwHEnmJKnKIlw7cLCV8p8iBhTQtsYWWmvPcrz59VOLCr+lC74jX8fN84/ZyEFL3DoSuP7vpeAhHD5byMH5bQi7eGyUwOpEYQn67nv7HKbPPiUj0Swyqr/6yTgKKBNWyAXW/AcLg7ZRhx84vzVjczcw0/A1mkTMvLiIaVUDgfAC3KJ9PyvRZxJSx5NGyo3RG6+x4it+HyDjvaxv3d9g4v6RM1hIEzVk1brAWS5yTJvcOe4vvp2U5vRQy/UhPssa7jYHdYiwqzIj1y72k76n6kwvxR9+vfqVreLyWWnlsbXhv7yysdq2clwx3I6jZD+N7cefz3NeW82cVw6o4N5+3nvtiZ/Kjr9W+z+N4ExuDc8/pvjZ6Hu7zrfc6C4UKhLJO+LGyTYV+QiwK/smfANAG7mkL2WXca84YG91y73HWHU2R1XPh24PvA4Z3vdcNI5byi6W70t9W7q+a9modzKUU48vYvW8PXFXTF6kgpdd7+vat3Ua9j5uK+3LBFD1ESd9cv0nTvE7vZm9qpimNYe5hxw5M+sz8P9yZgvD0QQL3vabhbSd9SvfUgDgyH0u6G9S5w7L4P9xbpHBhfsv06z//uTW/Htov0aTb8A8skYgI9U5KkAAAAAElFTkSuQmCC\") 2x, url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAACxAQMAAACx586GAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAO6SURBVHjanZfBjawwEEQ98sE3SADJaXBzSkwCwCQAKXEjDUtOYLj5gOj/2vsT6FmtVrtvR2C3q6vLzq/Jr6GsbuiS/7oiR16EP608d2N+Vf8dh/eZpzC8jvtdb2fmUY74HcsT4n7efY17zW99vpXn5YzX4T9nuSR3zs0uu/Zt5K4/IK5L98yCT9kr65TVzMunypbKN+Ve7rdQNDeNPN/K9YFLHbqRU6Bo5RmH2Q12nhcKfuS+Qu5u1EU+nKyZD12I3zRMbpiTY5Gvw71PztHK85zKh9+rWw65znsKkYOwcxRVRAae3KOuVPZjWLT+Vs5X3JxwlAhj4zPVf45o53cX3PtwLqio+rN8AwchP/BXda8zronqseab4+grL7XyeFX/jG5Swcs3RNGW4flWLk8YlqOoRIPIyVLjRzhHKy8fGXptOsr+d3yuG8tq5rIFfx3ZJRYpn+p3Kbuo/o3cbw5fKl9H05WNrkml6dzKHSrSf528xVO0S8pVi51T/6FHVLXZUaBopenBytXK3q1fXChbwKYGhGrnDq+ekjyta3opKq2Tulm5PM696uBG1eeHIcKCqZ6ZY/4s0gvi5GUjH7gXiT/wq/6JQRfcn/hS3MXbudb80tbz6iQH+/Vb+H8WFo4+ccj4DUgCh/wr/m3nw6u2LQsDhXnNxrFN9GDmHa13cHDMWRR+T2Pcj+bnNq5zlqVS8ycNc6Dvhta/Vi70yOPiGjhE+oUA4LpWByPH0PzOEDllG+85lP0c2jyy8tyl+ASmEvZYaORF/Ke2XGTj2AivyJPKADOhf8kS6MHKB2Qw6wRhEBBsEDmzO65m7nqyB/vV2YEPsFl/qW9b+d3ReknH0NSiEWGmeZSZL0d+nyLo88RJvFA31aeVM15beqytZ5PrGActVxh5JFDRtjQvhH55UrkOZ+eyhrjiRZVpgtdpx83I1cwzpt1jsPRIIKSxd6rH88184mciS+cX0ejMLZn/wOkU4iK7ZrNIKxPyX+oDVs7aInmP7IoeuDtMjIMz2znGiBionjoSE1Z/H3/g9Jrs7UK0qyHkLtwv9X8rJ1Tr/WVjhSiKq1Bzzh+45mqm0qF2reFBfPNbKydW6YRFUXKSh2VNGtVWM+d+J8y1/mTjzVgO7i8/cM1pj7uR6Kx3B6/hMxU7jzjAlpiMGBTCYNdK7FzjECtcDtLIPRH/9D7l7RxVa8v0/Awkc9KIvs6ZOXmYSyuqUFE5VYV6yw+cYDarF2Fut2tX10fniJXrNepx5cGOCJ9VN7s5O/8H9gDGY50nj04AAAAASUVORK5CYII=\") 3x)" }, "@utility texture-dither": { "--dither": "1", "--texture-gradient": "0", "--texture-grain": "0" }, "@utility texture-gradient": { "--dither": "0", "--texture-gradient": "1", "--texture-grain": "0" }, "@utility texture-grain": { "--dither": "0", "--texture-gradient": "0", "--texture-grain": "1" }, "@utility texture-flat": { "--dither": "0", "--texture-gradient": "0", "--texture-grain": "0" }, "@utility texture-fade": { "transition-property": "--dither, --texture-gradient, --texture-grain, --texture-hover", "transition-duration": "var(--dither-fade, var(--motion-duration-slow)), var(--motion-duration-slow), var(--motion-duration-slow),\n var(--motion-duration-base)", "transition-timing-function": "var(--motion-ease-out)" }, "@property --dither-in": { "syntax": "\"\"", "inherits": "true", "initial-value": "1" }, "@utility dither-intro": { "animation": "dither-in calc(var(--motion-pulse-duration, 0s) * 0.4) linear both", "@media print": { "--dither-in": "1 !important" } }, "@keyframes dither-in": { "from": { "--dither-in": "0" }, "to": { "--dither-in": "1" } }, ".dither-intro[data-dither-held]": { "animation": "none", "--dither-in": "0" }, "@property --dither-view": { "syntax": "\"\"", "inherits": "true", "initial-value": "1" }, "@utility dither-intro-view": { "animation": "dither-in calc(var(--motion-pulse-duration, 0s) * 0.4) linear both", "@supports (animation-timeline: view())": { "animation": "dither-in calc(var(--motion-pulse-duration, 0s) * 0.4) linear both,\n dither-seen auto linear both", "animation-timeline": "auto, view()", "animation-range": "normal, entry 0% entry 100%" }, "@media print": { "--dither-in": "1 !important", "--dither-view": "1 !important" } }, "@layer utilities": { "@supports (animation-timeline: view())": { ".dither-intro-view > *, .dither-intro-view::before": { "animation": "dither-view calc(var(--motion-pulse-duration, 0s) * 0.4) linear both" }, "@container style(--dither-seen: 0)": { ".dither-intro-view > *, .dither-intro-view::before": { "animation-play-state": "paused" } } }, "@media print": { ".dither-intro-view > *, .dither-intro-view::before": { "--dither-in": "1 !important", "--dither-view": "1 !important" } } }, "@keyframes dither-seen": { "from": { "--dither-seen": "0" }, "1%, to": { "--dither-seen": "1" } }, "@keyframes dither-view": { "from": { "--dither-view": "0" }, "to": { "--dither-view": "1" } }, "@utility dither-mask": { "--dither-cell": "calc(var(--dither-size, 4px) / 2)", "--texture-sum": "max(var(--dither, 0) + var(--texture-gradient, 0) + var(--texture-grain, 0), 0.001)", "--dither-gate": "min(1, 2 * var(--dither, 0) / var(--texture-sum))", "--gradient-gate": "min(1, 2 * var(--texture-gradient, 0) / var(--texture-sum))", "--grain-gate": "min(1, 2 * var(--texture-grain, 0) / var(--texture-sum))", "mask-image": "linear-gradient(\n color-mix(\n in srgb,\n var(--foreground)\n calc(\n (1 - var(--dither, 0) * 0.8 - var(--texture-gradient, 0) * 0.8 * (1 - var(--texture-hover, 0) * (1 - var(--texture-move, 1))) - var(--texture-grain, 0) * var(--grain-depth, 0.6) * (1 - var(--texture-hover, 0))) *\n (1 - var(--dither, 0) * (1 - min(var(--dither-in, 1), var(--dither-view, 1)))) * 100%\n ),\n transparent\n )\n 0 0\n ),\n var(\n --texture-ramp,\n linear-gradient(\n var(--texture-angle, 180deg),\n color-mix(in srgb, var(--foreground) calc(var(--gradient-gate) * 100%), transparent) calc(var(--texture-hover, 0) * var(--texture-move, 1) * 100%),\n transparent\n )\n ),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 0, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 1, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 2, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 3, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 4, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 5, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 6, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 7, 1) * 100%), transparent) 0),\n linear-gradient(color-mix(in srgb, var(--foreground) calc(var(--grain-gate) * 100%), transparent) 0 0),\n var(--texture-tile-64),\n var(--texture-tile-59)", "mask-position": "0 0,\n 0 0,\n calc(var(--dither-cell) * 0) calc(var(--dither-cell) * 0),\n calc(var(--dither-cell) * 2) calc(var(--dither-cell) * 2),\n calc(var(--dither-cell) * 2) calc(var(--dither-cell) * 0),\n calc(var(--dither-cell) * 0) calc(var(--dither-cell) * 2),\n calc(var(--dither-cell) * 1) calc(var(--dither-cell) * 1),\n calc(var(--dither-cell) * 3) calc(var(--dither-cell) * 3),\n calc(var(--dither-cell) * 3) calc(var(--dither-cell) * 1),\n calc(var(--dither-cell) * 1) calc(var(--dither-cell) * 3),\n 0 0,\n 0 0,\n 0 0", "mask-size": "100% 100%,\n 100% 100%,\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n 100% 100%,\n 64px 64px,\n 59px 59px", "mask-repeat": "no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, repeat, repeat", "mask-composite": "add, add, add, add, add, add, add, add, add, add, intersect, exclude, add" }, "@utility dither-sheen": { "--dither-cell": "calc(var(--dither-size, 4px) / 2)", "--texture-sum": "max(var(--dither, 0) + var(--texture-gradient, 0) + var(--texture-grain, 0), 0.001)", "--dither-gate": "min(1, 2 * var(--dither, 0) / var(--texture-sum))", "--gradient-gate": "min(1, 2 * var(--texture-gradient, 0) / var(--texture-sum))", "--grain-gate": "min(1, 2 * var(--texture-grain, 0) / var(--texture-sum))", "background-color": "currentColor", "opacity": "calc(\n (var(--dither, 0) * 0.3 + var(--texture-gradient, 0) * 0.28 + var(--texture-grain, 0) * 0.2) *\n (1 - var(--texture-hover, 0) * (var(--texture-gradient, 0) + var(--texture-grain, 0)))\n )", "mask-image": "linear-gradient(transparent 30%, var(--foreground)),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 0, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 1, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 2, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 3, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 4, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 5, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 6, 1) * 100%), transparent) 0),\n conic-gradient(at var(--dither-cell) var(--dither-cell), transparent 75%, color-mix(in srgb, var(--foreground) calc(var(--dither-gate) * clamp(0, min(var(--dither-in, 1), var(--dither-view, 1)) * 8 - 7, 1) * 100%), transparent) 0),\n linear-gradient(color-mix(in srgb, var(--foreground) calc(var(--gradient-gate) * 100%), transparent) 0 0),\n linear-gradient(color-mix(in srgb, var(--foreground) calc(var(--grain-gate) * 100%), transparent) 0 0),\n var(--texture-tile-64),\n var(--texture-tile-59)", "mask-position": "0 0,\n calc(var(--dither-cell) * 0) calc(var(--dither-cell) * 0),\n calc(var(--dither-cell) * 2) calc(var(--dither-cell) * 2),\n calc(var(--dither-cell) * 2) calc(var(--dither-cell) * 0),\n calc(var(--dither-cell) * 0) calc(var(--dither-cell) * 2),\n calc(var(--dither-cell) * 1) calc(var(--dither-cell) * 1),\n calc(var(--dither-cell) * 3) calc(var(--dither-cell) * 3),\n calc(var(--dither-cell) * 3) calc(var(--dither-cell) * 1),\n calc(var(--dither-cell) * 1) calc(var(--dither-cell) * 3),\n 0 0,\n 0 0,\n 0 0,\n 0 0", "mask-size": "100% 100%,\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n calc(var(--dither-cell) * 4) calc(var(--dither-cell) * 4),\n 100% 100%,\n 100% 100%,\n 64px 64px,\n 59px 59px", "mask-repeat": "no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, repeat, repeat", "mask-composite": "intersect, add, add, add, add, add, add, add, add, add, intersect, exclude, add" }, "@utility dither-glow": { "filter": "drop-shadow(\n 0 0 calc(min((var(--dither, 0) + var(--texture-gradient, 0) + var(--texture-grain, 0)) * 1000, 1) * min(var(--dither-in, 1), var(--dither-view, 1)) * var(--elevation-glow, 0px))\n color-mix(in srgb, var(--dither-glow-color, var(--tone, currentColor)) calc((var(--dither, 0) + var(--texture-gradient, 0) + var(--texture-grain, 0)) * 70%), transparent)\n )" }, "@utility dither-halo": { "box-shadow": "0 0 calc(min((var(--dither, 0) + var(--texture-gradient, 0) + var(--texture-grain, 0)) * 1000, 1) * min(var(--dither-in, 1), var(--dither-view, 1)) * var(--elevation-glow, 0px) * 1.5)\n color-mix(in srgb, var(--dither-glow-color, var(--tone, currentColor)) calc((var(--dither, 0) + var(--texture-gradient, 0) + var(--texture-grain, 0)) * 55%), transparent)" }, "@utility focus-ring": { "&:focus-visible": { "outline": "2px solid var(--ring)", "outline-offset": "2px" } }, "[data-density=\"compact\"]": { "--control-h-sm": "1.5rem", "--control-h-md": "1.75rem", "--control-h-lg": "2.25rem", "--control-px-sm": "0.5rem", "--control-px-md": "0.625rem", "--control-px-lg": "0.875rem", "--control-gap": "0.375rem", "--space-inset": "0.5rem", "--space-stack": "0.375rem" }, "[data-density=\"comfortable\"]": { "--control-h-sm": "1.75rem", "--control-h-md": "2.25rem", "--control-h-lg": "2.75rem", "--control-px-sm": "0.625rem", "--control-px-md": "0.875rem", "--control-px-lg": "1.125rem", "--control-gap": "0.5rem", "--space-inset": "0.75rem", "--space-stack": "0.5rem" }, "[data-density=\"spacious\"]": { "--control-h-sm": "2.25rem", "--control-h-md": "2.75rem", "--control-h-lg": "3.25rem", "--control-px-sm": "0.875rem", "--control-px-md": "1.125rem", "--control-px-lg": "1.375rem", "--control-gap": "0.625rem", "--space-inset": "1rem", "--space-stack": "0.75rem" }, "[data-motion=\"calm\"]": { "--motion-duration-fast": "160ms", "--motion-duration-base": "240ms", "--motion-duration-slow": "360ms", "--motion-duration-layout": "320ms", "--motion-duration-close": "140ms", "--motion-ease-out": "cubic-bezier(0.25, 0.1, 0.25, 1)", "--motion-ease-in-out": "cubic-bezier(0.42, 0, 0.58, 1)", "--motion-ease-spring": "cubic-bezier(0.25, 0.1, 0.25, 1)", "--motion-ease-close": "cubic-bezier(0.25, 0.1, 0.25, 1)", "--motion-press-scale": "0.96", "--motion-close-scale": "0.97", "--motion-distance": "4px", "--motion-pulse-duration": "2.4s", "--motion-crossfade-delay": "50%" }, "[data-motion=\"crisp\"]": { "--motion-duration-fast": "120ms", "--motion-duration-base": "240ms", "--motion-duration-slow": "320ms", "--motion-duration-layout": "280ms", "--motion-duration-close": "100ms", "--motion-ease-out": "cubic-bezier(0.2, 0, 0, 1)", "--motion-ease-in-out": "cubic-bezier(0.45, 0, 0.2, 1)", "--motion-ease-spring": "linear(0, 0.018, 0.065, 0.131, 0.207, 0.289, 0.372, 0.452, 0.528, 0.598, 0.661, 0.718, 0.768, 0.812, 0.849, 0.881, 0.907, 0.929, 0.947, 0.962, 0.974, 0.983, 0.99, 0.995, 0.999, 1.002, 1.004, 1.005, 1.006, 1.006, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1)", "--motion-ease-close": "cubic-bezier(0.25, 0.1, 0.25, 1)", "--motion-press-scale": "0.96", "--motion-close-scale": "0.95", "--motion-distance": "6px", "--motion-pulse-duration": "2s", "--motion-crossfade-delay": "50%" }, "[data-motion=\"playful\"]": { "--motion-duration-fast": "160ms", "--motion-duration-base": "260ms", "--motion-duration-slow": "400ms", "--motion-duration-layout": "360ms", "--motion-duration-close": "140ms", "--motion-ease-out": "cubic-bezier(0.2, 0, 0, 1)", "--motion-ease-in-out": "cubic-bezier(0.45, 0, 0.2, 1)", "--motion-ease-spring": "linear(0, 0.027, 0.097, 0.195, 0.308, 0.425, 0.54, 0.647, 0.744, 0.827, 0.896, 0.951, 0.994, 1.026, 1.047, 1.06, 1.067, 1.068, 1.065, 1.06, 1.053, 1.045, 1.037, 1.03, 1.022, 1.016, 1.011, 1.006, 1.003, 1, 0.998, 0.997, 0.996, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 1)", "--motion-ease-close": "cubic-bezier(0.25, 0.1, 0.25, 1)", "--motion-press-scale": "0.96", "--motion-close-scale": "0.95", "--motion-distance": "10px", "--motion-pulse-duration": "1.6s", "--motion-crossfade-delay": "50%" }, "[data-motion=\"off\"]": { "--motion-duration-fast": "0ms", "--motion-duration-base": "0ms", "--motion-duration-slow": "0ms", "--motion-duration-layout": "0ms", "--motion-duration-close": "0ms", "--motion-ease-out": "linear", "--motion-ease-in-out": "linear", "--motion-ease-spring": "linear", "--motion-ease-close": "linear", "--motion-press-scale": "1", "--motion-close-scale": "1", "--motion-distance": "0px", "--motion-pulse-duration": "0s", "--motion-crossfade-delay": "0%" }, "@media (prefers-reduced-motion: reduce)": { ":root, [data-motion]": { "--motion-duration-layout": "0ms", "--motion-ease-spring": "var(--motion-ease-out)", "--motion-press-scale": "1", "--motion-close-scale": "1", "--motion-distance": "0px", "--motion-pulse-duration": "0s", "--motion-crossfade-delay": "0%", "--texture-move": "0" } }, "@utility motion-press": { "transition-property": "background-color, border-color, color, opacity, box-shadow, scale", "transition-duration": "var(--motion-duration-fast)", "transition-timing-function": "var(--motion-ease-out)", "&:is(:active, [data-motion-pressed]):not(:disabled, [disabled], [data-disabled], [aria-disabled=\"true\"], [aria-busy=\"true\"], [data-readonly])": { "scale": "var(--motion-press-scale)" } }, "@utility motion-feedback": { "transition-property": "background-color, border-color, color, opacity, box-shadow", "transition-duration": "var(--motion-duration-fast)", "transition-timing-function": "var(--motion-ease-out)", "&:active:not(:disabled, [disabled], [data-disabled], [aria-disabled=\"true\"], [aria-busy=\"true\"], [data-readonly])": { "opacity": "0.8" }, "&:empty:active:not(:disabled, [disabled], [data-disabled], [aria-disabled=\"true\"], [aria-busy=\"true\"], [data-readonly])": { "background-color": "color-mix(in oklab, var(--foreground) 8%, transparent)" } }, "@utility effect-rise": { "--popup-open-duration": "initial", "--popup-open-ease": "initial", "--popup-open-scale": "initial", "--popup-open-distance": "initial", "--popup-close-duration": "initial", "--popup-close-ease": "initial", "--popup-submenu-scale": "initial", "--dialog-open-duration": "initial", "--dialog-open-ease": "initial", "--dialog-open-scale": "initial", "--dialog-open-distance": "initial", "--dialog-close-duration": "initial", "--dialog-close-ease": "initial", "--tooltip-open-duration": "initial", "--tooltip-open-ease": "initial", "--tooltip-open-scale": "initial", "--tooltip-open-distance": "initial", "--tooltip-close-duration": "initial", "--tooltip-close-ease": "initial" }, "@utility effect-grow": { "--popup-open-duration": "calc(var(--motion-duration-base) * 10 / 9)", "--popup-open-ease": "cubic-bezier(0.23, 1, 0.32, 1)", "--popup-open-scale": "var(--motion-close-scale)", "--popup-open-distance": "0px", "--popup-close-duration": "calc(var(--motion-duration-base) * 10 / 9)", "--popup-close-ease": "cubic-bezier(0.23, 1, 0.32, 1)", "--popup-submenu-scale": "1", "--dialog-open-duration": "calc(var(--motion-duration-base) * 10 / 9)", "--dialog-open-ease": "ease", "--dialog-open-scale": "var(--motion-close-scale)", "--dialog-open-distance": "0px", "--dialog-close-duration": "calc(var(--motion-duration-base) * 10 / 9)", "--dialog-close-ease": "ease", "--tooltip-open-duration": "calc(var(--motion-duration-fast) * 5 / 4)", "--tooltip-open-ease": "ease", "--tooltip-open-scale": "var(--motion-close-scale)", "--tooltip-open-distance": "calc(var(--motion-distance) * 4 / 3)", "--tooltip-close-duration": "calc(var(--motion-duration-fast) * 5 / 4)", "--tooltip-close-ease": "ease" }, "@utility effect-instant": { "--tooltip-open-duration": "0s", "--tooltip-close-duration": "0s" } } }, { "name": "pill", "type": "registry:theme", "title": "Pill buttons and fields", "description": "Makes buttons, toolbars, tabs, and fields fully round. Install it after the theme. Cards, menus, and text areas keep their corners.", "cssVars": { "light": { "button-radius": "999px", "tool-button-radius": "999px", "toolbar-radius": "999px", "tabs-radius": "999px", "input-radius": "999px", "select-trigger-radius": "999px" } } }, { "name": "access-list", "type": "registry:ui", "title": "Access List", "description": "Manage who has access and what they can do.", "dependencies": [ "@base-ui/react@^1.9.0", "lucide-react@^1.59.0" ], "registryDependencies": [ "utils", "@txbrendan/theme", "@txbrendan/motion", "@txbrendan/button", "@txbrendan/menu", "@txbrendan/person", "@txbrendan/tool-button", "@txbrendan/tooltip" ], "files": [ { "path": "registry/txbrendan/ui/access-list.tsx", "type": "registry:ui" } ], "categories": [ "people", "forms", "display" ], "meta": { "status": "beta", "usage": { "use": [ "The people part of a share sheet: who can open a page, a plan, or a file, and whether they view, comment, or edit.", "Each entry is a person, an email with no account, a phone number, or the link. Give each an id.", "Each row's level is a menu: Can view, Can comment, Can edit, then Remove access. A change applies at once, and ⌘Z takes it back for 8 seconds.", "Remove access shows Removed with Undo on the row. onRemove runs once the window ends.", "Set asked on an entry to show a request. Requests come first, with Approve and Decline in the row.", "Guests view or comment. Set guestsCanEdit when the owner lets them edit. The link and a phone number only view.", "Put it in a Card with className=\"gap-0 py-0\". Its rows bring their own padding and lines." ], "avoid": [ "Picking people to share with. Use a token field or a search above the list.", "Roles in a team, like admin or member. This is about access to one thing.", "Setting manage on someone who cannot change access. Pass manage={false} and the levels are plain words." ] }, "props": [ { "name": "entries", "type": "AccessEntry[]", "description": "Required. { id, person?, photo?, email?, phone?, link?, meta?, guest?, owner?, level?, asked? }. level and asked are \"view\" | \"comment\" | \"edit\"." }, { "name": "guestsCanEdit", "type": "boolean", "default": "false", "description": "The owner lets guests edit. Off, guests view or comment." }, { "name": "manage", "type": "boolean", "default": "true", "description": "You can change access. Off, levels are plain words and requests have no buttons." }, { "name": "onLevel", "type": "(id: string, level: \"view\" | \"comment\" | \"edit\") => void", "description": "A level changed, at once. It runs again with the old level if the change is undone." }, { "name": "onRemove", "type": "(id: string) => void", "description": "Removed, once the 8-second undo window ends." }, { "name": "onApprove", "type": "(id: string, level: \"view\" | \"comment\" | \"edit\") => void", "description": "A request approved, once the undo window ends, with the level given." }, { "name": "onDecline", "type": "(id: string) => void", "description": "A request declined, once the undo window ends." }, { "name": "className", "type": "string", "description": "Extra classes on the list. Later classes win." } ], "a11y": [ "A list of rows. Each level is a menu button named by the person and the level, like \"Kate Clarke can edit\".", "In the menu, the arrow keys move without wrapping, Enter chooses, and Esc closes it and puts focus back on the button. The current level is a checked menuitemradio.", "After Remove access, the same button says \"Kate Clarke removed\" and is the Undo, armed 1.2 seconds after a key press. It no longer says it opens a menu.", "Decline is an icon named \"Decline\" plus the name, and its tooltip says Decline. Approve's name carries the name too.", "Each result is said once in the page's polite live region. ⌘Z or Ctrl+Z takes back the newest change, outside a text field." ], "examples": [ { "title": "In a share sheet", "code": "\"use client\";\nimport { useState } from \"react\";\nimport { AccessList, type AccessEntry } from \"@/components/ui/access-list\";\nimport { Card } from \"@/components/ui/card\";\n\nexport function Access() {\n const [entries, setEntries] = useState([\n { id: \"sam\", person: \"Sam Carter\", meta: \"Design lead\", owner: true, level: \"edit\" },\n { id: \"rob\", person: \"Rob Kerr\", meta: \"Client, guest\", guest: true, asked: \"comment\" },\n { id: \"kate\", person: \"Kate Clarke\", level: \"edit\" },\n { id: \"link\", link: true, meta: \"View only · 3 visitors\", level: \"view\" },\n ]);\n const set = (id: string, change: Partial) =>\n setEntries((all) => all.map((entry) => (entry.id === id ? { ...entry, ...change } : entry)));\n const drop = (id: string) => setEntries((all) => all.filter((entry) => entry.id !== id));\n return (\n \n set(id, { level })}\n onRemove={drop}\n onApprove={(id, level) => set(id, { asked: undefined, level })}\n onDecline={drop}\n />\n \n );\n}" } ] } }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "A stack of headings that each open and close a section below them, one at a time or several at once.", "dependencies": [ "@base-ui/react@^1.9.0", "class-variance-authority@^0.7.1" ], "registryDependencies": [ "utils", "@txbrendan/theme", "@txbrendan/motion-timing" ], "files": [ { "path": "registry/txbrendan/ui/accordion.tsx", "type": "registry:ui" } ], "categories": [ "layout" ], "meta": { "status": "beta", "usage": { "use": [ "Questions and answers, like an FAQ, where people read only the ones they need.", "Long settings or details split into sections, so the page starts short.", "Build each section from AccordionItem, AccordionTrigger, and AccordionPanel. Give each item a value when you control which ones are open.", "Add multiple when people may want to compare two sections side by side.", "Add hiddenUntilFound so the browser's find-in-page can search closed sections and open the match.", "Panels can contain images, links, lists, and controls. Use keepMounted on a panel with local form state so closing it preserves edits." ], "avoid": [ "Content everyone needs to read. Show it on the page.", "Switching between views of the same thing. Use tabs.", "A single section that shows more. Use a details element instead.", "Steps that must happen in order. Use a page per step, or step dots." ] }, "props": [ { "name": "Accordion", "type": "{ value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[], details) => void; multiple?: boolean; disabled?: boolean; hiddenUntilFound?: boolean }", "description": "Root. Holds which sections are open. Takes value, defaultValue, onValueChange, multiple, disabled, and hiddenUntilFound." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "default": "\"md\"", "description": "Accordion. Row height and text size: 36, 44, or 56px rows at the default density." }, { "name": "multiple", "type": "boolean", "default": "false", "description": "Accordion. Lets more than one section be open at once." }, { "name": "value", "type": "string[]", "description": "Accordion. The open items' values, controlled. Use it with onValueChange." }, { "name": "defaultValue", "type": "string[]", "description": "Accordion. The items open at the start when you do not control it." }, { "name": "onValueChange", "type": "(value: string[], details) => void", "description": "Accordion. Called with the open items' values when one opens or closes." }, { "name": "hiddenUntilFound", "type": "boolean", "default": "false", "description": "Accordion or AccordionPanel. Keeps closed panels in the page with hidden='until-found', so find-in-page can open them." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "Accordion or AccordionItem. Blocks opening and closing. It dims." }, { "name": "AccordionItem", "type": "ComponentProps<\"div\"> & { value?: string }", "description": "Part. One section. A line separates it from the next. value names it for value and defaultValue." }, { "name": "AccordionTrigger", "type": "ComponentProps<\"button\">", "description": "Part. The heading's button. It renders inside an

and adds a chevron that turns when the section opens." }, { "name": "AccordionPanel", "type": "ComponentProps<\"div\">", "description": "Part. The section's content. It grows open and shrinks closed." }, { "name": "keepMounted", "type": "boolean", "default": "false", "description": "AccordionPanel. Keeps the contents mounted while closed, preserving local field values. Hidden controls stay out of the tab order." }, { "name": "className", "type": "string", "description": "On any part. Later classes win. On AccordionPanel it goes on the inner box, where the padding is, so className='pb-6' works." } ], "a11y": [ "Each trigger is a button inside an

, so screen reader users can jump between sections by heading.", "The button has aria-expanded and aria-controls. An open panel has role=\"region\", named by its trigger.", "Each trigger is its own tab stop. Enter and Space open and close it. Arrow keys do not move between triggers, as in the current ARIA pattern.", "The chevron is hidden from screen readers. aria-expanded says whether a section is open.", "The heading level is fixed at h3. If the page needs another level, pass render to the header in your copy of accordion.tsx.", "The focus ring uses --ring, which the theme tests hold to 3:1 against the page and cards.", "Opening grows the panel over --motion-duration-base while its contents slide into place and fade in over 1.5 times --motion-duration-slow. Closing fades the contents over --motion-duration-close. Reduced motion removes height, content, and chevron movement; Motion Off removes all transitions." ], "examples": [ { "title": "FAQ", "code": "\n \n Can I get a refund?\n Yes, within 30 days of your order. We send the money back to the card you paid with.\n \n \n How long does shipping take?\n Three to five working days in the US, and up to ten days anywhere else.\n \n" }, { "title": "Editable values that survive closing a section", "code": "\n \n Account\n \n \n \n \n \n Billing\n Your plan, card, and past invoices.\n \n" }, { "title": "Controlled", "code": "\"use client\";\nimport { useState } from \"react\";\n\nfunction Sections() {\n const [open, setOpen] = useState([]);\n return (\n setOpen(value as string[])}>\n \n First section\n Shown when open includes \"one\".\n \n \n );\n}" } ] } }, { "name": "action-keys", "type": "registry:ui", "title": "Action Keys", "description": "Gives a list of actions their single-key shortcuts. It shows nothing, and it ignores keys while someone is typing.", "dependencies": [], "registryDependencies": [ "utils", "@txbrendan/theme" ], "files": [ { "path": "registry/txbrendan/ui/action-keys.tsx", "type": "registry:ui" } ], "categories": [ "actions" ], "meta": { "status": "beta", "usage": { "use": [ "Single-key shortcuts for a focused or hovered row's actions, like R for Reply.", "Pass the same action objects you pass to HoverActions or BulkBar, so the key, the tooltip, and the button never drift apart.", "Pass the toolbar's ref as within. A key then presses its button, so it shows the same spinner, result, and Undo a click does.", "Turn it on for one row at a time with enabled. RowActions does this for you.", "When two are on at once, like a row under the pointer and another with focus, a key goes to the one turned on last that has it. It never acts on both.", "Put KeepTabInside last, right inside a popup of your own that keeps focus in, so a fast Tab cannot leave it." ], "avoid": [ "Shortcuts with Cmd or Ctrl. It ignores keys with a modifier, so it never takes the browser's own.", "Keys inside a field. It ignores keys while someone types in an input, a textarea, or editable text.", "Turning it on for every row in a list at once. Only the row turned on last would answer, and no one could see which row that is." ] }, "props": [ { "name": "actions", "type": "ActionKey[]", "description": "Required. The actions. Each with a shortcut gets its key." }, { "name": "ActionKey", "type": "{ label: string; shortcut?: string; onClick?: () => void | Promise; disabled?: boolean }", "description": "Type. shortcut is one key, matched in either case. A disabled action ignores its key. HoverAction and BulkBarAction fit it." }, { "name": "enabled", "type": "boolean", "default": "true", "description": "Listens for keys. Turn it on for the focused or hovered row only. When two are on, the one turned on last answers a key." }, { "name": "within", "type": "RefObject", "description": "The toolbar that holds the actions' buttons, like HoverActions' ref. A key presses the button whose data-shortcut matches. Without it, a key calls onClick." }, { "name": "isPageKey", "type": "(event: KeyboardEvent, within?: HTMLElement | null) => boolean", "description": "Helper. Whether a key is free for page shortcuts: no one is typing, no modifier is held, and focus is not in an open dialog or menu." }, { "name": "KeepTabInside", "type": "{}", "description": "Part, with no props. Put it last, right inside a popup that keeps focus in, not in a wrapper. Tab and Shift+Tab then wrap at the ends at once, so a fast Tab never lands on the page behind. Dialog, Alert Dialog, Sheet, Lightbox, Command Menu, and Notifications use it." } ], "a11y": [ "Every key it listens for should be taught where people see the action, like HoverActions' tooltips, and set as aria-keyshortcuts on the button. ToolButton does both.", "It ignores keys while focus is in a text field, a textarea, a select, or editable text, so typing never runs an action.", "It ignores keys with Cmd, Ctrl, or Alt held, keys held down, and keys another handler already took.", "It ignores keys while focus is in an open dialog or menu that its toolbar is not part of.", "Single-key shortcuts can clash with speech input. Keep them on only while their row is hovered or focused, as WCAG 2.1.4 asks.", "KeepTabInside wraps Tab only past the last stop and Shift+Tab only before the first. In between, the browser moves focus as it always does. A field that takes Tab itself, and calls preventDefault, keeps it.", "Safari's Tab skips plain buttons and links, so it can pass the last stop KeepTabInside knows of. KeepTabInside then sends focus back in at once.", "A native radio group with a checked choice is one Tab stop, at that choice, as in the browser. Shift+Tab wraps back to it." ], "examples": [ { "title": "Keys for a focused row (needs @txbrendan/hover-actions)", "code": "import { Pencil, Reply } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nimport { HoverActions, type HoverAction } from \"@/components/ui/hover-actions\";\n\nfunction MessageActions({ focused, actions }: { focused: boolean; actions: HoverAction[] }) {\n const bar = useRef(null);\n return (\n <>\n \n \n \n );\n}\n\n, label: \"Reply\", shortcut: \"R\" }, { icon: , label: \"Edit\", shortcut: \"E\" }]} />" } ] } }, { "name": "agreement", "type": "registry:ui", "title": "Agreement", "description": "Consent and codes of conduct: an \"I agree\" button that records who and when, never a checkbox. Once agreed, the record shows in its place with the person's photo.", "dependencies": [], "registryDependencies": [ "utils", "@txbrendan/theme", "@txbrendan/avatar", "@txbrendan/button", "@txbrendan/motion-timing" ], "files": [ { "path": "registry/txbrendan/ui/agreement.tsx", "type": "registry:ui" } ], "categories": [ "forms" ], "meta": { "status": "beta", "usage": { "use": [ "Codes of conduct, consents, and terms that someone must agree to, by name.", "Store the record in onAgree and pass it back as agreed: { person, photo, at }. The record showing in place is the confirmation, so no toast repeats it.", "A guardian agreeing for a junior passes forPerson. The record then says who it was for.", "A consent that can be taken back, like photo consent, passes onWithdraw.", "A required one left unagreed takes error, set when the form is sent. Its title and button edge turn red, its button glows once, and nothing changes size. Say what is missing on the button that was pressed, with shake() and new words, so it never moves.", "In a stack, each sits on the sheet with no box, divided by a faint line. Pass divider={false} on the first one. The sheet's own Continue is the main action, so the buttons stay outlines.", "When it is the surface's only decision, pass main, and the button is solid brand." ], "avoid": [ "Settings that are just on or off. Use a switch.", "Picking among options. Use choice chips or a radio group.", "A checkbox for consent. A button that records who and when says more, and cannot be ticked by accident." ] }, "props": [ { "name": "title", "type": "ReactNode", "description": "What is agreed to, like \"Code of conduct\". It names the agreement." }, { "name": "text", "type": "ReactNode", "description": "The short version, in plain words." }, { "name": "link", "type": "{ label: ReactNode; href?: string; onClick?: () => void }", "description": "The full text: a link with href, or a button with onClick." }, { "name": "forPerson", "type": "{ person: string; photo?: string }", "description": "Who it is for, when someone agrees on their behalf." }, { "name": "agreed", "type": "{ person: string; photo?: string; at?: string | Date } | null", "description": "The record. Once set, it shows in place of the button: \"Agreed by Anna Price · Tue 29 Sept, 18:04\"." }, { "name": "onAgree", "type": "() => void", "description": "Store the record here, then pass it back as agreed." }, { "name": "onWithdraw", "type": "() => void", "description": "Shows Withdraw on the record. Clear agreed here." }, { "name": "error", "type": "ReactNode", "description": "For a required one left unagreed. The title and button edge turn red and the button glows once, with no change in size. The words describe the button for screen readers." }, { "name": "divider", "type": "boolean", "default": "true", "description": "A faint line above it that fades out at both ends. Pass false on the first of a stack." }, { "name": "agreeLabel", "type": "ReactNode", "default": "\"I agree\"", "description": "The button's words." }, { "name": "main", "type": "boolean", "default": "false", "description": "The surface's only decision: the button is solid brand. Off, it is an outline." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "default": "\"md\"", "description": "Text, button, and photo size." }, { "name": "loading", "type": "boolean", "default": "false", "description": "The button shows a spinner while the record is saved." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "Blocks the button and Withdraw." }, { "name": "locale", "type": "string", "default": "\"en-GB\"", "description": "Formats the record's date and time." }, { "name": "timeZone", "type": "string", "description": "The zone the record's time shows in, like \"Europe/London\". By default, wherever it renders. Pass one when a server renders the page." }, { "name": "className", "type": "string", "description": "Classes for the root." } ], "a11y": [ "The root is a group named by the title, so each \"I agree\" in a stack is heard with what it agrees to.", "An error is described on the button. It is not announced here: the press that found it says it out loud, like a role=\"alert\" beside the button that was pressed.", "The glow follows the --motion-* tokens, so reduced motion skips it. The red title and edge stay.", "Once agreed, focus moves from the button to the record, so screen readers read who agreed and when. After Withdraw it moves back to the button.", "The record's date is a