4f: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"] 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/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"] 51:T1514,'use client'; import { useFieldContext } from '@ark-ui/react/field'; import { useFieldsetContext } from '@ark-ui/react/fieldset'; import { SegmentGroup as SegmentGroupPrimitive, useSegmentGroup as useSegmentGroupPrimitive, useSegmentGroupContext, useSegmentGroupItemContext, } from '@ark-ui/react/segment-group'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef, ReactNode } from 'react'; import { forwardRef } from 'react'; import styles from './SegmentGroup.module.css'; type SegmentGroupMachineProps = Parameters[0]; function omitUndefined>(props: T) { return Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined)) as T; } function useSegmentGroup(props?: SegmentGroupMachineProps) { const field = useFieldContext(); const fieldset = useFieldsetContext(); return useSegmentGroupPrimitive({ orientation: 'horizontal', disabled: field?.disabled ?? fieldset?.disabled, invalid: field?.invalid ?? fieldset?.invalid, readOnly: field?.readOnly, required: field?.required, ...omitUndefined(props ?? {}), }); } const SegmentGroupRoot = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupRoot( { className, defaultValue, disabled, form, id, ids, invalid, name, onValueChange, orientation = 'horizontal', readOnly, required, value, ...props }, ref, ) { const segmentGroup = useSegmentGroup({ defaultValue, disabled, form, id, ids, invalid, name, onValueChange, orientation, readOnly, required, value, }); return ( ); }); const SegmentGroupRootProvider = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupRootProvider({ className, ...props }, ref) { return ( ); }); const SegmentGroupLabel = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupLabel({ className, ...props }, ref) { return ( ); }); const SegmentGroupItem = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupItem({ className, ...props }, ref) { return ( ); }); const SegmentGroupItemControl = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupItemControl({ className, ...props }, ref) { return ( ); }); const SegmentGroupItemText = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupItemText({ className, ...props }, ref) { return ( ); }); const SegmentGroupIndicator = forwardRef< ComponentRef, ComponentProps >(function SegmentGroupIndicator({ className, ...props }, ref) { return ( ); }); function SegmentGroupItems({ items, }: { items: readonly { value: string; label: ReactNode; disabled?: boolean }[]; }) { return items.map(({ value, label, disabled }) => ( {label} )); } const SegmentGroup = Object.assign(SegmentGroupRoot, { Root: SegmentGroupRoot, RootProvider: SegmentGroupRootProvider, Context: SegmentGroupPrimitive.Context, ItemContext: SegmentGroupPrimitive.ItemContext, Label: SegmentGroupLabel, Item: SegmentGroupItem, ItemHiddenInput: SegmentGroupPrimitive.ItemHiddenInput, ItemControl: SegmentGroupItemControl, ItemText: SegmentGroupItemText, Indicator: SegmentGroupIndicator, Items: SegmentGroupItems, }); export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };52:T13d5,@layer moduix.components { .root { box-sizing: border-box; position: relative; isolation: isolate; display: inline-flex; max-inline-size: var(--moduix-segment-group-max-width, 100%); align-items: stretch; gap: var(--moduix-segment-group-gap, var(--moduix-spacing-1)); padding: var(--moduix-segment-group-padding, var(--moduix-spacing-1)); border: var(--moduix-segment-group-border-width, var(--moduix-border-width-sm)) solid var(--moduix-segment-group-border-color, var(--moduix-color-border)); border-radius: var(--moduix-segment-group-radius, var(--moduix-radius-lg)); background-color: var(--moduix-segment-group-bg, var(--moduix-color-muted)); color: var(--moduix-segment-group-color, var(--moduix-color-foreground)); &[data-orientation='vertical'] { flex-direction: column; align-items: stretch; } &[data-disabled] { opacity: var(--moduix-segment-group-disabled-opacity, var(--moduix-opacity-disabled)); } &:not([data-disabled]) { .item[data-disabled] { opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled)); } } &[data-invalid] { border-color: var( --moduix-segment-group-border-color-invalid, var(--moduix-color-destructive) ); } } .label { position: relative; z-index: 1; color: var( --moduix-segment-group-label-color, var(--moduix-segment-group-color, var(--moduix-color-foreground)) ); font-size: var(--moduix-segment-group-label-font-size, var(--moduix-text-sm)); font-weight: var(--moduix-segment-group-label-font-weight, var(--moduix-weight-semibold)); line-height: var(--moduix-segment-group-label-line-height, var(--moduix-line-height-text-sm)); user-select: none; } .item { box-sizing: border-box; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--moduix-segment-group-item-gap, var(--moduix-spacing-2)); min-height: var(--moduix-segment-group-item-height, var(--moduix-size-sm)); border-radius: var(--moduix-segment-group-item-radius, var(--moduix-radius-md)); padding-inline: var(--moduix-segment-group-item-padding-x, var(--moduix-spacing-3-5)); color: var(--moduix-segment-group-item-color, var(--moduix-color-muted-foreground)); font-size: var(--moduix-segment-group-item-font-size, var(--moduix-text-sm)); font-weight: var(--moduix-segment-group-item-font-weight, var(--moduix-weight-medium)); line-height: var(--moduix-segment-group-item-line-height, var(--moduix-line-height-text-sm)); user-select: none; white-space: nowrap; cursor: pointer; outline: 0; transition: color var(--moduix-segment-group-transition, var(--moduix-transition-default)), opacity var(--moduix-segment-group-transition, var(--moduix-transition-default)); @media (hover: hover) { &:hover:not([data-readonly], [data-disabled]) { color: var(--moduix-segment-group-item-color-hover, var(--moduix-color-foreground)); &[data-state='checked'] { color: var( --moduix-segment-group-item-color-hover, var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground)) ); } } } &[data-state='checked'] { color: var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground)); } &[data-focus-visible] { outline: var( --moduix-segment-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)) ) solid var(--moduix-segment-group-focus-ring-color, var(--moduix-color-ring)); outline-offset: var(--moduix-segment-group-focus-ring-offset, var(--moduix-border-width-sm)); } &[data-invalid][data-focus-visible] { outline-color: var( --moduix-segment-group-focus-ring-color-invalid, var(--moduix-color-destructive) ); } &[data-readonly], &[data-disabled] { cursor: default; } &[data-orientation='vertical'] { inline-size: 100%; justify-content: flex-start; } } .itemControl { display: none; } .itemText { position: relative; z-index: 1; } .indicator { --transition-duration: var( --moduix-segment-group-indicator-transition-duration, var(--moduix-duration-normal) ); --transition-timing-function: var( --moduix-segment-group-indicator-transition-timing-function, var(--moduix-ease-in-out) ); position: absolute; z-index: 0; top: var(--top); left: var(--left); width: var(--width); height: var(--height); border-radius: var(--moduix-segment-group-indicator-radius, var(--moduix-radius-md)); background-color: var(--moduix-segment-group-indicator-bg, var(--moduix-color-background)); box-shadow: var(--moduix-segment-group-indicator-shadow, var(--moduix-shadow-sm)); pointer-events: none; } }4e:["$","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","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-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":"@ark-ui/react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}]]}],["$","$L4f",null,{"namespace":"@moduix-react","registryDependencies":["@moduix-react/foundation"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/segment-group/SegmentGroup.tsx","content":"$51","type":"registry:component","target":"@components/ui/segment-group/SegmentGroup.tsx"},{"path":"src/components/segment-group/SegmentGroup.module.css","content":"$52","type":"registry:file","target":"@components/ui/segment-group/SegmentGroup.module.css"},{"path":"src/components/segment-group/index.ts","content":"export {\n SegmentGroup,\n useSegmentGroup,\n useSegmentGroupContext,\n useSegmentGroupItemContext,\n} from './SegmentGroup.js';","type":"registry:component","target":"@components/ui/segment-group/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]