@noxickon/onyx 0.1.0 → 1.0.0

package/dist/pages/pages.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/jsx-runtime-CITbqOLs.js");require("react");const o=require("../chunks/Button-D-v4l8ZE.js"),n=require("../chunks/Input-CLi1H63d.js"),i=require("../chunks/AuthContext-uU1aP9gj.js"),p=require("../chunks/useForm-F8doF8lW.js"),g=require("../chunks/errorHelper-DbQKxxQA.js"),j=i.gql`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/ui-ChsTPgui.js");require("react");const n=require("../chunks/hooks-DiKvsNs-.js"),p=require("../chunks/query-BhvXa-m6.js"),c=n.gql`
   mutation Login($input: LoginInput!) {
     login(input: $input) {
       success
@@ -10,4 +10,4 @@
       }
     }
   }
-`,E=({cacheQuery:a=i.DEFAULT_GET_CURRENT_USER,className:u,mutation:l=j,onSubmit:d,subtitle:m="",title:x="noxickon"})=>{const e=p.useForm({initialData:{username:"",password:""},validationRules:{username:["required"],password:["required"]},operation:l,options:{update:(t,{data:s})=>{s?.login.success&&t.writeQuery({query:a,data:{me:s.login.me}})}}}),c=async t=>{t.preventDefault(),e.submit({onError:s=>{g.OxHandleGraphQLFormErrors(s,e)},onSuccess:s=>{s.data&&s.data.login.success?d?.(s):console.error("Login failed: Invalid credentials")}})};return r.jsxRuntimeExports.jsx("div",{className:o.twMerge("w-80",u),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:x}),r.jsxRuntimeExports.jsx("p",{className:"px-2 py-1 font-mono text-xs text-neutral-400",children:m})]}),r.jsxRuntimeExports.jsxs(n.OxForm,{className:"space-y-6",onSubmit:c,children:[r.jsxRuntimeExports.jsx(n.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:t=>e.setData("username",t.target.value)}),r.jsxRuntimeExports.jsx(n.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:t=>e.setData("password",t.target.value)}),e.hasErrors&&r.jsxRuntimeExports.jsx(n.OxErrorMessage,{icon:"mdiAlertCircleOutline",children:"username or password is wrong"}),r.jsxRuntimeExports.jsx(o.OxButton,{disabled:e.isLoading,fullWidth:!0,isLoading:e.isLoading,size:"md",type:"submit",variant:"primary",children:e.isLoading?"Signing in...":"Sign In"})]})]})})};exports.OxLogin=E;
+`,j=({cacheQuery:i=p.DEFAULT_GET_CURRENT_USER,className:o,mutation:a=c,onSubmit:x,subtitle:u="",title:d="noxickon",...l})=>{const s=n.useForm({initialData:{username:"",password:""},validationRules:{username:["required"],password:["required"]},operation:a,options:{update:(t,{data:r})=>{r?.login.success&&t.writeQuery({query:i,data:{me:r.login.me}})}}}),m=async t=>{t.preventDefault(),s.submit({onError:r=>{e.handleGraphQLFormErrors(r,s)},onSuccess:r=>{r.data&&r.data.login.success?x?.(r):console.error("Login failed: Invalid credentials")}})};return e.jsxRuntimeExports.jsx("div",{className:e.cn("w-80",o),...l,children:e.jsxRuntimeExports.jsxs("div",{className:"ox-gray-border rounded-lg bg-gray-50 p-6",children:[e.jsxRuntimeExports.jsxs("div",{className:"mb-4 text-center",children:[e.jsxRuntimeExports.jsx("h1",{className:"text-gray-1200 px-2 font-mono text-2xl",children:d}),e.jsxRuntimeExports.jsx("p",{className:"px-2 py-1 font-mono text-xs",children:u})]}),e.jsxRuntimeExports.jsxs(e.OxForm,{className:"space-y-6",onSubmit:m,children:[e.jsxRuntimeExports.jsxs(e.OxForm.Field,{children:[e.jsxRuntimeExports.jsx(e.OxLabel,{children:"username"}),e.jsxRuntimeExports.jsxs(e.OxTextInput.Container,{disabled:s.isLoading,error:s.hasError("username"),required:!0,value:s.data.username,onChange:t=>s.setData("username",t),children:[e.jsxRuntimeExports.jsx(e.OxTextInput.Icon,{path:"mdiAccount"}),e.jsxRuntimeExports.jsx(e.OxTextInput,{autoComplete:"off",name:"username",placeholder:"Enter your username"})]})]}),e.jsxRuntimeExports.jsxs(e.OxForm.Field,{children:[e.jsxRuntimeExports.jsx(e.OxLabel,{children:"password"}),e.jsxRuntimeExports.jsxs(e.OxTextInput.Container,{disabled:s.isLoading,error:s.hasError("password"),required:!0,type:"password",value:s.data.password,onChange:t=>s.setData("password",t),children:[e.jsxRuntimeExports.jsx(e.OxTextInput.Icon,{path:"mdiLockOutline"}),e.jsxRuntimeExports.jsx(e.OxTextInput,{autoComplete:"off",name:"password",placeholder:"Enter your password"}),e.jsxRuntimeExports.jsx(e.OxTextInput.VisibilityButton,{})]})]}),s.hasErrors?e.jsxRuntimeExports.jsx(e.OxError,{icon:"mdiAlertCircleOutline",children:"username or password is wrong"}):null,e.jsxRuntimeExports.jsx(e.OxButton,{disabled:s.isLoading,fullWidth:!0,isLoading:s.isLoading,size:"sm",type:"submit",variant:"primary",children:s.isLoading?"Signing in...":"Sign In"})]})]})})};exports.OxLogin=j;

package/dist/pages/pages.es.js

@@ -1,11 +1,8 @@
-import { j as r } from "../chunks/jsx-runtime--oOP9f8K.js";
+import { _ as e, $ as h, K as i, Y as o, P as n, W as g, e as j, a0 as f } from "../chunks/ui-DxsSYHCv.js";
 import "react";
-import { t as c, O as p } from "../chunks/Button-bARrxYyo.js";
-import { O as x, a as o, b as g } from "../chunks/Input-dfvmdIHi.js";
-import { g as h, D as f } from "../chunks/AuthContext-CaZKJMxQ.js";
-import { u as b } from "../chunks/useForm-BuzPPZZE.js";
-import { b as w } from "../chunks/errorHelper-qN6iGI6f.js";
-const L = h`
+import { l as L, n as y } from "../chunks/hooks-bJFfbTks.js";
+import { D as w } from "../chunks/query-iDn3qBGF.js";
+const E = y`
   mutation Login($input: LoginInput!) {
     login(input: $input) {
       success
@@ -18,14 +15,15 @@ const L = h`
     }
   }
 `, C = ({
-  cacheQuery: i = f,
-  className: n,
-  mutation: t = L,
-  onSubmit: d,
-  subtitle: l = "",
-  title: u = "noxickon"
+  cacheQuery: t = w,
+  className: d,
+  mutation: l = E,
+  onSubmit: u,
+  subtitle: m = "",
+  title: c = "noxickon",
+  ...p
 }) => {
-  const e = b({
+  const s = L({
     initialData: {
       username: "",
       password: ""
@@ -34,74 +32,78 @@ const L = h`
       username: ["required"],
       password: ["required"]
     },
