@akinon/ui-layout 0.2.0 → 0.3.1

package/dist/cjs/index.css

@@ -1,9 +1,3 @@
-/* TODO normalize cross-browser incosistencies */
-body {
-  padding: 0;
-  margin: 0;
-}
-
 .akinon-layout {
   &:not(.akinon-layout-has-sider) {
     border-inline: 1px solid var(--color-gray-900);
@@ -28,7 +22,6 @@ body {
     height: 100vh;
     overflow-y: auto;
 
-    /* TODO normalize scrollbars. they took up huge space */
     &.left {
       inset-inline-start: 0;
     }

package/dist/cjs/index.d.ts

@@ -24,4 +24,6 @@ export type LeftSiderItem = {
 export { Layout };
 export * from './Flex';
 export * from './Grid';
+export * from './nav-card';
+export * from './page-heading';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAGlB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/cjs/index.js

@@ -28,5 +28,9 @@ const Layout = Object.assign(Layout_1.Layout, {
     Sider: Sider_1.Sider
 });
 exports.Layout = Layout;
+// TODO: Rename these files to be lowercase.
+// TODO: Add our file naming conventions to documentation.
 __exportStar(require("./Flex"), exports);
 __exportStar(require("./Grid"), exports);
+__exportStar(require("./nav-card"), exports);
+__exportStar(require("./page-heading"), exports);

package/dist/cjs/nav-card.css

@@ -0,0 +1,83 @@
+.nav-card {
+  background-color: var(--color-neutral-50);
+  border-radius: 0.35rem;
+  display: flex;
+}
+
+.nav-card__icon {
+  background-color: var(--color-gray-500);
+  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+  color: var(--color-neutral-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 180px;
+
+  /* Overriding SVG so you will not have to pass size prop to Icon component. */
+  svg {
+    width: 1.75rem !important;
+    height: 1.75rem !important;
+  }
+
+  /* Change bg color based on the class set on .nav-card */
+  &:is(.nav-card-akinon *) {
+    background-color: var(--color-akinon-500);
+  }
+
+  &:is(.nav-card-azure *) {
+    background-color: var(--color-azure-500);
+  }
+
+  &:is(.nav-card-blue *) {
+    background-color: var(--color-blue-500);
+  }
+
+  &:is(.nav-card-orange *) {
+    background-color: var(--color-orange-500);
+  }
+
+  &:is(.nav-card-red *) {
+    background-color: var(--color-red-500);
+  }
+
+  &:is(.nav-card-green *) {
+    background-color: var(--color-green-500);
+  }
+
+  &:is(.nav-card-pink *) {
+    background-color: var(--color-pink-500);
+  }
+
+  &:is(.nav-card-purple *) {
+    background-color: var(--color-purple-500);
+  }
+}
+
+.nav-card__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 1.5rem 1rem;
+  width: 100%;
+}
+
+.nav-card__title {
+  color: var(--color-ebonyClay-900);
+  font-size: 1.15rem;
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.nav-card__description {
+  color: var(--color-gray-400);
+  font-weight: 400;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  line-height: 1.3;
+  text-decoration: none;
+}

package/dist/cjs/nav-card.d.ts

@@ -0,0 +1,11 @@
+import './nav-card.css';
+import React, { ReactNode } from 'react';
+export type NavCardColorVariant = 'akinon' | 'azure' | 'blue' | 'orange' | 'red' | 'green' | 'pink' | 'purple';
+export interface NavCardProps {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    variant?: NavCardColorVariant;
+}
+export declare const NavCard: ({ title, description, icon, variant }: NavCardProps) => React.JSX.Element;
+//# sourceMappingURL=nav-card.d.ts.map

package/dist/cjs/nav-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-card.d.ts","sourceRoot":"","sources":["../../src/nav-card.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,0CAKjB,YAAY,sBAad,CAAC"}

package/dist/cjs/nav-card.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavCard = void 0;
+require("./nav-card.css");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const NavCard = ({ title, description, icon, variant }) => {
+    const variantClass = variant ? `nav-card-${variant}` : '';
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)('nav-card', variantClass) },
+        icon && react_1.default.createElement("div", { className: "nav-card__icon" }, icon),
+        react_1.default.createElement("div", { className: "nav-card__content" },
+            react_1.default.createElement("h2", { className: "nav-card__title" }, title),
+            react_1.default.createElement("div", { className: "nav-card__description" }, description))));
+};
+exports.NavCard = NavCard;

package/dist/cjs/page-heading.css

@@ -0,0 +1,27 @@
+.akinon-page-heading {
+  border-bottom: 1px solid var(--color-ebonyClay-400);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+}
+
+.akinon-page-heading__content {
+  max-width: 50%;
+}
+
+.akinon-page-heading__title {
+  color: var(--color-neutral-50);
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.akinon-page-heading__description {
+  color: var(--color-gray-300);
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+}

package/dist/cjs/page-heading.d.ts

@@ -0,0 +1,9 @@
+import './page-heading.css';
+import React, { ReactNode } from 'react';
+export interface PageHeadingProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+}
+export declare const PageHeading: ({ title, description, actions }: PageHeadingProps) => React.JSX.Element;
+//# sourceMappingURL=page-heading.d.ts.map

package/dist/cjs/page-heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/page-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,sBAalB,CAAC"}

package/dist/cjs/page-heading.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeading = void 0;
+require("./page-heading.css");
+const react_1 = require("react");
+const PageHeading = ({ title, description, actions }) => {
+    return (react_1.default.createElement("div", { className: "akinon-page-heading" },
+        react_1.default.createElement("div", { className: "akinon-page-heading__content" },
+            react_1.default.createElement("h1", { className: "akinon-page-heading__title" }, title),
+            description && (react_1.default.createElement("p", { className: "akinon-page-heading__description" }, description))),
+        actions && react_1.default.createElement("div", { className: "akinon-page-heading__actions" }, actions)));
+};
+exports.PageHeading = PageHeading;

package/dist/esm/index.css

@@ -1,9 +1,3 @@
-/* TODO normalize cross-browser incosistencies */
-body {
-  padding: 0;
-  margin: 0;
-}
-
 .akinon-layout {
   &:not(.akinon-layout-has-sider) {
     border-inline: 1px solid var(--color-gray-900);
@@ -28,7 +22,6 @@ body {
     height: 100vh;
     overflow-y: auto;
 
-    /* TODO normalize scrollbars. they took up huge space */
     &.left {
       inset-inline-start: 0;
     }

package/dist/esm/index.d.ts

@@ -24,4 +24,6 @@ export type LeftSiderItem = {
 export { Layout };
 export * from './Flex';
 export * from './Grid';
+export * from './nav-card';
+export * from './page-heading';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAGlB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/esm/index.js

@@ -11,5 +11,9 @@ const Layout = Object.assign(InternalLayout, {
     Sider
 });
 export { Layout };
+// TODO: Rename these files to be lowercase.
+// TODO: Add our file naming conventions to documentation.
 export * from './Flex';
 export * from './Grid';
+export * from './nav-card';
+export * from './page-heading';

package/dist/esm/nav-card.css

@@ -0,0 +1,83 @@
+.nav-card {
+  background-color: var(--color-neutral-50);
+  border-radius: 0.35rem;
+  display: flex;
+}
+
+.nav-card__icon {
+  background-color: var(--color-gray-500);
+  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+  color: var(--color-neutral-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 180px;
+
+  /* Overriding SVG so you will not have to pass size prop to Icon component. */
+  svg {
+    width: 1.75rem !important;
+    height: 1.75rem !important;
+  }
+
+  /* Change bg color based on the class set on .nav-card */
+  &:is(.nav-card-akinon *) {
+    background-color: var(--color-akinon-500);
+  }
+
+  &:is(.nav-card-azure *) {
+    background-color: var(--color-azure-500);
+  }
+
+  &:is(.nav-card-blue *) {
+    background-color: var(--color-blue-500);
+  }
+
+  &:is(.nav-card-orange *) {
+    background-color: var(--color-orange-500);
+  }
+
+  &:is(.nav-card-red *) {
+    background-color: var(--color-red-500);
+  }
+
+  &:is(.nav-card-green *) {
+    background-color: var(--color-green-500);
+  }
+
+  &:is(.nav-card-pink *) {
+    background-color: var(--color-pink-500);
+  }
+
+  &:is(.nav-card-purple *) {
+    background-color: var(--color-purple-500);
+  }
+}
+
+.nav-card__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 1.5rem 1rem;
+  width: 100%;
+}
+
+.nav-card__title {
+  color: var(--color-ebonyClay-900);
+  font-size: 1.15rem;
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.nav-card__description {
+  color: var(--color-gray-400);
+  font-weight: 400;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  line-height: 1.3;
+  text-decoration: none;
+}

package/dist/esm/nav-card.d.ts

@@ -0,0 +1,11 @@
+import './nav-card.css';
+import React, { ReactNode } from 'react';
+export type NavCardColorVariant = 'akinon' | 'azure' | 'blue' | 'orange' | 'red' | 'green' | 'pink' | 'purple';
+export interface NavCardProps {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    variant?: NavCardColorVariant;
+}
+export declare const NavCard: ({ title, description, icon, variant }: NavCardProps) => React.JSX.Element;
+//# sourceMappingURL=nav-card.d.ts.map

package/dist/esm/nav-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-card.d.ts","sourceRoot":"","sources":["../../src/nav-card.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,0CAKjB,YAAY,sBAad,CAAC"}

package/dist/esm/nav-card.js

@@ -0,0 +1,11 @@
+import './nav-card.css';
+import clsx from 'clsx';
+import React from 'react';
+export const NavCard = ({ title, description, icon, variant }) => {
+    const variantClass = variant ? `nav-card-${variant}` : '';
+    return (React.createElement("div", { className: clsx('nav-card', variantClass) },
+        icon && React.createElement("div", { className: "nav-card__icon" }, icon),
+        React.createElement("div", { className: "nav-card__content" },
+            React.createElement("h2", { className: "nav-card__title" }, title),
+            React.createElement("div", { className: "nav-card__description" }, description))));
+};

package/dist/esm/page-heading.css

@@ -0,0 +1,27 @@
+.akinon-page-heading {
+  border-bottom: 1px solid var(--color-ebonyClay-400);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+}
+
+.akinon-page-heading__content {
+  max-width: 50%;
+}
+
+.akinon-page-heading__title {
+  color: var(--color-neutral-50);
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.akinon-page-heading__description {
+  color: var(--color-gray-300);
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+}

package/dist/esm/page-heading.d.ts

@@ -0,0 +1,9 @@
+import './page-heading.css';
+import React, { ReactNode } from 'react';
+export interface PageHeadingProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+}
+export declare const PageHeading: ({ title, description, actions }: PageHeadingProps) => React.JSX.Element;
+//# sourceMappingURL=page-heading.d.ts.map

package/dist/esm/page-heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/page-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,sBAalB,CAAC"}

package/dist/esm/page-heading.js

@@ -0,0 +1,9 @@
+import './page-heading.css';
+import React from 'react';
+export const PageHeading = ({ title, description, actions }) => {
+    return (React.createElement("div", { className: "akinon-page-heading" },
+        React.createElement("div", { className: "akinon-page-heading__content" },
+            React.createElement("h1", { className: "akinon-page-heading__title" }, title),
+            description && (React.createElement("p", { className: "akinon-page-heading__description" }, description))),
+        actions && React.createElement("div", { className: "akinon-page-heading__actions" }, actions)));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-layout",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -16,9 +16,9 @@
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.2.0",
     "@akinon/eslint-config": "0.1.0",
-    "@akinon/typescript-config": "0.0.0"
+    "@akinon/typescript-config": "0.1.0",
+    "@akinon/vite-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=18",