@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/Toast.tsx

@@ -1,160 +0,0 @@
-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(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border  shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80  data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-      severity: {
-        info: "info group text-info-foreground bg-info",
-        warning: "warning group text-warning-foreground bg-warning",
-        error: "error group border-error bg-error text-error-foreground",
-        success: "success group text-success-foreground bg-success",
-        none: "",
-      },
-    },
-
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants> & {
-      severity?: "info" | "warning" | "error" | "success" | "none"
-      direction?: "rtl" | "ltr"
-    }
->(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(
-        toastVariants({ variant, severity }),
-        className,
-        direction === "rtl"
-          ? "p-6 pl-0 pr-10 data-[state=closed]:slide-out-to-left-full"
-          : "p-6 pr-8 data-[state=closed]:slide-out-to-right-full"
-      )}
-      dir={direction}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Action
-      ref={ref}
-      className={cn(
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-        "group-[.info]:border-muted/40 group-[.info]:hover:border-info/30 group-[.info]:hover:bg-info group-[.info]:hover:text-info-foreground group-[.info]:focus:ring-info",
-        "group-[.error]:border-muted/40 group-[.error]:hover:border-error/30 group-[.error]:hover:bg-error group-[.error]:hover:text-error-foreground group-[.error]:focus:ring-error",
-        "group-[.success]:border-muted/40 group-[.success]:hover:border-success/30 group-[.success]:hover:bg-success group-[.success]:hover:text-success-foreground group-[.success]:focus:ring-success",
-        "group-[.warning]:border-muted/40 group-[.warning]:hover:border-warning/30 group-[.warning]:hover:bg-warning group-[.warning]:hover:text-warning-foreground group-[.warning]:focus:ring-warning",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <svg
-      aria-label="Close Icon"
-      aria-hidden="true"
-      className="h-4 w-4"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-    >
-      <path
-        fillRule="evenodd"
-        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-        clipRule="evenodd"
-      ></path>
-    </svg>
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}

package/src/elements/Toaster.tsx

@@ -1,35 +0,0 @@
-import React from "react"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "./Toast"
-import { useToast } from "../hooks/useToast"
-import { cn } from "../util"
-
-export function Toaster(props) {
-  const { toasts } = useToast()
-  let isRTL = props.direction === "rtl"
-  return (
-    <ToastProvider swipeDirection={isRTL ? "left" : "right"}>
-      {toasts.map(function ({ id, title, description, action, ...toastProps }) {
-        return (
-          <Toast direction={props.direction} key={id} {...toastProps}>
-            <div className={"grid gap-1 text-start"}>
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport className={cn("gap-2", isRTL && "fixed left-0")} />
-    </ToastProvider>
-  )
-}

package/src/elements/Tooltip.tsx

@@ -1,65 +0,0 @@
-import React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-import { cn } from "../util"
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-const TooltipArrow = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Arrow>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
->(({ className, ...props }, ref) => (
-  <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />
-))
-TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
-
-type TooltipTypes = {
-  open?: any
-  side?: "top" | "right" | "bottom" | "left"
-  content?: any
-  children?: any
-  defaultOpen?: any
-  onOpenChange?: any
-  delayDuration?: any
-}
-
-const Tooltip: React.FunctionComponent<TooltipTypes> = ({
-  side,
-  open,
-  content,
-  children,
-  defaultOpen,
-  onOpenChange,
-  delayDuration = 300,
-  ...props
-}) => {
-  return (
-    <TooltipPrimitive.TooltipProvider delayDuration={delayDuration}>
-      <TooltipPrimitive.Root
-        open={open}
-        defaultOpen={defaultOpen}
-        onOpenChange={onOpenChange}
-      >
-        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipContent side={side} align="center" {...props}>
-          {content}
-        </TooltipContent>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.TooltipProvider>
-  )
-}
-
-export { Tooltip }

package/src/elements/UsageCard.tsx

@@ -1,45 +0,0 @@
-import React, { FC } from "react"
-import { Tooltip } from "./Tooltip"
-
-type UsageCardTypes = {
-  tooltip?: any
-  title: any
-  percent: any
-  currentUsage: any
-}
-export const UsageCard: FC<UsageCardTypes> = (props) => {
-  return (
-    <div className="flex w-full flex-col gap-0 rounded border bg-card p-4">
-      <div className="flex flex-row items-center gap-2">
-        <span className="bg-white-200">{props.title}</span>
-        {props.tooltip && (
-          <Tooltip content={props.tooltip} >
-            <svg
-              stroke="currentColor"
-              aria-label="Exclamation Circle"
-              fill="currentColor"
-              strokeWidth="0"
-              viewBox="0 0 16 16"
-              height="1em"
-              width="1em"
-            >
-              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
-            </svg>
-          </Tooltip>
-        )}
-      </div>
-      <div className="bg-white-100 flex flex-row">
-        <div>{props.currentUsage}</div>
-        <div> ({props.percent}%)</div>
-      </div>
-      <div className="mt-2 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-        <div
-          className="h-2.5 rounded-full bg-primary"
-          style={{
-            width: `${props.percent ?? 0}%`,
-          }}
-        ></div>
-      </div>
-    </div>
-  )
-}

package/src/elements/UserReferralSource.tsx

@@ -1,99 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from "react"
-import clsx from "clsx"
-import { Button } from "./Button"
-import { HawaRadio } from "./HawaRadio"
-import { Card, CardContent } from "./Card"
-import { Textarea } from "./Textarea"
-
-type ComponentTypes = {
-  title?: string
-  question: string
-  options?: []
-  texts?: {
-    least: string
-    most: string
-  }
-  position?: "bottom-right" | "bottom-left"
-  onOptionClicked?: (option) => void
-}
-export const UserReferralSource: FC<ComponentTypes> = ({
-  position = "bottom-right",
-  ...props
-}) => {
-  const [closed, setClosed] = useState(false)
-  const [answered, setAnswered] = useState(false)
-  const [clickedOption, setClickedOption] = useState(null)
-  const [closingTimer, setClosingTimer] = useState(5)
-  const popUpRef = useRef(null)
-
-  const boxPosition = {
-    "bottom-right": "right-4",
-    "bottom-left": "left-4",
-  }
-  useEffect(() => {
-    //To change opacity and hide the component
-    const timeoutHide = setTimeout(() => {
-      if (closingTimer >= 0) {
-        setClosingTimer(closingTimer - 1)
-      }
-    }, 1000)
-
-    return () => {
-      clearTimeout(timeoutHide)
-    }
-  }, [closingTimer])
-
-  const slowClose = () => {
-    setClosed(true)
-    setTimeout(() => {
-      popUpRef.current.removeChild(popUpRef.current.children[0])
-    }, 200)
-  }
-  return (
-    <Card
-      ref={popUpRef}
-      className={clsx("fixed bottom-4 p-0 ", boxPosition[position])}
-    >
-      <button
-        type="button"
-        className="absolute right-2 top-2 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
-        data-dismiss-target="#toast-default"
-        aria-label="Close"
-        onClick={() => slowClose()}
-      >
-        <svg
-          aria-hidden="true"
-          className="h-5 w-5"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path
-            fillRule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </button>
-      <CardContent headless>
-        <div
-          className={clsx(
-            "flex flex-col gap-4", // "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
-            closed ? "opacity-0" : "opacity-100"
-          )}
-        >
-          <div className="mt-4 font-bold">{props.question}</div>
-          <div className="flex w-full flex-row gap-1 rounded ">
-            <HawaRadio
-              orientation="vertical"
-              options={props.options}
-            ></HawaRadio>
-          </div>
-          <div>
-            <Textarea />
-          </div>
-        </div>
-        <Button className="mt-4 w-full">Submit</Button>
-      </CardContent>
-    </Card>
-  )
-}

package/src/elements/index.ts

@@ -1,74 +0,0 @@
-export * from "./HawaCheckbox"
-export * from "./HawaPanelTabs"
-export * from "./HawaChip"
-export * from "./HawaIconCount"
-export * from "./HawaSettingsRow"
-export * from "./HawaSelect"
-export * from "./HawaRange"
-export * from "./HawaTypography"
-export * from "./HawaAlert"
-export * from "./HawaTable"
-export * from "./HawaColorPicker"
-export * from "./HawaSearchBar"
-export * from "./HawaAccordion"
-export * from "./HawaPhoneInput"
-export * from "./HawaTabs"
-export * from "./HawaModal"
-export * from "./HawaMenu"
-export * from "./HawaCopyrights"
-export * from "./HawaStepper"
-export * from "./HawaStats"
-export * from "./HawaCodeBlock"
-export * from "./HawaLoading"
-export * from "./HawaRadio"
-export * from "./HawaDatepicker"
-export * from "./DragDropImages"
-export * from "./DraggableCard"
-export * from "./Breadcrumb"
-export * from "./SubsectionList"
-export * from "./UsageCard"
-export * from "./InvoiceAccordion"
-export * from "./FeedbackRating"
-export * from "./FeedbackByEmoji"
-export * from "./ArrowCarousel"
-export * from "./FloatingComment"
-export * from "./FloatingCommentSlate"
-export * from "./FloatingCommentExec"
-export * from "./BackToTop"
-export * from "./HawaInlineCode"
-export * from "./Timeline"
-// Inputs
-export * from "./HawaTextField"
-export * from "./HawaPinInput"
-// Cards
-export * from "./HawaItemCard"
-export * from "./HawaPricingCard"
-export * from "./HawaAdCard"
-export * from "./HawaLandingCard"
-//Buttons
-export * from "./HawaButton"
-export * from "./HawaStoreButtons"
-
-export * from "./ActionCard"
-export * from "./StickyFeatures"
-export * from "./UserReferralSource"
-export * from "./Icons"
-
-// v0.1
-export * from "./Button"
-export * from "./Carousel"
-export * from "./Label"
-export * from "./Input"
-export * from "./Tooltip"
-export * from "./Card"
-export * from "./Skeleton"
-export * from "./InterfaceSettings"
-export * from "./DropdownMenu"
-export * from "./Popover"
-export * from "./Tabs"
-export * from "./Textarea"
-export * from "./Separator"
-export * from "./Toast"
-export * from "./Toaster"
-export * from "./Switch"
-export * from "./Dialog"

package/src/hooks/index.ts

@@ -1,13 +0,0 @@
-export * from "./useDiscloser"
-export * from "./useHover"
-export * from "./useToast"
-export * from "./useCarousel"
-export * from "./useClipboard"
-export * from "./useBreakpoint"
-export * from "./useFocusWithin"
-export * from "./useMediaQuery"
-export * from "./useScrollPosition"
-export * from "./useTable"
-export * from "./useTabs"
-export * from "./useWindowEvent"
-export * from "./useWindowScroll"

package/src/hooks/useBreakpoint.ts

@@ -1,24 +0,0 @@
-import React, { useState, useEffect } from "react"
-
-const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(window?.innerWidth)
-  const resize = () => {
-    setBreakpoint(window?.innerWidth)
-  }
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      // Client-side-only code
-
-      window?.addEventListener("resize", resize)
-
-      return () => {
-        window?.removeEventListener("resize", resize)
-      }
-    }
-  }, [])
-
-  return breakpoint
-}
-
-export default useBreakpoint

package/src/hooks/useCarousel.ts

@@ -1,58 +0,0 @@
-import { useState, useRef } from 'react';
-
-const useCarousel = (imageWidth: number) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [startDragX, setStartDragX] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const findClosestSnapPoint = (scrollLeft: number): number => {
-    return Math.round(scrollLeft / imageWidth) * imageWidth;
-  };
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    setIsDragging(true);
-    setStartDragX(e.pageX - containerRef.current!.offsetLeft);
-    setScrollLeft(containerRef.current!.scrollLeft);
-  };
-
-  const handleMouseLeave = () => {
-    if (isDragging) {
-      handleDragEnd();
-    }
-  };
-
-  const handleMouseUp = () => {
-    if (isDragging) {
-      handleDragEnd();
-    }
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging(false);
-    const closestSnapPoint = findClosestSnapPoint(containerRef.current!.scrollLeft);
-    containerRef.current!.scrollTo({
-      left: closestSnapPoint,
-      behavior: 'smooth',
-    });
-  };
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!isDragging) return;
-    e.preventDefault();
-    const x = e.pageX - containerRef.current!.offsetLeft;
-    const walk = x - startDragX;
-    containerRef.current!.scrollLeft = scrollLeft - walk;
-  };
-
-  return {
-    containerRef,
-    handleMouseDown,
-    handleMouseLeave,
-    handleMouseUp,
-    handleMouseMove,
-  };
-};
-
-export default useCarousel;

