@veracity/vui 5.2.3-alpha.401155.2606240748 → 5.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -72,7 +72,7 @@ const Checkbox = vui((props, ref) => {
|
|
|
72
72
|
const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
|
|
73
73
|
const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
|
|
74
74
|
const controlMr = children || label ? 1 : 0;
|
|
75
|
-
const color = isChecked || isIndeterminate ? checkboxColors.checked : controlColor;
|
|
75
|
+
const color = isChecked || isIndeterminate ? readOnly ? checkboxColors.readOnly : checkboxColors.checked : controlColor;
|
|
76
76
|
const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover;
|
|
77
77
|
const isLongLabel = label && label?.length >= 60;
|
|
78
78
|
const hasJsxChildren = !!children;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { CheckboxProps, CheckboxStyleProps } from './checkbox.types'\n\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { checkboxColors, disabled } from './consts'\nimport { useCheckboxGroupContext } from './context'\n\nconst CheckboxControl = styled.spanBox`\n border-radius: none;\n display: inline-flex;\n flex-shrink: 0;\n position: relative;\n transition-duration: fast;\n`\n\nconst CheckboxInput = styled.input`\n cursor: inherit;\n height: 100%;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n`\n\nexport const CheckboxBase = styled.labelBox<CheckboxStyleProps>`\n cursor: pointer;\n display: inline-flex;\n width: fit-content;\n\n &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-checkboxControl {\n color: ${p => th.color(p.controlHoverColor)};\n }\n\n &[aria-readonly='true'] {\n cursor: auto;\n }\n\n &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-checkboxControl:focus-within {\n color: ${checkboxColors.focus};\n }\n\n &[aria-disabled='true'] {\n color: ${disabled.text};\n cursor: not-allowed;\n\n .vui-checkboxControl {\n color: ${disabled.icon};\n }\n }\n`\n\n/**\n * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.\n */\nexport const Checkbox = vui<'span', CheckboxProps>((props, ref) => {\n const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}\n\n const mergedProps = { ...checkboxGroupProps, ...props }\n const {\n checked,\n children,\n className,\n defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,\n disabled,\n readOnly,\n icon: iconProp = 'uiCheckboxUnselected',\n iconChecked = 'uiCheckboxSelected',\n iconIndeterminate = 'uiCheckboxIndeterminate',\n id,\n inputProps,\n inputRef,\n isIndeterminate,\n label,\n name,\n onChange: onChangeProp,\n required,\n value,\n ...rest\n } = omitThemingProps(mergedProps)\n const [isChecked, setIsChecked] = useState(defaultChecked)\n const styles = useStyleConfig('Checkbox', mergedProps)\n const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp\n const controlMr = children || label ? 1 : 0\n const color = isChecked || isIndeterminate ? checkboxColors.checked : controlColor\n const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover\n const isLongLabel = label && label?.length >= 60\n const hasJsxChildren = !!children\n // When JSX children are used, align control to top and offset it to visually center with the first text line.\n // Offset decreases as control size grows (sm=16px needs more, lg=24px needs none).\n const jsxChildrenMt: Record<string, string> = { sm: '3px', md: '2px', lg: '0px' }\n\n useEffect(() => {\n checked !== undefined && setIsChecked(checked)\n }, [checked])\n\n const onChange = (e: ChangeEvent) => {\n if (readOnly) return\n if (checked === undefined) setIsChecked(e.target.checked)\n onChangeProp?.(e)\n }\n\n const aliasedProps = filterUndefined({\n 'aria-disabled': disabled,\n 'aria-readonly': readOnly,\n })\n\n return (\n <CheckboxBase\n alignItems={isLongLabel || hasJsxChildren ? 'flex-start' : 'center'}\n className={cs('vui-checkbox', className)}\n controlHoverColor={controlHoverColor}\n ref={ref}\n {...styles.container}\n {...aliasedProps}\n {...rest}\n >\n <CheckboxControl\n bg=\"white\"\n className=\"vui-checkboxControl\"\n color={color}\n focusWithinRing={3}\n mr={controlMr}\n mt={hasJsxChildren ? (jsxChildrenMt[mergedProps.size ?? 'md'] ?? '2px') : undefined}\n role=\"none\"\n {...controlStyles}\n >\n <CheckboxInput\n className=\"vui-checkboxInput\"\n onChange={onChange}\n ref={inputRef}\n type=\"checkbox\"\n {...{ checked, defaultChecked, disabled, id, name, required, value }}\n {...inputProps}\n />\n <Icon className=\"vui-checkboxIcon\" h=\"100%\" name={icon} w=\"100%\" />\n </CheckboxControl>\n\n {children ??\n (label && (\n <T className=\"vui-checkboxLabel\" lineHeight={isLongLabel ? '26px' : 'normal'} {...styles.label}>\n {label}\n </T>\n ))}\n </CheckboxBase>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\nexport default Checkbox\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,kBAAkB,OAAO,OAAO;;;;;;;AAQtC,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;;;AAalC,MAAa,eAAe,OAAO,QAA4B;;;;;;cAMlD,MAAK,GAAG,MAAM,EAAE,iBAAiB,EAAE;;;;;;;;aAQnC,eAAe,MAAM;;;;aAIrB,SAAS,KAAK;;;;eAIZ,SAAS,KAAK;;;;;;;;AAS7B,MAAa,WAAW,KAA4B,OAAO,QAAQ;CACjE,MAAM,EAAE,cAAc,mBAAmB,GAAG,uBAAuB,wBAAwB,KAAK,CAAC;CAEjG,MAAM,cAAc;EAAE,GAAG;EAAoB,GAAG;CAAM;CACtD,MAAM,EACJ,SACA,UACA,WACA,iBAAiB,sBAAsB,SAAY,kBAAkB,SAAS,MAAM,KAAK,IAAI,QAC7F,UACA,UACA,MAAM,WAAW,wBACjB,cAAc,sBACd,oBAAoB,2BACpB,IACA,YACA,UACA,iBACA,OACA,MACA,UAAU,cACV,UACA,OACA,GAAG,SACD,iBAAiB,WAAW;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc;CACzD,MAAM,SAAS,eAAe,YAAY,WAAW;CACrD,MAAM,EAAE,OAAO,cAAc,YAAY,GAAG,kBAAkB,OAAO;CAErE,MAAM,OAAO,kBAAkB,oBAAoB,YAAY,cAAc;CAC7E,MAAM,YAAY,YAAY,QAAQ,IAAI;CAC1C,MAAM,QAAQ,aAAa,
|
|
1
|
+
{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { CheckboxProps, CheckboxStyleProps } from './checkbox.types'\n\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { checkboxColors, disabled } from './consts'\nimport { useCheckboxGroupContext } from './context'\n\nconst CheckboxControl = styled.spanBox`\n border-radius: none;\n display: inline-flex;\n flex-shrink: 0;\n position: relative;\n transition-duration: fast;\n`\n\nconst CheckboxInput = styled.input`\n cursor: inherit;\n height: 100%;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n`\n\nexport const CheckboxBase = styled.labelBox<CheckboxStyleProps>`\n cursor: pointer;\n display: inline-flex;\n width: fit-content;\n\n &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-checkboxControl {\n color: ${p => th.color(p.controlHoverColor)};\n }\n\n &[aria-readonly='true'] {\n cursor: auto;\n }\n\n &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-checkboxControl:focus-within {\n color: ${checkboxColors.focus};\n }\n\n &[aria-disabled='true'] {\n color: ${disabled.text};\n cursor: not-allowed;\n\n .vui-checkboxControl {\n color: ${disabled.icon};\n }\n }\n`\n\n/**\n * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.\n */\nexport const Checkbox = vui<'span', CheckboxProps>((props, ref) => {\n const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}\n\n const mergedProps = { ...checkboxGroupProps, ...props }\n const {\n checked,\n children,\n className,\n defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,\n disabled,\n readOnly,\n icon: iconProp = 'uiCheckboxUnselected',\n iconChecked = 'uiCheckboxSelected',\n iconIndeterminate = 'uiCheckboxIndeterminate',\n id,\n inputProps,\n inputRef,\n isIndeterminate,\n label,\n name,\n onChange: onChangeProp,\n required,\n value,\n ...rest\n } = omitThemingProps(mergedProps)\n const [isChecked, setIsChecked] = useState(defaultChecked)\n const styles = useStyleConfig('Checkbox', mergedProps)\n const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp\n const controlMr = children || label ? 1 : 0\n const color = isChecked || isIndeterminate ? (readOnly ? checkboxColors.readOnly : checkboxColors.checked) : controlColor\n const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover\n const isLongLabel = label && label?.length >= 60\n const hasJsxChildren = !!children\n // When JSX children are used, align control to top and offset it to visually center with the first text line.\n // Offset decreases as control size grows (sm=16px needs more, lg=24px needs none).\n const jsxChildrenMt: Record<string, string> = { sm: '3px', md: '2px', lg: '0px' }\n\n useEffect(() => {\n checked !== undefined && setIsChecked(checked)\n }, [checked])\n\n const onChange = (e: ChangeEvent) => {\n if (readOnly) return\n if (checked === undefined) setIsChecked(e.target.checked)\n onChangeProp?.(e)\n }\n\n const aliasedProps = filterUndefined({\n 'aria-disabled': disabled,\n 'aria-readonly': readOnly,\n })\n\n return (\n <CheckboxBase\n alignItems={isLongLabel || hasJsxChildren ? 'flex-start' : 'center'}\n className={cs('vui-checkbox', className)}\n controlHoverColor={controlHoverColor}\n ref={ref}\n {...styles.container}\n {...aliasedProps}\n {...rest}\n >\n <CheckboxControl\n bg=\"white\"\n className=\"vui-checkboxControl\"\n color={color}\n focusWithinRing={3}\n mr={controlMr}\n mt={hasJsxChildren ? (jsxChildrenMt[mergedProps.size ?? 'md'] ?? '2px') : undefined}\n role=\"none\"\n {...controlStyles}\n >\n <CheckboxInput\n className=\"vui-checkboxInput\"\n onChange={onChange}\n ref={inputRef}\n type=\"checkbox\"\n {...{ checked, defaultChecked, disabled, id, name, required, value }}\n {...inputProps}\n />\n <Icon className=\"vui-checkboxIcon\" h=\"100%\" name={icon} w=\"100%\" />\n </CheckboxControl>\n\n {children ??\n (label && (\n <T className=\"vui-checkboxLabel\" lineHeight={isLongLabel ? '26px' : 'normal'} {...styles.label}>\n {label}\n </T>\n ))}\n </CheckboxBase>\n )\n})\n\nCheckbox.displayName = 'Checkbox'\nexport default Checkbox\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,kBAAkB,OAAO,OAAO;;;;;;;AAQtC,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;;;AAalC,MAAa,eAAe,OAAO,QAA4B;;;;;;cAMlD,MAAK,GAAG,MAAM,EAAE,iBAAiB,EAAE;;;;;;;;aAQnC,eAAe,MAAM;;;;aAIrB,SAAS,KAAK;;;;eAIZ,SAAS,KAAK;;;;;;;;AAS7B,MAAa,WAAW,KAA4B,OAAO,QAAQ;CACjE,MAAM,EAAE,cAAc,mBAAmB,GAAG,uBAAuB,wBAAwB,KAAK,CAAC;CAEjG,MAAM,cAAc;EAAE,GAAG;EAAoB,GAAG;CAAM;CACtD,MAAM,EACJ,SACA,UACA,WACA,iBAAiB,sBAAsB,SAAY,kBAAkB,SAAS,MAAM,KAAK,IAAI,QAC7F,UACA,UACA,MAAM,WAAW,wBACjB,cAAc,sBACd,oBAAoB,2BACpB,IACA,YACA,UACA,iBACA,OACA,MACA,UAAU,cACV,UACA,OACA,GAAG,SACD,iBAAiB,WAAW;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc;CACzD,MAAM,SAAS,eAAe,YAAY,WAAW;CACrD,MAAM,EAAE,OAAO,cAAc,YAAY,GAAG,kBAAkB,OAAO;CAErE,MAAM,OAAO,kBAAkB,oBAAoB,YAAY,cAAc;CAC7E,MAAM,YAAY,YAAY,QAAQ,IAAI;CAC1C,MAAM,QAAQ,aAAa,kBAAmB,WAAW,eAAe,WAAW,eAAe,UAAW;CAC7G,MAAM,oBAAoB,aAAa,aAAa,eAAe;CACnE,MAAM,cAAc,SAAS,OAAO,UAAU;CAC9C,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,gBAAwC;EAAE,IAAI;EAAO,IAAI;EAAO,IAAI;CAAM;CAEhF,gBAAgB;EACd,YAAY,UAAa,aAAa,OAAO;CAC/C,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,YAAY,MAAmB;EACnC,IAAI,UAAU;EACd,IAAI,YAAY,QAAW,aAAa,EAAE,OAAO,OAAO;EACxD,eAAe,CAAC;CAClB;CAEA,MAAM,eAAe,gBAAgB;EACnC,iBAAiB;EACjB,iBAAiB;CACnB,CAAC;CAED,OACE,qBAAC,cAAD;EACE,YAAY,eAAe,iBAAiB,eAAe;EAC3D,WAAW,GAAG,gBAAgB,SAAS;EACpB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAPN,CASE,qBAAC,iBAAD;GACE,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,IAAI,iBAAkB,cAAc,YAAY,QAAQ,SAAS,QAAS;GAC1E,MAAK;GACL,GAAI;aARN,CAUE,oBAAC,eAAD;IACE,WAAU;IACA;IACV,KAAK;IACL,MAAK;IACC;IAAS;IAAgB;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;GACL,IACD,oBAAC,MAAD;IAAM,WAAU;IAAmB,GAAE;IAAO,MAAM;IAAM,GAAE;GAAQ,EACnD;MAEhB,aACE,SACC,oBAAC,GAAD;GAAG,WAAU;GAAoB,YAAY,cAAc,SAAS;GAAU,GAAI,OAAO;aACtF;EACA,GAEK;;AAElB,CAAC;AAED,SAAS,cAAc"}
|
package/dist/checkbox/consts.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.js","names":[],"sources":["../../src/checkbox/consts.ts"],"sourcesContent":["export const checkboxColors = {\n unchecked: 'sandstone.60',\n checked: 'seaBlue.28',\n hover: 'seaBlue.20',\n focus: 'seaBlue.35',\n} as const\n\nexport const disabled = {\n icon: 'sandstone.79',\n text: 'sandstone.60',\n} as const\n"],"mappings":";AAAA,MAAa,iBAAiB;CAC5B,WAAW;CACX,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,WAAW;CACtB,MAAM;CACN,MAAM;AACR"}
|
|
1
|
+
{"version":3,"file":"consts.js","names":[],"sources":["../../src/checkbox/consts.ts"],"sourcesContent":["export const checkboxColors = {\n readOnly: 'sandstone.30',\n unchecked: 'sandstone.60',\n checked: 'seaBlue.28',\n hover: 'seaBlue.20',\n focus: 'seaBlue.35',\n} as const\n\nexport const disabled = {\n icon: 'sandstone.79',\n text: 'sandstone.60',\n} as const\n"],"mappings":";AAAA,MAAa,iBAAiB;CAC5B,UAAU;CACV,WAAW;CACX,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,WAAW;CACtB,MAAM;CACN,MAAM;AACR"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veracity/vui",
|
|
3
|
-
"version": "5.2.3
|
|
3
|
+
"version": "5.2.3",
|
|
4
4
|
"description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"tanstack-intent"
|