-    operation: t,
+    operation: l,
     options: {
-      update: (a, { data: s }) => {
-        s?.login.success && a.writeQuery({
-          query: i,
-          data: { me: s.login.me }
+      update: (a, { data: r }) => {
+        r?.login.success && a.writeQuery({
+          query: t,
+          data: { me: r.login.me }
         });
       }
     }
-  }), m = async (a) => {
-    a.preventDefault(), e.submit({
-      onError: (s) => {
-        w(s, e);
+  }), x = async (a) => {
+    a.preventDefault(), s.submit({
+      onError: (r) => {
+        f(r, s);
       },
-      onSuccess: (s) => {
-        s.data && s.data.login.success ? d?.(s) : console.error("Login failed: Invalid credentials");
+      onSuccess: (r) => {
+        r.data && r.data.login.success ? u?.(r) : console.error("Login failed: Invalid credentials");
       }
     });
   };
-  return /* @__PURE__ */ r.jsx("div", { className: c("w-80", n), 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: u }),
-      /* @__PURE__ */ r.jsx("p", { className: "px-2 py-1 font-mono text-xs text-neutral-400", children: l })
+  return /* @__PURE__ */ e.jsx("div", { className: h("w-80", d), ...p, children: /* @__PURE__ */ e.jsxs("div", { className: "ox-gray-border rounded-lg bg-gray-50 p-6", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "mb-4 text-center", children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "text-gray-1200 px-2 font-mono text-2xl", children: c }),
+      /* @__PURE__ */ e.jsx("p", { className: "px-2 py-1 font-mono text-xs", children: m })
     ] }),
-    /* @__PURE__ */ r.jsxs(x, { className: "space-y-6", onSubmit: m, children: [
-      /* @__PURE__ */ r.jsx(
-        o,
+    /* @__PURE__ */ e.jsxs(i, { className: "space-y-6", onSubmit: x, children: [
+      /* @__PURE__ */ e.jsxs(i.Field, { children: [
+        /* @__PURE__ */ e.jsx(o, { children: "username" }),
+        /* @__PURE__ */ e.jsxs(
+          n.Container,
+          {
+            disabled: s.isLoading,
+            error: s.hasError("username"),
+            required: !0,
+            value: s.data.username,
+            onChange: (a) => s.setData("username", a),
+            children: [
+              /* @__PURE__ */ e.jsx(n.Icon, { path: "mdiAccount" }),
+              /* @__PURE__ */ e.jsx(n, { autoComplete: "off", name: "username", placeholder: "Enter your username" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(i.Field, { children: [
+        /* @__PURE__ */ e.jsx(o, { children: "password" }),
+        /* @__PURE__ */ e.jsxs(
+          n.Container,
+          {
+            disabled: s.isLoading,
+            error: s.hasError("password"),
+            required: !0,
+            type: "password",
+            value: s.data.password,
+            onChange: (a) => s.setData("password", a),
+            children: [
+              /* @__PURE__ */ e.jsx(n.Icon, { path: "mdiLockOutline" }),
+              /* @__PURE__ */ e.jsx(n, { autoComplete: "off", name: "password", placeholder: "Enter your password" }),
+              /* @__PURE__ */ e.jsx(n.VisibilityButton, {})
+            ]
+          }
+        )
+      ] }),
+      s.hasErrors ? /* @__PURE__ */ e.jsx(g, { icon: "mdiAlertCircleOutline", children: "username or password is wrong" }) : null,
+      /* @__PURE__ */ e.jsx(
+        j,
         {
-          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: (a) => e.setData("username", a.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: (a) => e.setData("password", a.target.value)
-        }
-      ),
-      e.hasErrors && /* @__PURE__ */ r.jsx(g, { icon: "mdiAlertCircleOutline", children: "username or password is wrong" }),
-      /* @__PURE__ */ r.jsx(
-        p,
-        {
-          disabled: e.isLoading,
+          disabled: s.isLoading,
           fullWidth: !0,
-          isLoading: e.isLoading,
-          size: "md",
+          isLoading: s.isLoading,
+          size: "sm",
           type: "submit",
           variant: "primary",
-          children: e.isLoading ? "Signing in..." : "Sign In"
+          children: s.isLoading ? "Signing in..." : "Sign In"
         }
       )
     ] })

package/dist/pages.d.ts

@@ -1,11 +1,11 @@
-import { default as default_2 } from 'react';
 import { DocumentNode } from 'graphql';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
 
-export declare const OxLogin: default_2.FC<OxLoginProps>;
+export declare const OxLogin: ({ cacheQuery, className, mutation, onSubmit, subtitle, title, ...props }: OxLoginProps) => JSX.Element;
 
-export declare interface OxLoginProps {
+export declare interface OxLoginProps extends HTMLAttributes<HTMLDivElement> {
     cacheQuery?: DocumentNode;
-    className?: string;
     mutation?: DocumentNode;
     onSubmit: (response: unknown) => void;
     subtitle?: string;

package/dist/routes/routes.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../chunks/ui-ChsTPgui.js");const o=require("../chunks/useAuth-DxoDe3YA.js"),s=require("../chunks/hooks-DiKvsNs-.js"),i=({children:t,onAuthenticated:u=null,onLoading:n=null})=>{const{isLoggedIn:e,loading:r}=o.useOxAuth();return r?n:e?u:t},c=({children:t,onLoading:u=null,onUnauthenticated:n=null})=>{const{isLoggedIn:e,loading:r}=o.useOxAuth();return r?u:e?t:n},d=({children:t,onLoading:u=null,onUnauthorized:n=null,roles:e=["admin"]})=>{const{loading:r,user:l}=o.useOxAuth();return r?u:!l||s.isEmpty(e)||!e.includes(l.role)?n:t};exports.OxGuestRoute=i;exports.OxProtectedRoute=c;exports.OxRoleRoute=d;

package/dist/routes/routes.es.js

@@ -0,0 +1,31 @@
+import "../chunks/ui-DxsSYHCv.js";
+import { u as o } from "../chunks/useAuth-BFgXzu6Q.js";
+import { q as l } from "../chunks/hooks-bJFfbTks.js";
+const f = ({
+  children: t,
+  onAuthenticated: r = null,
+  onLoading: u = null
+}) => {
+  const { isLoggedIn: n, loading: e } = o();
+  return e ? u : n ? r : t;
+}, g = ({
+  children: t,
+  onLoading: r = null,
+  onUnauthenticated: u = null
+}) => {
+  const { isLoggedIn: n, loading: e } = o();
+  return e ? r : n ? t : u;
+}, m = ({
+  children: t,
+  onLoading: r = null,
+  onUnauthorized: u = null,
+  roles: n = ["admin"]
+}) => {
+  const { loading: e, user: i } = o();
+  return e ? r : !i || l(n) || !n.includes(i.role) ? u : t;
+};
+export {
+  f as OxGuestRoute,
+  g as OxProtectedRoute,
+  m as OxRoleRoute
+};

package/dist/routes.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+export declare const OxGuestRoute: ({ children, onAuthenticated, onLoading, }: OxGuestRouteProps) => ReactNode;
+
+export declare interface OxGuestRouteProps {
+    children: ReactNode;
+    onAuthenticated?: ReactNode;
+    onLoading?: ReactNode;
+}
+
+export declare const OxProtectedRoute: ({ children, onLoading, onUnauthenticated, }: OxProtectedRouteProps) => ReactNode;
+
+export declare interface OxProtectedRouteProps {
+    children: ReactNode;
+    onLoading?: ReactNode;
+    onUnauthenticated?: ReactNode;
+}
+
+export declare const OxRoleRoute: ({ children, onLoading, onUnauthorized, roles, }: OxRoleRouteProps) => ReactNode;
+
+export declare interface OxRoleRouteProps {
+    children: ReactNode;
+    onLoading?: ReactNode;
+    onUnauthorized?: ReactNode;
+    roles?: string[];
+}
+
+export { }

package/dist/shared.css

@@ -1,42 +1,103 @@
+@import './animations.css';
+
+:root {
+  /* Field components (Input, Radio, Checkbox, etc) */
+  --ox-field-control-col: 1;
+  --ox-field-control-row: 1;
+  --ox-field-label-col: 2;
+  --ox-field-label-row: 1;
+  --ox-field-desc-row: 2;
+
+  /* Menu components (Dropdown, Select, etc) */
+  --ox-menu-icon-col: 1;
+  --ox-menu-label-col: 2;
+  --ox-menu-shortcut-col: 3;
+}
+
 @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;
+
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: 0.875rem;
+  --text-xxxs: 0.5rem;
+  --text-xxxs--line-height: 0.75rem;
+
+  --color-gray-50: #0d0d0c;
+  --color-gray-100: #111110;
+  --color-gray-150: #161615;
+  --color-gray-200: #191918;
+  --color-gray-300: #222221;
+  --color-gray-400: #2a2a28;
+  --color-gray-500: #31312e;
+  --color-gray-600: #3b3a37;
+  --color-gray-700: #494844;
+  --color-gray-800: #62605b;
+  --color-gray-900: #6f6d66;
+  --color-gray-1000: #7c7b74;
+  --color-gray-1100: #b5b3ad;
+  --color-gray-1200: #fff;
+}
+
+@utility ox-default-disabled {
+  opacity: 50%;
+  cursor: not-allowed;
+  color: theme('colors.gray.800');
 }
 
 @layer components {
-  .default-border {
-    @apply border border-neutral-700 transition-colors duration-150;
+  .ox-gray-border {
+    @apply border border-gray-400;
   }
 
-  .default-error-border {
-    @apply border !border-rose-400;
+  .ox-rose-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;
+  .ox-violet-outset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-100;
   }
 
-  .default-inset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-700 focus-visible:ring-inset;
+  .ox-violet-outset-within-focus {
+    @apply focus-within:ring-2 focus-within:ring-violet-700 focus-within:ring-offset-1 focus-within:ring-offset-gray-100;
   }
 
-  .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;
+  .ox-violet-inset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-700;
   }
 
-  .secondary-inset-focus {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-inset;
+  .ox-gray-outset-focus {
+    @apply focus-visible:ring-gray-1000 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-100;
   }
 
-  .default-disabled {
-    @apply disabled:cursor-not-allowed disabled:text-neutral-500 disabled:hover:bg-transparent disabled:focus-visible:ring-0;
+  .ox-gray-inset-focus {
+    @apply focus-visible:ring-gray-1000 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset;
+  }
+
+  .ox-rose-outset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-100;
+  }
+
+  .ox-rose-inset-focus {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rose-500;
+  }
+
+  .ox-backdrop-blur-parent {
+    backdrop-filter: blur(0);
+    -webkit-backdrop-filter: blur(0);
+  }
+
+  .ox-pagination-button-base {
+    @apply enabled:text-gray-1200 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent transition-colors duration-150 enabled:cursor-pointer;
+  }
+
+  .ox-pagination-button {
+    @apply enabled:text-gray-1200 disabled:ox-default-disabled inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent enabled:cursor-pointer enabled:hover:bg-gray-300;
   }
 
   * {
@@ -63,38 +124,6 @@
   }
 }
 
-@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,