@noxickon/onyx 0.0.1 → 0.0.3

package/dist/pages/pages.cjs.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/jsx-runtime-CITbqOLs.js");require("react");const i=require("../chunks/Button-CU-zvMVL.js"),t=require("../chunks/Input-C5dK8VSu.js"),p=require("../chunks/useForm-cxgyAiOs.js"),m=require("../chunks/index-DGjVEo0G.js"),c=m.gql`
+  mutation Login($input: LoginInput!) {
+    login(input: $input) {
+      isAuthenticated
+    }
+  }
+`,g=({className:o,mutation:a=c,onSubmit:n,subtitle:u="",title:d="noxickon"})=>{const e=p.useForm({initialData:{username:"",password:""},validationRules:{username:["required"],password:["required"]},operation:a}),l=async s=>{s.preventDefault(),e.submit({onSuccess:x=>{n==null||n(x)}})};return r.jsxRuntimeExports.jsx("div",{className:i.twMerge("w-80",o),children:r.jsxRuntimeExports.jsxs("div",{className:"rounded-lg border border-neutral-700 bg-zinc-900/50 p-6 backdrop-blur-xl",children:[r.jsxRuntimeExports.jsxs("div",{className:"mb-4 text-center",children:[r.jsxRuntimeExports.jsx("h1",{className:"px-2 font-mono text-2xl text-white",children:d}),r.jsxRuntimeExports.jsx("p",{className:"px-2 py-1 font-mono text-xs text-neutral-400",children:u})]}),r.jsxRuntimeExports.jsxs(t.OxForm,{className:"space-y-6",onSubmit:l,children:[r.jsxRuntimeExports.jsx(t.OxInput,{autoComplete:"off",disabled:e.isLoading,error:e.hasError("username"),icon:"mdiAccount",label:"username",name:"username",placeholder:"Enter your username",required:!0,type:"text",value:e.data.username,onChange:s=>e.setData("username",s.target.value)}),r.jsxRuntimeExports.jsx(t.OxInput,{autoComplete:"off",disabled:e.isLoading,error:e.hasError("password"),icon:"mdiLockOutline",label:"password",name:"password",placeholder:"Enter your password",required:!0,type:"password",value:e.data.password,onChange:s=>e.setData("password",s.target.value)}),e.hasErrors&&r.jsxRuntimeExports.jsx(t.OxErrorMessage,{icon:"mdiAlertCircleOutline",children:"username or password is wrong"}),r.jsxRuntimeExports.jsx(i.OxButton,{disabled:e.isLoading,fullWidth:!0,isLoading:e.isLoading,size:"md",type:"submit",variant:"primary",children:e.isLoading?"Signing in...":"Sign In"})]})]})})};exports.OxLogin=g;

package/dist/pages/pages.es.js

@@ -0,0 +1,93 @@
+import { j as r } from "../chunks/jsx-runtime--oOP9f8K.js";
+import "react";
+import { t as m, O as p } from "../chunks/Button-BV4_pmoH.js";
+import { O as c, a as o, b as x } from "../chunks/Input-BraK4lDE.js";
+import { u as g } from "../chunks/useForm-BAbY8X4X.js";
+import { g as h } from "../chunks/index-DnVdNmco.js";
+const f = h`
+  mutation Login($input: LoginInput!) {
+    login(input: $input) {
+      isAuthenticated
+    }
+  }
+`, y = ({
+  className: t,
+  mutation: n = f,
+  onSubmit: a,
+  subtitle: i = "",
+  title: d = "noxickon"
+}) => {
+  const e = g({
+    initialData: {
+      username: "",
+      password: ""
+    },
+    validationRules: {
+      username: ["required"],
+      password: ["required"]
+    },
+    operation: n
+  }), l = async (s) => {
+    s.preventDefault(), e.submit({
+      onSuccess: (u) => {
+        a == null || a(u);
+      }
+    });
+  };
+  return /* @__PURE__ */ r.jsx("div", { className: m("w-80", t), children: /* @__PURE__ */ r.jsxs("div", { className: "rounded-lg border border-neutral-700 bg-zinc-900/50 p-6 backdrop-blur-xl", children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "mb-4 text-center", children: [
+      /* @__PURE__ */ r.jsx("h1", { className: "px-2 font-mono text-2xl text-white", children: d }),
+      /* @__PURE__ */ r.jsx("p", { className: "px-2 py-1 font-mono text-xs text-neutral-400", children: i })
+    ] }),
+    /* @__PURE__ */ r.jsxs(c, { className: "space-y-6", onSubmit: l, children: [
+      /* @__PURE__ */ r.jsx(
+        o,
+        {
+          autoComplete: "off",
+          disabled: e.isLoading,
+          error: e.hasError("username"),
+          icon: "mdiAccount",
+          label: "username",
+          name: "username",
+          placeholder: "Enter your username",
+          required: !0,
+          type: "text",
+          value: e.data.username,
+          onChange: (s) => e.setData("username", s.target.value)
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        o,
+        {
+          autoComplete: "off",
+          disabled: e.isLoading,
+          error: e.hasError("password"),
+          icon: "mdiLockOutline",
+          label: "password",
+          name: "password",
+          placeholder: "Enter your password",
+          required: !0,
+          type: "password",
+          value: e.data.password,
+          onChange: (s) => e.setData("password", s.target.value)
+        }
+      ),
+      e.hasErrors && /* @__PURE__ */ r.jsx(x, { icon: "mdiAlertCircleOutline", children: "username or password is wrong" }),
+      /* @__PURE__ */ r.jsx(
+        p,
+        {
+          disabled: e.isLoading,
+          fullWidth: !0,
+          isLoading: e.isLoading,
+          size: "md",
+          type: "submit",
+          variant: "primary",
+          children: e.isLoading ? "Signing in..." : "Sign In"
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  y as OxLogin
+};

package/dist/pages.d.ts

@@ -0,0 +1,14 @@
+import { default as default_2 } from 'react';
+import { DocumentNode } from 'graphql';
+
+export declare const OxLogin: default_2.FC<OxLoginProps>;
+
+export declare interface OxLoginProps {
+    className?: string;
+    mutation?: DocumentNode;
+    onSubmit: (response: unknown) => void;
+    subtitle?: string;
+    title?: string;
+}
+
+export { }

package/dist/shared.css

@@ -0,0 +1,104 @@
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --color-zinc-1000: #09090b;
+
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
+  --container-10xl: 104rem;
+  --container-12xl: 120rem;
+}
+
+@layer components {
+  .default-border {
+    @apply border border-neutral-700 transition-colors duration-150;
+  }
+
+  .default-error-border {
+    @apply border !border-rose-400;
+  }
+
+  .default-outset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900;
+  }
+
+  .default-inset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-inset;
+  }
+
+  .secondary-outset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900;
+  }
+
+  .secondary-inset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-inset;
+  }
+
+  .default-disabled {
+    @apply disabled:cursor-not-allowed disabled:text-neutral-500 disabled:hover:bg-transparent disabled:focus-visible:ring-0;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-white) 25%, transparent) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
+    border-radius: 6px;
+    border: 3px solid transparent;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+  }
+}
+
+@layer utilities {
+  @keyframes dropdownInBottom {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dropdownInTop {
+    0% {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-dropdown-in-bottom {
+    animation: dropdownInBottom 150ms ease-out forwards;
+  }
+
+  .animate-dropdown-in-top {
+    animation: dropdownInTop 150ms ease-out forwards;
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s;
+  -webkit-text-fill-color: white !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxickon/onyx",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/onyx.umd.js",
   "module": "./dist/onyx.es.js",
@@ -8,10 +8,27 @@
   "style": "./dist/onyx.css",
   "exports": {
     ".": {
-      "import": "./dist/onyx.es.js",
-      "require": "./dist/onyx.umd.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/onyx.es.js"
     },
-    "./styles": "./dist/onyx.css"
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks/hooks.es.js"
+    },
+    "./pages": {
+      "types": "./dist/pages.d.ts",
+      "import": "./dist/pages/pages.es.js"
+    },
+    "./context": {
+      "types": "./dist/context.d.ts",
+      "import": "./dist/context/context.es.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout/layout.es.js"
+    },
+    "./styles": "./dist/onyx.css",
+    "./shared": "./dist/shared.css"
   },
   "files": [
     "dist"
@@ -19,32 +36,38 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "tsc -b && vite build",
-    "prepublishOnly": "npm run test && npm run build",
+    "prepublishOnly": "npm run test:coverage && npm run build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "build:storybook": "storybook build",
+    "build:storybook": "npm run build && storybook build",
     "preview:storybook": "vite preview --outDir storybook-static",
     "format": "prettier --write .",
     "test": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "coverage:preview": "vite preview --outDir coverage"
   },
   "dependencies": {
+    "@apollo/client": "^3.13.8",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@tailwindcss/vite": "^4.1.7",
-    "clsx": "^2.1.1",
+    "axios": "^1.10.0",
+    "es-toolkit": "^1.39.6",
+    "graphql": "^16.11.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "recharts": "^2.15.3",
-    "tailwindcss": "^4.1.7"
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.7",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.0",
+    "@chromatic-com/storybook": "^4.0.1",
     "@eslint/js": "^9.25.0",
-    "@storybook/addon-docs": "^9.0.12",
-    "@storybook/addon-onboarding": "^9.0.12",
-    "@storybook/addon-vitest": "^9.0.12",
-    "@storybook/react-vite": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-onboarding": "^9.0.18",
+    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/react-vite": "^9.0.18",
     "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -58,10 +81,11 @@
     "@vitest/coverage-v8": "^3.1.4",
     "canvas": "^3.1.0",
     "eslint": "^9.25.0",
+    "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
-    "eslint-plugin-storybook": "^9.0.12",
+    "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.0.0",
     "jest-axe": "^10.0.0",
@@ -69,7 +93,7 @@
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "storybook": "^9.0.12",
+    "storybook": "^9.0.18",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5",