@sikka/hawa 0.1.3 → 0.1.5

package/src/elements/HawaPricingCard.tsx

@@ -1,6 +1,7 @@
 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
 // TODO: add badge to feature if soon
@@ -31,27 +32,25 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
   let isArabic = direction === "rtl"
   let cardSizes = {
     small:
-      "mx-1 w-full  max-w-sm rounded border dark:border-gray-700 dark:bg-gray-800 ",
+      "mx-1 w-full  max-w-sm rounded border dark:border-gray-700 bg-background ",
     medium:
-      "mx-1 w-full rounded min-w-fit border dark:border-gray-700 dark:bg-gray-800 ",
+      "mx-1 w-full rounded min-w-fit border dark:border-gray-700 bg-background ",
     large:
-      "mx-1 w-full max-w-lg rounded border dark:border-gray-700 dark:bg-gray-800 ",
+      "mx-1 w-full max-w-lg rounded border dark:border-gray-700 bg-background ",
   }
   return (
     <div
       dir={isArabic ? "rtl" : "ltr"}
       className={clsx(
-        currentPlan
-          ? "border-buttonPrimary-500 bg-layoutPrimary-500"
-          : "bg-white",
+        currentPlan ? "border-primary" : "bg-background",
         cardSizes[size],
         "flex flex-col gap-4 rounded border-2 p-4"
       )}
     >
-      <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
+      <h5 className="text-md 0 font-bold text-primary/70">
         {props.texts.title}
       </h5>
-      <div className=" flex items-baseline  text-gray-900 dark:text-white">
+      <div className=" text-primary/ flex  items-baseline">
         <>
           <span className="text-5xl font-extrabold tracking-tight">
             {props.price}
@@ -60,11 +59,11 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
             {props.texts.currencyText}
           </span>
         </>
-        <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+        <span className="ml-1 text-xl font-normal text-primary/70">
           / {props.texts.cycleText}
         </span>
       </div>
-      <h5 className="text-md  font-normal text-gray-500 dark:text-gray-400">
+      <h5 className="text-md  font-normal text-primary/70">
         {props.texts.subtitle}
       </h5>
 
@@ -74,19 +73,19 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
             return (
               <li key={o} className="flex ">
                 <svg
+                  aria-label="Check Icon"
                   aria-hidden="true"
-                  className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"
+                  className="m-2 h-5 w-5 flex-shrink-0 text-primary"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                 >
-                  <title>Check icon</title>
                   <path
                     fillRule="evenodd"
                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                     clipRule="evenodd"
                   ></path>
                 </svg>
-                <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
+                <span className="flex items-center  text-center font-normal leading-tight text-primary/70 ">
                   {feature.text}
                 </span>
               </li>
@@ -94,14 +93,13 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
           })}
         </ul>
       )}
-      <HawaButton
+      <Button
         onClick={props.onPlanClicked}
-        margins="none"
         disabled={currentPlan}
-        width="full"
+        className="w-full"
       >
         {props.texts.buttonText}
-      </HawaButton>
+      </Button>
     </div>
   )
 }

package/src/elements/HawaSelect.tsx

@@ -87,7 +87,7 @@ const Option: FC<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/50 hover:text-white"
+    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:text-primary-foreground hover:bg-primary"
     {...innerProps}
   >
     {children}

package/src/elements/HawaStepper.tsx

