@octave-org/ui 0.0.3 → 0.0.4

package/README.md

@@ -1,26 +1,98 @@
 # @octave-org/ui
 
-This library was generated with [Nx](https://nx.dev).
+A UI component library built on top of [Mantine](https://mantine.dev), designed for use with Next.js projects.
 
-## Branding
+> **Note:** This package is currently only stable on the **Next.js Pages Router**. App Router support is not guaranteed.
 
-Set shared branding once at the provider level:
+---
+
+## Installation
+
+```bash
+# npm
+npm install @octave-org/ui
+
+# yarn
+yarn add @octave-org/ui
+
+# pnpm
+pnpm add @octave-org/ui
+
+# bun
+bun add @octave-org/ui
+```
+
+---
+
+## Setup
+
+### 1. Update `next.config.ts`
+
+Add `@octave-org/ui` to `transpilePackages` so Next.js can process the package correctly:
+
+```ts
+// next.config.ts
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['@octave-org/ui'],
+};
+
+export default nextConfig;
+```
+
+### 2. Wrap your app with `OctaveProvider`
+
+In your `pages/_app.tsx`, wrap your application with the `OctaveProvider` component to enable theming and notifications:
 
 ```tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app';
 import { OctaveProvider } from '@octave-org/ui';
 
-<OctaveProvider
-  branding={{
-    companyName: 'Acme Inc.',
-    slogan: 'Secure access for modern teams',
-  }}
->
-  <App />
-</OctaveProvider>;
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <OctaveProvider>
+      <Component {...pageProps} />
+    </OctaveProvider>
+  );
+}
+```
+
+---
+
+## Usage
+
+### OctaveButton
+
+Use `OctaveButton` to render a styled button. You can pass a label, an action handler, or a link.
+
+```tsx
+import { OctaveButton } from '@octave-org/ui';
+
+export default function MyPage() {
+  return (
+    <OctaveButton
+      btnProps={{
+        label: 'Click me',
+        action: () => console.log('Button clicked!'),
+        context: 'primary', // 'primary' | 'destructive' | 'success' | 'warning'
+      }}
+    />
+  );
+}
 ```
 
-`OctaveAuthWrapper`, `OctaveAuthForm`, and `OctaveShell` will use that branding by default. You can still override branding per component with a `branding` prop when needed.
+You can also render the button as a link:
 
-## Running unit tests
+```tsx
+<OctaveButton
+  btnProps={{
+    label: 'Go to Dashboard',
+    link: '/dashboard',
+    context: 'success',
+  }}
+/>
+```
 
-Run `nx test @octave-org/ui` to execute the unit tests via [Jest](https://jestjs.io).
+---

package/dist/index.esm.js

@@ -2767,7 +2767,6 @@ function LinksGroup({
       paddingLeft: theme.spacing.md,
       marginLeft: theme.spacing.xl,
       fontSize: theme.fontSizes.sm,
-      color: isDark ? theme.colors.dark[0] : theme.colors.gray[7],
       borderLeft: `1px solid ${isDark ? theme.colors.dark[4] : theme.colors.gray[3]}`,
       backgroundColor: hoveredLink === link.label ? isDark ? theme.colors.dark[7] : theme.colors.gray[0] : 'transparent'
     },
@@ -2786,7 +2785,6 @@ function LinksGroup({
         fontWeight: 500,
         padding: `${theme.spacing.xs} ${theme.spacing.md}`,
         fontSize: theme.fontSizes.sm,
-        color: isDark ? theme.white : theme.black,
         backgroundColor: controlHovered ? isDark ? theme.colors.dark[7] : theme.colors.gray[0] : 'transparent'
       },
       children: jsxs(Group, {
@@ -3798,28 +3796,31 @@ function ThemeTrigger() {
 
 const defaultBranding = {
   companyName: 'Octave Designs',
-  slogan: 'The ui system you deserve'
+  slogan: 'The ui system you deserve',
+  logo: jsx(IconGalaxy, {})
 };
 const OctaveBrandingContext = /*#__PURE__*/createContext(defaultBranding);
 function OctaveBrandingProvider({
   children,
   branding
 }) {
-  var _branding$companyName, _branding$slogan;
+  var _branding$companyName, _branding$slogan, _branding$logo;
   return jsx(OctaveBrandingContext.Provider, {
     value: {
       companyName: (_branding$companyName = branding == null ? void 0 : branding.companyName) != null ? _branding$companyName : defaultBranding.companyName,
-      slogan: (_branding$slogan = branding == null ? void 0 : branding.slogan) != null ? _branding$slogan : defaultBranding.slogan
+      slogan: (_branding$slogan = branding == null ? void 0 : branding.slogan) != null ? _branding$slogan : defaultBranding.slogan,
+      logo: (_branding$logo = branding == null ? void 0 : branding.logo) != null ? _branding$logo : defaultBranding.logo
     },
     children: children
   });
 }
 function useOctaveBranding(overrides) {
-  var _overrides$companyNam, _overrides$slogan;
+  var _overrides$companyNam, _overrides$slogan, _overrides$logo;
   const branding = useContext(OctaveBrandingContext);
   return {
     companyName: (_overrides$companyNam = overrides == null ? void 0 : overrides.companyName) != null ? _overrides$companyNam : branding.companyName,
-    slogan: (_overrides$slogan = overrides == null ? void 0 : overrides.slogan) != null ? _overrides$slogan : branding.slogan
+    slogan: (_overrides$slogan = overrides == null ? void 0 : overrides.slogan) != null ? _overrides$slogan : branding.slogan,
+    logo: (_overrides$logo = overrides == null ? void 0 : overrides.logo) != null ? _overrides$logo : branding.logo
   };
 }
 
@@ -3860,7 +3861,7 @@ function OctaveShell({
   const NavLogo = () => jsxs(Flex, {
     gap: "xs",
     align: "center",
-    children: [logo, (opened || isMobile) && jsxs(Stack, {
+    children: [appBranding.logo, (opened || isMobile) && jsxs(Stack, {
       gap: 0,
       children: [jsx(Text, {
         fw: 600,
@@ -4933,9 +4934,7 @@ function OctaveAuthWrapper(props) {
           children: [jsx(ThemeIcon, {
             variant: "default",
             size: 50,
-            children: jsx(IconGalaxy, {
-              size: 30
-            })
+            children: branding.logo
           }), jsx(Divider, {
             orientation: "vertical"
           }), jsx(OctaveStackedText, {

package/dist/src/lib/blocks/auth/wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.d.ts","sourceRoot":"","sources":["../../../../../src/lib/blocks/auth/wrapper.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAqD9D"}
+{"version":3,"file":"wrapper.d.ts","sourceRoot":"","sources":["../../../../../src/lib/blocks/auth/wrapper.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAqD9D"}

package/dist/src/lib/branding.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 export interface OctaveBranding {
     companyName?: string;
     slogan?: string;
+    logo?: React.ReactNode;
 }
 export declare function OctaveBrandingProvider({ children, branding, }: PropsWithChildren<{
     branding?: OctaveBranding;
@@ -9,5 +10,6 @@ export declare function OctaveBrandingProvider({ children, branding, }: PropsWit
 export declare function useOctaveBranding(overrides?: OctaveBranding): {
     companyName: string;
     slogan: string;
+    logo: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
 };
 //# sourceMappingURL=branding.d.ts.map

package/dist/src/lib/branding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"branding.d.ts","sourceRoot":"","sources":["../../../src/lib/branding.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,2CAWlD;AAED,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,cAAc;;;EAO3D"}
+{"version":3,"file":"branding.d.ts","sourceRoot":"","sources":["../../../src/lib/branding.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAErE,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAWD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,2CAYlD;AAED,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,cAAc;;;;EAQ3D"}

package/dist/src/lib/layout/nav-links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-links.d.ts","sourceRoot":"","sources":["../../../../src/lib/layout/nav-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAYlE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAI,EACJ,eAAe,EACf,KAAK,EACL,WAAW,GACZ,EAAE,eAAe,2CAmFjB"}
+{"version":3,"file":"nav-links.d.ts","sourceRoot":"","sources":["../../../../src/lib/layout/nav-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAYlE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAI,EACJ,eAAe,EACf,KAAK,EACL,WAAW,GACZ,EAAE,eAAe,2CAiFjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octave-org/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "./dist/index.esm.js",
   "module": "./dist/index.esm.js",