From caddbed9a5d9702ac878a0ba955666dfef6cdc08 Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 4 Sep 2023 05:29:10 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20newfold-?= =?UTF-8?q?labs/npm-ui-component-library@68f627587c8c519b3d93e8b0434579ac1?= =?UTF-8?q?4fcfafb=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 8 ++++---- assets/js/015e23ec.265901cd.js | 1 - assets/js/015e23ec.95e6fd9b.js | 1 + assets/js/029f740b.37ae67e5.js | 1 + assets/js/029f740b.d9b483bf.js | 1 - assets/js/084f0435.8581d596.js | 1 - assets/js/084f0435.d3c9d8c5.js | 1 + assets/js/0b534472.0ad11de8.js | 1 - assets/js/0b534472.344b6c24.js | 2 ++ assets/js/0b534472.344b6c24.js.LICENSE.txt | 5 +++++ assets/js/0e384e19.48b18204.js | 1 + assets/js/0e384e19.6fe49415.js | 1 - assets/js/1471.1bc045e5.js | 1 - assets/js/1505.4ef9620d.js | 1 + assets/js/1d4ada1c.8d8cd6a7.js | 1 + assets/js/348e7aa1.ba3c713b.js | 2 ++ assets/js/348e7aa1.ba3c713b.js.LICENSE.txt | 5 +++++ assets/js/348e7aa1.bd346d51.js | 1 - assets/js/35ceb33f.213b7baf.js | 1 - assets/js/35ceb33f.42b773de.js | 1 + assets/js/393be207.016ded32.js | 1 + assets/js/393be207.cd5e4380.js | 1 - assets/js/3b8c55ea.1480e485.js | 1 - assets/js/3b8c55ea.6cd89569.js | 1 + assets/js/3bb86fd9.6da90e74.js | 1 - assets/js/3bb86fd9.8d4ae03e.js | 1 + assets/js/3bedbcfb.68db6585.js | 1 + assets/js/3bedbcfb.8a7506db.js | 1 - assets/js/43d7a89e.934e68e5.js | 1 + assets/js/43d7a89e.9866fd14.js | 1 - assets/js/492cb1dc.414bc3ac.js | 1 - assets/js/492cb1dc.e2bf8112.js | 1 + assets/js/4bedb3f9.a4177a8d.js | 1 - assets/js/4bedb3f9.dcbe06d6.js | 1 + assets/js/50dd7c71.5e529afd.js | 1 + assets/js/6ca897a8.0eb81073.js | 1 - assets/js/6ca897a8.89857279.js | 1 + assets/js/6e956a36.4f246c39.js | 2 ++ assets/js/6e956a36.4f246c39.js.LICENSE.txt | 5 +++++ assets/js/6e956a36.bcbb947f.js | 1 - assets/js/74937021.1511b81b.js | 1 - assets/js/74937021.59cb89f9.js | 1 + assets/js/7548c255.1454627a.js | 1 + assets/js/7548c255.d46d83bc.js | 1 - assets/js/7554.6063e27c.js | 1 - assets/js/83c03953.fceb441a.js | 1 + assets/js/8639.55346e91.js | 1 + assets/js/8973.f1f79420.js | 1 - assets/js/90252242.736e5eb2.js | 1 - assets/js/90252242.9c8883ed.js | 1 + assets/js/912d98e8.3cb4f9d2.js | 1 + assets/js/912d98e8.caa5087f.js | 1 - assets/js/9346.9aced7d6.js | 1 + assets/js/935f2afb.714aa491.js | 1 - assets/js/935f2afb.a43ce0b2.js | 1 + assets/js/9455.3ff6f847.js | 1 + assets/js/9455.f8142530.js | 1 - assets/js/9675bd58.79c0b67e.js | 2 ++ assets/js/9675bd58.79c0b67e.js.LICENSE.txt | 5 +++++ assets/js/9675bd58.8a7e6d74.js | 1 - assets/js/9728370a.674fb262.js | 1 + assets/js/9728370a.b708f060.js | 1 - assets/js/9846.068c01d3.js | 2 ++ ...CENSE.txt => 9846.068c01d3.js.LICENSE.txt} | 0 assets/js/9a55f622.52557cd4.js | 1 + assets/js/9a7bfab4.0a4c701c.js | 1 + assets/js/9f3b7a06.3a906159.js | 1 - assets/js/9f3b7a06.3bec27d1.js | 2 ++ assets/js/9f3b7a06.3bec27d1.js.LICENSE.txt | 5 +++++ assets/js/a18f9f07.8b51cf91.js | 1 - assets/js/a18f9f07.e5a74e9f.js | 2 ++ assets/js/a18f9f07.e5a74e9f.js.LICENSE.txt | 5 +++++ assets/js/aa8f8270.70ea9c57.js | 1 - assets/js/aa8f8270.fd921cb4.js | 1 + assets/js/b2507287.18a3208c.js | 2 ++ assets/js/b2507287.18a3208c.js.LICENSE.txt | 5 +++++ assets/js/b2507287.39ac8397.js | 1 - assets/js/b4b23776.f2ea154c.js | 1 + assets/js/ba9faf66.5fb8b902.js | 1 - assets/js/ba9faf66.b34f1b8f.js | 1 + assets/js/c20fed52.086af69c.js | 1 - assets/js/c20fed52.d76243b5.js | 1 + assets/js/c599a65d.b52e9200.js | 2 ++ assets/js/c599a65d.b52e9200.js.LICENSE.txt | 5 +++++ assets/js/c599a65d.dff63b89.js | 1 - assets/js/ce748f31.b255f576.js | 1 - assets/js/ce748f31.cb42ee3e.js | 1 + assets/js/common.fb0ffc95.js | 2 -- assets/js/d6ae6126.cc518908.js | 1 + assets/js/d725d020.0e0f89b0.js | 1 - assets/js/d725d020.42889993.js | 2 ++ assets/js/d725d020.42889993.js.LICENSE.txt | 5 +++++ assets/js/d9e1d16f.1214b29c.js | 1 - assets/js/d9e1d16f.d0958e5f.js | 1 + assets/js/e1984940.34e12b6f.js | 1 - assets/js/e1984940.62bc1da8.js | 1 + assets/js/e566272d.674c1860.js | 1 - assets/js/e566272d.b463ec9b.js | 2 ++ assets/js/e566272d.b463ec9b.js.LICENSE.txt | 5 +++++ assets/js/e6569d63.28a23180.js | 1 + assets/js/ea07af84.4a2e51fa.js | 1 + assets/js/ea07af84.d9088f94.js | 1 - assets/js/f392b896.10607234.js | 2 ++ assets/js/f392b896.10607234.js.LICENSE.txt | 5 +++++ assets/js/f392b896.775fe037.js | 1 - assets/js/f7f88a5e.0c19068c.js | 1 + assets/js/f7f88a5e.85e0cbbd.js | 1 - assets/js/main.388d0fa9.js | 2 ++ ...CENSE.txt => main.388d0fa9.js.LICENSE.txt} | 0 assets/js/main.51da1966.js | 2 -- assets/js/runtime~main.335546f9.js | 1 + assets/js/runtime~main.da539003.js | 1 - docs/category/components/index.html | 10 +++++----- docs/category/elements/index.html | 10 +++++----- docs/category/hooks/index.html | 16 ++++++++++++++++ docs/components/autocomplete-field/index.html | 10 +++++----- docs/components/card/index.html | 10 +++++----- docs/components/checkbox-group/index.html | 10 +++++----- docs/components/children-limiter/index.html | 12 ++++++------ docs/components/feature-upsell/index.html | 10 +++++----- docs/components/modal/index.html | 10 +++++----- docs/components/notifications/index.html | 10 +++++----- docs/components/radio-group/index.html | 10 +++++----- docs/components/root/index.html | 13 ++++++------- docs/components/select-field/index.html | 12 ++++++------ docs/components/sidebar-navigation/index.html | 10 +++++----- docs/components/tag-field/index.html | 17 +++++++++++------ docs/components/text-field/index.html | 15 +++++++++------ docs/components/textarea-field/index.html | 15 +++++++++------ docs/components/toggle-field/index.html | 15 +++++++++------ docs/elements/alert/index.html | 10 +++++----- docs/elements/autocomplete/index.html | 10 +++++----- docs/elements/badge/index.html | 10 +++++----- docs/elements/button/index.html | 10 +++++----- docs/elements/checkbox/index.html | 10 +++++----- docs/elements/code/index.html | 10 +++++----- docs/elements/error-boundary/index.html | 10 +++++----- docs/elements/label/index.html | 10 +++++----- docs/elements/link/index.html | 10 +++++----- docs/elements/progess-bar/index.html | 10 +++++----- docs/elements/radio/index.html | 10 +++++----- docs/elements/select/index.html | 10 +++++----- docs/elements/spinner/index.html | 10 +++++----- docs/elements/table/index.html | 10 +++++----- docs/elements/tag-input/index.html | 10 +++++----- docs/elements/text-input/index.html | 10 +++++----- docs/elements/textarea/index.html | 10 +++++----- docs/elements/title/index.html | 10 +++++----- docs/elements/toggle/index.html | 12 ++++++------ docs/hooks/useBeforeUnload/index.html | 17 +++++++++++++++++ docs/hooks/useDescribedBy/index.html | 19 +++++++++++++++++++ docs/hooks/useMediaQuery/index.html | 19 +++++++++++++++++++ docs/hooks/usePrevious/index.html | 16 ++++++++++++++++ docs/hooks/useRootContext/index.html | 16 ++++++++++++++++ docs/hooks/useSvgAria/index.html | 19 +++++++++++++++++++ docs/hooks/useToggleState/index.html | 19 +++++++++++++++++++ docs/installation/index.html | 10 +++++----- docs/intro/index.html | 10 +++++----- index.html | 8 ++++---- markdown-page/index.html | 8 ++++---- sitemap.xml | 2 +- 161 files changed, 487 insertions(+), 259 deletions(-) delete mode 100644 assets/js/015e23ec.265901cd.js create mode 100644 assets/js/015e23ec.95e6fd9b.js create mode 100644 assets/js/029f740b.37ae67e5.js delete mode 100644 assets/js/029f740b.d9b483bf.js delete mode 100644 assets/js/084f0435.8581d596.js create mode 100644 assets/js/084f0435.d3c9d8c5.js delete mode 100644 assets/js/0b534472.0ad11de8.js create mode 100644 assets/js/0b534472.344b6c24.js create mode 100644 assets/js/0b534472.344b6c24.js.LICENSE.txt create mode 100644 assets/js/0e384e19.48b18204.js delete mode 100644 assets/js/0e384e19.6fe49415.js delete mode 100644 assets/js/1471.1bc045e5.js create mode 100644 assets/js/1505.4ef9620d.js create mode 100644 assets/js/1d4ada1c.8d8cd6a7.js create mode 100644 assets/js/348e7aa1.ba3c713b.js create mode 100644 assets/js/348e7aa1.ba3c713b.js.LICENSE.txt delete mode 100644 assets/js/348e7aa1.bd346d51.js delete mode 100644 assets/js/35ceb33f.213b7baf.js create mode 100644 assets/js/35ceb33f.42b773de.js create mode 100644 assets/js/393be207.016ded32.js delete mode 100644 assets/js/393be207.cd5e4380.js delete mode 100644 assets/js/3b8c55ea.1480e485.js create mode 100644 assets/js/3b8c55ea.6cd89569.js delete mode 100644 assets/js/3bb86fd9.6da90e74.js create mode 100644 assets/js/3bb86fd9.8d4ae03e.js create mode 100644 assets/js/3bedbcfb.68db6585.js delete mode 100644 assets/js/3bedbcfb.8a7506db.js create mode 100644 assets/js/43d7a89e.934e68e5.js delete mode 100644 assets/js/43d7a89e.9866fd14.js delete mode 100644 assets/js/492cb1dc.414bc3ac.js create mode 100644 assets/js/492cb1dc.e2bf8112.js delete mode 100644 assets/js/4bedb3f9.a4177a8d.js create mode 100644 assets/js/4bedb3f9.dcbe06d6.js create mode 100644 assets/js/50dd7c71.5e529afd.js delete mode 100644 assets/js/6ca897a8.0eb81073.js create mode 100644 assets/js/6ca897a8.89857279.js create mode 100644 assets/js/6e956a36.4f246c39.js create mode 100644 assets/js/6e956a36.4f246c39.js.LICENSE.txt delete mode 100644 assets/js/6e956a36.bcbb947f.js delete mode 100644 assets/js/74937021.1511b81b.js create mode 100644 assets/js/74937021.59cb89f9.js create mode 100644 assets/js/7548c255.1454627a.js delete mode 100644 assets/js/7548c255.d46d83bc.js delete mode 100644 assets/js/7554.6063e27c.js create mode 100644 assets/js/83c03953.fceb441a.js create mode 100644 assets/js/8639.55346e91.js delete mode 100644 assets/js/8973.f1f79420.js delete mode 100644 assets/js/90252242.736e5eb2.js create mode 100644 assets/js/90252242.9c8883ed.js create mode 100644 assets/js/912d98e8.3cb4f9d2.js delete mode 100644 assets/js/912d98e8.caa5087f.js create mode 100644 assets/js/9346.9aced7d6.js delete mode 100644 assets/js/935f2afb.714aa491.js create mode 100644 assets/js/935f2afb.a43ce0b2.js create mode 100644 assets/js/9455.3ff6f847.js delete mode 100644 assets/js/9455.f8142530.js create mode 100644 assets/js/9675bd58.79c0b67e.js create mode 100644 assets/js/9675bd58.79c0b67e.js.LICENSE.txt delete mode 100644 assets/js/9675bd58.8a7e6d74.js create mode 100644 assets/js/9728370a.674fb262.js delete mode 100644 assets/js/9728370a.b708f060.js create mode 100644 assets/js/9846.068c01d3.js rename assets/js/{common.fb0ffc95.js.LICENSE.txt => 9846.068c01d3.js.LICENSE.txt} (100%) create mode 100644 assets/js/9a55f622.52557cd4.js create mode 100644 assets/js/9a7bfab4.0a4c701c.js delete mode 100644 assets/js/9f3b7a06.3a906159.js create mode 100644 assets/js/9f3b7a06.3bec27d1.js create mode 100644 assets/js/9f3b7a06.3bec27d1.js.LICENSE.txt delete mode 100644 assets/js/a18f9f07.8b51cf91.js create mode 100644 assets/js/a18f9f07.e5a74e9f.js create mode 100644 assets/js/a18f9f07.e5a74e9f.js.LICENSE.txt delete mode 100644 assets/js/aa8f8270.70ea9c57.js create mode 100644 assets/js/aa8f8270.fd921cb4.js create mode 100644 assets/js/b2507287.18a3208c.js create mode 100644 assets/js/b2507287.18a3208c.js.LICENSE.txt delete mode 100644 assets/js/b2507287.39ac8397.js create mode 100644 assets/js/b4b23776.f2ea154c.js delete mode 100644 assets/js/ba9faf66.5fb8b902.js create mode 100644 assets/js/ba9faf66.b34f1b8f.js delete mode 100644 assets/js/c20fed52.086af69c.js create mode 100644 assets/js/c20fed52.d76243b5.js create mode 100644 assets/js/c599a65d.b52e9200.js create mode 100644 assets/js/c599a65d.b52e9200.js.LICENSE.txt delete mode 100644 assets/js/c599a65d.dff63b89.js delete mode 100644 assets/js/ce748f31.b255f576.js create mode 100644 assets/js/ce748f31.cb42ee3e.js delete mode 100644 assets/js/common.fb0ffc95.js create mode 100644 assets/js/d6ae6126.cc518908.js delete mode 100644 assets/js/d725d020.0e0f89b0.js create mode 100644 assets/js/d725d020.42889993.js create mode 100644 assets/js/d725d020.42889993.js.LICENSE.txt delete mode 100644 assets/js/d9e1d16f.1214b29c.js create mode 100644 assets/js/d9e1d16f.d0958e5f.js delete mode 100644 assets/js/e1984940.34e12b6f.js create mode 100644 assets/js/e1984940.62bc1da8.js delete mode 100644 assets/js/e566272d.674c1860.js create mode 100644 assets/js/e566272d.b463ec9b.js create mode 100644 assets/js/e566272d.b463ec9b.js.LICENSE.txt create mode 100644 assets/js/e6569d63.28a23180.js create mode 100644 assets/js/ea07af84.4a2e51fa.js delete mode 100644 assets/js/ea07af84.d9088f94.js create mode 100644 assets/js/f392b896.10607234.js create mode 100644 assets/js/f392b896.10607234.js.LICENSE.txt delete mode 100644 assets/js/f392b896.775fe037.js create mode 100644 assets/js/f7f88a5e.0c19068c.js delete mode 100644 assets/js/f7f88a5e.85e0cbbd.js create mode 100644 assets/js/main.388d0fa9.js rename assets/js/{main.51da1966.js.LICENSE.txt => main.388d0fa9.js.LICENSE.txt} (100%) delete mode 100644 assets/js/main.51da1966.js create mode 100644 assets/js/runtime~main.335546f9.js delete mode 100644 assets/js/runtime~main.da539003.js create mode 100644 docs/category/hooks/index.html create mode 100644 docs/hooks/useBeforeUnload/index.html create mode 100644 docs/hooks/useDescribedBy/index.html create mode 100644 docs/hooks/useMediaQuery/index.html create mode 100644 docs/hooks/usePrevious/index.html create mode 100644 docs/hooks/useRootContext/index.html create mode 100644 docs/hooks/useSvgAria/index.html create mode 100644 docs/hooks/useToggleState/index.html diff --git a/404.html b/404.html index 3915312..3997f83 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Newfold UI - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

