@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 6.8 kB
Source Map (JSON)
{"version":3,"file":"radio-card.style.cjs","names":["defineComponentSlotStyle","radioStyle","focusRingStyle"],"sources":["../../../../src/components/radio-card/radio-card.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\nimport { radioStyle } from \"../radio\"\n\nexport const radioCardStyle = defineComponentSlotStyle({\n base: {\n addon: {\n borderColor: \"{--addon-border-color}\",\n borderTopWidth: \"1px\",\n fontSize: \"{description-size}\",\n mt: \"{space-y}\",\n pt: \"{space-y}\",\n px: \"{space-x}\",\n },\n description: { color: \"fg.muted\", fontSize: \"{description-size}\" },\n group: { w: \"full\" },\n indicator: {\n ...radioStyle.base?.indicator,\n \"input:focus-visible + &\": {\n borderColor: \"{focus-ring-color}\",\n },\n position: \"absolute\",\n top: \"calc({space-y} + ({label-size} * 1.5 - {label-size}) / 2)\",\n },\n root: {\n ...radioStyle.base?.root,\n \"&:has(input:focus-visible)\": focusRingStyle.outline,\n \"--addon-border-color\": \"{root-border-color}\",\n \"--root-border-color\": \"colors.border\",\n alignItems: \"stretch\",\n borderColor: \"{--root-border-color}\",\n borderWidth: \"1px\",\n flexDirection: \"column\",\n focusRingColor: \"{focus-border-color}\",\n gap: \"1\",\n position: \"relative\",\n px: \"{space-x}\",\n py: \"{space-y}\",\n rounded: \"l2\",\n w: \"full\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n },\n\n props: {\n /**\n * The justify indicator of the component\n *\n * @default 'start'\n */\n justify: {\n end: {\n addon: {\n me: \"calc({bleed-size} * -1)\",\n ms: \"calc({space-x} * -1)\",\n },\n indicator: { right: \"{space-x}\" },\n root: {\n \"&:has([data-indicator])\": {\n \"--bleed-size\": \"calc({indicator-size} + ({space-x} * 2))\",\n },\n \"--bleed-size\": \"{space-x}\",\n pe: \"{bleed-size}\",\n },\n },\n start: {\n addon: {\n me: \"calc({space-x} * -1)\",\n ms: \"calc({bleed-size} * -1)\",\n },\n indicator: { left: \"{space-x}\" },\n root: {\n \"&:has([data-indicator])\": {\n \"--bleed-size\": \"calc({indicator-size} + ({space-x} * 2))\",\n },\n \"--bleed-size\": \"{space-x}\",\n ps: \"{bleed-size}\",\n },\n },\n },\n /**\n * The shape of the component\n *\n * @default 'circle'\n */\n shape: { ...radioStyle.props?.shape },\n },\n\n variants: {\n base: { indicator: radioStyle.variants?.base.indicator },\n outline: {\n root: {\n _checked: {\n \"--indicator-border-color\": \"colorScheme.outline\",\n \"--root-border-color\": \"colorScheme.outline\",\n },\n },\n },\n subtle: {\n indicator: { _checked: { bg: \"bg\" } },\n root: {\n _checked: {\n \"--addon-border-color\": \"colorScheme.muted\",\n \"--indicator-border-color\": \"colorScheme.emphasized\",\n \"--root-border-color\": \"transparent\",\n bg: \"colorScheme.subtle\",\n },\n },\n },\n surface: {\n indicator: { _checked: { bg: \"bg\" } },\n root: {\n _checked: {\n \"--indicator-border-color\": \"colorScheme.emphasized\",\n \"--root-border-color\": \"colorScheme.muted\",\n bg: \"colorScheme.subtle\",\n },\n },\n },\n },\n\n sizes: {\n sm: {\n indicator: radioStyle.sizes?.sm.indicator,\n root: {\n ...radioStyle.sizes?.sm.root,\n \"--description-size\": \"fontSizes.xs\",\n \"--space-x\": \"spaces.3\",\n \"--space-y\": \"spaces.2\",\n },\n },\n md: {\n indicator: radioStyle.sizes?.md.indicator,\n root: {\n ...radioStyle.sizes?.md.root,\n \"--description-size\": \"fontSizes.sm\",\n \"--space-x\": \"spaces.4\",\n \"--space-y\": \"spaces.3\",\n },\n },\n lg: {\n indicator: radioStyle.sizes?.lg.indicator,\n root: {\n ...radioStyle.sizes?.lg.root,\n \"--description-size\": \"fontSizes.md\",\n \"--space-x\": \"spaces.5\",\n \"--space-y\": \"spaces.4\",\n },\n },\n xl: {\n indicator: radioStyle.sizes?.lg.indicator,\n root: {\n ...radioStyle.sizes?.lg.root,\n \"--description-size\": \"fontSizes.md\",\n \"--space-x\": \"spaces.6\",\n \"--space-y\": \"spaces.5\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"surface\",\n justify: \"start\",\n shape: \"circle\",\n },\n})\n\nexport type RadioCardStyle = typeof radioCardStyle\n"],"mappings":";;;;;AAGA,MAAa,iBAAiBA,wCAAyB;CACrD,MAAM;EACJ,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,UAAU;GACV,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,aAAa;GAAE,OAAO;GAAY,UAAU;GAAsB;EAClE,OAAO,EAAE,GAAG,QAAQ;EACpB,WAAW;GACT,GAAGC,+BAAW,MAAM;GACpB,2BAA2B,EACzB,aAAa,sBACd;GACD,UAAU;GACV,KAAK;GACN;EACD,MAAM;GACJ,GAAGA,+BAAW,MAAM;GACpB,8BAA8BC,kCAAe;GAC7C,wBAAwB;GACxB,uBAAuB;GACvB,YAAY;GACZ,aAAa;GACb,aAAa;GACb,eAAe;GACf,gBAAgB;GAChB,KAAK;GACL,UAAU;GACV,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,GAAG;GACH,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACF;CAED,OAAO;EAML,SAAS;GACP,KAAK;IACH,OAAO;KACL,IAAI;KACJ,IAAI;KACL;IACD,WAAW,EAAE,OAAO,aAAa;IACjC,MAAM;KACJ,2BAA2B,EACzB,gBAAgB,4CACjB;KACD,gBAAgB;KAChB,IAAI;KACL;IACF;GACD,OAAO;IACL,OAAO;KACL,IAAI;KACJ,IAAI;KACL;IACD,WAAW,EAAE,MAAM,aAAa;IAChC,MAAM;KACJ,2BAA2B,EACzB,gBAAgB,4CACjB;KACD,gBAAgB;KAChB,IAAI;KACL;IACF;GACF;EAMD,OAAO,EAAE,GAAGD,+BAAW,OAAO,OAAO;EACtC;CAED,UAAU;EACR,MAAM,EAAE,WAAWA,+BAAW,UAAU,KAAK,WAAW;EACxD,SAAS,EACP,MAAM,EACJ,UAAU;GACR,4BAA4B;GAC5B,uBAAuB;GACxB,EACF,EACF;EACD,QAAQ;GACN,WAAW,EAAE,UAAU,EAAE,IAAI,MAAM,EAAE;GACrC,MAAM,EACJ,UAAU;IACR,wBAAwB;IACxB,4BAA4B;IAC5B,uBAAuB;IACvB,IAAI;IACL,EACF;GACF;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,IAAI,MAAM,EAAE;GACrC,MAAM,EACJ,UAAU;IACR,4BAA4B;IAC5B,uBAAuB;IACvB,IAAI;IACL,EACF;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,CAAC"}