@sats-group/ui-lib 88.1.0 → 88.2.0
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.
- package/package.json +1 -1
- package/react/checkbox/checkbox.d.ts +1 -0
- package/react/checkbox/checkbox.js +1 -1
- package/react/checkbox/checkbox.js.map +3 -3
- package/react/checkbox/checkbox.types.d.ts +1 -0
- package/react/checkbox/checkbox.types.js +1 -1
- package/react/checkbox/checkbox.types.js.map +1 -1
- package/react/toggle/toggle.scss +1 -1
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var
|
|
1
|
+
"use client";var M=Object.defineProperty;var b=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(c,o,i)=>o in c?M(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i,u=(c,o)=>{for(var i in o||(o={}))f.call(o,i)&&t(c,i,o[i]);if(b)for(var i of b(o))p.call(o,i)&&t(c,i,o[i]);return c};var g=(c,o)=>{var i={};for(var s in c)f.call(c,s)&&o.indexOf(s)<0&&(i[s]=c[s]);if(c!=null&&b)for(var s of b(c))o.indexOf(s)<0&&p.call(c,s)&&(i[s]=c[s]);return i};import l from"classnames";import*as e from"react";import W from"../use-input-validation";import h from"../text";import{themes as j}from"./checkbox.types";const N=e.forwardRef((H,z)=>{var m=H,{children:c,disabled:o,description:i,extra:s,intermediate:k,isLabelBold:w=!1,isLabelVisible:d=!0,label:x,name:C,showCustomError:$=!0,theme:n,value:y="",required:v,hasHover:I=!1,isWide:L=!0}=m,a=g(m,["children","disabled","description","extra","intermediate","isLabelBold","isLabelVisible","label","name","showCustomError","theme","value","required","hasHover","isWide"]);const[T,B,r]=W();return e.createElement("div",{className:l("checkbox",{"checkbox--error":r,"checkbox--intermediate":k,"checkbox--wide":L,[`checkbox--${n}`]:n})},e.createElement("label",{className:l("checkbox__content",{"checkbox__content--hover":I,[`checkbox__content--${n}`]:n})},e.createElement("div",{className:"checkbox__main"},e.createElement("div",{className:"checkbox__main-top"},e.createElement("div",null,e.createElement("input",u({"aria-label":d?void 0:x,className:"checkbox__input",type:"checkbox",name:C,onChange:_=>{a.onChange&&a.onChange(_),T(_)},onInvalid:_=>{a.onInvalid&&a.onInvalid(_),B(_)},ref:z,value:y,disabled:o,required:v},a)),e.createElement("div",{className:l("checkbox__icon",{"checkbox__icon--intermediate":k,[`checkbox__icon--${n}`]:n})},e.createElement("svg",{className:"checkbox__intermediate",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("line",{x1:"0",y1:"5",x2:"10",y2:"5",stroke:"currentColor",strokeWidth:"2"})),e.createElement("svg",{className:"checkbox__check",width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z",fill:"currentColor"})))),d?e.createElement(e.Fragment,null,x?e.createElement(h,{className:l("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.basic,theme:w?h.themes.emphasis:void 0},x):e.createElement("div",{className:l("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o})},c)):null,v?e.createElement("span",{className:"checkbox__asterisk"},"*"):null),i&&e.createElement(h,{className:l("checkbox__description",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.small},i))),r&&$&&e.createElement("div",{"aria-hidden":"true",className:l("checkbox__error",{[`checkbox__error--${n}`]:n})},r),s&&e.createElement("span",{className:"checkbox__extra"},s))});N.displayName="Checkbox";const E=Object.assign(N,{themes:j});var G=E;export{G as default};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/checkbox/checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n HTMLInputElement,\n React.PropsWithChildren<Props>\n>(\n (\n {\n children,\n disabled,\n description,\n extra,\n intermediate,\n isLabelVisible = true,\n label,\n name,\n showCustomError = true,\n theme,\n value = '',\n required,\n hasHover = false,\n isWide = true,\n ...restProps\n },\n ref,\n ) => {\n const [onChange, onInvalid, error] = useInputValidation();\n\n return (\n <div\n className={cn('checkbox', {\n 'checkbox--error': error,\n 'checkbox--intermediate': intermediate,\n 'checkbox--wide': isWide,\n [`checkbox--${theme}`]: theme,\n })}\n >\n <label\n className={cn('checkbox__content', {\n 'checkbox__content--hover': hasHover,\n [`checkbox__content--${theme}`]: theme,\n })}\n >\n <div className=\"checkbox__main\">\n <div className=\"checkbox__main-top\">\n <div>\n <input\n aria-label={isLabelVisible ? undefined : label}\n className=\"checkbox__input\"\n type=\"checkbox\"\n name={name}\n onChange={e => {\n // NOTE: If props specify an `onChange`, we need to call that too\n if (restProps.onChange) restProps.onChange(e);\n onChange(e);\n }}\n onInvalid={e => {\n // NOTE: If props specify an `onInvalid`, we need to call that too\n if (restProps.onInvalid) restProps.onInvalid(e);\n onInvalid(e);\n }}\n ref={ref}\n value={value}\n disabled={disabled}\n required={required}\n {...restProps}\n />\n\n <div\n className={cn('checkbox__icon', {\n 'checkbox__icon--intermediate': intermediate,\n [`checkbox__icon--${theme}`]: theme,\n })}\n >\n <svg\n className=\"checkbox__intermediate\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n x1=\"0\"\n y1=\"5\"\n x2=\"10\"\n y2=\"5\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </svg>\n <svg\n className=\"checkbox__check\"\n width=\"12\"\n height=\"10\"\n viewBox=\"0 0 12 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n {isLabelVisible ? (\n <>\n {label ? (\n <Text\n className={cn('checkbox__label', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n size={Text.sizes.basic}\n >\n {label}\n </Text>\n ) : (\n <div\n className={cn('checkbox__label', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n >\n {children}\n </div>\n )}\n </>\n ) : null}\n {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n </div>\n {description && (\n <Text\n className={cn('checkbox__description', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n size={Text.sizes.small}\n >\n {description}\n </Text>\n )}\n </div>\n </label>\n\n {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n {error && showCustomError && (\n <div\n aria-hidden=\"true\"\n className={cn('checkbox__error', {\n [`checkbox__error--${theme}`]: theme,\n })}\n >\n {error}\n </div>\n )}\n\n {extra && <span className=\"checkbox__extra\">{extra}</span>}\n </div>\n );\n },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
|
|
5
|
-
"mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAA4B,UAAAC,MAAc,mBAE1C,MAAMC,EAAcJ,EAAM,WAIxB,CACEK,
|
|
6
|
-
"names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "isLabelVisible", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n HTMLInputElement,\n React.PropsWithChildren<Props>\n>(\n (\n {\n children,\n disabled,\n description,\n extra,\n intermediate,\n isLabelBold = false,\n isLabelVisible = true,\n label,\n name,\n showCustomError = true,\n theme,\n value = '',\n required,\n hasHover = false,\n isWide = true,\n ...restProps\n },\n ref,\n ) => {\n const [onChange, onInvalid, error] = useInputValidation();\n\n return (\n <div\n className={cn('checkbox', {\n 'checkbox--error': error,\n 'checkbox--intermediate': intermediate,\n 'checkbox--wide': isWide,\n [`checkbox--${theme}`]: theme,\n })}\n >\n <label\n className={cn('checkbox__content', {\n 'checkbox__content--hover': hasHover,\n [`checkbox__content--${theme}`]: theme,\n })}\n >\n <div className=\"checkbox__main\">\n <div className=\"checkbox__main-top\">\n <div>\n <input\n aria-label={isLabelVisible ? undefined : label}\n className=\"checkbox__input\"\n type=\"checkbox\"\n name={name}\n onChange={e => {\n // NOTE: If props specify an `onChange`, we need to call that too\n if (restProps.onChange) restProps.onChange(e);\n onChange(e);\n }}\n onInvalid={e => {\n // NOTE: If props specify an `onInvalid`, we need to call that too\n if (restProps.onInvalid) restProps.onInvalid(e);\n onInvalid(e);\n }}\n ref={ref}\n value={value}\n disabled={disabled}\n required={required}\n {...restProps}\n />\n\n <div\n className={cn('checkbox__icon', {\n 'checkbox__icon--intermediate': intermediate,\n [`checkbox__icon--${theme}`]: theme,\n })}\n >\n <svg\n className=\"checkbox__intermediate\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n x1=\"0\"\n y1=\"5\"\n x2=\"10\"\n y2=\"5\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </svg>\n <svg\n className=\"checkbox__check\"\n width=\"12\"\n height=\"10\"\n viewBox=\"0 0 12 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n {isLabelVisible ? (\n <>\n {label ? (\n <Text\n className={cn('checkbox__label', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n size={Text.sizes.basic}\n theme={isLabelBold ? Text.themes.emphasis : undefined}\n >\n {label}\n </Text>\n ) : (\n <div\n className={cn('checkbox__label', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n >\n {children}\n </div>\n )}\n </>\n ) : null}\n {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n </div>\n {description && (\n <Text\n className={cn('checkbox__description', {\n [`checkbox__label--${theme}`]: theme,\n 'checkbox__label--disabled': disabled,\n })}\n size={Text.sizes.small}\n >\n {description}\n </Text>\n )}\n </div>\n </label>\n\n {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n {error && showCustomError && (\n <div\n aria-hidden=\"true\"\n className={cn('checkbox__error', {\n [`checkbox__error--${theme}`]: theme,\n })}\n >\n {error}\n </div>\n )}\n\n {extra && <span className=\"checkbox__extra\">{extra}</span>}\n </div>\n );\n },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "isLabelBold", "isLabelVisible", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const l={light:"light",blue:"blue"};export{l as themes};
|
|
2
2
|
//# sourceMappingURL=checkbox.types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/checkbox/checkbox.types.ts"],
|
|
4
|
-
"sourcesContent": ["import { ObjectValues, InputHtmlProps } from '../types';\n\nexport const themes = {\n light: 'light',\n blue: 'blue',\n} as const;\n\nexport type Checkbox = Omit<InputHtmlProps, 'value'> & {\n intermediate?: boolean;\n description?: string;\n extra?: React.ReactNode;\n isLabelVisible?: boolean;\n label?: string;\n name: string;\n value: string;\n showCustomError?: boolean;\n theme?: ObjectValues<typeof themes>;\n hasHover?: boolean;\n isWide?: boolean;\n};\n"],
|
|
4
|
+
"sourcesContent": ["import { ObjectValues, InputHtmlProps } from '../types';\n\nexport const themes = {\n light: 'light',\n blue: 'blue',\n} as const;\n\nexport type Checkbox = Omit<InputHtmlProps, 'value'> & {\n intermediate?: boolean;\n description?: string;\n extra?: React.ReactNode;\n isLabelBold?: boolean;\n isLabelVisible?: boolean;\n label?: string;\n name: string;\n value: string;\n showCustomError?: boolean;\n theme?: ObjectValues<typeof themes>;\n hasHover?: boolean;\n isWide?: boolean;\n};\n"],
|
|
5
5
|
"mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR",
|
|
6
6
|
"names": ["themes"]
|
|
7
7
|
}
|