Hello From Root

- - + + \ No newline at end of file diff --git a/assets/js/015e23ec.265901cd.js b/assets/js/015e23ec.265901cd.js deleted file mode 100644 index d17a5d1..0000000 --- a/assets/js/015e23ec.265901cd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[4554],{3624:(e,n,t)=>{t.d(n,{Z:()=>g});var a=t(7294),r=t(5697),s=t.n(r),l=t(6486),i=t(4184),o=t.n(i),c=t(7201),d=t(5426);const u=a.forwardRef((function(e,n){return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:n},e),a.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))}));const m=a.forwardRef((function(e,n){return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:n},e),a.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",clipRule:"evenodd"}))}));const p=a.forwardRef((function(e,n){return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:n},e),a.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))})),f={success:d.Z,warning:u,info:m,error:p},v={variant:{success:"nfd-validation-icon--success",warning:"nfd-validation-icon--warning",info:"nfd-validation-icon--info",error:"nfd-validation-icon--error"}},h=({variant:e="info",className:n="",...t})=>{const r=(0,a.useMemo)((()=>f[e]),[e]),s=(0,c.Z)();return r?(0,a.createElement)(r,{...s,...t,className:o()("nfd-validation-icon",v.variant[e],n)}):null};h.propTypes={variant:s().oneOf((0,l.values)({success:"success",warning:"warning",info:"info",error:"error"})),className:s().string};const g=h},1523:(e,n,t)=>{t.d(n,{Z:()=>u});var a=t(7294),r=t(5697),s=t.n(r),l=t(6486),i=t(4184),o=t.n(i);const c={variant:{success:"nfd-validation-message--success",warning:"nfd-validation-message--warning",info:"nfd-validation-message--info",error:"nfd-validation-message--error"}},d=({as:e="p",variant:n="info",children:t,className:r="",...s})=>(0,a.createElement)(e,{...s,className:o()("nfd-validation-message",c.variant[n],r)},t);d.propTypes={as:s().elementType,variant:s().oneOf((0,l.keys)(c.variant)),message:s().node,className:s().string,children:s().node.isRequired};const u=d},7201:(e,n,t)=>{t.d(n,{Z:()=>r});var a=t(7294);const r=(e=null)=>(0,a.useMemo)((()=>{const n={role:"img","aria-hidden":"true"};return null!==e&&(n.focusable=e?"true":"false"),n}),[e])},956:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>E,contentTitle:()=>A,default:()=>z,frontMatter:()=>x,metadata:()=>R,toc:()=>Z});var a=t(7462),r=t(7294),s=t(3905),l=t(2504),i=t(1629),o=t(4184),c=t.n(o),d=t(5697),u=t.n(d),m=t(3624),p=t(1523);const f={variant:{info:"nfd-alert--info",warning:"nfd-alert--warning",success:"nfd-alert--success",error:"nfd-alert--error"}},v={alert:"alert",status:"status"},h=(0,r.forwardRef)((({children:e,role:n="status",as:t="span",variant:a="info",className:s="",...l},i)=>(0,r.createElement)(t,{ref:i,className:c()("nfd-alert",f.variant[a],s),role:v[n],...l},(0,r.createElement)(m.Z,{variant:a,className:"nfd-alert__icon"}),(0,r.createElement)(p.Z,{as:"div",variant:a,className:"nfd-alert__message"},e)))),g={children:u().node.isRequired,as:u().elementType,variant:u().oneOf(Object.keys(f.variant)),className:u().string,role:u().oneOf(Object.keys(v))};h.propTypes=g,h.defaultProps={as:"span",variant:"info",className:"",role:"status"};const w=h,k=e=>(0,r.createElement)(h,{...e});k.propTypes=h.propTypes,k.DefaultProps=h.defaultProps,k.displayName="Alert";const b={toc:[{value:"Info",id:"info",level:4},{value:"Warning",id:"warning",level:4},{value:"Success",id:"success",level:4},{value:"Error",id:"error",level:4}]},y="wrapper";function T(e){let{components:n,...t}=e;return(0,s.kt)(y,(0,a.Z)({},b,t,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("h4",{id:"info"},"Info"),(0,s.kt)(i.Z,{mdxType:"NewfoldRoot"},(0,s.kt)(w,{variant:"info",mdxType:"Alert"},"This is an information alert"," ",(0,s.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is an information alert{\' \'}\n \n with a link\n \n . (default)\n\n')),(0,s.kt)("h4",{id:"warning"},"Warning"),(0,s.kt)(i.Z,{mdxType:"NewfoldRoot"},(0,s.kt)(w,{variant:"warning",mdxType:"Alert"},"This is a warning alert"," ",(0,s.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is a warning alert{\' \'}\n \n with a link\n \n .\n\n')),(0,s.kt)("h4",{id:"success"},"Success"),(0,s.kt)(i.Z,{mdxType:"NewfoldRoot"},(0,s.kt)(w,{role:"alert",variant:"success",mdxType:"Alert"},"This is a success alert"," ",(0,s.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is a success alert{\' \'}\n \n with a link\n \n .\n\n')),(0,s.kt)("h4",{id:"error"},"Error"),(0,s.kt)(i.Z,{mdxType:"NewfoldRoot"},(0,s.kt)(w,{role:"alert",variant:"error",mdxType:"Alert"},"This is an error alert"," ",(0,s.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is an error alert{\' \'}\n \n with a link\n \n .\n\n')))}T.isMDXComponent=!0;const N={children:{type:"node",description:"The content of the alert.",isRequired:!0},as:{type:["span","div"],description:"The HTML element to render.",defaultValue:"span"},variant:{type:["info","warning","success","error"],description:"The variant of the alert.",defaultValue:"info"},role:{type:["alert","status"],defaultValue:"alert"},className:{type:"string"}},x={},A="Alert",R={unversionedId:"elements/alert",id:"elements/alert",title:"Alert",description:"Alerts provide immediate feedback to users about their actions or system status.",source:"@site/docs/elements/alert.mdx",sourceDirName:"elements",slug:"/elements/alert",permalink:"/npm-ui-component-library/docs/elements/alert",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/elements/alert.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Elements",permalink:"/npm-ui-component-library/docs/category/elements"},next:{title:"Autocomplete",permalink:"/npm-ui-component-library/docs/elements/autocomplete"}},E={},Z=[{value:"Usage",id:"usage",level:3},{value:"Variants",id:"variants",level:3},{value:"Props",id:"props",level:3}],M={toc:Z},j="wrapper";function z(e){let{components:n,...t}=e;return(0,s.kt)(j,(0,a.Z)({},M,t,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("h1",{id:"alert"},"Alert"),(0,s.kt)("p",null,"Alerts provide immediate feedback to users about their actions or system status."),(0,s.kt)(i.Z,{mdxType:"NewfoldRoot"},(0,s.kt)(w,{mdxType:"Alert"},"This is an information alert. \ud83d\ude80")),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"usage"},"Usage"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Alert } from "@newfold/ui-component-library";\n\nThis is an information alert. \ud83d\ude80\n')),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"variants"},"Variants"),(0,s.kt)("p",null,"The Alert provides four different levels, each with a unique icon and color."),(0,s.kt)(T,{mdxType:"AlertVariants"}),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"props"},"Props"),(0,s.kt)(l.Z.Table,{docs:N}))}z.isMDXComponent=!0},5426:(e,n,t)=>{t.d(n,{Z:()=>r});var a=t(7294);const r=a.forwardRef((function(e,n){return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:n},e),a.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"}))}))}}]); \ No newline at end of file diff --git a/assets/js/015e23ec.95e6fd9b.js b/assets/js/015e23ec.95e6fd9b.js new file mode 100644 index 0000000..172a38f --- /dev/null +++ b/assets/js/015e23ec.95e6fd9b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[4554],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=r.createContext({}),c=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||l;return n?r.createElement(f,o(o({ref:t},p),{},{components:n})):r.createElement(f,o({ref:t},p))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[u]="string"==typeof e?e:a,o[1]=s;for(var c=2;c{n.d(t,{Z:()=>g});var r=n(7294),a=n(5697),l=n.n(a),o=n(6486),s=n(4184),i=n.n(s),c=n(7201),p=n(5426);const u=r.forwardRef((function(e,t){return r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:t},e),r.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))}));const d=r.forwardRef((function(e,t){return r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:t},e),r.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",clipRule:"evenodd"}))}));const m=r.forwardRef((function(e,t){return r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:t},e),r.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))})),f={success:p.Z,warning:u,info:d,error:m},v={variant:{success:"nfd-validation-icon--success",warning:"nfd-validation-icon--warning",info:"nfd-validation-icon--info",error:"nfd-validation-icon--error"}},h=({variant:e="info",className:t="",...n})=>{const a=(0,r.useMemo)((()=>f[e]),[e]),l=(0,c.Z)();return a?(0,r.createElement)(a,{...l,...n,className:i()("nfd-validation-icon",v.variant[e],t)}):null};h.propTypes={variant:l().oneOf((0,o.values)({success:"success",warning:"warning",info:"info",error:"error"})),className:l().string};const g=h},1523:(e,t,n)=>{n.d(t,{Z:()=>u});var r=n(7294),a=n(5697),l=n.n(a),o=n(6486),s=n(4184),i=n.n(s);const c={variant:{success:"nfd-validation-message--success",warning:"nfd-validation-message--warning",info:"nfd-validation-message--info",error:"nfd-validation-message--error"}},p=({as:e="p",variant:t="info",children:n,className:a="",...l})=>(0,r.createElement)(e,{...l,className:i()("nfd-validation-message",c.variant[t],a)},n);p.propTypes={as:l().elementType,variant:l().oneOf((0,o.keys)(c.variant)),message:l().node,className:l().string,children:l().node.isRequired};const u=p},7201:(e,t,n)=>{n.d(t,{Z:()=>a});var r=n(7294);const a=(e=null)=>(0,r.useMemo)((()=>{const t={role:"img","aria-hidden":"true"};return null!==e&&(t.focusable=e?"true":"false"),t}),[e])},2504:(e,t,n)=>{n.d(t,{Z:()=>l});var r=n(7294);const a={Table:e=>{let{children:t,docs:n}=e;const l=[],o=()=>!!(n&&"object"==typeof n&&Object.keys(n).length>0);return r.createElement("div",{className:"props-table"},r.createElement("table",null,r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",null,"Attribute"),r.createElement("th",null,"Type"),r.createElement("th",null,"Description"),r.createElement("th",null,"Default"))),r.createElement("tbody",null,!t&&!o()&&r.createElement("div",{className:"empty-props"},"This component has no props."),(()=>{if(o())for(const e in n)if(n.hasOwnProperty(e)){const t=n[e];t.name=e,void 0===t.type&&(t.type=[]),void 0===t.description&&(t.description=""),void 0===t.defaultValue&&(t.defaultValue=""),void 0===t.isRequired&&(t.isRequired=!1),l.push(r.createElement(a.Row,{key:t.name,name:t.name,type:t.type,description:t.description,defaultValue:t.defaultValue,isRequired:t.isRequired}))}return l})(),t)))}};a.Row=e=>{let{name:t,type:n=[],description:a="-",defaultValue:l="-",isRequired:o=!1}=e;return t&&"string"==typeof t?r.createElement("tr",null,r.createElement("td",{className:"props-table-name-col"},"boolean"==typeof o&&o?r.createElement("span",{className:"required-prop"},t,r.createElement("sup",null,"*")):r.createElement("span",null,t)),r.createElement("td",{className:"props-table-types-col"},(()=>{let e=n;return"string"==typeof e&&(e=[e]),e.length>0?r.createElement(r.Fragment,null,e.map(((e,t)=>r.createElement(r.Fragment,{key:t},r.createElement("code",null,e),r.createElement("span",null," | "))))):r.createElement("span",null,"-")})()),r.createElement("td",{className:"props-table-description-col"},a&&"string"==typeof a&&""!==a?r.createElement("span",null,a):r.createElement("span",null,"-")),r.createElement("td",{className:"props-table-default-col"},l&&"string"==typeof l&&""!==l&&"-"!==l?r.createElement("code",null,l):r.createElement("span",null,"-"))):(console.warn("From: PropsTable.Row. Invalid prop name or missing required props: name."),null)};const l=a},956:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>R,contentTitle:()=>O,default:()=>Z,frontMatter:()=>N,metadata:()=>x,toc:()=>j});var r=n(7462),a=n(7294),l=n(3905),o=n(2504),s=n(1629),i=n(4184),c=n.n(i),p=n(5697),u=n.n(p),d=n(3624),m=n(1523);const f={variant:{info:"nfd-alert--info",warning:"nfd-alert--warning",success:"nfd-alert--success",error:"nfd-alert--error"}},v={alert:"alert",status:"status"},h=(0,a.forwardRef)((({children:e,role:t="status",as:n="span",variant:r="info",className:l="",...o},s)=>(0,a.createElement)(n,{ref:s,className:c()("nfd-alert",f.variant[r],l),role:v[t],...o},(0,a.createElement)(d.Z,{variant:r,className:"nfd-alert__icon"}),(0,a.createElement)(m.Z,{as:"div",variant:r,className:"nfd-alert__message"},e)))),g={children:u().node.isRequired,as:u().elementType,variant:u().oneOf(Object.keys(f.variant)),className:u().string,role:u().oneOf(Object.keys(v))};h.propTypes=g,h.defaultProps={as:"span",variant:"info",className:"",role:"status"};const y=h,w=e=>(0,a.createElement)(h,{...e});w.propTypes=h.propTypes,w.DefaultProps=h.defaultProps,w.displayName="Alert";const b={toc:[{value:"Info",id:"info",level:4},{value:"Warning",id:"warning",level:4},{value:"Success",id:"success",level:4},{value:"Error",id:"error",level:4}]},k="wrapper";function E(e){let{components:t,...n}=e;return(0,l.kt)(k,(0,r.Z)({},b,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h4",{id:"info"},"Info"),(0,l.kt)(s.Z,{mdxType:"NewfoldRoot"},(0,l.kt)(y,{variant:"info",mdxType:"Alert"},"This is an information alert"," ",(0,l.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is an information alert{\' \'}\n \n with a link\n \n . (default)\n\n')),(0,l.kt)("h4",{id:"warning"},"Warning"),(0,l.kt)(s.Z,{mdxType:"NewfoldRoot"},(0,l.kt)(y,{variant:"warning",mdxType:"Alert"},"This is a warning alert"," ",(0,l.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is a warning alert{\' \'}\n \n with a link\n \n .\n\n')),(0,l.kt)("h4",{id:"success"},"Success"),(0,l.kt)(s.Z,{mdxType:"NewfoldRoot"},(0,l.kt)(y,{role:"alert",variant:"success",mdxType:"Alert"},"This is a success alert"," ",(0,l.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is a success alert{\' \'}\n \n with a link\n \n .\n\n')),(0,l.kt)("h4",{id:"error"},"Error"),(0,l.kt)(s.Z,{mdxType:"NewfoldRoot"},(0,l.kt)(y,{role:"alert",variant:"error",mdxType:"Alert"},"This is an error alert"," ",(0,l.kt)("a",{href:"https://github.com/newfold-labs/npm-ui-component-library"},"with a link"),".")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'\n This is an error alert{\' \'}\n \n with a link\n \n .\n\n')))}E.isMDXComponent=!0;const T={children:{type:"node",description:"The content of the alert.",isRequired:!0},as:{type:["span","div"],description:"The HTML element to render.",defaultValue:"span"},variant:{type:["info","warning","success","error"],description:"The variant of the alert.",defaultValue:"info"},role:{type:["alert","status"],defaultValue:"alert"},className:{type:"string"}},N={},O="Alert",x={unversionedId:"elements/alert",id:"elements/alert",title:"Alert",description:"Alerts provide immediate feedback to users about their actions or system status.",source:"@site/docs/elements/alert.mdx",sourceDirName:"elements",slug:"/elements/alert",permalink:"/npm-ui-component-library/docs/elements/alert",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/elements/alert.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Elements",permalink:"/npm-ui-component-library/docs/category/elements"},next:{title:"Autocomplete",permalink:"/npm-ui-component-library/docs/elements/autocomplete"}},R={},j=[{value:"Usage",id:"usage",level:3},{value:"Variants",id:"variants",level:3},{value:"Props",id:"props",level:3}],A={toc:j},P="wrapper";function Z(e){let{components:t,...n}=e;return(0,l.kt)(P,(0,r.Z)({},A,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"alert"},"Alert"),(0,l.kt)("p",null,"Alerts provide immediate feedback to users about their actions or system status."),(0,l.kt)(s.Z,{mdxType:"NewfoldRoot"},(0,l.kt)(y,{mdxType:"Alert"},"This is an information alert. \ud83d\ude80")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"usage"},"Usage"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Alert } from "@newfold/ui-component-library";\n\nThis is an information alert. \ud83d\ude80\n')),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"variants"},"Variants"),(0,l.kt)("p",null,"The Alert provides four different levels, each with a unique icon and color."),(0,l.kt)(E,{mdxType:"AlertVariants"}),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"props"},"Props"),(0,l.kt)(o.Z.Table,{docs:T}))}Z.isMDXComponent=!0},5426:(e,t,n)=>{n.d(t,{Z:()=>a});var r=n(7294);const a=r.forwardRef((function(e,t){return r.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:t},e),r.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"}))}))}}]); \ No newline at end of file diff --git a/assets/js/029f740b.37ae67e5.js b/assets/js/029f740b.37ae67e5.js new file mode 100644 index 0000000..accfca2 --- /dev/null +++ b/assets/js/029f740b.37ae67e5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[9480],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>f});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=o.createContext({}),i=function(e){var t=o.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},s=function(e){var t=i(e.components);return o.createElement(c.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=i(n),d=r,f=u["".concat(c,".").concat(d)]||u[d]||m[d]||l;return n?o.createElement(f,a(a({ref:t},s),{},{components:n})):o.createElement(f,a({ref:t},s))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,a=new Array(l);a[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p[u]="string"==typeof e?e:r,a[1]=p;for(var i=2;i{n.d(t,{Z:()=>l});var o=n(7294);const r={Table:e=>{let{children:t,docs:n}=e;const l=[],a=()=>!!(n&&"object"==typeof n&&Object.keys(n).length>0);return o.createElement("div",{className:"props-table"},o.createElement("table",null,o.createElement("thead",null,o.createElement("tr",null,o.createElement("th",null,"Attribute"),o.createElement("th",null,"Type"),o.createElement("th",null,"Description"),o.createElement("th",null,"Default"))),o.createElement("tbody",null,!t&&!a()&&o.createElement("div",{className:"empty-props"},"This component has no props."),(()=>{if(a())for(const e in n)if(n.hasOwnProperty(e)){const t=n[e];t.name=e,void 0===t.type&&(t.type=[]),void 0===t.description&&(t.description=""),void 0===t.defaultValue&&(t.defaultValue=""),void 0===t.isRequired&&(t.isRequired=!1),l.push(o.createElement(r.Row,{key:t.name,name:t.name,type:t.type,description:t.description,defaultValue:t.defaultValue,isRequired:t.isRequired}))}return l})(),t)))}};r.Row=e=>{let{name:t,type:n=[],description:r="-",defaultValue:l="-",isRequired:a=!1}=e;return t&&"string"==typeof t?o.createElement("tr",null,o.createElement("td",{className:"props-table-name-col"},"boolean"==typeof a&&a?o.createElement("span",{className:"required-prop"},t,o.createElement("sup",null,"*")):o.createElement("span",null,t)),o.createElement("td",{className:"props-table-types-col"},(()=>{let e=n;return"string"==typeof e&&(e=[e]),e.length>0?o.createElement(o.Fragment,null,e.map(((e,t)=>o.createElement(o.Fragment,{key:t},o.createElement("code",null,e),o.createElement("span",null," | "))))):o.createElement("span",null,"-")})()),o.createElement("td",{className:"props-table-description-col"},r&&"string"==typeof r&&""!==r?o.createElement("span",null,r):o.createElement("span",null,"-")),o.createElement("td",{className:"props-table-default-col"},l&&"string"==typeof l&&""!==l&&"-"!==l?o.createElement("code",null,l):o.createElement("span",null,"-"))):(console.warn("From: PropsTable.Row. Invalid prop name or missing required props: name."),null)};const l=r},4163:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>y,frontMatter:()=>c,metadata:()=>s,toc:()=>m});var o=n(7462),r=(n(7294),n(3905)),l=n(2504),a=n(1629);const p={children:{type:"node",description:"The content of your application."},context:{type:"{ isRtl: bool }",defaultValue:"{ isRtl: false }"}},c={},i="Root",s={unversionedId:"components/root",id:"components/root",title:"Root",description:"The Root component provides your React tree with a RootContext which contains general",source:"@site/docs/components/root.mdx",sourceDirName:"components",slug:"/components/root",permalink:"/npm-ui-component-library/docs/components/root",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/components/root.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Radio Group",permalink:"/npm-ui-component-library/docs/components/radio-group"},next:{title:"Select Field",permalink:"/npm-ui-component-library/docs/components/select-field"}},u={},m=[{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}],d={toc:m},f="wrapper";function y(e){let{components:t,...n}=e;return(0,r.kt)(f,(0,o.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"root"},"Root"),(0,r.kt)("p",null,"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Root")," component provides your React tree with a ",(0,r.kt)("inlineCode",{parentName:"p"},"RootContext")," which contains general\noptions such as ",(0,r.kt)("inlineCode",{parentName:"p"},"isRtl")," to indicate right to left language direction. It also provides a\n",(0,r.kt)("inlineCode",{parentName:"p"},".nfd-root")," CSS class for scoping our CSS in opinionated environments."),(0,r.kt)("p",null,"You can use the ",(0,r.kt)("inlineCode",{parentName:"p"},"RootContext")," by using the ",(0,r.kt)("a",{parentName:"p",href:"../hooks/useRootContext"},(0,r.kt)("inlineCode",{parentName:"a"},"useRootContext"))," hook."),(0,r.kt)(a.Z,{mdxType:"NewfoldRoot"},(0,r.kt)("p",null,"Root Contents")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"usage"},"Usage"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="/src/App.js"',title:'"/src/App.js"'},'import { Root } from "@newfold/ui-component-library";\n\nexport const App = () => {\n return (\n \n // Your app contents\n

Root Contents

\n \n );\n};\n')),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)(l.Z.Table,{docs:p}))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/029f740b.d9b483bf.js b/assets/js/029f740b.d9b483bf.js deleted file mode 100644 index f28e8d8..0000000 --- a/assets/js/029f740b.d9b483bf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[9480],{4163:(o,t,e)=>{e.r(t),e.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var n=e(7462),r=(e(7294),e(3905)),i=e(2504),p=e(1629);const s={children:{type:"node",description:"The content of your application."},context:{type:"{ isRtl: bool }",defaultValue:"{ isRtl: false }"}},a={},l="Root",c={unversionedId:"components/root",id:"components/root",title:"Root",description:"The Root component provides your React tree with a RootContext which contains general",source:"@site/docs/components/root.mdx",sourceDirName:"components",slug:"/components/root",permalink:"/npm-ui-component-library/docs/components/root",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/components/root.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Radio Group",permalink:"/npm-ui-component-library/docs/components/radio-group"},next:{title:"Select Field",permalink:"/npm-ui-component-library/docs/components/select-field"}},d={},u=[{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}],m={toc:u},k="wrapper";function h(o){let{components:t,...e}=o;return(0,r.kt)(k,(0,n.Z)({},m,e,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"root"},"Root"),(0,r.kt)("p",null,"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Root")," component provides your React tree with a ",(0,r.kt)("inlineCode",{parentName:"p"},"RootContext")," which contains general\noptions such as ",(0,r.kt)("inlineCode",{parentName:"p"},"isRtl")," to indicate right to left language direction. It also provides a\n",(0,r.kt)("inlineCode",{parentName:"p"},".nfd-root")," CSS class for scoping our CSS in opinionated environments. You can use the\n",(0,r.kt)("inlineCode",{parentName:"p"},"RootContext")," by using the ",(0,r.kt)("inlineCode",{parentName:"p"},"useRootContext")," hook exported from ",(0,r.kt)("inlineCode",{parentName:"p"},"@newfold/ui-component-library/hooks"),"."),(0,r.kt)(p.Z,{mdxType:"NewfoldRoot"},(0,r.kt)("p",null,"Root Contents")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"usage"},"Usage"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="/src/App.js"',title:'"/src/App.js"'},'import { Root } from "@newfold/ui-component-library";\n\nexport const App = () => {\n return (\n \n // Your app contents\n