@@ -45,17 +45,17 @@ export const HawaStepper: FC<THawaTimeline> = ({
                 {/* Icon */}
                 <div
                   className={clsx(
-                    "ring-buttonPrimary-200 flex h-6 w-6 min-w-[24px] items-center  justify-center rounded  ring-2 ring-offset-2",
+                    "flex h-6 w-6 min-w-[24px] items-center justify-center  rounded ring-2  ring-primary/20 ring-offset-2",
                     i + 1 <= props.currentStep
-                      ? "bg-buttonPrimary-500 text-white"
-                      : "bg-buttonPrimary-200"
+                      ? "bg-primary text-primary-foreground "
+                      : "bg-primary/20"
                   )}
                 >
                   {i + 1 <= props.currentStep ? (
                     <svg
                       aria-label="Check Mark"
                       stroke="currentColor"
-                      fill="white"
+                      fill="currentColor"
                       stroke-width="0"
                       viewBox="0 0 512 512"
                       height="0.60em"

package/src/elements/HawaTabs.tsx

@@ -24,8 +24,8 @@ export const HawaTabs: FC<TabsTypes> = ({
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
 
   let activeTabStyle = {
-    vertical: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
-    horizontal: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
+    vertical: "inline-block py-2 px-4 text-white bg-primary active",
+    horizontal: "inline-block py-2 px-4 text-white bg-primary active",
   }
   // rounded rounded-br-none rounded-bl-none
   let inactiveTabStyle = {
@@ -42,11 +42,11 @@ export const HawaTabs: FC<TabsTypes> = ({
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",
-      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-primary bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
     horizontal: {
       container: "",
-      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
   }
   let containerStyle = {
@@ -55,9 +55,9 @@ export const HawaTabs: FC<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-primary bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit  flex-wrap border-b-buttonPrimary-500 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit  flex-wrap border-b-primary text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -78,7 +78,7 @@ export const HawaTabs: FC<TabsTypes> = ({
             ? "ml-" + marginBetween
             : "mr-" + marginBetween,
           tabsStyle[orientation],
-          "border-buttonPrimary-500",
+          "border-primary",
 
           // orientation === "vertical"
           //   ? direction === "rtl"
@@ -104,7 +104,7 @@ export const HawaTabs: FC<TabsTypes> = ({
                 props?.onChangeTab(opt)
               }}
               className={clsx(
-                "flex flex-row gap-2 items-center",
+                "flex flex-row items-center gap-2",
                 opt.value === selectedOption
                   ? // props.options[selectedOption].value === opt.value
                     [

package/src/elements/SubsectionList.tsx

@@ -64,7 +64,7 @@ const SubsectionItem: FC<TSubsectionItem> = ({
       className={clsx(
         "flex w-full cursor-pointer flex-row items-center justify-between gap-2 rounded p-2  transition-all ",
         selected === value
-          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+          ? "bg-primary text-white hover:bg-primary"
           : "hover:bg-layoutPrimary-300"
       )}
     >

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">
@@ -34,7 +34,7 @@ export const UsageCard: FC<UsageCardTypes> = (props) => {
       </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-buttonPrimary-500"
+          className="h-2.5 rounded-full bg-primary"
           style={{
             width: `${props.percent ?? 0}%`,
           }}

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;
@@ -651,6 +651,19 @@ video {
     max-width: 1400px;
   }
 }
+.clickable-link {
+  cursor: pointer;
+  color: hsl(var(--primary) / 0.8);
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  text-underline-offset: 4px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.clickable-link:hover {
+  color: hsl(var(--primary));
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1752,12 +1765,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
-.border-buttonPrimary-500 {
-  border-color: hsl(var(--button-primary-500));
-}
-.border-buttonPrimary-700 {
-  border-color: hsl(var(--button-primary-700));
-}
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1785,6 +1792,9 @@ video {
 .border-input {
   border-color: hsl(var(--input));
 }
+.border-primary {
+  border-color: hsl(var(--primary));
+}
 .border-red-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -1800,8 +1810,8 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(253 224 71 / var(--tw-border-opacity));
 }
-.border-b-buttonPrimary-500 {
-  border-bottom-color: hsl(var(--button-primary-500));
+.border-b-primary {
+  border-bottom-color: hsl(var(--primary));
 }
 .bg-background {
   background-color: hsl(var(--background));
@@ -1908,12 +1918,18 @@ 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));
 }
 .bg-primary-foreground {
   background-color: hsl(var(--primary-foreground));
 }
+.bg-primary\/20 {
+  background-color: hsl(var(--primary) / 0.2);
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1981,11 +1997,11 @@ video {
 .bg-none {
   background-image: none;
 }
-.fill-buttonPrimary-500 {
-  fill: hsl(var(--button-primary-500));
+.fill-primary {
+  fill: hsl(var(--primary));
 }
-.fill-gray-200 {
-  fill: #e5e7eb;
+.fill-primary\/20 {
+  fill: hsl(var(--primary) / 0.2);
 }
 .fill-white {
   fill: #fff;
@@ -2304,9 +2320,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
-.text-buttonPrimary-500 {
-  color: hsl(var(--button-primary-500));
-}
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -2372,12 +2385,18 @@ 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));
 }
 .text-primary-foreground {
   color: hsl(var(--primary-foreground));
 }
+.text-primary\/70 {
+  color: hsl(var(--primary) / 0.7);
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2503,6 +2522,9 @@ video {
 .ring-buttonPrimary-500 {
   --tw-ring-color: hsl(var(--button-primary-500));
 }
+.ring-primary\/20 {
+  --tw-ring-color: hsl(var(--primary) / 0.2);
+}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -2586,6 +2608,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;
 }
@@ -2747,12 +2775,6 @@ body {
 .hover\:bg-buttonPrimary-500:hover {
   background-color: hsl(var(--button-primary-500));
 }
-.hover\:bg-buttonPrimary-500\/30:hover {
-  background-color: hsl(var(--button-primary-500) / 0.3);
-}
-.hover\:bg-buttonPrimary-500\/50:hover {
-  background-color: hsl(var(--button-primary-500) / 0.5);
-}
 .hover\:bg-buttonPrimary-700:hover {
   background-color: hsl(var(--button-primary-700));
 }
@@ -2799,6 +2821,9 @@ body {
 .hover\:bg-layoutPrimary-700:hover {
   background-color: var(--layout-primary-700);
 }
+.hover\:bg-primary:hover {
+  background-color: hsl(var(--primary));
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -2827,9 +2852,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
-.hover\:text-buttonPrimary-500:hover {
-  color: hsl(var(--button-primary-500));
-}
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2842,6 +2864,12 @@ body {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
+.hover\:text-primary:hover {
+  color: hsl(var(--primary));
+}
+.hover\:text-primary-foreground:hover {
+  color: hsl(var(--primary-foreground));
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3077,6 +3105,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));
@@ -3203,10 +3258,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-:is(.dark .dark\:text-blue-400) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
 :is(.dark .dark\:text-blue-500) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -3281,9 +3332,6 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
-:is(.dark .dark\:hover\:bg-buttonPrimary-500\/60:hover) {
-  background-color: hsl(var(--button-primary-500) / 0.6);
-}
 :is(.dark .dark\:hover\:bg-buttonPrimary-700:hover) {
   background-color: hsl(var(--button-primary-700));
 }

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;
@@ -163,6 +163,11 @@
   }
 }
 
+@layer components {
+  .clickable-link {
+    @apply cursor-pointer text-primary/80 underline underline-offset-4 hover:text-primary transition-all;
+  }
+}
 @layer utilities {
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {