50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T292a,"use client"; import { Field as FieldPrimitive } from "@base-ui/react/field"; import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps } from "react"; import { labelStyles } from "@/components/primitives/label"; import { Separator } from "@/components/primitives/separator"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, fontWeights, lineHeights, media, radii, space, strokes, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; const fieldOrientations = ["vertical", "horizontal"] as const; type FieldOrientation = (typeof fieldOrientations)[number]; const legendVariants = ["legend", "label"] as const; type LegendVariant = (typeof legendVariants)[number]; const card = ":has(> [data-slot='field-content'])"; // A flush card's field group is a list: its cards become rows, split by hairlines. const list = "[data-slot='card'][data-size='flush'] > [data-slot='field-group']"; const inList = ":is([data-slot='card'][data-size='flush'] > *)"; const row = `:is(${list} > [data-slot='field'] > *)`; const afterRow = `:is(${list} > [data-slot='field'] ~ *)`; const cardRadius = { default: null, [card]: { default: radii.md, [row]: 0 }, } as const; const cardEdge = { default: null, [card]: { default: strokes.border, [row]: 0 }, } as const; const styles = stylex.create({ set: { borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineWidth: 0, display: "flex", flexDirection: "column", gap: space.sm, marginBlock: 0, marginInline: 0, minWidth: 0, paddingBlock: 0, paddingInline: 0, }, legend: { color: colors.textPrimary, fontWeight: fontWeights.medium, lineHeight: lineHeights.textSm, paddingBlock: 0, paddingInline: 0, }, group: { display: "flex", flexDirection: "column", gap: { default: space.md, [inList]: 0 }, width: "100%", }, field: { borderBlockStartColor: { default: null, [afterRow]: colors.borderSubtle }, borderBlockStartStyle: { default: null, [afterRow]: "solid" }, borderBlockStartWidth: { default: null, [afterRow]: strokes.border }, display: "flex", gap: space.xs, width: "100%", }, vertical: { flexDirection: "column", }, // With a description, top-aligned, so it grows downward and the control stays on the first line. horizontal: { alignItems: { default: "center", ":has(> [data-slot='field-content'])": "flex-start", }, flexDirection: "row", }, content: { display: "flex", flexDirection: "column", flexGrow: 1, gap: space.xxxs, minWidth: 0, }, // A label that wraps a control and its content becomes a card: the whole box toggles it. label: { alignItems: { default: "center", [card]: "flex-start" }, backgroundColor: { default: null, [card]: { default: "transparent", ":has([data-checked])": { default: colors.fillSubtle, [row]: "transparent", }, [media.hover]: { default: "transparent", ":hover:not([data-disabled])": colors.fillSubtle, ":has([data-checked])": { default: colors.fillSubtle, [row]: "transparent", }, }, ":active:not([data-disabled])": colors.fillSubtle, }, }, borderBlockEndColor: { default: null, [card]: { default: colors.border, ":has([data-checked])": colors.infoSolid, }, }, borderBlockStartColor: { default: null, [card]: { default: colors.border, ":has([data-checked])": colors.infoSolid, }, }, borderInlineColor: { default: null, [card]: { default: colors.border, ":has([data-checked])": colors.infoSolid, }, }, borderStartStartRadius: cardRadius, borderStartEndRadius: cardRadius, borderEndStartRadius: cardRadius, borderEndEndRadius: cardRadius, borderBlockEndStyle: { default: null, [card]: "solid" }, borderBlockStartStyle: { default: null, [card]: "solid" }, borderInlineStyle: { default: null, [card]: "solid" }, borderBlockEndWidth: cardEdge, borderBlockStartWidth: cardEdge, borderInlineWidth: cardEdge, cursor: { default: null, [card]: { default: "pointer", ":is([data-disabled])": "not-allowed" }, }, gap: { default: space.xs, [card]: space.sm }, paddingBlock: { default: null, [card]: space.sm }, paddingInline: { default: null, [card]: { default: space.sm, [row]: space.md }, }, transitionDuration: durations.hover, transitionProperty: "background-color, border-color", transitionTimingFunction: "ease", width: { default: "fit-content", [card]: "100%" }, }, description: { color: colors.textSecondary, fontWeight: fontWeights.regular, marginBlock: 0, marginInline: 0, overflowWrap: "anywhere", textWrap: "pretty", }, // A line, or a line broken by its text, so it needs no fill to sit on any surface. separator: { alignItems: "center", color: colors.textMuted, display: "flex", gap: space.xs, marginBlock: `calc(-1 * ${space.xs})`, minHeight: lineHeights.textSm, }, separatorLine: { flex: 1 }, // The only red in an invalid field besides the control's edge, a step under the label. error: { color: colors.dangerText, overflowWrap: "anywhere", }, errorList: { display: "flex", flexDirection: "column", gap: space.xxxs, listStylePosition: "inside", marginBlock: 0, paddingInline: 0, }, }); const orientationStyles = { horizontal: styles.horizontal, vertical: styles.vertical, } satisfies Record; const legendStyles = { label: typeStyles.textSm, legend: typeStyles.textBase, } satisfies Record; function FieldSet({ sx, ...props }: Styled) { return ( ); } function FieldLegend({ sx, variant = "legend", ...props }: Styled & { variant?: LegendVariant }) { return ( ); } function FieldGroup({ sx, ...props }: Styled>) { return (

); } function Field({ orientation = "vertical", sx, ...props }: Styled & { orientation?: FieldOrientation }) { return ( ); } function FieldContent({ sx, ...props }: Styled>) { return (

); } function FieldLabel({ sx, ...props }: Styled) { return ( ); } /** A label's look without the ``, for a card's heading inside a `FieldLabel`. */ function FieldTitle({ render, sx, ...props }: Styled>) { return useRender({ defaultTagName: "div", props: mergeProps<"div">(props, stylex.props(labelStyles(), sx)), render, state: { slot: "field-title" }, }); } function FieldDescription({ sx, ...props }: Styled) { return ( ); } /** A fieldset's helper text. Base UI's description only works inside a `Field`. */ function FieldSetDescription({ sx, ...props }: Styled>) { return (

); } type FieldErrorProps = Styled & ( | { errors: readonly ({ message?: string } | undefined)[]; match?: never } | { errors?: undefined } ); function FieldError({ errors, sx, ...props }: FieldErrorProps) { if (errors === undefined) { return ( ); } const messages = [ ...new Set(errors.flatMap((issue) => issue?.message ?? [])), ]; const children = props.children ?? (messages.length > 1 ? (

{message}

) : ( messages[0] )); if (children === undefined) { return null; } return ( {children} ); } function FieldSeparator({ children, sx, ...props }: Styled>) { return (

{children !== undefined && ( <> {children} )}

); } export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldSetDescription, FieldTitle, fieldOrientations, legendVariants, }; export type { FieldOrientation, LegendVariant }; 4f:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","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":"@stylexjs/stylex"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/label.json","https://constella.aayush.cv/r/separator.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/field.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]