@sikka/hawa 0.1.1 → 0.1.2-next

package/src/tailwind.css

@@ -1,179 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
-
-@layer base {
-  :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: 0rem;
-    --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-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%;
-  }
-}
-
-@layer base {
-  .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: var(--button-primary-500-hsl);
-  }
-  .link {
-    color: var(--button-primary-500-hsl);
-  }
-  .link:hover {
-    text-decoration: underline;
-    color: var(--button-primary-700);
-  }
-
-  .inline-code {
-    font-size: 0.75rem;
-    /* color: theme("colors.slate.500"); */
-    /* background-color: theme("colors.stone.100"); */
-    border-radius: theme("borderRadius.DEFAULT");
-    /* padding-left: theme("spacing[1.5]");
-    padding-right: theme("spacing[1.5]");
-    padding-top: theme("spacing.1");
-    padding-bottom: theme("spacing.1"); */
-    padding: theme("spacing.1") theme("spacing[1.5]");
-    /* margin: theme("spacing.0") theme("spacing.1");  */
-
-    border: theme("colors.gray.300") 1px solid;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      Liberation Mono, Courier New, monospace;
-  }
-
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  .radio-item {
-    position: relative;
-  }
-
-  .radio-item input[type="radio"] {
-    display: none;
-  }
-
-  .radio-item label:before {
-    content: " ";
-    display: inline-block;
-    position: relative;
-    top: 3px;
-    margin: 0 5px 0 0;
-    width: 15px;
-    height: 15px;
-    border-radius: 11px;
-    /* border: 2px solid var(--button-primary-500); */
-    border: 2px solid #a3a3a3;
-    background-color: transparent;
-  }
-
-  .radio-item-default input[type="radio"]:checked + label:after {
-    border-radius: 100%;
-    width: 9px;
-    height: 9px;
-    position: absolute;
-    top: 6px;
-    left: 11px;
-    content: " ";
-    display: block;
-    background: var(--button-primary-500-hsl);
-  }
-  .radio-item-bordered input[type="radio"]:checked + label:after {
-    border-radius: 100%;
-    width: 9px;
-    height: 9px;
-    position: absolute;
-    top: 22px;
-    left: 23px;
-    content: " ";
-    display: block;
-    background: var(--button-primary-500-hsl);
-  }
-}
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
-@layer utilities {
-  /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
-body {
-  font-family: "IBM Plex Sans Arabic", sans-serif;
-}

package/src/translations/ar.json

@@ -1,30 +0,0 @@
-{
-  "plain": "سادة",
-  "plain-subtitle": "هذا إشعار يظهر لما نبغى نعطي المستخدم خبر عن حدوث شيء معين",
-  "emailLabel": "البريد الإلكتروني",
-  "emailPlaceholder": "ادخل البريد الإلكتروني",
-  "emailRequiredText": "البريد الإلكتروني مطلوب",
-  "emailInvalidText": "البريد الإلكتروني غير صحيح",
-  "fullNameLabel": "الإسم الكامل",
-  "fullNamePlaceholder": "فلان الفلاني",
-  "fullNameRequired": "الإسم الكامل مطلوب",
-  "usernameLabel": "اسم المستخدم",
-  "usernamePlaceholder": "ادخل المستخدم",
-  "usernameRequired": " اسم المستخدم مطلوب",
-  "phoneRequiredText": "رقم الجوال مطلوب",
-  "passwordLabel": "كلمة المرور",
-  "passwordPlaceholder": "أدخل كلمة المرور",
-  "passwordRequiredText": "كبمة المرور مطلوبة",
-  "forgotPasswordText": "نسيت كلمة المرور؟",
-  "newUserText": "مستخدم جديد؟",
-  "signUpText": "تسجيل جديد",
-  "signInText": "تسجيل الدخول",
-  "createAccount": "أنشئ حساب",
-
-  "signInViaGoogleLabel": "الدخول بواسطة Google",
-  "signInViaGithubLabel": "الدخول بواسطة Github",
-  "signInViaTwitterLabel": "الدخول بواسطة Twitter",
-  "signUpViaGoogleLabel": "التسجيل بواسطة Google",
-  "signUpViaGithubLabel": "التسجيل بواسطة Github",
-  "signUpViaTwitterLabel": "التسجيل بواسطة Twitter"
-}

package/src/translations/en.json

@@ -1,29 +0,0 @@
-{
-  "plain": "Plain",
-  "plain-subtitle": "This is an snackbar-style notification in plain style",
-  "emailLabel": "Email",
-  "emailPlaceholder": "Enter your email",
-  "emailRequiredText": "Email is required",
-  "emailInvalidText": "Invalid email address",
-  "fullNameLabel": "Full Name",
-  "fullNamePlaceholder": "Fulan AlFulani",
-  "fullNameRequired": "Full Name is required",
-  "usernameLabel": "Username",
-  "usernamePlaceholder": "Enter your username",
-  "usernameRequired": "Username is required",
-  "phoneRequiredText": "Phone is required",
-  "passwordLabel": "Password",
-  "passwordPlaceholder": "Enter password",
-  "passwordRequiredText": "Password is required",
-  "forgotPasswordText": "Forgot password?",
-  "newUserText": "New user?",
-  "signUpText": "Sign up",
-  "createAccount": "Create Account",
-  "signInText": "Sign in",
-  "signInViaGoogleLabel": "Sign in with Google",
-  "signInViaGithubLabel": "Sign in with Github",
-  "signInViaTwitterLabel": "Sign in with Twitter",
-  "signUpViaGoogleLabel": "Sign up with Google",
-  "signUpViaGithubLabel": "Sign up with Github",
-  "signUpViaTwitterLabel": "Sign up with Twitter"
-}

package/src/translations/i18n.js

@@ -1,15 +0,0 @@
-const translations = {
-  en: require("./en.json"),
-  ar: require("./ar.json")
-  // ... you can add more languages here.
-};
-
-let currentLocale = "en"; // default language
-
-export function setLocale(locale) {
-  currentLocale = locale;
-}
-
-export function t(key) {
-  return translations[currentLocale][key] || key;
-}

package/src/util.ts

@@ -1,149 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-type Palette = {
-  name: string
-  colors: {
-    [key: number]: string
-  }
-}
-type Rgb = {
-  r: number
-  g: number
-  b: number
-}
-function hexToRgb(hex: string): Rgb | null {
-  const sanitizedHex = hex.replaceAll("##", "#")
-  const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
-    sanitizedHex
-  )
-
-  if (!colorParts) {
-    return null
-  }
-
-  const [, r, g, b] = colorParts
-
-  return {
-    r: parseInt(r, 16),
-    g: parseInt(g, 16),
-    b: parseInt(b, 16),
-  } as Rgb
-}
-
-function rgbToHex(r: number, g: number, b: number): string {
-  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2)
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
-}
-
-function getTextColor(color: string): "#FFF" | "#333" {
-  const rgbColor = hexToRgb(color)
-
-  if (!rgbColor) {
-    return "#333"
-  }
-
-  const { r, g, b } = rgbColor
-  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b
-
-  return luma < 120 ? "#FFF" : "#333"
-}
-
-function lighten(hex: string, intensity: number): string {
-  const color = hexToRgb(`#${hex}`)
-
-  if (!color) {
-    return ""
-  }
-
-  const r = Math.round(color.r + (255 - color.r) * intensity)
-  const g = Math.round(color.g + (255 - color.g) * intensity)
-  const b = Math.round(color.b + (255 - color.b) * intensity)
-
-  return rgbToHex(r, g, b)
-}
-
-function darken(hex: string, intensity: number): string {
-  const color = hexToRgb(hex)
-
-  if (!color) {
-    return ""
-  }
-
-  const r = Math.round(color.r * intensity)
-  const g = Math.round(color.g * intensity)
-  const b = Math.round(color.b * intensity)
-
-  return rgbToHex(r, g, b)
-}
-
-function getPallette(baseColor: string): Palette {
-  const name = baseColor
-
-  const response: Palette = {
-    name,
-    colors: {
-      500: `#${baseColor}`.replace("##", "#"),
-    },
-  }
-
-  const intensityMap: {
-    [key: number]: number
-  } = {
-    50: 0.95,
-    100: 0.9,
-    200: 0.75,
-    300: 0.6,
-    400: 0.3,
-    600: 0.9,
-    700: 0.75,
-    800: 0.6,
-    900: 0.49,
-  }
-
-  ;[50, 100, 200, 300, 400].forEach((level) => {
-    response.colors[level] = lighten(baseColor, intensityMap[level])
-  })
-  ;[600, 700, 800, 900].forEach((level) => {
-    response.colors[level] = darken(baseColor, intensityMap[level])
-  })
-
-  return response as Palette
-}
-
-export { getPallette }
-
-// const hexToRgb = (hex) => {
-//   let d = hex?.split("#")[1];
-//   var aRgbHex = d?.match(/.{1,2}/g);
-//   var aRgb = [
-//     parseInt(aRgbHex[0], 16),
-//     parseInt(aRgbHex[1], 16),
-//     parseInt(aRgbHex[2], 16)
-//   ];
-//   return aRgb;
-// };
-// const getTextColor = (backColor) => {
-//   let rgbArray = hexToRgb(backColor);
-//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {
-//     return "#000000";
-//   } else {
-//     return "#ffffff";
-//   }
-// };
-// const replaceAt = function (string, index, replacement) {
-//   // if (replacement == "" || replacement == " ") {
-//   //   return (
-//   //     string.substring(0, index) +
-//   //     string.substring(index + replacement.length )
-//   //   );
-//   // }
-//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)
-//   return replaced
-// };
-
-// export { hexToRgb, getTextColor, replaceAt };

