@themodcraft/pro-kit 0.0.0 → 1.1.0

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 (63) hide show
  1. package/README.md +20 -0
  2. package/dist/components/banner/Banner.js +1 -1
  3. package/dist/components/banner/Banner.module.css +1 -0
  4. package/dist/components/breadcrumbs/BreadcrumbProvider.d.ts +7 -0
  5. package/dist/components/breadcrumbs/BreadcrumbProvider.js +1 -0
  6. package/dist/components/breadcrumbs/Breadcrumbs.d.ts +2 -0
  7. package/dist/components/breadcrumbs/Breadcrumbs.js +1 -0
  8. package/dist/components/breadcrumbs/Breadcrumbs.module.css +1 -0
  9. package/dist/components/breadcrumbs/Breadcrumbs.types.d.ts +12 -0
  10. package/dist/components/breadcrumbs/Breadcrumbs.types.js +0 -0
  11. package/dist/components/breadcrumbs/index.d.ts +3 -0
  12. package/dist/components/breadcrumbs/index.js +1 -0
  13. package/dist/components/code-field/CodeField.d.ts +2 -0
  14. package/dist/components/code-field/CodeField.js +3 -0
  15. package/dist/components/code-field/CodeField.module.css +1 -0
  16. package/dist/components/code-field/CodeField.types.d.ts +12 -0
  17. package/dist/components/code-field/CodeField.types.js +0 -0
  18. package/dist/components/code-field/index.d.ts +2 -0
  19. package/dist/components/code-field/index.js +1 -0
  20. package/dist/components/container/container.module.css +1 -1
  21. package/dist/components/data-table/DataTable.d.ts +2 -0
  22. package/dist/components/data-table/DataTable.js +1 -0
  23. package/dist/components/data-table/DataTable.module.css +1 -0
  24. package/dist/components/data-table/DataTable.types.d.ts +53 -0
  25. package/dist/components/data-table/DataTable.types.js +0 -0
  26. package/dist/components/data-table/index.d.ts +2 -0
  27. package/dist/components/data-table/index.js +1 -0
  28. package/dist/components/navbar/Navbar.d.ts +1 -1
  29. package/dist/components/navbar/Navbar.js +1 -1
  30. package/dist/components/navbar/Navbar.types.d.ts +2 -0
  31. package/dist/components/navbar/configs/docs.navbar.config.json +10 -9
  32. package/dist/components/navbar/navbar.config.schema.json +6 -0
  33. package/dist/components/navbar/style_navbar.module.css +1 -1
  34. package/dist/components/otp-field/OtpField.d.ts +2 -0
  35. package/dist/components/otp-field/OtpField.js +1 -0
  36. package/dist/components/otp-field/OtpField.module.css +1 -0
  37. package/dist/components/otp-field/OtpField.types.d.ts +20 -0
  38. package/dist/components/otp-field/OtpField.types.js +0 -0
  39. package/dist/components/otp-field/index.d.ts +2 -0
  40. package/dist/components/otp-field/index.js +1 -0
  41. package/dist/components/overlay/Overlay.js +2 -2
  42. package/dist/components/overlay/Overlay.module.css +1 -1
  43. package/dist/components/slider/Slider.d.ts +1 -1
  44. package/dist/components/slider/Slider.js +1 -1
  45. package/dist/components/slider/Slider.module.css +1 -0
  46. package/dist/components/slider/Slider.types.d.ts +61 -0
  47. package/dist/components/smart-form/SmartForm.d.ts +9 -0
  48. package/dist/components/smart-form/SmartForm.js +1 -0
  49. package/dist/components/smart-form/SmartForm.module.css +1 -0
  50. package/dist/components/smart-form/SmartForm.types.d.ts +83 -0
  51. package/dist/components/smart-form/SmartForm.types.js +0 -0
  52. package/dist/components/smart-form/index.d.ts +2 -0
  53. package/dist/components/smart-form/index.js +1 -0
  54. package/dist/components/tabs/Tabs.d.ts +3 -0
  55. package/dist/components/tabs/Tabs.js +1 -0
  56. package/dist/components/tabs/Tabs.module.css +1 -0
  57. package/dist/components/tabs/Tabs.types.d.ts +14 -0
  58. package/dist/components/tabs/Tabs.types.js +0 -0
  59. package/dist/components/tabs/index.d.ts +2 -0
  60. package/dist/components/tabs/index.js +1 -0
  61. package/dist/index.d.ts +6 -0
  62. package/dist/index.js +1 -1
  63. package/package.json +3 -3
