@sikka/hawa 0.0.287 → 0.1.0

package/dist/styles.css

@@ -388,46 +388,51 @@ video {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    /* --radius: 0.5rem; */
+    --radius: 0rem;
+    --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
-    --layout-primary-700: #b7aff7;
     /* --layout-primary-500: #dfdcfc; */
+
+    --layout-primary-700: #b7aff7;
     --layout-primary-500: #fdfdfd;
     --layout-primary-600: #f7f7f7;
     --layout-primary-300: #e7e5fa;
-
     --layout-secondary: #d2cdfa;
 
     --button-primary-300: 247 72% 61%;
     --button-primary-500: 247 82% 57%;
     --button-primary-500-hsl: hsl(247, 82%, 57%);
     --button-primary-700: 247 71% 39%;
-
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --border-radius: 10px;
-    --border-radius-inner: calc(
-      var(--border-radius) - calc(var(--border-radius) / 3)
-    );
   }
-
   .dark {
     --layout-primary-500: #363636;
     --layout-primary-600: #2d2d2d;
     --layout-primary-700: #1d1d1d;
     --layout-primary-300: #4a4a4a;
     /* --layout-primary-300: hsl(240, 8%, 10%); */
-
     /* --background: 240 10% 3.9%; //odd */
-    --background: 240 8% 10%;
 
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
@@ -442,7 +447,7 @@ video {
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
@@ -469,7 +474,7 @@ video {
     font-size: 0.75rem;
     /* color: theme("colors.slate.500"); */
     /* background-color: theme("colors.stone.100"); */
-    border-radius: var(--border-radius);
+    border-radius: var(--radius);
     /* padding-left: theme("spacing[1.5]");
     padding-right: theme("spacing[1.5]");
     padding-top: theme("spacing.1");
@@ -642,41 +647,15 @@ video {
 }
 .container {
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
 }
-@media (min-width: 440px) {
-
-  .container {
-    max-width: 440px;
-  }
-}
-@media (min-width: 640px) {
-
-  .container {
-    max-width: 640px;
-  }
-}
-@media (min-width: 768px) {
-
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1536px) {
+@media (min-width: 1400px) {
 
   .container {
-    max-width: 1536px;
+    max-width: 1400px;
   }
 }
 .sr-only {
@@ -1500,6 +1479,9 @@ video {
 .gap-5 {
   gap: 1.25rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-8 {
   gap: 2rem;
 }
@@ -1541,6 +1523,16 @@ video {
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0px * var(--tw-space-y-reverse));
 }
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1594,7 +1586,7 @@ video {
   white-space: nowrap;
 }
 .rounded {
-  border-radius: var(--border-radius);
+  border-radius: var(--radius);
 }
 .rounded-3xl {
   border-radius: 1.5rem;
@@ -1606,82 +1598,82 @@ video {
   border-radius: 9999px;
 }
 .rounded-inner {
-  border-radius: var(--border-radius-inner);
+  border-radius: var(--radius-inner);
 }
 .rounded-lg {
-  border-radius: 0.5rem;
+  border-radius: var(--radius);
 }
 .rounded-md {
-  border-radius: 0.375rem;
+  border-radius: calc(var(--radius) - 2px);
 }
 .rounded-none {
   border-radius: 0px;
 }
 .rounded-xl {
-  border-radius: 0.75rem;
+  border-radius: calc(var(--radius) + 4px);
 }
 .rounded-b {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-b-lg {
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-l {
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-l-lg {
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-l-none {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
 .rounded-r {
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
 }
 .rounded-t {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
 }
 .rounded-t-inner {
-  border-top-left-radius: var(--border-radius-inner);
-  border-top-right-radius: var(--border-radius-inner);
+  border-top-left-radius: var(--radius-inner);
+  border-top-right-radius: var(--radius-inner);
 }
 .rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
 }
 .rounded-bl {
-  border-bottom-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-bl-lg {
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-bl-none {
   border-bottom-left-radius: 0px;
 }
 .rounded-br {
-  border-bottom-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--radius);
 }
 .rounded-br-lg {
-  border-bottom-right-radius: 0.5rem;
+  border-bottom-right-radius: var(--radius);
 }
 .rounded-br-none {
   border-bottom-right-radius: 0px;
 }
 .rounded-tl-lg {
-  border-top-left-radius: 0.5rem;
+  border-top-left-radius: var(--radius);
 }
 .rounded-tl-none {
   border-top-left-radius: 0px;
 }
 .rounded-tr-lg {
-  border-top-right-radius: 0.5rem;
+  border-top-right-radius: var(--radius);
 }
 .rounded-tr-none {
   border-top-right-radius: 0px;
@@ -1722,6 +1714,9 @@ video {
 .border-r {
   border-right-width: 1px;
 }
+.border-r-0 {
+  border-right-width: 0px;
+}
 .border-r-2 {
   border-right-width: 2px;
 }
@@ -1785,6 +1780,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
 }
+.border-input {
+  border-color: hsl(var(--input));
+}
 .border-red-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -1846,6 +1844,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
 }
+.bg-destructive {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
+}
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1907,6 +1909,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 }
+.bg-primary {
+  background-color: hsl(var(--primary));
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1935,6 +1940,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(127 29 29 / var(--tw-bg-opacity));
 }
+.bg-secondary {
+  background-color: hsl(var(--secondary));
+}
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -2052,6 +2060,10 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .px-\[5px\] {
   padding-left: 5px;
   padding-right: 5px;
@@ -2293,6 +2305,10 @@ video {
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
+.text-destructive-foreground {
+  --tw-text-opacity: 1;
+  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
+}
 .text-foreground {
   color: hsl(var(--foreground));
 }
@@ -2351,6 +2367,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
 }
+.text-primary {
+  color: hsl(var(--primary));
+}
+.text-primary-foreground {
+  color: hsl(var(--primary-foreground));
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2367,6 +2389,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
 }
+.text-secondary-foreground {
+  color: hsl(var(--secondary-foreground));
+}
 .text-violet-11 {
   --tw-text-opacity: 1;
   color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
@@ -2479,6 +2504,9 @@ video {
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
+.ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background));
+}
 .drop-shadow-lg {
   --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
   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);
@@ -2502,6 +2530,13 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-colors {
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-100 {
   transition-delay: 100ms;
 }
@@ -2576,6 +2611,25 @@ video {
 body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+.file\:bg-transparent::file-selector-button {
+  background-color: transparent;
+}
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.file\:font-medium::file-selector-button {
+  font-weight: 500;
+}
+.placeholder\:text-muted-foreground::-moz-placeholder {
+  color: hsl(var(--muted-foreground));
+}
+.placeholder\:text-muted-foreground::placeholder {
+  color: hsl(var(--muted-foreground));
+}
 .after\:absolute::after {
   content: var(--tw-content);
   position: absolute;
@@ -2674,6 +2728,9 @@ body {
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
+.hover\:bg-accent:hover {
+  background-color: hsl(var(--accent));
+}
 .hover\:bg-blue-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -2697,6 +2754,9 @@ body {
 .hover\:bg-buttonSecondary-700:hover {
   background-color: var(--button-secondary-700);
 }
+.hover\:bg-destructive\/90:hover {
+  background-color: hsl(var(--destructive) / 0.9);
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2734,10 +2794,16 @@ body {
 .hover\:bg-layoutPrimary-700:hover {
   background-color: var(--layout-primary-700);
 }
+.hover\:bg-primary\/90:hover {
+  background-color: hsl(var(--primary) / 0.9);
+}
 .hover\:bg-red-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(252 165 165 / var(--tw-bg-opacity));
 }
+.hover\:bg-secondary\/80:hover {
+  background-color: hsl(var(--secondary) / 0.8);
+}
 .hover\:bg-yellow-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
@@ -2745,6 +2811,9 @@ body {
 .hover\:font-bold:hover {
   font-weight: 700;
 }
+.hover\:text-accent-foreground:hover {
+  color: hsl(var(--accent-foreground));
+}
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2841,10 +2910,34 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
 }
+.focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.focus-visible\:ring-ring:focus-visible {
+  --tw-ring-color: hsl(var(--ring));
+}
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
 .disabled\:bg-gray-200:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
@@ -2882,6 +2975,12 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
+.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
+  cursor: not-allowed;
+}
+.peer:disabled ~ .peer-disabled\:opacity-70 {
+  opacity: 0.7;
+}
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
@@ -3153,6 +3252,9 @@ body {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
+:is(.dark .dark\:outline-gray-700) {
+  outline-color: #374151;
+}
 :is(.dark .dark\:ring-offset-gray-800) {
   --tw-ring-offset-color: #1f2937;
 }
@@ -3354,8 +3456,8 @@ body {
   }
 
   .md\:rounded-l-lg {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
   }
 
   .md\:border-l {

package/es/blocks/AuthForms/SignInBlock.d.ts

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

package/es/blocks/AuthForms/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./AppLanding";
 export * from "./SignInPhone";
 export * from "./SignInForm";
+export * from "./SignInBlock";
 export * from "./SignUpForm";
 export * from "./NewPasswordForm";
 export * from "./ResetPasswordForm";

package/es/elements/Button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/es/elements/Card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/es/elements/Icons.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type IconProps = React.HTMLAttributes<SVGElement>;
+export declare const Icons: {
+    logo: (props: IconProps) => import("react").JSX.Element;
+    twitter: (props: IconProps) => import("react").JSX.Element;
+    gitHub: (props: IconProps) => import("react").JSX.Element;
+    radix: (props: IconProps) => import("react").JSX.Element;
+    aria: (props: IconProps) => import("react").JSX.Element;
+    npm: (props: IconProps) => import("react").JSX.Element;
+    yarn: (props: IconProps) => import("react").JSX.Element;
+    pnpm: (props: IconProps) => import("react").JSX.Element;
+    react: (props: IconProps) => import("react").JSX.Element;
+    tailwind: (props: IconProps) => import("react").JSX.Element;
+    google: (props: IconProps) => import("react").JSX.Element;
+    apple: (props: IconProps) => import("react").JSX.Element;
+    paypal: (props: IconProps) => import("react").JSX.Element;
+    spinner: (props: IconProps) => import("react").JSX.Element;
+};
+export {};

package/es/elements/Input.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/es/elements/Label.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };