@lifesg/react-design-system 1.0.0-alpha.1 → 1.0.0-alpha.3

package/README.md

@@ -66,3 +66,5 @@ import { Button } from "@lifesg/react-design-system/button";
 // Less ideal manner
 import { Button } from "@lifesg/react-design-system";
 ```
+
+To see the full suite of components available, visit our [Storybook documentation](https://designsystem.life.gov.sg/react/index.html?path=/story/getting-started-installation--page).

package/{dist/cjs → cjs}/index.js

@@ -941,7 +941,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     &:not(:last-child) {
         margin-bottom: 1rem;
     }
-`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxRuntime.jsxs(Container$7,{children:[e&&("string"==typeof e?jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}):jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e})),i,t&&jsxRuntime.jsx(ErrorMessage,{weight:"semibold","data-testid":n||(r?`${r}-error-message`:"error-message"),children:t})]}),FormDateInput=({label:e,errorMessage:t,id:r="form-date-input","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsxRuntime.jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled__default.default.input`
+`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxRuntime.jsxs(Container$7,{children:[e&&("string"==typeof e?jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}):jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e})),i,t&&jsxRuntime.jsx(ErrorMessage,{weight:"semibold","data-testid":n||(r?`${r}-error-message`:"error-message"),children:t})]}),FormCustomField=({id:e="form-custom-field","data-error-testid":t,children:r,...a})=>jsxRuntime.jsx(FormWrapper,{id:e,"data-error-testid":t,...a,children:r}),FormDateInput=({label:e,errorMessage:t,id:r="form-date-input","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsxRuntime.jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled__default.default.input`
     ${TextStyleHelper.getTextStyle("Body","regular")}
     border: 1px solid ${Color.Neutral[5]};
     border-radius: 4px;
@@ -1704,7 +1704,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
                 border: 1px solid ${Color.Accent.Light[1]};
                 box-shadow: inset 0 0 5px 1px rgba(87, 169, 255, 0.5);
             `:void 0}
-`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...d})=>{const[p,c]=React.useState(!1),u=React.useRef();React.useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[p]);const m=React.useCallback((()=>{t||p||c(!0)}),[p]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&p&&(c(!1),l&&l())},v=React.useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxRuntime.jsxs(Wrapper,{ref:u,id:e,...d,children:[jsxRuntime.jsx(InputSelectorElement,{onFocus:m,focused:p,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsxRuntime.jsx(TimepickerDropdown,{id:e,show:p,value:a||i,format:s,onCancel:()=>{c(!1),h&&h()},onChange:e=>{c(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children:jsxRuntime.jsx(Timepicker,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker},Container$1=styled__default.default.div`
+`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...d})=>{const[p,c]=React.useState(!1),u=React.useRef();React.useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[p]);const m=React.useCallback((()=>{t||p||c(!0)}),[p]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&p&&(c(!1),l&&l())},v=React.useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxRuntime.jsxs(Wrapper,{ref:u,id:e,...d,children:[jsxRuntime.jsx(InputSelectorElement,{onFocus:m,focused:p,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsxRuntime.jsx(TimepickerDropdown,{id:e,show:p,value:a||i,format:s,onCancel:()=>{c(!1),h&&h()},onChange:e=>{c(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children:jsxRuntime.jsx(Timepicker,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker,CustomField:FormCustomField},Container$1=styled__default.default.div`
     border-top: 1px solid ${Color.Neutral[5]};
     border-bottom: 1px solid ${Color.Neutral[5]};
 `,ItemTitleDefault=styled__default.default(exports.Text.H3)`