@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/ActionCard.tsx

@@ -1,63 +0,0 @@
-import React, { FC, useState } from "react"
-
-type ImageCardTypes = {
-  children: any
-  align?: any
-  bottomElement?: any
-  inCardActions?: any
-  cardImage?: string
-  title?: string
-  subtitle?: string
-  blank?: boolean
-}
-export const ActionCard: FC<ImageCardTypes> = (props) => {
-  const [hovered, setHovered] = useState(false)
-
-  return (
-    <div className="flex h-full w-full flex-col gap-1 ">
-      <div
-        className="group relative h-full w-full rounded border bg-background bg-cover bg-center transition-all duration-500 hover:drop-shadow-2xl"
-        style={{
-          backgroundImage: `url(${props.blank ? "" : props.cardImage})`,
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      >
-        {props.blank ? (
-          <div className="flex h-full flex-col items-center justify-center ">
-            <svg
-              className="h-10 w-10 text-foreground"
-              stroke="currentColor"
-              fill="currentColor"
-              stroke-width="0"
-              viewBox="0 0 24 24"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path>
-            </svg>
-          </div>
-        ) : (
-          <div className="absolute inset-0 rounded bg-black opacity-50"></div>
-        )}
-        <div className="absolute bottom-2 right-2 z-10 opacity-0 transition-all duration-200 group-hover:opacity-100">
-          {props.inCardActions}
-        </div>
-        {!props.blank && (
-          <div className="relative p-4">
-            <h1 className="text-white">{props.title}</h1>
-            <p className="text-white">{props.subtitle}</p>
-          </div>
-        )}
-      </div>
-      <div
-        className={`flex flex-row justify-between text-sm transition-all duration-200 ${
-          hovered ? "opacity-100" : "opacity-0"
-        }`}
-      >
-        {props.bottomElement}
-      </div>
-    </div>
-  )
-}

package/src/elements/ArrowCarousel.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-
-type Item = {
-  label?: string
-  icon?: JSX.Element
-}
-
-type ComponentTypes = {
-  items: Item[]
-  index?: number
-  arrowSize?: number
-  labelSize?: "small" | "medium" | "big"
-}
-
-const Arrow = (props: {
-  icon?: any
-  size?: number
-  onClick?: () => void
-  disabled?: boolean
-  direction?: "right" | "left"
-}) => {
-  return (
-    <svg
-      onClick={props.onClick || (() => {})}
-      className={clsx(
-        "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
-        props.direction === "right" ? "-rotate-90" : "rotate-90",
-        props.disabled ? "text-gray-300" : "cursor-pointer hover:scale-150"
-      )}
-      fill={props.disabled && "grey"}
-      viewBox="0 0 20 20"
-    >
-      <path
-        fillRule="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"
-        clipRule="evenodd"
-      ></path>
-    </svg>
-  )
-}
-
-export const ArrowCarousel: FC<ComponentTypes> = (props) => {
-  const [index, setIndex] = useState(props.index || 0)
-
-  useEffect(() => {
-    console.log(`INDEX CHANGED TO: ${index}`)
-  }, [index])
-
-  const sizes = {
-    small: ["", -8],
-    medium: ["2", -11],
-    big: ["3", -16],
-  }
-
-  return (
-    <div className="align-center box-boorder relative flex h-min w-min flex-row items-center justify-center rounded bg-layoutPrimary-500 p-4 py-0 pb-2 pt-2 shadow-md">
-      <Arrow
-        direction="left"
-        // size={props.arrowSize || 48}
-        disabled={index == 0}
-        onClick={() => {
-          if (index != 0) setIndex(index - 1)
-        }}
-      />
-
-      <div
-        className={`relative m-5  my-0 box-border flex h-full flex-col items-center justify-center  py-6 pt-0 `}
-      >
-        <div>{props.items[index].icon}</div>
-        <div
-          className={"absolute bottom-1 mb-0 mt-2 select-none"}
-          // {`absolute bottom-0 text-${
-          //   sizes[props.labelSize || "small"][0]
-          // }xl `}
-          // style={{
-          //   marginBottom: sizes[props.labelSize || "small"][1],
-          // }}
-        >
-          {props.items[index].label}
-        </div>
-      </div>
-
-      <Arrow
-        direction="right"
-        // size={props.arrowSize || 48}
-        disabled={index == props.items.length - 1}
-        onClick={() => {
-          if (index != props.items.length - 1) setIndex(index + 1)
-        }}
-      />
-    </div>
-  )
-}

package/src/elements/AutoCompleteField.tsx

@@ -1,36 +0,0 @@
-import React, { FC } from "react"
-import { Controller, useFormContext } from "react-hook-form"
-
-type TAutoCompleteFieldTypes = {
-  name: string
-  rules: any
-  shouldUnregister: boolean
-}
-export const AutoCompleteField: FC<TAutoCompleteFieldTypes> = (props) => {
-  const { control } = useFormContext()
-  const { name, rules, shouldUnregister } = props
-
-  return (
-    <>
-      <Controller
-        name={name}
-        rules={rules}
-        control={control}
-        shouldUnregister={shouldUnregister}
-        render={({ field: { onChange, value } }) => {
-          return (
-            <input type="text" />
-            // <Autocomplete
-            //   onChange={(e, data) => {
-            //     onChange(data);
-            //   }}
-            //   value={value ?? ""}
-            //   {...props}
-            //   className={"theme_form_input"}
-            // />
-          )
-        }}
-      />
-    </>
-  )
-}

package/src/elements/BackToTop.tsx

@@ -1,127 +0,0 @@
-import React, { FC, RefObject, useState, useEffect, useRef } from "react"
-import { clsx } from "clsx"
-import { Button } from "./Button"
-import { cn } from "../util"
-
-type BackToTopTypes = {
-  paddingX?: number // Horizontal padding relative to the attached corner
-  paddingY?: number // Vertical padding relative to the attached corner
-  paddingThreshold?: number // Increase to the threshold of the scroll value that has to be passed for the button to appear
-  corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-  anchor: RefObject<HTMLInputElement>
-}
-
-export const BackToTop: FC<BackToTopTypes> = ({ ...props }) => {
-  const [visible, setVisible] = useState<boolean>(false)
-  const [rect, _setRect] = useState<DOMRect>(null)
-  const _rect = useRef(rect)
-  const setRect = (data) => {
-    _rect.current = data
-    _setRect(data)
-  }
-
-  const self = useRef(null)
-
-  const getCoords = () => {
-    let anchor = props.anchor.current
-    return [anchor.scrollTop, anchor.scrollLeft]
-  }
-
-  const onScroll = () => {
-    let [scrollTop, scrollLeft] = getCoords()
-
-    let rect = props.anchor.current.getBoundingClientRect()
-
-    setVisible(scrollTop >= rect.height + (props.paddingThreshold || 100))
-  }
-
-  const backToTop = () => {
-    props.anchor.current.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
-  // FIXME: Observers and listeners run twice
-  useEffect(() => {
-    if (!props.anchor.current) return
-
-    props.anchor.current.addEventListener("scroll", onScroll)
-
-    // Listens to rect changes. Alternatives like ResizeObserver & IntersectionObserver fail to detect positional changes consistently
-    let interval = setInterval(() => {
-      if (!props.anchor.current) return
-
-      let newRect = props.anchor.current.getBoundingClientRect()
-      if (_rect.current == null) return setRect(newRect)
-
-      if (
-        !(
-          _rect.current.top == newRect.top &&
-          _rect.current.left == newRect.left &&
-          _rect.current.width == newRect.width &&
-          _rect.current.height == newRect.height
-        )
-      ) {
-        setRect(newRect)
-      }
-    }, 1)
-
-    return () => {
-      props.anchor.current?.removeEventListener("scroll", onScroll)
-      clearInterval(interval)
-    }
-  }, [])
-
-  const getStyles = () => {
-    if (!props.anchor.current) return {}
-
-    let corner = props.corner || "bottom-right"
-    let [vertical, horizontal] = corner.split("-")
-
-    let anchorRect = props.anchor.current.getBoundingClientRect()
-    let selfRect = self.current.getBoundingClientRect()
-
-    let width = horizontal == "right" ? anchorRect.width - selfRect.width : 0
-    let height = vertical == "bottom" ? anchorRect.height - selfRect.height : 0
-
-    let style = {
-      top:
-        anchorRect.y +
-        height +
-        (vertical == "bottom" ? -1 : 1) * (props.paddingX || 10),
-      left:
-        anchorRect.x +
-        width +
-        (horizontal == "right" ? -1 : 1) * (props.paddingX || 25),
-    }
-
-    return style
-  }
-
-  return (
-    <Button
-      className={cn(
-        "fixed cursor-pointer rounded transition-all",
-        visible
-          ? "pointer-events-all opacity-100"
-          : "pointer-events-none opacity-0"
-      )}
-      onClick={backToTop}
-      style={{
-        ...getStyles(),
-        transitionProperty: "opacity, background-color",
-      }}
-      ref={self}
-      size="icon"
-    >
-      <svg
-        className={clsx(
-          "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
-        )}
-        aria-label="Arrow Icon"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path 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"></path>
-      </svg>
-    </Button>
-  )
-}

package/src/elements/Breadcrumb.tsx

@@ -1,41 +0,0 @@
-import React, { FC, ReactNode } from "react"
-
-type TBreadcrumb = {
-  /** The array of crumbs, each one with a label and a href link */
-  breadcrumbLinks: [{ label: string; href: string }]
-  /** The separator between each crumb, can be character or React Node. The default is ">" */
-  separator?: string | ReactNode
-}
-
-const HawaBreadcrumb: FC<TBreadcrumb> = ({
-  breadcrumbLinks,
-  separator = ">",
-}) => {
-  return (
-    <div className="flex flex-row items-center gap-2 text-sm">
-      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (
-        <div className="flex flex-row items-center justify-center gap-2">
-          <a
-            href={singleBreadcrumbLink.href}
-            className={
-              index + 1 === breadcrumbLinks.length
-                ? "pointer-events-none"
-                : "underline-offset-4 transition-all hover:text-primary hover:underline hover:decoration-2"
-            }
-          >
-            {singleBreadcrumbLink.label}
-          </a>
-          {index != breadcrumbLinks.length - 1 ? (
-            typeof separator == "string" ? (
-              <div>{separator}</div>
-            ) : (
-              <div>{separator}</div>
-            )
-          ) : null}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default HawaBreadcrumb

package/src/elements/Button.tsx

@@ -1,92 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../util"
-import { HawaLoading } from "./HawaLoading"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center select-none rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        light: "bg-primary/20 text-primary hover:bg-primary/40",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        neoBrutalism:
-          "cursor-pointer transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms] active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        heightless: "px-4 py-4",
-        xs: "h-fit py-1 text-[10px] px-2 ",
-        sm: "h-9 text-[11px] rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        xl: "h-14 rounded-md px-10",
-        icon: "h-10 w-10",
-        smallIcon: "h-7 w-7",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-  isLoading?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      asChild = false,
-      isLoading,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = "button"
-
-    // Determine the color for the HawaLoading component based on the variant
-    const loadingColor =
-      variant === "outline" || variant === "ghost" || variant === "neoBrutalism"
-        ? "bg-primary"
-        : "bg-primary-foreground"
-
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {isLoading ? (
-          <HawaLoading
-            design="dots-pulse"
-            color={loadingColor} // Apply the computed color here
-            size={size === "sm" ? "xs" : "normal"}
-          />
-        ) : (
-          children
-        )}
-      </Comp>
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/src/elements/Card.tsx

@@ -1,90 +0,0 @@
-import * as React from "react"
-import { cn } from "../util"
-
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  clickable?: boolean
-}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, clickable = false, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm",
-        clickable &&
-          "cursor-pointer transition-all hover:drop-shadow-md dark:hover:shadow-dark",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-type CardContentProps = {
-  headless?: boolean
-} & React.HTMLAttributes<HTMLDivElement>
-
-const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
-  ({ headless, className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("p-6", headless ? "pt-6" : "pt-0", className)}
-      {...props}
-    />
-  )
-)
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/elements/Carousel.tsx

@@ -1,40 +0,0 @@
-import React from "react"
-import useCarousel from "../hooks/useCarousel"
-
-interface CarouselProps {
-  images: string[]
-}
-
-export const Carousel: React.FC<CarouselProps> = ({ images }) => {
-  const imageWidth = 1000 + 16 // Adjust according to your image width
-  const {
-    containerRef,
-    handleMouseDown,
-    handleMouseLeave,
-    handleMouseUp,
-    handleMouseMove,
-  } = useCarousel(imageWidth)
-
-  return (
-    <div
-      className="flex cursor-pointer snap-x  items-center justify-center gap-4 overflow-x-hidden"
-      onMouseDown={handleMouseDown}
-      onMouseLeave={handleMouseLeave}
-      onMouseUp={handleMouseUp}
-      onMouseMove={handleMouseMove}
-      ref={containerRef}
-    >
-      {images.map((image, index) => (
-        <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}
-            alt={`Carousel Image ${index}`}
-            width={imageWidth}
-            className="h-full w-full rounded-lg object-cover"
-          />
-        </div>
-      ))}
-    </div>
-  )
-}