@widlarzgroup/docusaurus-ui 0.0.4 → 0.1.0

package/lib/components/ProBadge/ProBadge.module.css

@@ -3,6 +3,6 @@
   align-items: center;
   justify-content: center;
   margin-left: 6px;
-  color: #a855f7;
+  color: var(--color-pro, #B897FF);
   flex-shrink: 0;
 }

package/lib/components/ProFeature/ProFeature.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProFeature.d.ts","sourceRoot":"","sources":["../../../src/components/ProFeature/ProFeature.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,4BAGb,eAAe,4CAsCjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ProFeature.d.ts","sourceRoot":"","sources":["../../../src/components/ProFeature/ProFeature.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,4BAGb,eAAe,4CA4BjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ProFeature/ProFeature.js

@@ -4,9 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const Link_1 = __importDefault(require("@docusaurus/Link"));
 const ProFeature_module_css_1 = __importDefault(require("./ProFeature.module.css"));
-const ProFeature = ({ title = 'Pro Feature', description = 'This feature is part of our commercial offering. Start a free trial to explore all Pro features.', }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ProFeature_module_css_1.default.container, children: [(0, jsx_runtime_1.jsx)("div", { className: ProFeature_module_css_1.default.header, children: (0, jsx_runtime_1.jsxs)("div", { className: ProFeature_module_css_1.default.badge, children: [(0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", className: ProFeature_module_css_1.default.icon, children: (0, jsx_runtime_1.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }), (0, jsx_runtime_1.jsx)("span", { className: ProFeature_module_css_1.default.badgeText, children: title })] }) }), (0, jsx_runtime_1.jsx)("p", { className: ProFeature_module_css_1.default.description, children: description }), (0, jsx_runtime_1.jsxs)("div", { className: ProFeature_module_css_1.default.actions, children: [(0, jsx_runtime_1.jsx)("a", { href: "https://sdk.thewidlarzgroup.com/signup?utm_source=rnv&utm_medium=docs&utm_campaign=pro-feature", target: "_blank", rel: "noreferrer", className: ProFeature_module_css_1.default.primaryButton, children: "Start Free Trial" }), (0, jsx_runtime_1.jsx)("a", { href: "https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=pro-feature#Contact", target: "_blank", rel: "noreferrer", className: ProFeature_module_css_1.default.secondaryButton, children: "Contact Sales" })] })] }));
+const ProBadge_1 = __importDefault(require("../../components/ProBadge/ProBadge"));
+const ProFeature = ({ title = 'Pro Player Feature', description = 'This feature is available exclusively in Pro Player. To access this functionality, please contact us.', }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: ProFeature_module_css_1.default.container, children: (0, jsx_runtime_1.jsxs)("div", { className: ProFeature_module_css_1.default.content, children: [(0, jsx_runtime_1.jsx)("div", { className: ProFeature_module_css_1.default.header, children: (0, jsx_runtime_1.jsxs)("div", { className: ProFeature_module_css_1.default.badge, children: [(0, jsx_runtime_1.jsx)(ProBadge_1.default, {}), (0, jsx_runtime_1.jsx)("span", { className: ProFeature_module_css_1.default.badgeText, children: title })] }) }), (0, jsx_runtime_1.jsx)("p", { className: ProFeature_module_css_1.default.description, children: description }), (0, jsx_runtime_1.jsxs)("div", { className: ProFeature_module_css_1.default.actions, children: [(0, jsx_runtime_1.jsx)(Link_1.default, { to: "https://thewidlarzgroup.com/?utm_source=docs&utm_medium=pro-feature&utm_campaign=pro-player#Contact", className: ProFeature_module_css_1.default.primaryButton, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(Link_1.default, { to: "https://sdk.thewidlarzgroup.com/?utm_source=docs&utm_medium=pro-feature&utm_campaign=pro-player", className: ProFeature_module_css_1.default.secondaryButton, children: "Learn More" })] })] }) }));
 };
 exports.default = ProFeature;
 //# sourceMappingURL=ProFeature.js.map

package/lib/components/ProFeature/ProFeature.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProFeature.js","sourceRoot":"","sources":["../../../src/components/ProFeature/ProFeature.tsx"],"names":[],"mappings":";;;;;;AAAA,oFAA6C;AAO7C,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,GAAG,aAAa,EACrB,WAAW,GAAG,kGAAkG,GAChG,EAAE,EAAE;IACpB,OAAO,CACL,iCAAK,SAAS,EAAE,+BAAM,CAAC,SAAS,aAC9B,gCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,YAC3B,iCAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,aAC1B,gCACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,+BAAM,CAAC,IAAI,YAEtB,iCAAM,CAAC,EAAC,qCAAqC,GAAG,GAC5C,EACN,iCAAM,SAAS,EAAE,+BAAM,CAAC,SAAS,YAAG,KAAK,GAAQ,IAC7C,GACF,EACN,8BAAG,SAAS,EAAE,+BAAM,CAAC,WAAW,YAAG,WAAW,GAAK,EACnD,iCAAK,SAAS,EAAE,+BAAM,CAAC,OAAO,aAC5B,8BACE,IAAI,EAAC,gGAAgG,EACrG,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAE,+BAAM,CAAC,aAAa,iCAG7B,EACJ,8BACE,IAAI,EAAC,kGAAkG,EACvG,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAE,+BAAM,CAAC,eAAe,8BAG/B,IACA,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}
+{"version":3,"file":"ProFeature.js","sourceRoot":"","sources":["../../../src/components/ProFeature/ProFeature.tsx"],"names":[],"mappings":";;;;;;AAAA,4DAAoC;AACpC,oFAA6C;AAC7C,8EAAsD;AAOtD,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,GAAG,oBAAoB,EAC5B,WAAW,GAAG,uGAAuG,GACrG,EAAE,EAAE;IACpB,OAAO,CACL,gCAAK,SAAS,EAAE,+BAAM,CAAC,SAAS,YAC9B,iCAAK,SAAS,EAAE,+BAAM,CAAC,OAAO,aAC5B,gCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,YAC3B,iCAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,aAC1B,uBAAC,kBAAQ,KAAG,EACZ,iCAAM,SAAS,EAAE,+BAAM,CAAC,SAAS,YAAG,KAAK,GAAQ,IAC7C,GACF,EACN,8BAAG,SAAS,EAAE,+BAAM,CAAC,WAAW,YAAG,WAAW,GAAK,EACnD,iCAAK,SAAS,EAAE,+BAAM,CAAC,OAAO,aAC5B,uBAAC,cAAI,IACH,EAAE,EAAC,qGAAqG,EACxG,SAAS,EAAE,+BAAM,CAAC,aAAa,2BAG1B,EACP,uBAAC,cAAI,IACH,EAAE,EAAC,iGAAiG,EACpG,SAAS,EAAE,+BAAM,CAAC,eAAe,2BAG5B,IACH,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/lib/components/ProFeature/ProFeature.module.css

@@ -1,10 +1,53 @@
 .container {
+  position: relative;
   margin: 1.5rem 0;
-  padding: 1.25rem 1.5rem;
-  background: rgba(150, 201, 235, 0.08);
-  border: 1px solid rgba(150, 201, 235, 0.2);
-  border-left: 4px solid #96c9eb;
-  border-radius: 8px;
+  padding: 1.5rem;
+  background: 
+    /* Top-left subtle glow */
+    radial-gradient(ellipse 40% 50% at 15% 10%, color-mix(in srgb, var(--color-pro) 6%, transparent), transparent 50%),
+    /* Bottom-right accent */
+    radial-gradient(ellipse 35% 40% at 85% 90%, color-mix(in srgb, var(--color-pro) 4%, transparent), transparent 50%),
+    /* Base */
+    var(--color-bg-primary);
+  border: 1px solid var(--color-pro-border, color-mix(in srgb, var(--color-pro) 50%, transparent));
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Grid pattern - circular fade from top */
+.container::before {
+  content: '';
+  position: absolute;
+  top: -52%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 160%;
+  height: 220%;
+  background: 
+    linear-gradient(color-mix(in srgb, var(--color-pro) 7%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--color-pro) 7%, transparent) 1px, transparent 1px);
+  background-size: 20px 20px;
+  mask-image: radial-gradient(ellipse 55% 45% at 50% 25%, black 0%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 25%, black 0%, transparent 70%);
+  pointer-events: none;
+}
+
+/* Main glow accent - smaller, centered */
+.container::after {
+  content: '';
+  position: absolute;
+  top: -30%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50%;
+  height: 60%;
+  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-pro-dim) 10%, transparent), transparent 70%);
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
 }
 
 .header {
@@ -16,28 +59,25 @@
 .badge {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  padding: 0.3rem 0.6rem;
-  background: linear-gradient(135deg, #96c9eb 0%, #76b8e5 100%);
-  border-radius: 4px;
-}
-
-.icon {
-  color: #171717;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background: color-mix(in srgb, var(--color-pro) 8%, transparent);
+  border: 1px solid var(--color-pro-border, color-mix(in srgb, var(--color-pro) 50%, transparent));
+  border-radius: 6px;
 }
 
 .badgeText {
   font-size: 0.75rem;
   font-weight: 700;
-  color: #171717;
+  color: var(--color-pro);
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.05em;
 }
 
 .description {
-  margin: 0 0 1rem 0;
+  margin: 0 0 1.25rem 0;
   font-size: 0.9rem;
-  color: var(--color-text-secondary, #b4b4b4);
+  color: var(--color-text-secondary);
   line-height: 1.6;
 }
 
@@ -50,40 +90,37 @@
 .primaryButton {
   display: inline-flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background: #96c9eb;
-  color: #171717;
-  font-size: 0.85rem;
+  padding: 0.55rem 1.1rem;
+  background: transparent;
+  color: var(--color-pro) !important;
+  font-size: 0.8rem;
   font-weight: 600;
+  border-bottom: 1px solid var(--color-pro) !important;
   border-radius: 6px;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
 }
 
 .primaryButton:hover {
-  background: #76b8e5;
-  color: #171717;
+  opacity: 0.7;
   text-decoration: none;
 }
 
 .secondaryButton {
   display: inline-flex;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.55rem 1.1rem;
   background: transparent;
-  color: #96c9eb;
-  font-size: 0.85rem;
-  font-weight: 600;
-  border: 1px solid rgba(150, 201, 235, 0.3);
+  color: var(--color-text-primary) !important;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-color: var(--color-text-primary) !important;
   border-radius: 6px;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
 }
 
 .secondaryButton:hover {
-  background: rgba(150, 201, 235, 0.1);
-  border-color: rgba(150, 201, 235, 0.5);
-  color: #96c9eb;
+  opacity: 0.7;
   text-decoration: none;
 }
-

package/lib/createSidebarWithCustomProps.d.ts

@@ -0,0 +1,30 @@
+import type { PluginOptions } from '@docusaurus/plugin-content-docs';
+type SidebarItemsGenerator = NonNullable<PluginOptions['sidebarItemsGenerator']>;
+/**
+ * Adds customProps from document frontmatter to sidebar items.
+ * This enables using customProps in .md files, not just _category_.json.
+ *
+ * @example
+ * // docusaurus.config.ts
+ * import { createSidebarWithCustomProps } from '@widlarzgroup/docusaurus-ui';
+ *
+ * export default {
+ *   presets: [
+ *     ['classic', {
+ *       docs: {
+ *         sidebarItemsGenerator: createSidebarWithCustomProps,
+ *       },
+ *     }],
+ *   ],
+ * };
+ *
+ * // Then in your .md file:
+ * // ---
+ * // customProps:
+ * //   badgeType: new
+ * //   plan: pro
+ * // ---
+ */
+export declare const createSidebarWithCustomProps: SidebarItemsGenerator;
+export {};
+//# sourceMappingURL=createSidebarWithCustomProps.d.ts.map

package/lib/createSidebarWithCustomProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSidebarWithCustomProps.d.ts","sourceRoot":"","sources":["../src/createSidebarWithCustomProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,KAAK,qBAAqB,GAAG,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAIjF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,4BAA4B,EAAE,qBA+B1C,CAAC"}

package/lib/createSidebarWithCustomProps.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSidebarWithCustomProps = void 0;
+/**
+ * Adds customProps from document frontmatter to sidebar items.
+ * This enables using customProps in .md files, not just _category_.json.
+ *
+ * @example
+ * // docusaurus.config.ts
+ * import { createSidebarWithCustomProps } from '@widlarzgroup/docusaurus-ui';
+ *
+ * export default {
+ *   presets: [
+ *     ['classic', {
+ *       docs: {
+ *         sidebarItemsGenerator: createSidebarWithCustomProps,
+ *       },
+ *     }],
+ *   ],
+ * };
+ *
+ * // Then in your .md file:
+ * // ---
+ * // customProps:
+ * //   badgeType: new
+ * //   plan: pro
+ * // ---
+ */
+const createSidebarWithCustomProps = async ({ defaultSidebarItemsGenerator, docs, ...args }) => {
+    const sidebarItems = await defaultSidebarItemsGenerator({ docs, ...args });
+    function addCustomPropsFromFrontmatter(items) {
+        return items.map((item) => {
+            if (item.type === 'category') {
+                return { ...item, items: addCustomPropsFromFrontmatter(item.items) };
+            }
+            // Only 'doc' type has id that matches docs array
+            if (item.type === 'doc') {
+                const doc = docs.find((d) => d.id === item.id);
+                const frontmatterCustomProps = doc?.frontMatter?.customProps;
+                if (frontmatterCustomProps && typeof frontmatterCustomProps === 'object') {
+                    return {
+                        ...item,
+                        customProps: { ...item.customProps, ...frontmatterCustomProps },
+                    };
+                }
+            }
+            return item;
+        });
+    }
+    return addCustomPropsFromFrontmatter(sidebarItems);
+};
+exports.createSidebarWithCustomProps = createSidebarWithCustomProps;
+//# sourceMappingURL=createSidebarWithCustomProps.js.map

package/lib/createSidebarWithCustomProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSidebarWithCustomProps.js","sourceRoot":"","sources":["../src/createSidebarWithCustomProps.ts"],"names":[],"mappings":";;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACI,MAAM,4BAA4B,GAA0B,KAAK,EAAE,EACxE,4BAA4B,EAC5B,IAAI,EACJ,GAAG,IAAI,EACO,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,MAAM,4BAA4B,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IAE3E,SAAS,6BAA6B,CAAC,KAAoB;QACzD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC7B,OAAO,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,6BAA6B,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACvE,CAAC;YAED,iDAAiD;YACjD,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;gBACxB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC/C,MAAM,sBAAsB,GAAG,GAAG,EAAE,WAAW,EAAE,WAAW,CAAC;gBAE7D,IAAI,sBAAsB,IAAI,OAAO,sBAAsB,KAAK,QAAQ,EAAE,CAAC;oBACzE,OAAO;wBACL,GAAG,IAAI;wBACP,WAAW,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,sBAAsB,EAAE;qBAChE,CAAC;gBACJ,CAAC;YACH,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,6BAA6B,CAAC,YAAY,CAAC,CAAC;AACrD,CAAC,CAAC;AA/BW,QAAA,4BAA4B,gCA+BvC"}

package/lib/css/custom.css

@@ -19,6 +19,12 @@
   --color-secondary-glow: rgba(232, 196, 32, 0.35);
   --color-secondary-subtle: rgba(232, 196, 32, 0.18);
   
+  --color-pro: #B897FF;
+  --color-pro-dim: #A07EF0;
+  --color-pro-glow: color-mix(in srgb, var(--color-pro) 25%, transparent);
+  --color-pro-subtle: color-mix(in srgb, var(--color-pro) 12%, transparent);
+  --color-pro-border: color-mix(in srgb, var(--color-pro) 85%, transparent);
+  
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #4a4a4a;
   --color-text-muted: #6a6a6a;
@@ -106,6 +112,12 @@
   --color-secondary-glow: rgba(250, 216, 91, 0.2);
   --color-secondary-subtle: rgba(250, 216, 91, 0.1);
   
+  --color-pro: #B897FF;
+  --color-pro-dim: #A07EF0;
+  --color-pro-glow: color-mix(in srgb, var(--color-pro) 20%, transparent);
+  --color-pro-subtle: color-mix(in srgb, var(--color-pro) 10%, transparent);
+  --color-pro-border: color-mix(in srgb, var(--color-pro) 20%, transparent);
+  
   --color-text-primary: #e0e0e0;
   --color-text-secondary: #a0a0a0;
   --color-text-muted: #707070;

package/lib/hooks/useParentCategoryCustomProps.d.ts

@@ -0,0 +1,15 @@
+import type { CustomSidebarProps } from '../types/sidebar';
+/**
+ * Returns merged customProps from all parent categories in the sidebar breadcrumb.
+ * Props from deeper categories override props from parent categories.
+ *
+ * @example
+ * // In a doc page component
+ * const { plan, badgeType } = useParentCategoryCustomProps();
+ *
+ * if (plan === 'pro') {
+ *   // Show pro badge or restrict content
+ * }
+ */
+export declare function useParentCategoryCustomProps(): CustomSidebarProps;
+//# sourceMappingURL=useParentCategoryCustomProps.d.ts.map

package/lib/hooks/useParentCategoryCustomProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParentCategoryCustomProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useParentCategoryCustomProps.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,wBAAgB,4BAA4B,IAAI,kBAAkB,CAejE"}

package/lib/hooks/useParentCategoryCustomProps.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useParentCategoryCustomProps = useParentCategoryCustomProps;
+const client_1 = require("@docusaurus/plugin-content-docs/client");
+/**
+ * Returns merged customProps from all parent categories in the sidebar breadcrumb.
+ * Props from deeper categories override props from parent categories.
+ *
+ * @example
+ * // In a doc page component
+ * const { plan, badgeType } = useParentCategoryCustomProps();
+ *
+ * if (plan === 'pro') {
+ *   // Show pro badge or restrict content
+ * }
+ */
+function useParentCategoryCustomProps() {
+    const breadcrumbs = (0, client_1.useSidebarBreadcrumbs)();
+    if (!breadcrumbs) {
+        return {};
+    }
+    // Merge customProps from all parent categories (excluding the current doc)
+    // Categories closer to the doc override parent categories
+    return breadcrumbs.reduce((acc, item) => {
+        if (item.type === 'category' && item.customProps) {
+            return { ...acc, ...item.customProps };
+        }
+        return acc;
+    }, {});
+}
+//# sourceMappingURL=useParentCategoryCustomProps.js.map

package/lib/hooks/useParentCategoryCustomProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParentCategoryCustomProps.js","sourceRoot":"","sources":["../../src/hooks/useParentCategoryCustomProps.ts"],"names":[],"mappings":";;AAeA,oEAeC;AA9BD,mEAA6E;AAG7E;;;;;;;;;;;GAWG;AACH,SAAgB,4BAA4B;IAC1C,MAAM,WAAW,GAAG,IAAA,8BAAqB,GAAE,CAAC;IAE5C,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,2EAA2E;IAC3E,0DAA0D;IAC1D,OAAO,WAAW,CAAC,MAAM,CAAqB,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACjD,OAAO,EAAC,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,WAAiC,EAAC,CAAC;QAC7D,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import type { LoadContext, Plugin } from '@docusaurus/types';
 export default function themeDocusaurusUI(context: LoadContext): Plugin;
 export * from './types/sidebar';
+export { createSidebarWithCustomProps } from './createSidebarWithCustomProps';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAgBtE;AAED,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAiCtE;AAED,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC"}

package/lib/index.js

@@ -17,13 +17,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSidebarWithCustomProps = void 0;
 exports.default = themeDocusaurusUI;
 const path_1 = __importDefault(require("path"));
 function themeDocusaurusUI(context) {
+    const isDev = process.env.NODE_ENV === 'development';
     return {
         name: '@widlarzgroup/docusaurus-ui',
         getThemePath() {
-            return '../lib/theme';
+            // In dev mode, use source files directly for hot-reload
+            return isDev ? '../src/theme' : '../lib/theme';
         },
         getTypeScriptThemePath() {
             return '../src/theme';
@@ -31,7 +34,22 @@ function themeDocusaurusUI(context) {
         getClientModules() {
             return [path_1.default.resolve(__dirname, './css/custom.css')];
         },
+        // Configure webpack to handle TypeScript and path aliases from source
+        configureWebpack(config, isServer, utils) {
+            if (!isDev)
+                return {};
+            return {
+                resolve: {
+                    alias: {
+                        // Resolve @/ imports to source directory
+                        '@': path_1.default.resolve(__dirname, '../src'),
+                    },
+                },
+            };
+        },
     };
 }
 __exportStar(require("./types/sidebar"), exports);
+var createSidebarWithCustomProps_1 = require("./createSidebarWithCustomProps");
+Object.defineProperty(exports, "createSidebarWithCustomProps", { enumerable: true, get: function () { return createSidebarWithCustomProps_1.createSidebarWithCustomProps; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,oCAgBC;AAnBD,gDAAwB;AAGxB,SAAwB,iBAAiB,CAAC,OAAoB;IAC5D,OAAO;QACL,IAAI,EAAE,6BAA6B;QAEnC,YAAY;YACV,OAAO,cAAc,CAAC;QACxB,CAAC;QAED,sBAAsB;YACpB,OAAO,cAAc,CAAC;QACxB,CAAC;QAED,gBAAgB;YACd,OAAO,CAAC,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC;QACvD,CAAC;KACF,CAAC;AACJ,CAAC;AAED,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,oCAiCC;AApCD,gDAAwB;AAGxB,SAAwB,iBAAiB,CAAC,OAAoB;IAC5D,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;IAErD,OAAO;QACL,IAAI,EAAE,6BAA6B;QAEnC,YAAY;YACV,wDAAwD;YACxD,OAAO,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC;QACjD,CAAC;QAED,sBAAsB;YACpB,OAAO,cAAc,CAAC;QACxB,CAAC;QAED,gBAAgB;YACd,OAAO,CAAC,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC;QACvD,CAAC;QAED,sEAAsE;QACtE,gBAAgB,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK;YACtC,IAAI,CAAC,KAAK;gBAAE,OAAO,EAAE,CAAC;YAEtB,OAAO;gBACL,OAAO,EAAE;oBACP,KAAK,EAAE;wBACL,yCAAyC;wBACzC,GAAG,EAAE,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;qBACvC;iBACF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC;AAED,kDAAgC;AAChC,+EAA8E;AAArE,4IAAA,4BAA4B,OAAA"}

package/lib/theme/DocItem/Content/index.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocItem/Content';
+export default function DocItemContent({ children }: Props): ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/DocItem/Content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/DocItem/Content/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAC;AA2ClD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAC,QAAQ,EAAC,EAAE,KAAK,GAAG,SAAS,CAiBnE"}

package/lib/theme/DocItem/Content/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DocItemContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const theme_common_1 = require("@docusaurus/theme-common");
+const client_1 = require("@docusaurus/plugin-content-docs/client");
+const Heading_1 = __importDefault(require("@theme/Heading"));
+const MDXContent_1 = __importDefault(require("@theme/MDXContent"));
+const useParentCategoryCustomProps_1 = require("../../../hooks/useParentCategoryCustomProps");
+const ProFeature_1 = __importDefault(require("../../../components/ProFeature/ProFeature"));
+/**
+ * Hook that returns doc data + merged customProps from parent categories and frontMatter.
+ * Document frontMatter takes precedence over parent category props.
+ */
+function useDocWithCustomProps() {
+    const doc = (0, client_1.useDoc)();
+    const parentCustomProps = (0, useParentCategoryCustomProps_1.useParentCategoryCustomProps)();
+    // frontMatter.customProps is not typed, so we need to cast it
+    const frontMatter = doc.frontMatter;
+    const frontMatterCustomProps = (frontMatter.customProps ?? {});
+    // Merge: parent category props + frontMatter props (frontMatter wins)
+    const customProps = { ...parentCustomProps, ...frontMatterCustomProps };
+    return { ...doc, customProps };
+}
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function getSyntheticTitle(doc) {
+    const { metadata, frontMatter, contentTitle } = doc;
+    const shouldRender = !frontMatter.hide_title && typeof contentTitle === 'undefined';
+    if (!shouldRender) {
+        return null;
+    }
+    return metadata.title;
+}
+function DocItemContent({ children }) {
+    const doc = useDocWithCustomProps();
+    const syntheticTitle = getSyntheticTitle(doc);
+    const isPro = doc.customProps.plan === 'pro';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(theme_common_1.ThemeClassNames.docs.docMarkdown, 'markdown'), children: [syntheticTitle && ((0, jsx_runtime_1.jsx)("header", { children: (0, jsx_runtime_1.jsx)(Heading_1.default, { as: "h1", children: syntheticTitle }) })), isPro && (0, jsx_runtime_1.jsx)(ProFeature_1.default, {}), (0, jsx_runtime_1.jsx)(MDXContent_1.default, { children: children })] }));
+}
+//# sourceMappingURL=index.js.map

package/lib/theme/DocItem/Content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/theme/DocItem/Content/index.tsx"],"names":[],"mappings":";;;;;AAiDA,iCAiBC;;AAjED,gDAAwB;AACxB,2DAAyD;AACzD,mEAA8D;AAC9D,6DAAqC;AACrC,mEAA2C;AAE3C,uFAAkF;AAElF,oFAA4D;AAE5D;;;GAGG;AACH,SAAS,qBAAqB;IAC5B,MAAM,GAAG,GAAG,IAAA,eAAM,GAAE,CAAC;IACrB,MAAM,iBAAiB,GAAG,IAAA,2DAA4B,GAAE,CAAC;IAEzD,8DAA8D;IAC9D,MAAM,WAAW,GAAG,GAAG,CAAC,WAAsC,CAAC;IAC/D,MAAM,sBAAsB,GAAG,CAAC,WAAW,CAAC,WAAW,IAAI,EAAE,CAAuB,CAAC;IAErF,sEAAsE;IACtE,MAAM,WAAW,GAAuB,EAAC,GAAG,iBAAiB,EAAE,GAAG,sBAAsB,EAAC,CAAC;IAE1F,OAAO,EAAC,GAAG,GAAG,EAAE,WAAW,EAAC,CAAC;AAC/B,CAAC;AAED;;;;;;;;;EASE;AACF,SAAS,iBAAiB,CAAC,GAA8B;IACvD,MAAM,EAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAC,GAAG,GAAG,CAAC;IAClD,MAAM,YAAY,GAChB,CAAC,WAAW,CAAC,UAAU,IAAI,OAAO,YAAY,KAAK,WAAW,CAAC;IACjE,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,QAAQ,CAAC,KAAK,CAAC;AACxB,CAAC;AAED,SAAwB,cAAc,CAAC,EAAC,QAAQ,EAAQ;IACtD,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IACpC,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAE9C,MAAM,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,KAAK,KAAK,CAAC;IAE7C,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,8BAAe,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,aAC/D,cAAc,IAAI,CACjB,6CACE,uBAAC,iBAAO,IAAC,EAAE,EAAC,IAAI,YAAE,cAAc,GAAW,GACpC,CACV,EACA,KAAK,IAAI,uBAAC,oBAAU,KAAG,EACxB,uBAAC,oBAAU,cAAE,QAAQ,GAAc,IAC/B,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widlarzgroup/docusaurus-ui",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
   "scripts": {
     "swizzle": "docusaurus swizzle",
     "dev": "bun run build && tsc-watch -p tsconfig.build.json --onSuccess 'tsc-alias -p tsconfig.build.json && bun run copy-assets'",
-    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && bun run copy-assets",
+    "build": "rm -rf lib && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && bun run copy-assets",
     "copy-assets": "find src -name '*.css' -exec sh -c 'mkdir -p lib/$(dirname ${1#src/}) && cp $1 lib/${1#src/}' _ {} \\;",
     "prepublishOnly": "bun run build"
   },

package/src/components/ProBadge/ProBadge.module.css

@@ -3,6 +3,6 @@
   align-items: center;
   justify-content: center;
   margin-left: 6px;
-  color: #a855f7;
+  color: var(--color-pro, #B897FF);
   flex-shrink: 0;
 }

package/src/components/ProFeature/ProFeature.module.css

@@ -1,10 +1,53 @@
 .container {
+  position: relative;
   margin: 1.5rem 0;
-  padding: 1.25rem 1.5rem;
-  background: rgba(150, 201, 235, 0.08);
-  border: 1px solid rgba(150, 201, 235, 0.2);
-  border-left: 4px solid #96c9eb;
-  border-radius: 8px;
+  padding: 1.5rem;
+  background: 
+    /* Top-left subtle glow */
+    radial-gradient(ellipse 40% 50% at 15% 10%, color-mix(in srgb, var(--color-pro) 6%, transparent), transparent 50%),
+    /* Bottom-right accent */
+    radial-gradient(ellipse 35% 40% at 85% 90%, color-mix(in srgb, var(--color-pro) 4%, transparent), transparent 50%),
+    /* Base */
+    var(--color-bg-primary);
+  border: 1px solid var(--color-pro-border, color-mix(in srgb, var(--color-pro) 50%, transparent));
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Grid pattern - circular fade from top */
+.container::before {
+  content: '';
+  position: absolute;
+  top: -52%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 160%;
+  height: 220%;
+  background: 
+    linear-gradient(color-mix(in srgb, var(--color-pro) 7%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--color-pro) 7%, transparent) 1px, transparent 1px);
+  background-size: 20px 20px;
+  mask-image: radial-gradient(ellipse 55% 45% at 50% 25%, black 0%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 25%, black 0%, transparent 70%);
+  pointer-events: none;
+}
+
+/* Main glow accent - smaller, centered */
+.container::after {
+  content: '';
+  position: absolute;
+  top: -30%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50%;
+  height: 60%;
+  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-pro-dim) 10%, transparent), transparent 70%);
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
 }
 
 .header {
@@ -16,28 +59,25 @@
 .badge {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  padding: 0.3rem 0.6rem;
-  background: linear-gradient(135deg, #96c9eb 0%, #76b8e5 100%);
-  border-radius: 4px;
-}
-
-.icon {
-  color: #171717;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background: color-mix(in srgb, var(--color-pro) 8%, transparent);
+  border: 1px solid var(--color-pro-border, color-mix(in srgb, var(--color-pro) 50%, transparent));
+  border-radius: 6px;
 }
 
 .badgeText {
   font-size: 0.75rem;
   font-weight: 700;
-  color: #171717;
+  color: var(--color-pro);
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.05em;
 }
 
 .description {
-  margin: 0 0 1rem 0;
+  margin: 0 0 1.25rem 0;
   font-size: 0.9rem;
-  color: var(--color-text-secondary, #b4b4b4);
+  color: var(--color-text-secondary);
   line-height: 1.6;
 }
 
@@ -50,40 +90,37 @@
 .primaryButton {
   display: inline-flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background: #96c9eb;
-  color: #171717;
-  font-size: 0.85rem;
+  padding: 0.55rem 1.1rem;
+  background: transparent;
+  color: var(--color-pro) !important;
+  font-size: 0.8rem;
   font-weight: 600;
+  border-bottom: 1px solid var(--color-pro) !important;
   border-radius: 6px;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
 }
 
 .primaryButton:hover {
-  background: #76b8e5;
-  color: #171717;
+  opacity: 0.7;
   text-decoration: none;
 }
 
 .secondaryButton {
   display: inline-flex;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.55rem 1.1rem;
   background: transparent;
-  color: #96c9eb;
-  font-size: 0.85rem;
-  font-weight: 600;
-  border: 1px solid rgba(150, 201, 235, 0.3);
+  color: var(--color-text-primary) !important;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-color: var(--color-text-primary) !important;
   border-radius: 6px;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
 }
 
 .secondaryButton:hover {
-  background: rgba(150, 201, 235, 0.1);
-  border-color: rgba(150, 201, 235, 0.5);
-  color: #96c9eb;
+  opacity: 0.7;
   text-decoration: none;
 }
-

package/src/components/ProFeature/ProFeature.tsx

@@ -1,4 +1,6 @@
+import Link from '@docusaurus/Link';
 import styles from './ProFeature.module.css';
+import ProBadge from '@/components/ProBadge/ProBadge';
 
 interface ProFeatureProps {
   title?: string;
@@ -6,44 +8,34 @@ interface ProFeatureProps {
 }
 
 const ProFeature = ({
-  title = 'Pro Feature',
-  description = 'This feature is part of our commercial offering. Start a free trial to explore all Pro features.',
+  title = 'Pro Player Feature',
+  description = 'This feature is available exclusively in Pro Player. To access this functionality, please contact us.',
 }: ProFeatureProps) => {
   return (
     <div className={styles.container}>
-      <div className={styles.header}>
-        <div className={styles.badge}>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className={styles.icon}
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.badge}>
+            <ProBadge />
+            <span className={styles.badgeText}>{title}</span>
+          </div>
+        </div>
+        <p className={styles.description}>{description}</p>
+        <div className={styles.actions}>
+          <Link
+            to="https://thewidlarzgroup.com/?utm_source=docs&utm_medium=pro-feature&utm_campaign=pro-player#Contact"
+            className={styles.primaryButton}
+          >
+            Contact Us
+          </Link>
+          <Link
+            to="https://sdk.thewidlarzgroup.com/?utm_source=docs&utm_medium=pro-feature&utm_campaign=pro-player"
+            className={styles.secondaryButton}
           >
-            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-          </svg>
-          <span className={styles.badgeText}>{title}</span>
+            Learn More
+          </Link>
         </div>
       </div>
-      <p className={styles.description}>{description}</p>
-      <div className={styles.actions}>
-        <a
-          href="https://sdk.thewidlarzgroup.com/signup?utm_source=rnv&utm_medium=docs&utm_campaign=pro-feature"
-          target="_blank"
-          rel="noreferrer"
-          className={styles.primaryButton}
-        >
-          Start Free Trial
-        </a>
-        <a
-          href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=pro-feature#Contact"
-          target="_blank"
-          rel="noreferrer"
-          className={styles.secondaryButton}
-        >
-          Contact Sales
-        </a>
-      </div>
     </div>
   );
 };

package/src/createSidebarWithCustomProps.ts

@@ -0,0 +1,63 @@
+import type { PluginOptions } from '@docusaurus/plugin-content-docs';
+
+type SidebarItemsGenerator = NonNullable<PluginOptions['sidebarItemsGenerator']>;
+type GeneratorArgs = Parameters<SidebarItemsGenerator>[0];
+type SidebarItem = Awaited<ReturnType<SidebarItemsGenerator>>[number];
+
+/**
+ * Adds customProps from document frontmatter to sidebar items.
+ * This enables using customProps in .md files, not just _category_.json.
+ *
+ * @example
+ * // docusaurus.config.ts
+ * import { createSidebarWithCustomProps } from '@widlarzgroup/docusaurus-ui';
+ *
+ * export default {
+ *   presets: [
+ *     ['classic', {
+ *       docs: {
+ *         sidebarItemsGenerator: createSidebarWithCustomProps,
+ *       },
+ *     }],
+ *   ],
+ * };
+ *
+ * // Then in your .md file:
+ * // ---
+ * // customProps:
+ * //   badgeType: new
+ * //   plan: pro
+ * // ---
+ */
+export const createSidebarWithCustomProps: SidebarItemsGenerator = async ({
+  defaultSidebarItemsGenerator,
+  docs,
+  ...args
+}: GeneratorArgs) => {
+  const sidebarItems = await defaultSidebarItemsGenerator({ docs, ...args });
+
+  function addCustomPropsFromFrontmatter(items: SidebarItem[]): SidebarItem[] {
+    return items.map((item) => {
+      if (item.type === 'category') {
+        return { ...item, items: addCustomPropsFromFrontmatter(item.items) };
+      }
+
+      // Only 'doc' type has id that matches docs array
+      if (item.type === 'doc') {
+        const doc = docs.find((d) => d.id === item.id);
+        const frontmatterCustomProps = doc?.frontMatter?.customProps;
+
+        if (frontmatterCustomProps && typeof frontmatterCustomProps === 'object') {
+          return {
+            ...item,
+            customProps: { ...item.customProps, ...frontmatterCustomProps },
+          };
+        }
+      }
+
+      return item;
+    });
+  }
+
+  return addCustomPropsFromFrontmatter(sidebarItems);
+};

package/src/css/custom.css

@@ -19,6 +19,12 @@
   --color-secondary-glow: rgba(232, 196, 32, 0.35);
   --color-secondary-subtle: rgba(232, 196, 32, 0.18);
   
+  --color-pro: #B897FF;
+  --color-pro-dim: #A07EF0;
+  --color-pro-glow: color-mix(in srgb, var(--color-pro) 25%, transparent);
+  --color-pro-subtle: color-mix(in srgb, var(--color-pro) 12%, transparent);
+  --color-pro-border: color-mix(in srgb, var(--color-pro) 85%, transparent);
+  
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #4a4a4a;
   --color-text-muted: #6a6a6a;
@@ -106,6 +112,12 @@
   --color-secondary-glow: rgba(250, 216, 91, 0.2);
   --color-secondary-subtle: rgba(250, 216, 91, 0.1);
   
+  --color-pro: #B897FF;
+  --color-pro-dim: #A07EF0;
+  --color-pro-glow: color-mix(in srgb, var(--color-pro) 20%, transparent);
+  --color-pro-subtle: color-mix(in srgb, var(--color-pro) 10%, transparent);
+  --color-pro-border: color-mix(in srgb, var(--color-pro) 20%, transparent);
+  
   --color-text-primary: #e0e0e0;
   --color-text-secondary: #a0a0a0;
   --color-text-muted: #707070;

package/src/hooks/useParentCategoryCustomProps.ts

@@ -0,0 +1,31 @@
+import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client';
+import type {CustomSidebarProps} from '@/types/sidebar';
+
+/**
+ * Returns merged customProps from all parent categories in the sidebar breadcrumb.
+ * Props from deeper categories override props from parent categories.
+ * 
+ * @example
+ * // In a doc page component
+ * const { plan, badgeType } = useParentCategoryCustomProps();
+ * 
+ * if (plan === 'pro') {
+ *   // Show pro badge or restrict content
+ * }
+ */
+export function useParentCategoryCustomProps(): CustomSidebarProps {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  
+  if (!breadcrumbs) {
+    return {};
+  }
+
+  // Merge customProps from all parent categories (excluding the current doc)
+  // Categories closer to the doc override parent categories
+  return breadcrumbs.reduce<CustomSidebarProps>((acc, item) => {
+    if (item.type === 'category' && item.customProps) {
+      return {...acc, ...item.customProps as CustomSidebarProps};
+    }
+    return acc;
+  }, {});
+}

package/src/index.ts

@@ -2,11 +2,14 @@ import path from 'path';
 import type { LoadContext, Plugin } from '@docusaurus/types';
 
 export default function themeDocusaurusUI(context: LoadContext): Plugin {
+  const isDev = process.env.NODE_ENV === 'development';
+
   return {
     name: '@widlarzgroup/docusaurus-ui',
 
     getThemePath() {
-      return '../lib/theme';
+      // In dev mode, use source files directly for hot-reload
+      return isDev ? '../src/theme' : '../lib/theme';
     },
 
     getTypeScriptThemePath() {
@@ -16,7 +19,22 @@ export default function themeDocusaurusUI(context: LoadContext): Plugin {
     getClientModules() {
       return [path.resolve(__dirname, './css/custom.css')];
     },
+
+    // Configure webpack to handle TypeScript and path aliases from source
+    configureWebpack(config, isServer, utils) {
+      if (!isDev) return {};
+
+      return {
+        resolve: {
+          alias: {
+            // Resolve @/ imports to source directory
+            '@': path.resolve(__dirname, '../src'),
+          },
+        },
+      };
+    },
   };
 }
 
 export * from './types/sidebar';
+export { createSidebarWithCustomProps } from './createSidebarWithCustomProps';

package/src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,67 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import Heading from '@theme/Heading';
+import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/DocItem/Content';
+import {useParentCategoryCustomProps} from '@/hooks/useParentCategoryCustomProps';
+import type {CustomSidebarProps} from '@/types/sidebar';
+import ProFeature from '@/components/ProFeature/ProFeature';
+
+/**
+ * Hook that returns doc data + merged customProps from parent categories and frontMatter.
+ * Document frontMatter takes precedence over parent category props.
+ */
+function useDocWithCustomProps() {
+  const doc = useDoc();
+  const parentCustomProps = useParentCategoryCustomProps();
+  
+  // frontMatter.customProps is not typed, so we need to cast it
+  const frontMatter = doc.frontMatter as Record<string, unknown>;
+  const frontMatterCustomProps = (frontMatter.customProps ?? {}) as CustomSidebarProps;
+  
+  // Merge: parent category props + frontMatter props (frontMatter wins)
+  const customProps: CustomSidebarProps = {...parentCustomProps, ...frontMatterCustomProps};
+  
+  return {...doc, customProps};
+}
+
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function getSyntheticTitle(doc: ReturnType<typeof useDoc>): string | null {
+  const {metadata, frontMatter, contentTitle} = doc;
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  if (!shouldRender) {
+    return null;
+  }
+  return metadata.title;
+}
+
+export default function DocItemContent({children}: Props): ReactNode {
+  const doc = useDocWithCustomProps();
+  const syntheticTitle = getSyntheticTitle(doc);
+  
+  const isPro = doc.customProps.plan === 'pro';
+  
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+        </header>
+      )}
+      {isPro && <ProFeature />}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}

package/lib/theme/DocItem/TOC/Desktop/index.d.ts

@@ -1,3 +0,0 @@
-import { type ReactNode } from 'react';
-export default function DocItemTOCDesktop(): ReactNode;
-//# sourceMappingURL=index.d.ts.map

package/lib/theme/DocItem/TOC/Desktop/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/DocItem/TOC/Desktop/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAO5C,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,SAAS,CAarD"}

package/lib/theme/DocItem/TOC/Desktop/index.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = DocItemTOCDesktop;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_common_1 = require("@docusaurus/theme-common");
-const client_1 = require("@docusaurus/plugin-content-docs/client");
-const TOC_1 = __importDefault(require("@theme/TOC"));
-function DocItemTOCDesktop() {
-    const { toc, frontMatter } = (0, client_1.useDoc)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TOC_1.default, { toc: toc, minHeadingLevel: frontMatter.toc_min_heading_level, maxHeadingLevel: frontMatter.toc_max_heading_level, className: theme_common_1.ThemeClassNames.docs.docTocDesktop }) }));
-}
-//# sourceMappingURL=index.js.map

package/lib/theme/DocItem/TOC/Desktop/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/theme/DocItem/TOC/Desktop/index.tsx"],"names":[],"mappings":";;;;;AAOA,oCAaC;;AAnBD,2DAAyD;AACzD,mEAA8D;AAE9D,qDAA6B;AAG7B,SAAwB,iBAAiB;IACvC,MAAM,EAAC,GAAG,EAAE,WAAW,EAAC,GAAG,IAAA,eAAM,GAAE,CAAC;IACpC,OAAO,CACL,2DACE,uBAAC,aAAG,IACF,GAAG,EAAE,GAAG,EACR,eAAe,EAAE,WAAW,CAAC,qBAAqB,EAClD,eAAe,EAAE,WAAW,CAAC,qBAAqB,EAClD,SAAS,EAAE,8BAAe,CAAC,IAAI,CAAC,aAAa,GAC7C,GAED,CACJ,CAAC;AACJ,CAAC"}