@sikka/hawa 0.1.4 → 0.1.5-next

package/README.md

@@ -1,60 +1,38 @@
-<p align="center">
-  <img src="https://xakher-images.s3.ap-southeast-1.amazonaws.com/hawa-logo.png" alt="Hawa | هواء" />
-</p>
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-# Hawa | هواء
+## Getting Started
 
-[![NPM](https://img.shields.io/npm/v/@sikka/hawa.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@sikka/hawa)
-[![NPM](https://img.shields.io/npm/dt/@sikka/hawa.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@sikka/hawa)
-
-> Opinionated UI Kit for web apps and websites built with TailwindCSS
-
-## Install
+First, run the development server:
 
 ```bash
-npm install --save @sikka/hawa
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
 ```
 
-# Roadmap
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-- Organize code
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-</br>
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
-# Contributing
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-To contribute, clone this github repository and run the development server
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-```bash
-git clone git@github.com:sikka-software/hawa.git
-cd hawa
-npm install
-```
+## Learn More
 
-</br>
+To learn more about Next.js, take a look at the following resources:
 
-# TESTING
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-Run development server
-
-```bash
-git clone git@github.com:sikka-software/hawa.git
-cd hawa
-npm install
-npm run storybook
-```
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## License
+## Deploy on Vercel
 
-MIT © [SIKKA SOFTWARE](https://sikka.sa)
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-<!--start: logo-->
-<p align="center">
-  <a href="https://sikka.io">
-    <img width="44" alt="Sikka" src="https://i.postimg.cc/8cK4tnKQ/sikka-symbol-black.png">
-  </a>
-</p>
-<p align="center">
-  <sub>An open source project by <a href="https://sikka.io">Sikka</a></sub>
-</p>
-<!--end: logo-->
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/dist/index.css

@@ -0,0 +1,490 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
+:root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    /* --card: 0 0% 100%; */
+    --card: 210 50% 98%;
+    --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%;
+
+    --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%;
+    --radius: 0.5rem;
+    --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
+
+    --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;
+  }
+.dark {
+    --layout-primary-500: #363636;
+    --layout-primary-600: #2d2d2d;
+    --layout-primary-700: #1d1d1d;
+    --layout-primary-300: #4a4a4a;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    /* --card: 240 10% 3.9%; */
+    --card: 0 0% 2%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --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%;
+  }
+.link::after {
+    content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
+    display: inline-block;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    width: 0.75em;
+    vertical-align: middle;
+    color: hsl(var(--primary));
+  }
+.link {
+    color: hsl(var(--primary));
+  }
+.link:hover {
+    text-decoration: underline;
+    color: var(--button-primary-700);
+  }
+input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+/* * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  } */
+*, ::before, ::after{
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+}
+::backdrop{
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+}
+.hawa-inline-flex{
+    display: inline-flex;
+}
+.hawa-h-10{
+    height: 2.5rem;
+}
+.hawa-h-11{
+    height: 2.75rem;
+}
+.hawa-h-14{
+    height: 3.5rem;
+}
+.hawa-h-7{
+    height: 1.75rem;
+}
+.hawa-h-9{
+    height: 2.25rem;
+}
+.hawa-h-fit{
+    height: -moz-fit-content;
+    height: fit-content;
+}
+.hawa-w-10{
+    width: 2.5rem;
+}
+.hawa-w-7{
+    width: 1.75rem;
+}
+.hawa-cursor-pointer{
+    cursor: pointer;
+}
+.hawa-select-none{
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+}
+.hawa-items-center{
+    align-items: center;
+}
+.hawa-justify-center{
+    justify-content: center;
+}
+.hawa-rounded{
+    border-radius: var(--radius);
+}
+.hawa-rounded-md{
+    border-radius: calc(var(--radius) - 2px);
+}
+.hawa-border{
+    border-width: 1px;
+}
+.hawa-border-2{
+    border-width: 2px;
+}
+.hawa-border-input{
+    border-color: hsl(var(--input));
+}
+.hawa-border-primary{
+    border-color: hsl(var(--primary));
+}
+.hawa-bg-background{
+    background-color: hsl(var(--background));
+}
+.hawa-bg-destructive{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
+}
+.hawa-bg-primary{
+    background-color: hsl(var(--primary));
+}
+.hawa-bg-primary-foreground{
+    background-color: hsl(var(--primary-foreground));
+}
+.hawa-bg-primary\/20{
+    background-color: hsl(var(--primary) / 0.2);
+}
+.hawa-bg-secondary{
+    background-color: hsl(var(--secondary));
+}
+.hawa-px-10{
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+}
+.hawa-px-2{
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+.hawa-px-3{
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+.hawa-px-4{
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.hawa-px-8{
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+.hawa-py-1{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+.hawa-py-2{
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+.hawa-py-4{
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+.hawa-text-\[10px\]{
+    font-size: 10px;
+}
+.hawa-text-\[11px\]{
+    font-size: 11px;
+}
+.hawa-text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+.hawa-font-bold{
+    font-weight: 700;
+}
+.hawa-font-medium{
+    font-weight: 500;
+}
+.hawa-uppercase{
+    text-transform: uppercase;
+}
+.hawa-text-destructive-foreground{
+    --tw-text-opacity: 1;
+    color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
+}
+.hawa-text-primary{
+    color: hsl(var(--primary));
+}
+.hawa-text-primary-foreground{
+    color: hsl(var(--primary-foreground));
+}
+.hawa-text-secondary-foreground{
+    color: hsl(var(--secondary-foreground));
+}
+.hawa-underline-offset-4{
+    text-underline-offset: 4px;
+}
+.hawa-ring-offset-background{
+    --tw-ring-offset-color: hsl(var(--background));
+}
+.hawa-transition-all{
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+.hawa-transition-colors{
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+@keyframes enter{
+    from{
+        opacity: var(--tw-enter-opacity, 1);
+        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+    }
+}
+@keyframes exit{
+    to{
+        opacity: var(--tw-exit-opacity, 1);
+        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+    }
+}
+/* Chrome, Safari and Opera */
+
+/* @import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities"; */
+body {
+  font-family: "IBM Plex Sans Arabic", sans-serif;
+}
+
+/* :root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+} */
+
+.hover\:hawa-bg-accent:hover{
+    background-color: hsl(var(--accent));
+}
+
+.hover\:hawa-bg-destructive\/90:hover{
+    background-color: hsl(var(--destructive) / 0.9);
+}
+
+.hover\:hawa-bg-primary\/40:hover{
+    background-color: hsl(var(--primary) / 0.4);
+}
+
+.hover\:hawa-bg-primary\/90:hover{
+    background-color: hsl(var(--primary) / 0.9);
+}
+
+.hover\:hawa-bg-secondary\/80:hover{
+    background-color: hsl(var(--secondary) / 0.8);
+}
+
+.hover\:hawa-text-accent-foreground:hover{
+    color: hsl(var(--accent-foreground));
+}
+
+.hover\:hawa-underline:hover{
+    text-decoration-line: underline;
+}
+
+.focus-visible\:hawa-outline-none:focus-visible{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.focus-visible\:hawa-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\:hawa-ring-ring:focus-visible{
+    --tw-ring-color: hsl(var(--ring));
+}
+
+.focus-visible\:hawa-ring-offset-2:focus-visible{
+    --tw-ring-offset-width: 2px;
+}
+
+.active\:hawa-translate-x-0:active{
+    --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));
+}
+
+.active\:hawa-translate-x-0\.5:active{
+    --tw-translate-x: 0.125rem;
+    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));
+}
+
+.active\:hawa-translate-y-0:active{
+    --tw-translate-y: 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));
+}
+
+.active\:hawa-translate-y-0\.5:active{
+    --tw-translate-y: 0.125rem;
+    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));
+}
+
+.disabled\:hawa-pointer-events-none:disabled{
+    pointer-events: none;
+}
+
+.disabled\:hawa-opacity-50:disabled{
+    opacity: 0.5;
+}
+
+:is(.hawa-dark .dark\:hawa-bg-black){
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}

package/dist/index.d.mts

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

package/dist/index.d.ts

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