ekm-ui 0.3.85 → 0.3.89

package/dist/table-result-block.js

@@ -1,22 +1,24 @@
-export { e as TableResultBlock } from './chunk-BS2JSVCX.js';
+export { e as TableResultBlock } from './chunk-PZSZTHB6.js';
+import './chunk-RHBXFO7R.js';
 import './chunk-CVZY2CLV.js';
 import './chunk-N7JQ6EAC.js';
 import './chunk-HVNLAQA6.js';
 import './chunk-52VBZOHL.js';
 import './chunk-ZHMUFBQM.js';
-import './chunk-Q3HXAUZP.js';
 import './chunk-E62SCYLR.js';
+import './chunk-Q3HXAUZP.js';
 import './chunk-JHGOFDVG.js';
 import './chunk-4E6CDLVE.js';
 import './chunk-XXP5K6Y4.js';
-import './chunk-RHBXFO7R.js';
-import './chunk-P4BV63ZR.js';
+import './chunk-X6RBGNFS.js';
+import './chunk-7Q6OMA2A.js';
+import './chunk-5QCQEH52.js';
 import './chunk-QCHLLBHM.js';
 import './chunk-LIXVY47P.js';
 import './chunk-G2WGEIWK.js';
 import './chunk-7WJGATIR.js';
 import './chunk-RTRHNOTP.js';
-import './chunk-RS2EPFQY.js';
+import './chunk-SFEJDNIA.js';
 import './chunk-E5KIDP3Z.js';
 import './chunk-TBJGGVSZ.js';
 import './chunk-QKHEEDZ4.js';
@@ -28,8 +30,8 @@ import './chunk-EEMQBWYJ.js';
 import './chunk-LTMZ5RRZ.js';
 import './chunk-IY6WVOAI.js';
 import './chunk-VGGEDWFD.js';
-import './chunk-TKQKGJ3X.js';
-import './chunk-LJMVG4UJ.js';
+import './chunk-AVTJXS4U.js';
+import './chunk-F7AUKLLE.js';
 import './chunk-QMOPWIA3.js';
 import './chunk-SLIZ4TDR.js';
 import './chunk-FPELMAZN.js';
@@ -38,9 +40,9 @@ import './chunk-6YBVKGQW.js';
 import './chunk-ISA6E23B.js';
 import './chunk-7Z2AKRKU.js';
 import './chunk-WSRPB5OU.js';
-import './chunk-MD4AM55R.js';
+import './chunk-4GDWK5BI.js';
 import './chunk-DSJ5TRZW.js';
-import './chunk-QP53HWTU.js';
+import './chunk-UUMCAKW4.js';
 import './chunk-4RKNVFVG.js';
 import './chunk-M4UBHZDH.js';
 import './chunk-TMO76FWT.js';

package/dist/text-row.d.ts

@@ -4,8 +4,9 @@ type Props = {
     text: string;
     border?: boolean;
     className?: string;
+    id?: string | null;
 };
-declare function TextRow({ children, title, text, border, className }: Props): JSX.Element;
+declare function TextRow({ children, title, text, border, className, id }: Props): JSX.Element;
 declare namespace TextRow {
     var displayName: string;
 }

package/dist/text-row.js

@@ -1,4 +1,4 @@
-export { a as TextRow } from './chunk-P4BV63ZR.js';
+export { a as TextRow } from './chunk-5QCQEH52.js';
 import './chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=text-row.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.85",
+  "version": "0.3.89",
   "sideEffects": [
     "**/*.css"
   ],

package/src/drawer.tsx

