@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
375 lines • 12.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TEXT_AREA_STYLES = void 0;
const state_1 = require("../../../../components/textArea/types/state");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../text/variants");
const variants_2 = require("../textCount/variants");
const variants_3 = require("./variants");
const commonContainer = {
width: ' 100%',
display: 'flex',
flex_direction: 'column',
};
const commonTitleContainer = {
margin_bottom: spacings_1.SPACINGS.spacing_100,
};
const commonTitle = {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonLabelTextAreaContainer = {
min_height: '5.5rem',
display: 'flex',
flex_direction: 'column',
gap: spacings_1.SPACINGS.spacing_0,
padding: `${spacings_1.SPACINGS.spacing_100} ${spacings_1.SPACINGS.spacing_50}`,
border_style: 'solid',
};
const commonTextArea = {
resize: 'none',
border: 'none',
border_style: 'none',
background_color: 'transparent',
padding: spacings_1.SPACINGS.spacing_0,
flex: 1,
};
const commonPlaceholder = {
font_size: typography_1.PARAGRAPH.CAPTION[breakpoints_1.DeviceBreakpointsType.DESKTOP].font_size,
line_height: typography_1.PARAGRAPH.CAPTION[breakpoints_1.DeviceBreakpointsType.DESKTOP].line_height,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonBottomContainer = {
display: 'flex',
width: '100%',
flex_direction: 'row',
align_items: 'flex-start',
justify_content: 'space-between',
margin_top: spacings_1.SPACINGS.spacing_100,
padding: `${spacings_1.SPACINGS.spacing_0} ${spacings_1.SPACINGS.spacing_50}`,
};
const commonHelpMessageErrorContainer = {
display: 'flex',
flex_direction: 'column',
};
const commonHelpMessage = {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonErrorContainer = {
display: 'flex',
align_items: 'center',
gap: spacings_1.SPACINGS.spacing_100,
margin_top: spacings_1.SPACINGS.spacing_100,
margin_bottom: spacings_1.SPACINGS.spacing_100,
};
const commonCounter = {
font_variant: variants_1.TextVariantType.DEFAULT,
};
const commonCounterLeft = {
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonCounterRight = {
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
exports.TEXT_AREA_STYLES = {
[variants_3.TextAreaVariantType.DEFAULT]: {
labelInsideTextArea: true,
[state_1.TextAreaStateType.EMPTY]: {
container: {
...commonContainer,
},
titleContainer: {
...commonTitleContainer,
},
title: {
...commonTitle,
},
labelTextAreaContainer: {
...commonLabelTextAreaContainer,
},
label: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
required: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
textArea: {
...commonTextArea,
},
placeholder: {
...commonPlaceholder,
},
bottomContainer: {
...commonBottomContainer,
},
helpMessageErrorContainer: {
...commonHelpMessageErrorContainer,
},
helpMessage: {
...commonHelpMessage,
},
counter: {
...commonCounter,
},
counterLeft: {
...commonCounterLeft,
},
counterRight: {
...commonCounterRight,
},
counterVariant: variants_2.TextCountVariantType.DEFAULT,
},
[state_1.TextAreaStateType.ACTIVE]: {
container: {
...commonContainer,
},
titleContainer: {
...commonTitleContainer,
},
title: {
...commonTitle,
},
labelTextAreaContainer: {
...commonLabelTextAreaContainer,
},
label: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
required: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
textArea: {
...commonTextArea,
},
placeholder: {
...commonPlaceholder,
},
bottomContainer: {
...commonBottomContainer,
},
helpMessageErrorContainer: {
...commonHelpMessageErrorContainer,
},
helpMessage: {
...commonHelpMessage,
},
counter: {
...commonCounter,
},
counterLeft: {
...commonCounterLeft,
},
counterRight: {
...commonCounterRight,
},
counterVariant: variants_2.TextCountVariantType.DEFAULT,
},
[state_1.TextAreaStateType.FILLED]: {
container: {
...commonContainer,
},
titleContainer: {
...commonTitleContainer,
},
title: {
...commonTitle,
},
labelTextAreaContainer: {
...commonLabelTextAreaContainer,
},
label: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
required: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
textArea: {
...commonTextArea,
},
placeholder: {
...commonPlaceholder,
},
bottomContainer: {
...commonBottomContainer,
},
helpMessageErrorContainer: {
...commonHelpMessageErrorContainer,
},
helpMessage: {
...commonHelpMessage,
},
counter: {
...commonCounter,
},
counterLeft: {
...commonCounterLeft,
},
counterRight: {
...commonCounterRight,
},
counterVariant: variants_2.TextCountVariantType.DEFAULT,
},
[state_1.TextAreaStateType.ERROR]: {
container: {
...commonContainer,
},
titleContainer: {
...commonTitleContainer,
},
title: {
...commonTitle,
},
labelTextAreaContainer: {
...commonLabelTextAreaContainer,
},
label: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
required: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
textArea: {
...commonTextArea,
},
placeholder: {
...commonPlaceholder,
},
bottomContainer: {
...commonBottomContainer,
},
helpMessageErrorContainer: {
...commonHelpMessageErrorContainer,
},
helpMessage: {
...commonHelpMessage,
},
errorContainer: {
...commonErrorContainer,
},
errorIcon: {
width: spacings_1.SPACINGS.spacing_100,
height: spacings_1.SPACINGS.spacing_100,
},
errorMessage: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
counter: {
...commonCounter,
},
counterLeft: {
...commonCounterLeft,
},
counterRight: {
...commonCounterRight,
},
counterVariant: variants_2.TextCountVariantType.DEFAULT,
},
[state_1.TextAreaStateType.DISABLED_FILLED]: {
container: {
...commonContainer,
},
titleContainer: {
...commonTitleContainer,
},
title: {
...commonTitle,
},
labelTextAreaContainer: {
...commonLabelTextAreaContainer,
},
label: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
required: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
textArea: {
...commonTextArea,
},
placeholder: {
...commonPlaceholder,
},
bottomContainer: {
...commonBottomContainer,
},
helpMessageErrorContainer: {
...commonHelpMessageErrorContainer,
},
helpMessage: {
...commonHelpMessage,
},
counter: {
...commonCounter,
},
counterLeft: {
...commonCounterLeft,
},
counterRight: {
...commonCounterRight,
},
counterVariant: variants_2.TextCountVariantType.DEFAULT,
},
[state_1.TextAreaStateType.DISABLED_EMPTY]: {
container: {
...commonContainer,
},
titleContainer: {
...commonTitleContainer,
},
title: {
...commonTitle,
},
labelTextAreaContainer: {
...commonLabelTextAreaContainer,
},
label: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
required: {
font_variant: variants_1.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
textArea: {
...commonTextArea,
},
placeholder: {
...commonPlaceholder,
},
bottomContainer: {
...commonBottomContainer,
},
helpMessageErrorContainer: {
...commonHelpMessageErrorContainer,
},
helpMessage: {
...commonHelpMessage,
},
counter: {
...commonCounter,
},
counterLeft: {
...commonCounterLeft,
},
counterRight: {
...commonCounterRight,
},
counterVariant: variants_2.TextCountVariantType.DEFAULT,
},
},
};
//# sourceMappingURL=styles.js.map