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:T12c8,'use client'; import { Clipboard as ClipboardPrimitive, useClipboard, useClipboardContext, } from '@ark-ui/react/clipboard'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef } from 'react'; import { forwardRef } from 'react'; import { CheckIcon, CopyIcon } from '@/lib/moduix/icons/ui'; import styles from './Clipboard.module.css'; const ClipboardRoot = forwardRef< ComponentRef, ComponentProps >(function ClipboardRoot({ className, ...props }, ref) { return ( ); }); const ClipboardRootProvider = forwardRef< ComponentRef, ComponentProps >(function ClipboardRootProvider({ className, ...props }, ref) { return ( ); }); const ClipboardLabel = forwardRef< ComponentRef, ComponentProps >(function ClipboardLabel({ className, ...props }, ref) { return ( ); }); const ClipboardControl = forwardRef< ComponentRef, ComponentProps >(function ClipboardControl({ className, ...props }, ref) { return ( ); }); const ClipboardInput = forwardRef< ComponentRef, ComponentProps >(function ClipboardInput({ className, ...props }, ref) { return ( ); }); const ClipboardTrigger = forwardRef< ComponentRef, ComponentProps >(function ClipboardTrigger({ className, ...props }, ref) { return ( ); }); const ClipboardIndicator = forwardRef< ComponentRef, ComponentProps >(function ClipboardIndicator({ className, children, copied, ...props }, ref) { return ( ); }); const ClipboardValueText = forwardRef< ComponentRef, ComponentProps >(function ClipboardValueText({ className, ...props }, ref) { return ( ); }); const ClipboardCopyText = forwardRef< ComponentRef, ComponentProps >(function ClipboardCopyText({ className, copied = 'Copied', children = 'Copy', ...props }, ref) { return ( {children} ); }); const Clipboard = Object.assign(ClipboardRoot, { Root: ClipboardRoot, RootProvider: ClipboardRootProvider, Context: ClipboardPrimitive.Context, Label: ClipboardLabel, Control: ClipboardControl, Input: ClipboardInput, Trigger: ClipboardTrigger, Indicator: ClipboardIndicator, CopyText: ClipboardCopyText, ValueText: ClipboardValueText, useClipboard, }); export { Clipboard, useClipboard, useClipboardContext };52:T26b8,@layer moduix.components { .root { display: flex; flex-direction: column; gap: var(--moduix-clipboard-gap, var(--moduix-spacing-1-5)); width: var(--moduix-clipboard-width, 100%); max-width: var(--moduix-clipboard-max-width, none); color: var(--moduix-clipboard-color, var(--moduix-color-foreground)); } .label { color: var(--moduix-clipboard-label-color, currentColor); font-size: var(--moduix-clipboard-label-font-size, var(--moduix-text-sm)); font-weight: var(--moduix-clipboard-label-font-weight, var(--moduix-weight-medium)); line-height: var(--moduix-clipboard-label-line-height, var(--moduix-line-height-text-sm)); } .control { display: flex; align-items: center; gap: var(--moduix-clipboard-control-gap, var(--moduix-spacing-2)); width: 100%; } .input { box-sizing: border-box; width: 100%; min-width: 0; min-height: var( --moduix-clipboard-input-height, var(--moduix-input-height-md, var(--moduix-size-md)) ); margin: 0; border: var( --moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)) ) solid var( --moduix-clipboard-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)) ); border-radius: var( --moduix-clipboard-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)) ); padding-block: var( --moduix-clipboard-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1)) ); padding-inline: var( --moduix-clipboard-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3-5)) ); background-color: var( --moduix-clipboard-input-bg, var(--moduix-input-bg, var(--moduix-color-background)) ); color: var( --moduix-clipboard-input-color, var(--moduix-input-color, var(--moduix-color-foreground)) ); font: inherit; font-size: var( --moduix-clipboard-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md)) ); line-height: var( --moduix-clipboard-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md)) ); outline: var( --moduix-clipboard-input-focus-ring-width, var( --moduix-input-focus-ring-width, var( --moduix-clipboard-input-border-width, var( --moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)) ) ) ) ) solid transparent; outline-offset: calc( var( --moduix-clipboard-input-focus-ring-offset, var( --moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)) ) ) * -1 ); transition: border-color var( --moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)) ), outline-color var( --moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)) ), background-color var( --moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)) ), color var( --moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)) ), opacity var( --moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)) ); &::placeholder { color: var( --moduix-clipboard-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)) ); } &:focus-visible { outline-color: var( --moduix-clipboard-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)) ); } &[data-readonly] { background-color: var( --moduix-clipboard-input-readonly-bg, var( --moduix-input-readonly-bg, var(--moduix-clipboard-input-bg, var(--moduix-color-background)) ) ); color: var( --moduix-clipboard-input-readonly-color, var( --moduix-input-readonly-color, var(--moduix-clipboard-input-color, var(--moduix-color-foreground)) ) ); } &:is(:disabled, [data-disabled]) { pointer-events: none; opacity: var( --moduix-clipboard-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled)) ); } } .trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: var( --moduix-clipboard-trigger-gap, var(--moduix-button-content-gap, var(--moduix-spacing-2)) ); min-height: var( --moduix-clipboard-trigger-height, var(--moduix-button-size-md, var(--moduix-size-md)) ); padding-inline: var( --moduix-clipboard-trigger-padding-x, var(--moduix-button-padding-x-md, var(--moduix-spacing-4)) ); border: var( --moduix-clipboard-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)) ) solid var( --moduix-clipboard-trigger-border-color, var(--moduix-button-outline-border-color, var(--moduix-color-border)) ); border-radius: var( --moduix-clipboard-trigger-radius, var(--moduix-button-radius, var(--moduix-radius-md)) ); background-color: var( --moduix-clipboard-trigger-bg, var(--moduix-button-outline-bg, var(--moduix-color-background)) ); color: var( --moduix-clipboard-trigger-color, var(--moduix-button-outline-color, var(--moduix-color-foreground)) ); appearance: none; font: inherit; font-size: var( --moduix-clipboard-trigger-font-size, var(--moduix-button-font-size, var(--moduix-text-sm)) ); font-weight: var( --moduix-clipboard-trigger-font-weight, var(--moduix-button-font-weight, var(--moduix-weight-medium)) ); line-height: var( --moduix-clipboard-trigger-line-height, var(--moduix-button-line-height, var(--moduix-line-height-text-sm)) ); user-select: none; white-space: nowrap; cursor: pointer; transition: border-color var( --moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)) ), background-color var( --moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)) ), color var( --moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)) ), opacity var( --moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)) ), box-shadow var( --moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)) ), transform var( --moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)) ); & :where(svg) { width: var( --moduix-clipboard-indicator-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)) ); height: var( --moduix-clipboard-indicator-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)) ); flex-shrink: 0; } @media (hover: hover) { &:hover:not(:disabled, [data-disabled]) { background-color: var( --moduix-clipboard-trigger-bg-hover, var(--moduix-button-outline-bg-hover, var(--moduix-color-accent)) ); } } &:focus-visible { outline: var( --moduix-clipboard-trigger-focus-ring-width, var( --moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)) ) ) solid var( --moduix-clipboard-trigger-focus-ring-color, var(--moduix-button-focus-ring-color, var(--moduix-color-ring)) ); outline-offset: calc( var( --moduix-clipboard-trigger-focus-ring-offset, var( --moduix-clipboard-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)) ) ) * -1 ); } &:active:not(:disabled, [data-disabled]) { opacity: 0.94; } @media (prefers-reduced-motion: no-preference) { &:active:not(:disabled, [data-disabled]) { transform: translateY(1px) scale(0.985); } } &:is(:disabled, [data-disabled]) { pointer-events: none; opacity: var( --moduix-clipboard-disabled-opacity, var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled)) ); cursor: default; } } .indicator, .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .valueText { min-width: 0; color: var(--moduix-clipboard-value-text-color, currentColor); font-size: var(--moduix-clipboard-value-text-font-size, inherit); font-weight: var(--moduix-clipboard-value-text-font-weight, inherit); line-height: var(--moduix-clipboard-value-text-line-height, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }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","@moduix-react/icons"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/clipboard/Clipboard.tsx","content":"$51","type":"registry:component","target":"@components/ui/clipboard/Clipboard.tsx"},{"path":"src/components/clipboard/Clipboard.module.css","content":"$52","type":"registry:file","target":"@components/ui/clipboard/Clipboard.module.css"},{"path":"src/components/clipboard/index.ts","content":"export * from './Clipboard.js';","type":"registry:component","target":"@components/ui/clipboard/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]