npm - @lax-wp/design-system - Versions diffs - 0.13.40 → 0.13.41 - Mend

@lax-wp/design-system 0.13.40 → 0.13.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/cards/card-main/CardMain.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),i=require("../../../_virtual/index.cjs.js"),l=require("../../data-display/banner/Banner.cjs.js"),o=require("../../../constants/layout.cjs.js"),M=require("../../../hooks/useScrollToTop.cjs.js"),g=require("../../layout/Helmet.cjs.js"),c=({title:s,children:u,noPadding:d,className:x,noBanner:a,noScrollbar:m,mode:t,displayId:n})=>{const r=t===o.MODES.EDIT||t===o.MODES.FOCUS_EDIT?"edit":t===o.MODES.COMPARISON?"compare":null,b=p.useMemo(()=>r==="edit"&&n&&!a||r==="compare",[r,n,a]);return M.useScrollToTop(),e.jsxs(e.Fragment,{children:[s?e.jsx(g.Helmet,{title:s}):null,e.jsxs("div",{style:{marginLeft:"var(--sidebar-ml, 0px)"},className:i(" relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800",`ease-in-out duration-${o.OPEN_DURATION_MS}`,x),children:[r==="edit"&&n&&!a?e.jsx(l.Banner,{status:"warning",children:`You're currently editing ${n||""}`}):r==="compare"?e.jsx(l.Banner,{status:"success",children:"You are now in Comparison Mode"}):null,e.jsx("div",{className:i(`flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${m?"hide-scrollbar":""}`,d?"p-0":"p-base",b?"rounded-tl-none":"!rounded-tl-xl"),id:"app-body-container",children:u})]})]})};c.displayName="CardMain";exports.CardMain=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),s=require("../../../_virtual/index.cjs.js"),l=require("../../data-display/banner/Banner.cjs.js"),o=require("../../../constants/layout.cjs.js"),p=require("../../../hooks/useScrollToTop.cjs.js"),M=require("../../layout/Helmet.cjs.js"),c=({title:i,children:u,noPadding:d,className:m,noBanner:a,noScrollbar:x,mode:t,displayId:n})=>{const r=t===o.MODES.EDIT||t===o.MODES.FOCUS_EDIT?"edit":t===o.MODES.COMPARISON?"compare":null,b=g.useMemo(()=>r==="edit"&&n&&!a||r==="compare",[r,n,a]);return p.useScrollToTop(),e.jsxs(e.Fragment,{children:[i?e.jsx(M.Helmet,{title:i}):null,e.jsxs("div",{style:{marginLeft:"var(--sidebar-ml, 0px)"},className:s(" relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800",`transition-[margin-left] ease-in-out duration-${o.OPEN_DURATION_MS}`,m),children:[r==="edit"&&n&&!a?e.jsx(l.Banner,{status:"warning",children:`You're currently editing ${n||""}`}):r==="compare"?e.jsx(l.Banner,{status:"success",children:"You are now in Comparison Mode"}):null,e.jsx("div",{className:s(`flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${x?"hide-scrollbar":""}`,d?"p-0":"p-base",b?"rounded-tl-none":"!rounded-tl-xl"),id:"app-body-container",children:u})]})]})};c.displayName="CardMain";exports.CardMain=c;
 //# sourceMappingURL=CardMain.cjs.js.map

