cloudmr-ux 0.0.3 → 1.0.0

package/dist/index.css

@@ -1,16 +1,142 @@
+/* src/CmrComponents/CmrButton/CmrButton.css */
+.cmr-button {
+  background-color: #580F8B !important;
+  color: white !important;
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important;
+  padding-right: 0.75rem !important;
+  padding-left: 0.75rem !important;
+  border: 2px solid #580F8B !important;
+  border-radius: 4px !important;
+  text-align: center !important;
+  font-family: "Source Sans 3", sans-serif !important;
+  font-size: 14.4px !important;
+  line-height: 1.5 !important;
+  font-weight: 400 !important;
+}
+.cmr-button:hover {
+  background-color: #390063 !important;
+}
+.cmr-button.outlined {
+  background-color: transparent !important;
+  border: 2px solid #580F8B !important;
+  color: #580F8B !important;
+}
+.cmr-button.outlined:hover {
+  background-color: #580F8B !important;
+  color: white !important;
+}
+.cmr-button.Mui-disabled {
+  background-color: #ced4da !important;
+  color: #999 !important;
+  border: 2px solid #ced4da !important;
+  cursor: not-allowed !important;
+}
+.cmr-button.Mui-disabled:hover {
+  background-color: #ced4da !important;
+  color: #999 !important;
+}
+
+/* src/CmrComponents/CmrCheckbox/CmrCheckbox.css */
+.cmr-label {
+  font-size: 14.4px;
+}
+.cmr-checkbox {
+  font-family: "Source Sans 3", sans-serif !important;
+  font-size: 1rem !important;
+  line-height: 1.5 !important;
+  font-weight: 400 !important;
+}
+.MuiCheckbox-root {
+  color: #ced4da !important;
+  background-color: transparent !important;
+}
+.Mui-checked {
+  color: #580F8B !important;
+}
+.MuiCheckbox-root:active,
+.MuiCheckbox-root:focus {
+  background-color: transparent !important;
+}
+.MuiCheckbox-root.Mui-focusVisible:hover,
+.MuiCheckbox-root:hover {
+  background-color: transparent !important;
+}
 
