ant-design-x-vue/es/prompts/style/index.mjs

Craft AI-driven interfaces effortlessly

import { genStyleHooks as t } from "../../theme/genStyleUtils.mjs";
import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as o } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as l } from "../../_util/cssinjs-utils/util/statistic.mjs";
const n = (r) => {
  const { componentCls: e } = r;
  return {
    [e]: {
      // ======================== Prompt ========================
      "&, & *": {
        boxSizing: "border-box"
      },
      maxWidth: "100%",
      [`&${e}-rtl`]: {
        direction: "rtl"
      },
      [`& ${e}-title`]: {
        marginBlockStart: 0,
        fontWeight: "normal",
        color: r.colorTextTertiary
      },
      [`& ${e}-list`]: {
        display: "flex",
        gap: r.paddingSM,
        overflowX: "scroll",
        "&::-webkit-scrollbar": {
          display: "none"
        },
        listStyle: "none",
        paddingInlineStart: 0,
        marginBlock: 0,
        alignItems: "stretch",
        "&-wrap": {
          flexWrap: "wrap"
        },
        "&-vertical": {
          flexDirection: "column",
          alignItems: "flex-start"
        }
      },
      // ========================= Item =========================
      [`${e}-item`]: {
        flex: "none",
        display: "flex",
        gap: r.paddingXS,
        height: "auto",
        paddingBlock: r.paddingSM,
        paddingInline: r.padding,
        alignItems: "flex-start",
        justifyContent: "flex-start",
        background: r.colorBgContainer,
        borderRadius: r.borderRadiusLG,
        transition: ["border", "background"].map((i) => `${i} ${r.motionDurationSlow}`).join(","),
        border: `${o(r.lineWidth)} ${r.lineType} ${r.colorBorderSecondary}`,
        [`&:not(${e}-item-has-nest)`]: {
          "&:hover": {
            cursor: "pointer",
            background: r.colorFillTertiary
          },
          "&:active": {
            background: r.colorFill
          }
        },
        [`${e}-content`]: {
          flex: "auto",
          minWidth: 0,
          display: "flex",
          gap: r.paddingXXS,
          flexDirection: "column",
          alignItems: "flex-start"
        },
        [`${e}-icon, ${e}-label, ${e}-desc`]: {
          margin: 0,
          padding: 0,
          fontSize: r.fontSize,
          lineHeight: r.lineHeight,
          textAlign: "start",
          whiteSpace: "normal"
        },
        [`${e}-label`]: {
          color: r.colorTextHeading,
          fontWeight: 500
        },
        [`${e}-label + ${e}-desc`]: {
          color: r.colorTextTertiary
        },
        // Disabled
        [`&${e}-item-disabled`]: {
          pointerEvents: "none",
          background: r.colorBgContainerDisabled,
          [`${e}-label, ${e}-desc`]: {
            color: r.colorTextTertiary
          }
        }
      }
    }
  };
}, a = (r) => {
  const { componentCls: e } = r;
  return {
    [e]: {
      // ========================= Parent =========================
      [`${e}-item-has-nest`]: {
        [`> ${e}-content`]: {
          // gap: token.paddingSM,
          [`> ${e}-label`]: {
            fontSize: r.fontSizeLG,
            lineHeight: r.lineHeightLG
          }
        }
      },
      // ========================= Nested =========================
      [`&${e}-nested`]: {
        marginTop: r.paddingXS,
        // ======================== Prompt ========================
        alignSelf: "stretch",
        [`${e}-list`]: {
          alignItems: "stretch"
        },
        // ========================= Item =========================
        [`${e}-item`]: {
          border: 0,
          background: r.colorFillQuaternary
        }
      }
    }
  };
}, c = () => ({}), u = t(
  "Prompts",
  (r) => {
    const e = l(r, {});
    return [n(e), a(e)];
  },
  c
);
export {
  u as default,
  c as prepareComponentToken
};