package/dist/components/cards/card-main/CardMain.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardMain.cjs.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n title?: string;\n children: ReactNode;\n noPadding?: boolean;\n className?: string;\n noHeight?: boolean;\n noBanner?: boolean;\n noScrollbar?: boolean;\n /** Current mode - can be 'edit', 'focusEdit', 'comparison' /\n mode?: string \| null;\n /* Display ID to show in banner /\n displayId?: string \| null;\n /* Whether the main sidebar is expanded /\n isMainSideBarOpen?: boolean;\n};\n\n/\n CardMain component for main content areas with optional edit/comparison banners\n \n @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n * <div>Page content</div>\n * </CardMain>\n * ```\n */\nexport const CardMain: FC<CardMainProps> = ({\n title,\n children,\n noPadding,\n className,\n noBanner,\n noScrollbar,\n mode,\n displayId,\n}) => {\n const currentMode = mode === MODES.EDIT \|\| mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n const isBannerVisible = useMemo(() => {\n return (currentMode === 'edit' && displayId && !noBanner) \|\| currentMode === 'compare';\n }, [currentMode, displayId, noBanner]);\n\n\n useScrollToTop()\n return (\n <>\n {!!title ? <Helmet title={title} /> : null}\n <div\n style={{\n marginLeft: 'var(--sidebar-ml, 0px)'\n }}\n className={cn(\n ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n `ease-in-out duration-${OPEN_DURATION_MS}`,\n className,\n )}\n >\n {currentMode === 'edit' && displayId && !noBanner ? (\n <Banner status='warning'>{`You're currently editing ${displayId \|\| ''}`}</Banner>\n ) : currentMode === 'compare' ? (\n <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n ) : null}\n\n <div\n className={cn(\n `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n noPadding ? 'p-0' : 'p-base',\n isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n )}\n id='app-body-container'\n >\n {children}\n </div>\n </div>\n </>\n );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":"iXAkCaA,EAA8B,CAAC,CAC1C,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAAM,CACJ,MAAMC,EAAcF,IAASG,QAAM,MAAQH,IAASG,EAAAA,MAAM,WAAa,OAASH,IAASG,EAAAA,MAAM,WAAa,UAAY,KAElHC,EAAkBC,EAAAA,QAAQ,IACtBH,IAAgB,QAAUD,GAAa,CAACH,GAAaI,IAAgB,UAC5E,CAACA,EAAaD,EAAWH,CAAQ,CAAC,EAGrCQ,OAAAA,iBAAA,EAEEC,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAEd,EAAQe,EAAAA,IAACC,EAAAA,OAAA,CAAO,MAAAhB,EAAc,EAAK,KACtCa,EAAAA,KAAC,MAAA,CACD,MAAO,CACL,WAAY,wBAAA,EAEZ,UAAWI,EACT,~~gGACA~~,~~wBAAwBC~~,EAAAA,gBAAgB,~~GACxCf~~,CAAA,EAGD,SAAA,CAAAK,IAAgB,QAAUD,GAAa,CAACH,QACtCe,EAAAA,OAAA,CAAO,OAAO,UAAW,SAAA,4BAA4BZ,GAAa,EAAE,EAAA,CAAG,EACtEC,IAAgB,UAClBO,EAAAA,IAACI,EAAAA,QAAO,OAAO,UAAW,0CAAiC,EACzD,KAEJJ,EAAAA,IAAC,MAAA,CACC,UAAWE,EACT,yEAAyEZ,EAAc,iBAAmB,EAAE,GAC5GH,EAAY,MAAQ,SACpBQ,EAAkB,kBAAoB,gBAAA,EAExC,GAAG,qBAEF,SAAAT,CAAA,CAAA,CACH,CAAA,CAAA,CACF,EACF,CAEJ,EAEAF,EAAS,YAAc"}
1	+ {"version":3,"file":"CardMain.cjs.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n title?: string;\n children: ReactNode;\n noPadding?: boolean;\n className?: string;\n noHeight?: boolean;\n noBanner?: boolean;\n noScrollbar?: boolean;\n /** Current mode - can be 'edit', 'focusEdit', 'comparison' /\n mode?: string \| null;\n /* Display ID to show in banner /\n displayId?: string \| null;\n /* Whether the main sidebar is expanded /\n isMainSideBarOpen?: boolean;\n};\n\n/\n CardMain component for main content areas with optional edit/comparison banners\n \n @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n * <div>Page content</div>\n * </CardMain>\n * ```\n /\nexport const CardMain: FC<CardMainProps> = ({\n title,\n children,\n noPadding,\n className,\n noBanner,\n noScrollbar,\n mode,\n displayId,\n}) => {\n const currentMode = mode === MODES.EDIT \|\| mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n const isBannerVisible = useMemo(() => {\n return (currentMode === 'edit' && displayId && !noBanner) \|\| currentMode === 'compare';\n }, [currentMode, displayId, noBanner]);\n\n\n useScrollToTop()\n return (\n <>\n {!!title ? <Helmet title={title} /> : null}\n <div\n style={{\n marginLeft: 'var(--sidebar-ml, 0px)'\n }}\n className={cn(\n ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n // Scope the transition to margin-left (the sidebar push). Without an explicit\n // transition-property, `duration-` falls back to CSS's default `all`, which\n // also animates background-color over 500ms — that made the rounded-tl corner\n // flash a mismatched triangle on theme toggle. The background now flips with\n // the `dark` class and is handled by the view transition.\n `transition-[margin-left] ease-in-out duration-${OPEN_DURATION_MS}`,\n className,\n )}\n >\n {currentMode === 'edit' && displayId && !noBanner ? (\n <Banner status='warning'>{`You're currently editing ${displayId \|\| ''}`}</Banner>\n ) : currentMode === 'compare' ? (\n <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n ) : null}\n\n <div\n className={cn(\n `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n noPadding ? 'p-0' : 'p-base',\n isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n )}\n id='app-body-container'\n >\n {children}\n </div>\n </div>\n </>\n );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":"iXAkCaA,EAA8B,CAAC,CAC1C,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAAM,CACJ,MAAMC,EAAcF,IAASG,QAAM,MAAQH,IAASG,EAAAA,MAAM,WAAa,OAASH,IAASG,EAAAA,MAAM,WAAa,UAAY,KAElHC,EAAkBC,EAAAA,QAAQ,IACtBH,IAAgB,QAAUD,GAAa,CAACH,GAAaI,IAAgB,UAC5E,CAACA,EAAaD,EAAWH,CAAQ,CAAC,EAGrCQ,OAAAA,iBAAA,EAEEC,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAEd,EAAQe,EAAAA,IAACC,EAAAA,OAAA,CAAO,MAAAhB,EAAc,EAAK,KACtCa,EAAAA,KAAC,MAAA,CACD,MAAO,CACL,WAAY,wBAAA,EAEZ,UAAWI,EACT,gGAMA,iDAAiDC,EAAAA,gBAAgB,GACjEf,CAAA,EAGD,SAAA,CAAAK,IAAgB,QAAUD,GAAa,CAACH,QACtCe,EAAAA,OAAA,CAAO,OAAO,UAAW,SAAA,4BAA4BZ,GAAa,EAAE,EAAA,CAAG,EACtEC,IAAgB,UAClBO,EAAAA,IAACI,EAAAA,QAAO,OAAO,UAAW,0CAAiC,EACzD,KAEJJ,EAAAA,IAAC,MAAA,CACC,UAAWE,EACT,yEAAyEZ,EAAc,iBAAmB,EAAE,GAC5GH,EAAY,MAAQ,SACpBQ,EAAkB,kBAAoB,gBAAA,EAExC,GAAG,qBAEF,SAAAT,CAAA,CAAA,CACH,CAAA,CAAA,CACF,EACF,CAEJ,EAEAF,EAAS,YAAc"}

package/dist/components/cards/card-main/CardMain.es.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { jsxs as n, Fragment as b, jsx as o } from "react/jsx-runtime";
-import { useMemo as x } from "react";
-import c from "../../../_virtual/index.es.js";
-import { Banner as m } from "../../data-display/banner/Banner.es.js";
-import { MODES as t, OPEN_DURATION_MS as g } from "../../../constants/layout.es.js";
+import { jsxs as l, Fragment as b, jsx as o } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import m from "../../../_virtual/index.es.js";
+import { Banner as s } from "../../data-display/banner/Banner.es.js";
+import { MODES as t, OPEN_DURATION_MS as x } from "../../../constants/layout.es.js";
 import { useScrollToTop as h } from "../../../hooks/useScrollToTop.es.js";
 import { Helmet as v } from "../../layout/Helmet.es.js";
 const M = ({
-  title: l,
-  children: s,
+  title: n,
+  children: c,
   noPadding: d,
   className: u,
   noBanner: a,
@@ -15,32 +15,37 @@ const M = ({
   mode: i,
   displayId: e
 }) => {
-  const r = i === t.EDIT || i === t.FOCUS_EDIT ? "edit" : i === t.COMPARISON ? "compare" : null, f = x(() => r === "edit" && e && !a || r === "compare", [r, e, a]);
-  return h(), /* @__PURE__ */ n(b, { children: [
-    l ? /* @__PURE__ */ o(v, { title: l }) : null,
-    /* @__PURE__ */ n(
+  const r = i === t.EDIT || i === t.FOCUS_EDIT ? "edit" : i === t.COMPARISON ? "compare" : null, f = g(() => r === "edit" && e && !a || r === "compare", [r, e, a]);
+  return h(), /* @__PURE__ */ l(b, { children: [
+    n ? /* @__PURE__ */ o(v, { title: n }) : null,
+    /* @__PURE__ */ l(
       "div",
       {
         style: {
           marginLeft: "var(--sidebar-ml, 0px)"
         },
-        className: c(
+        className: m(
           " relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800",
-          `ease-in-out duration-${g}`,
+          // Scope the transition to margin-left (the sidebar push). Without an explicit
+          // transition-property, `duration-*` falls back to CSS's default `all`, which
+          // also animates background-color over 500ms — that made the rounded-tl corner
+          // flash a mismatched triangle on theme toggle. The background now flips with
+          // the `dark` class and is handled by the view transition.
+          `transition-[margin-left] ease-in-out duration-${x}`,
           u
         ),
         children: [
-          r === "edit" && e && !a ? /* @__PURE__ */ o(m, { status: "warning", children: `You're currently editing ${e || ""}` }) : r === "compare" ? /* @__PURE__ */ o(m, { status: "success", children: "You are now in Comparison Mode" }) : null,
+          r === "edit" && e && !a ? /* @__PURE__ */ o(s, { status: "warning", children: `You're currently editing ${e || ""}` }) : r === "compare" ? /* @__PURE__ */ o(s, { status: "success", children: "You are now in Comparison Mode" }) : null,
           /* @__PURE__ */ o(
             "div",
             {
-              className: c(
+              className: m(
                 `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${p ? "hide-scrollbar" : ""}`,
                 d ? "p-0" : "p-base",
                 f ? "rounded-tl-none" : "!rounded-tl-xl"
               ),
               id: "app-body-container",
-              children: s
+              children: c
             }
           )
         ]

package/dist/components/cards/card-main/CardMain.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardMain.es.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n title?: string;\n children: ReactNode;\n noPadding?: boolean;\n className?: string;\n noHeight?: boolean;\n noBanner?: boolean;\n noScrollbar?: boolean;\n /** Current mode - can be 'edit', 'focusEdit', 'comparison' /\n mode?: string \| null;\n /* Display ID to show in banner /\n displayId?: string \| null;\n /* Whether the main sidebar is expanded /\n isMainSideBarOpen?: boolean;\n};\n\n/\n CardMain component for main content areas with optional edit/comparison banners\n \n @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n * <div>Page content</div>\n * </CardMain>\n * ```\n */\nexport const CardMain: FC<CardMainProps> = ({\n title,\n children,\n noPadding,\n className,\n noBanner,\n noScrollbar,\n mode,\n displayId,\n}) => {\n const currentMode = mode === MODES.EDIT \|\| mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n const isBannerVisible = useMemo(() => {\n return (currentMode === 'edit' && displayId && !noBanner) \|\| currentMode === 'compare';\n }, [currentMode, displayId, noBanner]);\n\n\n useScrollToTop()\n return (\n <>\n {!!title ? <Helmet title={title} /> : null}\n <div\n style={{\n marginLeft: 'var(--sidebar-ml, 0px)'\n }}\n className={cn(\n ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n `ease-in-out duration-${OPEN_DURATION_MS}`,\n className,\n )}\n >\n {currentMode === 'edit' && displayId && !noBanner ? (\n <Banner status='warning'>{`You're currently editing ${displayId \|\| ''}`}</Banner>\n ) : currentMode === 'compare' ? (\n <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n ) : null}\n\n <div\n className={cn(\n `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n noPadding ? 'p-0' : 'p-base',\n isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n )}\n id='app-body-container'\n >\n {children}\n </div>\n </div>\n </>\n );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":";;;;;;;AAkCO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAcF,MAASG,EAAM,QAAQH,MAASG,EAAM,aAAa,SAASH,MAASG,EAAM,aAAa,YAAY,MAElHC,IAAkBC,EAAQ,MACtBH,MAAgB,UAAUD,KAAa,CAACH,KAAaI,MAAgB,WAC5E,CAACA,GAAaD,GAAWH,CAAQ,CAAC;AAGrC,SAAAQ,EAAA,GAEE,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAEd,IAAQ,gBAAAe,EAACC,GAAA,EAAO,OAAAhB,GAAc,IAAK;AAAA,IACtC,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACD,OAAO;AAAA,UACL,YAAY;AAAA,QAAA;AAAA,QAEZ,WAAWI;AAAA,UACT;AAAA,~~UACA~~,~~wBAAwBC~~,CAAgB;AAAA,~~UACxCf~~;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAAK,MAAgB,UAAUD,KAAa,CAACH,sBACtCe,GAAA,EAAO,QAAO,WAAW,UAAA,4BAA4BZ,KAAa,EAAE,GAAA,CAAG,IACtEC,MAAgB,YAClB,gBAAAO,EAACI,KAAO,QAAO,WAAW,4CAAiC,IACzD;AAAA,UAEJ,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACT,yEAAyEZ,IAAc,mBAAmB,EAAE;AAAA,gBAC5GH,IAAY,QAAQ;AAAA,gBACpBQ,IAAkB,oBAAoB;AAAA,cAAA;AAAA,cAExC,IAAG;AAAA,cAEF,UAAAT;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEAF,EAAS,cAAc;"}
1	+ {"version":3,"file":"CardMain.es.js","sources":["../../../../src/components/cards/card-main/CardMain.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport cn from 'classnames';\nimport { Banner } from '../../data-display/banner/Banner';\nimport { MODES, OPEN_DURATION_MS } from '../../../constants/layout';\nimport { useScrollToTop } from '../../../hooks/useScrollToTop';\nimport { Helmet } from '../../layout';\n\nexport type CardMainProps = {\n title?: string;\n children: ReactNode;\n noPadding?: boolean;\n className?: string;\n noHeight?: boolean;\n noBanner?: boolean;\n noScrollbar?: boolean;\n /** Current mode - can be 'edit', 'focusEdit', 'comparison' /\n mode?: string \| null;\n /* Display ID to show in banner /\n displayId?: string \| null;\n /* Whether the main sidebar is expanded /\n isMainSideBarOpen?: boolean;\n};\n\n/\n CardMain component for main content areas with optional edit/comparison banners\n \n @example\n * ```tsx\n * <CardMain title=\"Page Title\" mode=\"edit\" displayId=\"DOC-001\">\n * <div>Page content</div>\n * </CardMain>\n * ```\n /\nexport const CardMain: FC<CardMainProps> = ({\n title,\n children,\n noPadding,\n className,\n noBanner,\n noScrollbar,\n mode,\n displayId,\n}) => {\n const currentMode = mode === MODES.EDIT \|\| mode === MODES.FOCUS_EDIT ? 'edit' : mode === MODES.COMPARISON ? 'compare' : null;\n\n const isBannerVisible = useMemo(() => {\n return (currentMode === 'edit' && displayId && !noBanner) \|\| currentMode === 'compare';\n }, [currentMode, displayId, noBanner]);\n\n\n useScrollToTop()\n return (\n <>\n {!!title ? <Helmet title={title} /> : null}\n <div\n style={{\n marginLeft: 'var(--sidebar-ml, 0px)'\n }}\n className={cn(\n ` relative h-[calc(100vh-56px)] overflow-y-auto flex flex-col bg-primary-800 dark:bg-black-800`,\n // Scope the transition to margin-left (the sidebar push). Without an explicit\n // transition-property, `duration-` falls back to CSS's default `all`, which\n // also animates background-color over 500ms — that made the rounded-tl corner\n // flash a mismatched triangle on theme toggle. The background now flips with\n // the `dark` class and is handled by the view transition.\n `transition-[margin-left] ease-in-out duration-${OPEN_DURATION_MS}`,\n className,\n )}\n >\n {currentMode === 'edit' && displayId && !noBanner ? (\n <Banner status='warning'>{`You're currently editing ${displayId \|\| ''}`}</Banner>\n ) : currentMode === 'compare' ? (\n <Banner status='success'>{`You are now in Comparison Mode`}</Banner>\n ) : null}\n\n <div\n className={cn(\n `flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 dark:bg-black-700 ${noScrollbar ? 'hide-scrollbar' : ''}`,\n noPadding ? 'p-0' : 'p-base',\n isBannerVisible ? 'rounded-tl-none' : '!rounded-tl-xl',\n )}\n id='app-body-container'\n >\n {children}\n </div>\n </div>\n </>\n );\n};\n\nCardMain.displayName = 'CardMain';\n\n\n\n"],"names":["CardMain","title","children","noPadding","className","noBanner","noScrollbar","mode","displayId","currentMode","MODES","isBannerVisible","useMemo","useScrollToTop","jsxs","Fragment","jsx","Helmet","cn","OPEN_DURATION_MS","Banner"],"mappings":";;;;;;;AAkCO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAcF,MAASG,EAAM,QAAQH,MAASG,EAAM,aAAa,SAASH,MAASG,EAAM,aAAa,YAAY,MAElHC,IAAkBC,EAAQ,MACtBH,MAAgB,UAAUD,KAAa,CAACH,KAAaI,MAAgB,WAC5E,CAACA,GAAaD,GAAWH,CAAQ,CAAC;AAGrC,SAAAQ,EAAA,GAEE,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAEd,IAAQ,gBAAAe,EAACC,GAAA,EAAO,OAAAhB,GAAc,IAAK;AAAA,IACtC,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACD,OAAO;AAAA,UACL,YAAY;AAAA,QAAA;AAAA,QAEZ,WAAWI;AAAA,UACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,iDAAiDC,CAAgB;AAAA,UACjEf;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAAK,MAAgB,UAAUD,KAAa,CAACH,sBACtCe,GAAA,EAAO,QAAO,WAAW,UAAA,4BAA4BZ,KAAa,EAAE,GAAA,CAAG,IACtEC,MAAgB,YAClB,gBAAAO,EAACI,KAAO,QAAO,WAAW,4CAAiC,IACzD;AAAA,UAEJ,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACT,yEAAyEZ,IAAc,mBAAmB,EAAE;AAAA,gBAC5GH,IAAY,QAAQ;AAAA,gBACpBQ,IAAkB,oBAAoB;AAAA,cAAA;AAAA,cAExC,IAAG;AAAA,cAEF,UAAAT;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEAF,EAAS,cAAc;"}

package/dist/components/data-display/tag/Tag.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center transition-colors font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
 //# sourceMappingURL=Tag.cjs.js.map

package/dist/components/data-display/tag/Tag.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/*\n Available tag size options\n /\nexport type TagSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\";\n\n/\n Available color names for tags\n /\nexport type TagColor =\n \| \"primary\"\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"neutral\"\n \| \"red\"\n \| \"green\"\n \| \"blue\"\n \| \"teal\"\n \| \"yellow\"\n \| \"orange\"\n \| \"peach\"\n \| \"purple\"\n \| \"navy\"\n \| \"gray\"\n \| \"grey\";\n\nexport type ThemeMode = \"light\" \| \"dark\";\n\n/\n Upload handler function type\n /\nexport type UploadHandler = (file: File) => void \| Promise<void>;\n\n/\n Props for the Tag component\n /\nexport interface TagProps {\n /* The text content to display /\n label: string;\n /* Router path or external URL /\n href?: string;\n /* Color name or hex color value (example: #3B82F6 or red) /\n color?: string;\n /* Size variant /\n size?: TagSize;\n /* Additional CSS classes /\n className?: string;\n /* Click handler for the tag /\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Mouse down handler /\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Maximum character length before truncation /\n truncate?: number;\n /* Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. /\n isHashColor?: boolean;\n /* Theme mode /\n theme?: ThemeMode;\n /* Icon to display before the label /\n icon?: React.ReactNode;\n /* Whether the tag is removable (shows close button) /\n removable?: boolean;\n /* Handler for remove button click /\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /* Upload handler function /\n onUpload?: UploadHandler;\n /* Whether the tag accepts file uploads /\n acceptsUpload?: boolean;\n /* Whether to show a tooltip with the label on hover /\n tooltip?: boolean;\n /* Custom aria-label for accessibility /\n \"aria-label\"?: string;\n /* ARIA role override /\n role?: React.AriaRole;\n}\n\n/\n Tag component displays labels with customizable colors and styling\n \n @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n /\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]:\|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/*\n Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n /\nconst normalizeHex = (value: string): string \| undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/\n Get size-based styling classes\n /\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor \|\| HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick \|\| acceptsUpload \|\| href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /\n Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center transition-colors font-medium\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
1	+ {"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/*\n Available tag size options\n /\nexport type TagSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\";\n\n/\n Available color names for tags\n /\nexport type TagColor =\n \| \"primary\"\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"neutral\"\n \| \"red\"\n \| \"green\"\n \| \"blue\"\n \| \"teal\"\n \| \"yellow\"\n \| \"orange\"\n \| \"peach\"\n \| \"purple\"\n \| \"navy\"\n \| \"gray\"\n \| \"grey\";\n\nexport type ThemeMode = \"light\" \| \"dark\";\n\n/\n Upload handler function type\n /\nexport type UploadHandler = (file: File) => void \| Promise<void>;\n\n/\n Props for the Tag component\n /\nexport interface TagProps {\n /* The text content to display /\n label: string;\n /* Router path or external URL /\n href?: string;\n /* Color name or hex color value (example: #3B82F6 or red) /\n color?: string;\n /* Size variant /\n size?: TagSize;\n /* Additional CSS classes /\n className?: string;\n /* Click handler for the tag /\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Mouse down handler /\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Maximum character length before truncation /\n truncate?: number;\n /* Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. /\n isHashColor?: boolean;\n /* Theme mode /\n theme?: ThemeMode;\n /* Icon to display before the label /\n icon?: React.ReactNode;\n /* Whether the tag is removable (shows close button) /\n removable?: boolean;\n /* Handler for remove button click /\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /* Upload handler function /\n onUpload?: UploadHandler;\n /* Whether the tag accepts file uploads /\n acceptsUpload?: boolean;\n /* Whether to show a tooltip with the label on hover /\n tooltip?: boolean;\n /* Custom aria-label for accessibility /\n \"aria-label\"?: string;\n /* ARIA role override /\n role?: React.AriaRole;\n}\n\n/\n Tag component displays labels with customizable colors and styling\n \n @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n /\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]:\|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/*\n Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n /\nconst normalizeHex = (value: string): string \| undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/\n Get size-based styling classes\n /\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor \|\| HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick \|\| acceptsUpload \|\| href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /\n Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center font-medium\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}

package/dist/components/data-display/tag/Tag.es.js CHANGED Viewed

@@ -67,7 +67,7 @@ const k = {
       const N = a.target.files?.[0];
       N && f && f(N), a.target.value = "";
     }, y = T(
-      "inline-flex items-center transition-colors font-medium",
+      "inline-flex items-center font-medium",
       j(l, H),
       G(v),
       o && "cursor-pointer hover:opacity-80",

package/dist/components/data-display/tag/Tag.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/*\n Available tag size options\n /\nexport type TagSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\";\n\n/\n Available color names for tags\n /\nexport type TagColor =\n \| \"primary\"\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"neutral\"\n \| \"red\"\n \| \"green\"\n \| \"blue\"\n \| \"teal\"\n \| \"yellow\"\n \| \"orange\"\n \| \"peach\"\n \| \"purple\"\n \| \"navy\"\n \| \"gray\"\n \| \"grey\";\n\nexport type ThemeMode = \"light\" \| \"dark\";\n\n/\n Upload handler function type\n /\nexport type UploadHandler = (file: File) => void \| Promise<void>;\n\n/\n Props for the Tag component\n /\nexport interface TagProps {\n /* The text content to display /\n label: string;\n /* Router path or external URL /\n href?: string;\n /* Color name or hex color value (example: #3B82F6 or red) /\n color?: string;\n /* Size variant /\n size?: TagSize;\n /* Additional CSS classes /\n className?: string;\n /* Click handler for the tag /\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Mouse down handler /\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Maximum character length before truncation /\n truncate?: number;\n /* Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. /\n isHashColor?: boolean;\n /* Theme mode /\n theme?: ThemeMode;\n /* Icon to display before the label /\n icon?: React.ReactNode;\n /* Whether the tag is removable (shows close button) /\n removable?: boolean;\n /* Handler for remove button click /\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /* Upload handler function /\n onUpload?: UploadHandler;\n /* Whether the tag accepts file uploads /\n acceptsUpload?: boolean;\n /* Whether to show a tooltip with the label on hover /\n tooltip?: boolean;\n /* Custom aria-label for accessibility /\n \"aria-label\"?: string;\n /* ARIA role override /\n role?: React.AriaRole;\n}\n\n/\n Tag component displays labels with customizable colors and styling\n \n @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n /\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]:\|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/*\n Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n /\nconst normalizeHex = (value: string): string \| undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/\n Get size-based styling classes\n /\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor \|\| HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick \|\| acceptsUpload \|\| href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /\n Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center transition-colors font-medium\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
1	+ {"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/*\n Available tag size options\n /\nexport type TagSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\";\n\n/\n Available color names for tags\n /\nexport type TagColor =\n \| \"primary\"\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"neutral\"\n \| \"red\"\n \| \"green\"\n \| \"blue\"\n \| \"teal\"\n \| \"yellow\"\n \| \"orange\"\n \| \"peach\"\n \| \"purple\"\n \| \"navy\"\n \| \"gray\"\n \| \"grey\";\n\nexport type ThemeMode = \"light\" \| \"dark\";\n\n/\n Upload handler function type\n /\nexport type UploadHandler = (file: File) => void \| Promise<void>;\n\n/\n Props for the Tag component\n /\nexport interface TagProps {\n /* The text content to display /\n label: string;\n /* Router path or external URL /\n href?: string;\n /* Color name or hex color value (example: #3B82F6 or red) /\n color?: string;\n /* Size variant /\n size?: TagSize;\n /* Additional CSS classes /\n className?: string;\n /* Click handler for the tag /\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Mouse down handler /\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Maximum character length before truncation /\n truncate?: number;\n /* Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. /\n isHashColor?: boolean;\n /* Theme mode /\n theme?: ThemeMode;\n /* Icon to display before the label /\n icon?: React.ReactNode;\n /* Whether the tag is removable (shows close button) /\n removable?: boolean;\n /* Handler for remove button click /\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /* Upload handler function /\n onUpload?: UploadHandler;\n /* Whether the tag accepts file uploads /\n acceptsUpload?: boolean;\n /* Whether to show a tooltip with the label on hover /\n tooltip?: boolean;\n /* Custom aria-label for accessibility /\n \"aria-label\"?: string;\n /* ARIA role override /\n role?: React.AriaRole;\n}\n\n/\n Tag component displays labels with customizable colors and styling\n \n @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n /\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]:\|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/*\n Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n /\nconst normalizeHex = (value: string): string \| undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/\n Get size-based styling classes\n /\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor \|\| HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick \|\| acceptsUpload \|\| href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /\n Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center font-medium\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel \|\| `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.13.40",
+  "version": "0.13.41",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",