123 lines
3.9 KiB
JavaScript
123 lines
3.9 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
/**
|
|
* Static CSS class names used internally for the component slots.
|
|
*/
|
|
export const cardHeaderClassNames = {
|
|
root: 'fui-CardHeader',
|
|
image: 'fui-CardHeader__image',
|
|
header: 'fui-CardHeader__header',
|
|
description: 'fui-CardHeader__description',
|
|
action: 'fui-CardHeader__action'
|
|
};
|
|
/**
|
|
* CSS variable names used internally for uniform styling in CardHeader.
|
|
*/
|
|
export const cardHeaderCSSVars = {
|
|
cardHeaderGapVar: '--fui-CardHeader--gap'
|
|
};
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
root: {
|
|
Bkc6ea2: "fkufhic",
|
|
Bt984gj: "f122n59"
|
|
},
|
|
image: {
|
|
mc9l5x: "ftuwxu6",
|
|
t21cq0: ["fql5097", "f6yss9k"]
|
|
},
|
|
header: {
|
|
mc9l5x: "f22iagw"
|
|
},
|
|
description: {
|
|
mc9l5x: "f22iagw"
|
|
},
|
|
action: {
|
|
Frg6f3: ["f6yss9k", "fql5097"],
|
|
rjrqlh: "fs9eatd",
|
|
Boue1pl: ["fxoo9ru", "f1g0ekvh"],
|
|
Bhz1vi0: "f1m6zfxz",
|
|
etxrgc: ["f1g0ekvh", "fxoo9ru"],
|
|
Bdua9ef: "f1sret3r",
|
|
cbfxhg: "fs4gbcv"
|
|
}
|
|
}, {
|
|
d: [".fkufhic{--fui-CardHeader--gap:12px;}", ".f122n59{align-items:center;}", ".ftuwxu6{display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".f22iagw{display:flex;}"],
|
|
m: [["@media (forced-colors: active){.fs9eatd .fui-Button,.fs9eatd .fui-Link{border-top-color:currentColor;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.f1g0ekvh .fui-Button,.f1g0ekvh .fui-Link{border-left-color:currentColor;}.fxoo9ru .fui-Button,.fxoo9ru .fui-Link{border-right-color:currentColor;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.f1m6zfxz .fui-Button,.f1m6zfxz .fui-Link{border-bottom-color:currentColor;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.f1sret3r .fui-Button,.f1sret3r .fui-Link{color:currentColor;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.fs4gbcv .fui-Button,.fs4gbcv .fui-Link{outline-color:currentColor;}}", {
|
|
m: "(forced-colors: active)"
|
|
}]]
|
|
});
|
|
const useStylesGrid = /*#__PURE__*/__styles({
|
|
root: {
|
|
mc9l5x: "f13qh94s",
|
|
t4k1zu: "f8a668j"
|
|
},
|
|
image: {
|
|
Br312pm: "fwpfdsa",
|
|
Ijaq50: "fldnz9j"
|
|
},
|
|
header: {
|
|
Br312pm: "fd46tj4",
|
|
Ijaq50: "f16hsg94"
|
|
},
|
|
description: {
|
|
Br312pm: "fd46tj4",
|
|
Ijaq50: "faunodf"
|
|
},
|
|
action: {
|
|
Br312pm: "fis13di",
|
|
Ijaq50: "fldnz9j"
|
|
}
|
|
}, {
|
|
d: [".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
|
|
});
|
|
const useStylesFlex = /*#__PURE__*/__styles({
|
|
root: {
|
|
mc9l5x: "f22iagw"
|
|
},
|
|
header: {
|
|
Bh6795r: "fqerorx"
|
|
},
|
|
image: {},
|
|
description: {},
|
|
action: {}
|
|
}, {
|
|
d: [".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}"]
|
|
});
|
|
/**
|
|
* Apply styling to the CardHeader slots based on the state.
|
|
*/
|
|
export const useCardHeaderStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const styles = useStyles();
|
|
const stylesGrid = useStylesGrid();
|
|
const stylesFlex = useStylesFlex();
|
|
const boxModelStyles = state.description ? stylesGrid : stylesFlex;
|
|
const getSlotStyles = slotName => {
|
|
var _state_slotName;
|
|
return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
|
|
};
|
|
state.root.className = getSlotStyles('root');
|
|
if (state.image) {
|
|
state.image.className = getSlotStyles('image');
|
|
}
|
|
if (state.header) {
|
|
state.header.className = getSlotStyles('header');
|
|
}
|
|
if (state.description) {
|
|
state.description.className = getSlotStyles('description');
|
|
}
|
|
if (state.action) {
|
|
state.action.className = getSlotStyles('action');
|
|
}
|
|
return state;
|
|
}; |