@sikka/hawa 0.0.50 → 0.0.51

package/src/elements/HawaPanelTabs.js

@@ -1,32 +1,126 @@
 import React, { useState } from "react";
 
-import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
+import "flowbite";
 
 export const HawaPanelTabs = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
-    <Container variant={props.location || "panelTabs"}>
-      {props.options.map((singleOption, i) => {
-        return (
-          <button
-            key={i}
-            onClick={() => {
-              props.handleChange(singleOption.value);
-              setValue(singleOption.value);
-            }}
-            fullWidth
-            variant={
-              value?.toLowerCase() === singleOption.value?.toLowerCase()
-                ? "selected"
-                : "unselected"
-            }
-          >
-            {singleOption.label}
-          </button>
-        );
-      })}
-    </Container>
+    <div>
+      <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+        <ul
+          class="flex flex-wrap -mb-px text-sm font-medium text-center"
+          id="myTab"
+          data-tabs-toggle="#myTabContent"
+          role="tablist"
+        >
+          {props.options.map((option) => {
+            return (
+              <li class="mr-2" role="presentation">
+                <button
+                  class="inline-block p-4 rounded-t-lg border-b-2 text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  id="profile-tab"
+                  data-tabs-target="#profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="profile"
+                  aria-selected="true"
+                >
+                  {option.label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      {/* <div id="myTabContent">
+        <div
+          class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="profile"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Profile tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+        <div
+          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="dashboard"
+          role="tabpanel"
+          aria-labelledby="dashboard-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Dashboard tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+        <div
+          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="settings"
+          role="tabpanel"
+          aria-labelledby="settings-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Settings tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+        <div
+          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="contacts"
+          role="tabpanel"
+          aria-labelledby="contacts-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Contacts tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+      </div> */}
+    </div>
+    // <Container variant={props.location || "panelTabs"}>
+    //   {props.options.map((singleOption, i) => {
+    //     return (
+    //       <button
+    //         key={i}
+    //         onClick={() => {
+    //           props.handleChange(singleOption.value);
+    //           setValue(singleOption.value);
+    //         }}
+    //         fullWidth
+    //         variant={
+    //           value?.toLowerCase() === singleOption.value?.toLowerCase()
+    //             ? "selected"
+    //             : "unselected"
+    //         }
+    //       >
+    //         {singleOption.label}
+    //       </button>
+    //     );
+    //   })}
+    // </Container>
   );
 };
 

package/src/elements/HawaSelect.js

@@ -1,12 +1,16 @@
 import React from "react";
-import InputLabel from "@mui/material/InputLabel";
-import Select from "@mui/material/Select";
-import Typography from "@mui/material/Typography";
 
 export const HawaSelect = (props) => {
   return (
     <div style={{ width: "100%" }}>
-      <div
+      <label
+        for="first_name"
+        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        {props.label}
+      </label>
+
+      {/* <div
         style={{
           display: "flex",
           flexDirection: "row",
@@ -14,13 +18,19 @@ export const HawaSelect = (props) => {
           alignItems: "center"
         }}
       >
-        <InputLabel>{props.label}</InputLabel>
 
         {props.helperText && (
           <Typography variant="validation">{props.helperText}</Typography>
         )}
-      </div>
-      <Select {...props}>{props.children}</Select>
+      </div> */}
+      {/* <Select {...props}>{props.children}</Select> */}
+
+      <select
+        id="countries"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      >
+        {props.children}
+      </select>
     </div>
   );
 };

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.c0e24dea.iframe.bundle.js"></script><script src="main.c82b0a52.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.8ab765cf.iframe.bundle.js"></script><script src="main.030838f5.iframe.bundle.js"></script></body></html>