@sikka/hawa 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -107,6 +107,7 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,6 @@
 import React, { useState, FC } from "react"
-import { HawaTabs, HawaTooltip } from "../../elements"
+import { HawaTabs } from "../../elements"
+import { Tooltip } from "../../elements/Tooltip"
 
 const CheckMark = () => (
   <svg
@@ -124,10 +125,7 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                 <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
                   {feature.text}
                   {feature.description && (
-                    <HawaTooltip
-                      position="top-right"
-                      content={feature.description}
-                    >
+                    <Tooltip side="right" content={feature.description}>
                       <svg
                         stroke="currentColor"
                         fill="currentColor"
@@ -138,7 +136,7 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                       >
                         <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>
-                    </HawaTooltip>
+                    </Tooltip>
                   )}
                 </div>
                 <UncheckMark />

package/src/elements/Tooltip.tsx

@@ -0,0 +1,179 @@
+// "use client"
+
+// import * as React from "react"
+// import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../util"
+
+// const TooltipProvider = TooltipPrimitive.Provider
+
+// const TooltipRoot = TooltipPrimitive.Root
+
+// const TooltipTrigger = TooltipPrimitive.Trigger
+
+// 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
+
+// interface TooltipProps {
+//   // TooltipProvider props
+//   delayDurationProvider?: number
+//   skipDelayDuration?: number
+//   disableHoverableContentProvider?: boolean
+
+//   // TooltipRoot props
+//   defaultOpen?: boolean
+//   open?: boolean
+//   onOpenChange?: (open: boolean) => void
+//   delayDurationRoot?: number
+//   disableHoverableContentRoot?: boolean
+
+//   // TooltipContent props
+//   content: React.ReactNode
+//   asChild?: boolean
+//   ariaLabel?: string
+//   onEscapeKeyDown?: () => void
+//   onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void
+//   forceMount?: boolean
+//   side?: "top" | "right" | "bottom" | "left"
+//   sideOffset?: number
+//   align?: "start" | "center" | "end"
+//   alignOffset?: number
+//   avoidCollisions?: boolean
+//   collisionBoundary?: Element | Element[];
+//   collisionPadding?: number
+//   arrowPadding?: number
+//   sticky?: "partial" | "always";
+//   hideWhenDetached?: boolean
+
+//   children: React.ReactNode
+// }
+
+// const Tooltip: React.FC<TooltipProps> = (props) => {
+//   const { content, children, ...rest } = props
+//   return (
+//     <TooltipProvider
+//       delayDuration={props.delayDurationProvider}
+//       skipDelayDuration={props.skipDelayDuration}
+//       disableHoverableContent={props.disableHoverableContentProvider}
+//     >
+//       <TooltipRoot
+//         defaultOpen={props.defaultOpen}
+//         open={props.open}
+//         onOpenChange={props.onOpenChange}
+//         delayDuration={props.delayDurationRoot}
+//         disableHoverableContent={props.disableHoverableContentRoot}
+//       >
+//         <TooltipTrigger asChild>{children}</TooltipTrigger>
+//         <TooltipContent
+//           asChild={props.asChild}
+//           aria-label={props.ariaLabel}
+//           onEscapeKeyDown={props.onEscapeKeyDown}
+//           onPointerDownOutside={props.onPointerDownOutside}
+//         //   forceMount={props.forceMount}
+//           side={props.side}
+
+//           sideOffset={props.sideOffset}
+//           align={props.align}
+//           alignOffset={props.alignOffset}
+//           avoidCollisions={props.avoidCollisions}
+//           collisionBoundary={props.collisionBoundary}
+//           collisionPadding={props.collisionPadding}
+//           arrowPadding={props.arrowPadding}
+//           sticky={props.sticky}
+//           hideWhenDetached={props.hideWhenDetached}
+//           {...rest}
+//         >
+//           {content}
+//         </TooltipContent>
+//       </TooltipRoot>
+//     </TooltipProvider>
+//   )
+// }
+
+// your-tooltip.jsx
+import React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+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(
+      //   "bg-popover",
+      "bg-red-500 text-blue-500 ",
+      //   "z-50 overflow-hidden rounded-md border bg-popover  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}
+  />
+))
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
+
+type TooltipTypes = {
+  side?: "top" | "right" | "bottom" | "left"
+  children?: any
+  content?: any
+  open?: any
+  defaultOpen?: any
+  onOpenChange?: any
+  delayDuration?: any
+}
+
+export const Tooltip: React.FunctionComponent<TooltipTypes> = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 300,
+  side,
+  ...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}
+          {/* <TooltipArrow width={21} height={5} /> */}
+        </TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.TooltipProvider>
+  )
+}
+// export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/elements/UsageCard.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { HawaTooltip } from "./HawaTooltip"
+import { Tooltip } from "./Tooltip"
 
 type UsageCardTypes = {
   tooltip?: any
@@ -13,7 +13,7 @@ export const UsageCard: FC<UsageCardTypes> = (props) => {
       <div className="flex flex-row items-center gap-2">
         <span className="bg-white-200">{props.title}</span>
         {props.tooltip && (
-          <HawaTooltip content={props.tooltip} position="right-top">
+          <Tooltip content={props.tooltip} side="right">
             <svg
               stroke="currentColor"
               aria-label="Exclamation Circle"
@@ -25,7 +25,7 @@ export const UsageCard: FC<UsageCardTypes> = (props) => {
             >
               <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>
-          </HawaTooltip>
+          </Tooltip>
         )}
       </div>
       <div className="bg-white-100 flex flex-row">

package/src/styles.css

@@ -405,7 +405,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 0.5rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -1908,6 +1908,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 }
+.bg-popover {
+  background-color: hsl(var(--popover));
+}
 .bg-primary {
   background-color: hsl(var(--primary));
 }
@@ -2372,6 +2375,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
 }
+.text-popover-foreground {
+  color: hsl(var(--popover-foreground));
+}
 .text-primary {
   color: hsl(var(--primary));
 }
@@ -2586,6 +2592,12 @@ video {
 .fade-in {
   --tw-enter-opacity: 0;
 }
+.fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+.zoom-in-95 {
+  --tw-enter-scale: .95;
+}
 .duration-1000 {
   animation-duration: 1000ms;
 }
@@ -3077,6 +3089,33 @@ body {
   --tw-text-opacity: 1;
   color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
 }
+.data-\[state\=closed\]\:animate-out[data-state=closed] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
+  --tw-exit-opacity: 0;
+}
+.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
+  --tw-exit-scale: .95;
+}
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
+  --tw-enter-translate-y: -0.5rem;
+}
+.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
+  --tw-enter-translate-x: 0.5rem;
+}
+.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
+  --tw-enter-translate-x: -0.5rem;
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
+  --tw-enter-translate-y: 0.5rem;
+}
 .group[data-disabled] .group-data-\[disabled\]\:text-mauve-8 {
   --tw-text-opacity: 1;
   color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));

package/src/tailwind.css

@@ -24,7 +24,7 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 0.5rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;