@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
152 lines (150 loc) • 4.25 kB
JavaScript
const require_config = require('../../core/system/config.cjs');
const require_focus_ring = require('../../core/css/focus-ring.cjs');
const require_checkbox_style = require('../checkbox/checkbox.style.cjs');
//#region src/components/checkbox-card/checkbox-card.style.ts
const checkboxCardStyle = require_config.defineComponentSlotStyle({
base: {
addon: {
borderColor: "{--addon-border-color}",
borderTopWidth: "1px",
fontSize: "{description-size}",
mt: "{space-y}",
pt: "{space-y}",
px: "{space-x}"
},
description: {
color: "fg.muted",
fontSize: "{description-size}"
},
group: { w: "full" },
indicator: {
...require_checkbox_style.checkboxStyle.base?.indicator,
"input:focus-visible + &": {
_checked: require_focus_ring.focusRingStyle.outline,
_notChecked: { borderColor: "{focus-ring-color}" }
},
position: "absolute",
top: "calc({space-y} + ({label-size} * 1.5 - {label-size}) / 2)"
},
root: {
...require_checkbox_style.checkboxStyle.base?.root,
"&:has(input:focus-visible)": require_focus_ring.focusRingStyle.outline,
"--addon-border-color": "{root-border-color}",
"--root-border-color": "colors.border",
alignItems: "stretch",
borderColor: "{--root-border-color}",
borderWidth: "1px",
flexDirection: "column",
focusRingColor: "{focus-border-color}",
gap: "1",
position: "relative",
px: "{space-x}",
py: "{space-y}",
rounded: "l2",
w: "full",
_invalid: {
borderColor: "{error-border-color}",
focusRingColor: "{error-border-color}"
}
}
},
props: {
justify: {
end: {
addon: {
me: "calc({bleed-size} * -1)",
ms: "calc({space-x} * -1)"
},
indicator: { right: "{space-x}" },
root: {
"&:has([data-indicator])": { "--bleed-size": "calc({indicator-size} + ({space-x} * 2))" },
"--bleed-size": "{space-x}",
pe: "{bleed-size}"
}
},
start: {
addon: {
me: "calc({space-x} * -1)",
ms: "calc({bleed-size} * -1)"
},
indicator: { left: "{space-x}" },
root: {
"&:has([data-indicator])": { "--bleed-size": "calc({indicator-size} + ({space-x} * 2))" },
"--bleed-size": "{space-x}",
ps: "{bleed-size}"
}
}
},
shape: { ...require_checkbox_style.checkboxStyle.props?.shape }
},
variants: {
base: {
indicator: {
color: "colorScheme.contrast",
_checked: { bg: "colorScheme.solid" },
_indeterminate: { bg: "colorScheme.solid" }
},
root: {
_checked: { "--indicator-border-color": "colorScheme.solid" },
_indeterminate: { "--indicator-border-color": "colorScheme.solid" }
}
},
outline: { root: { _checked: { "--root-border-color": "colorScheme.outline" } } },
subtle: { root: { _checked: {
"--addon-border-color": "colorScheme.muted",
"--root-border-color": "transparent",
bg: "colorScheme.subtle"
} } },
surface: { root: { _checked: {
"--root-border-color": "colorScheme.muted",
bg: "colorScheme.subtle"
} } }
},
sizes: {
sm: {
indicator: require_checkbox_style.checkboxStyle.sizes?.sm.indicator,
root: {
...require_checkbox_style.checkboxStyle.sizes?.sm.root,
"--description-size": "fontSizes.xs",
"--space-x": "spaces.3",
"--space-y": "spaces.2"
}
},
md: {
indicator: require_checkbox_style.checkboxStyle.sizes?.md.indicator,
root: {
...require_checkbox_style.checkboxStyle.sizes?.md.root,
"--description-size": "fontSizes.sm",
"--space-x": "spaces.4",
"--space-y": "spaces.3"
}
},
lg: {
indicator: require_checkbox_style.checkboxStyle.sizes?.lg.indicator,
root: {
...require_checkbox_style.checkboxStyle.sizes?.lg.root,
"--description-size": "fontSizes.md",
"--space-x": "spaces.5",
"--space-y": "spaces.4"
}
},
xl: {
indicator: require_checkbox_style.checkboxStyle.sizes?.lg.indicator,
root: {
...require_checkbox_style.checkboxStyle.sizes?.lg.root,
"--description-size": "fontSizes.md",
"--space-x": "spaces.6",
"--space-y": "spaces.5"
}
}
},
defaultProps: {
size: "md",
variant: "surface",
justify: "start",
shape: "rounded"
}
});
//#endregion
exports.checkboxCardStyle = checkboxCardStyle;
//# sourceMappingURL=checkbox-card.style.cjs.map