@@ -48,7 +48,7 @@ export function Drawer({ show, onClose, children, title }: Props) {
     <div
       ref={drawerCallback}
       id="EKM-ui-drawer"
-      className="fixed right-0 top-0 z-40 h-screen w-[90%] translate-x-full overflow-y-auto bg-white transition-transform dark:bg-gray-800 sm:max-w-lg md:w-[500px]"
+      className="fixed right-0 top-0 z-50 h-screen w-[90%] translate-x-full overflow-y-auto bg-white transition-transform dark:bg-gray-800 sm:max-w-lg md:w-[500px]"
       tabIndex={-1}
       aria-labelledby="drawer-right-label"
     >

package/src/form-row.tsx

@@ -8,6 +8,7 @@ type Props = {
   helperText?: String;
   className?: string;
   errorText?: string;
+  id?: string | null;
 };
 
 export function FormRow({
@@ -17,9 +18,10 @@ export function FormRow({
   helperText,
   className,
   errorText,
+  id,
 }: Props) {
   return (
-    <div className={clsx("grid grid-cols-1 content-start gap-y-2", className)}>
+    <div id={id || undefined} className={clsx("grid grid-cols-1 content-start gap-y-2", className)}>
       <Label htmlFor={htmlFor} color={errorText && "failure"}>
         {label}
       </Label>

package/src/index.tsx

@@ -55,6 +55,8 @@ export { FeaturePageGroup } from "./featurePageComponents/feature-page-group";
 export { TableResultBlock } from "./table-result-block";
 export { DateRangePicker } from "./date-range-picker";
 export { ProductPicker } from "./product-picker/product-drawer";
-export {TestComponent} from "./test-component";
+export { TestComponent } from "./test-component";
+export { NBUI_Container } from "./nbui/nbui-container";
+export { NBUI_Card } from "./nbui/nbui-card";
 
 import "./styles.css";

package/src/nbui/nbui-card.tsx

@@ -0,0 +1,15 @@
+export function NBUI_Card() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex h-full flex-col justify-center gap-4">
+        <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+        <div className="mt-2 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+    </div>
+  )
+}

package/src/nbui/nbui-container.tsx

@@ -0,0 +1,22 @@
+//@ts-nocheck
+function NBUI_PageHeader() {
+  return (
+    <div className="border-b bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex lg:items-center lg:justify-between">
+      <div className="w-full">
+        <div className="w-32 h-4 bg-gray-200 rounded-md" />
+        <div className="flex items-center">
+          <div className="mt-2 w-80 h-10 bg-gray-400 rounded-md" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function NBUI_Container({ children }) {
+  return (
+    <main id="nbuiContainer" className="relative dark:bg-gray-900 flex h-full flex-grow flex-col gap-4 overflow-y-auto bg-gray-50 ">
+      <NBUI_PageHeader />
+      <form className="grid-col-1 grid gap-y-4 px-4">{children}</form>
+    </main>
+  )
+}

package/src/no-results-block.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export function NoResultsBlock({ icon, title, text, children, buttons }: Props) {
   return (
-    <div className="flex flex-col items-center justify-between px-4 py-16 sm:px-8">
+    <div id='noResultsBlock' className="flex flex-col items-center justify-between px-4 py-16 sm:px-8">
       {icon}
       <h4 className="text-center text-xl font-bold dark:text-white">{title}</h4>
       <p className="mb-6 text-center text-gray-500 dark:text-gray-400">

package/src/page-header.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 export function PageHeader({ children, title, text, breadcrumbs, extras }: Props) {
   return (
-    <div className="border-b bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex lg:items-center lg:justify-between">
+    <div id="pageHeader" className="border-b bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex lg:items-center lg:justify-between">
       <div className="flex w-full flex-wrap items-center justify-between gap-x-8 gap-y-4 sm:flex-nowrap ">
         <div>
           <Breadcrumb aria-label="Default breadcrumb example">

package/src/text-row.tsx

@@ -4,12 +4,14 @@ type Props = {
   text: string;
   border?: boolean;
   className?: string;
+  id?: string | null;
 };
 
-export function TextRow({ children, title, text, border, className }: Props) {
+export function TextRow({ children, title, text, border, className, id }: Props) {
   return (
     <div
-      className={`${className} flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap 
+      id={id || undefined}
+      className={`${className || ''} flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap 
       ${border ? "border-b pb-4 dark:border-gray-900" : ""} `}
     >
       <div>

package/dist/chunk-P4BV63ZR.js

@@ -1,8 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function n({children:e,title:a,text:s,border:o,className:i}){return jsxs("div",{className:`${i} flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap 
-      ${o?"border-b pb-4 dark:border-gray-900":""} `,children:[jsxs("div",{children:[jsx("p",{className:"mb-1 text-sm font-medium dark:text-white",children:a}),jsx("p",{className:"flex-shrink text-xs font-normal text-gray-500 dark:text-gray-400",children:s})]}),e&&e]})}n.displayName="TextRow";
-
-export { n as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-P4BV63ZR.js.map

package/dist/chunk-P4BV63ZR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/text-row.tsx"],"names":["jsx","jsxs","TextRow","children","title","text","border","className"],"mappings":"AAcM,OACE,OAAAA,EADF,QAAAC,MAAA,oBANC,SAASC,EAAQ,CAAE,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,OAAAC,EAAQ,UAAAC,CAAU,EAAU,CAC3E,OACEN,EAAC,OACC,UAAW,GAAGM;AAAA,QACZD,EAAS,qCAAuC,MAElD,UAAAL,EAAC,OACC,UAAAD,EAAC,KAAE,UAAU,2CAA4C,SAAAI,EAAM,EAC/DJ,EAAC,KAAE,UAAU,mEACV,SAAAK,EACH,GACF,EACCF,GAAYA,GACf,CAEJ,CAEAD,EAAQ,YAAc","sourcesContent":["type Props = {\n  children?: JSX.Element;\n  title: string;\n  text: string;\n  border?: boolean;\n  className?: string;\n};\n\nexport function TextRow({ children, title, text, border, className }: Props) {\n  return (\n    <div\n      className={`${className} flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap \n      ${border ? \"border-b pb-4 dark:border-gray-900\" : \"\"} `}\n    >\n      <div>\n        <p className=\"mb-1 text-sm font-medium dark:text-white\">{title}</p>\n        <p className=\"flex-shrink text-xs font-normal text-gray-500 dark:text-gray-400\">\n          {text}\n        </p>\n      </div>\n      {children && children}\n    </div>\n  );\n}\n\nTextRow.displayName = \"TextRow\";\n"]}

package/dist/chunk-QP53HWTU.js

@@ -1,9 +0,0 @@
-import { a } from './chunk-4RKNVFVG.js';
-import i from 'clsx';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function m({children:o,label:e,htmlFor:l,helperText:r,className:n,errorText:t}){return jsxs("div",{className:i("grid grid-cols-1 content-start gap-y-2",n),children:[jsx(a,{htmlFor:l,color:t&&"failure",children:e}),o,r&&!t&&jsx("span",{className:"text-xs font-normal text-gray-500 dark:text-gray-400",children:r}),t&&jsx("span",{className:"text-xs font-normal text-red-500 dark:text-red-500",children:t})]})}m.displayName="FormRow";
-
-export { m as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-QP53HWTU.js.map

package/dist/chunk-QP53HWTU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form-row.tsx"],"names":["clsx","jsx","jsxs","FormRow","children","label","htmlFor","helperText","className","errorText","Label"],"mappings":"wCAAA,OAAOA,MAAU,OAqBb,OACE,OAAAC,EADF,QAAAC,MAAA,oBATG,SAASC,EAAQ,CACtB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,WAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAU,CACR,OACEP,EAAC,OAAI,UAAWF,EAAK,yCAA0CQ,CAAS,EACtE,UAAAP,EAACS,EAAA,CAAM,QAASJ,EAAS,MAAOG,GAAa,UAC1C,SAAAJ,EACH,EACCD,EACAG,GAAc,CAACE,GACdR,EAAC,QAAK,UAAU,uDACb,SAAAM,EACH,EAEDE,GACCR,EAAC,QAAK,UAAU,qDACb,SAAAQ,EACH,GAEJ,CAEJ,CAEAN,EAAQ,YAAc","sourcesContent":["import clsx from \"clsx\";\nimport { Label } from \"./label\";\n\ntype Props = {\n  children: React.ReactNode;\n  label: string;\n  htmlFor: string;\n  helperText?: String;\n  className?: string;\n  errorText?: string;\n};\n\nexport function FormRow({\n  children,\n  label,\n  htmlFor,\n  helperText,\n  className,\n  errorText,\n}: Props) {\n  return (\n    <div className={clsx(\"grid grid-cols-1 content-start gap-y-2\", className)}>\n      <Label htmlFor={htmlFor} color={errorText && \"failure\"}>\n        {label}\n      </Label>\n      {children}\n      {helperText && !errorText && (\n        <span className=\"text-xs font-normal text-gray-500 dark:text-gray-400\">\n          {helperText}\n        </span>\n      )}\n      {errorText && (\n        <span className=\"text-xs font-normal text-red-500 dark:text-red-500\">\n          {errorText}\n        </span>\n      )}\n    </div>\n  );\n}\n\nFormRow.displayName = \"FormRow\";\n"]}

package/dist/chunk-RS2EPFQY.js

@@ -1,8 +0,0 @@
-import { a } from './chunk-TRVGXTCI.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function x({children:l,title:m,text:i,breadcrumbs:s,extras:n}){return jsx("div",{className:"border-b bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex lg:items-center lg:justify-between",children:jsxs("div",{className:"flex w-full flex-wrap items-center justify-between gap-x-8 gap-y-4 sm:flex-nowrap ",children:[jsxs("div",{children:[jsx(a,{"aria-label":"Default breadcrumb example",children:(s||[]).map((r,d)=>d===0?jsx(a.Home,{href:r.linkURL,children:r.linkLabel},r.linkURL):jsx(a.Item,{href:r.linkURL,children:r.linkLabel},r.linkURL))}),jsxs("div",{className:"flex items-center",children:[jsx("h2",{className:"mt-2 text-xl font-semibold leading-7 text-gray-900 dark:text-white sm:truncate",children:m}),n]}),jsx("p",{className:" text-sm font-normal text-gray-500 dark:text-gray-400",children:i})]}),jsx("div",{className:"mt-1 flex flex-shrink-0 flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6",children:l})]})})}x.displayName="PageHeader";
-
-export { x as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-RS2EPFQY.js.map

package/dist/chunk-RS2EPFQY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/page-header.tsx"],"names":["jsx","jsxs","PageHeader","children","title","text","breadcrumbs","extras","Breadcrumb","bc","i"],"mappings":"mCAoBkB,cAAAA,EAYR,QAAAC,MAZQ,oBATX,SAASC,EAAW,CAAE,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,YAAAC,EAAa,OAAAC,CAAO,EAAU,CAChF,OACEP,EAAC,OAAI,UAAU,mHACb,SAAAC,EAAC,OAAI,UAAU,qFACb,UAAAA,EAAC,OACC,UAAAD,EAACQ,EAAA,CAAW,aAAW,6BACnB,UAAAF,GAAe,CAAC,GAAG,IAAI,CAACG,EAAIC,IACxBA,IAAM,EAENV,EAACQ,EAAW,KAAX,CAAiC,KAAMC,EAAG,QACxC,SAAAA,EAAG,WADgBA,EAAG,OAEzB,EAIFT,EAACQ,EAAW,KAAX,CAAiC,KAAMC,EAAG,QACxC,SAAAA,EAAG,WADgBA,EAAG,OAEzB,CAEH,EACH,EACAR,EAAC,OAAI,UAAU,oBACf,UAAAD,EAAC,MAAG,UAAU,iFACX,SAAAI,EACD,EACDG,GACH,EACEP,EAAC,KAAE,UAAU,wDACV,SAAAK,EACH,GACF,EACAL,EAAC,OAAI,UAAU,iFACZ,SAAAG,EACH,GACF,EACF,CAEJ,CAEAD,EAAW,YAAc","sourcesContent":["//@ts-nocheck\nimport { Breadcrumb } from \"./breadcrumb\";\n\ntype Props = {\n  title: string;\n  text?: string | Element[];\n  children?: JSX.Element;\n  breadcrumbs: Array<{ linkLabel: string; linkURL: string }>;\n  extras: JSX.Element;\n};\n\nexport function PageHeader({ children, title, text, breadcrumbs, extras }: Props) {\n  return (\n    <div className=\"border-b bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex lg:items-center lg:justify-between\">\n      <div className=\"flex w-full flex-wrap items-center justify-between gap-x-8 gap-y-4 sm:flex-nowrap \">\n        <div>\n          <Breadcrumb aria-label=\"Default breadcrumb example\">\n            {(breadcrumbs || []).map((bc, i) => {\n              if (i === 0) {\n                return (\n                  <Breadcrumb.Home key={bc.linkURL} href={bc.linkURL}>\n                    {bc.linkLabel}\n                  </Breadcrumb.Home>\n                );\n              }\n              return (\n                <Breadcrumb.Item key={bc.linkURL} href={bc.linkURL}>\n                  {bc.linkLabel}\n                </Breadcrumb.Item>\n              );\n            })}\n          </Breadcrumb>\n          <div className='flex items-center'>\n          <h2 className=\"mt-2 text-xl font-semibold leading-7 text-gray-900 dark:text-white sm:truncate\">\n            {title}\n            </h2>\n          {extras}\n        </div>      \n          <p className=\" text-sm font-normal text-gray-500 dark:text-gray-400\">\n            {text}\n          </p>\n        </div>\n        <div className=\"mt-1 flex flex-shrink-0 flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nPageHeader.displayName = \"PageHeader\";\n"]}

package/dist/chunk-TKQKGJ3X.js

@@ -1,7 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function a({icon:t,title:l,text:s,children:n,buttons:x}){return jsxs("div",{className:"flex flex-col items-center justify-between px-4 py-16 sm:px-8",children:[t,jsx("h4",{className:"text-center text-xl font-bold dark:text-white",children:l}),jsx("p",{className:"mb-6 text-center text-gray-500 dark:text-gray-400",children:s}),jsx("div",{className:"flex flex-wrap",children:n})]})}
-
-export { a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-TKQKGJ3X.js.map

package/dist/chunk-TKQKGJ3X.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/no-results-block.tsx"],"names":["jsx","jsxs","NoResultsBlock","icon","title","text","children","buttons"],"mappings":"AAWI,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAFG,SAASC,EAAe,CAAE,KAAAC,EAAM,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,QAAAC,CAAQ,EAAU,CAC9E,OACEN,EAAC,OAAI,UAAU,gEACZ,UAAAE,EACDH,EAAC,MAAG,UAAU,gDAAiD,SAAAI,EAAM,EACrEJ,EAAC,KAAE,UAAU,oDACV,SAAAK,EACH,EACAL,EAAC,OAAI,UAAU,iBAAkB,SAAAM,EAAS,GAC5C,CAEJ","sourcesContent":["\ntype Props = {\n  title: string;\n  icon: JSX.Element;\n  text: string;\n  buttons?: JSX.Element;\n  children?: JSX.Element;\n};\n\nexport function NoResultsBlock({ icon, title, text, children, buttons }: Props) {\n  return (\n    <div className=\"flex flex-col items-center justify-between px-4 py-16 sm:px-8\">\n      {icon}\n      <h4 className=\"text-center text-xl font-bold dark:text-white\">{title}</h4>\n      <p className=\"mb-6 text-center text-gray-500 dark:text-gray-400\">\n        {text}\n      </p>\n      <div className=\"flex flex-wrap\">{children}</div>\n    </div>\n  );\n}\n"]}