@sikka/hawa 0.1.30 → 0.1.32

package/dist/styles.css

@@ -402,6 +402,23 @@ video {
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+
+    --info: 209 62% 50%;
+    --info-foreground: 0 0% 98%;
+
+    --success: 148 48% 43%;
+    --success-foreground: 0 0% 98%;
+
+    --warning: 24 75% 50%;
+    --warning-foreground: 0 0% 98%;
+
+    --error: 0 84.2% 60.2%;
+    --error-foreground: 0 0% 98%;
+    /* // info: "text-info-700 bg-info-100",
+    // warning: "text-warning-700 bg-warning-100",
+    // error: "text-destructive-700 bg-destructive-100",
+    // success: "text-success-700 bg-success-100", */
+
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
@@ -678,6 +695,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.pointer-events-auto {
+  pointer-events: auto;
+}
 .visible {
   visibility: visible;
 }
@@ -813,6 +833,9 @@ video {
 .z-50 {
   z-index: 50;
 }
+.z-\[100\] {
+  z-index: 100;
+}
 .m-0 {
   margin: 0px;
 }
@@ -1142,6 +1165,9 @@ video {
 .max-h-full {
   max-height: 100%;
 }
+.max-h-screen {
+  max-height: 100vh;
+}
 .min-h-\[37\.75px\] {
   min-height: 37.75px;
 }
@@ -1817,6 +1843,14 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
+.border-destructive {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--destructive) / var(--tw-border-opacity));
+}
+.border-error {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--error) / var(--tw-border-opacity));
+}
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1919,6 +1953,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
 }
+.bg-error {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--error) / var(--tw-bg-opacity));
+}
 .bg-foreground\/10 {
   background-color: hsl(var(--foreground) / 0.1);
 }
@@ -1973,6 +2011,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
+.bg-info {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--info) / var(--tw-bg-opacity));
+}
 .bg-layoutPrimary-300 {
   background-color: var(--layout-primary-300);
 }
@@ -2039,6 +2081,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
+.bg-success {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--success) / var(--tw-bg-opacity));
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2046,6 +2092,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: hsl(252 77.8% 89.4% / var(--tw-bg-opacity));
 }
+.bg-warning {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--warning) / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2250,6 +2300,9 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
+.pr-8 {
+  padding-right: 2rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -2418,9 +2471,16 @@ video {
   --tw-text-opacity: 1;
   color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
 }
+.text-error-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--error-foreground) / var(--tw-text-opacity));
+}
 .text-foreground {
   color: hsl(var(--foreground));
 }
+.text-foreground\/50 {
+  color: hsl(var(--foreground) / 0.5);
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2453,6 +2513,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
+.text-info-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--info-foreground) / var(--tw-text-opacity));
+}
 .text-mauve-11 {
   --tw-text-opacity: 1;
   color: hsl(252 5.0% 40.7% / var(--tw-text-opacity));
@@ -2507,10 +2571,18 @@ video {
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
+.text-success-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--success-foreground) / var(--tw-text-opacity));
+}
 .text-violet-11 {
   --tw-text-opacity: 1;
   color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
 }
