@sikka/hawa 0.0.44 → 0.0.45

package/package.json

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

package/src/elements/HawaAccordian.js

@@ -1,25 +1,111 @@
 import React from "react";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import Typography from "@mui/material/Typography";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
 import PropTypes from "prop-types";
+import "flowbite";
 
-export const HawaAccordian = (props) => {
+const AccordionItem = (props) => {
+  let noRounding =
+    "flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+  let roundedTop =
+    "rounded-t-xl border-b-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+  let roundedBottom =
+    "rounded-b-xl border-t-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+  let accPaper =
+    "p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
+  let accPaperRounded =
+    "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
   return (
-    <Accordion elevation={0}>
-      <AccordionSummary
-        expandIcon={<ExpandMore />}
-        aria-controls="panel1a-content"
-        id="panel1a-header"
+    <div>
+      <h2 id={"accordion-collapse-heading-" + props.count}>
+        <button
+          type="button"
+          className={
+            props.count === 0 ? roundedTop : noRounding
+            // : props.count === -1
+            // ? roundedBottom
+            // : noRounding
+          }
+          data-accordion-target={"#accordion-collapse-body-" + props.count}
+          aria-expanded="true"
+          aria-controls={"accordion-collapse-body-" + props.count}
+        >
+          <span>What is Flowbite?</span>
+          <svg
+            data-accordion-icon=""
+            className="w-6 h-6 rotate-180 shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>
+      </h2>
+      <div
+        id={"accordion-collapse-body-" + props.count}
+        className=""
+        aria-labelledby={"accordion-collapse-heading-" + props.count}
       >
-        <Typography>{props.title}</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Typography>{props.content} </Typography>
-      </AccordionDetails>
-    </Accordion>
+        <div className={props.count === -1 ? accPaperRounded : accPaper}>
+          <p className="mb-2 text-gray-500 dark:text-gray-400">
+            Flowbite is an open-source library of interactive components built
+            on top of Tailwind CSS including buttons, dropdowns, modals,
+            navbars, and more.
+          </p>
+          <p className="text-gray-500 dark:text-gray-400">
+            Check out this guide to learn how to{" "}
+            <a
+              href="/docs/getting-started/introduction/"
+              class="text-blue-600 dark:text-blue-500 hover:underline"
+            >
+              get started
+            </a>{" "}
+            and start developing websites even faster with components on top of
+            Tailwind CSS.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+export const HawaAccordian = (props) => {
+  let accordionContent = [
+    { title: "etete", content: "teoite" },
+    { title: "etete", content: "teoite" },
+    { title: "etete", content: "teoite" },
+    { title: "etete", content: "teoite" }
+  ];
+  return (
+    <div id="accordion-collapse" data-accordion="collapse">
+      {accordionContent.map((acc, i) => {
+        return (
+          <AccordionItem
+            title={acc.title}
+            content={acc.content}
+            count={accordionContent.length - 1 === i ? -1 : i}
+          />
+        );
+      })}
+      {/* <AccordionItem count={1} />
+      <AccordionItem count={2} />
+      <AccordionItem count={3} /> */}
+    </div>
+
+    // <Accordion elevation={0}>
+    //   <AccordionSummary
+    //     expandIcon={<ExpandMore />}
+    //     aria-controls="panel1a-content"
+    //     id="panel1a-header"
+    //   >
+    //     <Typography>{props.title}</Typography>
+    //   </AccordionSummary>
+    //   <AccordionDetails>
+    //     <Typography>{props.content} </Typography>
+    //   </AccordionDetails>
+    // </Accordion>
   );
 };
 HawaAccordian.propTypes = {

package/src/elements/HawaAlert.js

@@ -1,14 +1,27 @@
 import React from "react";
-import Alert from "@mui/material/Alert";
-import AlertTitle from "@mui/material/AlertTitle";
 import PropTypes from "prop-types";
 
 export const HawaAlert = (props) => {
+  let severities = {
+    info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+    warning:
+      "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+    error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+    success: "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800"
+  };
+
   return (
-    <Alert severity={props.severity} icon={props.hideIcon}>
-      {props.title && <AlertTitle>{props.title}</AlertTitle>}
-      {props.text}
-    </Alert>
+    <div
+      class={
+        "flex flex-col p-4 mb-4 text-sm rounded-lg" +
+        " " +
+        severities[props.severity]
+      }
+      role="alert"
+    >
+      <span class="font-medium">{props.title}</span>
+      <span>{" " + props.text}</span>
+    </div>
   );
 };
 HawaAlert.propTypes = {

package/src/elements/HawaCheckbox.js

@@ -5,16 +5,31 @@ import Checkbox from "@mui/material/Checkbox";
 export const HawaCheckbox = (props) => {
   console.log("props : ", props);
   return (
-    <React.Fragment>
-      <FormControlLabel
-        label={props.label}
-        control={
-          <Checkbox
-            style={{ color: props.color || null }}
-            defaultChecked={props.defaultValue}
-          />
-        }
+    <div class="flex items-center mb-4">
+      <input
+        id="default-checkbox"
+        type="checkbox"
+        value=""
+        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
       />
-    </React.Fragment>
+      <label
+        for="default-checkbox"
+        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        Default checkbox
+      </label>
+    </div>
+
+    // <React.Fragment>
+    //   <FormControlLabel
+    //     label={props.label}
+    //     control={
+    //       <Checkbox
+    //         style={{ color: props.color || null }}
+    //         defaultChecked={props.defaultValue}
+    //       />
+    //     }
+    //   />
+    // </React.Fragment>
   );
 };

package/src/elements/HawaChip.js

@@ -1,6 +1,9 @@
 import React from "react";
-import Chip from "@mui/material/Chip";
 
 export const HawaChip = (props) => {
-  return <Chip {...props} />;
+  return (
+    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
+      {props.label}
+    </span>
+  );
 };

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.337d03df.iframe.bundle.js"></script><script src="main.3795aede.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.afb35182.iframe.bundle.js"></script><script src="main.aaee24e3.iframe.bundle.js"></script></body></html>