@sikka/hawa 0.1.98 → 0.1.99

package/dist/styles.css

@@ -897,9 +897,6 @@ video {
 .m-5 {
   margin: 1.25rem;
 }
-.m-\[5px\] {
-  margin: 5px;
-}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -1353,9 +1350,6 @@ video {
 .w-\[21px\] {
   width: 21px;
 }
-.w-\[25px\] {
-  width: 25px;
-}
 .w-\[300px\] {
   width: 300px;
 }
@@ -1403,9 +1397,6 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
-.min-w-\[220px\] {
-  min-width: 220px;
-}
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -1862,10 +1853,6 @@ video {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
-.rounded-t-inner {
-  border-top-left-radius: var(--radius-inner);
-  border-top-right-radius: var(--radius-inner);
-}
 .rounded-t-lg {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
@@ -2212,10 +2199,6 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
-.bg-violet-6 {
-  --tw-bg-opacity: 1;
-  background-color: hsl(252 77.8% 89.4% / var(--tw-bg-opacity));
-}
 .bg-warning {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--warning) / var(--tw-bg-opacity));
@@ -2260,9 +2243,6 @@ video {
 .fill-primary\/20 {
   fill: hsl(var(--primary) / 0.2);
 }
-.fill-white {
-  fill: #fff;
-}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2297,9 +2277,6 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
-.p-\[5px\] {
-  padding: 5px;
-}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -2344,10 +2321,6 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.px-\[5px\] {
-  padding-left: 5px;
-  padding-right: 5px;
-}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2419,12 +2392,6 @@ video {
 .pl-8 {
   padding-left: 2rem;
 }
-.pl-\[20px\] {
-  padding-left: 20px;
-}
-.pl-\[25px\] {
-  padding-left: 25px;
-}
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -2510,9 +2477,6 @@ video {
 .text-\[12px\] {
   font-size: 12px;
 }
-.text-\[13px\] {
-  font-size: 13px;
-}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -2575,9 +2539,6 @@ video {
 .leading-8 {
   line-height: 2rem;
 }
-.leading-\[25px\] {
-  line-height: 25px;
-}
 .leading-none {
   line-height: 1;
 }
@@ -2670,10 +2631,6 @@ video {
   --tw-text-opacity: 1;
   color: hsl(var(--info-foreground) / var(--tw-text-opacity));
 }
-.text-mauve-11 {
-  --tw-text-opacity: 1;
-  color: hsl(252 5.0% 40.7% / var(--tw-text-opacity));
-}
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -2731,10 +2688,6 @@ video {
   --tw-text-opacity: 1;
   color: hsl(var(--success-foreground) / var(--tw-text-opacity));
 }
-.text-violet-11 {
-  --tw-text-opacity: 1;
-  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
-}
 .text-warning-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--warning-foreground) / var(--tw-text-opacity));
@@ -2794,11 +2747,6 @@ video {
   --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[0px_10px_38px_-10px_rgba\(22\2c _23\2c _24\2c _0\.35\)\2c _0px_10px_20px_-15px_rgba\(22\2c _23\2c _24\2c _0\.2\)\] {
-  --tw-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-  --tw-shadow-colored: 0px 10px 38px -10px var(--tw-shadow-color), 0px 10px 20px -15px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2880,10 +2828,6 @@ video {
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
-.drop-shadow-lg {
-  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2939,15 +2883,9 @@ video {
 .duration-200 {
   transition-duration: 200ms;
 }
-.duration-300 {
-  transition-duration: 300ms;
-}
 .duration-500 {
   transition-duration: 500ms;
 }
-.will-change-\[opacity\2c transform\] {
-  will-change: opacity,transform;
-}
 .will-change-transform {
   will-change: transform;
 }
@@ -2992,9 +2930,6 @@ video {
 .duration-200 {
   animation-duration: 200ms;
 }
-.duration-300 {
-  animation-duration: 300ms;
-}
 .duration-500 {
   animation-duration: 500ms;
 }
@@ -3576,66 +3511,6 @@ body {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-@keyframes slideUpAndFade {
-
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.data-\[side\=bottom\]\:animate-slideUpAndFade[data-side=bottom] {
-  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-@keyframes slideRightAndFade {
-
-  from {
-    opacity: 0;
-    transform: translateX(-2px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.data-\[side\=left\]\:animate-slideRightAndFade[data-side=left] {
-  animation: slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-@keyframes slideLeftAndFade {
-
-  from {
-    opacity: 0;
-    transform: translateX(2px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.data-\[side\=right\]\:animate-slideLeftAndFade[data-side=right] {
-  animation: slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-@keyframes slideDownAndFade {
-
-  from {
-    opacity: 0;
-    transform: translateY(-2px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.data-\[side\=top\]\:animate-slideDownAndFade[data-side=top] {
-  animation: slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
-}
 @keyframes accordion-up {
 
   from {
@@ -3662,14 +3537,6 @@ body {
 .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
   animation: accordion-down 0.2s ease-out;
 }
-.data-\[highlighted\]\:bg-violet-9[data-highlighted] {
-  --tw-bg-opacity: 1;
-  background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
-}
-.data-\[highlighted\]\:data-\[state\=open\]\:bg-violet-9[data-state=open][data-highlighted] {
-  --tw-bg-opacity: 1;
-  background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
-}
 .data-\[state\=active\]\:bg-primary[data-state=active] {
   background-color: hsl(var(--primary));
 }
@@ -3682,32 +3549,12 @@ body {
 .data-\[state\=open\]\:bg-accent[data-state=open] {
   background-color: hsl(var(--accent));
 }
-.data-\[state\=open\]\:bg-violet-4[data-state=open] {
-  --tw-bg-opacity: 1;
-  background-color: hsl(252 91.5% 95.5% / var(--tw-bg-opacity));
-}
-.data-\[disabled\]\:text-mauve-8[data-disabled] {
-  --tw-text-opacity: 1;
-  color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
-}
-.data-\[highlighted\]\:data-\[state\=open\]\:text-violet-1[data-state=open][data-highlighted] {
-  --tw-text-opacity: 1;
-  color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
-}
-.data-\[highlighted\]\:text-violet-1[data-highlighted] {
-  --tw-text-opacity: 1;
-  color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
-}
 .data-\[state\=active\]\:text-primary-foreground[data-state=active] {
   color: hsl(var(--primary-foreground));
 }
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }
-.data-\[state\=open\]\:text-violet-11[data-state=open] {
-  --tw-text-opacity: 1;
-  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
-}
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
@@ -3794,60 +3641,15 @@ body {
 .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
-.group[data-disabled] .group-data-\[disabled\]\:text-mauve-8 {
-  --tw-text-opacity: 1;
-  color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
-}
-.group[data-highlighted] .group-data-\[highlighted\]\:text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-:is([dir="ltr"] .ltr\:left-0) {
-  left: 0px;
-}
-:is([dir="ltr"] .ltr\:ml-auto) {
-  margin-left: auto;
-}
-:is([dir="ltr"] .ltr\:pl-\[0px\]) {
-  padding-left: 0px;
-}
-:is([dir="ltr"] .ltr\:pl-\[25px\]) {
-  padding-left: 25px;
-}
-:is([dir="ltr"] .ltr\:pr-\[25px\]) {
-  padding-right: 25px;
-}
-:is([dir="rtl"] .rtl\:right-0) {
-  right: 0px;
-}
 :is([dir="rtl"] .rtl\:ml-1) {
   margin-left: 0.25rem;
 }
 :is([dir="rtl"] .rtl\:ml-2) {
   margin-left: 0.5rem;
 }
-:is([dir="rtl"] .rtl\:mr-auto) {
-  margin-right: auto;
-}
-:is([dir="rtl"] .rtl\:rotate-180) {
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 :is([dir="rtl"] .rtl\:flex-row-reverse) {
   flex-direction: row-reverse;
 }
-:is([dir="rtl"] .rtl\:pl-\[0px\]) {
-  padding-left: 0px;
-}
-:is([dir="rtl"] .rtl\:pl-\[25px\]) {
-  padding-left: 25px;
-}
-:is([dir="rtl"] .rtl\:pr-\[25px\]) {
-  padding-right: 25px;
-}
-:is([dir="rtl"] .rtl\:pr-\[5px\]) {
-  padding-right: 5px;
-}
 :is(.dark .dark\:-rotate-90) {
   --tw-rotate: -90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.98",
+  "version": "0.1.99",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/elements/ActionCard.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState } from "react"
-import { Button } from "./Button"
 
 type ImageCardTypes = {
   children: any

package/src/elements/AutoCompleteField.tsx

@@ -13,7 +13,6 @@ export const AutoCompleteField: FC<TAutoCompleteFieldTypes> = (props) => {
   return (
     <>
       <Controller
-        // className="theme_form_input"
         name={name}
         rules={rules}
         control={control}

package/src/elements/Carousel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react"
+import React from "react"
 import useCarousel from "../hooks/useCarousel"
 
 interface CarouselProps {
@@ -17,7 +17,7 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
 
   return (
     <div
-      className="flex cursor-pointer snap-x  gap-4 overflow-x-hidden justify-center items-center"
+      className="flex cursor-pointer snap-x  items-center justify-center gap-4 overflow-x-hidden"
       onMouseDown={handleMouseDown}
       onMouseLeave={handleMouseLeave}
       onMouseUp={handleMouseUp}
@@ -25,7 +25,7 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
       ref={containerRef}
     >
       {images.map((image, index) => (
-        <div key={index} className="w-[1000px] h-96 flex-shrink-0">
+        <div key={index} className="h-96 w-[1000px] flex-shrink-0">
           {/* <div key={index} className="h-40 w-60 flex-shrink-0"> */}
           <img
             src={image}
@@ -38,4 +38,3 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
     </div>
   )
 }
-

package/src/elements/Dialog.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-// import { X } from "lucide-react"
 import { cn } from "../util"
 
 const Dialog = DialogPrimitive.Root

package/src/elements/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { cva, type VariantProps } from "class-variance-authority"
+// import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../util"
 
 const DropdownMenuRoot = DropdownMenuPrimitive.Root

package/src/elements/HawaAlert.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
-import { HawaButton } from "./HawaButton"
 import { Button } from "./Button"
 // TODO: make handleClose to detect when the alert is closed from outside this component
 

package/src/elements/HawaButton.tsx

@@ -1,7 +1,6 @@
 import React, { FC, ButtonHTMLAttributes, useState } from "react"
 import clsx from "clsx"
 import { HawaLoading } from "./HawaLoading"
-import { HawaTooltip } from "./HawaTooltip"
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
@@ -130,98 +129,58 @@ export const HawaButton: FC<ButtonProps> = ({
         containerWidthStyles[width]
       )}
     >
-      {tooltip ? (
-        <HawaTooltip
-          direction={tooltipDirection}
-          position={tooltipPosition}
-          size={tooltipSize}
-          content={tooltip}
-        >
-          <button
-            className={
-              disabled
-                ? clsx(
-                    className,
-                    baseStyles,
-                    edgeCorner ? "rounded-inner" : "rounded",
-
-                    variantStyles[variant],
-                    sizeStyles[size],
-                    widthStyles[width],
-                    disabledSyles,
-                    disabledVariantSyles[variant]
-                  )
-                : clsx(
-                    className,
-                    baseStyles,
-                    edgeCorner ? "rounded-inner" : "rounded",
+      <button
+        className={
+          disabled
+            ? clsx(
+                className,
+                baseStyles,
+                edgeCorner ? "rounded-inner" : "rounded",
 
-                    variantStyles[variant],
-                    sizeStyles[size],
-                    colorStyles[variant][color],
-                    widthStyles[width]
-                  )
-            }
-            disabled={disabled}
-            onClick={props.onClick}
-            // onClick={handleClick}
+                variantStyles[variant],
+                sizeStyles[size],
+                widthStyles[width],
+                disabledSyles,
+                disabledVariantSyles[variant]
+              )
+            : clsx(
+                className,
+                "overflow-x-clip",
+                baseStyles,
+                edgeCorner ? "rounded-inner" : "rounded",
+                variantStyles[variant],
+                sizeStyles[size],
+                colorStyles[variant][color],
+                widthStyles[width]
+              )
+        }
+        disabled={disabled}
+        // onClick={props.onClick}
+        onClick={handleClick}
+      >
+        {!isLoading ? (
+          <div
+            className={clsx(
+              " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
+              isClicked && feedback
+                ? " -translate-y-8 pb-1 pt-1"
+                : "translate-y-0"
+            )}
           >
-            {!isLoading ? children : <HawaLoading size="button" />}
-          </button>
-        </HawaTooltip>
-      ) : (
-        <button
-          className={
-            disabled
-              ? clsx(
-                  className,
-                  baseStyles,
-                  edgeCorner ? "rounded-inner" : "rounded",
-
-                  variantStyles[variant],
-                  sizeStyles[size],
-                  widthStyles[width],
-                  disabledSyles,
-                  disabledVariantSyles[variant]
-                )
-              : clsx(
-                  className,
-                  "overflow-x-clip",
-                  baseStyles,
-                  edgeCorner ? "rounded-inner" : "rounded",
-                  variantStyles[variant],
-                  sizeStyles[size],
-                  colorStyles[variant][color],
-                  widthStyles[width]
-                )
-          }
-          disabled={disabled}
-          // onClick={props.onClick}
-          onClick={handleClick}
-        >
-          {!isLoading ? (
-            <div
-              className={clsx(
-                " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
-                isClicked && feedback
-                  ? " -translate-y-8 pb-1 pt-1"
-                  : "translate-y-0"
-              )}
-            >
-              {isClicked && feedback ? (
-                <div className="w-full  text-center">{buttonText}</div>
-              ) : null}
-              <div className="flex w-full select-none flex-row items-center justify-center gap-2 whitespace-nowrap">
-                {props.startIcon && props.startIcon}
-                {children}
-                {props.endIcon && props.endIcon}
-              </div>
+            {isClicked && feedback ? (
+              <div className="w-full  text-center">{buttonText}</div>
+            ) : null}
+            <div className="flex w-full select-none flex-row items-center justify-center gap-2 whitespace-nowrap">
+              {props.startIcon && props.startIcon}
+              {children}
+              {props.endIcon && props.endIcon}
             </div>
-          ) : (
-            <HawaLoading design="dots-pulse" color={"bg-white"} size="button" />
-          )}
-        </button>
-      )}
+          </div>
+        ) : (
+          <HawaLoading design="dots-pulse" color={"bg-white"} size="button" />
+        )}
+      </button>
+
       {badge && (
         <div
           className={clsx(

package/src/elements/HawaPricingCard.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx"
 import React, { FC } from "react"
-import { HawaButton } from "./HawaButton"
 import { Button } from "./Button"
 
 // TODO: if feature.excluded is false, show gray and x

package/src/elements/HawaTable.tsx

@@ -2,13 +2,8 @@ import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import useTable from "../hooks/useTable"
 import { cn } from "../util"
-import { Button } from "./Button"
-import { HawaTextField } from "./HawaTextField"
 import { DropdownMenu, MenuItemType } from "./DropdownMenu"
 
-// TODO: translate header tools and make it more customizable
-// TODO: pass the onSearch handler to the parent
-
 type RowTypes = {
   hidden: boolean
   value: any

package/src/elements/Input.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-
 import { cn } from "../util"
 
 export interface InputProps

package/src/elements/Label.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "../util"
 
 const labelVariants = cva(

package/src/elements/Popover.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
-
 import { cn } from "../util"
 
 const PopoverContent = React.forwardRef<

package/src/elements/Select.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-
 import { cn } from "../util"
 
 const Select = SelectPrimitive.Root

package/src/elements/Separator.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
 import { cn } from "../util"
 
 const Separator = React.forwardRef<

package/src/elements/Tabs.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
-
 import { cn } from "../util"
 
 const TabsContext = React.createContext<{

package/src/elements/Toast.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "../util"
 
 const toastVariants = cva(

package/src/elements/UserFeedback.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useEffect, useRef, useState } from "react"
 import clsx from "clsx"
-import { HawaButton } from "./HawaButton"
 import { Button } from "./Button"
 
 type ComponentTypes = {