@sikka/hawa 0.0.215 → 0.0.217

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.215",
+  "version": "0.0.217",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaSelect.tsx

@@ -23,7 +23,7 @@ const Control: React.FunctionComponent<ControlTypes> = ({
 }) => {
   let sizeStyles = {
     small: "h-7 text-xs",
-    normal: "h-10  text-sm",
+    normal: "h-[2.33rem]  text-sm",
     large: "",
   }
   return (
@@ -109,6 +109,7 @@ type SelectTypes = {
   value?: any
   children?: any
   getOptionLabel?: any
+  disabled?: boolean
 }
 export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
@@ -120,6 +121,7 @@ export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
       )}
       {!props.isCreatable && (
         <Select
+          isDisabled={props.disabled}
           options={props.options}
           isClearable={props.isClearable}
           isMulti={props.isMulti}

package/src/elements/HawaSettingsRow.tsx

@@ -8,6 +8,7 @@ import { HawaRadio } from "./HawaRadio"
 type SettingsRowTypes = {
   settingsLabel: string
   settingsType: "text" | "radio" | "boolean" | "color" | "range"
+  settingsDescription?: string
   radioProps: {
     defaultValue: any
     onChangeTab: any
@@ -26,6 +27,7 @@ type SettingsRowTypes = {
 export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
   settingsLabel,
   settingsType,
+  settingsDescription,
   colorProps,
   rangeProps,
   radioProps,
@@ -34,7 +36,9 @@ export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
     <div className="my-0.5  flex h-20 max-h-fit flex-row items-center justify-between rounded bg-white p-6 align-middle">
       <div>
         <div>{settingsLabel}</div>
-        <div className="text-sm">Text here like a description</div>
+        {settingsDescription && (
+          <div className="text-sm">{settingsDescription}</div>
+        )}{" "}
       </div>
       {settingsType === "text" && <HawaTextField margin="none" width="small" />}
       {settingsType === "boolean" && <HawaSwitch size="large" />}

package/src/elements/HawaTextField.tsx

@@ -20,11 +20,13 @@ type TextFieldTypes = {
   onChange?: any
   ref?: any
   icon?: any
+  preview?: boolean
 }
 
 export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
   margin = "normal",
   width = "full",
+  preview = false,
   ...props
 }) => {
   let marginStyles = {
@@ -33,14 +35,16 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
     large: "mb-5",
   }
   let widthStyles = {
-    small: "",
-    normal: "",
+    small: "w-full max-w-xs",
+    normal: "w-1/2",
     full: "w-full",
   }
 
   let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
   let defaultInputStyle =
     "block w-full rounded border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+  let previewInputStyle =
+    "block w-full rounded border border-gray-300  p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
 
   return (
@@ -55,37 +59,72 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           {props.label}
         </label>
       )}
-      {props.multiline ? (
-        <textarea
-          id="message"
-          rows={4}
-          className={defaultInputStyle}
-          onChange={props.onChange}
-          type={props.type}
-          aria-label={props.label}
-          placeholder={props.placeholder}
-          defaultValue={props.defaultValue}
-          value={props.value}
-          {...props}
-        />
+      {preview ? (
+        <>
+          {props.multiline ? (
+            <textarea
+              id="message"
+              rows={4}
+              className={defaultInputStyle}
+              onChange={props.onChange}
+              type={props.type}
+              aria-label={props.label}
+              placeholder={props.placeholder}
+              defaultValue={props.defaultValue}
+              value={props.value}
+              {...props}
+            />
+          ) : (
+            <div className="relative">
+              {props.icon && (
+                <div className="absolute top-1/2 left-3 -translate-y-1/2">
+                  {props.icon}
+                </div>
+              )}
+              <div
+                // {...props}
+                className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
+              >
+                {props.value}
+              </div>
+            </div>
+          )}
+        </>
       ) : (
-        <div className="relative">
-          {props.icon && (
-            <div className="absolute top-1/2 left-3 -translate-y-1/2">
-              {props.icon}
+        <>
+          {props.multiline ? (
+            <textarea
+              id="message"
+              rows={4}
+              className={defaultInputStyle}
+              onChange={props.onChange}
+              type={props.type}
+              aria-label={props.label}
+              placeholder={props.placeholder}
+              defaultValue={props.defaultValue}
+              value={props.value}
+              {...props}
+            />
+          ) : (
+            <div className="relative">
+              {props.icon && (
+                <div className="absolute top-1/2 left-3 -translate-y-1/2">
+                  {props.icon}
+                </div>
+              )}
+              <input
+                {...props}
+                className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
+              />
             </div>
           )}
-          <input
-            {...props}
-            className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
-          />
-        </div>
-      )}
 
-      {props.helperText && (
-        <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
-          {props.helperText}
-        </p>
+          {props.helperText && (
+            <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
+              {props.helperText}
+            </p>
+          )}
+        </>
       )}
     </div>
   )

package/src/styles.css

@@ -872,6 +872,9 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[2\.33rem\] {
+  height: 2.33rem;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -1079,6 +1082,9 @@ video {
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }