'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { LoadingIcon } from '@graphprotocol/gds-react/icons';
import { useCSSPropsPolyfill, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../utils/index.js";
import { renderAddon } from "./base/Addon.js";
import { DescriptionListItemMeta, DescriptionListMeta } from "./DescriptionList.meta.js";
import { Label } from "./Label.js";
export function DescriptionListRoot({ ref: passedRef, size, orientation, className, style, children, ...props }) {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(DescriptionListMeta, { size, orientation }, { ref: passedRef });
    return (_jsx("div", { ref: cssPropsPolyfillPassedRef, className: cn('gds-description-list root-block', className), ...getCSSPropsAttributes(DescriptionListMeta, { size, orientation }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsx("div", { className: "@prop-orientation-horizontal/description-list:overflow-x-clip", children: _jsx("dl", { className: `
            flex
            @prop-orientation-horizontal/description-list:-mx-4
            @prop-orientation-horizontal/description-list:flex-row
            @prop-orientation-horizontal/description-list:flex-wrap
            @prop-orientation-horizontal/description-list:gap-y-4
            @prop-orientation-vertical/description-list:flex-col
          `, children: children }) }) }));
}
DescriptionListRoot.displayName = 'DescriptionList';
export function DescriptionListItem({ ref: passedRef, variant, label: passedLabel, description, addon, loading, action, className, style, children, ...props }) {
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(DescriptionListItemMeta, { variant }, { ref: passedRef });
    const label = passedLabel && typeof passedLabel === 'object' && 'content' in passedLabel
        ? passedLabel
        : { content: passedLabel };
    return (_jsxs("div", { ref: cssPropsPolyfillPassedRef, "data-loading": loading || undefined, className: cn(`group/description-list-item gds-description-list-item root-flex gap-x-4 gap-y-1 border-muted
        @prop-orientation-horizontal/description-list:flex-col
        @prop-orientation-horizontal/description-list:border-s
        @prop-orientation-horizontal/description-list:px-4
        @prop-orientation-vertical/description-list:flex-row
        @prop-orientation-vertical/description-list:not-first:border-t`, className), ...getCSSPropsAttributes(DescriptionListItemMeta, { variant }, style), ...cssPropsPolyfillAttributes, ...props, children: [_jsx("dt", { className: `
          @prop-orientation-vertical/description-list:max-w-[75%]
          @prop-orientation-vertical/description-list:min-w-auto
          @prop-orientation-vertical/description-list:shrink-9999
          @prop-orientation-vertical/description-list:self-center
          @prop-orientation-vertical/description-list:@prop-size-small/description-list:py-2
          @prop-orientation-vertical/description-list:@prop-size-medium/description-list:py-2.5
          @prop-orientation-vertical/description-list:@prop-size-large/description-list:py-3
        `, children: _jsx(Label, { variant: "secondary", addon: label.addon, description: description, className: `
            wrap-normal
            @prop-size-small/description-list:prop-size-small
            @prop-size-medium/description-list:prop-size-medium
            @prop-size-large/description-list:prop-size-large
          `, children: label.content }) }), _jsxs("dd", { className: `
          flex grow text-default
          @prop-variant-caption/description-list-item:text-caption
          @prop-variant-mono/description-list-item:font-mono
          @prop-size-small/description-list:gap-1
          @prop-size-small/description-list:text-12
          @prop-size-small/description-list:@prop-not-variant-default/description-list-item:text-10
          @prop-size-medium/description-list:gap-1.25
          @prop-size-medium/description-list:text-14
          @prop-size-medium/description-list:@prop-not-variant-default/description-list-item:text-12
          @prop-size-large/description-list:gap-1.5
          @prop-size-large/description-list:text-16
          @prop-size-large/description-list:@prop-not-variant-default/description-list-item:text-14
          @prop-size-small/description-list:**:button-or-group:default-size-xsmall
          @prop-size-medium/description-list:**:button-or-group:default-size-small
          @prop-size-large/description-list:**:button-or-group:default-size-medium
        `, children: [_jsxs("span", { className: `
            -mx-2 scrollbar-none overflow-x-auto overflow-y-clip gradient-mask-x
            px-2 gradient-mask-offset-2 ${ /* Ensure that focus rings on nested elements don't get clipped */''}
            flex items-center gap-addon whitespace-nowrap
            group-data-loading/description-list-item:invisible
            @prop-size-small/description-list:py-0.5
            @prop-size-medium/description-list:py-1
            @prop-size-large/description-list:py-1
            @prop-orientation-vertical/description-list:grow
            @prop-orientation-vertical/description-list:justify-end-safe
          `, children: [addon ? (_jsx("span", { className: `
                gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0
                u:@prop-size-small/description-list:addon-small
                u:@prop-size-medium/description-list:addon-medium
                u:@prop-size-large/description-list:addon-large
              `, children: renderAddon(addon) })) : null, children ? _jsx("span", { className: "shrink-0", children: children }) : null] }), action && !loading ? (_jsx("span", { className: "shrink-0 self-center **:button:default-variant-naked", children: action })) : null, _jsx("span", { className: `
            absolute inset-y-0 flex items-center justify-center
            group-not-data-loading/description-list-item:hidden
            @prop-orientation-horizontal/description-list:start-0
            @prop-orientation-vertical/description-list:end-0
            @prop-orientation-vertical/description-list:w-(--gds-addon-size)
          `, children: _jsx(LoadingIcon, {}) })] })] }));
}
DescriptionListItem.displayName = 'DescriptionList.Item';
//# sourceMappingURL=DescriptionList.parts.js.map