package/src/hooks/useClipboard.ts

@@ -1,32 +0,0 @@
-import { useState } from "react"
-
-export function useClipboard({ timeout = 2000 } = {}) {
-  const [error, setError] = useState<Error>(null)
-  const [copied, setCopied] = useState(false)
-  const [copyTimeout, setCopyTimeout] = useState(null)
-
-  const handleCopyResult = (value: boolean) => {
-    clearTimeout(copyTimeout)
-    setCopyTimeout(setTimeout(() => setCopied(false), timeout))
-    setCopied(value)
-  }
-
-  const copy = (valueToCopy: any) => {
-    if ("clipboard" in navigator) {
-      navigator.clipboard
-        .writeText(valueToCopy)
-        .then(() => handleCopyResult(true))
-        .catch((err) => setError(err))
-    } else {
-      setError(new Error("useClipboard: navigator.clipboard is not supported"))
-    }
-  }
-
-  const reset = () => {
-    setCopied(false)
-    setError(null)
-    clearTimeout(copyTimeout)
-  }
-
-  return { copy, reset, error, copied }
-}

package/src/hooks/useDiscloser.ts

@@ -1,21 +0,0 @@
-import React, { useState } from "react"
-
-type TUseDiscloser = {
-  isOpen: boolean
-  onOpen: () => void
-  onClose: () => void
-}
-
-const useDiscloser = (value: boolean = false): TUseDiscloser => {
-  const [open, setOpen] = useState<boolean>(value)
-  const onOpen = () => setOpen(true)
-  const onClose = () => setOpen(false)
-
-  return {
-    isOpen: open,
-    onOpen: onOpen,
-    onClose: onClose,
-  }
-}
-
-export default useDiscloser