+/* src/CmrComponents/CmrInput/CmrInput.css */
+.cmr-input {
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+.cmr-input:focus {
+  border-color: #580f8b !important;
+  box-shadow: 0 0 0 0.2rem rgba(88, 15, 139, 0.25) !important;
+}
+.cmr-input:hover {
+  border-color: #ced4da !important;
+}
+.cmr-input:focus:not(:placeholder-shown) {
+  border-color: #580f8b !important;
+  box-shadow: 0 0 0 0.2rem rgba(130, 39, 194, 0.25) !important;
+}
 
-._3RkVB {
-  margin-bottom: 4px;
-}
-._2hbQU {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 15px;
-  text-align: justify;
-  color: #707683;
-}
-._3vu54 {
-  margin-bottom: 4px;
-}
+/* src/CmrComponents/CmrRadioGroup/CmrRadioGroup.css */
+.MuiRadio-root {
+  color: #ced4da !important;
+}
+.Mui-checked {
+  color: #580F8B !important;
+}
+.cmr-label {
+  font-size: 14.4px;
+  font-family: "Source Sans 3", sans-serif;
+}
+.MuiRadio-root.Mui-focusVisible {
+  box-shadow: none !important;
+}
+.MuiRadio-root:hover {
+  background-color: transparent !important;
+}
+
+/* src/CmrComponents/CmrSelect/CmrSelect.css */
+.dropdown-select .MuiInputLabel-root {
+  font-size: 14.4px !important;
+}
+.dropdown-select .MuiInputLabel-root.Mui-focused {
+  font-size: 14.4px !important;
+}
+.dropdown-select .MuiSelect-select {
+  font-size: 14.4px !important;
+}
+.dropdown-select .MuiSelect-select:focus {
+  font-size: 14.4px !important;
+}
+.custom-dropdown .MuiMenuItem-root {
+  font-size: 14.4px !important;
+}
+.dropdown-select .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
+  border-color: #ced4da !important;
+}
+.dropdown-select .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+  border-color: #ced4da !important;
+}
+.dropdown-select .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #ced4da !important;
+}
+.dropdown-label.Mui-focused {
+  color: #580f8b !important;
+}
+.custom-dropdown .MuiMenuItem-root:hover {
+  background-color: #e6d5f3 !important;
+}
+.custom-dropdown .MuiMenuItem-root.Mui-selected {
+  background-color: #e7d4f5 !important;
+}
+.custom-dropdown .MuiMenuItem-root.Mui-selected:hover {
+  background-color: #dcbfea !important;
+}

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@mui/material';
+import React, { ChangeEvent } from 'react';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
+
+declare const CmrButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+    autoFocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    children?: any;
+    style?: any;
+}
+declare const CmrCheckbox: (props: CmrCheckboxProps) => react_jsx_runtime.JSX.Element;
+
+interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    defaultValue?: string;
+    id?: string;
+    maxLength?: number;
+    size?: SizeType;
+    value?: string;
+    type?: any;
+    prefix?: React.ReactNode;
+    bordered?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+declare const CmrInput: (props: CmrInputProps) => react_jsx_runtime.JSX.Element;
+
+interface CmrRadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface CmrRadioProps {
+    options: CmrRadioOption[];
+    groupLabel?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+declare const CmrRadioGroup: React.FC<CmrRadioProps>;
+
+interface Option {
+    label: string;
+    value: string;
+}
+interface CmrSelectProps {
+    options: Option[];
+    label: string;
+    disabled?: boolean;
+}
+declare const CmrSelect: React.FC<CmrSelectProps>;
+
+export { CmrButton, CmrCheckbox, CmrInput, CmrRadioGroup, CmrSelect };

package/dist/index.db9ed22c.css

@@ -0,0 +1,171 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Source Sans 3", sans-serif;
+}
+
+main {
+  padding: 35px 45px 45px;
+}
+
+nav {
+  background-color: #580f8b;
+  align-items: center;
+  padding: 30px;
+  display: flex;
+}
+
+nav .logo img {
+  height: 40px;
+}
+
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+}
+
+nav ul li {
+  margin: 0 15px;
+}
+
+nav ul li a {
+  color: #fff;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+nav ul li a:hover {
+  text-decoration: none;
+}
+
+.cmr-button {
+  color: #fff !important;
+  text-align: center !important;
+  background-color: #580f8b !important;
+  border: 2px solid #580f8b !important;
+  border-radius: 4px !important;
+  padding: .375rem .75rem !important;
+  font-family: "Source Sans 3", sans-serif !important;
+  font-size: 14.4px !important;
+  font-weight: 400 !important;
+  line-height: 1.5 !important;
+}
+
+.cmr-button:hover {
+  background-color: #390063 !important;
+}
+
+.cmr-button.outlined {
+  color: #580f8b !important;
+  background-color: #0000 !important;
+  border: 2px solid #580f8b !important;
+}
+
+.cmr-button.outlined:hover {
+  color: #fff !important;
+  background-color: #580f8b !important;
+}
+
+.cmr-button.Mui-disabled {
+  color: #999 !important;
+  cursor: not-allowed !important;
+  background-color: #ced4da !important;
+  border: 2px solid #ced4da !important;
+}
+
+.cmr-button.Mui-disabled:hover {
+  color: #999 !important;
+  background-color: #ced4da !important;
+}
+
+.cmr-input {
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.cmr-input:focus {
+  border-color: #580f8b !important;
+  box-shadow: 0 0 0 .2rem #580f8b40 !important;
+}
+
+.cmr-input:hover {
+  border-color: #ced4da !important;
+}
+
+.cmr-input:focus:not(:placeholder-shown) {
+  border-color: #580f8b !important;
+  box-shadow: 0 0 0 .2rem #8227c240 !important;
+}
+
+.cmr-label {
+  font-size: 14.4px;
+}
+
+.cmr-checkbox {
+  font-family: "Source Sans 3", sans-serif !important;
+  font-size: 1rem !important;
+  font-weight: 400 !important;
+  line-height: 1.5 !important;
+}
+
+.MuiCheckbox-root {
+  color: #ced4da !important;
+  background-color: #0000 !important;
+}
+
+.MuiCheckbox-root:active, .MuiCheckbox-root:focus, .MuiCheckbox-root.Mui-focusVisible:hover, .MuiCheckbox-root:hover {
+  background-color: #0000 !important;
+}
+
+.MuiRadio-root {
+  color: #ced4da !important;
+}
+
+.Mui-checked {
+  color: #580f8b !important;
+}
+
+.cmr-label {
+  font-family: "Source Sans 3", sans-serif;
+  font-size: 14.4px;
+}
+
+.MuiRadio-root.Mui-focusVisible {
+  box-shadow: none !important;
+}
+
+.MuiRadio-root:hover {
+  background-color: #0000 !important;
+}
+
+.dropdown-select .MuiInputLabel-root, .dropdown-select .MuiInputLabel-root.Mui-focused, .dropdown-select .MuiSelect-select, .dropdown-select .MuiSelect-select:focus, .custom-dropdown .MuiMenuItem-root {
+  font-size: 14.4px !important;
+}
+
+.dropdown-select .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline, .dropdown-select .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline, .dropdown-select .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #ced4da !important;
+}
+
+.dropdown-label.Mui-focused {
+  color: #580f8b !important;
+}
+
+.custom-dropdown .MuiMenuItem-root:hover {
+  background-color: #e6d5f3 !important;
+}
+
+.custom-dropdown .MuiMenuItem-root.Mui-selected {
+  background-color: #e7d4f5 !important;
+}
+
+.custom-dropdown .MuiMenuItem-root.Mui-selected:hover {
+  background-color: #dcbfea !important;
+}
+/*# sourceMappingURL=index.db9ed22c.css.map */