Root Contents

\n \n );\n};\n')),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)(i.Z.Table,{docs:s}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/084f0435.8581d596.js b/assets/js/084f0435.8581d596.js deleted file mode 100644 index fcb59b1..0000000 --- a/assets/js/084f0435.8581d596.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[7179],{1547:(e,a,n)=>{n.d(a,{Z:()=>u});var t=n(7294),s=n(4184),i=n.n(s),l=n(5697),r=n.n(l);const d={variant:{info:"nfd-badge--info",upsell:"nfd-badge--upsell",plain:"nfd-badge--plain"},size:{default:"",small:"nfd-badge--small",large:"nfd-badge--large"}},o=(0,t.forwardRef)((({children:e,as:a,variant:n,size:s,className:l,...r},o)=>(0,t.createElement)(a,{ref:o,className:i()("nfd-badge",d.variant[n],d.size[s],l),...r},e))),c={children:r().node.isRequired,as:r().elementType,variant:r().oneOf(Object.keys(d.variant)),size:r().oneOf(Object.keys(d.size)),className:r().string};o.propTypes=c,o.defaultProps={as:"span",variant:"info",size:"default",className:""};const u=o,p=e=>(0,t.createElement)(o,{...e});p.propTypes=c,p.defaultProps=o.defaultProps,p.displayName="Badge"},5667:(e,a,n)=>{n.d(a,{Z:()=>u});var t=n(7294),s=n(4184),i=n.n(s),l=n(5697),r=n.n(l);const d=(0,t.forwardRef)((({as:e,className:a,label:n,children:s,...l},r)=>(0,t.createElement)(e,{ref:r,className:i()("nfd-label",a),...l},n||s||null))),o={label:r().string,children:r().string,as:r().elementType,className:r().string};d.propTypes=o,d.defaultProps={label:"",children:"",as:"label",className:""};const c=e=>(0,t.createElement)(d,{...e});c.propTypes=o,c.defaultProps=d.defaultProps,c.displayName="Label";const u=d},557:(e,a,n)=>{n.d(a,{ZP:()=>m});var t=n(7294),s=n(8163),i=n(4184),l=n.n(i),r=n(6486),d=n(5697),o=n.n(d),c=n(1547);const u=({tag:e,index:a,disabled:n=!1,onRemoveTag:i,screenReaderRemoveTag:l,...r})=>{const d=(0,t.useCallback)((e=>{if(!n)switch(null==e?void 0:e.key){case"Delete":case"Backspace":return i(a),e.preventDefault(),!0}}),[a,n,i]),o=(0,t.useCallback)((e=>{if(!n)return i(a),e.preventDefault(),!0}),[a,n,i]);return(0,t.createElement)(c.Z,{onKeyDown:d,...r,variant:"plain",className:"nfd-tag-input__tag"},(0,t.createElement)("span",{className:"nfd-mb-px"},e),(0,t.createElement)("button",{onClick:o,className:"nfd-tag-input__remove-tag"},(0,t.createElement)("span",{className:"nfd-sr-only"},l),(0,t.createElement)(s.Z,{className:"nfd-h-3 nfd-w-3"})))};u.propTypes={tag:o().string.isRequired,index:o().number.isRequired,disabled:o().bool,onRemoveTag:o().func.isRequired,screenReaderRemoveTag:o().string.isRequired};const p=(0,t.forwardRef)((({tags:e=[],children:a,className:n,disabled:s,onAddTag:i,onRemoveTag:d,onSetTags:o,onBlur:c,screenReaderRemoveTag:p,...f},m)=>{const[g,v]=(0,t.useState)(""),b=(0,t.useCallback)((e=>{var a;(0,r.isString)(null==e||null===(a=e.target)||void 0===a?void 0:a.value)&&v(e.target.value)}),[v]),w=(0,t.useCallback)((a=>{switch(a.key){case",":case"Enter":return g.length>0&&(i(g),v("")),a.preventDefault(),!0;case"Backspace":if(0!==g.length||0===e.length)break;return d(e.length-1),a.ctrlKey&&o([]),a.preventDefault(),!0}}),[g,e,v,i]),T=(0,t.useCallback)((e=>{g.length>0&&(i(g),v("")),c(e)}),[g,i,v,c]);return(0,t.createElement)("div",{className:l()("nfd-tag-input",s&&"nfd-tag-input--disabled",n)},a||(0,r.map)(e,((e,a)=>(0,t.createElement)(u,{key:`tag-${a}`,tag:e,index:a,disabled:s,onRemoveTag:d,screenReaderRemoveTag:p}))),(0,t.createElement)("input",{ref:m,type:"text",disabled:s,className:"nfd-tag-input__input",onKeyDown:w,...f,onChange:b,onBlur:T,value:g}))})),f={tags:o().arrayOf(o().string),children:o().node,className:o().string,disabled:o().bool,onAddTag:o().func,onRemoveTag:o().func,onSetTags:o().func,onBlur:o().func,screenReaderRemoveTag:o().string};p.propTypes=f,p.Tag=u,p.Tag.displayName="TagInput.Tag",p.defaultProps={tags:[],children:null,className:"",disabled:!1,onAddTag:r.noop,onRemoveTag:r.noop,onSetTags:r.noop,onBlur:r.noop,screenReaderRemoveTag:"Remove tag"};const m=p,g=e=>(0,t.createElement)(p,{...e});g.propTypes=f,g.defaultProps=p.defaultProps,g.displayName="TagInput"},3624:(e,a,n)=>{n.d(a,{Z:()=>b});var t=n(7294),s=n(5697),i=n.n(s),l=n(6486),r=n(4184),d=n.n(r),o=n(7201),c=n(5426);const u=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))}));const p=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",clipRule:"evenodd"}))}));const f=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))})),m={success:c.Z,warning:u,info:p,error:f},g={variant:{success:"nfd-validation-icon--success",warning:"nfd-validation-icon--warning",info:"nfd-validation-icon--info",error:"nfd-validation-icon--error"}},v=({variant:e="info",className:a="",...n})=>{const s=(0,t.useMemo)((()=>m[e]),[e]),i=(0,o.Z)();return s?(0,t.createElement)(s,{...i,...n,className:d()("nfd-validation-icon",g.variant[e],a)}):null};v.propTypes={variant:i().oneOf((0,l.values)({success:"success",warning:"warning",info:"info",error:"error"})),className:i().string};const b=v},7381:(e,a,n)=>{n.d(a,{Z:()=>u});var t=n(7294),s=n(5697),i=n.n(s),l=n(4184),r=n.n(l),d=n(3624);const o={variant:{success:"nfd-validation-input--success",warning:"nfd-validation-input--warning",info:"nfd-validation-input--info",error:"nfd-validation-input--error"}},c=(0,t.forwardRef)((({as:e,validation:a={},className:n="",...s},i)=>(0,t.createElement)("div",{className:r()("nfd-validation-input",(null==a?void 0:a.message)&&o.variant[null==a?void 0:a.variant])},(0,t.createElement)(e,{ref:i,...s,className:r()("nfd-validation-input__input",n)}),(null==a?void 0:a.message)&&(0,t.createElement)(d.Z,{variant:null==a?void 0:a.variant,className:"nfd-validation-input__icon"}))));c.propTypes={as:i().elementType.isRequired,validation:i().shape({variant:i().string,message:i().node}),className:i().string};const u=c},1523:(e,a,n)=>{n.d(a,{Z:()=>u});var t=n(7294),s=n(5697),i=n.n(s),l=n(6486),r=n(4184),d=n.n(r);const o={variant:{success:"nfd-validation-message--success",warning:"nfd-validation-message--warning",info:"nfd-validation-message--info",error:"nfd-validation-message--error"}},c=({as:e="p",variant:a="info",children:n,className:s="",...i})=>(0,t.createElement)(e,{...i,className:d()("nfd-validation-message",o.variant[a],s)},n);c.propTypes={as:i().elementType,variant:i().oneOf((0,l.keys)(o.variant)),message:i().node,className:i().string,children:i().node.isRequired};const u=c},6247:(e,a,n)=>{n.d(a,{Z:()=>i});var t=n(7294),s=n(6486);const i=(e,a)=>{const n=(0,t.useMemo)((()=>(0,s.reduce)(a,((a,n,t)=>n?(a[t]=`${e}__${t}`,a):a),{})),[e,a]),i=(0,t.useMemo)((()=>(0,s.values)(n).join(" ")||null),[n]);return{ids:n,describedBy:i}}},7201:(e,a,n)=>{n.d(a,{Z:()=>s});var t=n(7294);const s=(e=null)=>(0,t.useMemo)((()=>{const a={role:"img","aria-hidden":"true"};return null!==e&&(a.focusable=e?"true":"false"),a}),[e])},8930:(e,a,n)=>{n.r(a),n.d(a,{assets:()=>E,contentTitle:()=>R,default:()=>Z,frontMatter:()=>y,metadata:()=>N,toc:()=>k});var t=n(7462),s=n(7294),i=n(3905),l=n(2504),r=n(1629),d=n(4184),o=n.n(d),c=n(5697),u=n.n(c),p=n(5667),f=n(557),m=n(7381),g=n(1523),v=n(6247);const b=(0,s.forwardRef)((({id:e,label:a,labelSuffix:n,disabled:t,className:i,description:l,validation:r,...d},c)=>{const{ids:u,describedBy:b}=(0,v.Z)(e,{validation:null==r?void 0:r.message,description:l});return(0,s.createElement)("div",{className:o()("nfd-tag-field",t&&"nfd-tag-field--disabled",i)},(0,s.createElement)("div",{className:"nfd-flex nfd-items-center nfd-mb-2"},(0,s.createElement)(p.Z,{className:"nfd-tag-field__label",htmlFor:e,label:a}),n),(0,s.createElement)(m.Z,{as:f.ZP,ref:c,id:e,disabled:t,className:"nfd-tag-field__input","aria-describedby":b,validation:r,...d}),(null==r?void 0:r.message)&&(0,s.createElement)(g.Z,{variant:null==r?void 0:r.variant,id:u.validation,className:"nfd-tag-field__validation"},r.message),l&&(0,s.createElement)("p",{id:u.description,className:"nfd-tag-field__description"},l))})),w={id:u().string.isRequired,label:u().string.isRequired,labelSuffix:u().node,disabled:u().bool,className:u().string,description:u().node,validation:u().shape({variant:u().string,message:u().node})};b.propTypes=w,b.defaultProps={labelSuffix:null,disabled:!1,className:"",description:null,validation:{}};const T=e=>(0,s.createElement)(b,{...e});T.propTypes=w,T.defaultProps=b.defaultProps,T.displayName="TagField";const h=b,y={},R="Tag Field",N={unversionedId:"components/tag-field",id:"components/tag-field",title:"Tag Field",description:"A simple tag field component.",source:"@site/docs/components/tag-field.mdx",sourceDirName:"components",slug:"/components/tag-field",permalink:"/npm-ui-component-library/docs/components/tag-field",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/components/tag-field.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Sidebar Navigation",permalink:"/npm-ui-component-library/docs/components/sidebar-navigation"},next:{title:"Text Field",permalink:"/npm-ui-component-library/docs/components/text-field"}},E={},k=[{value:"Usage",id:"usage",level:3},{value:"Variants",id:"variants",level:3},{value:"Props",id:"props",level:3}],x={toc:k},_="wrapper";function Z(e){let{components:a,...n}=e;return(0,i.kt)(_,(0,t.Z)({},x,n,{components:a,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"tag-field"},"Tag Field"),(0,i.kt)("p",null,"A simple tag field component."),(0,i.kt)(r.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(h,{description:"Tag field with a description.",id:"tag-field-1",label:"Tag field with a label",onAddTag:()=>{},onRemoveTag:()=>{},tags:["Here","are","some","tags"],mdxType:"TagField"})),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"usage"},"Usage"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"import { TagField } from \"@newfold/ui-component-library\";\n\n {}}\n onRemoveTag={() => {}}\n tags={[\n 'Here',\n 'are',\n 'some',\n 'tags'\n ]}\n/>\n")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"variants"},"Variants"),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"props"},"Props"),(0,i.kt)(l.Z.Table,{docs:{className:{type:"string",description:"Class attribute to add to the element",defaultValue:'""'},description:{type:"string",description:"Form element description",defaultValue:'""'},disabled:{type:"boolean",description:"Disabled flag",defaultValue:"false"},id:{type:"string",description:"Element id attribute",defaultValue:'""',isRequired:!0},label:{type:"string",description:"Form label for field",defaultValue:'""',isRequired:!0},labelSuffix:{type:"string",description:"Label suffix"},tags:{type:"Array of strings",description:'The tags destined for the tagfield. ["Here", "are", "some", "tags"]'},validation:{type:"Object",description:"{ variant: string, message: node }"}}}))}Z.isMDXComponent=!0},5426:(e,a,n)=>{n.d(a,{Z:()=>s});var t=n(7294);const s=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"}))}))},8163:(e,a,n)=>{n.d(a,{Z:()=>s});var t=n(7294);const s=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"}))}))}}]); \ No newline at end of file diff --git a/assets/js/084f0435.d3c9d8c5.js b/assets/js/084f0435.d3c9d8c5.js new file mode 100644 index 0000000..d7fb137 --- /dev/null +++ b/assets/js/084f0435.d3c9d8c5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[7179],{3905:(e,a,n)=>{n.d(a,{Zo:()=>c,kt:()=>g});var t=n(7294);function l(e,a,n){return a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n,e}function i(e,a){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),n.push.apply(n,t)}return n}function r(e){for(var a=1;a=0||(l[n]=e[n]);return l}(e,a);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var s=t.createContext({}),d=function(e){var a=t.useContext(s),n=a;return e&&(n="function"==typeof e?e(a):r(r({},a),e)),n},c=function(e){var a=d(e.components);return t.createElement(s.Provider,{value:a},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var a=e.children;return t.createElement(t.Fragment,{},a)}},u=t.forwardRef((function(e,a){var n=e.components,l=e.mdxType,i=e.originalType,s=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),p=d(n),u=l,g=p["".concat(s,".").concat(u)]||p[u]||m[u]||i;return n?t.createElement(g,r(r({ref:a},c),{},{components:n})):t.createElement(g,r({ref:a},c))}));function g(e,a){var n=arguments,l=a&&a.mdxType;if("string"==typeof e||l){var i=n.length,r=new Array(i);r[0]=u;var o={};for(var s in a)hasOwnProperty.call(a,s)&&(o[s]=a[s]);o.originalType=e,o[p]="string"==typeof e?e:l,r[1]=o;for(var d=2;d{n.d(a,{Z:()=>p});var t=n(7294),l=n(4184),i=n.n(l),r=n(5697),o=n.n(r);const s={variant:{info:"nfd-badge--info",upsell:"nfd-badge--upsell",plain:"nfd-badge--plain"},size:{default:"",small:"nfd-badge--small",large:"nfd-badge--large"}},d=(0,t.forwardRef)((({children:e,as:a,variant:n,size:l,className:r,...o},d)=>(0,t.createElement)(a,{ref:d,className:i()("nfd-badge",s.variant[n],s.size[l],r),...o},e))),c={children:o().node.isRequired,as:o().elementType,variant:o().oneOf(Object.keys(s.variant)),size:o().oneOf(Object.keys(s.size)),className:o().string};d.propTypes=c,d.defaultProps={as:"span",variant:"info",size:"default",className:""};const p=d,m=e=>(0,t.createElement)(d,{...e});m.propTypes=c,m.defaultProps=d.defaultProps,m.displayName="Badge"},5667:(e,a,n)=>{n.d(a,{Z:()=>p});var t=n(7294),l=n(4184),i=n.n(l),r=n(5697),o=n.n(r);const s=(0,t.forwardRef)((({as:e,className:a,label:n,children:l,...r},o)=>(0,t.createElement)(e,{ref:o,className:i()("nfd-label",a),...r},n||l||null))),d={label:o().string,children:o().string,as:o().elementType,className:o().string};s.propTypes=d,s.defaultProps={label:"",children:"",as:"label",className:""};const c=e=>(0,t.createElement)(s,{...e});c.propTypes=d,c.defaultProps=s.defaultProps,c.displayName="Label";const p=s},557:(e,a,n)=>{n.d(a,{ZP:()=>g});var t=n(7294),l=n(8163),i=n(4184),r=n.n(i),o=n(6486),s=n(5697),d=n.n(s),c=n(1547);const p=({tag:e,index:a,disabled:n=!1,onRemoveTag:i,screenReaderRemoveTag:r,...o})=>{const s=(0,t.useCallback)((e=>{if(!n)switch(null==e?void 0:e.key){case"Delete":case"Backspace":return i(a),e.preventDefault(),!0}}),[a,n,i]),d=(0,t.useCallback)((e=>{if(!n)return i(a),e.preventDefault(),!0}),[a,n,i]);return(0,t.createElement)(c.Z,{onKeyDown:s,...o,variant:"plain",className:"nfd-tag-input__tag"},(0,t.createElement)("span",{className:"nfd-mb-px"},e),(0,t.createElement)("button",{onClick:d,className:"nfd-tag-input__remove-tag"},(0,t.createElement)("span",{className:"nfd-sr-only"},r),(0,t.createElement)(l.Z,{className:"nfd-h-3 nfd-w-3"})))};p.propTypes={tag:d().string.isRequired,index:d().number.isRequired,disabled:d().bool,onRemoveTag:d().func.isRequired,screenReaderRemoveTag:d().string.isRequired};const m=(0,t.forwardRef)((({tags:e=[],children:a,className:n,disabled:l,onAddTag:i,onRemoveTag:s,onSetTags:d,onBlur:c,screenReaderRemoveTag:m,...u},g)=>{const[f,v]=(0,t.useState)(""),b=(0,t.useCallback)((e=>{var a;(0,o.isString)(null==e||null===(a=e.target)||void 0===a?void 0:a.value)&&v(e.target.value)}),[v]),T=(0,t.useCallback)((a=>{switch(a.key){case",":case"Enter":return f.length>0&&(i(f),v("")),a.preventDefault(),!0;case"Backspace":if(0!==f.length||0===e.length)break;return s(e.length-1),a.ctrlKey&&d([]),a.preventDefault(),!0}}),[f,e,v,i]),y=(0,t.useCallback)((e=>{f.length>0&&(i(f),v("")),c(e)}),[f,i,v,c]);return(0,t.createElement)("div",{className:r()("nfd-tag-input",l&&"nfd-tag-input--disabled",n)},a||(0,o.map)(e,((e,a)=>(0,t.createElement)(p,{key:`tag-${a}`,tag:e,index:a,disabled:l,onRemoveTag:s,screenReaderRemoveTag:m}))),(0,t.createElement)("input",{ref:g,type:"text",disabled:l,className:"nfd-tag-input__input",onKeyDown:T,...u,onChange:b,onBlur:y,value:f}))})),u={tags:d().arrayOf(d().string),children:d().node,className:d().string,disabled:d().bool,onAddTag:d().func,onRemoveTag:d().func,onSetTags:d().func,onBlur:d().func,screenReaderRemoveTag:d().string};m.propTypes=u,m.Tag=p,m.Tag.displayName="TagInput.Tag",m.defaultProps={tags:[],children:null,className:"",disabled:!1,onAddTag:o.noop,onRemoveTag:o.noop,onSetTags:o.noop,onBlur:o.noop,screenReaderRemoveTag:"Remove tag"};const g=m,f=e=>(0,t.createElement)(m,{...e});f.propTypes=u,f.defaultProps=m.defaultProps,f.displayName="TagInput"},3624:(e,a,n)=>{n.d(a,{Z:()=>b});var t=n(7294),l=n(5697),i=n.n(l),r=n(6486),o=n(4184),s=n.n(o),d=n(7201),c=n(5426);const p=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))}));const m=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",clipRule:"evenodd"}))}));const u=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))})),g={success:c.Z,warning:p,info:m,error:u},f={variant:{success:"nfd-validation-icon--success",warning:"nfd-validation-icon--warning",info:"nfd-validation-icon--info",error:"nfd-validation-icon--error"}},v=({variant:e="info",className:a="",...n})=>{const l=(0,t.useMemo)((()=>g[e]),[e]),i=(0,d.Z)();return l?(0,t.createElement)(l,{...i,...n,className:s()("nfd-validation-icon",f.variant[e],a)}):null};v.propTypes={variant:i().oneOf((0,r.values)({success:"success",warning:"warning",info:"info",error:"error"})),className:i().string};const b=v},7381:(e,a,n)=>{n.d(a,{Z:()=>p});var t=n(7294),l=n(5697),i=n.n(l),r=n(4184),o=n.n(r),s=n(3624);const d={variant:{success:"nfd-validation-input--success",warning:"nfd-validation-input--warning",info:"nfd-validation-input--info",error:"nfd-validation-input--error"}},c=(0,t.forwardRef)((({as:e,validation:a={},className:n="",...l},i)=>(0,t.createElement)("div",{className:o()("nfd-validation-input",(null==a?void 0:a.message)&&d.variant[null==a?void 0:a.variant])},(0,t.createElement)(e,{ref:i,...l,className:o()("nfd-validation-input__input",n)}),(null==a?void 0:a.message)&&(0,t.createElement)(s.Z,{variant:null==a?void 0:a.variant,className:"nfd-validation-input__icon"}))));c.propTypes={as:i().elementType.isRequired,validation:i().shape({variant:i().string,message:i().node}),className:i().string};const p=c},1523:(e,a,n)=>{n.d(a,{Z:()=>p});var t=n(7294),l=n(5697),i=n.n(l),r=n(6486),o=n(4184),s=n.n(o);const d={variant:{success:"nfd-validation-message--success",warning:"nfd-validation-message--warning",info:"nfd-validation-message--info",error:"nfd-validation-message--error"}},c=({as:e="p",variant:a="info",children:n,className:l="",...i})=>(0,t.createElement)(e,{...i,className:s()("nfd-validation-message",d.variant[a],l)},n);c.propTypes={as:i().elementType,variant:i().oneOf((0,r.keys)(d.variant)),message:i().node,className:i().string,children:i().node.isRequired};const p=c},6247:(e,a,n)=>{n.d(a,{Z:()=>i});var t=n(7294),l=n(6486);const i=(e,a)=>{const n=(0,t.useMemo)((()=>(0,l.reduce)(a,((a,n,t)=>n?(a[t]=`${e}__${t}`,a):a),{})),[e,a]),i=(0,t.useMemo)((()=>(0,l.values)(n).join(" ")||null),[n]);return{ids:n,describedBy:i}}},7201:(e,a,n)=>{n.d(a,{Z:()=>l});var t=n(7294);const l=(e=null)=>(0,t.useMemo)((()=>{const a={role:"img","aria-hidden":"true"};return null!==e&&(a.focusable=e?"true":"false"),a}),[e])},2504:(e,a,n)=>{n.d(a,{Z:()=>i});var t=n(7294);const l={Table:e=>{let{children:a,docs:n}=e;const i=[],r=()=>!!(n&&"object"==typeof n&&Object.keys(n).length>0);return t.createElement("div",{className:"props-table"},t.createElement("table",null,t.createElement("thead",null,t.createElement("tr",null,t.createElement("th",null,"Attribute"),t.createElement("th",null,"Type"),t.createElement("th",null,"Description"),t.createElement("th",null,"Default"))),t.createElement("tbody",null,!a&&!r()&&t.createElement("div",{className:"empty-props"},"This component has no props."),(()=>{if(r())for(const e in n)if(n.hasOwnProperty(e)){const a=n[e];a.name=e,void 0===a.type&&(a.type=[]),void 0===a.description&&(a.description=""),void 0===a.defaultValue&&(a.defaultValue=""),void 0===a.isRequired&&(a.isRequired=!1),i.push(t.createElement(l.Row,{key:a.name,name:a.name,type:a.type,description:a.description,defaultValue:a.defaultValue,isRequired:a.isRequired}))}return i})(),a)))}};l.Row=e=>{let{name:a,type:n=[],description:l="-",defaultValue:i="-",isRequired:r=!1}=e;return a&&"string"==typeof a?t.createElement("tr",null,t.createElement("td",{className:"props-table-name-col"},"boolean"==typeof r&&r?t.createElement("span",{className:"required-prop"},a,t.createElement("sup",null,"*")):t.createElement("span",null,a)),t.createElement("td",{className:"props-table-types-col"},(()=>{let e=n;return"string"==typeof e&&(e=[e]),e.length>0?t.createElement(t.Fragment,null,e.map(((e,a)=>t.createElement(t.Fragment,{key:a},t.createElement("code",null,e),t.createElement("span",null," | "))))):t.createElement("span",null,"-")})()),t.createElement("td",{className:"props-table-description-col"},l&&"string"==typeof l&&""!==l?t.createElement("span",null,l):t.createElement("span",null,"-")),t.createElement("td",{className:"props-table-default-col"},i&&"string"==typeof i&&""!==i&&"-"!==i?t.createElement("code",null,i):t.createElement("span",null,"-"))):(console.warn("From: PropsTable.Row. Invalid prop name or missing required props: name."),null)};const i=l},1864:(e,a,n)=>{n.r(a),n.d(a,{assets:()=>D,contentTitle:()=>O,default:()=>Z,frontMatter:()=>C,metadata:()=>F,toc:()=>A});var t=n(7462),l=n(7294),i=n(3905),r=n(2504),o=n(1629),s=n(4184),d=n.n(s),c=n(5697),p=n.n(c),m=n(5667),u=n(557),g=n(7381),f=n(1523),v=n(6247);const b=(0,l.forwardRef)((({id:e,label:a,labelSuffix:n,disabled:t,className:i,description:r,validation:o,...s},c)=>{const{ids:p,describedBy:b}=(0,v.Z)(e,{validation:null==o?void 0:o.message,description:r});return(0,l.createElement)("div",{className:d()("nfd-tag-field",t&&"nfd-tag-field--disabled",i)},(0,l.createElement)("div",{className:"nfd-flex nfd-items-center nfd-mb-2"},(0,l.createElement)(m.Z,{className:"nfd-tag-field__label",htmlFor:e,label:a}),n),(0,l.createElement)(g.Z,{as:u.ZP,ref:c,id:e,disabled:t,className:"nfd-tag-field__input","aria-describedby":b,validation:o,...s}),(null==o?void 0:o.message)&&(0,l.createElement)(f.Z,{variant:null==o?void 0:o.variant,id:p.validation,className:"nfd-tag-field__validation"},o.message),r&&(0,l.createElement)("p",{id:p.description,className:"nfd-tag-field__description"},r))})),T={id:p().string.isRequired,label:p().string.isRequired,labelSuffix:p().node,disabled:p().bool,className:p().string,description:p().node,validation:p().shape({variant:p().string,message:p().node})};b.propTypes=T,b.defaultProps={labelSuffix:null,disabled:!1,className:"",description:null,validation:{}};const y=e=>(0,l.createElement)(b,{...e});y.propTypes=T,y.defaultProps=b.defaultProps,y.displayName="TagField";const h=b,k=["Adventure","Action","Comedy","Drama","Fantasy","Horror","Mystery","Romance","Thriller","Western","Sci-Fi","Crime","Animation","Documentary","Musical","War","With Space"],w=e=>{let{id:a="tag-field-demo",label:n="A tag field",description:t="",disabled:i=!1,validation:r}=e;const[o,s]=(0,l.useState)(k||[]);return l.createElement(h,{id:a,label:n,description:t,onAddTag:e=>{s([...o,e])},onRemoveTag:e=>{s(o.filter(((a,n)=>n!==e)))},tags:o,disabled:i,validation:r})},N={toc:[{value:"Success",id:"success",level:4},{value:"Warning",id:"warning",level:4},{value:"Info",id:"info",level:4},{value:"Error",id:"error",level:4}]},R="wrapper";function E(e){let{components:a,...n}=e;return(0,i.kt)(R,(0,t.Z)({},N,n,{components:a,mdxType:"MDXLayout"}),(0,i.kt)("h4",{id:"success"},"Success"),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-success",label:"Success variant",validation:{variant:"success",message:"Success unlocked. Keep soaring!"},mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')),(0,i.kt)("h4",{id:"warning"},"Warning"),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-warning",label:"Warning variant",validation:{variant:"warning",message:"Caution: Proceed with care to avoid potential pitfalls."},mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')),(0,i.kt)("h4",{id:"info"},"Info"),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-info",label:"Info variant",validation:{variant:"info",message:"Information: Knowledge is the key to empowerment."},mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')),(0,i.kt)("h4",{id:"error"},"Error"),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-error",label:"Error variant",validation:{variant:"error",message:"Error: Unable to proceed without required input."},mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')))}E.isMDXComponent=!0;const x={id:{type:"string",description:"ID for the tag field.",isRequired:!0},label:{type:"string",description:"Label for the tag field.",isRequired:!0},tags:{type:"array",description:"Array of `string` tags to display"},labelSuffix:{type:"node",description:"Content to display after the label."},description:{type:"string",description:"Description for the tag field."},onAddTag:{type:"function",description:"Callback function when a tag is added. The function will receive the new tag as a parameter."},onRemoveTag:{type:"function",description:"Callback function when a tag is removed. The function will receive the removed tag as a parameter."},onSetTags:{type:"function",description:"Sets the tags to the given array."},onBlur:{type:"function"},validation:{type:"{ variant: string, message: node }",description:"Validation state and message"},screenReaderRemoveTag:{type:"string",description:"Screen reader text for the remove tag button.",defaultValue:"Remove tag"},disabled:{type:"bool",description:"If true, the tag input will be disabled.",defaultValue:"false"},className:{type:"string"}},C={},O="Tag Field",F={unversionedId:"components/tag-field",id:"components/tag-field",title:"Tag Field",description:"A tags input is a user interface element that enables users to input",source:"@site/docs/components/tag-field.mdx",sourceDirName:"components",slug:"/components/tag-field",permalink:"/npm-ui-component-library/docs/components/tag-field",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/components/tag-field.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Sidebar Navigation",permalink:"/npm-ui-component-library/docs/components/sidebar-navigation"},next:{title:"Text Field",permalink:"/npm-ui-component-library/docs/components/text-field"}},D={},A=[{value:"Usage",id:"usage",level:3},{value:"Label",id:"label",level:3},{value:"Description",id:"description",level:3},{value:"Disabled",id:"disabled",level:3},{value:"validation",id:"validation",level:3},{value:"Props",id:"props",level:3}],P={toc:A},j="wrapper";function Z(e){let{components:a,...n}=e;return(0,i.kt)(j,(0,t.Z)({},P,n,{components:a,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"tag-field"},"Tag Field"),(0,i.kt)("p",null,"A tags input is a user interface element that enables users to input\nmultiple entries, formatting them as tags within a text field. This\nfunctionality is also referred to as a Tagging/Tokenizing system.\nThe ",(0,i.kt)("inlineCode",{parentName:"p"},"TagField")," component extends the ",(0,i.kt)("a",{parentName:"p",href:"/npm-ui-component-library/docs/elements/tag-input"},(0,i.kt)("inlineCode",{parentName:"a"},"TagInput")),"\nelement by adding a ",(0,i.kt)("a",{parentName:"p",href:"#label"},"label"),", ",(0,i.kt)("a",{parentName:"p",href:"#description"},"description")," and ",(0,i.kt)("a",{parentName:"p",href:"#validation"},"validation variants"),"."),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{mdxType:"TagFieldDemo"})),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"usage"},"Usage"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"import { TagField } from \"@newfold/ui-component-library\";\n\nconst tagsPool = [\n 'Adventure', 'Action', 'Comedy', 'Drama', 'Fantasy', 'Horror', 'Mystery',\n 'Romance', 'Thriller', 'Western', 'Sci-Fi', 'Crime', 'Animation',\n 'Documentary', 'Musical', 'War', 'With Space'\n];\n\nconst [tags, setTags] = useState(tagsPool || []);\n\nconst handleAddTag = (tag) => {\n setTags([...tags, tag]);\n};\n\nconst handleRemoveTag = (index) => {\n setTags(tags.filter((tag, i) => i !== index));\n}\n\n\n")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"label"},"Label"),(0,i.kt)("p",null,"Use the ",(0,i.kt)("inlineCode",{parentName:"p"},"label")," prop to add a label to the ",(0,i.kt)("inlineCode",{parentName:"p"},"TagField")," component."),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-label",label:"Tag field label \ud83d\udc4b",mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"description"},"Description"),(0,i.kt)("p",null,"Use the ",(0,i.kt)("inlineCode",{parentName:"p"},"description")," prop to add a description to the ",(0,i.kt)("inlineCode",{parentName:"p"},"TagField")," component."),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-description",label:"Tag field label \ud83d\udc4b",description:"Tag field description \ud83d\ude4c",mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"disabled"},"Disabled"),(0,i.kt)("p",null,"Use the ",(0,i.kt)("inlineCode",{parentName:"p"},"disabled")," prop to disable the ",(0,i.kt)("inlineCode",{parentName:"p"},"TagField")," component."),(0,i.kt)(o.Z,{mdxType:"NewfoldRoot"},(0,i.kt)(w,{id:"tag-field-disabled",disabled:!0,mdxType:"TagFieldDemo"})),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},'\n')),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"validation"},"validation"),(0,i.kt)("p",null,"Use the ",(0,i.kt)("inlineCode",{parentName:"p"},"validation")," prop to add validation to the ",(0,i.kt)("inlineCode",{parentName:"p"},"TagField")," component.\nThe ",(0,i.kt)("inlineCode",{parentName:"p"},"TagField")," provides four validation variants: ",(0,i.kt)("inlineCode",{parentName:"p"},"success"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"warning"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"info"),", and ",(0,i.kt)("inlineCode",{parentName:"p"},"error"),"."),(0,i.kt)(E,{mdxType:"TagFieldValidationVariants"}),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"props"},"Props"),(0,i.kt)(r.Z.Table,{docs:x}))}Z.isMDXComponent=!0},5426:(e,a,n)=>{n.d(a,{Z:()=>l});var t=n(7294);const l=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"}))}))},8163:(e,a,n)=>{n.d(a,{Z:()=>l});var t=n(7294);const l=t.forwardRef((function(e,a){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:a},e),t.createElement("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"}))}))}}]); \ No newline at end of file diff --git a/assets/js/0b534472.0ad11de8.js b/assets/js/0b534472.0ad11de8.js deleted file mode 100644 index 49e4ae8..0000000 --- a/assets/js/0b534472.0ad11de8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[7987],{5667:(e,l,a)=>{a.d(l,{Z:()=>m});var t=a(7294),n=a(4184),s=a.n(n),r=a(5697),o=a.n(r);const i=(0,t.forwardRef)((({as:e,className:l,label:a,children:n,...r},o)=>(0,t.createElement)(e,{ref:o,className:s()("nfd-label",l),...r},a||n||null))),p={label:o().string,children:o().string,as:o().elementType,className:o().string};i.propTypes=p,i.defaultProps={label:"",children:"",as:"label",className:""};const d=e=>(0,t.createElement)(i,{...e});d.propTypes=p,d.defaultProps=i.defaultProps,d.displayName="Label";const m=i},6755:(e,l,a)=>{a.r(l),a.d(l,{assets:()=>c,contentTitle:()=>d,default:()=>k,frontMatter:()=>p,metadata:()=>m,toc:()=>b});var t=a(7462),n=(a(7294),a(3905)),s=a(2504),r=a(1629),o=a(5667);const i={label:{type:"string",description:"Label text"},as:{type:["label","span","div"],description:"Rendered HTML element",defaultValue:"label"},className:{type:"string"}},p={},d="Label",m={unversionedId:"elements/label",id:"elements/label",title:"Label",description:"A simple label component.",source:"@site/docs/elements/label.mdx",sourceDirName:"elements",slug:"/elements/label",permalink:"/npm-ui-component-library/docs/elements/label",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/elements/label.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Error Boundary",permalink:"/npm-ui-component-library/docs/elements/error-boundary"},next:{title:"Link",permalink:"/npm-ui-component-library/docs/elements/link"}},c={},b=[{value:"Usage",id:"usage",level:3},{value:"Props",id:"props",level:3}],u={toc:b},f="wrapper";function k(e){let{components:l,...a}=e;return(0,n.kt)(f,(0,t.Z)({},u,a,{components:l,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"label"},"Label"),(0,n.kt)("p",null,"A simple label component."),(0,n.kt)(r.Z,{mdxType:"NewfoldRoot"},(0,n.kt)(o.Z,{label:"This is a label",mdxType:"Label"})),(0,n.kt)("hr",null),(0,n.kt)("h3",{id:"usage"},"Usage"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Label } from "@newfold/ui-component-library";\n\n