@sikka/hawa 0.1.36 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/Label.tsx

@@ -19,6 +19,7 @@ const Label = React.forwardRef<
     {...props}
   />
 ))
+
 Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }

package/src/elements/Popover.tsx

@@ -9,12 +9,11 @@ const PopoverContent = React.forwardRef<
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
- 
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 rounded border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 dark:shadow-dark" ,
+        "z-50 rounded border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 dark:shadow-dark",
         className
       )}
       {...props}
@@ -24,12 +23,12 @@ const PopoverContent = React.forwardRef<
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 interface PopoverProps {
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
   trigger: React.ReactNode
   children: React.ReactNode
   className?: string
-  align?: "start" | "center" | "end"
   sideOffset?: number
-  side?: "top" | "right" | "bottom" | "left"
 }
 
 const Popover: React.FC<PopoverProps> = ({

package/src/elements/Select.tsx

@@ -1,15 +1,11 @@
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-// import { ChevronDown } from "lucide-react"
 
 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>

package/src/elements/Tabs.tsx

@@ -5,16 +5,11 @@ import { cn } from "../util"
 
 const TabsContext = React.createContext<{
   orientation?: "vertical" | "horizontal"
-}>({
-  orientation: "vertical", // default value
-})
+}>({ orientation: "vertical" })
 
-// const Tabs = TabsPrimitive.Root
 type TabsRootProps = React.ComponentPropsWithoutRef<
   typeof TabsPrimitive.Root
-> & {
-  orientation?: "vertical" | "horizontal"
-}
+> & { orientation?: "vertical" | "horizontal" }
 
 const Tabs = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Root>,
@@ -23,9 +18,9 @@ const Tabs = React.forwardRef<
   <TabsPrimitive.Root
     ref={ref}
     className={cn(
-      className,
       "flex gap-2",
-      orientation === "horizontal" ? "flex-row" : "flex-col"
+      orientation === "horizontal" ? "flex-row" : "flex-col",
+      className
     )}
     {...props}
   >
@@ -36,23 +31,16 @@ const Tabs = React.forwardRef<
 ))
 Tabs.displayName = TabsPrimitive.Root.displayName
 
-// type TabsListProps = React.ComponentPropsWithoutRef<
-//   typeof TabsPrimitive.List
-// > & {
-//   //   orientation?: "vertical" | "horizontal"
-// }
-
 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 ",
+        "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
       )}
@@ -70,7 +58,7 @@ const TabsTrigger = React.forwardRef<
     <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 ",
+        "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}

package/src/elements/Textarea.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-
 import { cn } from "../util"
 import { Label } from "./Label"
 

package/src/elements/Toast.tsx

@@ -4,23 +4,6 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../util"
 
-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 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",
   {
@@ -45,6 +28,23 @@ const toastVariants = cva(
   }
 )
 
+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> &
@@ -79,14 +79,9 @@ const ToastAction = React.forwardRef<
       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-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-
         "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
       )}
@@ -151,7 +146,6 @@ const ToastDescription = React.forwardRef<
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
 type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 export {

package/src/elements/Toaster.tsx

@@ -12,19 +12,14 @@ import { cn } from "../util"
 
 export function Toaster(props) {
   const { toasts } = useToast()
-  console.log("toaster direction", props.direction)
+  let isRTL = props.direction === "rtl"
   return (
-    <ToastProvider
-      swipeDirection={props.direction === "rtl" ? "left" : "right"}
-    >
+    <ToastProvider swipeDirection={isRTL ? "left" : "right"}>
       {toasts.map(function ({ id, title, description, action, ...toastProps }) {
         return (
           <Toast direction={props.direction} key={id} {...toastProps}>
             <div
-              className={cn(
-                "grid gap-1",
-                props.direction === "rtl" ? "text-right" : "text-left"
-              )}
+              className={cn("grid gap-1", isRTL ? "text-right" : "text-left")}
             >
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (
@@ -36,9 +31,7 @@ export function Toaster(props) {
           </Toast>
         )
       })}
-      <ToastViewport
-        className={cn("gap-2", props.direction === "rtl" && "fixed left-0")}
-      />
+      <ToastViewport className={cn("gap-2", isRTL && "fixed left-0")} />
     </ToastProvider>
   )
 }

package/src/elements/Tooltip.tsx

@@ -22,35 +22,28 @@ const TooltipArrow = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Arrow>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
 >(({ className, ...props }, ref) => (
-  <TooltipPrimitive.Arrow
-    ref={ref}
-    className={cn(
-      //   "fill-white",
-      className
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />
 ))
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
 
 type TooltipTypes = {
+  open?: any
   side?: "top" | "right" | "bottom" | "left"
-  children?: any
   content?: any
-  open?: any
+  children?: any
   defaultOpen?: any
   onOpenChange?: any
   delayDuration?: any
 }
 
-export const Tooltip: React.FunctionComponent<TooltipTypes> = ({
-  children,
-  content,
+const Tooltip: React.FunctionComponent<TooltipTypes> = ({
+  side,
   open,
+  content,
+  children,
   defaultOpen,
   onOpenChange,
   delayDuration = 300,
-  side,
   ...props
 }) => {
   return (
@@ -63,10 +56,10 @@ export const Tooltip: React.FunctionComponent<TooltipTypes> = ({
         <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 }
+
+export { Tooltip }

package/src/hooks/useToast.ts

@@ -4,7 +4,7 @@ import * as React from "react"
 import type { ToastActionElement, ToastProps } from "../elements/Toast"
 
 const TOAST_LIMIT = 5
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_REMOVE_DELAY = 100000
 
 type ToasterToast = ToastProps & {
   id: string
@@ -102,21 +102,13 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
+          t.id === toastId || toastId === undefined ? { ...t, open: false } : t
         ),
       }
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
+        return { ...state, toasts: [] }
       }
       return {
         ...state,

package/src/styles.css

@@ -3303,9 +3303,6 @@ body {
   --tw-blur: blur(16px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
-  border-color: hsl(var(--muted) / 0.4);
-}
 .group.error .group-\[\.error\]\:border-muted\/40 {
   border-color: hsl(var(--muted) / 0.4);
 }
@@ -3322,9 +3319,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
-.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
-  border-color: hsl(var(--destructive) / 0.3);
-}
 .group.error .group-\[\.error\]\:hover\:border-error\/30:hover {
   border-color: hsl(var(--error) / 0.3);
 }
@@ -3337,10 +3331,6 @@ body {
 .group.warning .group-\[\.warning\]\:hover\:border-warning\/30:hover {
   border-color: hsl(var(--warning) / 0.3);
 }
-.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
-}
 .group.error .group-\[\.error\]\:hover\:bg-error:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--error) / var(--tw-bg-opacity));
@@ -3357,10 +3347,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--warning) / var(--tw-bg-opacity));
 }
-.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
-  --tw-text-opacity: 1;
-  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
-}
 .group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
   --tw-text-opacity: 1;
   color: rgb(254 242 242 / var(--tw-text-opacity));
@@ -3381,10 +3367,6 @@ body {
   --tw-text-opacity: 1;
   color: hsl(var(--warning-foreground) / var(--tw-text-opacity));
 }
-.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--destructive) / var(--tw-ring-opacity));
-}
 .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
@@ -3755,6 +3737,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
+:is(.dark .dark\:border-primary\/10) {
+  border-color: hsl(var(--primary) / 0.1);
+}
 :is(.dark .dark\:bg-background) {
   background-color: hsl(var(--background));
 }