@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/Select.tsx

@@ -1,139 +0,0 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { cn } from "../util"
-
-const Select = SelectPrimitive.Root
-const SelectGroup = SelectPrimitive.Group
-const SelectValue = SelectPrimitive.Value
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      {/* <ChevronDown className="h-4 w-4 opacity-50" /> */}
-      <svg
-        aria-label="Chevron Right Icon"
-        stroke="currentColor"
-        fill="currentColor"
-        strokeWidth="0"
-        viewBox="0 0 16 16"
-        height="1em"
-        width="1em"
-      >
-        <path
-          fillRule="evenodd"
-          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-        ></path>
-      </svg>
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        {/* <Check className="h-4 w-4" /> */}
-        <svg
-          aria-label="Check Mark"
-          stroke="currentColor"
-          fill="currentColor"
-          strokeWidth="0"
-          viewBox="0 0 512 512"
-          height="0.60em"
-          width="0.60em"
-        >
-          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-        </svg>
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-}

package/src/elements/Separator.tsx

@@ -1,28 +0,0 @@
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import { cn } from "../util"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }

package/src/elements/Skeleton.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import { cn } from "../util"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

package/src/elements/StickyFeatures.tsx

@@ -1,53 +0,0 @@
-import React from "react"
-
-interface Feature {
-  icon: React.ReactNode
-  title: string
-  description: string
-}
-
-type StickyFeaturesType = {
-  features?: Feature[]
-  tag?: string
-  title?: string
-  description?: string
-}
-
-export const StickyFeatures: React.FC<StickyFeaturesType> = (props) => {
-  return (
-    <div className="bg-white py-24 sm:py-32">
-
-      <div className="mx-auto flex max-w-5xl flex-col items-start gap-10 px-6 md:flex-row lg:px-8">
-        <div className="w-full md:sticky md:top-10 md:w-[28rem]">
-          <h2 className="text-lg font-semibold leading-8 tracking-tight text-indigo-600">
-            {props.tag}
-          </h2>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-            {props.title}
-          </p>
-          <p className="mb-2 mt-6 text-base leading-7 text-gray-600">
-            {props.description}
-          </p>
-        </div>
-        <div className="mt-5 w-full min-w-0 flex-1 md:mt-0">
-          <dl className="grid grid-cols-1 gap-x-8 gap-y-10 md:max-w-xl lg:max-w-none lg:gap-y-16">
-            {props.features.map((f) => (
-              <div className="relative rounded-lg bg-gray-50 p-10">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
-                  {f.icon}
-                </div>
-
-                <dt className="mt-4 text-lg font-semibold leading-7 text-gray-900">
-                  {f.title}
-                </dt>
-                <dd className="mt-2 text-base leading-7 text-gray-600">
-                  {f.description}
-                </dd>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/elements/SubsectionList.tsx

@@ -1,77 +0,0 @@
-import React, { useState, FC } from "react"
-import clsx from "clsx"
-import { HawaChip } from "./HawaChip"
-
-type SubsectionListTypes = {
-  align?: any
-  subsections: [
-    {
-      title: string
-      sections: [
-        {
-          label: string
-          action: () => void
-          icon?: any
-          value?: any
-        }
-      ]
-    }
-  ]
-}
-export const SubsectionList: FC<SubsectionListTypes> = ({ subsections }) => {
-  const [selectedSection, setSelectedSection] = useState(null)
-  return (
-    <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
-      {subsections.map((ss, i) => (
-        <div key={i} className="my-0">
-          {ss.title && <div className="my-4 font-bold">{ss.title}</div>}
-          {ss.sections.map((s, i) => (
-            <SubsectionItem
-              key={i}
-              onItemClick={() => setSelectedSection(s.value)}
-              selected={selectedSection}
-              value={s.value}
-              icon={s.icon}
-              title={s.label}
-              chip="Upgrade"
-            />
-          ))}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-type TSubsectionItem = {
-  chip?: string
-  title: string
-  value: string
-  icon?: any
-  selected?: any
-  onItemClick?: () => void
-}
-const SubsectionItem: FC<TSubsectionItem> = ({
-  title,
-  value,
-  icon,
-  chip,
-  selected,
-  onItemClick,
-}) => {
-  return (
-    <div
-      onClick={onItemClick}
-      className={clsx(
-        "flex w-full cursor-pointer flex-row items-center justify-between gap-2 rounded p-2  transition-all ",
-        selected === value
-          ? "bg-primary text-white hover:bg-primary"
-          : "hover:bg-layoutPrimary-300"
-      )}
-    >
-      <div className="flex w-full flex-row items-center justify-start  gap-2">
-        {icon} <span>{title}</span>
-      </div>
-      {chip && <HawaChip label="Upgrade" size="normal" />}{" "}
-    </div>
-  )
-}

package/src/elements/Switch.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "../util"
-
-let rootSize = {
-  default: "h-[25px] w-[42px]",
-  sm: "h-[20px] w-[37px]",
-}
-let thumbSize = {
-  default: "h-[21px] w-[21px]",
-  sm: "h-[16px] w-[16px]",
-}
-
-interface SwitchProps
-  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
-  size?: "default" | "sm" | "lg" // Define the possible sizes here
-  label?: string
-}
-
-export const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  SwitchProps
->(({ className, size = "default", label, ...props }, ref) => {
-  const [parentDirection, setParentDirection] = React.useState(null)
-  const parentRef = React.useRef(null)
-
-  React.useEffect(() => {
-    if (parentRef.current && parentRef.current.parentNode) {
-      const dir = window.getComputedStyle(
-        parentRef.current.parentNode
-      ).direction
-      setParentDirection(dir)
-    }
-  })
-
-  return (
-    <div className="flex flex-row items-center" ref={parentRef}>
-      <SwitchPrimitives.Root
-        className={cn(
-          "relative  cursor-pointer rounded-full bg-primary/20 outline-none data-[state=checked]:bg-primary",
-          className,
-          rootSize[size]
-        )}
-        {...props}
-        ref={ref}
-      >
-        <SwitchPrimitives.Thumb
-          className={cn(
-            thumbSize[size],
-            "block   rounded-full bg-white transition-transform  duration-100 will-change-transform data-[state=checked]:bg-primary-foreground  dark:bg-background",
-
-            parentDirection === "rtl"
-              ? "-translate-x-0.5 data-[state=checked]:-translate-x-[19px]"
-              : "translate-x-0.5 data-[state=checked]:translate-x-[19px]"
-          )}
-        />
-      </SwitchPrimitives.Root>
-      {label && (
-        <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-          {label}
-        </span>
-      )}
-    </div>
-  )
-})
-Switch.displayName = SwitchPrimitives.Root.displayName

package/src/elements/TabPanel.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from "react"
-
-type TabPanelTypes = {
-  children: any
-  value: any
-  index: any
-}
-export const TabPanel: FC<TabPanelTypes> = (props) => {
-  const { children, value, index, ...other } = props
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`vertical-tabpanel-${index}`}
-      aria-labelledby={`vertical-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <div>
-          <span>{children}</span>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/Tabs.tsx

@@ -1,84 +0,0 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { cn } from "../util"
-
-const TabsContext = React.createContext<{
-  orientation?: "vertical" | "horizontal"
-}>({ orientation: "vertical" })
-
-type TabsRootProps = React.ComponentPropsWithoutRef<
-  typeof TabsPrimitive.Root
-> & { orientation?: "vertical" | "horizontal" }
-
-const Tabs = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Root>,
-  TabsRootProps
->(({ className, orientation, ...props }, ref) => (
-  <TabsPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex gap-2",
-      orientation === "horizontal" ? "flex-row" : "flex-col",
-      className
-    )}
-    {...props}
-  >
-    <TabsContext.Provider value={{ orientation }}>
-      {props.children}
-    </TabsContext.Provider>
-  </TabsPrimitive.Root>
-))
-Tabs.displayName = TabsPrimitive.Root.displayName
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => {
-  const { orientation } = React.useContext(TabsContext)
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        "flex w-fit flex-wrap items-center justify-start gap-1 rounded border  bg-muted p-1 text-muted-foreground  dark:border-primary/10 ",
-        orientation === "horizontal" ? "flex-col" : "flex-row",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  return (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "inline-flex w-full flex-1 select-none items-center justify-center whitespace-nowrap rounded border px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm  dark:border-primary/10",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "w-full ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/elements/Textarea.tsx

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { cn } from "../util"
-import { Label } from "./Label"
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string
-  helperText?: string
-}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, label, helperText, ...props }, ref) => {
-    return (
-      <div className="flex flex-col gap-2">
-        {label && <Label htmlFor={props.id}>{label}</Label>}
-        <textarea
-          className={cn(
-            "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground   disabled:cursor-not-allowed disabled:opacity-50",
-            // focus-visible:ring-offset-2
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-        {helperText && (
-          <p className="mb-0 mt-0 text-xs text-red-600 dark:text-red-500">
-            {helperText}
-          </p>
-        )}
-      </div>
-    )
-  }
-)
-Textarea.displayName = "Textarea"
-
-export { Textarea }

package/src/elements/Timeline.tsx

@@ -1,35 +0,0 @@
-import React, { FC } from "react"
-
-type TimelineTypes = {
-  title: any
-  steps: StepTypes[]
-}
-type StepTypes = {
-  date: string
-  title: string
-  description?: string
-  actions?: any
-}
-export const Timeline: FC<TimelineTypes> = (props) => {
-  return (
-    <div>
-      <ol className="relative border-l border-gray-200 dark:border-gray-700">
-        {props.steps.map((step) => (
-          <li className="mb-10 ml-4">
-            <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"></div>
-            <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
-              {step.date}
-            </time>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              {step.title}
-            </h3>
-            <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-              {step.description}
-            </p>
-            {step.actions}
-          </li>
-        ))}
-      </ol>
-    </div>
-  )
-}