@cloud-ru/ds-site-card-vacancy 1.0.0

package/dist/cjs/styles.module.css

@@ -0,0 +1,177 @@
+@charset "UTF-8";
+.background{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  overflow:hidden;
+  border-radius:inherit;
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.content{
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:space-between;
+  min-width:0;
+  overflow-wrap:break-word;
+}
+
+.title{
+  overflow:hidden;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  width:100%;
+  min-width:0;
+  text-overflow:ellipsis;
+}
+
+.description{
+  overflow:hidden;
+  width:100%;
+  min-width:0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.cardVacancy{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  min-height:160px;
+  margin:0;
+  padding:var(--sn-primitive-dimension-24, 24px);
+  border:none;
+  font-family:inherit;
+  text-align:left;
+  text-decoration:none;
+  background:transparent;
+  outline:0;
+  outline-offset:0;
+}
+.cardVacancy[data-mobile]{
+  min-height:120px;
+}
+.cardVacancy:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) * -1);
+}
+.cardVacancy:active{
+  outline:none;
+}
+.cardVacancy[data-appearance=neutral]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.cardVacancy[data-appearance=neutral] .background{
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.cardVacancy[data-appearance=neutral] .description{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.cardVacancy[data-appearance=primary]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.cardVacancy[data-appearance=primary] .background{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.cardVacancy[data-appearance=primary] .background::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-image:repeating-radial-gradient(circle at 0% calc(100% + var(--sn-primitive-dimension-24, 24px)), transparent 0, transparent calc(var(--sn-primitive-dimension-32, 32px) - var(--sn-primitive-strokeWeight-strokeBold, 3px)), var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b)))) calc(var(--sn-primitive-dimension-32, 32px) - var(--sn-primitive-strokeWeight-strokeBold, 3px)), var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b)))) var(--sn-primitive-dimension-32, 32px));
+}
+.cardVacancy .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.cardVacancy .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.cardVacancy .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.cardVacancy .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.cardVacancy .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.cardVacancy .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.cardVacancy .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.cardVacancy .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.cardVacancy .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.cardVacancy{
+}
+.cardVacancy[data-loading] .stateLayer[data-state=borderOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=activatedOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=versionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyVersionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=inversionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyInversionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,29 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+import { APPEARANCE } from './constants';
+export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>['ref'];
+export type Appearance = ValueOf<typeof APPEARANCE>;
+type BaseCardVacancyProps = {
+    /** Заголовок вакансии. Обрезается многоточием, если не помещается в одну строку. */
+    title?: string;
+    /** Описание под заголовком. Обрезается многоточием, если не помещается в одну строку. */
+    description?: string;
+    /**
+     * Визуальный вид карточки:
+     *
+     * - `neutral` — нейтральный полупрозрачный фон, тёмный заголовок.
+     * - `primary` — акцентный фон `primary` с декоративным паттерном, текст `onAccent`.
+     */
+    appearance?: Appearance;
+    /** Компактная мобильная версия — меньшая высота и более мелкая типографика. */
+    mobile?: boolean;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+};
+export type CardVacancyProps<T extends ElementType = 'a'> = WithSupportProps<BaseCardVacancyProps & {
+    /** Полиморфный тег корня — `'a'` по умолчанию (карточка-ссылка), либо роутерный `Link` / `'button'` / `'div'`. */
+    as?: T;
+    /** Ref на корневой элемент. */
+    innerRef?: PolymorphicRef<T>;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseCardVacancyProps | 'as' | 'ref'>>;
+export {};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/CardVacancy.d.ts

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { CardVacancyProps } from './types.js';
+export declare function CardVacancy<T extends ElementType = 'a'>({ as: asProp, innerRef, className, appearance, mobile, title, description, ...rest }: CardVacancyProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/CardVacancy.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@cloud-ru/ds-typography';
+import { withInnerRefSupport } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { APPEARANCE, TEST_IDS } from './constants.js';
+import styles from './styles.module.css';
+export function CardVacancy({ as: asProp, innerRef, className, appearance = APPEARANCE.Neutral, mobile = false, title, description, ...rest }) {
+    const Tag = asProp ?? 'a';
+    const restProps = rest;
+    const isAnchor = !asProp || asProp === 'a';
+    const isExternal = isAnchor && restProps.target === '_blank';
+    const rel = isExternal ? 'noopener noreferrer' : restProps.rel;
+    return (_jsxs(Tag, { ...restProps, rel: rel, ref: innerRef, className: cn(styles.cardVacancy, className), "data-test-id": restProps['data-test-id'] ?? TEST_IDS.root, "data-appearance": appearance, "data-mobile": mobile || undefined, children: [_jsx("span", { className: styles.background, "aria-hidden": true }), _jsx("span", { className: styles.stateLayer, "data-state": 'emptyNeutralOnBackground', "aria-hidden": true }), _jsxs("span", { className: styles.content, children: [_jsx(Typography, { as: 'span', className: styles.title, variant: 'title', size: mobile ? 'm' : 'l', "data-test-id": TEST_IDS.title, children: title }), _jsx(Typography, { as: 'span', className: styles.description, variant: 'body', size: mobile ? 's' : 'm', "data-test-id": TEST_IDS.description, children: description })] })] }));
+}
+withInnerRefSupport(CardVacancy);

package/dist/esm/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+};
+export declare const TEST_IDS: {
+    readonly root: "card-vacancy";
+    readonly title: "card-vacancy__title";
+    readonly description: "card-vacancy__description";
+};

package/dist/esm/constants.js

@@ -0,0 +1,10 @@
+const PREFIX = 'card-vacancy';
+export const APPEARANCE = {
+    Neutral: 'neutral',
+    Primary: 'primary',
+};
+export const TEST_IDS = {
+    root: PREFIX,
+    title: `${PREFIX}__title`,
+    description: `${PREFIX}__description`,
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CardVacancy.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './CardVacancy.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/style.css

@@ -0,0 +1,177 @@
+@charset "UTF-8";
+.background{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  overflow:hidden;
+  border-radius:inherit;
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.content{
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:space-between;
+  min-width:0;
+  overflow-wrap:break-word;
+}
+
+.title{
+  overflow:hidden;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  width:100%;
+  min-width:0;
+  text-overflow:ellipsis;
+}
+
+.description{
+  overflow:hidden;
+  width:100%;
+  min-width:0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.cardVacancy{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  min-height:160px;
+  margin:0;
+  padding:var(--sn-primitive-dimension-24, 24px);
+  border:none;
+  font-family:inherit;
+  text-align:left;
+  text-decoration:none;
+  background:transparent;
+  outline:0;
+  outline-offset:0;
+}
+.cardVacancy[data-mobile]{
+  min-height:120px;
+}
+.cardVacancy:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) * -1);
+}
+.cardVacancy:active{
+  outline:none;
+}
+.cardVacancy[data-appearance=neutral]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.cardVacancy[data-appearance=neutral] .background{
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.cardVacancy[data-appearance=neutral] .description{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.cardVacancy[data-appearance=primary]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.cardVacancy[data-appearance=primary] .background{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.cardVacancy[data-appearance=primary] .background::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-image:repeating-radial-gradient(circle at 0% calc(100% + var(--sn-primitive-dimension-24, 24px)), transparent 0, transparent calc(var(--sn-primitive-dimension-32, 32px) - var(--sn-primitive-strokeWeight-strokeBold, 3px)), var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b)))) calc(var(--sn-primitive-dimension-32, 32px) - var(--sn-primitive-strokeWeight-strokeBold, 3px)), var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b)))) var(--sn-primitive-dimension-32, 32px));
+}
+.cardVacancy .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.cardVacancy .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.cardVacancy .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.cardVacancy .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.cardVacancy .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.cardVacancy .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.cardVacancy .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.cardVacancy .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.cardVacancy .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.cardVacancy{
+}
+.cardVacancy[data-loading] .stateLayer[data-state=borderOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=activatedOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=versionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyVersionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=inversionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyInversionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}