package/README.md ADDED
@@ -0,0 +1,20 @@
1
+ # `@themodcraft/pro-kit`
2
+
3
+ Advanced UI kit for larger application surfaces.
4
+
5
+ Includes:
6
+ - Navbar system
7
+ - Container and overlay components
8
+ - Slider and soon-state components
9
+ - SmartForm / CForm-compatible composed form components
10
+ - SmartFormBuilder for JSON-driven forms, generated validation, and admin/settings workflows
11
+ - DataTable, Breadcrumbs, OtpField, and CodeField workflow components
12
+ - TabGroup / Tab workflow panels
13
+ - Profile image helpers and app-router-friendly React components
14
+
15
+ Install:
16
+ ```bash
17
+ npm install @themodcraft/pro-kit
18
+ ```
19
+
20
+ This package publishes compiled output only.
@@ -1 +1 @@
1
- import{jsx as e,jsxs as a}from"react/jsx-runtime";import{LicenseGate as n,TMC_ENTITLEMENTS as o}from"@themodcraft/license-client";import{resolveAssetPath as m}from"@themodcraft/core-ui";function h({children:l,className:i,imageUrl:r,subtitle:t,title:s}){return e(n,{required:o.proKit,children:a("div",{className:["relative flex min-h-[320px] items-end overflow-hidden bg-zinc-950 p-6 text-white sm:min-h-[420px] sm:p-10",i].filter(Boolean).join(" "),children:[e("img",{alt:"",className:"absolute inset-0 h-full w-full object-cover opacity-70",src:m(r)}),e("div",{className:"absolute inset-0 bg-gradient-to-t from-black/80 via-black/25 to-transparent"}),a("div",{className:"relative z-10 max-w-3xl",children:[s?e("h1",{className:"text-4xl font-semibold tracking-tight sm:text-6xl",children:s}):null,t?e("p",{className:"mt-4 max-w-xl text-base text-zinc-200",children:t}):null,l]})]})})}export{h as Banner};
1
+ import{jsx as s,jsxs as i}from"react/jsx-runtime";import{LicenseGate as o,TMC_ENTITLEMENTS as t}from"@themodcraft/license-client";import{resolveAssetPath as c}from"@themodcraft/core-ui";import e from"./Banner.module.css";function f({children:l,className:n,imageUrl:m,subtitle:r,title:a}){return s(o,{required:t.proKit,children:i("div",{className:[e.banner,n].filter(Boolean).join(" "),children:[s("img",{alt:"",className:e.image,src:c(m)}),s("div",{className:e.shade}),i("div",{className:e.content,children:[a?s("h1",{className:e.title,children:a}):null,r?s("p",{className:e.subtitle,children:r}):null,l]})]})})}export{f as Banner};
@@ -0,0 +1 @@
1
+ .i{align-items:flex-end;background:#09090b;color:#fff;display:flex;isolation:isolate;min-height:320px;overflow:hidden;padding:1.5rem;position:relative;width:100%}.e{height:100%;inset:0;object-fit:cover;opacity:.7;position:absolute;width:100%;z-index:-2}.t{background:linear-gradient(to top,rgb(0 0 0 / .8),rgb(0 0 0 / .25),transparent);inset:0;position:absolute;z-index:-1}.n{max-width:48rem;position:relative;z-index:1}.o{font-size:clamp(2.25rem,7vw,3.75rem);font-weight:600;line-height:1;margin:0}.r{color:#e4e4e7;font-size:1rem;line-height:1.6;margin:1rem 0 0;max-width:36rem}@media(min-width:640px){.i{min-height:420px;padding:2.5rem}}
@@ -0,0 +1,7 @@
1
+ import type { ReactNode } from "react";
2
+ import type { BreadcrumbItem } from "./Breadcrumbs.types";
3
+ export declare function BreadcrumbProvider({ children, items }: {
4
+ children: ReactNode;
5
+ items: BreadcrumbItem[];
6
+ }): import("react").JSX.Element;
7
+ export declare function useBreadcrumbs(): BreadcrumbItem[] | null;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as o}from"react/jsx-runtime";import{createContext as n,useContext as u}from"react";const r=n(null);function s({children:e,items:t}){return o(r.Provider,{value:t,children:e})}function m(){return u(r)}export{s as BreadcrumbProvider,m as useBreadcrumbs};
@@ -0,0 +1,2 @@
1
+ import type { BreadcrumbsProps } from "./Breadcrumbs.types";
2
+ export declare function Breadcrumbs({ className, items, navLabel, separator, ...props }: BreadcrumbsProps): import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as r,Fragment as f,jsxs as i}from"react/jsx-runtime";import{LicenseGate as b,TMC_ENTITLEMENTS as N}from"@themodcraft/license-client";import e from"./Breadcrumbs.module.css";import{useBreadcrumbs as j}from"./BreadcrumbProvider";function _({className:o,items:m,navLabel:d="Breadcrumb",separator:u="/",...h}){const p=j(),s=m??p??[];return r(b,{required:N.proKit,children:r("nav",{"aria-label":d,className:[e.breadcrumbs,o].filter(Boolean).join(" "),...h,children:r("ol",{className:e.list,children:s.map((a,c)=>{const l=c===s.length-1,n=a.current??l,t=i(f,{children:[a.icon,r("span",{children:a.label})]});return i("li",{className:e.item,children:[a.href&&!n?r("a",{className:e.link,href:a.href,children:t}):r("span",{"aria-current":n?"page":void 0,className:[e.link,n?e.current:""].join(" "),children:t}),l?null:r("span",{"aria-hidden":"true",className:e.separator,children:u})]},`${String(a.label)}-${c}`)})})})})}export{_ as Breadcrumbs};
@@ -0,0 +1 @@
1
+ .e{color:var(--tmc-breadcrumb-text, var(--tmc-field-label-text, var(--tmc-color-text, #151821)));font-size:.88rem;width:100%}.t{align-items:center;display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}.a{align-items:center;display:inline-flex;gap:.35rem;min-width:0}.r{align-items:center;border-radius:6px;color:var(--tmc-breadcrumb-muted, color-mix(in srgb, var(--tmc-color-text, #151821) 88%, var(--tmc-color-surface, #f3f5f8)));display:inline-flex;gap:.35rem;min-height:2rem;padding:.2rem .35rem;text-decoration:none}.r:hover{background:var(--tmc-color-hover, color-mix(in srgb, var(--tmc-color-accent, #2454d6) 10%, transparent));color:var(--tmc-breadcrumb-text, var(--tmc-field-label-text, var(--tmc-color-text, #151821)))}.c{color:var(--tmc-breadcrumb-text, var(--tmc-field-label-text, var(--tmc-color-text, #151821)));font-weight:700}.o{color:var(--tmc-breadcrumb-separator, var(--tmc-breadcrumb-muted, color-mix(in srgb, var(--tmc-color-text, #151821) 74%, transparent)));user-select:none}
@@ -0,0 +1,12 @@
1
+ import type { HTMLAttributes, ReactNode } from "react";
2
+ export interface BreadcrumbItem {
3
+ current?: boolean;
4
+ href?: string;
5
+ icon?: ReactNode;
6
+ label: ReactNode;
7
+ }
8
+ export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
9
+ items?: BreadcrumbItem[];
10
+ navLabel?: string;
11
+ separator?: ReactNode;
12
+ }
@@ -0,0 +1,3 @@
1
+ export { Breadcrumbs } from "./Breadcrumbs";
2
+ export { BreadcrumbProvider, useBreadcrumbs } from "./BreadcrumbProvider";
3
+ export type { BreadcrumbItem, BreadcrumbsProps } from "./Breadcrumbs.types";
@@ -0,0 +1 @@
1
+ import{Breadcrumbs as m}from"./Breadcrumbs";import{BreadcrumbProvider as d,useBreadcrumbs as u}from"./BreadcrumbProvider";export{d as BreadcrumbProvider,m as Breadcrumbs,u as useBreadcrumbs};
@@ -0,0 +1,2 @@
1
+ import type { CodeFieldProps } from "./CodeField.types";
2
+ export declare function CodeField({ className, defaultValue, filename, formatJson, language, maxHeight, minHeight, onChange, onValueChange, readOnly, style, value, ...props }: CodeFieldProps): import("react").JSX.Element;
@@ -0,0 +1,3 @@
1
+ "use client";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{LicenseGate as J,TMC_ENTITLEMENTS as O}from"@themodcraft/license-client";import{useMemo as F,useRef as I,useState as m}from"react";import e from"./CodeField.module.css";function f(n){return typeof n=="number"?`${n}px`:n}function L(n){return JSON.stringify(JSON.parse(n),null,2)}function B({className:n,defaultValue:p="",filename:h="config.json",formatJson:N,language:y="json",maxHeight:g="28rem",minHeight:C="14rem",onChange:b,onValueChange:x,readOnly:T,style:j,value:s,...S}){const c=s!==void 0,[V,v]=m(p),[w,u]=m(!1),l=I(null),o=c?s:V,M=F(()=>Array.from({length:Math.max(1,o.split(`
2
+ `).length)},(t,i)=>i+1).join(`
3
+ `),[o]),_={"--tmc-code-field-max-height":f(g),"--tmc-code-field-min-height":f(C),...j};function d(t,i){c||v(t),x?.(t),i&&b?.(t,i)}async function k(){await navigator.clipboard.writeText(o),u(!0),window.setTimeout(()=>u(!1),1200)}function E(){try{d(L(o))}catch{return}}return r(J,{required:O.proKit,children:a("div",{className:[e.root,n].filter(Boolean).join(" "),style:_,children:[a("div",{className:e.header,children:[a("div",{className:e.meta,children:[r("span",{className:e.filename,children:h}),r("span",{className:e.language,children:y})]}),a("div",{className:e.actions,children:[N?r("button",{className:e.button,onClick:E,type:"button",children:"Format"}):null,r("button",{className:e.button,onClick:()=>{k()},type:"button",children:w?"Copied":"Copy"})]})]}),a("div",{className:e.editor,children:[r("pre",{"aria-hidden":"true",className:e.lines,ref:l,children:M}),r("textarea",{className:e.textarea,onChange:t=>d(t.target.value,t),onScroll:t=>{l.current&&(l.current.scrollTop=t.currentTarget.scrollTop)},readOnly:T,spellCheck:!1,value:o,...S})]})]})})}export{B as CodeField};
@@ -0,0 +1 @@
1
+ .r{background:#0f1722;border:1px solid #253247;border-radius:8px;color:#eef4ff;overflow:hidden;width:100%}.i{align-items:center;background:#172033;border-bottom:1px solid #253247;display:flex;gap:.75rem;justify-content:space-between;min-height:2.45rem;padding:.4rem .65rem}.n{align-items:center;display:inline-flex;gap:.55rem;min-width:0}.t{color:#d9e5f7;font-family:var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.a{color:#8fa2bf;font-size:.72rem;text-transform:uppercase}.m{display:inline-flex;gap:.4rem}.e{background:#24314a;border:1px solid #354561;border-radius:6px;color:#eef4ff;cursor:pointer;font:inherit;font-size:.74rem;min-height:1.75rem;padding:0 .55rem}.e:hover{background:#2d3b58}.d{display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden}.l{background:#111a29;border-right:1px solid #253247;color:#687995;font-family:var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.82rem;line-height:1.6;max-height:var(--tmc-code-field-max-height, 28rem);min-height:var(--tmc-code-field-min-height, 14rem);min-width:3rem;overflow:hidden;padding:.85rem .65rem;text-align:right;user-select:none}.o{background:transparent;border:0;color:#eef4ff;font-family:var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.82rem;line-height:1.6;max-height:var(--tmc-code-field-max-height, 28rem);min-height:var(--tmc-code-field-min-height, 14rem);outline:none;overflow:auto;padding:.85rem;resize:vertical;tab-size:2;white-space:pre;width:100%}.o::selection{background:#6ea3ff59}
@@ -0,0 +1,12 @@
1
+ import type { ChangeEvent, TextareaHTMLAttributes } from "react";
2
+ export interface CodeFieldProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
3
+ defaultValue?: string;
4
+ filename?: string;
5
+ formatJson?: boolean;
6
+ language?: string;
7
+ maxHeight?: number | string;
8
+ minHeight?: number | string;
9
+ onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
10
+ onValueChange?: (value: string) => void;
11
+ value?: string;
12
+ }
File without changes
@@ -0,0 +1,2 @@
1
+ export { CodeField } from "./CodeField";
2
+ export type { CodeFieldProps } from "./CodeField.types";
@@ -0,0 +1 @@
1
+ import{CodeField as d}from"./CodeField";export{d as CodeField};
@@ -1 +1 @@
1
- .i{position:relative;z-index:1;width:-webkit-fill-available;height:-webkit-fill-available;padding:1rem;margin:1rem;overflow:clip;color:#fff;background-color:inherit;border:2px solid #00000000;border-radius:0;scrollbar-color:var(--primary1) #00000000}.e{touch-action:pan-y}.o{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
1
+ .r{position:relative;z-index:1;width:-webkit-fill-available;height:-webkit-fill-available;padding:1rem;margin:1rem;overflow:clip;color:var(--primary-text, var(--tmc-color-text, #151821));background-color:var(--secondary-background, var(--tmc-color-surface-raised, #fbfcfe));border:2px solid #00000000;border-radius:0;scrollbar-color:var(--primary1) #00000000}.e{touch-action:pan-y}.o{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
@@ -0,0 +1,2 @@
1
+ import type { DataTableProps } from "./DataTable.types";
2
+ export declare function DataTable<Row extends Record<string, unknown>>({ caption, className, columns, density, emptyText, footer, getRowId, onPageChange, onSelectionChange, page, pageSize, renderRowDetails, rows, search, selectedKeys, selectionMode, style, theme, variant, ...props }: DataTableProps<Row>): import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as n,jsxs as s}from"react/jsx-runtime";import{LicenseGate as oe,TMC_ENTITLEMENTS as de}from"@themodcraft/license-client";import{Fragment as ue,useMemo as he,useState as C}from"react";import t from"./DataTable.module.css";function v(r,g){if(typeof g.accessor=="function")return g.accessor(r);const i=g.accessor??g.key;return r[i]}function $(r){return typeof r=="number"?r:String(r??"").toLowerCase()}function A(r){return r==="center"?t.alignCenter:r==="end"?t.alignEnd:t.alignStart}function ye({caption:r,className:g,columns:i,density:_="normal",emptyText:q="No rows found.",footer:T,getRowId:I,onPageChange:Q,onSelectionChange:F,page:G,pageSize:c,renderRowDetails:m,rows:S,search:j,selectedKeys:H,selectionMode:k="none",style:J,theme:u,variant:O="primary",...R}){const[B,U]=C(""),[p,W]=C(null),[X,Y]=C(1),[Z,D]=C([]),[z,ee]=C([]),V=!!j,te=typeof j=="object"?j.placeholder:"Search rows...",ne={"--tmc-table-background":u?.background,"--tmc-table-border":u?.border,"--tmc-table-cell-border":u?.cellBorder,"--tmc-table-header-background":u?.headerBackground,"--tmc-table-hover":u?.hover,"--tmc-table-muted-text":u?.mutedText,"--tmc-table-selected":u?.selected,"--tmc-table-text":u?.text,...J},o=G??X,d=H??Z,x=k!=="none",b=he(()=>{const e=B.trim().toLowerCase(),l=e?S.filter(h=>i.some(f=>String(v(h,f)??"").toLowerCase().includes(e))):S;if(!p)return l;const a=i.find(h=>h.key===p.key);return a?[...l].sort((h,f)=>{const y=$(v(h,a)),L=$(v(f,a)),M=y>L?1:y<L?-1:0;return p.direction==="asc"?M:-M}):l},[i,B,S,p]),K=c?Math.max(1,Math.ceil(b.length/c)):1,N=c?b.slice((o-1)*c,o*c):b,le=b.length===0?0:c?(o-1)*c+1:1,ae=c?Math.min(o*c,b.length):b.length;function P(e,l){return I?.(e,l)??String(e.id??l)}function re(e){e.sortable&&W(l=>l?.key!==e.key?{direction:"asc",key:e.key}:l.direction==="asc"?{direction:"desc",key:e.key}:null)}function w(e){const l=Math.max(1,Math.min(K,e));Y(l),Q?.(l)}function E(e){D(e),F?.(e)}function ce(e){if(k==="single"){E(d.includes(e)?[]:[e]);return}E(d.includes(e)?d.filter(l=>l!==e):[...d,e])}function se(){const e=N.map(P),l=e.every(a=>d.includes(a));E(l?d.filter(a=>!e.includes(a)):Array.from(new Set([...d,...e])))}function ie(e){ee(l=>l.includes(e)?l.filter(a=>a!==e):[...l,e])}return n(oe,{required:de.proKit,children:s("div",{className:[t.shell,t[`variant-${O}`],_==="compact"?t.compact:"",g].filter(Boolean).join(" "),style:ne,...R,children:[(r||V)&&s("div",{className:t.toolbar,children:[r?n("p",{className:t.caption,children:r}):n("span",{}),V?n("input",{"aria-label":"Search table",className:t.search,onChange:e=>U(e.target.value),placeholder:te,type:"search",value:B}):null]}),n("div",{className:t.viewport,children:s("table",{className:t.table,children:[n("thead",{children:s("tr",{children:[x?n("th",{className:[t.headerCell,t.selectionCell].join(" "),children:k==="multiple"?n("input",{"aria-label":"Select visible rows",checked:N.length>0&&N.map(P).every(e=>d.includes(e)),onChange:se,type:"checkbox"}):null}):null,m?n("th",{className:[t.headerCell,t.selectionCell].join(" ")}):null,i.map(e=>n("th",{className:[t.headerCell,A(e.align)].join(" "),style:{width:e.width},children:e.sortable?s("button",{className:t.sortButton,onClick:()=>re(e),type:"button",children:[e.header,n("span",{"aria-hidden":"true",children:p?.key===e.key?p.direction==="asc"?"\u2191":"\u2193":"\u2195"})]}):e.header},e.key))]})}),n("tbody",{children:N.length>0?N.map((e,l)=>{const a=P(e,l),h=d.includes(a),f=z.includes(a);return s(ue,{children:[s("tr",{className:t.row,"data-selected":h?"true":void 0,children:[x?n("td",{className:[t.cell,t.selectionCell].join(" "),children:n("input",{"aria-label":`Select row ${l+1}`,checked:h,onChange:()=>ce(a),type:k==="single"?"radio":"checkbox"})}):null,m?n("td",{className:[t.cell,t.selectionCell].join(" "),children:n("button",{"aria-expanded":f,className:t.expandButton,onClick:()=>ie(a),type:"button",children:f?"\u2212":"+"})}):null,i.map(y=>n("td",{className:[t.cell,A(y.align)].join(" "),children:v(e,y)},y.key))]},a),m&&f?n("tr",{className:t.detailsRow,children:n("td",{className:t.detailsCell,colSpan:i.length+(x?1:0)+1,children:m(e)})}):null]},a)}):n("tr",{children:n("td",{className:t.empty,colSpan:i.length+(x?1:0)+(m?1:0),children:q})})})]})}),(T||c)&&s("div",{className:t.footer,children:[n("div",{children:T??`${le} to ${ae} of ${b.length} results`}),c?s("div",{className:t.pagination,children:[n("button",{className:t.pageButton,disabled:o<=1,onClick:()=>w(o-1),type:"button",children:"Prev"}),s("span",{className:t.pageStatus,children:[o," / ",K]}),n("button",{className:t.pageButton,disabled:o>=K,onClick:()=>w(o+1),type:"button",children:"Next"})]}):null]})]})})}export{ye as DataTable};
@@ -0,0 +1 @@
1
+ .i{background:var(--tmc-table-background, var(--tmc-color-surface-raised, #fbfcfe));border:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));border-radius:8px;color:var(--tmc-table-text, var(--tmc-field-label-text, var(--tmc-color-text, #151821)));overflow:hidden;width:100%}.t{background:transparent;border-color:transparent}.t .d,.t .c{border:0;padding-left:0;padding-right:0}.t .o{border-bottom:0;border-radius:8px}.r{--tmc-table-background: rgb(15 15 15 / .34);--tmc-table-border: #000000;--tmc-table-cell-border: rgb(255 255 255 / .12);--tmc-table-header-background: rgb(0 0 0 / .42);--tmc-table-hover: rgb(255 255 255 / .09);--tmc-table-muted-text: #d3c8ad;--tmc-table-selected: rgb(255 255 255 / .13);--tmc-table-text: #f7f4e9;background:var(--tmc-table-background);backdrop-filter:blur(10px);border:1px solid var(--tmc-table-border);color:var(--tmc-table-text)}.r .d,.r .c{border-color:var(--tmc-table-cell-border)}.r .l,.r .o,.r .e{color:var(--tmc-table-text)}.r .o{background:var(--tmc-table-header-background);border-bottom-color:var(--tmc-table-cell-border);font-family:Trajan Pro,Georgia,serif}.r .e{border-bottom-color:var(--tmc-table-cell-border)}.r .a:hover .e,.r .a[data-selected=true] .e{background:var(--tmc-table-hover)}.r .b{background:#0000004d;border-color:var(--tmc-table-cell-border);color:var(--tmc-table-text)}.d{align-items:center;border-bottom:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));display:flex;gap:.75rem;justify-content:space-between;padding:.85rem}.l{font-size:.95rem;font-weight:700;margin:0}.b{background:var(--tmc-table-header-background, var(--tmc-color-surface, #f6f7f9));border:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));border-radius:6px;color:var(--tmc-table-text, var(--tmc-field-label-text, var(--tmc-color-text, #151821)));font:inherit;min-height:2.25rem;min-width:12rem;padding:0 .7rem}.m{overflow:auto;width:100%}.g{border-collapse:collapse;min-width:100%;table-layout:auto}.o{background:var(--tmc-table-header-background, var(--tmc-color-surface, #f6f7f9));border-bottom:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));color:var(--tmc-table-text, var(--tmc-field-label-text, var(--tmc-color-text, #151821)));font-size:.78rem;font-weight:800;letter-spacing:.02em;padding:.75rem .85rem;text-align:left;white-space:nowrap}.v{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;font-weight:inherit;gap:.35rem;padding:0}.e{border-bottom:1px solid var(--tmc-table-cell-border, color-mix(in srgb, var(--tmc-color-border, #d7dde5) 70%, transparent));font-size:.9rem;padding:.85rem;vertical-align:middle}.s .e{font-size:.84rem;padding:.55rem .75rem}.a:hover .e{background:var(--tmc-table-hover, var(--tmc-color-hover, color-mix(in srgb, var(--tmc-color-accent, #2454d6) 7%, transparent)))}.a[data-selected=true] .e{background:var(--tmc-table-selected, color-mix(in srgb, var(--tmc-color-accent, #2454d6) 12%, transparent))}.f{text-align:left}.p{text-align:center}.u{text-align:right}.x{color:var(--tmc-table-muted-text, var(--tmc-color-text-muted, #5f6b7a));padding:1.25rem;text-align:center}.h{text-align:center;width:2.75rem}.k{align-items:center;background:var(--tmc-table-header-background, var(--tmc-color-surface, #f6f7f9));border:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));border-radius:999px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;font-weight:800;height:1.65rem;justify-content:center;padding:0;width:1.65rem}.w{background:var(--tmc-table-hover, color-mix(in srgb, var(--tmc-color-accent, #2454d6) 6%, transparent));border-bottom:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));padding:1rem}.c{align-items:center;border-top:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));color:var(--tmc-table-muted-text, var(--tmc-color-text-muted, #5f6b7a));display:flex;font-size:.85rem;gap:1rem;justify-content:space-between;padding:.75rem .85rem}.y{align-items:center;display:inline-flex;gap:.5rem}.n{background:var(--tmc-table-header-background, var(--tmc-color-surface, #f6f7f9));border:1px solid var(--tmc-table-border, var(--tmc-color-border, #d7dde5));border-radius:6px;color:inherit;cursor:pointer;font:inherit;min-height:2rem;padding:0 .7rem}.n:disabled{cursor:not-allowed;opacity:.5}.z{color:inherit;font-variant-numeric:tabular-nums}
@@ -0,0 +1,53 @@
1
+ import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
2
+ export type DataTableAlign = "center" | "end" | "start";
3
+ export type DataTableSelectionMode = "multiple" | "none" | "single";
4
+ export type DataTableVariant = "chronos" | "primary" | "secondary";
5
+ export interface DataTableTheme {
6
+ background?: string;
7
+ border?: string;
8
+ cellBorder?: string;
9
+ headerBackground?: string;
10
+ hover?: string;
11
+ mutedText?: string;
12
+ selected?: string;
13
+ text?: string;
14
+ }
15
+ export interface DataTableColumn<Row extends Record<string, unknown>> {
16
+ accessor?: keyof Row | ((row: Row) => ReactNode);
17
+ align?: DataTableAlign;
18
+ header: ReactNode;
19
+ key: string;
20
+ sortable?: boolean;
21
+ width?: number | string;
22
+ }
23
+ export interface DataTableProps<Row extends Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
24
+ caption?: ReactNode;
25
+ columns: DataTableColumn<Row>[];
26
+ density?: "compact" | "normal";
27
+ emptyText?: ReactNode;
28
+ footer?: ReactNode;
29
+ getRowId?: (row: Row, index: number) => string;
30
+ onPageChange?: (page: number) => void;
31
+ onSelectionChange?: (keys: string[]) => void;
32
+ page?: number;
33
+ pageSize?: number;
34
+ renderRowDetails?: (row: Row) => ReactNode;
35
+ rows: Row[];
36
+ search?: boolean | {
37
+ placeholder?: string;
38
+ };
39
+ selectedKeys?: string[];
40
+ selectionMode?: DataTableSelectionMode;
41
+ theme?: DataTableTheme;
42
+ variant?: DataTableVariant;
43
+ }
44
+ export interface DataTableThemeStyle extends CSSProperties {
45
+ "--tmc-table-background"?: string;
46
+ "--tmc-table-border"?: string;
47
+ "--tmc-table-cell-border"?: string;
48
+ "--tmc-table-header-background"?: string;
49
+ "--tmc-table-hover"?: string;
50
+ "--tmc-table-muted-text"?: string;
51
+ "--tmc-table-selected"?: string;
52
+ "--tmc-table-text"?: string;
53
+ }
File without changes
@@ -0,0 +1,2 @@
1
+ export { DataTable } from "./DataTable";
2
+ export type { DataTableAlign, DataTableColumn, DataTableProps, DataTableSelectionMode, DataTableVariant } from "./DataTable.types";
@@ -0,0 +1 @@
1
+ import{DataTable as o}from"./DataTable";export{o as DataTable};
@@ -1,2 +1,2 @@
1
1
  import type { NavbarProps } from "./Navbar.types";
2
- export declare function Navbar({ auth, brand, className, items, maxDesktopItems, search, sidebar, }: NavbarProps): import("react").JSX.Element;
2
+ export declare function Navbar({ auth, brand, className, followTheme, items, maxDesktopItems, search, sidebar, }: NavbarProps): import("react").JSX.Element;
@@ -1 +1 @@
1
- "use client";import{jsx as r,jsxs as p,Fragment as H}from"react/jsx-runtime";import{resolveAssetPath as Q}from"@themodcraft/core-ui";import{LicenseGate as X,TMC_ENTITLEMENTS as Y}from"@themodcraft/license-client";import{useCallback as ee,useEffect as L,useMemo as ne,useRef as I,useState as C}from"react";import{decodeJwtUserProfile as re,getProfileInitials as te,resolveProfileImage as ie}from"../../auth";import e from"./style_navbar.module.css";function w(...n){return n.filter(Boolean).join(" ")}function O(n){return n.id??`${n.label}-${n.href??"group"}`}function K(n){return n.href??"#"}function M(n){return n.external?"_blank":void 0}function R(n){return n.external?"noreferrer":void 0}function le(n){return n instanceof Element?n:n instanceof Node?n.parentElement:null}function oe({open:n=!1}){return r("svg",{className:w(e["ac-gn-ic"],n?e["ac-gn-ic-open"]:void 0),viewBox:"0 0 60 40",children:p("g",{stroke:"var(--primary-text)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"4",children:[r("path",{className:e["ac-gn-ic-top-line"],d:"M10,10 L50,10 Z"}),r("path",{className:e["ac-gn-ic-middle-line"],d:"M10,20 L50,20 Z"}),r("path",{className:e["ac-gn-ic-bottom-line"],d:"M10,30 L50,30 Z"})]})})}function F({brand:n}){return n.logoSrc?r("img",{alt:n.label,src:Q(n.logoSrc),style:{height:"100%",objectFit:"contain",width:"100%"}}):r("span",{"aria-label":n.label,title:n.label,children:n.mark??n.label.slice(0,3)})}function ae({brand:n}){const i=r(F,{brand:n});return r("div",{className:e["ac-gn-logo-container"],children:r("div",{className:e["ac-gn-logo-cont"],children:n.href?r("a",{href:n.href,children:i}):i})})}function W({classPrefix:n,items:i,openDropdownKey:s,onDropdownKeyChange:c,variant:a}){const l=I(null),b=a==="sidebar"?"sc-gn-item":a==="dropdown"?"ac-dn-item":"ac-gn-item",g=a==="sidebar"?"sc-gn-link":a==="dropdown"?"ac-dn-link":"ac-gn-link";L(()=>()=>{l.current&&clearTimeout(l.current)},[]);function N(){l.current&&(clearTimeout(l.current),l.current=null)}function h(u){N(),c?.(u)}function v(){N(),c?.(null)}function y(){N(),l.current=setTimeout(()=>{c?.(null),l.current=null},180)}function o(u,D){return u.map((t,k)=>{const d=`${D}-${k}-${O(t)}`,f=!!t.children?.length;return p("li",{className:e["ac-gn-sub-item"],children:[r("a",{className:e["ac-gn-sub-link"],href:K(t),rel:R(t),target:M(t),children:t.label}),f?r("ul",{className:w(e["ac-gn-sub-list"],a==="sidebar"?e.navSidebarSubList:void 0),children:o(t.children??[],d)}):null]},d)})}function S(u,D){return u.map((t,k)=>{const d=`${D}-${k}-${O(t)}`,f=!!t.children?.length;return p("li",{className:e["ac-gn-sub-item"],role:"none",children:[p("a",{className:e["ac-gn-sub-link"],href:K(t),onClick:m=>{t.href||m.preventDefault()},rel:R(t),role:"menuitem",target:M(t),children:[r("span",{children:t.label}),f?r("span",{"aria-hidden":"true",className:e.navSubHint,children:"\u203A"}):null]}),f?r("ul",{className:e.navDropdownNestedList,children:S(t.children??[],d)}):null]},d)})}return r(H,{children:i.map((u,D)=>{const t=`${a}-${D}-${O(u)}`,k=!!u.children?.length,d=a==="desktop"&&k,f=d&&s===t;return p("li",{className:w(e[b],a!=="dropdown"?e[`${n}-gn-item-menu`]:void 0),onBlur:d?m=>{m.currentTarget.contains(m.relatedTarget)||v()}:void 0,onKeyDown:d?m=>{m.key==="Escape"&&v()}:void 0,onPointerEnter:d?()=>h(t):void 0,onPointerLeave:d?y:void 0,children:[p("a",{"aria-current":u.current?"page":void 0,"aria-expanded":d?f:void 0,"aria-haspopup":d?"menu":void 0,className:w(e[g],d?e.navDropdownTrigger:void 0),"data-state":f?"open":"closed",href:K(u),onClick:d?m=>{m.preventDefault(),m.stopPropagation(),f?v():h(t)}:void 0,onKeyDown:d?m=>{(m.key==="Enter"||m.key===" "||m.key==="ArrowDown")&&(m.preventDefault(),h(t))}:void 0,rel:R(u),target:M(u),children:[u.label,d?r("span",{"aria-hidden":"true",className:e.navChevron,children:"\u2304"}):null]}),k?d?r("ul",{className:w(e["ac-gn-sub-list"],e.navDropdownContent,f?e["ac-gn-sub-list-open"]:void 0),"data-state":f?"open":"closed",role:"menu",children:S(u.children??[],t)}):r("ul",{className:w(e["ac-gn-sub-list"],a==="sidebar"?e.navSidebarSubList:void 0),children:o(u.children??[],t)}):null]},t)})})}function Z({brand:n,enabled:i,isOpen:s,logoAsTrigger:c,onToggle:a,setToggleButton:l}){const b=I(null),g=I(!1);L(()=>{l(b.current)},[l]);function N(o){o.pointerType==="mouse"&&o.button!==0||(o.preventDefault(),o.stopPropagation(),g.current=!0,a())}function h(o){o.preventDefault(),o.stopPropagation()}function v(o){if(o.preventDefault(),o.stopPropagation(),g.current){g.current=!1;return}a()}function y(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),o.stopPropagation(),g.current=!0,a())}return i?r("li",{className:w(e["ac-gn-item"],e["ac-gn-item-menu"],e["ac-gn-Sidebar"]),children:r("a",{"aria-expanded":s,"aria-label":s?"Close navigation menu":"Open navigation menu",className:w(e.openSidebarLink,e["ac-gn-link"],e["ac-gn-link-Sidebar"]),"data-navbar-toggle":"true",href:"#",onClick:v,onKeyDown:y,onMouseDown:h,onPointerDown:N,ref:b,role:"button",children:c&&n&&!s?r("span",{className:e.navMenuBrandIcon,children:r(F,{brand:n})}):r(oe,{open:s})})}):null}function se({brand:n,items:i,logoAsTrigger:s,maxDesktopItems:c,onOverflowItemsChange:a,sidebarEnabled:l,sidebarOpen:b,setToggleButton:g,toggleSidebar:N}){const h=I(null),v=I(null),[y,o]=C(c??i.length),[S,u]=C(!1),[D,t]=C(null),k=ee(()=>{const f=h.current,m=v.current;if(!f||!m)return;const x=Array.from(m.children),_=x[0]?.offsetWidth??0,$=f.clientWidth,T=Math.min(c??i.length,i.length),j=x.slice(1,T+1).map(P=>P.offsetWidth),V=j.reduce((P,E)=>P+E,0),q=T<i.length,G=V>$-(l?_:0),A=q||G,J=Math.max($-(A||l?_:0)-8,0);let z=0,B=0;if(!A){u(!1),o(T),a([]);return}for(let P=0;P<T;P+=1){const E=j[P];if(!E)break;const U=z+E;if(U>J)break;z=U,B+=1}u(!0),o(B),a(i.slice(B))},[i,c,a,l]);L(()=>{if(k(),!h.current||typeof ResizeObserver>"u")return window.addEventListener("resize",k),()=>window.removeEventListener("resize",k);const f=new ResizeObserver(k);return f.observe(h.current),()=>f.disconnect()},[k]),L(()=>{if(!D)return;function f(m){const x=m.target;x instanceof Node&&h.current?.contains(x)||t(null)}return window.addEventListener("pointerdown",f),()=>window.removeEventListener("pointerdown",f)},[D]),L(()=>{t(null)},[y]);const d=i.slice(0,y);return r("nav",{className:e["ac-globalnav"],onKeyDown:f=>{f.key==="Escape"&&t(null)},ref:h,children:p("div",{className:e["ac-gn-content"],children:[p("ul",{className:e["ac-gn-list"],children:[r(Z,{brand:n,enabled:l||S,isOpen:b,logoAsTrigger:s,onToggle:()=>{t(null),N()},setToggleButton:g}),r(W,{classPrefix:"ac",items:d,onDropdownKeyChange:t,openDropdownKey:D,variant:"desktop"})]}),p("ul",{"aria-hidden":"true",className:w(e["ac-gn-list"],e["ac-gn-measure-list"]),ref:v,children:[r(Z,{brand:n,enabled:!0,isOpen:!1,logoAsTrigger:s,onToggle:()=>{},setToggleButton:()=>{}}),r(W,{classPrefix:"ac",items:c?i.slice(0,c):i,variant:"desktop"})]})]})})}function ce({display:n="field",enabled:i,placeholder:s}){return i?n==="icon"?r("button",{"aria-label":s??"Search",className:w(e.search_frame,e.searchIconOnly),type:"button",children:r("span",{"aria-hidden":"true",children:"\u2315"})}):p("div",{className:e.search_frame,children:[r("div",{className:w(e.search_icon,e.search_spacing),children:r("span",{"aria-hidden":"true",children:"\u2315"})}),r("div",{className:w(e.search,e.search_spacing),children:r("input",{"aria-label":"Search field",autoComplete:"on",className:e.search_input,placeholder:s??"Search..."})})]}):null}function de(n){const[i,s]=C(n?.profile??null),[c,a]=C(n?.profile?.image??null);return L(()=>{let l=!1;async function b(){let g=n?.profile??null;if(!g&&n?.tokenStorageKey&&typeof window<"u"){const h=window.localStorage.getItem(n.tokenStorageKey);g=h?re(h):null}const N=await ie(g,{gravatar:n?.gravatar,provider:n?.profileImageProvider??"explicit"});l||(s(g),a(N))}return b(),()=>{l=!0}},[n]),{profile:i,profileImage:c}}function ue({auth:n}){const i=n?.enabled??!1,{profile:s,profileImage:c}=de(n);if(L(()=>{typeof window<"u"&&window.localStorage.setItem("loginReferrer",window.location.href)},[]),!i)return null;function a(l){if(n?.onLogout){l.preventDefault(),n.onLogout();return}n?.tokenStorageKey&&typeof window<"u"&&window.localStorage.removeItem(n.tokenStorageKey)}return p("div",{className:e["nav-login"],children:[r("div",{className:e["account-img"],children:c?r("img",{alt:s?.name??s?.username??"User profile",src:c}):r("span",{"aria-hidden":"true",children:te(s)||"\u25EF"})}),r("div",{className:e["login-menu"],children:r("ul",{className:e["login-nav"],children:s?p(H,{children:[r("li",{className:e["login-item"],children:r("a",{className:e["login-item-link"],href:n?.settingsUrl??"/account/settings",children:"Settings"})}),r("li",{className:e["login-item"],children:r("a",{className:e["login-item-link"],href:n?.logoutUrl??"#",onClick:a,children:"Logout"})})]}):r("li",{className:e["login-item"],children:r("a",{className:e["login-item-link"],href:n?.loginUrl??"/login",children:"Login"})})})})]})}function fe({brand:n,enabled:i,items:s,mode:c,onClose:a,open:l,sidebar:b,toggleButton:g}){const N=I(null);if(L(()=>{function v(y){if(y.pointerType==="mouse"&&y.button!==0)return;const o=y.target,S=le(o);!(o instanceof Node)||S?.closest("[data-navbar-toggle='true']")||l&&!N.current?.contains(o)&&!g?.contains(o)&&y.button===0&&a()}return window.addEventListener("pointerdown",v),()=>window.removeEventListener("pointerdown",v)},[a,l,g]),!i)return null;const h=c==="overflow"?s:b?.items?.length?b.items:s;return r("aside",{className:e["sidebar-sec"],children:r("div",{className:w(e.sidebar,c==="overflow"?e.sidebarMobile:void 0,l?e.open:void 0),ref:N,children:p("ul",{className:e["sc-gn-list"],children:[r("li",{className:e["sc-gn-item"],children:r("span",{className:e["sc-gn-link"],children:b?.title??n.label})}),r(W,{classPrefix:"sc",items:h,variant:"sidebar"}),r("li",{className:w(e["ac-gn-item"],e["ac-gn-item-menu"],e["ac-gn-Sidebar"]),children:p("a",{className:w(e.closeButton,e["sc-gn-link"]),href:"#",onClick:v=>{v.preventDefault(),a()},children:[r("span",{className:e.closeButtonIcon,"aria-hidden":"true",children:"\xD7"}),r("span",{children:b?.closeLabel??"Close Sidebar"})]})})]})})})}function Ne({auth:n,brand:i,className:s,items:c,maxDesktopItems:a,search:l,sidebar:b}){const[g,N]=C(!1),[h,v]=C(null),[y,o]=C([]),S=!!b?.enabled,u=y.length>0,D=i.logoPosition==="menu",t=S||D,k=ne(()=>c,[c]);return p(X,{required:Y.proKit,children:[p("header",{className:w(e["header-sec"],s),children:[D?null:r(ae,{brand:i}),p("div",{className:e.header_bar,children:[r(se,{brand:i,items:k,logoAsTrigger:D,maxDesktopItems:a,onOverflowItemsChange:o,sidebarEnabled:t,setToggleButton:v,sidebarOpen:g,toggleSidebar:()=>N(d=>!d)}),p("div",{className:e["search-login-aligner"],children:[r(ce,{display:l?.display,enabled:l?.enabled,placeholder:l?.placeholder}),r(ue,{auth:n})]})]})]}),r(fe,{brand:i,enabled:t||u,items:k,mode:u?"overflow":"sidebar",onClose:()=>N(!1),open:g,sidebar:b,toggleButton:h})]})}export{Ne as Navbar};
1
+ "use client";import{jsx as t,jsxs as g,Fragment as H}from"react/jsx-runtime";import{resolveAssetPath as ne}from"@themodcraft/core-ui";import{LicenseGate as te,TMC_ENTITLEMENTS as re}from"@themodcraft/license-client";import{useCallback as oe,useEffect as D,useMemo as le,useRef as I,useState as E}from"react";import{decodeJwtUserProfile as ie,getProfileInitials as ae,resolveProfileImage as se}from"../../auth";import n from"./style_navbar.module.css";const M=["system","light","dark"],V="tmc-nexus-theme:mode",Z={dark:{"--border-color":"#3c3c3c","--cta-color":"#30FA00","--hover-overlay":"rgba(0, 0, 0, 0.49)","--link-color":"#005EFE","--primary-background":"#212121","--primary-text":"#FFFFFF","--secondary-background":"#161616","--secondary-text":"#828282","--tertiary-text":"#4A4A4A","--tmc-color-accent":"#6ea3ff","--tmc-color-accent-text":"#10151f","--tmc-color-border":"#333b48","--tmc-color-surface":"#181b22","--tmc-color-surface-muted":"#232832","--tmc-color-surface-raised":"#20242d","--tmc-color-text":"#f2f5f8","--tmc-color-text-muted":"#aab4c0"},light:{"--border-color":"#d7dde5","--cta-color":"#005EFE","--hover-overlay":"rgba(0, 94, 254, 0.08)","--link-color":"#0044BD","--primary-background":"#f3f5f8","--primary-text":"#151821","--secondary-background":"#fbfcfe","--secondary-text":"#5f6b7a","--tertiary-text":"#7a8795","--tmc-color-accent":"#2454d6","--tmc-color-accent-text":"#f7faff","--tmc-color-border":"#d7dde5","--tmc-color-surface":"#f3f5f8","--tmc-color-surface-muted":"#e7ebf0","--tmc-color-surface-raised":"#fbfcfe","--tmc-color-text":"#151821","--tmc-color-text-muted":"#5f6b7a"}};function y(...e){return e.filter(Boolean).join(" ")}function O(e){return e.id??`${e.label}-${e.href??"group"}`}function B(e){return e.href??"#"}function A(e){return e.external?"_blank":void 0}function F(e){return e.external?"noreferrer":void 0}function ce(e){return e instanceof Element?e:e instanceof Node?e.parentElement:null}function de({open:e=!1}){return t("svg",{className:y(n["ac-gn-ic"],e?n["ac-gn-ic-open"]:void 0),viewBox:"0 0 60 40",children:g("g",{stroke:"var(--primary-text)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"4",children:[t("path",{className:n["ac-gn-ic-top-line"],d:"M10,10 L50,10 Z"}),t("path",{className:n["ac-gn-ic-middle-line"],d:"M10,20 L50,20 Z"}),t("path",{className:n["ac-gn-ic-bottom-line"],d:"M10,30 L50,30 Z"})]})})}function J({brand:e}){return e.logoSrc?t("img",{alt:e.label,src:ne(e.logoSrc),style:{height:"100%",objectFit:"contain",width:"100%"}}):t("span",{"aria-label":e.label,title:e.label,children:e.mark??e.label.slice(0,3)})}function ue({brand:e}){const r=t(J,{brand:e});return t("div",{className:n["ac-gn-logo-container"],children:t("div",{className:n["ac-gn-logo-cont"],children:e.href?t("a",{href:e.href,children:r}):r})})}function R({classPrefix:e,items:r,openDropdownKey:s,onDropdownKeyChange:c,variant:l}){const d=I(null),v=l==="sidebar"?"sc-gn-item":l==="dropdown"?"ac-dn-item":"ac-gn-item",h=l==="sidebar"?"sc-gn-link":l==="dropdown"?"ac-dn-link":"ac-gn-link";D(()=>()=>{d.current&&clearTimeout(d.current)},[]);function N(){d.current&&(clearTimeout(d.current),d.current=null)}function a(m){N(),c?.(m)}function p(){N(),c?.(null)}function w(){N(),d.current=setTimeout(()=>{c?.(null),d.current=null},180)}function i(m,x){return m.map((o,k)=>{const u=`${x}-${k}-${O(o)}`,f=!!o.children?.length;return g("li",{className:n["ac-gn-sub-item"],children:[t("a",{className:n["ac-gn-sub-link"],href:B(o),rel:F(o),target:A(o),children:o.label}),f?t("ul",{className:y(n["ac-gn-sub-list"],l==="sidebar"?n.navSidebarSubList:void 0),children:i(o.children??[],u)}):null]},u)})}function S(m,x){return m.map((o,k)=>{const u=`${x}-${k}-${O(o)}`,f=!!o.children?.length;return g("li",{className:n["ac-gn-sub-item"],role:"none",children:[g("a",{className:n["ac-gn-sub-link"],href:B(o),onClick:b=>{o.href||b.preventDefault()},rel:F(o),role:"menuitem",target:A(o),children:[t("span",{children:o.label}),f?t("span",{"aria-hidden":"true",className:n.navSubHint,children:"\u203A"}):null]}),f?t("ul",{className:n.navDropdownNestedList,children:S(o.children??[],u)}):null]},u)})}return t(H,{children:r.map((m,x)=>{const o=`${l}-${x}-${O(m)}`,k=!!m.children?.length,u=l==="desktop"&&k,f=u&&s===o;return g("li",{className:y(n[v],l!=="dropdown"?n[`${e}-gn-item-menu`]:void 0),onBlur:u?b=>{b.currentTarget.contains(b.relatedTarget)||p()}:void 0,onKeyDown:u?b=>{b.key==="Escape"&&p()}:void 0,onPointerEnter:u?()=>a(o):void 0,onPointerLeave:u?w:void 0,children:[g("a",{"aria-current":m.current?"page":void 0,"aria-expanded":u?f:void 0,"aria-haspopup":u?"menu":void 0,className:y(n[h],u?n.navDropdownTrigger:void 0),"data-state":f?"open":"closed",href:B(m),onClick:u?b=>{b.preventDefault(),b.stopPropagation(),f?p():a(o)}:void 0,onKeyDown:u?b=>{(b.key==="Enter"||b.key===" "||b.key==="ArrowDown")&&(b.preventDefault(),a(o))}:void 0,rel:F(m),target:A(m),children:[m.label,u?t("span",{"aria-hidden":"true",className:n.navChevron,children:"\u2304"}):null]}),k?u?t("ul",{className:y(n["ac-gn-sub-list"],n.navDropdownContent,f?n["ac-gn-sub-list-open"]:void 0),"data-state":f?"open":"closed",role:"menu",children:S(m.children??[],o)}):t("ul",{className:y(n["ac-gn-sub-list"],l==="sidebar"?n.navSidebarSubList:void 0),children:i(m.children??[],o)}):null]},o)})})}function q({brand:e,enabled:r,isOpen:s,logoAsTrigger:c,onToggle:l,setToggleButton:d}){const v=I(null),h=I(!1);D(()=>{d(v.current)},[d]);function N(i){i.pointerType==="mouse"&&i.button!==0||(i.preventDefault(),i.stopPropagation(),h.current=!0,l())}function a(i){i.preventDefault(),i.stopPropagation()}function p(i){if(i.preventDefault(),i.stopPropagation(),h.current){h.current=!1;return}l()}function w(i){(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),i.stopPropagation(),h.current=!0,l())}return r?t("li",{className:y(n["ac-gn-item"],n["ac-gn-item-menu"],n["ac-gn-Sidebar"]),children:t("a",{"aria-expanded":s,"aria-label":s?"Close navigation menu":"Open navigation menu",className:y(n.openSidebarLink,n["ac-gn-link"],n["ac-gn-link-Sidebar"]),"data-navbar-toggle":"true",href:"#",onClick:p,onKeyDown:w,onMouseDown:a,onPointerDown:N,ref:v,role:"button",children:c&&e&&!s?t("span",{className:n.navMenuBrandIcon,children:t(J,{brand:e})}):t(de,{open:s})})}):null}function fe({brand:e,items:r,logoAsTrigger:s,maxDesktopItems:c,onOverflowItemsChange:l,sidebarEnabled:d,sidebarOpen:v,setToggleButton:h,toggleSidebar:N}){const a=I(null),p=I(null),[w,i]=E(c??r.length),[S,m]=E(!1),[x,o]=E(null),k=oe(()=>{const f=a.current,b=p.current;if(!f||!b)return;const T=Array.from(b.children),W=T[0]?.offsetWidth??0,_=f.clientWidth,C=Math.min(c??r.length,r.length),$=T.slice(1,C+1).map(L=>L.offsetWidth),Q=$.reduce((L,P)=>L+P,0),X=C<r.length,Y=Q>_-(d?W:0),j=X||Y,ee=Math.max(_-(j||d?W:0)-8,0);let z=0,K=0;if(!j){m(!1),i(C),l([]);return}for(let L=0;L<C;L+=1){const P=$[L];if(!P)break;const U=z+P;if(U>ee)break;z=U,K+=1}m(!0),i(K),l(r.slice(K))},[r,c,l,d]);D(()=>{if(k(),!a.current||typeof ResizeObserver>"u")return window.addEventListener("resize",k),()=>window.removeEventListener("resize",k);const f=new ResizeObserver(k);return f.observe(a.current),()=>f.disconnect()},[k]),D(()=>{if(!x)return;function f(b){const T=b.target;T instanceof Node&&a.current?.contains(T)||o(null)}return window.addEventListener("pointerdown",f),()=>window.removeEventListener("pointerdown",f)},[x]),D(()=>{o(null)},[w]);const u=r.slice(0,w);return t("nav",{className:n["ac-globalnav"],onKeyDown:f=>{f.key==="Escape"&&o(null)},ref:a,children:g("div",{className:n["ac-gn-content"],children:[g("ul",{className:n["ac-gn-list"],children:[t(q,{brand:e,enabled:d||S,isOpen:v,logoAsTrigger:s,onToggle:()=>{o(null),N()},setToggleButton:h}),t(R,{classPrefix:"ac",items:u,onDropdownKeyChange:o,openDropdownKey:x,variant:"desktop"})]}),g("ul",{"aria-hidden":"true",className:y(n["ac-gn-list"],n["ac-gn-measure-list"]),ref:p,children:[t(q,{brand:e,enabled:!0,isOpen:!1,logoAsTrigger:s,onToggle:()=>{},setToggleButton:()=>{}}),t(R,{classPrefix:"ac",items:c?r.slice(0,c):r,variant:"desktop"})]})]})})}function me({display:e="field",enabled:r,placeholder:s}){return r?e==="icon"?t("button",{"aria-label":s??"Search",className:y(n.search_frame,n.searchIconOnly),type:"button",children:t("span",{"aria-hidden":"true",children:"\u2315"})}):g("div",{className:n.search_frame,children:[t("div",{className:y(n.search_icon,n.search_spacing),children:t("span",{"aria-hidden":"true",children:"\u2315"})}),t("div",{className:y(n.search,n.search_spacing),children:t("input",{"aria-label":"Search field",autoComplete:"on",className:n.search_input,placeholder:s??"Search..."})})]}):null}function ge(e){const[r,s]=E(e?.profile??null),[c,l]=E(e?.profile?.image??null);return D(()=>{let d=!1;async function v(){let a=e?.profile??null,p=a?.image??null;if(!a&&e?.storageKey&&typeof window<"u")try{const w=window.localStorage.getItem(e.storageKey),i=w?JSON.parse(w):null;a=i?.user??null,p=i?.profileImage??a?.image??null}catch{a=null,p=null}if(!a&&e?.tokenStorageKey&&typeof window<"u"){const w=window.localStorage.getItem(e.tokenStorageKey);a=w?ie(w):null,p=a?.image??null}p=p??await se(a,{gravatar:e?.gravatar,provider:e?.profileImageProvider??"explicit"}),d||(s(a),l(p))}v();function h(a){a.key===e?.storageKey&&v()}function N(){v()}return window.addEventListener("storage",h),window.addEventListener("tmc:nexus-auth",N),()=>{d=!0,window.removeEventListener("storage",h),window.removeEventListener("tmc:nexus-auth",N)}},[e]),{profile:r,profileImage:c}}function he(){if(typeof window>"u")return"system";const e=window.localStorage.getItem(V);return e==="light"||e==="dark"||e==="system"?e:"system"}function G(e){if(typeof document>"u")return;const r=document.documentElement;if(r.setAttribute("data-tmc-theme-mode",e),e==="system"){Object.keys(Z.light).forEach(s=>r.style.removeProperty(s));return}Object.entries(Z[e]).forEach(([s,c])=>{r.style.setProperty(s,c)})}function pe(){const[e,r]=E("system");D(()=>{const c=he();r(c),G(c)},[]);function s(){const c=M.indexOf(e),l=M[(c+1)%M.length]??"system";r(l),typeof window<"u"&&(window.localStorage.setItem(V,l),window.dispatchEvent(new CustomEvent("tmc:nexus-theme-mode",{detail:{mode:l}}))),G(l)}return t("li",{className:n["login-item"],children:g("button",{className:y(n["login-item-link"],n.themeToggleButton),onClick:s,type:"button",children:[t("span",{children:"Theme"}),t("span",{className:n.themeToggleValue,children:e})]})})}function we({auth:e}){const r=e?.enabled??!1,{profile:s,profileImage:c}=ge(e);if(D(()=>{typeof window<"u"&&window.localStorage.setItem("loginReferrer",window.location.href)},[]),!r)return null;function l(d){if(e?.onLogout){d.preventDefault(),e.onLogout();return}e?.tokenStorageKey&&typeof window<"u"&&window.localStorage.removeItem(e.tokenStorageKey),e?.storageKey&&typeof window<"u"&&(window.localStorage.removeItem(e.storageKey),window.dispatchEvent(new CustomEvent("tmc:nexus-auth",{detail:null})))}return g("div",{className:n["nav-login"],children:[t("div",{className:n["account-img"],children:c?t("img",{alt:s?.name??s?.username??"User profile",src:c}):t("span",{"aria-hidden":"true",children:ae(s)||"\u25EF"})}),t("div",{className:n["login-menu"],children:g("ul",{className:n["login-nav"],children:[t(pe,{}),s?g(H,{children:[t("li",{className:n["login-item"],children:t("a",{className:n["login-item-link"],href:e?.settingsUrl??"/account/settings",children:"Settings"})}),t("li",{className:n["login-item"],children:t("a",{className:n["login-item-link"],href:e?.logoutUrl??"#",onClick:l,children:"Logout"})})]}):t("li",{className:n["login-item"],children:t("a",{className:n["login-item-link"],href:e?.loginUrl??"/login",children:"Login"})})]})})]})}function be({brand:e,enabled:r,followTheme:s,items:c,mode:l,onClose:d,open:v,sidebar:h,toggleButton:N}){const a=I(null);if(D(()=>{function w(i){if(i.pointerType==="mouse"&&i.button!==0)return;const S=i.target,m=ce(S);!(S instanceof Node)||m?.closest("[data-navbar-toggle='true']")||v&&!a.current?.contains(S)&&!N?.contains(S)&&i.button===0&&d()}return window.addEventListener("pointerdown",w),()=>window.removeEventListener("pointerdown",w)},[d,v,N]),!r)return null;const p=l==="overflow"?c:h?.items?.length?h.items:c;return t("aside",{className:y(n["sidebar-sec"],s?void 0:n.navbarDarkScope),children:t("div",{className:y(n.sidebar,l==="overflow"?n.sidebarMobile:void 0,v?n.open:void 0),ref:a,children:g("ul",{className:n["sc-gn-list"],children:[t("li",{className:n["sc-gn-item"],children:t("span",{className:n["sc-gn-link"],children:h?.title??e.label})}),t(R,{classPrefix:"sc",items:p,variant:"sidebar"}),t("li",{className:y(n["ac-gn-item"],n["ac-gn-item-menu"],n["ac-gn-Sidebar"]),children:g("a",{className:y(n.closeButton,n["sc-gn-link"]),href:"#",onClick:w=>{w.preventDefault(),d()},children:[t("span",{className:n.closeButtonIcon,"aria-hidden":"true",children:"\xD7"}),t("span",{children:h?.closeLabel??"Close Sidebar"})]})})]})})})}function De({auth:e,brand:r,className:s,followTheme:c=!1,items:l,maxDesktopItems:d,search:v,sidebar:h}){const[N,a]=E(!1),[p,w]=E(null),[i,S]=E([]),m=!!h?.enabled,x=i.length>0,o=r.logoPosition==="menu",k=m||o,u=le(()=>l,[l]);return g(te,{required:re.proKit,children:[g("header",{className:y(n["header-sec"],c?void 0:n.navbarDarkScope,s),children:[o?null:t(ue,{brand:r}),g("div",{className:n.header_bar,children:[t(fe,{brand:r,items:u,logoAsTrigger:o,maxDesktopItems:d,onOverflowItemsChange:S,sidebarEnabled:k,setToggleButton:w,sidebarOpen:N,toggleSidebar:()=>a(f=>!f)}),g("div",{className:n["search-login-aligner"],children:[t(me,{display:v?.display,enabled:v?.enabled,placeholder:v?.placeholder}),t(we,{auth:e})]})]})]}),t(be,{brand:r,enabled:k||x,followTheme:c,items:u,mode:x?"overflow":"sidebar",onClose:()=>a(!1),open:N,sidebar:h,toggleButton:p})]})}export{De as Navbar};
@@ -30,6 +30,7 @@ export interface NavbarAuthConfig {
30
30
  profile?: UserProfile | null;
31
31
  profileImageProvider?: ProfileImageProvider;
32
32
  settingsUrl?: string;
33
+ storageKey?: string;
33
34
  tokenStorageKey?: string;
34
35
  }
35
36
  export interface NavbarSearchConfig {
@@ -43,6 +44,7 @@ export interface NavbarProps {
43
44
  brand: NavbarBrand;
44
45
  className?: string;
45
46
  dropdown?: boolean;
47
+ followTheme?: boolean;
46
48
  items: NavbarItem[];
47
49
  maxDesktopItems?: number;
48
50
  search?: NavbarSearchConfig;
@@ -18,33 +18,33 @@
18
18
  "children": [
19
19
  {
20
20
  "label": "Core UI",
21
- "href": "#core"
21
+ "href": "/components"
22
22
  },
23
23
  {
24
24
  "label": "Pro Kit",
25
- "href": "#pro",
25
+ "href": "/pro-kit",
26
26
  "children": [
27
27
  {
28
- "label": "Navbar Provider",
29
- "href": "#navbar-provider"
28
+ "label": "Surfaces",
29
+ "href": "/pro-kit"
30
30
  },
31
31
  {
32
32
  "label": "Migrated Components",
33
- "href": "#migrated-components"
33
+ "href": "/pro-kit#migrated-components"
34
34
  }
35
35
  ]
36
36
  },
37
37
  {
38
38
  "label": "Addon Packs",
39
- "href": "#addons",
39
+ "href": "/addons",
40
40
  "children": [
41
41
  {
42
42
  "label": "Animations",
43
- "href": "#addons"
43
+ "href": "/addons"
44
44
  },
45
45
  {
46
46
  "label": "Charts",
47
- "href": "#addons"
47
+ "href": "/addons"
48
48
  }
49
49
  ]
50
50
  }
@@ -74,7 +74,8 @@
74
74
  },
75
75
  "profileImageProvider": "gravatar",
76
76
  "loginUrl": "/login",
77
- "settingsUrl": "/account/settings"
77
+ "settingsUrl": "/account/settings",
78
+ "storageKey": "tmc-nexus-auth"
78
79
  },
79
80
  "dropdown": true,
80
81
  "search": {
@@ -99,6 +99,9 @@
99
99
  "settingsUrl": {
100
100
  "type": "string"
101
101
  },
102
+ "storageKey": {
103
+ "type": "string"
104
+ },
102
105
  "tokenStorageKey": {
103
106
  "type": "string"
104
107
  },
@@ -143,6 +146,9 @@
143
146
  "dropdown": {
144
147
  "type": "boolean"
145
148
  },
149
+ "followTheme": {
150
+ "type": "boolean"
151
+ },
146
152
  "maxDesktopItems": {
147
153
  "type": "number",
148
154
  "minimum": 1
@@ -1 +1 @@
1
- .O{position:relative;z-index:15;width:100%;display:flex;flex-direction:row;justify-content:center}.v{position:relative;color:var(--primary-text);background:var(--primary-background);height:58px;width:100%;min-width:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;overflow:visible;box-shadow:-1px 3px 20px 4px var(--neutral-850)}.b{display:flex;flex-direction:row;background:var(--primary-background);align-items:center;height:34px;margin-right:10px;max-width:min(210px,28vw);border:1px solid var(--border-color);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden}@media screen and (max-width:911px){.b{display:none}}.P{margin:0 5px}.Q{display:flex;height:100%}.R{border:0;outline:0;width:clamp(96px,12vw,160px);min-width:0;height:100%;background:transparent;color:var(--primary-text);padding:0 10px 0 0}.S{display:flex;align-items:center;justify-content:center;color:var(--secondary-text)}.T{justify-content:center;width:42px;padding:0;cursor:pointer}.i{flex:1 1 auto;width:45%;max-width:calc(50% - 34px);height:58px;min-width:58px;display:flex;align-items:center}.i ul.U{list-style-type:none;margin:0;padding:0;min-width:0;overflow:visible;height:58px;display:flex;align-items:stretch}.V{position:relative;overflow:visible;height:58px;width:100%;min-width:0}.i li.y,li.u,li.w{margin-left:10px;float:none;display:flex;align-items:stretch;position:relative}.i li a.k,li.W{display:flex;align-items:center;height:58px;color:var(--primary-text);text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;white-space:nowrap}.i li a:hover.k{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.i li a.a{display:flex;align-items:center;height:58px;color:#7fff00;text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.i li a:hover.a{background-color:var(--hover-overlay)}.Z{list-style-type:none;margin:0;padding:6px;overflow:visible;background-color:var(--primary-background);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 18px 42px #00000047,0 2px 10px #0000002e;display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:210px;transform-origin:top left}._{display:block;animation:z 145ms cubic-bezier(.16,1,.3,1)}.p{display:flex;flex-direction:row;align-items:center;height:58px;min-width:0;flex:0 1 auto;justify-content:flex-end}.i li a:hover ul{display:block}.ii{overflow:hidden}.i li.s{margin-left:0;float:none;display:block;position:relative}.i li a.r{display:flex;align-items:center;min-height:44px;color:var(--primary-text);text-align:left;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;white-space:nowrap}.i li a:hover.r{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.j{gap:8px}.A{display:inline-flex;align-items:center;justify-content:center;width:.9em;color:var(--secondary-text);font-size:.8em;line-height:1;transition:transform .14s ease}.j[data-state=open] .A{transform:rotate(180deg)}.o{backdrop-filter:blur(16px)}.o:before{content:"";position:absolute;top:-18px;left:0;width:100%;height:18px}.o .s{margin-left:0}.o .r{justify-content:space-between;gap:18px;border-radius:6px}.ei{color:var(--secondary-text);font-size:1.1em;line-height:1}.H{list-style-type:none;margin:3px 0 6px;padding:0 0 0 12px;border-left:1px solid var(--border-color)}.H .r{min-height:36px;padding:0 12px;font-size:.94rem}.n{display:block;position:static;min-width:0;margin:2px 0 8px 18px;padding:0 0 0 12px;border:0;border-left:1px solid var(--border-color);border-radius:0;box-shadow:none;background:transparent}.e .n .s{width:100%;margin-left:0}.e .n .r{width:100%;min-height:40px;box-sizing:border-box;justify-content:flex-start;padding:10px 14px;border-radius:var(--border-radius)}.e .n .r:hover{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.i li a.Y{display:flex;align-items:center;min-height:44px;color:#7fff00;text-align:left;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.i li a:hover.Y{background-color:var(--hover-overlay)}.t{float:none;z-index:10;height:58px;display:flex;align-items:center}.t .q{font-size:16px;border:none;outline:none;color:var(--primary-text);padding:0 16px;height:58px;display:flex;align-items:center;background-color:inherit;font-family:inherit;margin:0}.t .q .B{width:32px;min-height:18.5px}.l{display:none;position:absolute;min-width:160px;box-shadow:0 8px 16px #07070787;z-index:1}.l a{float:none;color:var(--primary-text);padding:12px 16px;text-decoration:none;display:block;text-align:left}.l a:hover{background-color:var(--hover-overlay)}.t:hover .l{display:block}@media(min-width:722px){.t{display:none}.t.ti{display:flex}.ri{display:none!important}.x{display:flex!important}}.x{display:none!important}@media(min-width:722px){.x{display:flex!important}}.t ul.ai{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#07070787;display:flex;flex-direction:column}.t li.oi{margin-left:10px;float:none}.t li a.C{display:flex;align-items:center;min-height:44px;color:var(--primary-text);text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.t li a:hover.C{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.t li a.a{display:flex;align-items:center;min-height:44px;color:#000;text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.t li a:hover.a{background-color:var(--hover-overlay)}.X{text-align:center;box-sizing:border-box;margin-left:10px;margin-right:10px;padding:10px}.ni{width:auto;height:auto}.e{z-index:14;width:min(200px,100vw);width:min(200px,100dvw);max-width:100vw;max-width:100dvw;height:100vh;height:100dvh;background-color:rgb(from var(--neutral-999) r g b / .63);color:var(--primary-text);padding:20px;box-sizing:border-box;position:fixed;top:0;left:0;overflow-y:auto;overscroll-behavior:contain;transform:translate(calc(-100% - 1px));transition:transform .3s ease}.li{width:100vw;width:100dvw;max-width:100vw;max-width:100dvw}.e.di{transform:translate(0);padding:14px}.pi{display:inline-block;font-size:21.318px;transform:scaleX(1.501);transform-origin:left center}.si{margin-left:220px;padding:20px}.D{display:flex!important;align-items:center;justify-content:center;height:58px;background-color:var(--primary-background);color:var(--primary-text);padding:0 14px!important;cursor:pointer}.E{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;overflow:hidden}.E img{display:block;width:100%;height:100%;object-fit:contain}.e a{display:block;color:var(--primary-text);text-decoration:none;padding:5px}.e a:hover,.e .xi{background-color:var(--hover-overlay)}.ci{left:0}.e ul.gi{top:42px;position:relative;list-style-type:none;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}.e li.hi,li.mi{margin-left:0;float:none;width:100%}.e li a.c,.e li span.c,a.fi{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;box-sizing:border-box;color:var(--primary-text);text-align:left;padding:12px 16px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.e li a:hover.c{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.vi{display:inline-flex;align-items:center;justify-content:center;width:1.25em;font-size:1.25em;line-height:1}.e li a.F{display:block;color:#7fff00;text-align:center;padding:19.5px 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.e li a:hover.F{background-color:var(--primary-text)}.bi{z-index:6;height:100%;background-color:#0000;position:fixed;width:50px}.g{height:58px;width:58px;flex:0 0 58px;transition:.3s linear all;display:flex;align-items:center;justify-content:center}.yi{position:absolute;inset:0;width:auto;max-width:100%;height:58px;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4}.g a{pointer-events:auto}@media screen and (max-width:722px){.g{transform:rotate(90deg);transition:.3s linear all;content:url(https://cdn.themodcraft.net/resources/assets/images/Chronos_Logo-noText2.png)}.v{overflow:visible;align-items:center}}.h{display:flex;flex-direction:row;align-items:center;margin:0 10px 0 0;height:58px;padding:0 8px;position:relative}.d{display:flex;flex-direction:row;font-size:1.8rem}.d>img{width:40px;height:40px;border-radius:100px}.m{visibility:hidden;opacity:0;position:fixed;top:58px;left:calc(100% - 200px);width:200px;height:auto;border-bottom-left-radius:var(--border-radius);background-color:var(--primary-background);z-index:1;padding-top:10px;transition:opacity .12s ease,visibility .12s ease}.m:before{content:"";position:absolute;top:-18px;left:0;width:100%;height:18px}.h:hover .m{visibility:visible;opacity:1}.ui{list-style-type:none;padding:0 40px}.G{border-radius:var(--border-radius)}.G:hover{background-color:var(--hover-overlay)}.wi{display:block;color:var(--primary-text);text-align:center;padding:8px 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}@media screen and (max-width:480px){.i{max-width:calc(50% - 30px);min-width:52px}.i li.y,li.u,li.w{margin-left:4px}.D{padding:0 10px!important}.p{max-width:calc(50% - 30px)}.h{margin-right:4px;padding:0 4px}.d{font-size:1.45rem}.d>img{width:34px;height:34px}}@media screen and (max-width:260px){.p{display:none}.i{max-width:calc(50% - 30px)}}.B{width:32px;min-height:18.5px;position:relative}.ki{pointer-events:none;position:absolute;top:0;left:0;visibility:hidden;z-index:-1}.I,.J,.K{transform-box:fill-box;transform-origin:center}.f .I{animation:L .6s ease-out both}.f .J{animation:M .6s ease-out both}.f .K{animation:N .6s ease-out forwards}@keyframes M{0%{animation-timing-function:cubic-bezier(.16,-.88,.97,.53);transform:translateY(0)}30%{transform-origin:center;animation-timing-function:cubic-bezier(.34,1.56,.64,1);transform:translateY(-10px)}to{transform-origin:center;transform:translateY(-10px) rotate(45deg) scale(.9)}}@keyframes L{0%{animation-timing-function:cubic-bezier(.16,-.88,.97,.53);transform:translateY(0)}30%{transform-origin:center;animation-timing-function:cubic-bezier(.34,1.56,.64,1);transform:translateY(10px)}to{transform-origin:center;transform:translateY(10px) rotate(-45deg) scale(.9)}}@keyframes N{29%{opacity:1}30%{opacity:0}to{opacity:0}}@keyframes z{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
1
+ .O{position:relative;z-index:15;width:100%;display:flex;flex-direction:row;justify-content:center}.P{--primary-background: #212121;--secondary-background: #161616;--primary-text: #f7f9fb;--secondary-text: #b8c1cc;--tertiary-text: #7d8792;--border-color: #3c3c3c;--cta-color: #30fa00;--link-color: #6ea3ff;--hover-overlay: rgba(255, 255, 255, .08);--tmc-color-surface: #181b22;--tmc-color-surface-muted: #232832;--tmc-color-surface-raised: #20242d;--tmc-color-text: #f2f5f8;--tmc-color-text-muted: #aab4c0}.b{position:relative;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));background:var(--primary-background, var(--tmc-color-surface, #181b22));height:58px;width:100%;min-width:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;overflow:visible;box-shadow:-1px 3px 20px 4px var(--neutral-850)}.v{display:flex;flex-direction:row;background:var(--primary-background, var(--tmc-color-surface, #181b22));align-items:center;height:34px;margin-right:10px;max-width:min(210px,28vw);border:1px solid var(--border-color);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden}@media screen and (max-width:911px){.v{display:none}}.Q{margin:0 5px}.R{display:flex;height:100%}.S{border:0;outline:0;width:clamp(96px,12vw,160px);min-width:0;height:100%;background:transparent;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));padding:0 10px 0 0}.T{display:flex;align-items:center;justify-content:center;color:var(--secondary-text, var(--tmc-color-text-muted, #aab4c0))}.U{justify-content:center;width:42px;padding:0;cursor:pointer}.e{flex:1 1 auto;width:45%;max-width:calc(50% - 34px);height:58px;min-width:58px;display:flex;align-items:center}.e ul.V{list-style-type:none;margin:0;padding:0;min-width:0;overflow:visible;height:58px;display:flex;align-items:stretch}.W{position:relative;overflow:visible;height:58px;width:100%;min-width:0}.e li.y,li.u,li.w{margin-left:10px;float:none;display:flex;align-items:stretch;position:relative}.e li a.k,li.Z{display:flex;align-items:center;height:58px;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;white-space:nowrap}.e li a:hover.k{background-color:var(--hover-overlay, rgba(255, 255, 255, .08));border-radius:var(--border-radius)}.e li a.a{display:flex;align-items:center;height:58px;color:#7fff00;text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.e li a:hover.a{background-color:var(--hover-overlay, rgba(255, 255, 255, .08))}._{list-style-type:none;margin:0;padding:6px;overflow:visible;background-color:var(--primary-background, var(--tmc-color-surface, #181b22));border:1px solid var(--border-color);border-radius:8px;box-shadow:0 18px 42px #00000047,0 2px 10px #0000002e;display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:210px;transform-origin:top left}.ee{display:block;animation:z 145ms cubic-bezier(.16,1,.3,1)}.p{display:flex;flex-direction:row;align-items:center;height:58px;min-width:0;flex:0 1 auto;justify-content:flex-end}.e li a:hover ul{display:block}.ie{overflow:hidden}.e li.c{margin-left:0;float:none;display:block;position:relative}.e li a.t{display:flex;align-items:center;min-height:44px;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-align:left;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;white-space:nowrap}.e li a:hover.t{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.j{gap:8px}.A{display:inline-flex;align-items:center;justify-content:center;width:.9em;color:var(--secondary-text);font-size:.8em;line-height:1;transition:transform .14s ease}.j[data-state=open] .A{transform:rotate(180deg)}.o{backdrop-filter:blur(16px)}.o:before{content:"";position:absolute;top:-18px;left:0;width:100%;height:18px}.o .c{margin-left:0}.o .t{justify-content:space-between;gap:18px;border-radius:6px}.re{color:var(--secondary-text);font-size:1.1em;line-height:1}.H{list-style-type:none;margin:3px 0 6px;padding:0 0 0 12px;border-left:1px solid var(--border-color)}.H .t{min-height:36px;padding:0 12px;font-size:.94rem}.n{display:block;position:static;min-width:0;margin:2px 0 8px 18px;padding:0 0 0 12px;border:0;border-left:1px solid var(--border-color);border-radius:0;box-shadow:none;background:transparent}.i .n .c{width:100%;margin-left:0}.i .n .t{width:100%;min-height:40px;box-sizing:border-box;justify-content:flex-start;padding:10px 14px;border-radius:var(--border-radius)}.i .n .t:hover{background-color:var(--hover-overlay);border-radius:var(--border-radius)}.e li a.Y{display:flex;align-items:center;min-height:44px;color:#7fff00;text-align:left;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.e li a:hover.Y{background-color:var(--hover-overlay)}.r{float:none;z-index:10;height:58px;display:flex;align-items:center}.r .q{font-size:16px;border:none;outline:none;color:var(--primary-text);padding:0 16px;height:58px;display:flex;align-items:center;background-color:transparent;font-family:inherit;margin:0}.r .q .B{width:32px;min-height:18.5px}.l{display:none;position:absolute;min-width:160px;box-shadow:0 8px 16px #07070787;z-index:1}.l a{float:none;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));padding:12px 16px;text-decoration:none;display:block;text-align:left}.l a:hover{background-color:var(--hover-overlay, rgba(255, 255, 255, .08))}.r:hover .l{display:block}@media(min-width:722px){.r{display:none}.r.te{display:flex}.ae{display:none!important}.s{display:flex!important}}.s{display:none!important}@media(min-width:722px){.s{display:flex!important}}.r ul.oe{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:var(--primary-background, rgba(24, 27, 34, .92));display:flex;flex-direction:column}.r li.ne{margin-left:10px;float:none}.r li a.C{display:flex;align-items:center;min-height:44px;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.r li a:hover.C{background-color:var(--hover-overlay, rgba(255, 255, 255, .08));border-radius:var(--border-radius)}.r li a.a{display:flex;align-items:center;min-height:44px;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-align:center;padding:0 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.r li a:hover.a{background-color:var(--hover-overlay, rgba(255, 255, 255, .08))}.X{text-align:center;box-sizing:border-box;margin-left:10px;margin-right:10px;padding:10px}.le{width:auto;height:auto}.i{z-index:14;width:min(200px,100vw);width:min(200px,100dvw);max-width:100vw;max-width:100dvw;height:100vh;height:100dvh;background-color:rgb(from var(--neutral-999) r g b / .63);color:var(--primary-text);padding:20px;box-sizing:border-box;position:fixed;top:0;left:0;overflow-y:auto;overscroll-behavior:contain;transform:translate(calc(-100% - 1px));transition:transform .3s ease}.de{width:100vw;width:100dvw;max-width:100vw;max-width:100dvw}.i.pe{transform:translate(0);padding:14px}.ce{display:inline-block;font-size:21.318px;transform:scaleX(1.501);transform-origin:left center}.se{margin-left:220px;padding:20px}.D{display:flex!important;align-items:center;justify-content:center;height:58px;background-color:var(--primary-background, var(--tmc-color-surface, #181b22));color:var(--primary-text, var(--tmc-color-text, #f2f5f8));padding:0 14px!important;cursor:pointer}.E{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;overflow:hidden}.E img{display:block;width:100%;height:100%;object-fit:contain}.i a{display:block;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-decoration:none;padding:5px}.i a:hover,.i .xe{background-color:var(--hover-overlay, rgba(255, 255, 255, .08))}.fe{left:0}.i ul.me{top:42px;position:relative;list-style-type:none;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}.i li.ge,li.he{margin-left:0;float:none;width:100%}.i li a.x,.i li span.x,a.be{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;box-sizing:border-box;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-align:left;padding:12px 16px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.i li a:hover.x{background-color:var(--hover-overlay, rgba(255, 255, 255, .08));border-radius:var(--border-radius)}.ve{display:inline-flex;align-items:center;justify-content:center;width:1.25em;font-size:1.25em;line-height:1}.i li a.F{display:block;color:#7fff00;text-align:center;padding:19.5px 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.i li a:hover.F{background-color:var(--hover-overlay, rgba(255, 255, 255, .08))}.ye{z-index:6;height:100%;background-color:#0000;position:fixed;width:50px}.f{height:58px;width:58px;flex:0 0 58px;transition:.3s linear all;display:flex;align-items:center;justify-content:center}.ue{position:absolute;inset:0;width:auto;max-width:100%;height:58px;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4}.f a{pointer-events:auto}@media screen and (max-width:722px){.f{transform:rotate(90deg);transition:.3s linear all;content:url(https://cdn.themodcraft.net/resources/assets/images/Chronos_Logo-noText2.png)}.b{overflow:visible;align-items:center}}.m{display:flex;flex-direction:row;align-items:center;margin:0 10px 0 0;height:58px;padding:0 8px;position:relative}.d{display:flex;flex-direction:row;font-size:1.8rem}.d>img{width:40px;height:40px;border-radius:100px}.g{visibility:hidden;opacity:0;position:fixed;top:58px;left:calc(100% - 200px);width:200px;height:auto;border-bottom-left-radius:var(--border-radius);background-color:var(--primary-background, var(--tmc-color-surface, #181b22));z-index:1;padding-top:10px;transition:opacity .12s ease,visibility .12s ease}.g:before{content:"";position:absolute;top:-18px;left:0;width:100%;height:18px}.m:hover .g{visibility:visible;opacity:1}.we{list-style-type:none;padding:0 24px 10px}.G{border-radius:var(--border-radius)}.G:hover{background-color:var(--hover-overlay)}.ke{display:block;color:var(--primary-text, var(--tmc-color-text, #f2f5f8));text-align:center;padding:8px 20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif}.ze{align-items:center;background:transparent;border:0;cursor:pointer;display:flex;justify-content:space-between;width:100%}.je{color:var(--secondary-text, var(--tmc-color-text-muted, #aab4c0));font-size:.78rem;margin-left:12px;text-transform:capitalize}@media screen and (max-width:480px){.e{max-width:calc(50% - 30px);min-width:52px}.e li.y,li.u,li.w{margin-left:4px}.D{padding:0 10px!important}.p{max-width:calc(50% - 30px)}.m{margin-right:4px;padding:0 4px}.d{font-size:1.45rem}.d>img{width:34px;height:34px}}@media screen and (max-width:260px){.p{display:none}.e{max-width:calc(50% - 30px)}}.B{width:32px;min-height:18.5px;position:relative}.Ae{pointer-events:none;position:absolute;top:0;left:0;visibility:hidden;z-index:-1}.I,.J,.K{transform-box:fill-box;transform-origin:center}.h .I{animation:L .6s ease-out both}.h .J{animation:M .6s ease-out both}.h .K{animation:N .6s ease-out forwards}@keyframes M{0%{animation-timing-function:cubic-bezier(.16,-.88,.97,.53);transform:translateY(0)}30%{transform-origin:center;animation-timing-function:cubic-bezier(.34,1.56,.64,1);transform:translateY(-10px)}to{transform-origin:center;transform:translateY(-10px) rotate(45deg) scale(.9)}}@keyframes L{0%{animation-timing-function:cubic-bezier(.16,-.88,.97,.53);transform:translateY(0)}30%{transform-origin:center;animation-timing-function:cubic-bezier(.34,1.56,.64,1);transform:translateY(10px)}to{transform-origin:center;transform:translateY(10px) rotate(-45deg) scale(.9)}}@keyframes N{29%{opacity:1}30%{opacity:0}to{opacity:0}}@keyframes z{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@@ -0,0 +1,2 @@
1
+ import type { OtpFieldProps } from "./OtpField.types";
2
+ export declare function OtpField({ autoFocus, className, defaultValue, description, disabled, error, inputMode, label, length, name, onChange, onComplete, pattern, required, style, value, ...props }: OtpFieldProps): import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as s,jsxs as k}from"react/jsx-runtime";import{LicenseGate as q,TMC_ENTITLEMENTS as z}from"@themodcraft/license-client";import{useEffect as P,useMemo as R,useRef as $,useState as A}from"react";import l from"./OtpField.module.css";function m(o,r){return o.replace(/\s/g,"").slice(0,r)}function j(o,r){return Array.from({length:r},(d,i)=>o[i]??"")}function Q({autoFocus:o,className:r,defaultValue:d="",description:i,disabled:v,error:u,inputMode:D="numeric",label:p,length:V=6,name:h,onChange:x,onComplete:E,pattern:I="[0-9]*",required:L,style:T,value:g,..._}){const y=g!==void 0,n=Math.max(1,Math.min(V,12)),[b,w]=A(m(d,n)),f=m(y?g:b,n),N=R(()=>j(f,n),[f,n]),c=$([]),B={"--tmc-otp-length":n,...T};P(()=>{o&&c.current[0]?.focus()},[o]);function M(t){const e=m(t,n);y||w(e),x?.(e),e.length===n&&E?.(e)}function C(t,e){const a=e.slice(-1),S=j(f,n);S[t]=a,M(S.join("")),a&&t<n-1&&c.current[t+1]?.focus()}function K(t){t.preventDefault();const e=m(t.clipboardData.getData("text"),n);M(e),c.current[Math.min(e.length,n-1)]?.focus()}function O(t,e){t.key==="Backspace"&&!N[e]&&e>0&&c.current[e-1]?.focus()}return s(q,{required:z.proKit,children:k("div",{className:[l.root,r].filter(Boolean).join(" "),style:B,..._,children:[p?s("span",{className:l.label,children:p}):null,s("div",{className:l.slots,children:N.map((t,e)=>s("input",{"aria-label":`${String(p??"One-time password")} digit ${e+1}`,"aria-invalid":!!u,className:l.slot,disabled:v,inputMode:D,maxLength:1,onChange:a=>C(e,a.target.value),onKeyDown:a=>O(a,e),onPaste:K,pattern:I,ref:a=>{c.current[e]=a},type:"text",value:t},e))}),h?s("input",{"aria-hidden":"true",className:l.hiddenInput,name:h,readOnly:!0,required:L,tabIndex:-1,value:f}):null,i&&!u?s("span",{className:l.description,children:i}):null,u?s("span",{className:l.error,children:u}):null]})})}export{Q as OtpField};
@@ -0,0 +1 @@
1
+ .e{color:var(--tmc-field-label-text, var(--tmc-color-text, #151821));display:grid;gap:.4rem;width:100%}.o{color:inherit;font-size:.9rem;font-weight:650}.t{display:grid;gap:.4rem;grid-template-columns:repeat(var(--tmc-otp-length, 6),minmax(1.85rem,2.15rem));justify-content:start}.r{aspect-ratio:1;background:var(--tmc-color-surface-raised, #fbfcfe);border:1px solid var(--tmc-color-border, #d7dde5);border-radius:6px;color:var(--tmc-color-text, #151821);font:inherit;font-size:1rem;font-weight:750;min-height:2.15rem;min-width:0;outline:none;text-align:center;transition:border-color .18s ease,box-shadow .18s ease}.r:focus{border-color:var(--tmc-color-accent, #2454d6);box-shadow:0 0 0 3px color-mix(in srgb,var(--tmc-color-accent, #2454d6) 24%,transparent)}.r:disabled{cursor:not-allowed;opacity:.58}.i{color:var(--tmc-field-description-text, var(--tmc-color-text-muted, #5f6b7a));font-size:.82rem;line-height:1.45}.a{color:var(--tmc-color-danger, #b42318);font-size:.82rem;line-height:1.45}.c{display:none}
@@ -0,0 +1,20 @@
1
+ import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
2
+ export interface OtpFieldStyle extends CSSProperties {
3
+ "--tmc-otp-length"?: number;
4
+ }
5
+ export interface OtpFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
6
+ autoFocus?: boolean;
7
+ defaultValue?: string;
8
+ description?: ReactNode;
9
+ disabled?: boolean;
10
+ error?: ReactNode;
11
+ inputMode?: "decimal" | "numeric" | "text";
12
+ label?: ReactNode;
13
+ length?: number;
14
+ name?: string;
15
+ onChange?: (value: string) => void;
16
+ onComplete?: (value: string) => void;
17
+ pattern?: string;
18
+ required?: boolean;
19
+ value?: string;
20
+ }
File without changes
@@ -0,0 +1,2 @@
1
+ export { OtpField } from "./OtpField";
2
+ export type { OtpFieldProps } from "./OtpField.types";
@@ -0,0 +1 @@
1
+ import{OtpField as p}from"./OtpField";export{p as OtpField};
@@ -1,4 +1,4 @@
1
- import{jsx as e,jsxs as r}from"react/jsx-runtime";import{LicenseGate as v,TMC_ENTITLEMENTS as u}from"@themodcraft/license-client";import l from"./Overlay.module.css";function s({flipped:n=!1}){return r("svg",{className:n?l["wave-overlay-up"]:l["wave-overlay"],preserveAspectRatio:"none",style:n?{transform:"scaleY(-1) scaleX(-1)"}:void 0,viewBox:"0 0 1440 320",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:`
1
+ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{LicenseGate as p,TMC_ENTITLEMENTS as m}from"@themodcraft/license-client";import l from"./Overlay.module.css";function a({flipped:n=!1}){return r("svg",{className:n?l["wave-overlay-up"]:l["wave-overlay"],preserveAspectRatio:"none",style:n?{transform:"scaleY(-1) scaleX(-1)"}:void 0,viewBox:"0 0 1440 320",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:`
2
2
  M 0, 305
3
3
  L 1440, 175
4
4
  L 1440, 180
@@ -10,4 +10,4 @@ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{LicenseGate as v,TMC_EN
10
10
  L 1440, 340
11
11
  L 0, 340
12
12
  Z
13
- `,fill:"var(--neutral-850)",fillOpacity:"1"})]})}function h({children:n,className:a,enableBottm:t,enableBottom:o,enableUp:i,enableTop:c}){const f=c??i??!1,p=o??t??!1;return e(v,{required:u.proKit,children:r("section",{className:[l["overlay-container"],a].filter(Boolean).join(" "),children:[f?e(s,{flipped:!0}):null,n,p?e(s,{}):null]})})}export{h as Overlay};
13
+ `,fill:"var(--neutral-850)",fillOpacity:"1"})]})}function w({children:n,className:s,enableBottm:t,enableBottom:o,enableUp:i,enableTop:c}){const f=c??i??!1,v=o??t??!1;return e(p,{required:m.proKit,children:r("section",{className:[l["overlay-container"],s].filter(Boolean).join(" "),children:[f?e(a,{flipped:!0}):null,e("div",{className:l["overlay-content"],children:n}),v?e(a,{}):null]})})}export{w as Overlay};
@@ -1 +1 @@
1
- .i{position:relative;width:100%;height:auto;background:var(--primary-background);overflow:hidden}.o{width:100%;height:40%;position:absolute;top:-1px;z-index:10}.t{width:100%;height:40%;position:absolute;bottom:0;z-index:0}
1
+ .i{position:relative;width:100%;height:auto;background:var(--primary-background, var(--tmc-color-surface, #181b22));overflow:hidden}.o{position:relative;z-index:1}.t{width:100%;height:40%;position:absolute;top:-1px;z-index:10}.e{width:100%;height:40%;position:absolute;bottom:0;z-index:0}
@@ -1,2 +1,2 @@
1
1
  import type { SliderProps } from "./Slider.types";
2
- export declare function Slider({ autoPlay, className, content, intervalMs, slides, }: SliderProps): import("react").JSX.Element | null;
2
+ export declare function Slider({ aspectRatio, className, content, objectFit, slideRenderer, slides, ...props }: SliderProps): import("react").JSX.Element | null;
@@ -1 +1 @@
1
- "use client";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{resolveAssetPath as f}from"@themodcraft/core-ui";import{LicenseGate as d,TMC_ENTITLEMENTS as h}from"@themodcraft/license-client";import{useEffect as g,useMemo as p,useState as b}from"react";function x({slide:e}){const l=m("div",{className:"relative h-full min-h-[260px] overflow-hidden rounded-lg bg-zinc-950",children:[t("img",{alt:e.text??"Slider image",className:"absolute inset-0 h-full w-full object-cover opacity-75",src:f(e.image)}),e.text?t("div",{className:"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-5 text-white",children:t("p",{className:"text-lg font-semibold",children:e.text})}):null]});return e.link?t("a",{href:e.link,rel:"noreferrer",target:e.link.startsWith("http")?"_blank":void 0,children:l}):l}function k({autoPlay:e=!0,className:l,content:a,intervalMs:s=3500,slides:o}){const n=p(()=>o??a?.slides??[],[a?.slides,o]),[c,u]=b(0);return g(()=>{if(!e||n.length<2)return;const i=window.setInterval(()=>{u(r=>(r+1)%n.length)},s);return()=>window.clearInterval(i)},[e,s,n.length]),n.length===0?null:t(d,{required:h.proKit,children:m("section",{className:["grid gap-3",l].filter(Boolean).join(" "),children:[t(x,{slide:n[c]}),n.length>1?t("div",{className:"flex items-center justify-center gap-2",children:n.map((i,r)=>t("button",{"aria-label":`Show slide ${r+1}`,className:["h-2.5 rounded-full transition-all",r===c?"w-8 bg-blue-700":"w-2.5 bg-zinc-300"].join(" "),onClick:()=>u(r),type:"button"},`${i.image}-${r}`))}):null]})})}export{k as Slider};
1
+ "use client";import{jsx as r,jsxs as g,Fragment as K}from"react/jsx-runtime";import{resolveAssetPath as R}from"@themodcraft/core-ui";import{LicenseGate as W,TMC_ENTITLEMENTS as q}from"@themodcraft/license-client";import{useEffect as B,useMemo as A,useRef as C,useState as $}from"react";import i from"./Slider.module.css";function V(e,n){return typeof e=="boolean"?e:typeof e?.enabled=="boolean"?e.enabled:n}function G(e,n,s){return typeof n=="boolean"?{delay:s??3500,disableOnInteraction:!1,enabled:n,pauseOnMouseEnter:!1}:{delay:n?.delay??s??3500,disableOnInteraction:n?.disableOnInteraction??!1,enabled:n?.enabled??e??!0,pauseOnMouseEnter:n?.pauseOnMouseEnter??!1}}function U(e){return typeof e=="boolean"?{clickable:!0,enabled:e}:{clickable:e?.clickable??!0,enabled:e?.enabled??!0}}function Y(e){return typeof e=="boolean"?{enabled:e,nextLabel:"Next slide",prevLabel:"Previous slide"}:{enabled:e?.enabled??!1,nextLabel:e?.nextLabel??"Next slide",prevLabel:e?.prevLabel??"Previous slide"}}function M(e,n){return n<=0?0:Math.max(0,Math.min(e,n-1))}function k(e,n,s,p){return n<=0?0:s||p?(e%n+n)%n:M(e,n)}function z(e){return{...e.swiperOptions,allowTouchMove:e.allowTouchMove??e.swiperOptions?.allowTouchMove,autoplay:e.autoplay??e.swiperOptions?.autoplay,centeredSlides:e.centeredSlides??e.swiperOptions?.centeredSlides,effect:e.effect??e.swiperOptions?.effect,initialSlide:e.initialSlide??e.swiperOptions?.initialSlide,keyboard:e.keyboard??e.swiperOptions?.keyboard,loop:e.loop??e.swiperOptions?.loop,mousewheel:e.mousewheel??e.swiperOptions?.mousewheel,navigation:e.navigation??e.swiperOptions?.navigation,pagination:e.pagination??e.swiperOptions?.pagination,rewind:e.rewind??e.swiperOptions?.rewind,slidesPerView:e.slidesPerView??e.swiperOptions?.slidesPerView,spaceBetween:e.spaceBetween??e.swiperOptions?.spaceBetween,speed:e.speed??e.swiperOptions?.speed}}function H({objectFit:e,slide:n}){const s=g("div",{className:i.frame,children:[r("img",{alt:n.text??"Slider image",className:i.image,src:R(n.image),style:{objectFit:e}}),n.text?r("div",{className:i.caption,children:r("p",{className:i.captionText,children:n.text})}):null]});return n.link?r("a",{href:n.link,rel:"noreferrer",target:n.link.startsWith("http")?"_blank":void 0,children:s}):s}function te({aspectRatio:e="16 / 9",className:n,content:s,objectFit:p="cover",slideRenderer:N,slides:P,...u}){const l=A(()=>P??s?.slides??[],[s?.slides,P]),o=A(()=>z(u),[u]),d=G(u.autoPlay,o.autoplay,u.intervalMs),S=U(o.pagination),v=Y(o.navigation),f=o.loop??!0,b=o.rewind??!1,_=o.slidesPerView==="auto"?1:Math.max(1,Math.floor(o.slidesPerView??1)),D=o.spaceBetween??30,F=o.speed??260,E=V(o.keyboard,!1),X=V(o.mousewheel,!1),I=o.allowTouchMove??!0,[h,y]=$(()=>M(o.initialSlide??0,l.length)),[L,T]=$(!1),O=C(null);function x(t){y(k(t,l.length,f,b))}function m(){x(h+1)}function w(){x(h-1)}if(B(()=>{y(t=>M(t,l.length))},[l.length]),B(()=>{if(!d.enabled||L||l.length<2)return;const t=window.setInterval(()=>{y(a=>k(a+1,l.length,f,b))},d.delay);return()=>window.clearInterval(t)},[d.delay,d.enabled,l.length,f,L,b]),l.length===0)return null;const j=Array.from({length:Math.min(_,l.length)},(t,a)=>{const c=k(h+a,l.length,f,b);return{index:c,item:l[c]}});return r(W,{required:q.proKit,children:g("section",{className:[i.slider,n].filter(Boolean).join(" "),onKeyDown:t=>{E&&(t.key==="ArrowLeft"&&(t.preventDefault(),w()),t.key==="ArrowRight"&&(t.preventDefault(),m()))},onMouseEnter:d.pauseOnMouseEnter?()=>T(!0):void 0,onMouseLeave:d.pauseOnMouseEnter?()=>T(!1):void 0,onWheel:X?t=>{Math.abs(t.deltaX)>Math.abs(t.deltaY)&&(t.deltaX>0?m():w())}:void 0,tabIndex:E?0:void 0,children:[g("div",{className:i.viewport,onPointerDown:I?t=>{O.current=t.clientX}:void 0,onPointerUp:I?t=>{const a=O.current;if(O.current=null,typeof a!="number")return;const c=t.clientX-a;Math.abs(c)>44&&(c<0?m():w())}:void 0,style:{aspectRatio:e},children:[r("div",{className:[i.track,o.centeredSlides?i.trackCentered:""].join(" "),style:{gap:`${D}px`,gridTemplateColumns:`repeat(${j.length}, minmax(0, 1fr))`,transitionDuration:`${F}ms`},children:j.map(({index:t,item:a})=>r("div",{className:i.slide,children:N?N(a,t):r(H,{objectFit:p,slide:a})},`${a.image}-${t}`))}),v.enabled&&l.length>1?g(K,{children:[r("button",{"aria-label":v.prevLabel,className:[i.navButton,i.navPrev].join(" "),onClick:w,type:"button",children:"\u2039"}),r("button",{"aria-label":v.nextLabel,className:[i.navButton,i.navNext].join(" "),onClick:m,type:"button",children:"\u203A"})]}):null]}),S.enabled&&l.length>1?r("div",{className:i.pagination,children:l.map((t,a)=>r("button",{"aria-label":`Show slide ${a+1}`,className:[i.dot,a===h?i.dotActive:""].join(" "),onClick:S.clickable?()=>x(a):void 0,type:"button"},`${t.image}-${a}`))}):null]})})}export{te as Slider};
@@ -0,0 +1 @@
1
+ .e{display:grid;gap:.75rem;width:100%}.r{border-radius:8px;overflow:hidden;position:relative;touch-action:pan-y;width:100%}.t{display:grid;height:100%;min-height:0;transition-property:transform,opacity;width:100%}.o{align-items:center}.n{height:100%;min-width:0}.d{background:#09090b;border-radius:8px;height:100%;overflow:hidden;position:relative;width:100%}.a{height:100%;inset:0;opacity:.75;position:absolute;width:100%}.s{background:linear-gradient(to top,rgb(0 0 0 / .8),transparent);bottom:0;color:#fff;left:0;padding:1.25rem;position:absolute;right:0}.g{font-size:1.125rem;font-weight:600;line-height:1.4;margin:0}.i{align-items:center;background:#0000008c;border:0;border-radius:999px;color:#fff;cursor:pointer;display:grid;font-size:1.5rem;height:2.25rem;justify-content:center;line-height:1;padding:0;position:absolute;top:50%;transform:translateY(-50%);transition:background .16s ease;width:2.25rem}.i:hover{background:#000000b8}.h{left:.75rem}.p{right:.75rem}.f{align-items:center;display:flex;gap:.5rem;justify-content:center}.m{background:#d4d4d8;border:0;border-radius:999px;cursor:pointer;height:.625rem;padding:0;transition:background .16s ease,width .16s ease;width:.625rem}.c{background:#1d4ed8;width:2rem}
@@ -1,4 +1,5 @@
1
1
  import type { ComponentConfig } from "@themodcraft/core-ui";
2
+ import type { CSSProperties, ReactNode } from "react";
2
3
  export interface SliderItem {
3
4
  image: string;
4
5
  link?: string;
@@ -7,11 +8,71 @@ export interface SliderItem {
7
8
  export interface SliderContent {
8
9
  slides: SliderItem[];
9
10
  }
11
+ export interface SliderAutoplayOptions {
12
+ delay?: number;
13
+ disableOnInteraction?: boolean;
14
+ enabled?: boolean;
15
+ pauseOnMouseEnter?: boolean;
16
+ }
17
+ export interface SliderPaginationOptions {
18
+ clickable?: boolean;
19
+ enabled?: boolean;
20
+ }
21
+ export interface SliderNavigationOptions {
22
+ enabled?: boolean;
23
+ nextLabel?: string;
24
+ prevLabel?: string;
25
+ }
26
+ export type SliderEffect = "fade" | "slide";
27
+ export interface SliderSwiperOptions {
28
+ allowTouchMove?: boolean;
29
+ autoplay?: boolean | SliderAutoplayOptions;
30
+ centeredSlides?: boolean;
31
+ direction?: "horizontal";
32
+ effect?: SliderEffect;
33
+ initialSlide?: number;
34
+ keyboard?: boolean | {
35
+ enabled?: boolean;
36
+ };
37
+ loop?: boolean;
38
+ mousewheel?: boolean | {
39
+ enabled?: boolean;
40
+ };
41
+ navigation?: boolean | SliderNavigationOptions;
42
+ pagination?: boolean | SliderPaginationOptions;
43
+ rewind?: boolean;
44
+ slidesPerView?: number | "auto";
45
+ spaceBetween?: number;
46
+ speed?: number;
47
+ [option: string]: unknown;
48
+ }
10
49
  export interface SliderProps {
50
+ allowTouchMove?: boolean;
51
+ aspectRatio?: CSSProperties["aspectRatio"];
11
52
  autoPlay?: boolean;
53
+ autoplay?: boolean | SliderAutoplayOptions;
12
54
  className?: string;
13
55
  content?: SliderContent;
56
+ centeredSlides?: boolean;
57
+ effect?: SliderEffect;
58
+ initialSlide?: number;
14
59
  intervalMs?: number;
60
+ keyboard?: boolean | {
61
+ enabled?: boolean;
62
+ };
63
+ loop?: boolean;
64
+ mousewheel?: boolean | {
65
+ enabled?: boolean;
66
+ };
67
+ navigation?: boolean | SliderNavigationOptions;
68
+ objectFit?: CSSProperties["objectFit"];
69
+ pagination?: boolean | SliderPaginationOptions;
70
+ rewind?: boolean;
71
+ slideRenderer?: (slide: SliderItem, index: number) => ReactNode;
15
72
  slides?: SliderItem[];
73
+ slidesPerView?: number | "auto";
74
+ spaceBetween?: number;
75
+ speed?: number;
76
+ swiperOptions?: SliderSwiperOptions;
16
77
  }
17
78
  export type SliderConfig = ComponentConfig<"pro-kit.slider", SliderProps>;
@@ -0,0 +1,9 @@
1
+ import type { SmartFormBuilderProps, SmartFormContextValue, SmartFormInputProps, SmartFormProps, SmartFormTextAreaProps } from "./SmartForm.types";
2
+ export declare const SmartFormContext: import("react").Context<SmartFormContextValue>;
3
+ export declare const CFormContext: import("react").Context<SmartFormContextValue>;
4
+ export declare function useSmartForm(): SmartFormContextValue;
5
+ export declare function SmartForm({ children, className, initialValues, noValidate, onChange, onInput, onSubmit, style, validate, ...props }: SmartFormProps): import("react").JSX.Element;
6
+ export declare function SmartFormField({ bgColorLabel, className, colorBorderText, colorLabelUp, error, label, name, onBlur, onChange, onFocus, placeholder, type, ...props }: SmartFormInputProps): import("react").JSX.Element;
7
+ export declare function SmartFormTextArea({ bgColorLabel, className, colorBorderText, colorLabelUp, error, label, name, onChange, onFocus, placeholder, ...props }: SmartFormTextAreaProps): import("react").JSX.Element;
8
+ export declare function SmartFormBuilder({ config, onSubmit, validate, ...props }: SmartFormBuilderProps): import("react").JSX.Element;
9
+ export declare const CForm: typeof SmartForm;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as o,jsxs as S,Fragment as R}from"react/jsx-runtime";import{Button as Z,Checkbox as _,getReadableTextColor as H,PhoneNumberField as M,RadioGroup as O,rgbToHex as D,Slider as G,Switch as P,TextArea as K,TextInput as W}from"@themodcraft/core-ui";import{LicenseGate as J,TMC_ENTITLEMENTS as Q}from"@themodcraft/license-client";import{createContext as X,useCallback as T,useContext as Y,useEffect as U,useMemo as E,useRef as B,useState as N}from"react";import l from"./SmartForm.module.css";import{OtpField as ee}from"../otp-field";const k=X({allFilled:!1,errors:{},values:{}}),ge=k;function w(){return Y(k)}function q(e,n){if(!e)return{};const t={};return e.querySelectorAll("input[name], textarea[name], select[name]").forEach(r=>{const u=r.getAttribute("name");if(u){if(r instanceof HTMLInputElement&&r.type==="checkbox"){t[u]=r.checked;return}if(r instanceof HTMLInputElement&&r.type==="radio"){r.checked?t[u]=r.value:u in t||(t[u]="");return}t[u]=r.value??""}}),n instanceof HTMLButtonElement&&n.name&&(t[n.name]=n.value||n.textContent?.trim()||"true"),n instanceof HTMLInputElement&&n.name&&["button","submit","reset"].includes(n.type)&&(t[n.name]=n.value||"true"),t}function te(e){return Object.values(e).some(Boolean)}function re(e){return typeof e=="boolean"?e:String(e??"").trim()!==""}function ne(e){return e.nativeEvent.submitter}function L({children:e,className:n,initialValues:t={},noValidate:a=!0,onChange:r,onInput:u,onSubmit:s,style:i,validate:g,...x}){const p=B(null),[c,d]=N(t),[f,C]=N({}),y=T(()=>{const m=q(p.current);d(m),r?.(m)},[r]),v=T(m=>{m.preventDefault();const F=q(p.current,ne(m));let V={};if(typeof g=="function")try{V=g(F)??{}}catch{V={_form:"Validation error"}}d(F),C(V),te(V)||s?.(F,m)},[s,g]),h=E(()=>{const m=c??{};return Object.keys(m).length>0&&Object.values(m).every(re)},[c]),$=E(()=>({allFilled:h,errors:f,values:c}),[h,f,c]);return o(J,{required:Q.proKit,children:o("form",{className:[l.form,n].filter(Boolean).join(" "),"data-tmc-smart-form":"true",noValidate:a,onChange:y,onInput:u,onSubmit:v,ref:p,style:i,...x,children:o(k.Provider,{value:$,children:e})})})}function ae(e,n){if(n.length<1)return;const t={email:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,number:/^\d+$/,password:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&(){}[\]_|+=?;:,.<>~*^#]{8,}$/,phone:/^\+?[0-9\s().-]{7,}$/,tel:/^\+?[0-9\s().-]{7,}$/,text:/^.{1,}$/};return(t[e??"text"]??t.text).test(n)?"#22c55e":"#ef4444"}function A({bgColorLabel:e,colorBorder:n,colorBorderText:t,colorLabelUp:a}){return{"--bg-color-label":e,"--color-border":n,"--color-label-up":a,"--color-text-border":t,"--tmc-smart-form-label-background":e,"--tmc-smart-form-label-text":a}}function j(e){const n=B(null),[t,a]=N(),r=T(()=>{const s=n.current;if(!s)return;const i=D(window.getComputedStyle(s).backgroundColor);i&&a(H(i))},[]),u={"--tmc-smart-form-auto-text":t,...e};return U(()=>{r()},[r]),{fieldRef:n,mergedStyle:u,resolveContrast:r}}function oe({bgColorLabel:e,className:n,colorBorderText:t,colorLabelUp:a,error:r,label:u,name:s,onBlur:i,onChange:g,onFocus:x,placeholder:p=" ",type:c="text",...d}){const{errors:f}=w(),[C,y]=N(void 0),[v,h]=N(!1),$=r??(s?f[s]:void 0),m=v&&c==="password"?"text":c,{fieldRef:F,mergedStyle:V,resolveContrast:z}=j(A({bgColorLabel:e,colorBorder:C,colorBorderText:t,colorLabelUp:a}));function I(b){g?.(b.target.value,b)}return S("div",{className:[l.fieldShell,n].filter(Boolean).join(" "),style:V,children:[S("label",{className:l.field,children:[o("input",{className:[l.control,c==="password"?l.controlWithAction:""].join(" "),name:s,onBlur:b=>{y(ae(c,b.target.value)),i?.(b)},onChange:I,onFocus:b=>{z(),x?.(b)},placeholder:p,ref:F,type:m,...d}),o("span",{className:l.label,children:u??s}),c==="password"?o("button",{className:l.passwordToggle,onClick:()=>h(b=>!b),type:"button",children:v?"Hide":"Show"}):null]}),$?o("span",{className:l.error,children:$}):null]})}function xe({bgColorLabel:e,className:n,colorBorderText:t,colorLabelUp:a,error:r,label:u,name:s,onChange:i,onFocus:g,placeholder:x=" ",...p}){const{errors:c}=w(),d=r??(s?c[s]:void 0),{fieldRef:f,mergedStyle:C,resolveContrast:y}=j(A({bgColorLabel:e,colorBorderText:t,colorLabelUp:a}));function v(h){i?.(h.target.value,h)}return S("div",{className:[l.fieldShell,n].filter(Boolean).join(" "),style:C,children:[S("label",{className:l.field,children:[o("textarea",{className:[l.control,l.textarea].join(" "),name:s,onChange:v,onFocus:h=>{y(),g?.(h)},placeholder:x,ref:f,...p}),o("span",{className:l.label,children:u??s})]}),d?o("span",{className:l.error,children:d}):null]})}function le(e,n){const t=n[e.name],a=String(t??"");if(e.required&&(typeof t=="boolean"?!t:a.trim()===""))return e.validation?.message??`${e.label} is required.`;if(a){if(e.validation?.minLength&&a.length<e.validation.minLength)return e.validation.message??`${e.label} needs at least ${e.validation.minLength} characters.`;if(e.validation?.maxLength&&a.length>e.validation.maxLength)return e.validation.message??`${e.label} must stay below ${e.validation.maxLength} characters.`;if(e.validation?.pattern)try{if(!new RegExp(e.validation.pattern).test(a))return e.validation.message??`${e.label} has an invalid format.`}catch{return}if(e.type==="email"&&!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(a))return e.validation?.message??`${e.label} must be a valid email.`;if(e.type==="phone"&&!/^\+?[0-9\s().-]{7,}$/.test(a))return e.validation?.message??`${e.label} must be a valid phone number.`;if(e.type==="otp"&&a.length!==(e.otpLength??6))return e.validation?.message??`${e.label} must be ${e.otpLength??6} characters.`}}function se(e,n={}){return e.reduce((t,a)=>(a.fields.forEach(r=>{r.name in t||(r.defaultValue!==void 0?t[r.name]=r.defaultValue:r.defaultChecked!==void 0&&(t[r.name]=r.defaultChecked))}),t),{...n})}function ue(e,n){const t=n[e.name];switch(e.type){case"checkbox":return o(_,{defaultChecked:e.defaultChecked??!!e.defaultValue,description:e.description,label:e.label,name:e.name},e.name);case"switch":return o(P,{defaultChecked:e.defaultChecked??!!e.defaultValue,description:e.description,label:e.label,name:e.name},e.name);case"slider":return o(G,{defaultValue:Number(e.defaultValue??e.min??0),label:e.label,max:e.max,min:e.min,name:e.name,showValue:e.showValue??!0,step:e.step},e.name);case"textarea":return o(K,{defaultValue:String(e.defaultValue??""),description:e.description,error:t,label:e.label,name:e.name,placeholder:e.placeholder},e.name);case"otp":return o(ee,{defaultValue:String(e.defaultValue??""),error:t,label:e.label,length:e.otpLength,name:e.name,required:e.required},e.name);case"password":return o(oe,{defaultValue:String(e.defaultValue??""),error:t,label:e.label,name:e.name,placeholder:e.placeholder??" ",required:e.required,type:"password"},e.name);case"phone":return o(M,{defaultValue:String(e.defaultValue??""),description:e.description,error:t,label:e.label,name:e.name,placeholder:e.placeholder,required:e.required},e.name);case"radio":return o(O,{defaultValue:String(e.defaultValue??""),description:e.description,label:e.label,name:e.name,options:e.options??[],required:e.required},e.name);default:return o(W,{defaultValue:String(e.defaultValue??""),description:e.description,error:t,label:e.label,name:e.name,placeholder:e.placeholder,required:e.required,type:e.type},e.name)}}function ce({sections:e}){const{errors:n}=w();return o(R,{children:e.map((t,a)=>S("section",{className:l.builderSection,children:[t.title||t.description?S("div",{className:l.builderSectionHeader,children:[t.title?o("h3",{className:l.builderSectionTitle,children:t.title}):null,t.description?o("p",{className:l.builderSectionDescription,children:t.description}):null]}):null,t.fields.map(r=>ue(r,n))]},String(t.title??a)))})}function Se({config:e,onSubmit:n,validate:t,...a}){const r=e.sections??[{fields:e.fields??[]}],u=se(r,e.initialValues);function s(i){return{...r.reduce((x,p)=>(p.fields.forEach(c=>{const d=le(c,i);d&&(x[c.name]=d)}),x),{}),...t?.(i)??{}}}return S(L,{initialValues:u,onSubmit:n,validate:s,...a,children:[o(ce,{sections:r}),o(Z,{buttonStyleType:"submit",name:e.submitName??"action",style:{margin:0},type:"submit",value:e.submitValue??"submit",children:e.submitLabel??"Submit"})]})}const fe=L;export{fe as CForm,ge as CFormContext,L as SmartForm,Se as SmartFormBuilder,k as SmartFormContext,oe as SmartFormField,xe as SmartFormTextArea,w as useSmartForm};
@@ -0,0 +1 @@
1
+ .t{align-items:stretch;background-color:inherit;border-radius:1rem;display:flex;flex-direction:column;gap:1rem;padding:2rem}.i{--size-bezel: .5rem;--size-radius: 6px;--color-label-up: var(--tmc-smart-form-auto-text, var(--tmc-color-accent, #2454d6));--bg-color-label: var(--tmc-smart-form-label-background, var(--tmc-color-surface-raised, #fbfcfe));--color-text-border: var(--tmc-smart-form-auto-text, var(--tmc-color-text, #151821));--color-border: color-mix(in srgb, var(--tmc-color-border, #cfd6df) 72%, transparent);display:grid;gap:.35rem;margin:calc(var(--size-bezel) * 1.5) 0;width:100%}.l{display:block;position:relative;width:100%}.r{background:var(--tmc-color-surface-raised, #fbfcfe);border:2px solid var(--color-border);border-radius:var(--size-radius);box-sizing:border-box;color:var(--color-text-border);display:block;font:inherit;line-height:1.35;min-height:3.1rem;padding:calc(var(--size-bezel) * 1.5) calc(var(--size-bezel) * 1.15);width:100%}.r:focus{border-color:var(--color-label-up);outline:none}.c{padding-right:4.25rem}.n{max-height:var(--tmc-smart-form-textarea-max-height, 18rem);min-height:8rem;overflow:auto;resize:vertical}.e{display:grid;gap:1rem}.e+.e{border-top:1px solid var(--tmc-color-border, #d7dde5);margin-top:.25rem;padding-top:1.25rem}.s{display:grid;gap:.35rem}.d{color:var(--tmc-field-label-text, var(--tmc-color-text, #151821));font-size:1rem;font-weight:700;margin:0}.m{color:var(--tmc-field-description-text, var(--tmc-color-text-muted, #5f6b7a));font-size:.86rem;line-height:1.5;margin:0}.o{background:var(--bg-color-label);color:var(--color-text-border);font-size:.95rem;font-weight:700;left:0;line-height:1.2;margin:calc(var(--size-bezel) * .75 + 3px) calc(var(--size-bezel) * .5);max-width:calc(100% - 1rem);overflow:hidden;padding:calc(var(--size-bezel) * .75) calc(var(--size-bezel) * .5);pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;transform:translate(0);transform-origin:0 0;transition:color .12s ease-in,transform .12s ease-in;white-space:nowrap}.r:focus+.o,.r:not(:placeholder-shown)+.o{color:var(--tmc-smart-form-label-text, var(--color-label-up));transform:translate(.25rem,-65%) scale(.8)}.a{background:transparent;border:0;color:var(--color-text-border);cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;padding:.35rem;position:absolute;right:.55rem;top:50%;transform:translateY(-50%)}.a:hover{color:var(--color-label-up)}.b{color:var(--tmc-color-danger, #d92d20);font-size:.82rem;line-height:1.4}
@@ -0,0 +1,83 @@
1
+ import type { ChangeEvent, CSSProperties, FormEvent, HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
2
+ export type SmartFormValue = boolean | number | string;
3
+ export type SmartFormValues = Record<string, SmartFormValue>;
4
+ export type SmartFormErrors = Record<string, ReactNode>;
5
+ export interface SmartFormContextValue {
6
+ allFilled: boolean;
7
+ errors: SmartFormErrors;
8
+ values: SmartFormValues;
9
+ }
10
+ export interface SmartFormProps extends Omit<HTMLAttributes<HTMLFormElement>, "onChange" | "onSubmit"> {
11
+ children?: ReactNode;
12
+ initialValues?: SmartFormValues;
13
+ noValidate?: boolean;
14
+ onChange?: (values: SmartFormValues) => void;
15
+ onSubmit?: (values: SmartFormValues, event: FormEvent<HTMLFormElement>) => void;
16
+ validate?: (values: SmartFormValues) => SmartFormErrors | void;
17
+ }
18
+ export interface SmartFormFieldBaseProps {
19
+ bgColorLabel?: string;
20
+ colorBorderText?: string;
21
+ colorLabelUp?: string;
22
+ error?: ReactNode;
23
+ label?: string;
24
+ }
25
+ export interface SmartFormInputProps extends SmartFormFieldBaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
26
+ onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
27
+ }
28
+ export interface SmartFormTextAreaProps extends SmartFormFieldBaseProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
29
+ onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
30
+ }
31
+ export interface SmartFormFieldStyle extends CSSProperties {
32
+ "--color-border"?: string;
33
+ "--color-label-up"?: string;
34
+ "--color-text-border"?: string;
35
+ "--bg-color-label"?: string;
36
+ "--tmc-smart-form-label-background"?: string;
37
+ "--tmc-smart-form-label-text"?: string;
38
+ }
39
+ export type SmartFormBuilderFieldType = "checkbox" | "email" | "number" | "otp" | "password" | "phone" | "radio" | "slider" | "switch" | "text" | "textarea";
40
+ export interface SmartFormBuilderValidation {
41
+ maxLength?: number;
42
+ message?: ReactNode;
43
+ minLength?: number;
44
+ pattern?: string;
45
+ }
46
+ export interface SmartFormBuilderField {
47
+ defaultChecked?: boolean;
48
+ defaultValue?: boolean | number | string;
49
+ description?: ReactNode;
50
+ label: string;
51
+ max?: number;
52
+ min?: number;
53
+ name: string;
54
+ otpLength?: number;
55
+ options?: Array<{
56
+ description?: ReactNode;
57
+ disabled?: boolean;
58
+ label: ReactNode;
59
+ value: string;
60
+ }>;
61
+ placeholder?: string;
62
+ required?: boolean;
63
+ showValue?: boolean;
64
+ step?: number;
65
+ type: SmartFormBuilderFieldType;
66
+ validation?: SmartFormBuilderValidation;
67
+ }
68
+ export interface SmartFormBuilderSection {
69
+ description?: ReactNode;
70
+ fields: SmartFormBuilderField[];
71
+ title?: ReactNode;
72
+ }
73
+ export interface SmartFormBuilderConfig {
74
+ fields?: SmartFormBuilderField[];
75
+ initialValues?: SmartFormValues;
76
+ sections?: SmartFormBuilderSection[];
77
+ submitLabel?: ReactNode;
78
+ submitName?: string;
79
+ submitValue?: string;
80
+ }
81
+ export interface SmartFormBuilderProps extends Omit<SmartFormProps, "children" | "initialValues"> {
82
+ config: SmartFormBuilderConfig;
83
+ }
File without changes
@@ -0,0 +1,2 @@
1
+ export { CForm, CFormContext, SmartForm, SmartFormBuilder, SmartFormContext, SmartFormField, SmartFormTextArea, useSmartForm } from "./SmartForm";
2
+ export type { SmartFormBuilderConfig, SmartFormBuilderField, SmartFormBuilderFieldType, SmartFormBuilderProps, SmartFormBuilderSection, SmartFormBuilderValidation, SmartFormContextValue, SmartFormErrors, SmartFormInputProps, SmartFormProps, SmartFormTextAreaProps, SmartFormValue, SmartFormValues } from "./SmartForm.types";
@@ -0,0 +1 @@
1
+ import{CForm as o,CFormContext as t,SmartForm as F,SmartFormBuilder as e,SmartFormContext as a,SmartFormField as S,SmartFormTextArea as x,useSmartForm as C}from"./SmartForm";export{o as CForm,t as CFormContext,F as SmartForm,e as SmartFormBuilder,a as SmartFormContext,S as SmartFormField,x as SmartFormTextArea,C as useSmartForm};
@@ -0,0 +1,3 @@
1
+ import type { TabGroupProps, TabProps } from "./Tabs.types";
2
+ export declare function Tab({ children }: TabProps): import("react").JSX.Element;
3
+ export declare function TabGroup({ children, className, defaultValue, onChange, value, ...props }: TabGroupProps): import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{Fragment as T,jsx as r,jsxs as l}from"react/jsx-runtime";import{LicenseGate as N,TMC_ENTITLEMENTS as v}from"@themodcraft/license-client";import{Children as x,isValidElement as j,useMemo as E,useState as g}from"react";import i from"./Tabs.module.css";function I({children:o}){return r(T,{children:o})}function M({children:o,className:n,defaultValue:p,onChange:d,value:c,...m}){const t=E(()=>x.toArray(o).filter(j),[o]),a=t.find(e=>!e.props.disabled),[u,f]=g(p??a?.props.id),b=c??u,s=t.find(e=>e.props.id===b)??a;function h(e){f(e),d?.(e)}return r(N,{required:v.proKit,children:l("div",{className:[i.root,n].filter(Boolean).join(" "),...m,children:[r("div",{"aria-orientation":"vertical",className:i.list,role:"tablist",children:t.map(e=>l("button",{"aria-controls":`${e.props.id}-panel`,"aria-selected":s?.props.id===e.props.id,className:i.trigger,disabled:e.props.disabled,id:`${e.props.id}-tab`,onClick:()=>h(e.props.id),role:"tab",type:"button",children:[r("span",{className:i.title,children:e.props.title}),e.props.description?r("span",{className:i.description,children:e.props.description}):null]},e.props.id))}),s?r("div",{"aria-labelledby":`${s.props.id}-tab`,className:i.panel,id:`${s.props.id}-panel`,role:"tabpanel",children:s.props.children}):null]})})}export{I as Tab,M as TabGroup};
@@ -0,0 +1 @@
1
+ .o{display:grid;gap:1rem;width:100%}.a{background:var(--secondary-background, var(--tmc-color-surface-raised, #fbfcfe));border:1px solid var(--tmc-color-border, #d7dde5);border-radius:8px;display:grid;gap:.35rem;padding:.35rem}.r{background:transparent;border:0;border-radius:6px;color:var(--tmc-color-text, #151821);cursor:pointer;display:grid;gap:.2rem;padding:.75rem;text-align:left}.r:hover{background:var(--tmc-color-hover, color-mix(in srgb, var(--tmc-color-accent, #2454d6) 10%, transparent))}.r[aria-selected=true]{background:color-mix(in srgb,var(--tmc-color-accent, #2454d6) 14%,transparent)}.r:disabled{cursor:not-allowed;opacity:.55}.d{font-weight:750}.e{color:var(--tmc-color-text-muted, #5f6b7a);font-size:.82rem;line-height:1.45}.c{background:var(--secondary-background, var(--tmc-color-surface-raised, #fbfcfe));border:1px solid var(--tmc-color-border, #d7dde5);border-radius:8px;color:var(--tmc-color-text, #151821);padding:1rem}@media(min-width:720px){.o{grid-template-columns:minmax(220px,.35fr) minmax(0,1fr)}}
@@ -0,0 +1,14 @@
1
+ import type { HTMLAttributes, ReactElement, ReactNode } from "react";
2
+ export interface TabProps {
3
+ children: ReactNode;
4
+ description?: ReactNode;
5
+ disabled?: boolean;
6
+ id: string;
7
+ title: ReactNode;
8
+ }
9
+ export interface TabGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
10
+ children: ReactElement<TabProps> | ReactElement<TabProps>[];
11
+ defaultValue?: string;
12
+ onChange?: (id: string) => void;
13
+ value?: string;
14
+ }
File without changes
@@ -0,0 +1,2 @@
1
+ export { Tab, TabGroup } from "./Tabs";
2
+ export type { TabGroupProps, TabProps } from "./Tabs.types";
@@ -0,0 +1 @@
1
+ import{Tab as a,TabGroup as b}from"./Tabs";export{a as Tab,b as TabGroup};
package/dist/index.d.ts CHANGED
@@ -1,7 +1,13 @@
1
1
  export * from "./auth";
2
2
  export * from "./components/banner";
3
+ export * from "./components/breadcrumbs";
4
+ export * from "./components/code-field";
3
5
  export * from "./components/container";
6
+ export * from "./components/data-table";
4
7
  export * from "./components/navbar";
5
8
  export * from "./components/overlay";
9
+ export * from "./components/otp-field";
6
10
  export * from "./components/slider";
11
+ export * from "./components/smart-form";
7
12
  export * from "./components/soon";
13
+ export * from "./components/tabs";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export*from"./auth";export*from"./components/banner";export*from"./components/container";export*from"./components/navbar";export*from"./components/overlay";export*from"./components/slider";export*from"./components/soon";
1
+ export*from"./auth";export*from"./components/banner";export*from"./components/breadcrumbs";export*from"./components/code-field";export*from"./components/container";export*from"./components/data-table";export*from"./components/navbar";export*from"./components/overlay";export*from"./components/otp-field";export*from"./components/slider";export*from"./components/smart-form";export*from"./components/soon";export*from"./components/tabs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@themodcraft/pro-kit",
3
- "version": "0.0.0",
3
+ "version": "1.1.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -30,8 +30,8 @@
30
30
  "dependencies": {
31
31
  "@emotion/react": "^11.14.0",
32
32
  "@emotion/styled": "^11.14.1",
33
- "@themodcraft/core-ui": "0.0.0",
34
- "@themodcraft/license-client": "0.0.0"
33
+ "@themodcraft/core-ui": "1.1.0",
34
+ "@themodcraft/license-client": "1.1.0"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "react": "^19.0.0",