4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T1307,import type { ComponentProps, ReactNode } from "react" import { cn } from "@/lib/utils" import { Button } from "./button" /** * Material 3 Expressive floating action button. * * Geometry comes from the kit's `FAB` / `Extended FAB` sets on the Buttons * page (the 40dp "small" FAB only survives on the deprecated internal canvas): * * | Size | Box | Icon | Corner | Extended padding / gap / type | * | ------- | --- | ---- | ------ | ------------------------------- | * | default | 56 | 24 | 16 | 16 / 8 / title-medium | * | medium | 80 | 28 | 20 | 26 / 12 / title-large (regular) | * | large | 96 | 36 | 28 | 28 / 16 / headline-small | * * Every color sits at elevation level 3 and rises to level 4 on hover. Unlike * the buttons, the kit's FAB keeps its corner radius while pressed, so the * active radius is written identically to cancel the inherited morph. */ type FABSize = "default" | "medium" | "large" type FABColor = | "primary" | "secondary" | "tertiary" | "primary-container" | "secondary-container" | "tertiary-container" type FABShape = "round" | "square" type AccessibleName = | { "aria-label": string; "aria-labelledby"?: string } | { "aria-label"?: never; "aria-labelledby": string } type FABProps = Omit< ComponentProps, "aria-label" | "aria-labelledby" | "shape" | "size" | "variant" > & AccessibleName & { color?: FABColor shape?: FABShape size?: FABSize } const baseStyles = [ // `size="icon"` carries no padding classes, so nothing from the Button size // scale (notably `has-[>svg]:pl-*`) can survive tailwind-merge and push the // icon off-centre. `p-0` is belt-and-braces for consumer overrides. "p-0 shadow-m3-3 hover:not-disabled:shadow-m3-4", "disabled:bg-m3-on-surface/12 disabled:shadow-m3-0", "motion-reduce:transition-none", ] const sizeStyles: Record = { default: "size-14 [&_svg:not([class*='size-'])]:size-6", medium: "size-20 [&_svg:not([class*='size-'])]:size-7", large: "size-24 [&_svg:not([class*='size-'])]:size-9", } const shapeStyles: Record> = { round: { default: "rounded-[28px] active:not-disabled:rounded-[28px]", medium: "rounded-[40px] active:not-disabled:rounded-[40px]", large: "rounded-[48px] active:not-disabled:rounded-[48px]", }, square: { default: "rounded-m3-lg active:not-disabled:rounded-m3-lg", medium: "rounded-m3-lg-increased active:not-disabled:rounded-m3-lg-increased", large: "rounded-m3-xl active:not-disabled:rounded-m3-xl", }, } const colorStyles: Record = { primary: "bg-m3-primary text-m3-on-primary", secondary: "bg-m3-secondary text-m3-on-secondary", tertiary: "bg-m3-tertiary text-m3-on-tertiary", "primary-container": "bg-m3-primary-container text-m3-on-primary-container", "secondary-container": "bg-m3-secondary-container text-m3-on-secondary-container", "tertiary-container": "bg-m3-tertiary-container text-m3-on-tertiary-container", } function FAB({ className, color = "primary-container", shape = "square", size = "default", ...props }: FABProps) { return ( ) } export { ExtendedFAB, FAB, type ExtendedFABProps, type FABColor, type FABProps, type FABShape, type FABSize, } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4b",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/button.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/components/ui/fab.tsx","content":"$4d","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]