4d: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"] 4e:I[544296,["/_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"],"ItemStyles"] 4f:I[34002,["/_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"],"CodeEditor"] 50: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"] 51:T94c,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import * as Primitive from "@radix-ui/react-toggle-group"; import { toggleVariants } from "@/components/ui/toggle"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { useFlowPress } from "@/lib/cojeev-motion/flow-press"; export const toggleGroupVariants = cva("inline-flex flex-wrap gap-2"); const ToggleGroupContext = React.createContext< VariantProps >({ variant: "default" }); export type ToggleGroupProps = React.ComponentProps & VariantProps; export function ToggleGroup({ className, variant, ref, children, ...props }: ToggleGroupProps) { const morphRef = useMorph("nav", ref); const flowRef = useFlowGroup(morphRef, { itemSelector: '[data-slot="toggle-group-item"]', activeSelector: '[aria-pressed="true"],[aria-checked="true"]', }); return ( {children} ); } export type ToggleGroupItemProps = React.ComponentProps & VariantProps; export function ToggleGroupItem({ className, asChild, variant, ref, ...props }: ToggleGroupItemProps) { const inherited = React.useContext(ToggleGroupContext); const morphRef = useMorph("buttons", ref); const pressRef = useFlowPress(morphRef); return ( ); } 52:T371e,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] )[data-morph] { --mfill: var(--v-ink); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-pink[data-morph] { --mfill: var(--v-pink); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { display: inline-flex; gap: var(--s-2); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn { background: var(--v-beige); color: var(--v-text); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled), .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn.-on { background: var(--v-ink); color: var(--v-on-ink); } @media (max-width: 640px) { .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-circle { width: 32px; min-width: 32px; height: 32px; font-size: 11px; } } @media (max-width: 640px) { .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { flex-wrap: wrap; } } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-pink:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { color: var(--v-on-accent); } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { display: inline-grid; place-items: center; height: var(--ctl-md); min-width: var(--ctl-md); padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-control); font-weight: 500; color: var(--v-text-2); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-ink); color: var(--v-on-ink); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-pink:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-pink); color: var(--v-text); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-circle { width: var(--ctl-md); padding: 0; border-radius: 50%; } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]):not( :is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) ) { box-shadow: inset 0 0 0 1px var(--v-edge); } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]):not( :disabled ) { cursor: pointer; } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):disabled { cursor: not-allowed; } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-pink:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 1px var(--sel-edge); } :root[data-mode="dark"] .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):is([aria-pressed="true"],[aria-checked="true"]):not(:disabled), :root[data-mode="dark"] .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-pink); color: var(--v-on-accent); border-color: var(--v-pink); } :root[data-mode="dark"] .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]):not( :is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) ) { color: var(--v-text); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):disabled { background: var(--v-disabled-face); color: var(--v-disabled-ink); box-shadow: inset 0 0 0 1px var(--v-disabled-edge); opacity: 1; } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn { background: transparent; box-shadow: none; color: var(--v-text-2); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:hover { background: color-mix(in oklab, var(--card) 88%, var(--v-ink)); color: var(--v-text); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled), .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn.-on { background: var(--v-ink); color: var(--v-on-ink); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]).-pink .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled), .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]).-pink .v-btn.-on { background: var(--v-pink); color: var(--v-on-accent); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled), .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn.-on { color: var(--v-on-ink); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]).-pink .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled), .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]).-pink .v-btn.-on { color: var(--v-on-accent); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn .v-icon { width: 16px; height: 16px; } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 16px; gap: 8px; background: var(--v-canvas); color: var(--v-text-2); font-weight: 500; box-shadow: inset 0 0 0 1px var(--v-edge); transition: background var(--t-micro), color var(--t-micro), box-shadow var(--t-micro), border-radius var(--t-max) var(--enter), transform var(--t-micro) var(--enter); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):hover { background: var(--v-beige); color: var(--v-text); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):active { transform: scale(0.96); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-ink); color: var(--v-on-ink); box-shadow: none; border-radius: 999px 999px 999px 8px; } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-pink:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-pink); color: var(--v-on-accent); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-yellow:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-yellow); color: var(--v-on-accent); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-olive:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-olive); color: var(--v-on-accent); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-blue:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-blue); color: var(--v-on-accent); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-circle { width: 40px; padding: 0; border-radius: 50%; font-size: 12.5px; font-weight: 600; } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-circle:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { border-radius: 46% 54% 50% 50%/50% 46% 54% 50%; } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-icon { width: 16px; height: 16px; } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] )[data-morph] { --mfill: var(--v-canvas); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):is([aria-pressed="true"],[aria-checked="true"]):not(:disabled)[data-morph] { --mfill: var(--v-ink); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-pink:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled)[data-morph] { --mfill: var(--v-pink); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-yellow:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled)[data-morph] { --mfill: var(--v-yellow); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-olive:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled)[data-morph] { --mfill: var(--v-olive); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ).-blue:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled)[data-morph] { --mfill: var(--v-blue); } .v-togglewell:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); } .v-togglewell:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-toggle { box-shadow: none; background: transparent; } .v-togglewell:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-toggle:hover { background: var(--v-canvas); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { cursor: pointer; transition: background var(--t-micro), color var(--t-micro), transform var(--t-micro) var(--enter); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):active:not(:disabled) { transform: scale(0.95); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):disabled { cursor: not-allowed; } .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-icon { transition: transform var(--t-element) var(--enter); } .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) .v-icon { transform: scale(1.1) rotate(-8deg); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { padding: 3px; gap: 2px; background: var(--card); box-shadow: none; } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn { height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 500; border: 0; } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:hover:not(:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled)) { background: color-mix(in oklab, var(--card) 84%, var(--v-ink)); color: var(--v-text); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-ink); color: var(--v-on-ink); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]).-pink .v-btn:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled) { background: var(--v-pink); color: var(--v-on-accent); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn .v-icon { width: 15px; height: 15px; } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: 999px; } :root[data-mode="dark"] .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):is([aria-pressed="true"],[aria-checked="true"]):not(:disabled):not(.-pink):not(.-yellow):not(.-olive):not(.-blue) { background: var(--v-pink); color: var(--v-on-accent); } :root[data-mode="dark"] .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) { background: var(--v-beige-2); color: var(--v-text-2); } :root[data-mode="dark"] .v-toggle:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ):hover { background: var(--v-beige); color: var(--v-text); } .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]) .v-btn { box-shadow: none; } :root[data-mode="dark"] .v-seg:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]), :root[data-mode="dark"] .v-togglewell:where( [data-slot="toggle-group"], [data-slot^="toggle-group-"] ) { background: var(--v-beige); } @media (prefers-reduced-motion: reduce) { [data-slot="toggle-group"], [data-slot^="toggle-group-"], [data-slot="toggle-group"]::before, [data-slot="toggle-group"]::after, [data-slot^="toggle-group-"]::before, [data-slot^="toggle-group-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } /* Authored circle selection precedence (components-2.css:1359). */ .v-toggle:where([data-slot="toggle-group"],[data-slot^="toggle-group-"]).-circle:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled):not([data-glide-active]) { background: var(--v-ink); color: var(--v-on-ink); } .v-toggle:where([data-slot="toggle-group"],[data-slot^="toggle-group-"]).-circle:is([aria-pressed="true"],[aria-checked="true"]):not(:disabled):not([data-glide-active])[data-morph] { --mfill: var(--v-ink); } :root .v-toggle:where([data-slot="toggle-group"], [data-slot^="toggle-group-"]):disabled { background: var(--v-disabled-face); color: var(--v-disabled-ink); box-shadow: inset 0 0 0 1px var(--v-disabled-edge); --mfill: var(--v-disabled-face); } } 4c:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","@radix-ui/react-toggle-group",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-toggle-group","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-toggle-group"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/toggle.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/toggle-group.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/toggle-group.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/toggle-group.css","content":"$52","type":"registry:file","target":"styles/cojeev/toggle-group.css"}],"className":"h-[70svh] min-h-80"}]]}]