package/dist/esm/styles.module.css

@@ -0,0 +1,177 @@
+@charset "UTF-8";
+.background{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  overflow:hidden;
+  border-radius:inherit;
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.content{
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:space-between;
+  min-width:0;
+  overflow-wrap:break-word;
+}
+
+.title{
+  overflow:hidden;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  width:100%;
+  min-width:0;
+  text-overflow:ellipsis;
+}
+
+.description{
+  overflow:hidden;
+  width:100%;
+  min-width:0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.cardVacancy{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  min-height:160px;
+  margin:0;
+  padding:var(--sn-primitive-dimension-24, 24px);
+  border:none;
+  font-family:inherit;
+  text-align:left;
+  text-decoration:none;
+  background:transparent;
+  outline:0;
+  outline-offset:0;
+}
+.cardVacancy[data-mobile]{
+  min-height:120px;
+}
+.cardVacancy:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) * -1);
+}
+.cardVacancy:active{
+  outline:none;
+}
+.cardVacancy[data-appearance=neutral]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.cardVacancy[data-appearance=neutral] .background{
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.cardVacancy[data-appearance=neutral] .description{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.cardVacancy[data-appearance=primary]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.cardVacancy[data-appearance=primary] .background{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.cardVacancy[data-appearance=primary] .background::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-image:repeating-radial-gradient(circle at 0% calc(100% + var(--sn-primitive-dimension-24, 24px)), transparent 0, transparent calc(var(--sn-primitive-dimension-32, 32px) - var(--sn-primitive-strokeWeight-strokeBold, 3px)), var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b)))) calc(var(--sn-primitive-dimension-32, 32px) - var(--sn-primitive-strokeWeight-strokeBold, 3px)), var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b)))) var(--sn-primitive-dimension-32, 32px));
+}
+.cardVacancy .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.cardVacancy .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.cardVacancy .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.cardVacancy .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.cardVacancy .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.cardVacancy .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.cardVacancy .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.cardVacancy .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.cardVacancy .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .cardVacancy:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.cardVacancy{
+}
+.cardVacancy[data-loading] .stateLayer[data-state=borderOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=activatedOnBackground], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=versionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyVersionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=inversionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyInversionOnColor], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.cardVacancy[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .cardVacancy:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .cardVacancy[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,29 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+import { APPEARANCE } from './constants.js';
+export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>['ref'];
+export type Appearance = ValueOf<typeof APPEARANCE>;
+type BaseCardVacancyProps = {
+    /** Заголовок вакансии. Обрезается многоточием, если не помещается в одну строку. */
+    title?: string;
+    /** Описание под заголовком. Обрезается многоточием, если не помещается в одну строку. */
+    description?: string;
+    /**
+     * Визуальный вид карточки:
+     *
+     * - `neutral` — нейтральный полупрозрачный фон, тёмный заголовок.
+     * - `primary` — акцентный фон `primary` с декоративным паттерном, текст `onAccent`.
+     */
+    appearance?: Appearance;
+    /** Компактная мобильная версия — меньшая высота и более мелкая типографика. */
+    mobile?: boolean;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+};
+export type CardVacancyProps<T extends ElementType = 'a'> = WithSupportProps<BaseCardVacancyProps & {
+    /** Полиморфный тег корня — `'a'` по умолчанию (карточка-ссылка), либо роутерный `Link` / `'button'` / `'div'`. */
+    as?: T;
+    /** Ref на корневой элемент. */
+    innerRef?: PolymorphicRef<T>;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseCardVacancyProps | 'as' | 'ref'>>;
+export {};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};