+.text-warning-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--warning-foreground) / var(--tw-text-opacity));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2545,6 +2617,9 @@ video {
 .opacity-60 {
   opacity: 0.6;
 }
+.opacity-90 {
+  opacity: 0.9;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2666,6 +2741,11 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3027,6 +3107,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(252 165 165 / var(--tw-bg-opacity));
 }
+.hover\:bg-secondary:hover {
+  background-color: hsl(var(--secondary));
+}
 .hover\:bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
@@ -3048,6 +3131,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
+.hover\:text-foreground:hover {
+  color: hsl(var(--foreground));
+}
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -3119,6 +3205,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3196,6 +3285,111 @@ 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);
+}
+.group.info .group-\[\.info\]\:border-muted\/40 {
+  border-color: hsl(var(--muted) / 0.4);
+}
+.group.success .group-\[\.success\]\:border-muted\/40 {
+  border-color: hsl(var(--muted) / 0.4);
+}
+.group.warning .group-\[\.warning\]\:border-muted\/40 {
+  border-color: hsl(var(--muted) / 0.4);
+}
+.group.destructive .group-\[\.destructive\]\:text-red-300 {
+  --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);
+}
+.group.info .group-\[\.info\]\:hover\:border-info\/30:hover {
+  border-color: hsl(var(--info) / 0.3);
+}
+.group.success .group-\[\.success\]\:hover\:border-success\/30:hover {
+  border-color: hsl(var(--success) / 0.3);
+}
+.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));
+}
+.group.info .group-\[\.info\]\:hover\:bg-info:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--info) / var(--tw-bg-opacity));
+}
+.group.success .group-\[\.success\]\:hover\:bg-success:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--success) / var(--tw-bg-opacity));
+}
+.group.warning .group-\[\.warning\]\:hover\:bg-warning:hover {
+  --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));
+}
+.group.error .group-\[\.error\]\:hover\:text-error-foreground:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--error-foreground) / var(--tw-text-opacity));
+}
+.group.info .group-\[\.info\]\:hover\:text-info-foreground:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--info-foreground) / var(--tw-text-opacity));
+}
+.group.success .group-\[\.success\]\:hover\:text-success-foreground:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--success-foreground) / var(--tw-text-opacity));
+}
+.group.warning .group-\[\.warning\]\:hover\:text-warning-foreground:hover {
+  --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));
+}
+.group.error .group-\[\.error\]\:focus\:ring-error:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--error) / var(--tw-ring-opacity));
+}
+.group.info .group-\[\.info\]\:focus\:ring-info:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--info) / var(--tw-ring-opacity));
+}
+.group.success .group-\[\.success\]\:focus\:ring-success:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--success) / var(--tw-ring-opacity));
+}
+.group.warning .group-\[\.warning\]\:focus\:ring-warning:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--warning) / var(--tw-ring-opacity));
+}
+.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
+  --tw-ring-offset-color: #dc2626;
+}
 .peer:checked ~ .peer-checked\:border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -3251,6 +3445,18 @@ body {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
+  --tw-translate-x: var(--radix-toast-swipe-end-x);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
+  --tw-translate-x: var(--radix-toast-swipe-move-x);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 @keyframes slideUpAndFade {
 
   from {
@@ -3382,6 +3588,9 @@ body {
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.data-\[swipe\=move\]\:transition-none[data-swipe=move] {
+  transition-property: none;
+}
 .data-\[state\=open\]\:animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;
@@ -3400,9 +3609,21 @@ body {
   --tw-exit-translate-x: initial;
   --tw-exit-translate-y: initial;
 }
+.data-\[swipe\=end\]\:animate-out[data-swipe=end] {
+  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\]\:fade-out-80[data-state=closed] {
+  --tw-exit-opacity: 0.8;
+}
 .data-\[state\=open\]\:fade-in-0[data-state=open] {
   --tw-enter-opacity: 0;
 }
@@ -3424,6 +3645,12 @@ body {
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
   --tw-enter-translate-y: 0.5rem;
 }
+.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
+  --tw-exit-translate-x: 100%;
+}
+.data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
+  --tw-enter-translate-y: -100%;
+}
 .group[data-disabled] .group-data-\[disabled\]\:text-mauve-8 {
   --tw-text-opacity: 1;
   color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
@@ -3724,6 +3951,18 @@ body {
 }
 @media (min-width: 640px) {
 
+  .sm\:bottom-0 {
+    bottom: 0px;
+  }
+
+  .sm\:right-0 {
+    right: 0px;
+  }
+
+  .sm\:top-auto {
+    top: auto;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -3737,6 +3976,10 @@ body {
     flex-direction: row;
   }
 
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+
   .sm\:gap-0 {
     gap: 0px;
   }
@@ -3782,6 +4025,10 @@ body {
     --tw-content: '';
     content: var(--tw-content);
   }
+
+  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
+    --tw-enter-translate-y: 100%;
+  }
 }
 @media (min-width: 768px) {
 
@@ -3817,6 +4064,10 @@ body {
     width: 100%;
   }
 
+  .md\:max-w-\[420px\] {
+    max-width: 420px;
+  }
+
   .md\:max-w-md {
     max-width: 28rem;
   }

package/es/elements/Toast.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { type VariantProps } from "class-variance-authority";
+declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
+declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: {
+    variant?: "default" | "destructive";
+    severity?: "info" | "warning" | "error" | "success" | "none";
+} & import("class-variance-authority/dist/types").ClassProp) => string> & {
+    severity?: "info" | "warning" | "error" | "success" | "none";
+    direction?: "rtl" | "ltr";
+} & React.RefAttributes<HTMLLIElement>>;
+declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/es/elements/Toaster.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Toaster(props: any): import("react").JSX.Element;

package/es/elements/index.d.ts

@@ -62,3 +62,5 @@ export * from "./Popover";
 export * from "./Tabs";
 export * from "./Textarea";
 export * from "./Separator";
+export * from "./Toast";
+export * from "./Toaster";

package/es/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./useDiscloser";
 export * from "./useHover";
+export * from "./useToast";

package/es/hooks/useToast.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { ToastActionElement, ToastProps } from "../elements/Toast";
+type ToasterToast = ToastProps & {
+    id: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    severity?: "info" | "warning" | "error" | "success" | "none";
+    action?: ToastActionElement;
+};
+declare const actionTypes: {
+    readonly ADD_TOAST: "ADD_TOAST";
+    readonly UPDATE_TOAST: "UPDATE_TOAST";
+    readonly DISMISS_TOAST: "DISMISS_TOAST";
+    readonly REMOVE_TOAST: "REMOVE_TOAST";
+};
+type ActionType = typeof actionTypes;
+type Action = {
+    type: ActionType["ADD_TOAST"];
+    toast: ToasterToast;
+} | {
+    type: ActionType["UPDATE_TOAST"];
+    toast: Partial<ToasterToast>;
+} | {
+    type: ActionType["DISMISS_TOAST"];
+    toastId?: ToasterToast["id"];
+} | {
+    type: ActionType["REMOVE_TOAST"];
+    toastId?: ToasterToast["id"];
+};
+interface State {
+    toasts: ToasterToast[];
+}
+export declare const reducer: (state: State, action: Action) => State;
+type Toast = Omit<ToasterToast, "id">;
+declare function toast({ ...props }: Toast): {
+    id: string;
+    dismiss: () => void;
+    update: (props: ToasterToast) => void;
+};
+declare function useToast(): {
+    toast: typeof toast;
+    dismiss: (toastId?: string) => void;
+    toasts: ToasterToast[];
+};
+export { useToast, toast };