package/dist/index.db9ed22c.css.map

@@ -0,0 +1 @@
+{"mappings":"ACAA;;;;;;AAMA;;;;AAQA;;;;;;;AAOA;;;;AAMA;;;;;;;AAOA;;;;AAIA;;;;;;AAMA;;;;AC5CA;;;;;;;;;;;;;AAgBA;;;;AAKA;;;;;;AAMA;;;;;AAMA;;;;;;;AAOA;;;;;ACvCA;;;;;;;;;;AAWA;;;;;AAMA;;;;AAKA;;;;;ACvBA;;;;AAGA;;;;;;;AAQA;;;;;AASA;;;;ACnBA;;;;AAKA;;;;AAKA;;;;;AAMA;;;;AAKA;;;;ACrBA;;;;AAyBA;;;;AAgBA;;;;AAMA;;;;AAKE;;;;AAKA","sources":["da6ad1d8db9ed22c","src/style.css","src/CmrComponents/CmrButton/CmrButton.css","src/CmrComponents/CmrInput/CmrInput.css","src/CmrComponents/CmrCheckbox/CmrCheckbox.css","src/CmrComponents/CmrRadioGroup/CmrRadioGroup.css","src/CmrComponents/CmrSelect/CmrSelect.css"],"sourcesContent":["@import \"837472a3daf50f62\";\n@import \"5f8f1530f7ad9cec\";\n@import \"b83f55e7d8f20284\";\n@import \"7cdc9d01088afd42\";\n@import \"eeee2edc2f78761b\";\n@import \"ca0185505c9aa616\";\n","body {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-family: \"Source Sans 3\", sans-serif;\r\n}\r\n\r\nmain {\r\n    padding-top: 35px;\r\n    padding-bottom: 45px;\r\n    padding-left: 45px;\r\n    padding-right: 45px;\r\n}\r\n\r\n/* Navigation bar styling */\r\nnav {\r\n    display: flex;\r\n    align-items: center;\r\n    background-color: #580f8b;\r\n    padding: 30px;\r\n}\r\n\r\nnav .logo img {\r\n    height: 40px;\r\n    /* Adjust the size as needed */\r\n}\r\n\r\n\r\nnav ul {\r\n    list-style-type: none;\r\n    display: flex;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nnav ul li {\r\n    margin: 0 15px;\r\n}\r\n\r\nnav ul li a {\r\n    color: white;\r\n    text-decoration: none;\r\n    font-size: 16px;\r\n}\r\n\r\nnav ul li a:hover {\r\n    text-decoration: none;\r\n}",".cmr-button {\r\n    background-color: #580F8B !important;\r\n    color: white !important;\r\n    padding-top: 0.375rem !important;\r\n    padding-bottom: 0.375rem !important;\r\n    padding-right: 0.75rem !important;\r\n    padding-left: 0.75rem !important;\r\n    border: 2px solid #580F8B !important;\r\n    border-radius: 4px !important;\r\n    text-align: center !important;\r\n    font-family: \"Source Sans 3\", sans-serif !important;\r\n    font-size: 14.4px !important;\r\n    line-height: 1.5 !important;\r\n    font-weight: 400 !important;\r\n}\r\n\r\n.cmr-button:hover {\r\n    background-color: #390063 !important;\r\n}\r\n\r\n/* Outline variant styles */\r\n.cmr-button.outlined {\r\n    background-color: transparent !important;\r\n    border: 2px solid #580F8B !important;\r\n    color: #580F8B !important;\r\n}\r\n\r\n.cmr-button.outlined:hover {\r\n    background-color: #580F8B !important;\r\n    color: white !important;\r\n}\r\n\r\n/* Disabled variant styles */\r\n.cmr-button.Mui-disabled {\r\n    background-color: #ced4da !important;  /* Change background color for disabled state */\r\n    color: #999 !important;  /* Change text color for disabled state */\r\n    border: 2px solid #ced4da !important;  /* Change border color for disabled state */\r\n    cursor: not-allowed !important;  /* Change cursor to indicate the button is disabled */\r\n}\r\n\r\n.cmr-button.Mui-disabled:hover {\r\n    background-color: #ced4da !important;  /* Keep the same background color on hover for disabled button */\r\n    color: #999 !important;  /* Keep the same text color on hover for disabled button */\r\n}","/* Base styles for the input */\r\n.cmr-input {\r\n  padding: 0.375rem 0.75rem;\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n  background-color: #fff;\r\n  background-clip: padding-box;\r\n  border: 1px solid #ced4da;\r\n  border-radius: 0.25rem;\r\n}\r\n\r\n/* Focused input styles (highlighted outline color) */\r\n.cmr-input:focus {\r\n  border-color: #580f8b !important; /* Custom outline color */\r\n  box-shadow: 0 0 0 0.2rem rgba(88, 15, 139, 0.25) !important; /* Glow effect */\r\n}\r\n\r\n/* Hover style for the input */\r\n.cmr-input:hover {\r\n  border-color: #ced4da !important;\r\n}\r\n\r\n/* Optional: style for when the input is focused and has a value (like Material UI) */\r\n.cmr-input:focus:not(:placeholder-shown) {\r\n  border-color: #580f8b !important; /* Same as focus style */\r\n  box-shadow: 0 0 0 0.2rem rgba(130, 39, 194, 0.25) !important; /* Same as focus style */\r\n}\r\n",".cmr-label{\r\n    font-size: 14.4px;\r\n}\r\n.cmr-checkbox {\r\n    font-family: \"Source Sans 3\", sans-serif !important;\r\n    font-size: 1rem !important;\r\n    line-height: 1.5 !important;\r\n    font-weight: 400 !important;\r\n}\r\n\r\n/* Custom styles for the Checkbox */\r\n.MuiCheckbox-root {\r\n    color: #ced4da !important;  /* Default color (unchecked) */\r\n    background-color: transparent !important; /* Ensure no background by default */\r\n}\r\n\r\n.Mui-checked {\r\n    color: #580F8B !important;  /* Checked state color */\r\n}\r\n\r\n.MuiCheckbox-root:active, .MuiCheckbox-root:focus {\r\n    background-color: transparent !important; /* Remove active state background */\r\n}\r\n\r\n/* Optional: Change color on hover or focus */\r\n.MuiCheckbox-root.Mui-focusVisible:hover,\r\n.MuiCheckbox-root:hover {\r\n    background-color: transparent !important;  \r\n}","/* Default radio button color */\r\n.MuiRadio-root {\r\n    color: #ced4da !important;  /* Default border color (unchecked) */\r\n}\r\n\r\n/* Checked state color */\r\n.Mui-checked {\r\n    color: #580F8B !important;  /* Border color when checked */\r\n}\r\n\r\n/* Optional: Set the color of the label text */\r\n.cmr-label {\r\n    font-size: 14.4px;\r\n    font-family: \"Source Sans 3\", sans-serif;\r\n}\r\n\r\n/* Remove the circular shadow on hover/focus */\r\n.MuiRadio-root.Mui-focusVisible {\r\n    box-shadow: none !important;  /* Remove the shadow */\r\n}\r\n\r\n/* Custom style for the radio button on hover */\r\n.MuiRadio-root:hover {\r\n    background-color: transparent !important;  /* Remove hover background */\r\n}","/* Adjust font size for dropdown label when no option is selected */\r\n.dropdown-select .MuiInputLabel-root {\r\n    font-size: 14.4px !important; /* Ensure the label font size is applied */\r\n}\r\n\r\n/* Adjust font size for dropdown label when focused */\r\n.dropdown-select .MuiInputLabel-root.Mui-focused {\r\n    font-size: 14.4px !important;\r\n}\r\n\r\n/* Adjust font size for the selected option (dropdown value) */\r\n.dropdown-select .MuiSelect-select {\r\n    font-size: 14.4px !important; /* Ensure selected option text has the correct font size */\r\n}\r\n\r\n/* Adjust font size for the selected option when focused */\r\n.dropdown-select .MuiSelect-select:focus {\r\n    font-size: 14.4px !important;\r\n}\r\n\r\n/* Style for the dropdown options (MenuItem) */\r\n.custom-dropdown .MuiMenuItem-root {\r\n    font-size: 14.4px !important; /* Set font size for dropdown options */\r\n}\r\n\r\n/* More specific targeting for MUI's outlined input */\r\n.dropdown-select .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {\r\n    border-color: #ced4da !important;\r\n    /* Default border color */\r\n}\r\n\r\n/* Hover state */\r\n.dropdown-select .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\r\n    border-color: #ced4da !important;\r\n}\r\n\r\n/* Focused state */\r\n.dropdown-select .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\r\n    border-color: #ced4da !important;\r\n}\r\n\r\n/* Style for the dropdown label */\r\n.dropdown-label.Mui-focused {\r\n    color: #580f8b !important;\r\n    /* Color when focused */\r\n}\r\n\r\n/* Highlighted (hover) state */\r\n.custom-dropdown .MuiMenuItem-root:hover {\r\n    background-color: #e6d5f3 !important; /* A lighter purple for hover */\r\n  }\r\n  \r\n  /* Selected state */\r\n  .custom-dropdown .MuiMenuItem-root.Mui-selected {\r\n    background-color: #e7d4f5 !important; /* The purple color for selected state */\r\n  }\r\n  \r\n  /* Selected state when hovered */\r\n  .custom-dropdown .MuiMenuItem-root.Mui-selected:hover {\r\n    background-color: #dcbfea !important; /* A slightly darker purple when selected and hovered */\r\n  }\r\n  "],"names":[],"version":3,"file":"index.db9ed22c.css.map","sourceRoot":"/__parcel_source_root/"}

package/dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><link rel="stylesheet" href="/index.db9ed22c.css">
+  <!-- <link rel="manifest" href="./manifest.webmanifest"> -->
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CloudMR UX Components Page</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="/index.975ef6c8.js" defer=""></script>
+</body>
+</html>