@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.
- package/README.md +20 -0
- package/dist/components/banner/Banner.js +1 -1
- package/dist/components/banner/Banner.module.css +1 -0
- package/dist/components/breadcrumbs/BreadcrumbProvider.d.ts +7 -0
- package/dist/components/breadcrumbs/BreadcrumbProvider.js +1 -0
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +2 -0
- package/dist/components/breadcrumbs/Breadcrumbs.js +1 -0
- package/dist/components/breadcrumbs/Breadcrumbs.module.css +1 -0
- package/dist/components/breadcrumbs/Breadcrumbs.types.d.ts +12 -0
- package/dist/components/breadcrumbs/Breadcrumbs.types.js +0 -0
- package/dist/components/breadcrumbs/index.d.ts +3 -0
- package/dist/components/breadcrumbs/index.js +1 -0
- package/dist/components/code-field/CodeField.d.ts +2 -0
- package/dist/components/code-field/CodeField.js +3 -0
- package/dist/components/code-field/CodeField.module.css +1 -0
- package/dist/components/code-field/CodeField.types.d.ts +12 -0
- package/dist/components/code-field/CodeField.types.js +0 -0
- package/dist/components/code-field/index.d.ts +2 -0
- package/dist/components/code-field/index.js +1 -0
- package/dist/components/container/container.module.css +1 -1
- package/dist/components/data-table/DataTable.d.ts +2 -0
- package/dist/components/data-table/DataTable.js +1 -0
- package/dist/components/data-table/DataTable.module.css +1 -0
- package/dist/components/data-table/DataTable.types.d.ts +53 -0
- package/dist/components/data-table/DataTable.types.js +0 -0
- package/dist/components/data-table/index.d.ts +2 -0
- package/dist/components/data-table/index.js +1 -0
- package/dist/components/navbar/Navbar.d.ts +1 -1
- package/dist/components/navbar/Navbar.js +1 -1
- package/dist/components/navbar/Navbar.types.d.ts +2 -0
- package/dist/components/navbar/configs/docs.navbar.config.json +10 -9
- package/dist/components/navbar/navbar.config.schema.json +6 -0
- package/dist/components/navbar/style_navbar.module.css +1 -1
- package/dist/components/otp-field/OtpField.d.ts +2 -0
- package/dist/components/otp-field/OtpField.js +1 -0
- package/dist/components/otp-field/OtpField.module.css +1 -0
- package/dist/components/otp-field/OtpField.types.d.ts +20 -0
- package/dist/components/otp-field/OtpField.types.js +0 -0
- package/dist/components/otp-field/index.d.ts +2 -0
- package/dist/components/otp-field/index.js +1 -0
- package/dist/components/overlay/Overlay.js +2 -2
- package/dist/components/overlay/Overlay.module.css +1 -1
- package/dist/components/slider/Slider.d.ts +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/slider/Slider.module.css +1 -0
- package/dist/components/slider/Slider.types.d.ts +61 -0
- package/dist/components/smart-form/SmartForm.d.ts +9 -0
- package/dist/components/smart-form/SmartForm.js +1 -0
- package/dist/components/smart-form/SmartForm.module.css +1 -0
- package/dist/components/smart-form/SmartForm.types.d.ts +83 -0
- package/dist/components/smart-form/SmartForm.types.js +0 -0
- package/dist/components/smart-form/index.d.ts +2 -0
- package/dist/components/smart-form/index.js +1 -0
- package/dist/components/tabs/Tabs.d.ts +3 -0
- package/dist/components/tabs/Tabs.js +1 -0
- package/dist/components/tabs/Tabs.module.css +1 -0
- package/dist/components/tabs/Tabs.types.d.ts +14 -0
- package/dist/components/tabs/Tabs.types.js +0 -0
- package/dist/components/tabs/index.d.ts +2 -0
- package/dist/components/tabs/index.js +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +1 -1
- 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
|
|
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 @@
|
|
|
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
|
+
}
|
|
File without changes
|
|
@@ -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 @@
|
|
|
1
|
+
import{CodeField as d}from"./CodeField";export{d as CodeField};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
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 @@
|
|
|
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": "
|
|
21
|
+
"href": "/components"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"label": "Pro Kit",
|
|
25
|
-
"href": "
|
|
25
|
+
"href": "/pro-kit",
|
|
26
26
|
"children": [
|
|
27
27
|
{
|
|
28
|
-
"label": "
|
|
29
|
-
"href": "
|
|
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": "
|
|
39
|
+
"href": "/addons",
|
|
40
40
|
"children": [
|
|
41
41
|
{
|
|
42
42
|
"label": "Animations",
|
|
43
|
-
"href": "
|
|
43
|
+
"href": "/addons"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
"label": "Charts",
|
|
47
|
-
"href": "
|
|
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 @@
|
|
|
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
|
|
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
|
|
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}.
|
|
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({
|
|
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
|
|
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 @@
|
|
|
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": "
|
|
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": "
|
|
34
|
-
"@themodcraft/license-client": "
|
|
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",
|