package/tailwind.config.js

@@ -1,227 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-const BUTTON_PRIMARY = "#C62E65";
-const LAYOUT_PRIMARY = "#EEF7FC";
-
-module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: ["class"],
-  theme: {
-    fontFamily: {
-      plex: ["IBM Plex Sans Arabic"]
-    },
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px"
-      }
-    },
-    extend: {
-      boxShadow: {
-        neobrutalism: "5px 5px 0px 0px rgba(0,0,0,1);"
-      },
-      maxWidth: {
-        "2xs": "250px"
-      },
-      screens: {
-        xs: "440px"
-      },
-      transitionProperty: {
-        height: "height"
-      },
-      keyframes: {
-        collapse: {
-          "0%,100%": { transform: "scaleY(0)" },
-          "10%": { transform: "scaleY(0)" },
-          "20%": { transform: "scaleY(0)" },
-          "30%": { transform: "scaleY(0)" },
-          "40%": { transform: "scaleY(0)" },
-          "50%": { transform: "scaleY(0)" },
-          "60%": { transform: "scaleY(0)" }
-          // "100%": { transform: "scaleY(1)" },
-        },
-        expandDown: {
-          "0%": {
-            // opacity: 0,
-            // maxHeight: 0,
-            height: "0px"
-          },
-          "100%": {
-            // opacity: 1,
-            // maxHeight: 100,
-            height: "15rem"
-          }
-        },
-        expandUp: {
-          "0%": {
-            // opacity: 1,
-            // maxHeight: 100,
-            height: "15rem"
-          },
-          "100%": {
-            // opacity: 0,
-            // maxHeight: 0,
-            height: "0rem"
-          }
-        },
-        blink: {
-          "0%": {
-            opacity: "0.2"
-          },
-          "50%": {
-            opacity: "1"
-          },
-          "100%": {
-            opacity: " 0.2"
-          }
-        },
-        slideDownAndFade: {
-          from: { opacity: 0, transform: "translateY(-2px)" },
-          to: { opacity: 1, transform: "translateY(0)" }
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: "translateX(2px)" },
-          to: { opacity: 1, transform: "translateX(0)" }
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: "translateY(2px)" },
-          to: { opacity: 1, transform: "translateY(0)" }
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: "translateX(-2px)" },
-          to: { opacity: 1, transform: "translateX(0)" }
-        }
-      },
-      animation: {
-        blink: "blink 2s infinite ease-in-out",
-
-        collapse: "collapse",
-        expandDown: "expandDown 500ms ease-in-out",
-        expandUp: "expandUp 100ms ease-in-out",
-        slideDownAndFade:
-          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideLeftAndFade:
-          "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideRightAndFade:
-          "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)"
-      },
-      // borderRadius: {
-      //   DEFAULT: "var(--border-radius)",
-      //   inner: "var(--border-radius-inner)"
-      // },
-      borderRadius: {
-        inner: "var(--radius-inner)",
-        DEFAULT: "var(--radius)",
-        xl: `calc(var(--radius) + 4px)`,
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)"
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
-        },
-
-        blackA: {
-          1: "hsla(0, 0%, 0%, 0.012)",
-          2: "hsla(0, 0%, 0%, 0.024)",
-          3: "hsla(0, 0%, 0%, 0.055)",
-          4: "hsla(0, 0%, 0%, 0.078)",
-          5: "hsla(0, 0%, 0%, 0.106)",
-          6: "hsla(0, 0%, 0%, 0.133)",
-          7: "hsla(0, 0%, 0%, 0.169)",
-          8: "hsla(0, 0%, 0%, 0.267)",
-          9: "hsla(0, 0%, 0%, 0.447)",
-          10: "hsla(0, 0%, 0%, 0.498)",
-          11: "hsla(0, 0%, 0%, 0.608)",
-          12: "hsla(0, 0%, 0%, 0.875)"
-        },
-        mauve: {
-          1: "hsl(300, 26.0%, 99.0%)",
-          2: "hsl(270, 20.0%, 98.0%)",
-          3: "hsl(267, 13.8%, 95.3%)",
-          4: "hsl(265, 12.2%, 92.7%)",
-          5: "hsl(263, 11.6%, 90.3%)",
-          6: "hsl(261, 11.1%, 87.7%)",
-          7: "hsl(257, 10.8%, 84.3%)",
-          8: "hsl(249, 10.4%, 75.5%)",
-          9: "hsl(252, 6.0%, 57.3%)",
-          10: "hsl(250, 5.0%, 52.3%)",
-          11: "hsl(252, 5.0%, 40.7%)",
-          12: "hsl(260, 10.0%, 13.5%)"
-        },
-        violet: {
-          1: "hsl(255, 65.0%, 99.4%)",
-          2: "hsl(252, 100%, 99.0%)",
-          3: "hsl(252, 96.9%, 97.4%)",
-          4: "hsl(252, 91.5%, 95.5%)",
-          5: "hsl(252, 85.1%, 93.0%)",
-          6: "hsl(252, 77.8%, 89.4%)",
-          7: "hsl(252, 71.0%, 83.7%)",
-          8: "hsl(252, 68.6%, 76.3%)",
-          9: "hsl(252, 56.0%, 57.5%)",
-          10: "hsl(251, 48.1%, 53.5%)",
-          11: "hsl(250, 43.0%, 48.0%)",
-          12: "hsl(250, 43.0%, 26.0%)"
-        },
-
-        buttonPrimary: {
-          300: "hsl(var(--button-primary-300))",
-          500: "hsl(var(--button-primary-500))",
-          700: "hsl(var(--button-primary-700))"
-        },
-        buttonSecondary: {
-          300: "var(--button-secondary-300)",
-          500: "var(--button-secondary-500)",
-          700: "var(--button-secondary-700)"
-        },
-        layoutPrimary: {
-          300: "var(--layout-primary-300)",
-          500: "var(--layout-primary-500)",
-          600: "var(--layout-primary-600)",
-          700: "var(--layout-primary-700)",
-          // 700: "#b7aff7",
-          dark: "#251b73",
-          1000: "#C4DEFD"
-        },
-        inputPrimary: {
-          500: "#EEF7FC",
-          1000: "#C4DEFD"
-        }
-      }
-    }
-  },
-  plugins: [require("tailwindcss-animate")]
-};

package/tools/build-styles.js

@@ -1,17 +0,0 @@
-/*eslint-disable no-var, vars-on-top, no-console */
-const { promisify } = require('util');
-const { exec } = require('child_process');
-
-const run = promisify(exec);
-
-run('rm -rf .tmp/')
-  .then(() => run('node-sass -o .tmp/ src/styles.scss'))
-  .then(() => run('postcss .tmp/styles.css --use autoprefixer --no-map -d .tmp/'))
-  .then(() => run('mv .tmp/styles.css .tmp/styles-compiled.css'))
-  .then(() => run('mkdir -p es lib'))
-  .then(() => run('cp .tmp/styles-compiled.css es/ && cp .tmp/styles-compiled.css lib/'))
-  .then(() => run('cp src/styles.scss es/ && cp src/styles.scss lib/'))
-  .then(() => console.log('✔ Styles have been build'))
-  .catch(err => {
-    console.error(err);
-  });

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": false,
-    "noEmitHelpers": false,
-    "inlineSourceMap": false,
-    "importHelpers": true,
-    "esModuleInterop": true,
-    "noResolve": false,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "rootDir": "src"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "*.js+(|x)",
-    "**/*.js+(|x)"
-  ],
-  "exclude": ["node_modules"]
-}