@cryptlex/web-components 6.6.6-alpha13 → 6.6.6-alpha14
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsxs as p,jsx as d}from"react/jsx-runtime";import{useMemo as h,useRef as f,useEffect as u,useState as v}from"react";import{classNames as g}from"../utilities/theme.js";import"clsx";function b(n){const[i
|
|
1
|
+
"use client";import{jsxs as p,jsx as d}from"react/jsx-runtime";import{useMemo as h,useRef as f,useEffect as u,useState as v}from"react";import{classNames as g}from"../utilities/theme.js";import"clsx";function b(n){const[l,i]=v([]);return u(()=>{const o=new Set,s=new IntersectionObserver(r=>{for(const e of r)e.isIntersecting?o.add(e.target.id):o.delete(e.target.id);const t=n.filter(e=>o.has(e));i(t)},{rootMargin:"0% 0% -80% 0%"});for(const r of n??[]){const t=document.getElementById(r);t&&s.observe(t)}return()=>{for(const r of n??[]){const t=document.getElementById(r);t&&s.unobserve(t)}}},[n]),l}function N({toc:n,className:l}){const i=h(()=>n.map(e=>e.url.replace("#","")),[n]),o=b(i),s=o.length>0?o[0]:null,r=f({}),t=f(null);return u(()=>{if(s){const e=r.current[`#${s}`],c=t.current;if(e&&c){const a=e.offsetTop,m=c.clientHeight;c.scrollTo({top:a-m/2,behavior:"smooth"})}}},[s]),n.length?p("nav",{ref:t,className:g(l),children:[d("p",{className:"text-muted opacity-70 mb-1 body-sm select-none",children:"On This Page"}),d("div",{className:"flex flex-col gap-1",children:n.map(e=>{const c=e.url.replace(/^#/,"");return d("a",{href:e.url,ref:a=>{r.current[e.url]=a},className:"text-muted-foreground hover:text-foreground data-[active=true]:text-foreground body-sm no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6","data-active":o.includes(c),"data-depth":e.depth,children:e.title},e.url)})})]}):null}export{N as TableOfContents};
|
|
2
2
|
//# sourceMappingURL=table-of-contents.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-of-contents.js","sources":["../../lib/components/table-of-contents.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { classNames } from '../utilities/theme';\n\nfunction useActiveItem(itemIds: string[]) {\n const [activeIds, setActiveIds] = useState<string[]>([]);\n\n useEffect(() => {\n const intersectingIds = new Set<string>();\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n intersectingIds.add(entry.target.id);\n } else {\n intersectingIds.delete(entry.target.id);\n }\n }\n\n // Convert to array and sort by document order\n const sortedActiveIds = itemIds.filter(id => intersectingIds.has(id));\n setActiveIds(sortedActiveIds);\n },\n { rootMargin: '0% 0% -80% 0%' }\n );\n\n for (const id of itemIds ?? []) {\n const element = document.getElementById(id);\n if (element) {\n observer.observe(element);\n }\n }\n\n return () => {\n for (const id of itemIds ?? []) {\n const element = document.getElementById(id);\n if (element) {\n observer.unobserve(element);\n }\n }\n };\n }, [itemIds]);\n\n return activeIds;\n}\n\nexport type TableOfContentsHeading = {\n title?: React.ReactNode;\n url: string;\n depth: number;\n};\n\nexport function TableOfContents({ toc, className }: { toc: TableOfContentsHeading[]; className?: string }) {\n const itemIds = useMemo(() => toc.map(item => item.url.replace('#', '')), [toc]);\n const activeIds = useActiveItem(itemIds);\n const firstActiveId = activeIds.length > 0 ? activeIds[0] : null;\n const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n // Scroll to first active item\n useEffect(() => {\n if (firstActiveId) {\n const activeEl = linkRefs.current[`#${firstActiveId}`];\n const containerEl = containerRef.current;\n\n if (activeEl && containerEl) {\n const linkTop = activeEl.offsetTop;\n const containerHeight = containerEl.clientHeight;\n containerEl.scrollTo({\n top: linkTop - containerHeight / 2,\n behavior: 'smooth',\n });\n }\n }\n }, [firstActiveId]);\n\n if (!toc.length) {\n return null;\n }\n\n return (\n <
|
|
1
|
+
{"version":3,"file":"table-of-contents.js","sources":["../../lib/components/table-of-contents.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { classNames } from '../utilities/theme';\n\nfunction useActiveItem(itemIds: string[]) {\n const [activeIds, setActiveIds] = useState<string[]>([]);\n\n useEffect(() => {\n const intersectingIds = new Set<string>();\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n intersectingIds.add(entry.target.id);\n } else {\n intersectingIds.delete(entry.target.id);\n }\n }\n\n // Convert to array and sort by document order\n const sortedActiveIds = itemIds.filter(id => intersectingIds.has(id));\n setActiveIds(sortedActiveIds);\n },\n { rootMargin: '0% 0% -80% 0%' }\n );\n\n for (const id of itemIds ?? []) {\n const element = document.getElementById(id);\n if (element) {\n observer.observe(element);\n }\n }\n\n return () => {\n for (const id of itemIds ?? []) {\n const element = document.getElementById(id);\n if (element) {\n observer.unobserve(element);\n }\n }\n };\n }, [itemIds]);\n\n return activeIds;\n}\n\nexport type TableOfContentsHeading = {\n title?: React.ReactNode;\n url: string;\n depth: number;\n};\n\nexport function TableOfContents({ toc, className }: { toc: TableOfContentsHeading[]; className?: string }) {\n const itemIds = useMemo(() => toc.map(item => item.url.replace('#', '')), [toc]);\n const activeIds = useActiveItem(itemIds);\n const firstActiveId = activeIds.length > 0 ? activeIds[0] : null;\n const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n // Scroll to first active item\n useEffect(() => {\n if (firstActiveId) {\n const activeEl = linkRefs.current[`#${firstActiveId}`];\n const containerEl = containerRef.current;\n\n if (activeEl && containerEl) {\n const linkTop = activeEl.offsetTop;\n const containerHeight = containerEl.clientHeight;\n containerEl.scrollTo({\n top: linkTop - containerHeight / 2,\n behavior: 'smooth',\n });\n }\n }\n }, [firstActiveId]);\n\n if (!toc.length) {\n return null;\n }\n\n return (\n <nav ref={containerRef} className={classNames(className)}>\n <p className=\"text-muted opacity-70 mb-1 body-sm select-none\">On This Page</p>\n <div className=\"flex flex-col gap-1\">\n {toc.map(item => {\n const id = item.url.replace(/^#/, '');\n\n return (\n // It is okay to use plain <a hrefs> here because the links all point to IDs on the same page and does not impact any routers.\n <a\n key={item.url}\n href={item.url}\n ref={el => {\n linkRefs.current[item.url] = el;\n }}\n className=\"text-muted-foreground hover:text-foreground data-[active=true]:text-foreground body-sm no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6\"\n data-active={activeIds.includes(id)}\n data-depth={item.depth}\n >\n {item.title}\n </a>\n );\n })}\n </div>\n </nav>\n );\n}\n"],"names":["useActiveItem","itemIds","activeIds","setActiveIds","useState","useEffect","intersectingIds","observer","entries","entry","sortedActiveIds","id","element","TableOfContents","toc","className","useMemo","item","firstActiveId","linkRefs","useRef","containerRef","activeEl","containerEl","linkTop","containerHeight","classNames","jsx","el"],"mappings":"wMAIA,SAASA,EAAcC,EAAmB,CACtC,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAmB,CAAA,CAAE,EAEvD,OAAAC,EAAU,IAAM,CACZ,MAAMC,MAAsB,IAEtBC,EAAW,IAAI,qBACjBC,GAAW,CACP,UAAWC,KAASD,EACZC,EAAM,eACNH,EAAgB,IAAIG,EAAM,OAAO,EAAE,EAEnCH,EAAgB,OAAOG,EAAM,OAAO,EAAE,EAK9C,MAAMC,EAAkBT,EAAQ,UAAaK,EAAgB,IAAIK,CAAE,CAAC,EACpER,EAAaO,CAAe,CAChC,EACA,CAAE,WAAY,eAAA,CAAgB,EAGlC,UAAWC,KAAMV,GAAW,GAAI,CAC5B,MAAMW,EAAU,SAAS,eAAeD,CAAE,EACtCC,GACAL,EAAS,QAAQK,CAAO,CAEhC,CAEA,MAAO,IAAM,CACT,UAAWD,KAAMV,GAAW,GAAI,CAC5B,MAAMW,EAAU,SAAS,eAAeD,CAAE,EACtCC,GACAL,EAAS,UAAUK,CAAO,CAElC,CACJ,CACJ,EAAG,CAACX,CAAO,CAAC,EAELC,CACX,CAQO,SAASW,EAAgB,CAAE,IAAAC,EAAK,UAAAC,GAAoE,CACvG,MAAMd,EAAUe,EAAQ,IAAMF,EAAI,IAAIG,GAAQA,EAAK,IAAI,QAAQ,IAAK,EAAE,CAAC,EAAG,CAACH,CAAG,CAAC,EACzEZ,EAAYF,EAAcC,CAAO,EACjCiB,EAAgBhB,EAAU,OAAS,EAAIA,EAAU,CAAC,EAAI,KACtDiB,EAAWC,EAAiD,EAAE,EAC9DC,EAAeD,EAA8B,IAAI,EAmBvD,OAhBAf,EAAU,IAAM,CACZ,GAAIa,EAAe,CACf,MAAMI,EAAWH,EAAS,QAAQ,IAAID,CAAa,EAAE,EAC/CK,EAAcF,EAAa,QAEjC,GAAIC,GAAYC,EAAa,CACzB,MAAMC,EAAUF,EAAS,UACnBG,EAAkBF,EAAY,aACpCA,EAAY,SAAS,CACjB,IAAKC,EAAUC,EAAkB,EACjC,SAAU,QAAA,CACb,CACL,CACJ,CACJ,EAAG,CAACP,CAAa,CAAC,EAEbJ,EAAI,SAKJ,MAAA,CAAI,IAAKO,EAAc,UAAWK,EAAWX,CAAS,EACnD,SAAA,CAAAY,EAAC,IAAA,CAAE,UAAU,iDAAiD,SAAA,eAAY,IACzE,MAAA,CAAI,UAAU,sBACV,SAAAb,EAAI,IAAIG,GAAQ,CACb,MAAMN,EAAKM,EAAK,IAAI,QAAQ,KAAM,EAAE,EAEpC,OAEIU,EAAC,IAAA,CAEG,KAAMV,EAAK,IACX,IAAKW,GAAM,CACPT,EAAS,QAAQF,EAAK,GAAG,EAAIW,CACjC,EACA,UAAU,gKACV,cAAa1B,EAAU,SAASS,CAAE,EAClC,aAAYM,EAAK,MAEhB,SAAAA,EAAK,KAAA,EATDA,EAAK,GAAA,CAYtB,CAAC,CAAA,CACL,CAAA,EACJ,EA3BO,IA6Bf"}
|
package/lib/tokens.css
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
--secondary-8: var(--xsecondary-8);
|
|
46
46
|
--secondary-9: var(--xsecondary-9);
|
|
47
47
|
--secondary-10: var(--xsecondary-10);
|
|
48
|
-
--destructive-hue:
|
|
48
|
+
--destructive-hue: 10;
|
|
49
49
|
--xdestructive-1: oklch(0.99 0.01 var(--destructive-hue));
|
|
50
50
|
--xdestructive-2: oklch(0.97 0.03 var(--destructive-hue));
|
|
51
51
|
--xdestructive-3: oklch(0.9 0.04 var(--destructive-hue));
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
--destructive-8: var(--xdestructive-8);
|
|
67
67
|
--destructive-9: var(--xdestructive-9);
|
|
68
68
|
--destructive-10: var(--xdestructive-10);
|
|
69
|
-
--success-hue:
|
|
69
|
+
--success-hue: 150;
|
|
70
70
|
--xsuccess-1: oklch(0.99 0.01 var(--success-hue));
|
|
71
71
|
--xsuccess-2: oklch(0.97 0.03 var(--success-hue));
|
|
72
72
|
--xsuccess-3: oklch(0.9 0.04 var(--success-hue));
|