@beyondcorp/beyond-ui 1.0.3 → 1.0.5
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/dist/index.cjs +2438 -397
- package/dist/index.d.cts +348 -0
- package/dist/index.d.ts +348 -28
- package/dist/index.js +1143 -4913
- package/package.json +3 -2
- package/dist/hooks/useBreakpoint.d.ts +0 -14
- package/dist/hooks/useDarkMode.d.ts +0 -4
- package/dist/hooks/useDebounce.d.ts +0 -1
- package/dist/hooks/useLocalStorage.d.ts +0 -1
- package/dist/hooks/useToggle.d.ts +0 -1
- package/dist/theme/default.d.ts +0 -69
- package/dist/utils/cn.d.ts +0 -3
package/dist/index.cjs
CHANGED
|
@@ -1,431 +1,1911 @@
|
|
|
1
|
-
|
|
2
|
-
* @license React
|
|
3
|
-
* react-jsx-runtime.production.min.js
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var Zt;function Pa(){if(Zt)return qe;Zt=1;var t=N,r=Symbol.for("react.element"),a=Symbol.for("react.fragment"),s=Object.prototype.hasOwnProperty,o=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function l(c,u,p){var m,h={},b=null,x=null;p!==void 0&&(b=""+p),u.key!==void 0&&(b=""+u.key),u.ref!==void 0&&(x=u.ref);for(m in u)s.call(u,m)&&!i.hasOwnProperty(m)&&(h[m]=u[m]);if(c&&c.defaultProps)for(m in u=c.defaultProps,u)h[m]===void 0&&(h[m]=u[m]);return{$$typeof:r,type:c,key:b,ref:x,props:h,_owner:o.current}}return qe.Fragment=a,qe.jsx=l,qe.jsxs=l,qe}var He={};/**
|
|
10
|
-
* @license React
|
|
11
|
-
* react-jsx-runtime.development.js
|
|
12
|
-
*
|
|
13
|
-
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
14
|
-
*
|
|
15
|
-
* This source code is licensed under the MIT license found in the
|
|
16
|
-
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var Xt;function Va(){return Xt||(Xt=1,process.env.NODE_ENV!=="production"&&function(){var t=N,r=Symbol.for("react.element"),a=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),m=Symbol.for("react.suspense_list"),h=Symbol.for("react.memo"),b=Symbol.for("react.lazy"),x=Symbol.for("react.offscreen"),E=Symbol.iterator,A="@@iterator";function k(n){if(n===null||typeof n!="object")return null;var d=E&&n[E]||n[A];return typeof d=="function"?d:null}var M=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function v(n){{for(var d=arguments.length,g=new Array(d>1?d-1:0),w=1;w<d;w++)g[w-1]=arguments[w];O("error",n,g)}}function O(n,d,g){{var w=M.ReactDebugCurrentFrame,D=w.getStackAddendum();D!==""&&(d+="%s",g=g.concat([D]));var _=g.map(function(T){return String(T)});_.unshift("Warning: "+d),Function.prototype.apply.call(console[n],console,_)}}var W=!1,R=!1,U=!1,q=!1,Ne=!1,ie;ie=Symbol.for("react.module.reference");function Fe(n){return!!(typeof n=="string"||typeof n=="function"||n===s||n===i||Ne||n===o||n===p||n===m||q||n===x||W||R||U||typeof n=="object"&&n!==null&&(n.$$typeof===b||n.$$typeof===h||n.$$typeof===l||n.$$typeof===c||n.$$typeof===u||n.$$typeof===ie||n.getModuleId!==void 0))}function $e(n,d,g){var w=n.displayName;if(w)return w;var D=d.displayName||d.name||"";return D!==""?g+"("+D+")":g}function z(n){return n.displayName||"Context"}function Y(n){if(n==null)return null;if(typeof n.tag=="number"&&v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof n=="function")return n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case s:return"Fragment";case a:return"Portal";case i:return"Profiler";case o:return"StrictMode";case p:return"Suspense";case m:return"SuspenseList"}if(typeof n=="object")switch(n.$$typeof){case c:var d=n;return z(d)+".Consumer";case l:var g=n;return z(g._context)+".Provider";case u:return $e(n,n.render,"ForwardRef");case h:var w=n.displayName||null;return w!==null?w:Y(n.type)||"Memo";case b:{var D=n,_=D._payload,T=D._init;try{return Y(T(_))}catch{return null}}}return null}var J=Object.assign,le=0,ke,Be,Ae,ce,We,K,Pt;function Vt(){}Vt.__reactDisabledLog=!0;function ia(){{if(le===0){ke=console.log,Be=console.info,Ae=console.warn,ce=console.error,We=console.group,K=console.groupCollapsed,Pt=console.groupEnd;var n={configurable:!0,enumerable:!0,value:Vt,writable:!0};Object.defineProperties(console,{info:n,log:n,warn:n,error:n,group:n,groupCollapsed:n,groupEnd:n})}le++}}function la(){{if(le--,le===0){var n={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:J({},n,{value:ke}),info:J({},n,{value:Be}),warn:J({},n,{value:Ae}),error:J({},n,{value:ce}),group:J({},n,{value:We}),groupCollapsed:J({},n,{value:K}),groupEnd:J({},n,{value:Pt})})}le<0&&v("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ut=M.ReactCurrentDispatcher,pt;function Xe(n,d,g){{if(pt===void 0)try{throw Error()}catch(D){var w=D.stack.trim().match(/\n( *(at )?)/);pt=w&&w[1]||""}return`
|
|
18
|
-
`+pt+n}}var mt=!1,Qe;{var ca=typeof WeakMap=="function"?WeakMap:Map;Qe=new ca}function Ot(n,d){if(!n||mt)return"";{var g=Qe.get(n);if(g!==void 0)return g}var w;mt=!0;var D=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var _;_=ut.current,ut.current=null,ia();try{if(d){var T=function(){throw Error()};if(Object.defineProperty(T.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(T,[])}catch(H){w=H}Reflect.construct(n,[],T)}else{try{T.call()}catch(H){w=H}n.call(T.prototype)}}else{try{throw Error()}catch(H){w=H}n()}}catch(H){if(H&&w&&typeof H.stack=="string"){for(var C=H.stack.split(`
|
|
19
|
-
`),G=w.stack.split(`
|
|
20
|
-
`),L=C.length-1,F=G.length-1;L>=1&&F>=0&&C[L]!==G[F];)F--;for(;L>=1&&F>=0;L--,F--)if(C[L]!==G[F]){if(L!==1||F!==1)do if(L--,F--,F<0||C[L]!==G[F]){var Z=`
|
|
21
|
-
`+C[L].replace(" at new "," at ");return n.displayName&&Z.includes("<anonymous>")&&(Z=Z.replace("<anonymous>",n.displayName)),typeof n=="function"&&Qe.set(n,Z),Z}while(L>=1&&F>=0);break}}}finally{mt=!1,ut.current=_,la(),Error.prepareStackTrace=D}var De=n?n.displayName||n.name:"",Ce=De?Xe(De):"";return typeof n=="function"&&Qe.set(n,Ce),Ce}function da(n,d,g){return Ot(n,!1)}function ua(n){var d=n.prototype;return!!(d&&d.isReactComponent)}function et(n,d,g){if(n==null)return"";if(typeof n=="function")return Ot(n,ua(n));if(typeof n=="string")return Xe(n);switch(n){case p:return Xe("Suspense");case m:return Xe("SuspenseList")}if(typeof n=="object")switch(n.$$typeof){case u:return da(n.render);case h:return et(n.type,d,g);case b:{var w=n,D=w._payload,_=w._init;try{return et(_(D),d,g)}catch{}}}return""}var Ue=Object.prototype.hasOwnProperty,It={},Lt=M.ReactDebugCurrentFrame;function tt(n){if(n){var d=n._owner,g=et(n.type,n._source,d?d.type:null);Lt.setExtraStackFrame(g)}else Lt.setExtraStackFrame(null)}function pa(n,d,g,w,D){{var _=Function.call.bind(Ue);for(var T in n)if(_(n,T)){var C=void 0;try{if(typeof n[T]!="function"){var G=Error((w||"React class")+": "+g+" type `"+T+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof n[T]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw G.name="Invariant Violation",G}C=n[T](d,T,w,g,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(L){C=L}C&&!(C instanceof Error)&&(tt(D),v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",w||"React class",g,T,typeof C),tt(null)),C instanceof Error&&!(C.message in It)&&(It[C.message]=!0,tt(D),v("Failed %s type: %s",g,C.message),tt(null))}}}var ma=Array.isArray;function ft(n){return ma(n)}function fa(n){{var d=typeof Symbol=="function"&&Symbol.toStringTag,g=d&&n[Symbol.toStringTag]||n.constructor.name||"Object";return g}}function ha(n){try{return Ft(n),!1}catch{return!0}}function Ft(n){return""+n}function $t(n){if(ha(n))return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",fa(n)),Ft(n)}var Ge=M.ReactCurrentOwner,ga={key:!0,ref:!0,__self:!0,__source:!0},Bt,Wt,ht;ht={};function xa(n){if(Ue.call(n,"ref")){var d=Object.getOwnPropertyDescriptor(n,"ref").get;if(d&&d.isReactWarning)return!1}return n.ref!==void 0}function ba(n){if(Ue.call(n,"key")){var d=Object.getOwnPropertyDescriptor(n,"key").get;if(d&&d.isReactWarning)return!1}return n.key!==void 0}function ya(n,d){if(typeof n.ref=="string"&&Ge.current&&d&&Ge.current.stateNode!==d){var g=Y(Ge.current.type);ht[g]||(v('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',Y(Ge.current.type),n.ref),ht[g]=!0)}}function va(n,d){{var g=function(){Bt||(Bt=!0,v("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",d))};g.isReactWarning=!0,Object.defineProperty(n,"key",{get:g,configurable:!0})}}function wa(n,d){{var g=function(){Wt||(Wt=!0,v("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",d))};g.isReactWarning=!0,Object.defineProperty(n,"ref",{get:g,configurable:!0})}}var ja=function(n,d,g,w,D,_,T){var C={$$typeof:r,type:n,key:d,ref:g,props:T,_owner:_};return C._store={},Object.defineProperty(C._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(C,"_self",{configurable:!1,enumerable:!1,writable:!1,value:w}),Object.defineProperty(C,"_source",{configurable:!1,enumerable:!1,writable:!1,value:D}),Object.freeze&&(Object.freeze(C.props),Object.freeze(C)),C};function Na(n,d,g,w,D){{var _,T={},C=null,G=null;g!==void 0&&($t(g),C=""+g),ba(d)&&($t(d.key),C=""+d.key),xa(d)&&(G=d.ref,ya(d,D));for(_ in d)Ue.call(d,_)&&!ga.hasOwnProperty(_)&&(T[_]=d[_]);if(n&&n.defaultProps){var L=n.defaultProps;for(_ in L)T[_]===void 0&&(T[_]=L[_])}if(C||G){var F=typeof n=="function"?n.displayName||n.name||"Unknown":n;C&&va(T,F),G&&wa(T,F)}return ja(n,C,G,D,w,Ge.current,T)}}var gt=M.ReactCurrentOwner,Ut=M.ReactDebugCurrentFrame;function Me(n){if(n){var d=n._owner,g=et(n.type,n._source,d?d.type:null);Ut.setExtraStackFrame(g)}else Ut.setExtraStackFrame(null)}var xt;xt=!1;function bt(n){return typeof n=="object"&&n!==null&&n.$$typeof===r}function Gt(){{if(gt.current){var n=Y(gt.current.type);if(n)return`
|
|
1
|
+
'use strict';
|
|
22
2
|
|
|
23
|
-
|
|
3
|
+
var React11 = require('react');
|
|
4
|
+
var reactSlot = require('@radix-ui/react-slot');
|
|
5
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var tailwindMerge = require('tailwind-merge');
|
|
8
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
+
var lucideReact = require('lucide-react');
|
|
10
|
+
var toast = require('react-hot-toast');
|
|
24
11
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<%s key={someKey} {...props} />`,yt,Ce,Da,Ce),Jt[Ce+yt]=!0}}return n===s?Ta(F):Sa(F),F}}function Ra(n,d,g){return Kt(n,d,g,!0)}function Ea(n,d,g){return Kt(n,d,g,!1)}var Aa=Ea,Ma=Ra;He.Fragment=s,He.jsx=Aa,He.jsxs=Ma}()),He}process.env.NODE_ENV==="production"?wt.exports=Pa():wt.exports=Va();var e=wt.exports;function Qt(t,r){if(typeof t=="function")return t(r);t!=null&&(t.current=r)}function Oa(...t){return r=>{let a=!1;const s=t.map(o=>{const i=Qt(o,r);return!a&&typeof i=="function"&&(a=!0),i});if(a)return()=>{for(let o=0;o<s.length;o++){const i=s[o];typeof i=="function"?i():Qt(t[o],null)}}}}function Ia(t){const r=Fa(t),a=f.forwardRef((s,o)=>{const{children:i,...l}=s,c=f.Children.toArray(i),u=c.find(Ba);if(u){const p=u.props.children,m=c.map(h=>h===u?f.Children.count(p)>1?f.Children.only(null):f.isValidElement(p)?p.props.children:null:h);return e.jsx(r,{...l,ref:o,children:f.isValidElement(p)?f.cloneElement(p,void 0,m):null})}return e.jsx(r,{...l,ref:o,children:i})});return a.displayName=`${t}.Slot`,a}var La=Ia("Slot");function Fa(t){const r=f.forwardRef((a,s)=>{const{children:o,...i}=a;if(f.isValidElement(o)){const l=Ua(o),c=Wa(i,o.props);return o.type!==f.Fragment&&(c.ref=s?Oa(s,l):l),f.cloneElement(o,c)}return f.Children.count(o)>1?f.Children.only(null):null});return r.displayName=`${t}.SlotClone`,r}var $a=Symbol("radix.slottable");function Ba(t){return f.isValidElement(t)&&typeof t.type=="function"&&"__radixId"in t.type&&t.type.__radixId===$a}function Wa(t,r){const a={...r};for(const s in r){const o=t[s],i=r[s];/^on[A-Z]/.test(s)?o&&i?a[s]=(...c)=>{const u=i(...c);return o(...c),u}:o&&(a[s]=o):s==="style"?a[s]={...o,...i}:s==="className"&&(a[s]=[o,i].filter(Boolean).join(" "))}return{...t,...a}}function Ua(t){var s,o;let r=(s=Object.getOwnPropertyDescriptor(t.props,"ref"))==null?void 0:s.get,a=r&&"isReactWarning"in r&&r.isReactWarning;return a?t.ref:(r=(o=Object.getOwnPropertyDescriptor(t,"ref"))==null?void 0:o.get,a=r&&"isReactWarning"in r&&r.isReactWarning,a?t.props.ref:t.props.ref||t.ref)}function ir(t){var r,a,s="";if(typeof t=="string"||typeof t=="number")s+=t;else if(typeof t=="object")if(Array.isArray(t)){var o=t.length;for(r=0;r<o;r++)t[r]&&(a=ir(t[r]))&&(s&&(s+=" "),s+=a)}else for(a in t)t[a]&&(s&&(s+=" "),s+=a);return s}function lr(){for(var t,r,a=0,s="",o=arguments.length;a<o;a++)(t=arguments[a])&&(r=ir(t))&&(s&&(s+=" "),s+=r);return s}const er=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,tr=lr,I=(t,r)=>a=>{var s;if((r==null?void 0:r.variants)==null)return tr(t,a==null?void 0:a.class,a==null?void 0:a.className);const{variants:o,defaultVariants:i}=r,l=Object.keys(o).map(p=>{const m=a==null?void 0:a[p],h=i==null?void 0:i[p];if(m===null)return null;const b=er(m)||er(h);return o[p][b]}),c=a&&Object.entries(a).reduce((p,m)=>{let[h,b]=m;return b===void 0||(p[h]=b),p},{}),u=r==null||(s=r.compoundVariants)===null||s===void 0?void 0:s.reduce((p,m)=>{let{class:h,className:b,...x}=m;return Object.entries(x).every(E=>{let[A,k]=E;return Array.isArray(k)?k.includes({...i,...c}[A]):{...i,...c}[A]===k})?[...p,h,b]:p},[]);return tr(t,l,u,a==null?void 0:a.class,a==null?void 0:a.className)},St="-",Ga=t=>{const r=Ha(t),{conflictingClassGroups:a,conflictingClassGroupModifiers:s}=t;return{getClassGroupId:l=>{const c=l.split(St);return c[0]===""&&c.length!==1&&c.shift(),cr(c,r)||qa(l)},getConflictingClassGroupIds:(l,c)=>{const u=a[l]||[];return c&&s[l]?[...u,...s[l]]:u}}},cr=(t,r)=>{var l;if(t.length===0)return r.classGroupId;const a=t[0],s=r.nextPart.get(a),o=s?cr(t.slice(1),s):void 0;if(o)return o;if(r.validators.length===0)return;const i=t.join(St);return(l=r.validators.find(({validator:c})=>c(i)))==null?void 0:l.classGroupId},rr=/^\[(.+)\]$/,qa=t=>{if(rr.test(t)){const r=rr.exec(t)[1],a=r==null?void 0:r.substring(0,r.indexOf(":"));if(a)return"arbitrary.."+a}},Ha=t=>{const{theme:r,prefix:a}=t,s={nextPart:new Map,validators:[]};return Ja(Object.entries(t.classGroups),a).forEach(([i,l])=>{jt(l,s,i,r)}),s},jt=(t,r,a,s)=>{t.forEach(o=>{if(typeof o=="string"){const i=o===""?r:ar(r,o);i.classGroupId=a;return}if(typeof o=="function"){if(Ya(o)){jt(o(s),r,a,s);return}r.validators.push({validator:o,classGroupId:a});return}Object.entries(o).forEach(([i,l])=>{jt(l,ar(r,i),a,s)})})},ar=(t,r)=>{let a=t;return r.split(St).forEach(s=>{a.nextPart.has(s)||a.nextPart.set(s,{nextPart:new Map,validators:[]}),a=a.nextPart.get(s)}),a},Ya=t=>t.isThemeGetter,Ja=(t,r)=>r?t.map(([a,s])=>{const o=s.map(i=>typeof i=="string"?r+i:typeof i=="object"?Object.fromEntries(Object.entries(i).map(([l,c])=>[r+l,c])):i);return[a,o]}):t,Ka=t=>{if(t<1)return{get:()=>{},set:()=>{}};let r=0,a=new Map,s=new Map;const o=(i,l)=>{a.set(i,l),r++,r>t&&(r=0,s=a,a=new Map)};return{get(i){let l=a.get(i);if(l!==void 0)return l;if((l=s.get(i))!==void 0)return o(i,l),l},set(i,l){a.has(i)?a.set(i,l):o(i,l)}}},dr="!",Za=t=>{const{separator:r,experimentalParseClassName:a}=t,s=r.length===1,o=r[0],i=r.length,l=c=>{const u=[];let p=0,m=0,h;for(let k=0;k<c.length;k++){let M=c[k];if(p===0){if(M===o&&(s||c.slice(k,k+i)===r)){u.push(c.slice(m,k)),m=k+i;continue}if(M==="/"){h=k;continue}}M==="["?p++:M==="]"&&p--}const b=u.length===0?c:c.substring(m),x=b.startsWith(dr),E=x?b.substring(1):b,A=h&&h>m?h-m:void 0;return{modifiers:u,hasImportantModifier:x,baseClassName:E,maybePostfixModifierPosition:A}};return a?c=>a({className:c,parseClassName:l}):l},Xa=t=>{if(t.length<=1)return t;const r=[];let a=[];return t.forEach(s=>{s[0]==="["?(r.push(...a.sort(),s),a=[]):a.push(s)}),r.push(...a.sort()),r},Qa=t=>({cache:Ka(t.cacheSize),parseClassName:Za(t),...Ga(t)}),es=/\s+/,ts=(t,r)=>{const{parseClassName:a,getClassGroupId:s,getConflictingClassGroupIds:o}=r,i=[],l=t.trim().split(es);let c="";for(let u=l.length-1;u>=0;u-=1){const p=l[u],{modifiers:m,hasImportantModifier:h,baseClassName:b,maybePostfixModifierPosition:x}=a(p);let E=!!x,A=s(E?b.substring(0,x):b);if(!A){if(!E){c=p+(c.length>0?" "+c:c);continue}if(A=s(b),!A){c=p+(c.length>0?" "+c:c);continue}E=!1}const k=Xa(m).join(":"),M=h?k+dr:k,v=M+A;if(i.includes(v))continue;i.push(v);const O=o(A,E);for(let W=0;W<O.length;++W){const R=O[W];i.push(M+R)}c=p+(c.length>0?" "+c:c)}return c};function rs(){let t=0,r,a,s="";for(;t<arguments.length;)(r=arguments[t++])&&(a=ur(r))&&(s&&(s+=" "),s+=a);return s}const ur=t=>{if(typeof t=="string")return t;let r,a="";for(let s=0;s<t.length;s++)t[s]&&(r=ur(t[s]))&&(a&&(a+=" "),a+=r);return a};function as(t,...r){let a,s,o,i=l;function l(u){const p=r.reduce((m,h)=>h(m),t());return a=Qa(p),s=a.cache.get,o=a.cache.set,i=c,c(u)}function c(u){const p=s(u);if(p)return p;const m=ts(u,a);return o(u,m),m}return function(){return i(rs.apply(null,arguments))}}const V=t=>{const r=a=>a[t]||[];return r.isThemeGetter=!0,r},pr=/^\[(?:([a-z-]+):)?(.+)\]$/i,ss=/^\d+\/\d+$/,ns=new Set(["px","full","screen"]),os=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,is=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,ls=/^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/,cs=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,ds=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,se=t=>_e(t)||ns.has(t)||ss.test(t),de=t=>Le(t,"length",bs),_e=t=>!!t&&!Number.isNaN(Number(t)),vt=t=>Le(t,"number",_e),Ye=t=>!!t&&Number.isInteger(Number(t)),us=t=>t.endsWith("%")&&_e(t.slice(0,-1)),j=t=>pr.test(t),ue=t=>os.test(t),ps=new Set(["length","size","percentage"]),ms=t=>Le(t,ps,mr),fs=t=>Le(t,"position",mr),hs=new Set(["image","url"]),gs=t=>Le(t,hs,vs),xs=t=>Le(t,"",ys),Je=()=>!0,Le=(t,r,a)=>{const s=pr.exec(t);return s?s[1]?typeof r=="string"?s[1]===r:r.has(s[1]):a(s[2]):!1},bs=t=>is.test(t)&&!ls.test(t),mr=()=>!1,ys=t=>cs.test(t),vs=t=>ds.test(t),ws=()=>{const t=V("colors"),r=V("spacing"),a=V("blur"),s=V("brightness"),o=V("borderColor"),i=V("borderRadius"),l=V("borderSpacing"),c=V("borderWidth"),u=V("contrast"),p=V("grayscale"),m=V("hueRotate"),h=V("invert"),b=V("gap"),x=V("gradientColorStops"),E=V("gradientColorStopPositions"),A=V("inset"),k=V("margin"),M=V("opacity"),v=V("padding"),O=V("saturate"),W=V("scale"),R=V("sepia"),U=V("skew"),q=V("space"),Ne=V("translate"),ie=()=>["auto","contain","none"],Fe=()=>["auto","hidden","clip","visible","scroll"],$e=()=>["auto",j,r],z=()=>[j,r],Y=()=>["",se,de],J=()=>["auto",_e,j],le=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],ke=()=>["solid","dashed","dotted","double","none"],Be=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],Ae=()=>["start","end","center","between","around","evenly","stretch"],ce=()=>["","0",j],We=()=>["auto","avoid","all","avoid-page","page","left","right","column"],K=()=>[_e,j];return{cacheSize:500,separator:":",theme:{colors:[Je],spacing:[se,de],blur:["none","",ue,j],brightness:K(),borderColor:[t],borderRadius:["none","","full",ue,j],borderSpacing:z(),borderWidth:Y(),contrast:K(),grayscale:ce(),hueRotate:K(),invert:ce(),gap:z(),gradientColorStops:[t],gradientColorStopPositions:[us,de],inset:$e(),margin:$e(),opacity:K(),padding:z(),saturate:K(),scale:K(),sepia:ce(),skew:K(),space:z(),translate:z()},classGroups:{aspect:[{aspect:["auto","square","video",j]}],container:["container"],columns:[{columns:[ue]}],"break-after":[{"break-after":We()}],"break-before":[{"break-before":We()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...le(),j]}],overflow:[{overflow:Fe()}],"overflow-x":[{"overflow-x":Fe()}],"overflow-y":[{"overflow-y":Fe()}],overscroll:[{overscroll:ie()}],"overscroll-x":[{"overscroll-x":ie()}],"overscroll-y":[{"overscroll-y":ie()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[A]}],"inset-x":[{"inset-x":[A]}],"inset-y":[{"inset-y":[A]}],start:[{start:[A]}],end:[{end:[A]}],top:[{top:[A]}],right:[{right:[A]}],bottom:[{bottom:[A]}],left:[{left:[A]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",Ye,j]}],basis:[{basis:$e()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",j]}],grow:[{grow:ce()}],shrink:[{shrink:ce()}],order:[{order:["first","last","none",Ye,j]}],"grid-cols":[{"grid-cols":[Je]}],"col-start-end":[{col:["auto",{span:["full",Ye,j]},j]}],"col-start":[{"col-start":J()}],"col-end":[{"col-end":J()}],"grid-rows":[{"grid-rows":[Je]}],"row-start-end":[{row:["auto",{span:[Ye,j]},j]}],"row-start":[{"row-start":J()}],"row-end":[{"row-end":J()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",j]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",j]}],gap:[{gap:[b]}],"gap-x":[{"gap-x":[b]}],"gap-y":[{"gap-y":[b]}],"justify-content":[{justify:["normal",...Ae()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...Ae(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...Ae(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[v]}],px:[{px:[v]}],py:[{py:[v]}],ps:[{ps:[v]}],pe:[{pe:[v]}],pt:[{pt:[v]}],pr:[{pr:[v]}],pb:[{pb:[v]}],pl:[{pl:[v]}],m:[{m:[k]}],mx:[{mx:[k]}],my:[{my:[k]}],ms:[{ms:[k]}],me:[{me:[k]}],mt:[{mt:[k]}],mr:[{mr:[k]}],mb:[{mb:[k]}],ml:[{ml:[k]}],"space-x":[{"space-x":[q]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[q]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",j,r]}],"min-w":[{"min-w":[j,r,"min","max","fit"]}],"max-w":[{"max-w":[j,r,"none","full","min","max","fit","prose",{screen:[ue]},ue]}],h:[{h:[j,r,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[j,r,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[j,r,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[j,r,"auto","min","max","fit"]}],"font-size":[{text:["base",ue,de]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",vt]}],"font-family":[{font:[Je]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",j]}],"line-clamp":[{"line-clamp":["none",_e,vt]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",se,j]}],"list-image":[{"list-image":["none",j]}],"list-style-type":[{list:["none","disc","decimal",j]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[t]}],"placeholder-opacity":[{"placeholder-opacity":[M]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[t]}],"text-opacity":[{"text-opacity":[M]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...ke(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",se,de]}],"underline-offset":[{"underline-offset":["auto",se,j]}],"text-decoration-color":[{decoration:[t]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:z()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",j]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",j]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[M]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...le(),fs]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",ms]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},gs]}],"bg-color":[{bg:[t]}],"gradient-from-pos":[{from:[E]}],"gradient-via-pos":[{via:[E]}],"gradient-to-pos":[{to:[E]}],"gradient-from":[{from:[x]}],"gradient-via":[{via:[x]}],"gradient-to":[{to:[x]}],rounded:[{rounded:[i]}],"rounded-s":[{"rounded-s":[i]}],"rounded-e":[{"rounded-e":[i]}],"rounded-t":[{"rounded-t":[i]}],"rounded-r":[{"rounded-r":[i]}],"rounded-b":[{"rounded-b":[i]}],"rounded-l":[{"rounded-l":[i]}],"rounded-ss":[{"rounded-ss":[i]}],"rounded-se":[{"rounded-se":[i]}],"rounded-ee":[{"rounded-ee":[i]}],"rounded-es":[{"rounded-es":[i]}],"rounded-tl":[{"rounded-tl":[i]}],"rounded-tr":[{"rounded-tr":[i]}],"rounded-br":[{"rounded-br":[i]}],"rounded-bl":[{"rounded-bl":[i]}],"border-w":[{border:[c]}],"border-w-x":[{"border-x":[c]}],"border-w-y":[{"border-y":[c]}],"border-w-s":[{"border-s":[c]}],"border-w-e":[{"border-e":[c]}],"border-w-t":[{"border-t":[c]}],"border-w-r":[{"border-r":[c]}],"border-w-b":[{"border-b":[c]}],"border-w-l":[{"border-l":[c]}],"border-opacity":[{"border-opacity":[M]}],"border-style":[{border:[...ke(),"hidden"]}],"divide-x":[{"divide-x":[c]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[c]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[M]}],"divide-style":[{divide:ke()}],"border-color":[{border:[o]}],"border-color-x":[{"border-x":[o]}],"border-color-y":[{"border-y":[o]}],"border-color-s":[{"border-s":[o]}],"border-color-e":[{"border-e":[o]}],"border-color-t":[{"border-t":[o]}],"border-color-r":[{"border-r":[o]}],"border-color-b":[{"border-b":[o]}],"border-color-l":[{"border-l":[o]}],"divide-color":[{divide:[o]}],"outline-style":[{outline:["",...ke()]}],"outline-offset":[{"outline-offset":[se,j]}],"outline-w":[{outline:[se,de]}],"outline-color":[{outline:[t]}],"ring-w":[{ring:Y()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[t]}],"ring-opacity":[{"ring-opacity":[M]}],"ring-offset-w":[{"ring-offset":[se,de]}],"ring-offset-color":[{"ring-offset":[t]}],shadow:[{shadow:["","inner","none",ue,xs]}],"shadow-color":[{shadow:[Je]}],opacity:[{opacity:[M]}],"mix-blend":[{"mix-blend":[...Be(),"plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":Be()}],filter:[{filter:["","none"]}],blur:[{blur:[a]}],brightness:[{brightness:[s]}],contrast:[{contrast:[u]}],"drop-shadow":[{"drop-shadow":["","none",ue,j]}],grayscale:[{grayscale:[p]}],"hue-rotate":[{"hue-rotate":[m]}],invert:[{invert:[h]}],saturate:[{saturate:[O]}],sepia:[{sepia:[R]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[a]}],"backdrop-brightness":[{"backdrop-brightness":[s]}],"backdrop-contrast":[{"backdrop-contrast":[u]}],"backdrop-grayscale":[{"backdrop-grayscale":[p]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[m]}],"backdrop-invert":[{"backdrop-invert":[h]}],"backdrop-opacity":[{"backdrop-opacity":[M]}],"backdrop-saturate":[{"backdrop-saturate":[O]}],"backdrop-sepia":[{"backdrop-sepia":[R]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[l]}],"border-spacing-x":[{"border-spacing-x":[l]}],"border-spacing-y":[{"border-spacing-y":[l]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",j]}],duration:[{duration:K()}],ease:[{ease:["linear","in","out","in-out",j]}],delay:[{delay:K()}],animate:[{animate:["none","spin","ping","pulse","bounce",j]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[W]}],"scale-x":[{"scale-x":[W]}],"scale-y":[{"scale-y":[W]}],rotate:[{rotate:[Ye,j]}],"translate-x":[{"translate-x":[Ne]}],"translate-y":[{"translate-y":[Ne]}],"skew-x":[{"skew-x":[U]}],"skew-y":[{"skew-y":[U]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",j]}],accent:[{accent:["auto",t]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",j]}],"caret-color":[{caret:[t]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":z()}],"scroll-mx":[{"scroll-mx":z()}],"scroll-my":[{"scroll-my":z()}],"scroll-ms":[{"scroll-ms":z()}],"scroll-me":[{"scroll-me":z()}],"scroll-mt":[{"scroll-mt":z()}],"scroll-mr":[{"scroll-mr":z()}],"scroll-mb":[{"scroll-mb":z()}],"scroll-ml":[{"scroll-ml":z()}],"scroll-p":[{"scroll-p":z()}],"scroll-px":[{"scroll-px":z()}],"scroll-py":[{"scroll-py":z()}],"scroll-ps":[{"scroll-ps":z()}],"scroll-pe":[{"scroll-pe":z()}],"scroll-pt":[{"scroll-pt":z()}],"scroll-pr":[{"scroll-pr":z()}],"scroll-pb":[{"scroll-pb":z()}],"scroll-pl":[{"scroll-pl":z()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",j]}],fill:[{fill:[t,"none"]}],"stroke-w":[{stroke:[se,de,vt]}],stroke:[{stroke:[t,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}},js=as(ws);function y(...t){return js(lr(t))}const fr=I("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{primary:"bg-primary-600 text-white hover:bg-primary-700",secondary:"bg-secondary-600 text-white hover:bg-secondary-700",danger:"bg-danger-600 text-white hover:bg-danger-700",success:"bg-success-600 text-white hover:bg-success-700",warning:"bg-warning-600 text-white hover:bg-warning-700",outline:"border border-primary-300 bg-white hover:bg-primary-50",ghost:"bg-transparent hover:bg-primary-50",link:"text-primary-600 underline-offset-4 hover:underline"},size:{sm:"h-8 px-3 text-xs",md:"h-10 px-4 py-2",lg:"h-11 px-8",xl:"h-12 px-10 text-base"}},defaultVariants:{variant:"primary",size:"md"}}),P=f.forwardRef(({className:t,variant:r,size:a,asChild:s=!1,...o},i)=>{const l=s?La:"button";return e.jsx(l,{className:y(fr({variant:r,size:a,className:t})),ref:i,...o})});P.displayName="Button";const hr=I("flex w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",{variants:{variant:{default:"border-gray-300",error:"border-danger-500 focus-visible:ring-danger-500",success:"border-success-500 focus-visible:ring-success-500"},inputSize:{sm:"h-8 px-2 text-xs",md:"h-10 px-3",lg:"h-12 px-4 text-base"}},defaultVariants:{variant:"default",inputSize:"md"}}),Q=f.forwardRef(({className:t,variant:r,inputSize:a,type:s,...o},i)=>e.jsx("input",{type:s,className:y(hr({variant:r,inputSize:a,className:t})),ref:i,...o}));Q.displayName="Input";const gr=I("rounded-lg border bg-white text-gray-950 shadow-sm",{variants:{variant:{default:"border-gray-200",elevated:"border-gray-200 shadow-md",outlined:"border-2 border-primary-200"},padding:{none:"p-0",sm:"p-4",md:"p-6",lg:"p-8"}},defaultVariants:{variant:"default",padding:"md"}}),fe=f.forwardRef(({className:t,variant:r,padding:a,...s},o)=>e.jsx("div",{ref:o,className:y(gr({variant:r,padding:a,className:t})),...s}));fe.displayName="Card";const Pe=f.forwardRef(({className:t,...r},a)=>e.jsx("div",{ref:a,className:y("flex flex-col space-y-1.5 p-6",t),...r}));Pe.displayName="CardHeader";const Ve=f.forwardRef(({className:t,...r},a)=>e.jsx("h3",{ref:a,className:y("text-2xl font-semibold leading-none tracking-tight",t),...r}));Ve.displayName="CardTitle";const xr=f.forwardRef(({className:t,...r},a)=>e.jsx("p",{ref:a,className:y("text-sm text-gray-500",t),...r}));xr.displayName="CardDescription";const he=f.forwardRef(({className:t,...r},a)=>e.jsx("div",{ref:a,className:y("p-6 pt-0",t),...r}));he.displayName="CardContent";const br=f.forwardRef(({className:t,...r},a)=>e.jsx("div",{ref:a,className:y("flex items-center p-6 pt-0",t),...r}));br.displayName="CardFooter";const yr=I("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary-600 text-white hover:bg-primary-700",secondary:"border-transparent bg-secondary-600 text-white hover:bg-secondary-700",success:"border-transparent bg-success-600 text-white hover:bg-success-700",danger:"border-transparent bg-danger-600 text-white hover:bg-danger-700",warning:"border-transparent bg-warning-600 text-white hover:bg-warning-700",outline:"text-gray-700 border-gray-300"}},defaultVariants:{variant:"default"}});function X({className:t,variant:r,...a}){return e.jsx("div",{className:y(yr({variant:r}),t),...a})}const vr=I("relative w-full rounded-lg border p-4",{variants:{variant:{default:"bg-white text-gray-950 border-gray-200",success:"bg-success-50 text-success-800 border-success-200",warning:"bg-warning-50 text-warning-800 border-warning-200",danger:"bg-danger-50 text-danger-800 border-danger-200",info:"bg-primary-50 text-primary-800 border-primary-200"}},defaultVariants:{variant:"default"}}),ee=f.forwardRef(({className:t,variant:r,...a},s)=>e.jsx("div",{ref:s,role:"alert",className:y(vr({variant:r}),t),...a}));ee.displayName="Alert";const te=f.forwardRef(({className:t,...r},a)=>e.jsx("h5",{ref:a,className:y("mb-1 font-medium leading-none tracking-tight",t),...r}));te.displayName="AlertTitle";const re=f.forwardRef(({className:t,...r},a)=>e.jsx("div",{ref:a,className:y("text-sm [&_p]:leading-relaxed",t),...r}));re.displayName="AlertDescription";const wr=I("relative flex shrink-0 overflow-hidden rounded-full",{variants:{size:{sm:"h-8 w-8",md:"h-10 w-10",lg:"h-16 w-16",xl:"h-20 w-20"}},defaultVariants:{size:"md"}}),ge=f.forwardRef(({className:t,size:r,...a},s)=>e.jsx("div",{ref:s,className:y(wr({size:r}),t),...a}));ge.displayName="Avatar";const xe=f.forwardRef(({className:t,...r},a)=>e.jsx("img",{ref:a,className:y("aspect-square h-full w-full object-cover",t),...r}));xe.displayName="AvatarImage";const be=f.forwardRef(({className:t,...r},a)=>e.jsx("div",{ref:a,className:y("flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600 font-medium",t),...r}));be.displayName="AvatarFallback";const jr=I("animate-spin rounded-full border-2 border-current border-t-transparent",{variants:{size:{sm:"h-4 w-4",md:"h-6 w-6",lg:"h-8 w-8",xl:"h-12 w-12"},variant:{primary:"text-primary-600",secondary:"text-secondary-600",white:"text-white",current:"text-current"}},defaultVariants:{size:"md",variant:"primary"}}),Ke=f.forwardRef(({className:t,size:r,variant:a,...s},o)=>e.jsx("div",{ref:o,className:y(jr({size:r,variant:a}),t),...s}));Ke.displayName="Spinner";const Nr=I("animate-pulse rounded-md bg-gray-200",{variants:{variant:{default:"bg-gray-200",darker:"bg-gray-300"}},defaultVariants:{variant:"default"}}),Se=f.forwardRef(({className:t,variant:r,...a},s)=>e.jsx("div",{ref:s,className:y(Nr({variant:r}),t),...a}));Se.displayName="Skeleton";const kr=I("flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",{variants:{variant:{default:"border-gray-300",error:"border-danger-500 focus-visible:ring-danger-500",success:"border-success-500 focus-visible:ring-success-500"}},defaultVariants:{variant:"default"}}),Te=f.forwardRef(({className:t,variant:r,...a},s)=>e.jsx("textarea",{className:y(kr({variant:r,className:t})),ref:s,...a}));Te.displayName="Textarea";const Cr=I("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200",{variants:{size:{sm:"h-5 w-9",md:"h-6 w-11",lg:"h-7 w-13"}},defaultVariants:{size:"md"}}),Ns=I("pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform",{variants:{size:{sm:"h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",md:"h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",lg:"h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"}},defaultVariants:{size:"md"}}),Re=f.forwardRef(({className:t,size:r,checked:a=!1,onCheckedChange:s,...o},i)=>{const l=()=>{s==null||s(!a)};return e.jsx("button",{type:"button",role:"switch","aria-checked":a,"data-state":a?"checked":"unchecked",className:y(Cr({size:r}),t),onClick:l,ref:i,...o,children:e.jsx("span",{"data-state":a?"checked":"unchecked",className:y(Ns({size:r}))})})});Re.displayName="Switch";/**
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
* This source code is licensed under the ISC license.
|
|
44
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
45
|
-
*/const Sr=S("AlertCircle",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"12",x2:"12",y1:"8",y2:"12",key:"1pkeuh"}],["line",{x1:"12",x2:"12.01",y1:"16",y2:"16",key:"4dfq90"}]]);/**
|
|
46
|
-
* @license lucide-react v0.344.0 - ISC
|
|
47
|
-
*
|
|
48
|
-
* This source code is licensed under the ISC license.
|
|
49
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
50
|
-
*/const Ss=S("AlertTriangle",[["path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",key:"c3ski4"}],["path",{d:"M12 9v4",key:"juzpu7"}],["path",{d:"M12 17h.01",key:"p32p05"}]]);/**
|
|
51
|
-
* @license lucide-react v0.344.0 - ISC
|
|
52
|
-
*
|
|
53
|
-
* This source code is licensed under the ISC license.
|
|
54
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
55
|
-
*/const we=S("BarChart3",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"M18 17V9",key:"2bz60n"}],["path",{d:"M13 17V5",key:"1frdt8"}],["path",{d:"M8 17v-3",key:"17ska0"}]]);/**
|
|
56
|
-
* @license lucide-react v0.344.0 - ISC
|
|
57
|
-
*
|
|
58
|
-
* This source code is licensed under the ISC license.
|
|
59
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
60
|
-
*/const Tr=S("Bell",[["path",{d:"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9",key:"1qo2s2"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}]]);/**
|
|
61
|
-
* @license lucide-react v0.344.0 - ISC
|
|
62
|
-
*
|
|
63
|
-
* This source code is licensed under the ISC license.
|
|
64
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
65
|
-
*/const Ts=S("Book",[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20",key:"t4utmx"}]]);/**
|
|
66
|
-
* @license lucide-react v0.344.0 - ISC
|
|
67
|
-
*
|
|
68
|
-
* This source code is licensed under the ISC license.
|
|
69
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
70
|
-
*/const Rs=S("Calendar",[["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M16 2v4",key:"4m81vk"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["path",{d:"M3 10h18",key:"8toen8"}]]);/**
|
|
71
|
-
* @license lucide-react v0.344.0 - ISC
|
|
72
|
-
*
|
|
73
|
-
* This source code is licensed under the ISC license.
|
|
74
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
75
|
-
*/const Es=S("CheckCircle",[["path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14",key:"g774vq"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]]);/**
|
|
76
|
-
* @license lucide-react v0.344.0 - ISC
|
|
77
|
-
*
|
|
78
|
-
* This source code is licensed under the ISC license.
|
|
79
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
80
|
-
*/const Rr=S("Check",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]);/**
|
|
81
|
-
* @license lucide-react v0.344.0 - ISC
|
|
82
|
-
*
|
|
83
|
-
* This source code is licensed under the ISC license.
|
|
84
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
85
|
-
*/const Er=S("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]);/**
|
|
86
|
-
* @license lucide-react v0.344.0 - ISC
|
|
87
|
-
*
|
|
88
|
-
* This source code is licensed under the ISC license.
|
|
89
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
90
|
-
*/const As=S("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]);/**
|
|
91
|
-
* @license lucide-react v0.344.0 - ISC
|
|
92
|
-
*
|
|
93
|
-
* This source code is licensed under the ISC license.
|
|
94
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
95
|
-
*/const Ar=S("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]);/**
|
|
96
|
-
* @license lucide-react v0.344.0 - ISC
|
|
97
|
-
*
|
|
98
|
-
* This source code is licensed under the ISC license.
|
|
99
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
100
|
-
*/const Ms=S("Code",[["polyline",{points:"16 18 22 12 16 6",key:"z7tu5w"}],["polyline",{points:"8 6 2 12 8 18",key:"1eg1df"}]]);/**
|
|
101
|
-
* @license lucide-react v0.344.0 - ISC
|
|
102
|
-
*
|
|
103
|
-
* This source code is licensed under the ISC license.
|
|
104
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
105
|
-
*/const Ds=S("Copy",[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/**
|
|
106
|
-
* @license lucide-react v0.344.0 - ISC
|
|
107
|
-
*
|
|
108
|
-
* This source code is licensed under the ISC license.
|
|
109
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
110
|
-
*/const zs=S("Eye",[["path",{d:"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z",key:"rwhkz3"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);/**
|
|
111
|
-
* @license lucide-react v0.344.0 - ISC
|
|
112
|
-
*
|
|
113
|
-
* This source code is licensed under the ISC license.
|
|
114
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
115
|
-
*/const _s=S("FileText",[["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",key:"1rqfz7"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M10 9H8",key:"b1mrlr"}],["path",{d:"M16 13H8",key:"t4e002"}],["path",{d:"M16 17H8",key:"z1uh3a"}]]);/**
|
|
116
|
-
* @license lucide-react v0.344.0 - ISC
|
|
117
|
-
*
|
|
118
|
-
* This source code is licensed under the ISC license.
|
|
119
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
120
|
-
*/const Ps=S("Home",[["path",{d:"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",key:"y5dka4"}],["polyline",{points:"9 22 9 12 15 12 15 22",key:"e2us08"}]]);/**
|
|
121
|
-
* @license lucide-react v0.344.0 - ISC
|
|
122
|
-
*
|
|
123
|
-
* This source code is licensed under the ISC license.
|
|
124
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
125
|
-
*/const Vs=S("Info",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]]);/**
|
|
126
|
-
* @license lucide-react v0.344.0 - ISC
|
|
127
|
-
*
|
|
128
|
-
* This source code is licensed under the ISC license.
|
|
129
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
130
|
-
*/const Os=S("LogOut",[["path",{d:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",key:"1uf3rs"}],["polyline",{points:"16 17 21 12 16 7",key:"1gabdz"}],["line",{x1:"21",x2:"9",y1:"12",y2:"12",key:"1uyos4"}]]);/**
|
|
131
|
-
* @license lucide-react v0.344.0 - ISC
|
|
132
|
-
*
|
|
133
|
-
* This source code is licensed under the ISC license.
|
|
134
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
135
|
-
*/const Is=S("Mail",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}]]);/**
|
|
136
|
-
* @license lucide-react v0.344.0 - ISC
|
|
137
|
-
*
|
|
138
|
-
* This source code is licensed under the ISC license.
|
|
139
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
140
|
-
*/const Mr=S("Menu",[["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}],["line",{x1:"4",x2:"20",y1:"6",y2:"6",key:"1owob3"}],["line",{x1:"4",x2:"20",y1:"18",y2:"18",key:"yk5zj1"}]]);/**
|
|
141
|
-
* @license lucide-react v0.344.0 - ISC
|
|
142
|
-
*
|
|
143
|
-
* This source code is licensed under the ISC license.
|
|
144
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
145
|
-
*/const Ls=S("Minus",[["path",{d:"M5 12h14",key:"1ays0h"}]]);/**
|
|
146
|
-
* @license lucide-react v0.344.0 - ISC
|
|
147
|
-
*
|
|
148
|
-
* This source code is licensed under the ISC license.
|
|
149
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
150
|
-
*/const Fs=S("Monitor",[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21",key:"1svkeh"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21",key:"vw1qmm"}]]);/**
|
|
151
|
-
* @license lucide-react v0.344.0 - ISC
|
|
152
|
-
*
|
|
153
|
-
* This source code is licensed under the ISC license.
|
|
154
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
155
|
-
*/const $s=S("Moon",[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z",key:"a7tn18"}]]);/**
|
|
156
|
-
* @license lucide-react v0.344.0 - ISC
|
|
157
|
-
*
|
|
158
|
-
* This source code is licensed under the ISC license.
|
|
159
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
160
|
-
*/const Bs=S("MousePointer",[["path",{d:"m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z",key:"y2ucgo"}],["path",{d:"m13 13 6 6",key:"1nhxnf"}]]);/**
|
|
161
|
-
* @license lucide-react v0.344.0 - ISC
|
|
162
|
-
*
|
|
163
|
-
* This source code is licensed under the ISC license.
|
|
164
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
165
|
-
*/const sr=S("Palette",[["circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor",key:"1okk4w"}],["circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor",key:"f64h9f"}],["circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor",key:"fotxhn"}],["circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor",key:"qy21gx"}],["path",{d:"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z",key:"12rzf8"}]]);/**
|
|
166
|
-
* @license lucide-react v0.344.0 - ISC
|
|
167
|
-
*
|
|
168
|
-
* This source code is licensed under the ISC license.
|
|
169
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
170
|
-
*/const Ws=S("PanelsTopLeft",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M9 21V9",key:"1oto5p"}]]);/**
|
|
171
|
-
* @license lucide-react v0.344.0 - ISC
|
|
172
|
-
*
|
|
173
|
-
* This source code is licensed under the ISC license.
|
|
174
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
175
|
-
*/const Dr=S("Search",[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);/**
|
|
176
|
-
* @license lucide-react v0.344.0 - ISC
|
|
177
|
-
*
|
|
178
|
-
* This source code is licensed under the ISC license.
|
|
179
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
180
|
-
*/const Oe=S("Settings",[["path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",key:"1qme2f"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);/**
|
|
181
|
-
* @license lucide-react v0.344.0 - ISC
|
|
182
|
-
*
|
|
183
|
-
* This source code is licensed under the ISC license.
|
|
184
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
185
|
-
*/const Us=S("Smartphone",[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2",key:"1yt0o3"}],["path",{d:"M12 18h.01",key:"mhygvu"}]]);/**
|
|
186
|
-
* @license lucide-react v0.344.0 - ISC
|
|
187
|
-
*
|
|
188
|
-
* This source code is licensed under the ISC license.
|
|
189
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
190
|
-
*/const Gs=S("Sun",[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m4.93 4.93 1.41 1.41",key:"149t6j"}],["path",{d:"m17.66 17.66 1.41 1.41",key:"ptbguv"}],["path",{d:"M2 12h2",key:"1t8f8n"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m6.34 17.66-1.41 1.41",key:"1m8zz5"}],["path",{d:"m19.07 4.93-1.41 1.41",key:"1shlcs"}]]);/**
|
|
191
|
-
* @license lucide-react v0.344.0 - ISC
|
|
192
|
-
*
|
|
193
|
-
* This source code is licensed under the ISC license.
|
|
194
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
195
|
-
*/const qs=S("Tablet",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2",key:"76otgf"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18",key:"1dp563"}]]);/**
|
|
196
|
-
* @license lucide-react v0.344.0 - ISC
|
|
197
|
-
*
|
|
198
|
-
* This source code is licensed under the ISC license.
|
|
199
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
200
|
-
*/const Hs=S("TrendingDown",[["polyline",{points:"22 17 13.5 8.5 8.5 13.5 2 7",key:"1r2t7k"}],["polyline",{points:"16 17 22 17 22 11",key:"11uiuu"}]]);/**
|
|
201
|
-
* @license lucide-react v0.344.0 - ISC
|
|
202
|
-
*
|
|
203
|
-
* This source code is licensed under the ISC license.
|
|
204
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
205
|
-
*/const Ys=S("TrendingUp",[["polyline",{points:"22 7 13.5 15.5 8.5 10.5 2 17",key:"126l90"}],["polyline",{points:"16 7 22 7 22 13",key:"kwv8wd"}]]);/**
|
|
206
|
-
* @license lucide-react v0.344.0 - ISC
|
|
207
|
-
*
|
|
208
|
-
* This source code is licensed under the ISC license.
|
|
209
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
210
|
-
*/const Nt=S("User",[["path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",key:"975kel"}],["circle",{cx:"12",cy:"7",r:"4",key:"17ys0d"}]]);/**
|
|
211
|
-
* @license lucide-react v0.344.0 - ISC
|
|
212
|
-
*
|
|
213
|
-
* This source code is licensed under the ISC license.
|
|
214
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
215
|
-
*/const nr=S("Users",[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["path",{d:"M22 21v-2a4 4 0 0 0-3-3.87",key:"kshegd"}],["path",{d:"M16 3.13a4 4 0 0 1 0 7.75",key:"1da9ce"}]]);/**
|
|
216
|
-
* @license lucide-react v0.344.0 - ISC
|
|
217
|
-
*
|
|
218
|
-
* This source code is licensed under the ISC license.
|
|
219
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
220
|
-
*/const Tt=S("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),zr=I("peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:text-white data-[state=checked]:border-primary-600",{variants:{size:{sm:"h-3 w-3",md:"h-4 w-4",lg:"h-5 w-5"}},defaultVariants:{size:"md"}}),Ee=f.forwardRef(({className:t,size:r,...a},s)=>e.jsxs("div",{className:"relative inline-flex items-center",children:[e.jsx("input",{type:"checkbox",className:y(zr({size:r}),"appearance-none",t),ref:s,"data-state":a.checked?"checked":"unchecked",...a}),a.checked&&e.jsx(Rr,{className:y("absolute pointer-events-none text-current",r==="sm"&&"h-2 w-2",r==="md"&&"h-3 w-3",r==="lg"&&"h-4 w-4")})]}));Ee.displayName="Checkbox";const _r=I("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 sm:rounded-lg",{variants:{size:{sm:"max-w-sm",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl",full:"max-w-[95vw] max-h-[95vh]"}},defaultVariants:{size:"md"}}),Pr=({open:t,onOpenChange:r,children:a,size:s})=>{const o=()=>{r==null||r(!1)};return t?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",onClick:o}),e.jsxs("div",{className:y(_r({size:s})),children:[e.jsxs("button",{onClick:o,className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:pointer-events-none",children:[e.jsx(Tt,{className:"h-4 w-4"}),e.jsx("span",{className:"sr-only",children:"Close"})]}),a]})]}):null},Vr=({className:t,...r})=>e.jsx("div",{className:y("flex flex-col space-y-1.5 text-center sm:text-left",t),...r}),Or=({className:t,...r})=>e.jsx("h2",{className:y("text-lg font-semibold leading-none tracking-tight",t),...r}),Js=({className:t,...r})=>e.jsx("p",{className:y("text-sm text-gray-500",t),...r}),Ir=({className:t,...r})=>e.jsx("div",{className:y("grid gap-4 py-4",t),...r}),Lr=({className:t,...r})=>e.jsx("div",{className:y("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",t),...r});let Ks={data:""},Zs=t=>typeof window=="object"?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||Ks,Xs=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,Qs=/\/\*[^]*?\*\/| +/g,or=/\n+/g,me=(t,r)=>{let a="",s="",o="";for(let i in t){let l=t[i];i[0]=="@"?i[1]=="i"?a=i+" "+l+";":s+=i[1]=="f"?me(l,i):i+"{"+me(l,i[1]=="k"?"":r)+"}":typeof l=="object"?s+=me(l,r?r.replace(/([^,])+/g,c=>i.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g,u=>/&/.test(u)?u.replace(/&/g,c):c?c+" "+u:u)):i):l!=null&&(i=/^--/.test(i)?i:i.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=me.p?me.p(i,l):i+":"+l+";")}return a+(r&&o?r+"{"+o+"}":o)+s},ne={},Fr=t=>{if(typeof t=="object"){let r="";for(let a in t)r+=a+Fr(t[a]);return r}return t},en=(t,r,a,s,o)=>{let i=Fr(t),l=ne[i]||(ne[i]=(u=>{let p=0,m=11;for(;p<u.length;)m=101*m+u.charCodeAt(p++)>>>0;return"go"+m})(i));if(!ne[l]){let u=i!==t?t:(p=>{let m,h,b=[{}];for(;m=Xs.exec(p.replace(Qs,""));)m[4]?b.shift():m[3]?(h=m[3].replace(or," ").trim(),b.unshift(b[0][h]=b[0][h]||{})):b[0][m[1]]=m[2].replace(or," ").trim();return b[0]})(t);ne[l]=me(o?{["@keyframes "+l]:u}:u,a?"":"."+l)}let c=a&&ne.g?ne.g:null;return a&&(ne.g=ne[l]),((u,p,m,h)=>{h?p.data=p.data.replace(h,u):p.data.indexOf(u)===-1&&(p.data=m?u+p.data:p.data+u)})(ne[l],r,s,c),l},tn=(t,r,a)=>t.reduce((s,o,i)=>{let l=r[i];if(l&&l.call){let c=l(a),u=c&&c.props&&c.props.className||/^go/.test(c)&&c;l=u?"."+u:c&&typeof c=="object"?c.props?"":me(c,""):c===!1?"":c}return s+o+(l??"")},"");function ot(t){let r=this||{},a=t.call?t(r.p):t;return en(a.unshift?a.raw?tn(a,[].slice.call(arguments,1),r.p):a.reduce((s,o)=>Object.assign(s,o&&o.call?o(r.p):o),{}):a,Zs(r.target),r.g,r.o,r.k)}let $r,kt,Ct;ot.bind({g:1});let oe=ot.bind({k:1});function rn(t,r,a,s){me.p=r,$r=t,kt=a,Ct=s}function je(t,r){let a=this||{};return function(){let s=arguments;function o(i,l){let c=Object.assign({},i),u=c.className||o.className;a.p=Object.assign({theme:kt&&kt()},c),a.o=/ *go\d+/.test(u),c.className=ot.apply(a,s)+(u?" "+u:"");let p=t;return t[0]&&(p=c.as||t,delete c.as),Ct&&p[0]&&Ct(c),$r(p,c)}return o}}var an=t=>typeof t=="function",st=(t,r)=>an(t)?t(r):t,sn=(()=>{let t=0;return()=>(++t).toString()})(),Br=(()=>{let t;return()=>{if(t===void 0&&typeof window<"u"){let r=matchMedia("(prefers-reduced-motion: reduce)");t=!r||r.matches}return t}})(),nn=20,Rt="default",Wr=(t,r)=>{let{toastLimit:a}=t.settings;switch(r.type){case 0:return{...t,toasts:[r.toast,...t.toasts].slice(0,a)};case 1:return{...t,toasts:t.toasts.map(l=>l.id===r.toast.id?{...l,...r.toast}:l)};case 2:let{toast:s}=r;return Wr(t,{type:t.toasts.find(l=>l.id===s.id)?1:0,toast:s});case 3:let{toastId:o}=r;return{...t,toasts:t.toasts.map(l=>l.id===o||o===void 0?{...l,dismissed:!0,visible:!1}:l)};case 4:return r.toastId===void 0?{...t,toasts:[]}:{...t,toasts:t.toasts.filter(l=>l.id!==r.toastId)};case 5:return{...t,pausedAt:r.time};case 6:let i=r.time-(t.pausedAt||0);return{...t,pausedAt:void 0,toasts:t.toasts.map(l=>({...l,pauseDuration:l.pauseDuration+i}))}}},at=[],Ur={toasts:[],pausedAt:void 0,settings:{toastLimit:nn}},ae={},Gr=(t,r=Rt)=>{ae[r]=Wr(ae[r]||Ur,t),at.forEach(([a,s])=>{a===r&&s(ae[r])})},qr=t=>Object.keys(ae).forEach(r=>Gr(t,r)),on=t=>Object.keys(ae).find(r=>ae[r].toasts.some(a=>a.id===t)),it=(t=Rt)=>r=>{Gr(r,t)},ln={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},cn=(t={},r=Rt)=>{let[a,s]=N.useState(ae[r]||Ur),o=N.useRef(ae[r]);N.useEffect(()=>(o.current!==ae[r]&&s(ae[r]),at.push([r,s]),()=>{let l=at.findIndex(([c])=>c===r);l>-1&&at.splice(l,1)}),[r]);let i=a.toasts.map(l=>{var c,u,p;return{...t,...t[l.type],...l,removeDelay:l.removeDelay||((c=t[l.type])==null?void 0:c.removeDelay)||(t==null?void 0:t.removeDelay),duration:l.duration||((u=t[l.type])==null?void 0:u.duration)||(t==null?void 0:t.duration)||ln[l.type],style:{...t.style,...(p=t[l.type])==null?void 0:p.style,...l.style}}});return{...a,toasts:i}},dn=(t,r="blank",a)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:r,ariaProps:{role:"status","aria-live":"polite"},message:t,pauseDuration:0,...a,id:(a==null?void 0:a.id)||sn()}),Ze=t=>(r,a)=>{let s=dn(r,t,a);return it(s.toasterId||on(s.id))({type:2,toast:s}),s.id},$=(t,r)=>Ze("blank")(t,r);$.error=Ze("error");$.success=Ze("success");$.loading=Ze("loading");$.custom=Ze("custom");$.dismiss=(t,r)=>{let a={type:3,toastId:t};r?it(r)(a):qr(a)};$.dismissAll=t=>$.dismiss(void 0,t);$.remove=(t,r)=>{let a={type:4,toastId:t};r?it(r)(a):qr(a)};$.removeAll=t=>$.remove(void 0,t);$.promise=(t,r,a)=>{let s=$.loading(r.loading,{...a,...a==null?void 0:a.loading});return typeof t=="function"&&(t=t()),t.then(o=>{let i=r.success?st(r.success,o):void 0;return i?$.success(i,{id:s,...a,...a==null?void 0:a.success}):$.dismiss(s),o}).catch(o=>{let i=r.error?st(r.error,o):void 0;i?$.error(i,{id:s,...a,...a==null?void 0:a.error}):$.dismiss(s)}),t};var un=1e3,pn=(t,r="default")=>{let{toasts:a,pausedAt:s}=cn(t,r),o=N.useRef(new Map).current,i=N.useCallback((h,b=un)=>{if(o.has(h))return;let x=setTimeout(()=>{o.delete(h),l({type:4,toastId:h})},b);o.set(h,x)},[]);N.useEffect(()=>{if(s)return;let h=Date.now(),b=a.map(x=>{if(x.duration===1/0)return;let E=(x.duration||0)+x.pauseDuration-(h-x.createdAt);if(E<0){x.visible&&$.dismiss(x.id);return}return setTimeout(()=>$.dismiss(x.id,r),E)});return()=>{b.forEach(x=>x&&clearTimeout(x))}},[a,s,r]);let l=N.useCallback(it(r),[r]),c=N.useCallback(()=>{l({type:5,time:Date.now()})},[l]),u=N.useCallback((h,b)=>{l({type:1,toast:{id:h,height:b}})},[l]),p=N.useCallback(()=>{s&&l({type:6,time:Date.now()})},[s,l]),m=N.useCallback((h,b)=>{let{reverseOrder:x=!1,gutter:E=8,defaultPosition:A}=b||{},k=a.filter(O=>(O.position||A)===(h.position||A)&&O.height),M=k.findIndex(O=>O.id===h.id),v=k.filter((O,W)=>W<M&&O.visible).length;return k.filter(O=>O.visible).slice(...x?[v+1]:[0,v]).reduce((O,W)=>O+(W.height||0)+E,0)},[a]);return N.useEffect(()=>{a.forEach(h=>{if(h.dismissed)i(h.id,h.removeDelay);else{let b=o.get(h.id);b&&(clearTimeout(b),o.delete(h.id))}})},[a,i]),{toasts:a,handlers:{updateHeight:u,startPause:c,endPause:p,calculateOffset:m}}},mn=oe`
|
|
221
|
-
from {
|
|
222
|
-
transform: scale(0) rotate(45deg);
|
|
223
|
-
opacity: 0;
|
|
224
|
-
}
|
|
225
|
-
to {
|
|
226
|
-
transform: scale(1) rotate(45deg);
|
|
227
|
-
opacity: 1;
|
|
228
|
-
}`,fn=oe`
|
|
229
|
-
from {
|
|
230
|
-
transform: scale(0);
|
|
231
|
-
opacity: 0;
|
|
232
|
-
}
|
|
233
|
-
to {
|
|
234
|
-
transform: scale(1);
|
|
235
|
-
opacity: 1;
|
|
236
|
-
}`,hn=oe`
|
|
237
|
-
from {
|
|
238
|
-
transform: scale(0) rotate(90deg);
|
|
239
|
-
opacity: 0;
|
|
12
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
|
|
14
|
+
function _interopNamespace(e) {
|
|
15
|
+
if (e && e.__esModule) return e;
|
|
16
|
+
var n = Object.create(null);
|
|
17
|
+
if (e) {
|
|
18
|
+
Object.keys(e).forEach(function (k) {
|
|
19
|
+
if (k !== 'default') {
|
|
20
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return e[k]; }
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
n.default = e;
|
|
29
|
+
return Object.freeze(n);
|
|
240
30
|
}
|
|
241
|
-
to {
|
|
242
|
-
transform: scale(1) rotate(90deg);
|
|
243
|
-
opacity: 1;
|
|
244
|
-
}`,gn=je("div")`
|
|
245
|
-
width: 20px;
|
|
246
|
-
opacity: 0;
|
|
247
|
-
height: 20px;
|
|
248
|
-
border-radius: 10px;
|
|
249
|
-
background: ${t=>t.primary||"#ff4b4b"};
|
|
250
|
-
position: relative;
|
|
251
|
-
transform: rotate(45deg);
|
|
252
31
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
animation-delay: 100ms;
|
|
32
|
+
var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
|
|
33
|
+
var toast__default = /*#__PURE__*/_interopDefault(toast);
|
|
256
34
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
35
|
+
// src/components/Button/Button.tsx
|
|
36
|
+
function cn(...inputs) {
|
|
37
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
38
|
+
}
|
|
39
|
+
var buttonVariants = classVarianceAuthority.cva(
|
|
40
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
41
|
+
{
|
|
42
|
+
variants: {
|
|
43
|
+
variant: {
|
|
44
|
+
primary: "bg-primary-600 text-white hover:bg-primary-700",
|
|
45
|
+
secondary: "bg-secondary-600 text-white hover:bg-secondary-700",
|
|
46
|
+
danger: "bg-danger-600 text-white hover:bg-danger-700",
|
|
47
|
+
success: "bg-success-600 text-white hover:bg-success-700",
|
|
48
|
+
warning: "bg-warning-600 text-white hover:bg-warning-700",
|
|
49
|
+
outline: "border border-primary-300 bg-white hover:bg-primary-50",
|
|
50
|
+
ghost: "bg-transparent hover:bg-primary-50",
|
|
51
|
+
link: "text-primary-600 underline-offset-4 hover:underline"
|
|
52
|
+
},
|
|
53
|
+
size: {
|
|
54
|
+
sm: "h-8 px-3 text-xs",
|
|
55
|
+
md: "h-10 px-4 py-2",
|
|
56
|
+
lg: "h-11 px-8",
|
|
57
|
+
xl: "h-12 px-10 text-base"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
defaultVariants: {
|
|
61
|
+
variant: "primary",
|
|
62
|
+
size: "md"
|
|
63
|
+
}
|
|
270
64
|
}
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
65
|
+
);
|
|
66
|
+
var Button = React11__namespace.forwardRef(
|
|
67
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
68
|
+
const Comp = asChild ? reactSlot.Slot : "button";
|
|
69
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
+
Comp,
|
|
71
|
+
{
|
|
72
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
73
|
+
ref,
|
|
74
|
+
...props
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
Button.displayName = "Button";
|
|
80
|
+
var inputVariants = classVarianceAuthority.cva(
|
|
81
|
+
"flex w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
82
|
+
{
|
|
83
|
+
variants: {
|
|
84
|
+
variant: {
|
|
85
|
+
default: "border-gray-300",
|
|
86
|
+
error: "border-danger-500 focus-visible:ring-danger-500",
|
|
87
|
+
success: "border-success-500 focus-visible:ring-success-500"
|
|
88
|
+
},
|
|
89
|
+
inputSize: {
|
|
90
|
+
sm: "h-8 px-2 text-xs",
|
|
91
|
+
md: "h-10 px-3",
|
|
92
|
+
lg: "h-12 px-4 text-base"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
defaultVariants: {
|
|
96
|
+
variant: "default",
|
|
97
|
+
inputSize: "md"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
var Input = React11__namespace.forwardRef(
|
|
102
|
+
({ className, variant, inputSize, type, ...props }, ref) => {
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
104
|
+
"input",
|
|
105
|
+
{
|
|
106
|
+
type,
|
|
107
|
+
className: cn(inputVariants({ variant, inputSize, className })),
|
|
108
|
+
ref,
|
|
109
|
+
...props
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
Input.displayName = "Input";
|
|
115
|
+
var cardVariants = classVarianceAuthority.cva(
|
|
116
|
+
"rounded-lg border bg-white text-gray-950 shadow-sm",
|
|
117
|
+
{
|
|
118
|
+
variants: {
|
|
119
|
+
variant: {
|
|
120
|
+
default: "border-gray-200",
|
|
121
|
+
elevated: "border-gray-200 shadow-md",
|
|
122
|
+
outlined: "border-2 border-primary-200"
|
|
123
|
+
},
|
|
124
|
+
padding: {
|
|
125
|
+
none: "p-0",
|
|
126
|
+
sm: "p-4",
|
|
127
|
+
md: "p-6",
|
|
128
|
+
lg: "p-8"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
defaultVariants: {
|
|
132
|
+
variant: "default",
|
|
133
|
+
padding: "md"
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
var Card = React11__namespace.forwardRef(
|
|
138
|
+
({ className, variant, padding, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
141
|
+
ref,
|
|
142
|
+
className: cn(cardVariants({ variant, padding, className })),
|
|
143
|
+
...props
|
|
144
|
+
}
|
|
145
|
+
)
|
|
146
|
+
);
|
|
147
|
+
Card.displayName = "Card";
|
|
148
|
+
var CardHeader = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
149
|
+
"div",
|
|
150
|
+
{
|
|
151
|
+
ref,
|
|
152
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
153
|
+
...props
|
|
154
|
+
}
|
|
155
|
+
));
|
|
156
|
+
CardHeader.displayName = "CardHeader";
|
|
157
|
+
var CardTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
158
|
+
"h3",
|
|
159
|
+
{
|
|
160
|
+
ref,
|
|
161
|
+
className: cn(
|
|
162
|
+
"text-2xl font-semibold leading-none tracking-tight",
|
|
163
|
+
className
|
|
164
|
+
),
|
|
165
|
+
...props
|
|
166
|
+
}
|
|
167
|
+
));
|
|
168
|
+
CardTitle.displayName = "CardTitle";
|
|
169
|
+
var CardDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
170
|
+
"p",
|
|
171
|
+
{
|
|
172
|
+
ref,
|
|
173
|
+
className: cn("text-sm text-gray-500", className),
|
|
174
|
+
...props
|
|
175
|
+
}
|
|
176
|
+
));
|
|
177
|
+
CardDescription.displayName = "CardDescription";
|
|
178
|
+
var CardContent = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
179
|
+
CardContent.displayName = "CardContent";
|
|
180
|
+
var CardFooter = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
181
|
+
"div",
|
|
182
|
+
{
|
|
183
|
+
ref,
|
|
184
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
185
|
+
...props
|
|
186
|
+
}
|
|
187
|
+
));
|
|
188
|
+
CardFooter.displayName = "CardFooter";
|
|
189
|
+
var badgeVariants = classVarianceAuthority.cva(
|
|
190
|
+
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
|
|
191
|
+
{
|
|
192
|
+
variants: {
|
|
193
|
+
variant: {
|
|
194
|
+
default: "border-transparent bg-primary-600 text-white hover:bg-primary-700",
|
|
195
|
+
secondary: "border-transparent bg-secondary-600 text-white hover:bg-secondary-700",
|
|
196
|
+
success: "border-transparent bg-success-600 text-white hover:bg-success-700",
|
|
197
|
+
danger: "border-transparent bg-danger-600 text-white hover:bg-danger-700",
|
|
198
|
+
warning: "border-transparent bg-warning-600 text-white hover:bg-warning-700",
|
|
199
|
+
outline: "text-gray-700 border-gray-300"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
defaultVariants: {
|
|
203
|
+
variant: "default"
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
function Badge({ className, variant, ...props }) {
|
|
208
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
297
209
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
210
|
+
var alertVariants = classVarianceAuthority.cva(
|
|
211
|
+
"relative w-full rounded-lg border p-4",
|
|
212
|
+
{
|
|
213
|
+
variants: {
|
|
214
|
+
variant: {
|
|
215
|
+
default: "bg-white text-gray-950 border-gray-200",
|
|
216
|
+
success: "bg-success-50 text-success-800 border-success-200",
|
|
217
|
+
warning: "bg-warning-50 text-warning-800 border-warning-200",
|
|
218
|
+
danger: "bg-danger-50 text-danger-800 border-danger-200",
|
|
219
|
+
info: "bg-primary-50 text-primary-800 border-primary-200"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
defaultVariants: {
|
|
223
|
+
variant: "default"
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
);
|
|
227
|
+
var Alert = React11__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
228
|
+
"div",
|
|
229
|
+
{
|
|
230
|
+
ref,
|
|
231
|
+
role: "alert",
|
|
232
|
+
className: cn(alertVariants({ variant }), className),
|
|
233
|
+
...props
|
|
234
|
+
}
|
|
235
|
+
));
|
|
236
|
+
Alert.displayName = "Alert";
|
|
237
|
+
var AlertTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
238
|
+
"h5",
|
|
239
|
+
{
|
|
240
|
+
ref,
|
|
241
|
+
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
242
|
+
...props
|
|
243
|
+
}
|
|
244
|
+
));
|
|
245
|
+
AlertTitle.displayName = "AlertTitle";
|
|
246
|
+
var AlertDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
247
|
+
"div",
|
|
248
|
+
{
|
|
249
|
+
ref,
|
|
250
|
+
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
251
|
+
...props
|
|
252
|
+
}
|
|
253
|
+
));
|
|
254
|
+
AlertDescription.displayName = "AlertDescription";
|
|
255
|
+
var avatarVariants = classVarianceAuthority.cva(
|
|
256
|
+
"relative flex shrink-0 overflow-hidden rounded-full",
|
|
257
|
+
{
|
|
258
|
+
variants: {
|
|
259
|
+
size: {
|
|
260
|
+
sm: "h-8 w-8",
|
|
261
|
+
md: "h-10 w-10",
|
|
262
|
+
lg: "h-16 w-16",
|
|
263
|
+
xl: "h-20 w-20"
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
defaultVariants: {
|
|
267
|
+
size: "md"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
var Avatar = React11__namespace.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
272
|
+
"div",
|
|
273
|
+
{
|
|
274
|
+
ref,
|
|
275
|
+
className: cn(avatarVariants({ size }), className),
|
|
276
|
+
...props
|
|
277
|
+
}
|
|
278
|
+
));
|
|
279
|
+
Avatar.displayName = "Avatar";
|
|
280
|
+
var AvatarImage = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
281
|
+
"img",
|
|
282
|
+
{
|
|
283
|
+
ref,
|
|
284
|
+
className: cn("aspect-square h-full w-full object-cover", className),
|
|
285
|
+
...props
|
|
286
|
+
}
|
|
287
|
+
));
|
|
288
|
+
AvatarImage.displayName = "AvatarImage";
|
|
289
|
+
var AvatarFallback = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
290
|
+
"div",
|
|
291
|
+
{
|
|
292
|
+
ref,
|
|
293
|
+
className: cn(
|
|
294
|
+
"flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600 font-medium",
|
|
295
|
+
className
|
|
296
|
+
),
|
|
297
|
+
...props
|
|
298
|
+
}
|
|
299
|
+
));
|
|
300
|
+
AvatarFallback.displayName = "AvatarFallback";
|
|
301
|
+
var spinnerVariants = classVarianceAuthority.cva(
|
|
302
|
+
"animate-spin rounded-full border-2 border-current border-t-transparent",
|
|
303
|
+
{
|
|
304
|
+
variants: {
|
|
305
|
+
size: {
|
|
306
|
+
sm: "h-4 w-4",
|
|
307
|
+
md: "h-6 w-6",
|
|
308
|
+
lg: "h-8 w-8",
|
|
309
|
+
xl: "h-12 w-12"
|
|
310
|
+
},
|
|
311
|
+
variant: {
|
|
312
|
+
primary: "text-primary-600",
|
|
313
|
+
secondary: "text-secondary-600",
|
|
314
|
+
white: "text-white",
|
|
315
|
+
current: "text-current"
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
defaultVariants: {
|
|
319
|
+
size: "md",
|
|
320
|
+
variant: "primary"
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
);
|
|
324
|
+
var Spinner = React11__namespace.forwardRef(
|
|
325
|
+
({ className, size, variant, ...props }, ref) => {
|
|
326
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
327
|
+
"div",
|
|
328
|
+
{
|
|
329
|
+
ref,
|
|
330
|
+
className: cn(spinnerVariants({ size, variant }), className),
|
|
331
|
+
...props
|
|
332
|
+
}
|
|
333
|
+
);
|
|
334
|
+
}
|
|
335
|
+
);
|
|
336
|
+
Spinner.displayName = "Spinner";
|
|
337
|
+
var skeletonVariants = classVarianceAuthority.cva(
|
|
338
|
+
"animate-pulse rounded-md bg-gray-200",
|
|
339
|
+
{
|
|
340
|
+
variants: {
|
|
341
|
+
variant: {
|
|
342
|
+
default: "bg-gray-200",
|
|
343
|
+
darker: "bg-gray-300"
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
defaultVariants: {
|
|
347
|
+
variant: "default"
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
);
|
|
351
|
+
var Skeleton = React11__namespace.forwardRef(
|
|
352
|
+
({ className, variant, ...props }, ref) => {
|
|
353
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
354
|
+
"div",
|
|
355
|
+
{
|
|
356
|
+
ref,
|
|
357
|
+
className: cn(skeletonVariants({ variant }), className),
|
|
358
|
+
...props
|
|
359
|
+
}
|
|
360
|
+
);
|
|
361
|
+
}
|
|
362
|
+
);
|
|
363
|
+
Skeleton.displayName = "Skeleton";
|
|
364
|
+
var textareaVariants = classVarianceAuthority.cva(
|
|
365
|
+
"flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
366
|
+
{
|
|
367
|
+
variants: {
|
|
368
|
+
variant: {
|
|
369
|
+
default: "border-gray-300",
|
|
370
|
+
error: "border-danger-500 focus-visible:ring-danger-500",
|
|
371
|
+
success: "border-success-500 focus-visible:ring-success-500"
|
|
372
|
+
}
|
|
373
|
+
},
|
|
374
|
+
defaultVariants: {
|
|
375
|
+
variant: "default"
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
);
|
|
379
|
+
var Textarea = React11__namespace.forwardRef(
|
|
380
|
+
({ className, variant, ...props }, ref) => {
|
|
381
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
382
|
+
"textarea",
|
|
383
|
+
{
|
|
384
|
+
className: cn(textareaVariants({ variant, className })),
|
|
385
|
+
ref,
|
|
386
|
+
...props
|
|
387
|
+
}
|
|
388
|
+
);
|
|
389
|
+
}
|
|
390
|
+
);
|
|
391
|
+
Textarea.displayName = "Textarea";
|
|
392
|
+
var switchVariants = classVarianceAuthority.cva(
|
|
393
|
+
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200",
|
|
394
|
+
{
|
|
395
|
+
variants: {
|
|
396
|
+
size: {
|
|
397
|
+
sm: "h-5 w-9",
|
|
398
|
+
md: "h-6 w-11",
|
|
399
|
+
lg: "h-7 w-13"
|
|
400
|
+
}
|
|
401
|
+
},
|
|
402
|
+
defaultVariants: {
|
|
403
|
+
size: "md"
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
);
|
|
407
|
+
var switchThumbVariants = classVarianceAuthority.cva(
|
|
408
|
+
"pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform",
|
|
409
|
+
{
|
|
410
|
+
variants: {
|
|
411
|
+
size: {
|
|
412
|
+
sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
|
|
413
|
+
md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
|
414
|
+
lg: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
|
|
415
|
+
}
|
|
416
|
+
},
|
|
417
|
+
defaultVariants: {
|
|
418
|
+
size: "md"
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
);
|
|
422
|
+
var Switch = React11__namespace.forwardRef(
|
|
423
|
+
({ className, size, checked = false, onCheckedChange, ...props }, ref) => {
|
|
424
|
+
const handleClick = () => {
|
|
425
|
+
onCheckedChange?.(!checked);
|
|
426
|
+
};
|
|
427
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
428
|
+
"button",
|
|
429
|
+
{
|
|
430
|
+
type: "button",
|
|
431
|
+
role: "switch",
|
|
432
|
+
"aria-checked": checked,
|
|
433
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
434
|
+
className: cn(switchVariants({ size }), className),
|
|
435
|
+
onClick: handleClick,
|
|
436
|
+
ref,
|
|
437
|
+
...props,
|
|
438
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
439
|
+
"span",
|
|
440
|
+
{
|
|
441
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
442
|
+
className: cn(switchThumbVariants({ size }))
|
|
443
|
+
}
|
|
444
|
+
)
|
|
445
|
+
}
|
|
446
|
+
);
|
|
447
|
+
}
|
|
448
|
+
);
|
|
449
|
+
Switch.displayName = "Switch";
|
|
450
|
+
var checkboxVariants = classVarianceAuthority.cva(
|
|
451
|
+
"peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:text-white data-[state=checked]:border-primary-600",
|
|
452
|
+
{
|
|
453
|
+
variants: {
|
|
454
|
+
size: {
|
|
455
|
+
sm: "h-3 w-3",
|
|
456
|
+
md: "h-4 w-4",
|
|
457
|
+
lg: "h-5 w-5"
|
|
458
|
+
}
|
|
459
|
+
},
|
|
460
|
+
defaultVariants: {
|
|
461
|
+
size: "md"
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
);
|
|
465
|
+
var Checkbox = React11__namespace.forwardRef(
|
|
466
|
+
({ className, size, ...props }, ref) => {
|
|
467
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex items-center", children: [
|
|
468
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
469
|
+
"input",
|
|
470
|
+
{
|
|
471
|
+
type: "checkbox",
|
|
472
|
+
className: cn(checkboxVariants({ size }), "appearance-none", className),
|
|
473
|
+
ref,
|
|
474
|
+
"data-state": props.checked ? "checked" : "unchecked",
|
|
475
|
+
...props
|
|
476
|
+
}
|
|
477
|
+
),
|
|
478
|
+
props.checked && /* @__PURE__ */ jsxRuntime.jsx(
|
|
479
|
+
lucideReact.Check,
|
|
480
|
+
{
|
|
481
|
+
className: cn(
|
|
482
|
+
"absolute pointer-events-none text-current",
|
|
483
|
+
size === "sm" && "h-2 w-2",
|
|
484
|
+
size === "md" && "h-3 w-3",
|
|
485
|
+
size === "lg" && "h-4 w-4"
|
|
486
|
+
)
|
|
487
|
+
}
|
|
488
|
+
)
|
|
489
|
+
] });
|
|
490
|
+
}
|
|
491
|
+
);
|
|
492
|
+
Checkbox.displayName = "Checkbox";
|
|
493
|
+
var modalVariants = classVarianceAuthority.cva(
|
|
494
|
+
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 sm:rounded-lg",
|
|
495
|
+
{
|
|
496
|
+
variants: {
|
|
497
|
+
size: {
|
|
498
|
+
sm: "max-w-sm",
|
|
499
|
+
md: "max-w-lg",
|
|
500
|
+
lg: "max-w-2xl",
|
|
501
|
+
xl: "max-w-4xl",
|
|
502
|
+
full: "max-w-[95vw] max-h-[95vh]"
|
|
503
|
+
}
|
|
504
|
+
},
|
|
505
|
+
defaultVariants: {
|
|
506
|
+
size: "md"
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
);
|
|
510
|
+
var Modal = ({
|
|
511
|
+
open,
|
|
512
|
+
onOpenChange,
|
|
513
|
+
children,
|
|
514
|
+
size
|
|
515
|
+
}) => {
|
|
516
|
+
const handleClose = () => {
|
|
517
|
+
onOpenChange?.(false);
|
|
518
|
+
};
|
|
519
|
+
if (!open) return null;
|
|
520
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
521
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
522
|
+
"div",
|
|
523
|
+
{
|
|
524
|
+
className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
|
|
525
|
+
onClick: handleClose
|
|
526
|
+
}
|
|
527
|
+
),
|
|
528
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(modalVariants({ size })), children: [
|
|
529
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
530
|
+
"button",
|
|
531
|
+
{
|
|
532
|
+
onClick: handleClose,
|
|
533
|
+
className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:pointer-events-none",
|
|
534
|
+
children: [
|
|
535
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
|
|
536
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
|
|
537
|
+
]
|
|
538
|
+
}
|
|
539
|
+
),
|
|
540
|
+
children
|
|
541
|
+
] })
|
|
542
|
+
] });
|
|
543
|
+
};
|
|
544
|
+
var ModalHeader = ({
|
|
545
|
+
className,
|
|
546
|
+
...props
|
|
547
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
548
|
+
"div",
|
|
549
|
+
{
|
|
550
|
+
className: cn(
|
|
551
|
+
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
552
|
+
className
|
|
553
|
+
),
|
|
554
|
+
...props
|
|
555
|
+
}
|
|
556
|
+
);
|
|
557
|
+
var ModalTitle = ({
|
|
558
|
+
className,
|
|
559
|
+
...props
|
|
560
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
561
|
+
"h2",
|
|
562
|
+
{
|
|
563
|
+
className: cn(
|
|
564
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
565
|
+
className
|
|
566
|
+
),
|
|
567
|
+
...props
|
|
568
|
+
}
|
|
569
|
+
);
|
|
570
|
+
var ModalDescription = ({
|
|
571
|
+
className,
|
|
572
|
+
...props
|
|
573
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
574
|
+
"p",
|
|
575
|
+
{
|
|
576
|
+
className: cn("text-sm text-gray-500", className),
|
|
577
|
+
...props
|
|
578
|
+
}
|
|
579
|
+
);
|
|
580
|
+
var ModalContent = ({
|
|
581
|
+
className,
|
|
582
|
+
...props
|
|
583
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4 py-4", className), ...props });
|
|
584
|
+
var ModalFooter = ({
|
|
585
|
+
className,
|
|
586
|
+
...props
|
|
587
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
588
|
+
"div",
|
|
589
|
+
{
|
|
590
|
+
className: cn(
|
|
591
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
592
|
+
className
|
|
593
|
+
),
|
|
594
|
+
...props
|
|
595
|
+
}
|
|
596
|
+
);
|
|
597
|
+
var toastVariants = classVarianceAuthority.cva(
|
|
598
|
+
"flex items-center gap-2 p-4 rounded-lg shadow-lg border max-w-md",
|
|
599
|
+
{
|
|
600
|
+
variants: {
|
|
601
|
+
variant: {
|
|
602
|
+
default: "bg-white border-gray-200 text-gray-900",
|
|
603
|
+
success: "bg-success-50 border-success-200 text-success-800",
|
|
604
|
+
error: "bg-danger-50 border-danger-200 text-danger-800",
|
|
605
|
+
warning: "bg-warning-50 border-warning-200 text-warning-800",
|
|
606
|
+
info: "bg-primary-50 border-primary-200 text-primary-800"
|
|
607
|
+
}
|
|
608
|
+
},
|
|
609
|
+
defaultVariants: {
|
|
610
|
+
variant: "default"
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
);
|
|
614
|
+
var getIcon = (variant) => {
|
|
615
|
+
switch (variant) {
|
|
616
|
+
case "success":
|
|
617
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-5 w-5 text-success-600" });
|
|
618
|
+
case "error":
|
|
619
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-5 w-5 text-danger-600" });
|
|
620
|
+
case "warning":
|
|
621
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-warning-600" });
|
|
622
|
+
case "info":
|
|
623
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5 text-primary-600" });
|
|
624
|
+
default:
|
|
625
|
+
return null;
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
var showToast = {
|
|
629
|
+
success: (message, options) => toast__default.default.success(message, {
|
|
630
|
+
duration: options?.duration || 4e3
|
|
631
|
+
}),
|
|
632
|
+
error: (message, options) => toast__default.default.error(message, {
|
|
633
|
+
duration: options?.duration || 5e3
|
|
634
|
+
}),
|
|
635
|
+
warning: (message, options) => toast__default.default(message, {
|
|
636
|
+
icon: "\u26A0\uFE0F",
|
|
637
|
+
duration: options?.duration || 4e3
|
|
638
|
+
}),
|
|
639
|
+
info: (message, options) => toast__default.default(message, {
|
|
640
|
+
icon: "\u2139\uFE0F",
|
|
641
|
+
duration: options?.duration || 4e3
|
|
642
|
+
}),
|
|
643
|
+
default: (message, options) => toast__default.default(message, {
|
|
644
|
+
duration: options?.duration || 4e3
|
|
645
|
+
})
|
|
646
|
+
};
|
|
647
|
+
var Toast = () => {
|
|
648
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
649
|
+
toast.Toaster,
|
|
650
|
+
{
|
|
651
|
+
position: "top-right",
|
|
652
|
+
toastOptions: {
|
|
653
|
+
duration: 4e3,
|
|
654
|
+
className: "",
|
|
655
|
+
style: {
|
|
656
|
+
background: "transparent",
|
|
657
|
+
boxShadow: "none",
|
|
658
|
+
padding: 0
|
|
659
|
+
}
|
|
660
|
+
},
|
|
661
|
+
children: (t) => /* @__PURE__ */ jsxRuntime.jsx(toast.ToastBar, { toast: t, children: ({ icon, message }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
662
|
+
"div",
|
|
663
|
+
{
|
|
664
|
+
className: cn(
|
|
665
|
+
toastVariants({
|
|
666
|
+
variant: t.type === "success" ? "success" : t.type === "error" ? "error" : "default"
|
|
667
|
+
})
|
|
668
|
+
),
|
|
669
|
+
children: [
|
|
670
|
+
getIcon(t.type === "success" ? "success" : t.type === "error" ? "error" : "default") || icon,
|
|
671
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-sm font-medium", children: message }),
|
|
672
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
673
|
+
"button",
|
|
674
|
+
{
|
|
675
|
+
onClick: () => toast__default.default.dismiss(t.id),
|
|
676
|
+
className: "inline-flex h-5 w-5 items-center justify-center rounded-full hover:bg-black/10",
|
|
677
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
|
|
678
|
+
}
|
|
679
|
+
)
|
|
680
|
+
]
|
|
681
|
+
}
|
|
682
|
+
) })
|
|
683
|
+
}
|
|
684
|
+
);
|
|
685
|
+
};
|
|
686
|
+
var tabsListVariants = classVarianceAuthority.cva(
|
|
687
|
+
"inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500",
|
|
688
|
+
{
|
|
689
|
+
variants: {
|
|
690
|
+
variant: {
|
|
691
|
+
default: "bg-gray-100",
|
|
692
|
+
pills: "bg-transparent gap-2",
|
|
693
|
+
underline: "bg-transparent border-b border-gray-200"
|
|
694
|
+
}
|
|
695
|
+
},
|
|
696
|
+
defaultVariants: {
|
|
697
|
+
variant: "default"
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
);
|
|
701
|
+
var tabsTriggerVariants = classVarianceAuthority.cva(
|
|
702
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
703
|
+
{
|
|
704
|
+
variants: {
|
|
705
|
+
variant: {
|
|
706
|
+
default: "data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm",
|
|
707
|
+
pills: "data-[state=active]:bg-primary-100 data-[state=active]:text-primary-700 hover:bg-gray-100",
|
|
708
|
+
underline: "data-[state=active]:border-b-2 data-[state=active]:border-primary-600 data-[state=active]:text-primary-600 hover:text-gray-900 rounded-none border-b-2 border-transparent"
|
|
709
|
+
}
|
|
710
|
+
},
|
|
711
|
+
defaultVariants: {
|
|
712
|
+
variant: "default"
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
);
|
|
716
|
+
var TabsContext = React11__namespace.createContext(void 0);
|
|
717
|
+
var Tabs = ({ value, onValueChange, variant, children, className }) => {
|
|
718
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onValueChange, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children }) });
|
|
719
|
+
};
|
|
720
|
+
var TabsList = React11__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
721
|
+
const context = React11__namespace.useContext(TabsContext);
|
|
722
|
+
if (!context) throw new Error("TabsList must be used within Tabs");
|
|
723
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
724
|
+
"div",
|
|
725
|
+
{
|
|
726
|
+
ref,
|
|
727
|
+
className: cn(tabsListVariants({ variant: context.variant }), className),
|
|
728
|
+
...props
|
|
729
|
+
}
|
|
730
|
+
);
|
|
731
|
+
});
|
|
732
|
+
TabsList.displayName = "TabsList";
|
|
733
|
+
var TabsTrigger = React11__namespace.forwardRef(
|
|
734
|
+
({ className, value, ...props }, ref) => {
|
|
735
|
+
const context = React11__namespace.useContext(TabsContext);
|
|
736
|
+
if (!context) throw new Error("TabsTrigger must be used within Tabs");
|
|
737
|
+
const isActive = context.value === value;
|
|
738
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
739
|
+
"button",
|
|
740
|
+
{
|
|
741
|
+
ref,
|
|
742
|
+
className: cn(
|
|
743
|
+
tabsTriggerVariants({ variant: context.variant }),
|
|
744
|
+
className
|
|
745
|
+
),
|
|
746
|
+
"data-state": isActive ? "active" : "inactive",
|
|
747
|
+
onClick: () => context.onValueChange(value),
|
|
748
|
+
...props
|
|
749
|
+
}
|
|
750
|
+
);
|
|
751
|
+
}
|
|
752
|
+
);
|
|
753
|
+
TabsTrigger.displayName = "TabsTrigger";
|
|
754
|
+
var TabsContent = React11__namespace.forwardRef(
|
|
755
|
+
({ className, value, ...props }, ref) => {
|
|
756
|
+
const context = React11__namespace.useContext(TabsContext);
|
|
757
|
+
if (!context) throw new Error("TabsContent must be used within Tabs");
|
|
758
|
+
if (context.value !== value) return null;
|
|
759
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
760
|
+
"div",
|
|
761
|
+
{
|
|
762
|
+
ref,
|
|
763
|
+
className: cn(
|
|
764
|
+
"mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
|
|
765
|
+
className
|
|
766
|
+
),
|
|
767
|
+
...props
|
|
768
|
+
}
|
|
769
|
+
);
|
|
770
|
+
}
|
|
771
|
+
);
|
|
772
|
+
TabsContent.displayName = "TabsContent";
|
|
773
|
+
var statsCardVariants = classVarianceAuthority.cva(
|
|
774
|
+
"relative overflow-hidden",
|
|
775
|
+
{
|
|
776
|
+
variants: {
|
|
777
|
+
variant: {
|
|
778
|
+
default: "",
|
|
779
|
+
gradient: "bg-gradient-to-br"
|
|
780
|
+
},
|
|
781
|
+
color: {
|
|
782
|
+
primary: "from-primary-500 to-primary-600 text-white",
|
|
783
|
+
secondary: "from-secondary-500 to-secondary-600 text-white",
|
|
784
|
+
success: "from-success-500 to-success-600 text-white",
|
|
785
|
+
warning: "from-warning-500 to-warning-600 text-white",
|
|
786
|
+
danger: "from-danger-500 to-danger-600 text-white"
|
|
787
|
+
}
|
|
788
|
+
},
|
|
789
|
+
defaultVariants: {
|
|
790
|
+
variant: "default"
|
|
791
|
+
}
|
|
792
|
+
}
|
|
793
|
+
);
|
|
794
|
+
var StatsCard = React11__namespace.forwardRef(
|
|
795
|
+
({ className, variant, color, title, value, trend, icon, ...props }, ref) => {
|
|
796
|
+
const getTrendIcon = (direction) => {
|
|
797
|
+
switch (direction) {
|
|
798
|
+
case "up":
|
|
799
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-4 w-4" });
|
|
800
|
+
case "down":
|
|
801
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-4 w-4" });
|
|
802
|
+
default:
|
|
803
|
+
return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" });
|
|
804
|
+
}
|
|
805
|
+
};
|
|
806
|
+
const getTrendColor = (direction) => {
|
|
807
|
+
if (variant === "gradient") return "text-white/80";
|
|
808
|
+
switch (direction) {
|
|
809
|
+
case "up":
|
|
810
|
+
return "text-success-600";
|
|
811
|
+
case "down":
|
|
812
|
+
return "text-danger-600";
|
|
813
|
+
default:
|
|
814
|
+
return "text-gray-600";
|
|
815
|
+
}
|
|
816
|
+
};
|
|
817
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
818
|
+
Card,
|
|
819
|
+
{
|
|
820
|
+
ref,
|
|
821
|
+
className: cn(statsCardVariants({ variant, color }), className),
|
|
822
|
+
padding: "none",
|
|
823
|
+
...props,
|
|
824
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
825
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
826
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
|
|
827
|
+
"text-sm font-medium",
|
|
828
|
+
variant === "gradient" ? "text-white/80" : "text-gray-600"
|
|
829
|
+
), children: title }),
|
|
830
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
|
|
831
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
|
|
832
|
+
"text-3xl font-bold",
|
|
833
|
+
variant === "gradient" ? "text-white" : "text-gray-900"
|
|
834
|
+
), children: value }),
|
|
835
|
+
trend && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
836
|
+
"flex items-center gap-1 mt-1 text-sm",
|
|
837
|
+
getTrendColor(trend.direction)
|
|
838
|
+
), children: [
|
|
839
|
+
getTrendIcon(trend.direction),
|
|
840
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: trend.value }),
|
|
841
|
+
trend.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
|
|
842
|
+
variant === "gradient" ? "text-white/60" : "text-gray-500"
|
|
843
|
+
), children: trend.label })
|
|
844
|
+
] })
|
|
845
|
+
] })
|
|
846
|
+
] }),
|
|
847
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
848
|
+
"p-3 rounded-full",
|
|
849
|
+
variant === "gradient" ? "bg-white/20" : "bg-gray-100"
|
|
850
|
+
), children: icon })
|
|
851
|
+
] }) })
|
|
852
|
+
}
|
|
853
|
+
);
|
|
854
|
+
}
|
|
855
|
+
);
|
|
856
|
+
StatsCard.displayName = "StatsCard";
|
|
857
|
+
var navbarVariants = classVarianceAuthority.cva(
|
|
858
|
+
"flex items-center justify-between w-full px-4 py-3 bg-white border-b border-gray-200",
|
|
859
|
+
{
|
|
860
|
+
variants: {
|
|
861
|
+
variant: {
|
|
862
|
+
default: "bg-white border-gray-200",
|
|
863
|
+
dark: "bg-gray-900 border-gray-700 text-white",
|
|
864
|
+
transparent: "bg-transparent border-transparent"
|
|
865
|
+
},
|
|
866
|
+
size: {
|
|
867
|
+
sm: "px-4 py-2",
|
|
868
|
+
md: "px-6 py-3",
|
|
869
|
+
lg: "px-8 py-4"
|
|
870
|
+
}
|
|
871
|
+
},
|
|
872
|
+
defaultVariants: {
|
|
873
|
+
variant: "default",
|
|
874
|
+
size: "md"
|
|
875
|
+
}
|
|
876
|
+
}
|
|
877
|
+
);
|
|
878
|
+
var Navbar = React11__namespace.forwardRef(
|
|
879
|
+
({ className, variant, size, logo, children, ...props }, ref) => {
|
|
880
|
+
const [isOpen, setIsOpen] = React11__namespace.useState(false);
|
|
881
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
882
|
+
"nav",
|
|
883
|
+
{
|
|
884
|
+
ref,
|
|
885
|
+
className: cn(navbarVariants({ variant, size }), className),
|
|
886
|
+
...props,
|
|
887
|
+
children: [
|
|
888
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
|
|
889
|
+
logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
|
|
890
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center space-x-4 ml-auto", children }),
|
|
891
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
892
|
+
"button",
|
|
893
|
+
{
|
|
894
|
+
className: "md:hidden p-2 rounded-md hover:bg-gray-100",
|
|
895
|
+
onClick: () => setIsOpen(!isOpen),
|
|
896
|
+
children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-6 w-6" })
|
|
897
|
+
}
|
|
898
|
+
)
|
|
899
|
+
] }),
|
|
900
|
+
isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 space-y-2", children }) })
|
|
901
|
+
]
|
|
902
|
+
}
|
|
903
|
+
);
|
|
904
|
+
}
|
|
905
|
+
);
|
|
906
|
+
Navbar.displayName = "Navbar";
|
|
907
|
+
var NavItem = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
908
|
+
"a",
|
|
909
|
+
{
|
|
910
|
+
ref,
|
|
911
|
+
className: cn(
|
|
912
|
+
"text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
|
913
|
+
className
|
|
914
|
+
),
|
|
915
|
+
...props
|
|
916
|
+
}
|
|
917
|
+
));
|
|
918
|
+
NavItem.displayName = "NavItem";
|
|
919
|
+
var sidebarVariants = classVarianceAuthority.cva(
|
|
920
|
+
"fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",
|
|
921
|
+
{
|
|
922
|
+
variants: {
|
|
923
|
+
collapsed: {
|
|
924
|
+
false: "w-72",
|
|
925
|
+
true: "w-16"
|
|
926
|
+
}
|
|
927
|
+
},
|
|
928
|
+
defaultVariants: {
|
|
929
|
+
collapsed: false
|
|
930
|
+
}
|
|
931
|
+
}
|
|
932
|
+
);
|
|
933
|
+
var menuItemVariants = classVarianceAuthority.cva(
|
|
934
|
+
"flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group",
|
|
935
|
+
{
|
|
936
|
+
variants: {
|
|
937
|
+
active: {
|
|
938
|
+
true: "bg-primary-50 text-primary-700 border-r-2 border-primary-600",
|
|
939
|
+
false: "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
|
|
940
|
+
},
|
|
941
|
+
collapsed: {
|
|
942
|
+
true: "justify-center px-2",
|
|
943
|
+
false: "justify-start"
|
|
944
|
+
}
|
|
945
|
+
},
|
|
946
|
+
defaultVariants: {
|
|
947
|
+
active: false,
|
|
948
|
+
collapsed: false
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
);
|
|
952
|
+
var defaultMenuItems = [
|
|
953
|
+
{
|
|
954
|
+
id: "dashboard",
|
|
955
|
+
label: "Dashboard",
|
|
956
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "h-5 w-5" }),
|
|
957
|
+
href: "/dashboard"
|
|
958
|
+
},
|
|
959
|
+
{
|
|
960
|
+
id: "analytics",
|
|
961
|
+
label: "Analytics",
|
|
962
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-5 w-5" }),
|
|
963
|
+
href: "/analytics",
|
|
964
|
+
badge: "New"
|
|
965
|
+
},
|
|
966
|
+
{
|
|
967
|
+
id: "users",
|
|
968
|
+
label: "Users",
|
|
969
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-5 w-5" }),
|
|
970
|
+
children: [
|
|
971
|
+
{ id: "all-users", label: "All Users", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-4 w-4" }) },
|
|
972
|
+
{ id: "user-roles", label: "User Roles", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }) }
|
|
973
|
+
]
|
|
974
|
+
},
|
|
975
|
+
{
|
|
976
|
+
id: "reports",
|
|
977
|
+
label: "Reports",
|
|
978
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-5 w-5" }),
|
|
979
|
+
href: "/reports"
|
|
980
|
+
},
|
|
981
|
+
{
|
|
982
|
+
id: "calendar",
|
|
983
|
+
label: "Calendar",
|
|
984
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-5 w-5" }),
|
|
985
|
+
href: "/calendar"
|
|
986
|
+
},
|
|
987
|
+
{
|
|
988
|
+
id: "messages",
|
|
989
|
+
label: "Messages",
|
|
990
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "h-5 w-5" }),
|
|
991
|
+
href: "/messages",
|
|
992
|
+
badge: "3"
|
|
993
|
+
},
|
|
994
|
+
{
|
|
995
|
+
id: "notifications",
|
|
996
|
+
label: "Notifications",
|
|
997
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }),
|
|
998
|
+
href: "/notifications"
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
id: "settings",
|
|
1002
|
+
label: "Settings",
|
|
1003
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }),
|
|
1004
|
+
href: "/settings"
|
|
1005
|
+
}
|
|
1006
|
+
];
|
|
1007
|
+
var Sidebar = React11__namespace.forwardRef(
|
|
1008
|
+
({
|
|
1009
|
+
className,
|
|
1010
|
+
collapsed = false,
|
|
1011
|
+
onToggle,
|
|
1012
|
+
menuItems = defaultMenuItems,
|
|
1013
|
+
activeItem = "dashboard",
|
|
1014
|
+
onItemClick,
|
|
1015
|
+
...props
|
|
1016
|
+
}, ref) => {
|
|
1017
|
+
const [expandedItems, setExpandedItems] = React11__namespace.useState([]);
|
|
1018
|
+
const toggleExpanded = (itemId) => {
|
|
1019
|
+
setExpandedItems(
|
|
1020
|
+
(prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
|
|
1021
|
+
);
|
|
1022
|
+
};
|
|
1023
|
+
const handleItemClick = (item) => {
|
|
1024
|
+
if (item.children) {
|
|
1025
|
+
toggleExpanded(item.id);
|
|
1026
|
+
} else {
|
|
1027
|
+
onItemClick?.(item.id);
|
|
1028
|
+
}
|
|
1029
|
+
};
|
|
1030
|
+
const renderMenuItem = (item, level = 0) => {
|
|
1031
|
+
const isActive = activeItem === item.id;
|
|
1032
|
+
const isExpanded = expandedItems.includes(item.id);
|
|
1033
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
1034
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1035
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1036
|
+
"button",
|
|
1037
|
+
{
|
|
1038
|
+
onClick: () => handleItemClick(item),
|
|
1039
|
+
className: cn(
|
|
1040
|
+
menuItemVariants({ active: isActive, collapsed }),
|
|
1041
|
+
level > 0 && "ml-4 pl-8",
|
|
1042
|
+
"relative"
|
|
1043
|
+
),
|
|
1044
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [
|
|
1045
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: item.icon }),
|
|
1046
|
+
!collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1047
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 truncate", children: item.label }),
|
|
1048
|
+
item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "danger", className: "ml-auto text-xs", children: item.badge }),
|
|
1049
|
+
hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1050
|
+
lucideReact.ChevronDown,
|
|
1051
|
+
{
|
|
1052
|
+
className: cn(
|
|
1053
|
+
"ml-auto h-4 w-4 transition-transform duration-200",
|
|
1054
|
+
isExpanded && "rotate-180"
|
|
1055
|
+
)
|
|
1056
|
+
}
|
|
1057
|
+
)
|
|
1058
|
+
] })
|
|
1059
|
+
] })
|
|
1060
|
+
}
|
|
1061
|
+
),
|
|
1062
|
+
hasChildren && !collapsed && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-1", children: item.children?.map((child) => renderMenuItem(child, level + 1)) })
|
|
1063
|
+
] }, item.id);
|
|
1064
|
+
};
|
|
1065
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1066
|
+
"div",
|
|
1067
|
+
{
|
|
1068
|
+
ref,
|
|
1069
|
+
className: cn(sidebarVariants({ collapsed }), className),
|
|
1070
|
+
...props,
|
|
1071
|
+
children: [
|
|
1072
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [
|
|
1073
|
+
!collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
1074
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-bold text-sm", children: "B" }) }),
|
|
1075
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-xl text-gray-900", children: "Beyond" })
|
|
1076
|
+
] }),
|
|
1077
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1078
|
+
"button",
|
|
1079
|
+
{
|
|
1080
|
+
onClick: onToggle,
|
|
1081
|
+
className: "p-1.5 rounded-lg hover:bg-gray-100 transition-colors",
|
|
1082
|
+
children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-gray-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 text-gray-600" })
|
|
1083
|
+
}
|
|
1084
|
+
)
|
|
1085
|
+
] }),
|
|
1086
|
+
/* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 px-4 py-6 space-y-2 overflow-y-auto", children: menuItems.map((item) => renderMenuItem(item)) }),
|
|
1087
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200 p-4", children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
|
|
1088
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }),
|
|
1089
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "JD" })
|
|
1090
|
+
] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
|
|
1091
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
|
|
1092
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
|
|
1093
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }),
|
|
1094
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "JD" })
|
|
1095
|
+
] }),
|
|
1096
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
1097
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: "John Doe" }),
|
|
1098
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 truncate", children: "john@company.com" })
|
|
1099
|
+
] })
|
|
1100
|
+
] }),
|
|
1101
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-2", children: [
|
|
1102
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [
|
|
1103
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-3 w-3 mr-1" }),
|
|
1104
|
+
"Profile"
|
|
1105
|
+
] }),
|
|
1106
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [
|
|
1107
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "h-3 w-3 mr-1" }),
|
|
1108
|
+
"Logout"
|
|
1109
|
+
] })
|
|
1110
|
+
] })
|
|
1111
|
+
] }) })
|
|
1112
|
+
]
|
|
1113
|
+
}
|
|
1114
|
+
);
|
|
1115
|
+
}
|
|
1116
|
+
);
|
|
1117
|
+
Sidebar.displayName = "Sidebar";
|
|
1118
|
+
var DashboardHeader = React11__namespace.forwardRef(
|
|
1119
|
+
({
|
|
1120
|
+
className,
|
|
1121
|
+
breadcrumbs = [{ label: "Dashboard" }],
|
|
1122
|
+
onMenuToggle,
|
|
1123
|
+
sidebarCollapsed = false,
|
|
1124
|
+
showSearch = true,
|
|
1125
|
+
searchPlaceholder = "Search...",
|
|
1126
|
+
onSearchChange,
|
|
1127
|
+
...props
|
|
1128
|
+
}, ref) => {
|
|
1129
|
+
const [searchValue, setSearchValue] = React11__namespace.useState("");
|
|
1130
|
+
const handleSearchChange = (e) => {
|
|
1131
|
+
const value = e.target.value;
|
|
1132
|
+
setSearchValue(value);
|
|
1133
|
+
onSearchChange?.(value);
|
|
1134
|
+
};
|
|
1135
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1136
|
+
"header",
|
|
1137
|
+
{
|
|
1138
|
+
ref,
|
|
1139
|
+
className: cn(
|
|
1140
|
+
"sticky top-0 z-30 bg-white border-b border-gray-200 transition-all duration-300",
|
|
1141
|
+
sidebarCollapsed ? "ml-16" : "ml-72",
|
|
1142
|
+
className
|
|
1143
|
+
),
|
|
1144
|
+
...props,
|
|
1145
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
|
|
1146
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
|
|
1147
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1148
|
+
Button,
|
|
1149
|
+
{
|
|
1150
|
+
variant: "ghost",
|
|
1151
|
+
size: "sm",
|
|
1152
|
+
onClick: onMenuToggle,
|
|
1153
|
+
className: "md:hidden",
|
|
1154
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
|
|
1155
|
+
}
|
|
1156
|
+
),
|
|
1157
|
+
/* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex items-center space-x-2 text-sm", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React11__namespace.Fragment, { children: [
|
|
1158
|
+
index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "/" }),
|
|
1159
|
+
item.href ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1160
|
+
"a",
|
|
1161
|
+
{
|
|
1162
|
+
href: item.href,
|
|
1163
|
+
className: "text-gray-600 hover:text-gray-900 transition-colors",
|
|
1164
|
+
children: item.label
|
|
1165
|
+
}
|
|
1166
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 font-medium", children: item.label })
|
|
1167
|
+
] }, index)) })
|
|
1168
|
+
] }),
|
|
1169
|
+
showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md mx-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
1170
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }),
|
|
1171
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1172
|
+
Input,
|
|
1173
|
+
{
|
|
1174
|
+
type: "text",
|
|
1175
|
+
placeholder: searchPlaceholder,
|
|
1176
|
+
value: searchValue,
|
|
1177
|
+
onChange: handleSearchChange,
|
|
1178
|
+
className: "pl-10 bg-gray-50 border-gray-200 focus:bg-white"
|
|
1179
|
+
}
|
|
1180
|
+
)
|
|
1181
|
+
] }) }),
|
|
1182
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
|
|
1183
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "relative", children: [
|
|
1184
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }),
|
|
1185
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1186
|
+
Badge,
|
|
1187
|
+
{
|
|
1188
|
+
variant: "danger",
|
|
1189
|
+
className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center",
|
|
1190
|
+
children: "3"
|
|
1191
|
+
}
|
|
1192
|
+
)
|
|
1193
|
+
] }) }),
|
|
1194
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }) }),
|
|
1195
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", children: [
|
|
1196
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:block text-right", children: [
|
|
1197
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: "John Doe" }),
|
|
1198
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Administrator" })
|
|
1199
|
+
] }),
|
|
1200
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
|
|
1201
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }),
|
|
1202
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "JD" })
|
|
1203
|
+
] })
|
|
1204
|
+
] })
|
|
1205
|
+
] })
|
|
1206
|
+
] })
|
|
1207
|
+
}
|
|
1208
|
+
);
|
|
1209
|
+
}
|
|
1210
|
+
);
|
|
1211
|
+
DashboardHeader.displayName = "DashboardHeader";
|
|
1212
|
+
var DashboardLayout = React11__namespace.forwardRef(
|
|
1213
|
+
({
|
|
1214
|
+
children,
|
|
1215
|
+
className,
|
|
1216
|
+
sidebarMenuItems,
|
|
1217
|
+
activeSidebarItem,
|
|
1218
|
+
breadcrumbs,
|
|
1219
|
+
onSidebarItemClick,
|
|
1220
|
+
showSearch,
|
|
1221
|
+
searchPlaceholder,
|
|
1222
|
+
onSearchChange,
|
|
1223
|
+
...props
|
|
1224
|
+
}, ref) => {
|
|
1225
|
+
const [sidebarCollapsed, setSidebarCollapsed] = React11__namespace.useState(false);
|
|
1226
|
+
const toggleSidebar = () => {
|
|
1227
|
+
setSidebarCollapsed((prev) => !prev);
|
|
1228
|
+
};
|
|
1229
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("min-h-screen bg-gray-50", className), ...props, children: [
|
|
1230
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1231
|
+
Sidebar,
|
|
1232
|
+
{
|
|
1233
|
+
collapsed: sidebarCollapsed,
|
|
1234
|
+
onToggle: toggleSidebar,
|
|
1235
|
+
menuItems: sidebarMenuItems,
|
|
1236
|
+
activeItem: activeSidebarItem,
|
|
1237
|
+
onItemClick: onSidebarItemClick,
|
|
1238
|
+
className: props.sidebarClassName
|
|
1239
|
+
}
|
|
1240
|
+
),
|
|
1241
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-screen", children: [
|
|
1242
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1243
|
+
DashboardHeader,
|
|
1244
|
+
{
|
|
1245
|
+
sidebarCollapsed,
|
|
1246
|
+
onMenuToggle: toggleSidebar,
|
|
1247
|
+
breadcrumbs,
|
|
1248
|
+
showSearch,
|
|
1249
|
+
searchPlaceholder,
|
|
1250
|
+
onSearchChange
|
|
1251
|
+
}
|
|
1252
|
+
),
|
|
1253
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1254
|
+
"main",
|
|
1255
|
+
{
|
|
1256
|
+
className: cn(
|
|
1257
|
+
"flex-1 transition-all duration-300 p-6",
|
|
1258
|
+
props.disableSidebarMargin ? "" : sidebarCollapsed ? "ml-16" : "ml-72"
|
|
1259
|
+
),
|
|
1260
|
+
children
|
|
1261
|
+
}
|
|
1262
|
+
)
|
|
1263
|
+
] }),
|
|
1264
|
+
!sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1265
|
+
"div",
|
|
1266
|
+
{
|
|
1267
|
+
className: "fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden",
|
|
1268
|
+
onClick: toggleSidebar
|
|
1269
|
+
}
|
|
1270
|
+
)
|
|
1271
|
+
] });
|
|
1272
|
+
}
|
|
1273
|
+
);
|
|
1274
|
+
DashboardLayout.displayName = "DashboardLayout";
|
|
1275
|
+
var gridVariants = classVarianceAuthority.cva(
|
|
1276
|
+
"grid gap-6",
|
|
1277
|
+
{
|
|
1278
|
+
variants: {
|
|
1279
|
+
columns: {
|
|
1280
|
+
1: "grid-cols-1",
|
|
1281
|
+
2: "grid-cols-1 md:grid-cols-2",
|
|
1282
|
+
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
|
1283
|
+
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
|
1284
|
+
6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
|
|
1285
|
+
12: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12"
|
|
1286
|
+
}
|
|
1287
|
+
},
|
|
1288
|
+
defaultVariants: {
|
|
1289
|
+
columns: 12
|
|
1290
|
+
}
|
|
1291
|
+
}
|
|
1292
|
+
);
|
|
1293
|
+
var gridItemVariants = classVarianceAuthority.cva(
|
|
1294
|
+
"min-h-0",
|
|
1295
|
+
// Prevents grid items from growing unnecessarily
|
|
1296
|
+
{
|
|
1297
|
+
variants: {
|
|
1298
|
+
colSpan: {
|
|
1299
|
+
1: "col-span-1",
|
|
1300
|
+
2: "col-span-1 md:col-span-2",
|
|
1301
|
+
3: "col-span-1 md:col-span-2 lg:col-span-3",
|
|
1302
|
+
4: "col-span-1 md:col-span-2 lg:col-span-4",
|
|
1303
|
+
6: "col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6",
|
|
1304
|
+
12: "col-span-full"
|
|
1305
|
+
},
|
|
1306
|
+
rowSpan: {
|
|
1307
|
+
1: "row-span-1",
|
|
1308
|
+
2: "row-span-2",
|
|
1309
|
+
3: "row-span-3",
|
|
1310
|
+
4: "row-span-4"
|
|
1311
|
+
}
|
|
1312
|
+
},
|
|
1313
|
+
defaultVariants: {
|
|
1314
|
+
colSpan: 1,
|
|
1315
|
+
rowSpan: 1
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
);
|
|
1319
|
+
var DashboardGrid = React11__namespace.forwardRef(
|
|
1320
|
+
({ className, columns, ...props }, ref) => {
|
|
1321
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1322
|
+
"div",
|
|
1323
|
+
{
|
|
1324
|
+
ref,
|
|
1325
|
+
className: cn(gridVariants({ columns }), className),
|
|
1326
|
+
...props
|
|
1327
|
+
}
|
|
1328
|
+
);
|
|
1329
|
+
}
|
|
1330
|
+
);
|
|
1331
|
+
var DashboardGridItem = React11__namespace.forwardRef(
|
|
1332
|
+
({ className, colSpan, rowSpan, ...props }, ref) => {
|
|
1333
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1334
|
+
"div",
|
|
1335
|
+
{
|
|
1336
|
+
ref,
|
|
1337
|
+
className: cn(gridItemVariants({ colSpan, rowSpan }), className),
|
|
1338
|
+
...props
|
|
1339
|
+
}
|
|
1340
|
+
);
|
|
1341
|
+
}
|
|
1342
|
+
);
|
|
1343
|
+
DashboardGrid.displayName = "DashboardGrid";
|
|
1344
|
+
DashboardGridItem.displayName = "DashboardGridItem";
|
|
1345
|
+
function ShowcaseButtonDemo() {
|
|
1346
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
|
|
1347
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", children: "Primary" }),
|
|
1348
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", children: "Secondary" }),
|
|
1349
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "danger", children: "Danger" }),
|
|
1350
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "success", children: "Success" }),
|
|
1351
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "warning", children: "Warning" }),
|
|
1352
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Outline" }),
|
|
1353
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", children: "Ghost" }),
|
|
1354
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", children: "Link" })
|
|
1355
|
+
] });
|
|
306
1356
|
}
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
1357
|
+
function ShowcaseInputDemo() {
|
|
1358
|
+
const [v, setV] = React11__namespace.useState("");
|
|
1359
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 max-w-md", children: [
|
|
1360
|
+
/* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Default input", value: v, onChange: (e) => setV(e.target.value) }),
|
|
1361
|
+
/* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Success state", variant: "success" }),
|
|
1362
|
+
/* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Error state", variant: "error" }),
|
|
1363
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
|
|
1364
|
+
/* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Small", inputSize: "sm" }),
|
|
1365
|
+
/* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Medium", inputSize: "md" }),
|
|
1366
|
+
/* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Large", inputSize: "lg" })
|
|
1367
|
+
] })
|
|
1368
|
+
] });
|
|
311
1369
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
1370
|
+
function ShowcaseTextareaDemo() {
|
|
1371
|
+
const [tv, setTv] = React11__namespace.useState("");
|
|
1372
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 max-w-md", children: [
|
|
1373
|
+
/* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Default textarea", value: tv, onChange: (e) => setTv(e.target.value) }),
|
|
1374
|
+
/* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Success state", variant: "success" }),
|
|
1375
|
+
/* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Error state", variant: "error" }),
|
|
1376
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
|
|
1377
|
+
/* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Small (default)" }),
|
|
1378
|
+
/* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Disabled", disabled: true })
|
|
1379
|
+
] })
|
|
1380
|
+
] });
|
|
1381
|
+
}
|
|
1382
|
+
function ShowcaseSwitchDemo() {
|
|
1383
|
+
const [checked, setChecked] = React11__namespace.useState(false);
|
|
1384
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
|
|
1385
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1386
|
+
/* @__PURE__ */ jsxRuntime.jsx(Switch, { checked, onCheckedChange: setChecked }),
|
|
1387
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" })
|
|
1388
|
+
] }),
|
|
1389
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1390
|
+
/* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: true }),
|
|
1391
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Checked" })
|
|
1392
|
+
] }),
|
|
1393
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1394
|
+
/* @__PURE__ */ jsxRuntime.jsx(Switch, { disabled: true }),
|
|
1395
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disabled" })
|
|
1396
|
+
] }),
|
|
1397
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1398
|
+
/* @__PURE__ */ jsxRuntime.jsx(Switch, { size: "sm" }),
|
|
1399
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Small" })
|
|
1400
|
+
] }),
|
|
1401
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1402
|
+
/* @__PURE__ */ jsxRuntime.jsx(Switch, { size: "lg" }),
|
|
1403
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Large" })
|
|
1404
|
+
] })
|
|
1405
|
+
] });
|
|
1406
|
+
}
|
|
1407
|
+
function ShowcaseCheckboxDemo() {
|
|
1408
|
+
const [checked, setChecked] = React11__namespace.useState(false);
|
|
1409
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
|
|
1410
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1411
|
+
/* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked, onChange: () => setChecked(!checked) }),
|
|
1412
|
+
" ",
|
|
1413
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" })
|
|
1414
|
+
] }),
|
|
1415
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1416
|
+
/* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: true }),
|
|
1417
|
+
" ",
|
|
1418
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Checked" })
|
|
1419
|
+
] }),
|
|
1420
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1421
|
+
/* @__PURE__ */ jsxRuntime.jsx(Checkbox, { disabled: true }),
|
|
1422
|
+
" ",
|
|
1423
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disabled" })
|
|
1424
|
+
] }),
|
|
1425
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1426
|
+
/* @__PURE__ */ jsxRuntime.jsx(Checkbox, { size: "sm" }),
|
|
1427
|
+
" ",
|
|
1428
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Small" })
|
|
1429
|
+
] }),
|
|
1430
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
1431
|
+
/* @__PURE__ */ jsxRuntime.jsx(Checkbox, { size: "lg" }),
|
|
1432
|
+
" ",
|
|
1433
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Large" })
|
|
1434
|
+
] })
|
|
1435
|
+
] });
|
|
355
1436
|
}
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
`,rt=16,On=({reverseOrder:t,position:r="top-center",toastOptions:a,gutter:s,children:o,toasterId:i,containerStyle:l,containerClassName:c})=>{let{toasts:u,handlers:p}=pn(a,i);return f.createElement("div",{"data-rht-toaster":i||"",style:{position:"fixed",zIndex:9999,top:rt,left:rt,right:rt,bottom:rt,pointerEvents:"none",...l},className:c,onMouseEnter:p.startPause,onMouseLeave:p.endPause},u.map(m=>{let h=m.position||r,b=p.calculateOffset(m,{reverseOrder:t,gutter:s,defaultPosition:r}),x=Pn(h,b);return f.createElement(_n,{id:m.id,key:m.id,onHeightUpdate:p.updateHeight,className:m.visible?Vn:"",style:x},m.type==="custom"?st(m.message,m):o?o(m):f.createElement(Hr,{toast:m,position:h}))}))},ze=$;const Yr=I("flex items-center gap-2 p-4 rounded-lg shadow-lg border max-w-md",{variants:{variant:{default:"bg-white border-gray-200 text-gray-900",success:"bg-success-50 border-success-200 text-success-800",error:"bg-danger-50 border-danger-200 text-danger-800",warning:"bg-warning-50 border-warning-200 text-warning-800",info:"bg-primary-50 border-primary-200 text-primary-800"}},defaultVariants:{variant:"default"}}),In=t=>{switch(t){case"success":return e.jsx(Es,{className:"h-5 w-5 text-success-600"});case"error":return e.jsx(Sr,{className:"h-5 w-5 text-danger-600"});case"warning":return e.jsx(Ss,{className:"h-5 w-5 text-warning-600"});case"info":return e.jsx(Vs,{className:"h-5 w-5 text-primary-600"});default:return null}},nt={success:(t,r)=>ze.success(t,{duration:(r==null?void 0:r.duration)||4e3}),error:(t,r)=>ze.error(t,{duration:(r==null?void 0:r.duration)||5e3}),warning:(t,r)=>ze(t,{icon:"⚠️",duration:(r==null?void 0:r.duration)||4e3}),info:(t,r)=>ze(t,{icon:"ℹ️",duration:(r==null?void 0:r.duration)||4e3}),default:(t,r)=>ze(t,{duration:(r==null?void 0:r.duration)||4e3})},Et=()=>e.jsx(On,{position:"top-right",toastOptions:{duration:4e3,className:"",style:{background:"transparent",boxShadow:"none",padding:0}},children:t=>e.jsx(Hr,{toast:t,children:({icon:r,message:a})=>e.jsxs("div",{className:y(Yr({variant:t.type==="success"?"success":t.type==="error"?"error":"default"})),children:[In(t.type==="success"?"success":t.type==="error"?"error":"default")||r,e.jsx("div",{className:"flex-1 text-sm font-medium",children:a}),e.jsx("button",{onClick:()=>ze.dismiss(t.id),className:"inline-flex h-5 w-5 items-center justify-center rounded-full hover:bg-black/10",children:e.jsx(Tt,{className:"h-3 w-3"})})]})})}),Jr=I("inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500",{variants:{variant:{default:"bg-gray-100",pills:"bg-transparent gap-2",underline:"bg-transparent border-b border-gray-200"}},defaultVariants:{variant:"default"}}),Kr=I("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm",pills:"data-[state=active]:bg-primary-100 data-[state=active]:text-primary-700 hover:bg-gray-100",underline:"data-[state=active]:border-b-2 data-[state=active]:border-primary-600 data-[state=active]:text-primary-600 hover:text-gray-900 rounded-none border-b-2 border-transparent"}},defaultVariants:{variant:"default"}}),lt=f.createContext(void 0),At=({value:t,onValueChange:r,variant:a,children:s,className:o})=>e.jsx(lt.Provider,{value:{value:t,onValueChange:r,variant:a},children:e.jsx("div",{className:y("w-full",o),children:s})}),ct=f.forwardRef(({className:t,...r},a)=>{const s=f.useContext(lt);if(!s)throw new Error("TabsList must be used within Tabs");return e.jsx("div",{ref:a,className:y(Jr({variant:s.variant}),t),...r})});ct.displayName="TabsList";const ye=f.forwardRef(({className:t,value:r,...a},s)=>{const o=f.useContext(lt);if(!o)throw new Error("TabsTrigger must be used within Tabs");const i=o.value===r;return e.jsx("button",{ref:s,className:y(Kr({variant:o.variant}),t),"data-state":i?"active":"inactive",onClick:()=>o.onValueChange(r),...a})});ye.displayName="TabsTrigger";const ve=f.forwardRef(({className:t,value:r,...a},s)=>{const o=f.useContext(lt);if(!o)throw new Error("TabsContent must be used within Tabs");return o.value!==r?null:e.jsx("div",{ref:s,className:y("mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",t),...a})});ve.displayName="TabsContent";const Zr=I("relative overflow-hidden",{variants:{variant:{default:"",gradient:"bg-gradient-to-br"},color:{primary:"from-primary-500 to-primary-600 text-white",secondary:"from-secondary-500 to-secondary-600 text-white",success:"from-success-500 to-success-600 text-white",warning:"from-warning-500 to-warning-600 text-white",danger:"from-danger-500 to-danger-600 text-white"}},defaultVariants:{variant:"default"}}),Ie=f.forwardRef(({className:t,variant:r,color:a,title:s,value:o,trend:i,icon:l,...c},u)=>{const p=h=>{switch(h){case"up":return e.jsx(Ys,{className:"h-4 w-4"});case"down":return e.jsx(Hs,{className:"h-4 w-4"});default:return e.jsx(Ls,{className:"h-4 w-4"})}},m=h=>{if(r==="gradient")return"text-white/80";switch(h){case"up":return"text-success-600";case"down":return"text-danger-600";default:return"text-gray-600"}};return e.jsx(fe,{ref:u,className:y(Zr({variant:r,color:a}),t),padding:"none",...c,children:e.jsx(he,{className:"p-6",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("p",{className:y("text-sm font-medium",r==="gradient"?"text-white/80":"text-gray-600"),children:s}),e.jsxs("div",{className:"mt-2",children:[e.jsx("p",{className:y("text-3xl font-bold",r==="gradient"?"text-white":"text-gray-900"),children:o}),i&&e.jsxs("div",{className:y("flex items-center gap-1 mt-1 text-sm",m(i.direction)),children:[p(i.direction),e.jsx("span",{children:i.value}),i.label&&e.jsx("span",{className:y(r==="gradient"?"text-white/60":"text-gray-500"),children:i.label})]})]})]}),l&&e.jsx("div",{className:y("p-3 rounded-full",r==="gradient"?"bg-white/20":"bg-gray-100"),children:l})]})})})});Ie.displayName="StatsCard";const Xr=I("flex items-center justify-between w-full px-4 py-3 bg-white border-b border-gray-200",{variants:{variant:{default:"bg-white border-gray-200",dark:"bg-gray-900 border-gray-700 text-white",transparent:"bg-transparent border-transparent"},size:{sm:"px-4 py-2",md:"px-6 py-3",lg:"px-8 py-4"}},defaultVariants:{variant:"default",size:"md"}}),Mt=f.forwardRef(({className:t,variant:r,size:a,logo:s,children:o,...i},l)=>{const[c,u]=f.useState(!1);return e.jsxs("nav",{ref:l,className:y(Xr({variant:r,size:a}),t),...i,children:[e.jsxs("div",{className:"flex items-center justify-between w-full",children:[s&&e.jsx("div",{className:"flex-shrink-0",children:s}),e.jsx("div",{className:"hidden md:flex items-center space-x-4 ml-auto",children:o}),e.jsx("button",{className:"md:hidden p-2 rounded-md hover:bg-gray-100",onClick:()=>u(!c),children:c?e.jsx(Tt,{className:"h-6 w-6"}):e.jsx(Mr,{className:"h-6 w-6"})})]}),c&&e.jsx("div",{className:"md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50",children:e.jsx("div",{className:"px-4 py-2 space-y-2",children:o})})]})});Mt.displayName="Navbar";const Qr=f.forwardRef(({className:t,...r},a)=>e.jsx("a",{ref:a,className:y("text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors",t),...r}));Qr.displayName="NavItem";const ea=I("fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",{variants:{collapsed:{false:"w-72",true:"w-16"}},defaultVariants:{collapsed:!1}}),Ln=I("flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group",{variants:{active:{true:"bg-primary-50 text-primary-700 border-r-2 border-primary-600",false:"text-gray-700 hover:bg-gray-50 hover:text-gray-900"},collapsed:{true:"justify-center px-2",false:"justify-start"}},defaultVariants:{active:!1,collapsed:!1}}),Fn=[{id:"dashboard",label:"Dashboard",icon:e.jsx(Ps,{className:"h-5 w-5"}),href:"/dashboard"},{id:"analytics",label:"Analytics",icon:e.jsx(we,{className:"h-5 w-5"}),href:"/analytics",badge:"New"},{id:"users",label:"Users",icon:e.jsx(nr,{className:"h-5 w-5"}),children:[{id:"all-users",label:"All Users",icon:e.jsx(nr,{className:"h-4 w-4"})},{id:"user-roles",label:"User Roles",icon:e.jsx(Oe,{className:"h-4 w-4"})}]},{id:"reports",label:"Reports",icon:e.jsx(_s,{className:"h-5 w-5"}),href:"/reports"},{id:"calendar",label:"Calendar",icon:e.jsx(Rs,{className:"h-5 w-5"}),href:"/calendar"},{id:"messages",label:"Messages",icon:e.jsx(Is,{className:"h-5 w-5"}),href:"/messages",badge:"3"},{id:"notifications",label:"Notifications",icon:e.jsx(Tr,{className:"h-5 w-5"}),href:"/notifications"},{id:"settings",label:"Settings",icon:e.jsx(Oe,{className:"h-5 w-5"}),href:"/settings"}],dt=f.forwardRef(({className:t,collapsed:r=!1,onToggle:a,menuItems:s=Fn,activeItem:o="dashboard",onItemClick:i,...l},c)=>{const[u,p]=f.useState([]),m=x=>{p(E=>E.includes(x)?E.filter(A=>A!==x):[...E,x])},h=x=>{x.children?m(x.id):i==null||i(x.id)},b=(x,E=0)=>{var v;const A=o===x.id,k=u.includes(x.id),M=x.children&&x.children.length>0;return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>h(x),className:y(Ln({active:A,collapsed:r}),E>0&&"ml-4 pl-8","relative"),children:e.jsxs("div",{className:"flex items-center min-w-0 flex-1",children:[e.jsx("div",{className:"flex-shrink-0",children:x.icon}),!r&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"ml-3 truncate",children:x.label}),x.badge&&e.jsx(X,{variant:"danger",className:"ml-auto text-xs",children:x.badge}),M&&e.jsx(Er,{className:y("ml-auto h-4 w-4 transition-transform duration-200",k&&"rotate-180")})]})]})}),M&&!r&&k&&e.jsx("div",{className:"mt-1 space-y-1",children:(v=x.children)==null?void 0:v.map(O=>b(O,E+1))})]},x.id)};return e.jsxs("div",{ref:c,className:y(ea({collapsed:r}),t),...l,children:[e.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-gray-200",children:[!r&&e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("div",{className:"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"B"})}),e.jsx("span",{className:"font-bold text-xl text-gray-900",children:"Beyond"})]}),e.jsx("button",{onClick:a,className:"p-1.5 rounded-lg hover:bg-gray-100 transition-colors",children:r?e.jsx(Ar,{className:"h-4 w-4 text-gray-600"}):e.jsx(As,{className:"h-4 w-4 text-gray-600"})})]}),e.jsx("nav",{className:"flex-1 px-4 py-6 space-y-2 overflow-y-auto",children:s.map(x=>b(x))}),e.jsx("div",{className:"border-t border-gray-200 p-4",children:r?e.jsx("div",{className:"flex justify-center",children:e.jsxs(ge,{size:"sm",children:[e.jsx(xe,{src:"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64"}),e.jsx(be,{children:"JD"})]})}):e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsxs(ge,{size:"sm",children:[e.jsx(xe,{src:"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64"}),e.jsx(be,{children:"JD"})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-sm font-medium text-gray-900 truncate",children:"John Doe"}),e.jsx("p",{className:"text-xs text-gray-500 truncate",children:"john@company.com"})]})]}),e.jsxs("div",{className:"flex space-x-2",children:[e.jsxs("button",{className:"flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors",children:[e.jsx(Nt,{className:"h-3 w-3 mr-1"}),"Profile"]}),e.jsxs("button",{className:"flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors",children:[e.jsx(Os,{className:"h-3 w-3 mr-1"}),"Logout"]})]})]})})]})});dt.displayName="Sidebar";const Dt=f.forwardRef(({className:t,breadcrumbs:r=[{label:"Dashboard"}],onMenuToggle:a,sidebarCollapsed:s=!1,showSearch:o=!0,searchPlaceholder:i="Search...",onSearchChange:l,...c},u)=>{const[p,m]=f.useState(""),h=b=>{const x=b.target.value;m(x),l==null||l(x)};return e.jsx("header",{ref:u,className:y("sticky top-0 z-30 bg-white border-b border-gray-200 transition-all duration-300",s?"ml-16":"ml-72",t),...c,children:e.jsxs("div",{className:"flex items-center justify-between px-6 py-4",children:[e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx(P,{variant:"ghost",size:"sm",onClick:a,className:"md:hidden",children:e.jsx(Mr,{className:"h-5 w-5"})}),e.jsx("nav",{className:"flex items-center space-x-2 text-sm",children:r.map((b,x)=>e.jsxs(f.Fragment,{children:[x>0&&e.jsx("span",{className:"text-gray-400",children:"/"}),b.href?e.jsx("a",{href:b.href,className:"text-gray-600 hover:text-gray-900 transition-colors",children:b.label}):e.jsx("span",{className:"text-gray-900 font-medium",children:b.label})]},x))})]}),o&&e.jsx("div",{className:"flex-1 max-w-md mx-8",children:e.jsxs("div",{className:"relative",children:[e.jsx(Dr,{className:"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400"}),e.jsx(Q,{type:"text",placeholder:i,value:p,onChange:h,className:"pl-10 bg-gray-50 border-gray-200 focus:bg-white"})]})}),e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsx("div",{className:"relative",children:e.jsxs(P,{variant:"ghost",size:"sm",className:"relative",children:[e.jsx(Tr,{className:"h-5 w-5"}),e.jsx(X,{variant:"danger",className:"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center",children:"3"})]})}),e.jsx(P,{variant:"ghost",size:"sm",children:e.jsx(Oe,{className:"h-5 w-5"})}),e.jsxs("div",{className:"flex items-center space-x-3 pl-3 border-l border-gray-200",children:[e.jsxs("div",{className:"hidden sm:block text-right",children:[e.jsx("p",{className:"text-sm font-medium text-gray-900",children:"John Doe"}),e.jsx("p",{className:"text-xs text-gray-500",children:"Administrator"})]}),e.jsxs(ge,{size:"sm",children:[e.jsx(xe,{src:"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64"}),e.jsx(be,{children:"JD"})]})]})]})]})})});Dt.displayName="DashboardHeader";const zt=f.forwardRef(({children:t,className:r,sidebarMenuItems:a,activeSidebarItem:s,breadcrumbs:o,onSidebarItemClick:i,showSearch:l,searchPlaceholder:c,onSearchChange:u,...p},m)=>{const[h,b]=f.useState(!1),x=()=>{b(E=>!E)};return e.jsxs("div",{ref:m,className:y("min-h-screen bg-gray-50",r),...p,children:[e.jsx(dt,{collapsed:h,onToggle:x,menuItems:a,activeItem:s,onItemClick:i,className:p.sidebarClassName}),e.jsxs("div",{className:"flex flex-col min-h-screen",children:[e.jsx(Dt,{sidebarCollapsed:h,onMenuToggle:x,breadcrumbs:o,showSearch:l,searchPlaceholder:c,onSearchChange:u}),e.jsx("main",{className:y("flex-1 transition-all duration-300 p-6",p.disableSidebarMargin?"":h?"ml-16":"ml-72"),children:t})]}),!h&&e.jsx("div",{className:"fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden",onClick:x})]})});zt.displayName="DashboardLayout";const ta=I("grid gap-6",{variants:{columns:{1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",4:"grid-cols-1 md:grid-cols-2 lg:grid-cols-4",6:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",12:"grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12"}},defaultVariants:{columns:12}}),ra=I("min-h-0",{variants:{colSpan:{1:"col-span-1",2:"col-span-1 md:col-span-2",3:"col-span-1 md:col-span-2 lg:col-span-3",4:"col-span-1 md:col-span-2 lg:col-span-4",6:"col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6",12:"col-span-full"},rowSpan:{1:"row-span-1",2:"row-span-2",3:"row-span-3",4:"row-span-4"}},defaultVariants:{colSpan:1,rowSpan:1}}),_t=f.forwardRef(({className:t,columns:r,...a},s)=>e.jsx("div",{ref:s,className:y(ta({columns:r}),t),...a})),aa=f.forwardRef(({className:t,colSpan:r,rowSpan:a,...s},o)=>e.jsx("div",{ref:o,className:y(ra({colSpan:r,rowSpan:a}),t),...s}));_t.displayName="DashboardGrid";aa.displayName="DashboardGridItem";function $n(){return e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsx(P,{variant:"primary",children:"Primary"}),e.jsx(P,{variant:"secondary",children:"Secondary"}),e.jsx(P,{variant:"danger",children:"Danger"}),e.jsx(P,{variant:"success",children:"Success"}),e.jsx(P,{variant:"warning",children:"Warning"}),e.jsx(P,{variant:"outline",children:"Outline"}),e.jsx(P,{variant:"ghost",children:"Ghost"}),e.jsx(P,{variant:"link",children:"Link"})]})}function Bn(){const[t,r]=f.useState("");return e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsx(Q,{placeholder:"Default input",value:t,onChange:a=>r(a.target.value)}),e.jsx(Q,{placeholder:"Success state",variant:"success"}),e.jsx(Q,{placeholder:"Error state",variant:"error"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(Q,{placeholder:"Small",inputSize:"sm"}),e.jsx(Q,{placeholder:"Medium",inputSize:"md"}),e.jsx(Q,{placeholder:"Large",inputSize:"lg"})]})]})}function Wn(){const[t,r]=f.useState("");return e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsx(Te,{placeholder:"Default textarea",value:t,onChange:a=>r(a.target.value)}),e.jsx(Te,{placeholder:"Success state",variant:"success"}),e.jsx(Te,{placeholder:"Error state",variant:"error"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(Te,{placeholder:"Small (default)"}),e.jsx(Te,{placeholder:"Disabled",disabled:!0})]})]})}function Un(){const[t,r]=f.useState(!1);return e.jsxs("div",{className:"space-y-2",children:[e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Re,{checked:t,onCheckedChange:r}),e.jsx("span",{children:"Default"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Re,{checked:!0}),e.jsx("span",{children:"Checked"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Re,{disabled:!0}),e.jsx("span",{children:"Disabled"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Re,{size:"sm"}),e.jsx("span",{children:"Small"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Re,{size:"lg"}),e.jsx("span",{children:"Large"})]})]})}function Gn(){const[t,r]=f.useState(!1);return e.jsxs("div",{className:"space-y-2",children:[e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Ee,{checked:t,onChange:()=>r(!t)})," ",e.jsx("span",{children:"Default"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Ee,{checked:!0})," ",e.jsx("span",{children:"Checked"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Ee,{disabled:!0})," ",e.jsx("span",{children:"Disabled"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Ee,{size:"sm"})," ",e.jsx("span",{children:"Small"})]}),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(Ee,{size:"lg"})," ",e.jsx("span",{children:"Large"})]})]})}function qn(){return e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(fe,{children:[e.jsx(Pe,{children:e.jsx(Ve,{children:"Default Card"})}),e.jsx(he,{children:e.jsx("p",{className:"text-gray-600",children:"This is a default card with standard styling."})})]}),e.jsxs(fe,{variant:"elevated",children:[e.jsx(Pe,{children:e.jsx(Ve,{children:"Elevated Card"})}),e.jsx(he,{children:e.jsx("p",{className:"text-gray-600",children:"This card has elevated shadow styling."})})]})]})}function Hn(){return e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(X,{children:"Default"}),e.jsx(X,{variant:"secondary",children:"Secondary"}),e.jsx(X,{variant:"success",children:"Success"}),e.jsx(X,{variant:"danger",children:"Danger"}),e.jsx(X,{variant:"warning",children:"Warning"}),e.jsx(X,{variant:"outline",children:"Outline"})]})}function Yn(){return e.jsxs("div",{className:"flex gap-4",children:[e.jsxs(ge,{children:[e.jsx(xe,{src:"https://randomuser.me/api/portraits/men/32.jpg"}),e.jsx(be,{children:"AB"})]}),e.jsxs(ge,{children:[e.jsx(xe,{src:""}),e.jsx(be,{children:"CD"})]}),e.jsxs(ge,{children:[e.jsx(xe,{src:"https://randomuser.me/api/portraits/women/44.jpg"}),e.jsx(be,{children:"EF"})]})]})}function Jn(){const[t,r]=f.useState(!1);return e.jsxs("div",{children:[e.jsx(P,{onClick:()=>r(!0),children:"Show Modal"}),e.jsxs(Pr,{open:t,onOpenChange:r,children:[e.jsx(Vr,{children:e.jsx(Or,{children:"Demo Modal"})}),e.jsx(Ir,{children:e.jsx("p",{children:"This is a basic modal dialog."})}),e.jsx(Lr,{children:e.jsx(P,{variant:"primary",onClick:()=>r(!1),children:"Close"})})]})]})}function Kn(){return e.jsxs(e.Fragment,{children:[e.jsx(P,{onClick:()=>nt.success("This is a toast notification!"),children:"Show Toast"}),e.jsx(Et,{})]})}function Zn(){return e.jsxs("div",{className:"space-y-4",children:[e.jsx(Ke,{}),e.jsxs("div",{className:"flex gap-2 items-center",children:[e.jsx(Ke,{})," ",e.jsx("span",{children:"Loading data..."})]}),e.jsxs(P,{variant:"primary",disabled:!0,children:[e.jsx(Ke,{className:"mr-2 h-4 w-4"})," Processing"]})]})}const B={button:$n,input:Bn,textarea:Wn,checkbox:Gn,switch:Un,card:qn,badge:Hn,avatar:Yn,alert:sa,statscard:na,tabs:oa,modal:Jn,toast:Kn,spinner:Zn,skeleton:function(){return e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsx(Se,{className:"h-8 w-1/2"}),e.jsx(Se,{className:"h-4 w-3/4"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(Se,{className:"h-8 w-8 rounded-full"}),e.jsx(Se,{className:"h-8 w-32"})]}),e.jsx(Se,{className:"h-24 w-full"})]})},navbar:function(){return e.jsx(Mt,{children:e.jsxs("div",{className:"flex w-full items-center justify-between px-4",children:[e.jsx("span",{className:"font-semibold text-lg",children:"Beyond UI"}),e.jsxs("nav",{className:"flex gap-4 ml-auto",children:[e.jsx("a",{href:"#",className:"text-blue-500",children:"Home"}),e.jsx("a",{href:"#",className:"text-blue-500",children:"Features"}),e.jsx("a",{href:"#",className:"text-blue-500",children:"Pricing"})]}),e.jsx("div",{className:"ml-6",children:e.jsx("button",{className:"rounded bg-primary-600 text-white px-3 py-1 text-sm",children:"Profile"})})]})})},sidebar:function(){const r=[{id:"dashboard",label:"Dashboard",icon:e.jsx(we,{className:"h-5 w-5"})},{id:"settings",label:"Settings",icon:e.jsx(Oe,{className:"h-5 w-5"})},{id:"profile",label:"Profile",icon:e.jsx(Nt,{className:"h-5 w-5"})}];return e.jsx("div",{className:"w-[260px] h-[480px] bg-white border rounded overflow-auto flex items-stretch",children:e.jsx(dt,{menuItems:r,className:"static relative w-full h-full border-none shadow-none"})})},"dashboard-grid":function(){return e.jsxs(_t,{children:[e.jsx("div",{className:"p-4 bg-white rounded shadow",children:"Widget 1"}),e.jsx("div",{className:"p-4 bg-white rounded shadow",children:"Widget 2"}),e.jsx("div",{className:"p-4 bg-white rounded shadow",children:"Widget 3"}),e.jsx("div",{className:"p-4 bg-white rounded shadow",children:"Widget 4"})]})},"dashboard-header":function(){return e.jsxs("div",{className:"flex justify-between items-center py-4 border-b",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"text-xl font-semibold",children:"Dashboard"}),e.jsx("span",{className:"text-gray-500 text-sm",children:"Insights & analytics"})]}),e.jsx(P,{variant:"outline",children:"Settings"})]})},"dashboard-layout":function(){const r=[{id:"dashboard",label:"Dashboard",icon:e.jsx(we,{className:"h-4 w-4"})},{id:"users",label:"Users",icon:e.jsx(Nt,{className:"h-4 w-4"})},{id:"settings",label:"Settings",icon:e.jsx(Oe,{className:"h-4 w-4"})}];return e.jsx("div",{className:"w-[600px] h-[480px] bg-white border rounded overflow-auto flex items-stretch",children:e.jsx(zt,{sidebarMenuItems:r,className:"relative w-full min-h-0 h-full",sidebarClassName:"static relative w-full h-full border-none shadow-none",disableSidebarMargin:!0,children:e.jsxs("div",{className:"p-6 h-full",children:[e.jsx("h2",{className:"text-lg font-semibold mb-2",children:"Welcome to DashboardLayout"}),e.jsx("p",{className:"mb-4 text-gray-600",children:"Main content appears here. The sidebar and header are real reusable components."}),e.jsx(P,{variant:"primary",children:"Dashboard Action"})]})})})}};function sa(){return e.jsxs("div",{className:"space-y-4",children:[e.jsxs(ee,{variant:"info",children:[e.jsx(te,{children:"Information"}),e.jsx(re,{children:"This is an informational alert message."})]}),e.jsxs(ee,{variant:"success",children:[e.jsx(te,{children:"Success"}),e.jsx(re,{children:"Operation completed successfully!"})]}),e.jsxs(ee,{variant:"warning",children:[e.jsx(te,{children:"Warning"}),e.jsx(re,{children:"Please review your input before proceeding."})]}),e.jsxs(ee,{variant:"danger",children:[e.jsx(te,{children:"Error"}),e.jsx(re,{children:"Something went wrong. Please try again."})]})]})}function na(){return e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsx(Ie,{title:"Total Users",value:"2,543",trend:{direction:"up",value:"+12%",label:"from last month"},icon:e.jsx(we,{className:"h-6 w-6 text-primary-600"})}),e.jsx(Ie,{variant:"gradient",color:"success",title:"Revenue",value:"$45,231",trend:{direction:"up",value:"+8.2%",label:"from last month"},icon:e.jsx(we,{className:"h-6 w-6"})})]})}function oa(){const[t,r]=f.useState("tab-1");return e.jsxs(At,{value:t,onValueChange:r,children:[e.jsxs(ct,{children:[e.jsx(ye,{value:"tab-1",children:"Tab One"}),e.jsx(ye,{value:"tab-2",children:"Tab Two"}),e.jsx(ye,{value:"tab-3",children:"Tab Three"})]}),e.jsx(ve,{value:"tab-1",children:e.jsx("span",{className:"block p-4",children:"Content for Tab One"})}),e.jsx(ve,{value:"tab-2",children:e.jsx("span",{className:"block p-4",children:"Content for Tab Two"})}),e.jsx(ve,{value:"tab-3",children:e.jsx("span",{className:"block p-4",children:"Content for Tab Three"})})]})}Object.assign(B,{alert:sa,statscard:na,tabs:oa});const Xn={Forms:{icon:e.jsx(Bs,{className:"h-4 w-4"}),components:[{name:"Button",id:"button"},{name:"Input",id:"input"},{name:"Textarea",id:"textarea"},{name:"Checkbox",id:"checkbox"},{name:"Switch",id:"switch"}]},"Data Display":{icon:e.jsx(we,{className:"h-4 w-4"}),components:[{name:"Card",id:"card"},{name:"Badge",id:"badge"},{name:"Avatar",id:"avatar"},{name:"StatsCard",id:"statscard"},{name:"Tabs",id:"tabs"}]},Feedback:{icon:e.jsx(Sr,{className:"h-4 w-4"}),components:[{name:"Alert",id:"alert"},{name:"Toast",id:"toast"},{name:"Modal",id:"modal"},{name:"Spinner",id:"spinner"},{name:"Skeleton",id:"skeleton"}]},Layout:{icon:e.jsx(Ws,{className:"h-4 w-4"}),components:[{name:"DashboardLayout",id:"dashboard-layout"},{name:"DashboardGrid",id:"dashboard-grid"},{name:"Sidebar",id:"sidebar"},{name:"Navbar",id:"navbar"}]}},Qn={button:{name:"Button",description:"A versatile button component with multiple variants and sizes.",example:`<Button variant="primary" size="md">
|
|
1437
|
+
function ShowcaseCardDemo() {
|
|
1438
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
1439
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
|
|
1440
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Default Card" }) }),
|
|
1441
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "This is a default card with standard styling." }) })
|
|
1442
|
+
] }),
|
|
1443
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Card, { variant: "elevated", children: [
|
|
1444
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Elevated Card" }) }),
|
|
1445
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "This card has elevated shadow styling." }) })
|
|
1446
|
+
] })
|
|
1447
|
+
] });
|
|
1448
|
+
}
|
|
1449
|
+
function ShowcaseBadgeDemo() {
|
|
1450
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
|
|
1451
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge, { children: "Default" }),
|
|
1452
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: "Secondary" }),
|
|
1453
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: "Success" }),
|
|
1454
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "danger", children: "Danger" }),
|
|
1455
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warning", children: "Warning" }),
|
|
1456
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: "Outline" })
|
|
1457
|
+
] });
|
|
1458
|
+
}
|
|
1459
|
+
function ShowcaseAvatarDemo() {
|
|
1460
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
|
|
1461
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { children: [
|
|
1462
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/men/32.jpg" }),
|
|
1463
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "AB" })
|
|
1464
|
+
] }),
|
|
1465
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { children: [
|
|
1466
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "" }),
|
|
1467
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "CD" })
|
|
1468
|
+
] }),
|
|
1469
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Avatar, { children: [
|
|
1470
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/women/44.jpg" }),
|
|
1471
|
+
/* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "EF" })
|
|
1472
|
+
] })
|
|
1473
|
+
] });
|
|
1474
|
+
}
|
|
1475
|
+
function ShowcaseModalDemo() {
|
|
1476
|
+
const [open, setOpen] = React11__namespace.useState(false);
|
|
1477
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1478
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setOpen(true), children: "Show Modal" }),
|
|
1479
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange: setOpen, children: [
|
|
1480
|
+
/* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: "Demo Modal" }) }),
|
|
1481
|
+
/* @__PURE__ */ jsxRuntime.jsx(ModalContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This is a basic modal dialog." }) }),
|
|
1482
|
+
/* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: () => setOpen(false), children: "Close" }) })
|
|
1483
|
+
] })
|
|
1484
|
+
] });
|
|
1485
|
+
}
|
|
1486
|
+
function ShowcaseToastDemo() {
|
|
1487
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1488
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => showToast.success("This is a toast notification!"), children: "Show Toast" }),
|
|
1489
|
+
/* @__PURE__ */ jsxRuntime.jsx(Toast, {})
|
|
1490
|
+
] });
|
|
1491
|
+
}
|
|
1492
|
+
function ShowcaseSpinnerDemo() {
|
|
1493
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
1494
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
|
|
1495
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
|
|
1496
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
|
|
1497
|
+
" ",
|
|
1498
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading data..." })
|
|
1499
|
+
] }),
|
|
1500
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", disabled: true, children: [
|
|
1501
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "mr-2 h-4 w-4" }),
|
|
1502
|
+
" Processing"
|
|
1503
|
+
] })
|
|
1504
|
+
] });
|
|
1505
|
+
}
|
|
1506
|
+
var showcasePreviewMap = {
|
|
1507
|
+
button: ShowcaseButtonDemo,
|
|
1508
|
+
input: ShowcaseInputDemo,
|
|
1509
|
+
textarea: ShowcaseTextareaDemo,
|
|
1510
|
+
checkbox: ShowcaseCheckboxDemo,
|
|
1511
|
+
switch: ShowcaseSwitchDemo,
|
|
1512
|
+
card: ShowcaseCardDemo,
|
|
1513
|
+
badge: ShowcaseBadgeDemo,
|
|
1514
|
+
avatar: ShowcaseAvatarDemo,
|
|
1515
|
+
alert: ShowcaseAlertDemo,
|
|
1516
|
+
statscard: ShowcaseStatsCardDemo,
|
|
1517
|
+
tabs: ShowcaseTabsDemo,
|
|
1518
|
+
modal: ShowcaseModalDemo,
|
|
1519
|
+
toast: ShowcaseToastDemo,
|
|
1520
|
+
spinner: ShowcaseSpinnerDemo,
|
|
1521
|
+
skeleton: function ShowcaseSkeletonDemo() {
|
|
1522
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 max-w-md", children: [
|
|
1523
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-1/2" }),
|
|
1524
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-3/4" }),
|
|
1525
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
|
|
1526
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-8 rounded-full" }),
|
|
1527
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-32" })
|
|
1528
|
+
] }),
|
|
1529
|
+
/* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-24 w-full" })
|
|
1530
|
+
] });
|
|
1531
|
+
},
|
|
1532
|
+
navbar: function ShowcaseNavbarDemo() {
|
|
1533
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between px-4", children: [
|
|
1534
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-lg", children: "Beyond UI" }),
|
|
1535
|
+
/* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex gap-4 ml-auto", children: [
|
|
1536
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-blue-500", children: "Home" }),
|
|
1537
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-blue-500", children: "Features" }),
|
|
1538
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-blue-500", children: "Pricing" })
|
|
1539
|
+
] }),
|
|
1540
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-6", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "rounded bg-primary-600 text-white px-3 py-1 text-sm", children: "Profile" }) })
|
|
1541
|
+
] }) });
|
|
1542
|
+
},
|
|
1543
|
+
sidebar: function ShowcaseSidebarDemo() {
|
|
1544
|
+
const menuItems = [
|
|
1545
|
+
{ id: "dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-5 w-5" }) },
|
|
1546
|
+
{ id: "settings", label: "Settings", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }) },
|
|
1547
|
+
{ id: "profile", label: "Profile", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-5 w-5" }) }
|
|
1548
|
+
];
|
|
1549
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[260px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1550
|
+
Sidebar,
|
|
1551
|
+
{
|
|
1552
|
+
menuItems,
|
|
1553
|
+
className: "static relative w-full h-full border-none shadow-none"
|
|
1554
|
+
}
|
|
1555
|
+
) });
|
|
1556
|
+
},
|
|
1557
|
+
"dashboard-grid": function ShowcaseDashboardGridDemo() {
|
|
1558
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DashboardGrid, { children: [
|
|
1559
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 1" }),
|
|
1560
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 2" }),
|
|
1561
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 3" }),
|
|
1562
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 4" })
|
|
1563
|
+
] });
|
|
1564
|
+
},
|
|
1565
|
+
"dashboard-header": function ShowcaseDashboardHeaderDemo() {
|
|
1566
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center py-4 border-b", children: [
|
|
1567
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1568
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Dashboard" }),
|
|
1569
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 text-sm", children: "Insights & analytics" })
|
|
1570
|
+
] }),
|
|
1571
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Settings" })
|
|
1572
|
+
] });
|
|
1573
|
+
},
|
|
1574
|
+
"dashboard-layout": function ShowcaseDashboardLayoutDemo() {
|
|
1575
|
+
const sidebarMenuItems = [
|
|
1576
|
+
{ id: "dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-4 w-4" }) },
|
|
1577
|
+
{ id: "users", label: "Users", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }) },
|
|
1578
|
+
{ id: "settings", label: "Settings", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }) }
|
|
1579
|
+
];
|
|
1580
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[600px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1581
|
+
DashboardLayout,
|
|
1582
|
+
{
|
|
1583
|
+
sidebarMenuItems,
|
|
1584
|
+
className: "relative w-full min-h-0 h-full",
|
|
1585
|
+
sidebarClassName: "static relative w-full h-full border-none shadow-none",
|
|
1586
|
+
disableSidebarMargin: true,
|
|
1587
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 h-full", children: [
|
|
1588
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold mb-2", children: "Welcome to DashboardLayout" }),
|
|
1589
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-gray-600", children: "Main content appears here. The sidebar and header are real reusable components." }),
|
|
1590
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", children: "Dashboard Action" })
|
|
1591
|
+
] })
|
|
1592
|
+
}
|
|
1593
|
+
) });
|
|
1594
|
+
}
|
|
1595
|
+
};
|
|
1596
|
+
function ShowcaseAlertDemo() {
|
|
1597
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
1598
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "info", children: [
|
|
1599
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Information" }),
|
|
1600
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "This is an informational alert message." })
|
|
1601
|
+
] }),
|
|
1602
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "success", children: [
|
|
1603
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Success" }),
|
|
1604
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Operation completed successfully!" })
|
|
1605
|
+
] }),
|
|
1606
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
|
|
1607
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Warning" }),
|
|
1608
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Please review your input before proceeding." })
|
|
1609
|
+
] }),
|
|
1610
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "danger", children: [
|
|
1611
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Error" }),
|
|
1612
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Something went wrong. Please try again." })
|
|
1613
|
+
] })
|
|
1614
|
+
] });
|
|
1615
|
+
}
|
|
1616
|
+
function ShowcaseStatsCardDemo() {
|
|
1617
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
1618
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1619
|
+
StatsCard,
|
|
1620
|
+
{
|
|
1621
|
+
title: "Total Users",
|
|
1622
|
+
value: "2,543",
|
|
1623
|
+
trend: {
|
|
1624
|
+
direction: "up",
|
|
1625
|
+
value: "+12%",
|
|
1626
|
+
label: "from last month"
|
|
1627
|
+
},
|
|
1628
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6 text-primary-600" })
|
|
1629
|
+
}
|
|
1630
|
+
),
|
|
1631
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1632
|
+
StatsCard,
|
|
1633
|
+
{
|
|
1634
|
+
variant: "gradient",
|
|
1635
|
+
color: "success",
|
|
1636
|
+
title: "Revenue",
|
|
1637
|
+
value: "$45,231",
|
|
1638
|
+
trend: {
|
|
1639
|
+
direction: "up",
|
|
1640
|
+
value: "+8.2%",
|
|
1641
|
+
label: "from last month"
|
|
1642
|
+
},
|
|
1643
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6" })
|
|
1644
|
+
}
|
|
1645
|
+
)
|
|
1646
|
+
] });
|
|
1647
|
+
}
|
|
1648
|
+
function ShowcaseTabsDemo() {
|
|
1649
|
+
const [activeTab, setActiveTab] = React11__namespace.useState("tab-1");
|
|
1650
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
|
|
1651
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TabsList, { children: [
|
|
1652
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tab-1", children: "Tab One" }),
|
|
1653
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tab-2", children: "Tab Two" }),
|
|
1654
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tab-3", children: "Tab Three" })
|
|
1655
|
+
] }),
|
|
1656
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tab-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block p-4", children: "Content for Tab One" }) }),
|
|
1657
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tab-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block p-4", children: "Content for Tab Two" }) }),
|
|
1658
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tab-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block p-4", children: "Content for Tab Three" }) })
|
|
1659
|
+
] });
|
|
1660
|
+
}
|
|
1661
|
+
Object.assign(showcasePreviewMap, {
|
|
1662
|
+
alert: ShowcaseAlertDemo,
|
|
1663
|
+
statscard: ShowcaseStatsCardDemo,
|
|
1664
|
+
tabs: ShowcaseTabsDemo
|
|
1665
|
+
});
|
|
1666
|
+
var componentCategories = {
|
|
1667
|
+
"Forms": {
|
|
1668
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer, { className: "h-4 w-4" }),
|
|
1669
|
+
components: [
|
|
1670
|
+
{ name: "Button", id: "button" },
|
|
1671
|
+
{ name: "Input", id: "input" },
|
|
1672
|
+
{ name: "Textarea", id: "textarea" },
|
|
1673
|
+
{ name: "Checkbox", id: "checkbox" },
|
|
1674
|
+
{ name: "Switch", id: "switch" }
|
|
1675
|
+
]
|
|
1676
|
+
},
|
|
1677
|
+
"Data Display": {
|
|
1678
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-4 w-4" }),
|
|
1679
|
+
components: [
|
|
1680
|
+
{ name: "Card", id: "card" },
|
|
1681
|
+
{ name: "Badge", id: "badge" },
|
|
1682
|
+
{ name: "Avatar", id: "avatar" },
|
|
1683
|
+
{ name: "StatsCard", id: "statscard" },
|
|
1684
|
+
{ name: "Tabs", id: "tabs" }
|
|
1685
|
+
]
|
|
1686
|
+
},
|
|
1687
|
+
"Feedback": {
|
|
1688
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
|
|
1689
|
+
components: [
|
|
1690
|
+
{ name: "Alert", id: "alert" },
|
|
1691
|
+
{ name: "Toast", id: "toast" },
|
|
1692
|
+
{ name: "Modal", id: "modal" },
|
|
1693
|
+
{ name: "Spinner", id: "spinner" },
|
|
1694
|
+
{ name: "Skeleton", id: "skeleton" }
|
|
1695
|
+
]
|
|
1696
|
+
},
|
|
1697
|
+
"Layout": {
|
|
1698
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layout, { className: "h-4 w-4" }),
|
|
1699
|
+
components: [
|
|
1700
|
+
{ name: "DashboardLayout", id: "dashboard-layout" },
|
|
1701
|
+
{ name: "DashboardGrid", id: "dashboard-grid" },
|
|
1702
|
+
{ name: "Sidebar", id: "sidebar" },
|
|
1703
|
+
{ name: "Navbar", id: "navbar" }
|
|
1704
|
+
]
|
|
1705
|
+
}
|
|
1706
|
+
};
|
|
1707
|
+
var componentDocs = {
|
|
1708
|
+
button: {
|
|
1709
|
+
name: "Button",
|
|
1710
|
+
description: "A versatile button component with multiple variants and sizes.",
|
|
1711
|
+
example: `<Button variant="primary" size="md">
|
|
397
1712
|
Click me
|
|
398
|
-
</Button>`,
|
|
1713
|
+
</Button>`,
|
|
1714
|
+
props: [
|
|
1715
|
+
{ name: "variant", type: "string", default: "primary", description: "Button style variant" },
|
|
1716
|
+
{ name: "size", type: "string", default: "md", description: "Button size" },
|
|
1717
|
+
{ name: "disabled", type: "boolean", default: "false", description: "Disable the button" }
|
|
1718
|
+
],
|
|
1719
|
+
component: null
|
|
1720
|
+
},
|
|
1721
|
+
input: {
|
|
1722
|
+
name: "Input",
|
|
1723
|
+
description: "A flexible input component with validation states and different sizes.",
|
|
1724
|
+
example: `<Input
|
|
399
1725
|
placeholder="Enter your email"
|
|
400
1726
|
variant="default"
|
|
401
1727
|
inputSize="md"
|
|
402
|
-
/>`,
|
|
1728
|
+
/>`,
|
|
1729
|
+
props: [
|
|
1730
|
+
{ name: "variant", type: "string", default: "default", description: "Input validation state" },
|
|
1731
|
+
{ name: "inputSize", type: "string", default: "md", description: "Input size" },
|
|
1732
|
+
{ name: "placeholder", type: "string", default: "", description: "Placeholder text" }
|
|
1733
|
+
],
|
|
1734
|
+
component: null
|
|
1735
|
+
},
|
|
1736
|
+
checkbox: {
|
|
1737
|
+
name: "Checkbox",
|
|
1738
|
+
description: "A standard checkbox component for forms. Supports checked, unchecked, disabled, and size variants.",
|
|
1739
|
+
example: `<Checkbox checked={true} onChange={() => {}} />`,
|
|
1740
|
+
props: [
|
|
1741
|
+
{ name: "checked", type: "boolean", default: "false", description: "Whether the checkbox is checked" },
|
|
1742
|
+
{ name: "onChange", type: "(event) => void", description: "Callback when checkbox changes" },
|
|
1743
|
+
{ name: "disabled", type: "boolean", default: "false", description: "Disable the checkbox" },
|
|
1744
|
+
{ name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Size of the checkbox" }
|
|
1745
|
+
],
|
|
1746
|
+
component: showcasePreviewMap["checkbox"]
|
|
1747
|
+
},
|
|
1748
|
+
switch: {
|
|
1749
|
+
name: "Switch",
|
|
1750
|
+
description: "A toggle switch component for representing boolean states. Supports size variants and disabled state.",
|
|
1751
|
+
example: `<Switch checked={true} onCheckedChange={() => {}} />`,
|
|
1752
|
+
props: [
|
|
1753
|
+
{ name: "checked", type: "boolean", default: "false", description: "Whether the switch is on" },
|
|
1754
|
+
{ name: "onCheckedChange", type: "(checked: boolean) => void", description: "Callback when switch state changes" },
|
|
1755
|
+
{ name: "disabled", type: "boolean", default: "false", description: "Disable the switch" },
|
|
1756
|
+
{ name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Size of the switch" }
|
|
1757
|
+
],
|
|
1758
|
+
component: showcasePreviewMap["switch"]
|
|
1759
|
+
},
|
|
1760
|
+
textarea: {
|
|
1761
|
+
name: "Textarea",
|
|
1762
|
+
description: "A multi-line input control suitable for entering longer blocks of text. Supports success/error states and various sizes.",
|
|
1763
|
+
example: `<Textarea placeholder="Enter your message..." variant="default" />`,
|
|
1764
|
+
props: [
|
|
1765
|
+
{ name: "variant", type: "string", default: "default", description: "Textarea validation state" },
|
|
1766
|
+
{ name: "rows", type: "number", default: "3", description: "Number of visible text lines" },
|
|
1767
|
+
{ name: "disabled", type: "boolean", default: "false", description: "Disabled state" },
|
|
1768
|
+
{ name: "placeholder", type: "string", default: "", description: "Placeholder text" }
|
|
1769
|
+
],
|
|
1770
|
+
component: showcasePreviewMap["textarea"]
|
|
1771
|
+
},
|
|
1772
|
+
card: {
|
|
1773
|
+
name: "Card",
|
|
1774
|
+
description: "A flexible container component for grouping related content.",
|
|
1775
|
+
example: `<Card>
|
|
403
1776
|
<CardHeader>
|
|
404
1777
|
<CardTitle>Card Title</CardTitle>
|
|
405
1778
|
</CardHeader>
|
|
406
1779
|
<CardContent>
|
|
407
1780
|
Card content goes here.
|
|
408
1781
|
</CardContent>
|
|
409
|
-
</Card>`,
|
|
1782
|
+
</Card>`,
|
|
1783
|
+
props: [
|
|
1784
|
+
{ name: "variant", type: "string", default: "default", description: "Card style variant" },
|
|
1785
|
+
{ name: "padding", type: "string", default: "md", description: "Card padding size" }
|
|
1786
|
+
],
|
|
1787
|
+
component: null
|
|
1788
|
+
},
|
|
1789
|
+
avatar: {
|
|
1790
|
+
name: "Avatar",
|
|
1791
|
+
description: "Displays a user's profile image or initials, with customizable size and fallback.",
|
|
1792
|
+
example: '<Avatar size="sm"><AvatarImage src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"/><AvatarFallback>AB</AvatarFallback></Avatar>',
|
|
1793
|
+
props: [
|
|
1794
|
+
{ name: "size", type: '"sm" | "md" | "lg"', default: "md", description: "Avatar size" },
|
|
1795
|
+
{ name: "children", type: "ReactNode", required: true, description: "Avatar image and fallback" }
|
|
1796
|
+
],
|
|
1797
|
+
component: showcasePreviewMap["avatar"]
|
|
1798
|
+
},
|
|
1799
|
+
badge: {
|
|
1800
|
+
name: "Badge",
|
|
1801
|
+
description: "A small, customizable tag for displaying statuses or labels.",
|
|
1802
|
+
example: `<Badge variant="default">Default</Badge>`,
|
|
1803
|
+
props: [
|
|
1804
|
+
{ name: "variant", type: `"default" | "secondary" | "success" | "danger" | "warning" | "outline"`, default: "default", description: "Badge color or style variant" },
|
|
1805
|
+
{ name: "children", type: "ReactNode", required: true, description: "Badge label content" }
|
|
1806
|
+
],
|
|
1807
|
+
component: showcasePreviewMap["badge"]
|
|
1808
|
+
},
|
|
1809
|
+
tabs: {
|
|
1810
|
+
name: "Tabs",
|
|
1811
|
+
description: "A flexible tabbed navigation component. Allows users to switch between views.",
|
|
1812
|
+
example: `<Tabs value="tab-1" onValueChange={() => {}}>
|
|
410
1813
|
<TabsList>
|
|
411
1814
|
<TabsTrigger value="tab-1">Tab 1</TabsTrigger>
|
|
412
1815
|
<TabsTrigger value="tab-2">Tab 2</TabsTrigger>
|
|
413
1816
|
</TabsList>
|
|
414
1817
|
<TabsContent value="tab-1">Content 1</TabsContent>
|
|
415
1818
|
<TabsContent value="tab-2">Content 2</TabsContent>
|
|
416
|
-
</Tabs>`,
|
|
417
|
-
|
|
1819
|
+
</Tabs>`,
|
|
1820
|
+
props: [
|
|
1821
|
+
{ name: "value", type: "string", required: true, description: "The value of the currently selected tab" },
|
|
1822
|
+
{ name: "onValueChange", type: "(value: string) => void", description: "Called when a different tab is selected" },
|
|
1823
|
+
{ name: "children", type: "ReactNode", required: true, description: "Tab triggers and contents" }
|
|
1824
|
+
],
|
|
1825
|
+
component: showcasePreviewMap["tabs"]
|
|
1826
|
+
},
|
|
1827
|
+
toast: {
|
|
1828
|
+
name: "Toast",
|
|
1829
|
+
description: "A notification/toast component to display feedback messages over the UI.",
|
|
1830
|
+
example: `<Button onClick={() => showToast.success("Saved successfully!")}>Show Toast</Button>
|
|
1831
|
+
<Toast />`,
|
|
1832
|
+
props: [
|
|
1833
|
+
{ name: "children", type: "ReactNode", description: "Toast content (commonly used internally)" }
|
|
1834
|
+
],
|
|
1835
|
+
component: showcasePreviewMap["toast"]
|
|
1836
|
+
},
|
|
1837
|
+
modal: {
|
|
1838
|
+
name: "Modal",
|
|
1839
|
+
description: "A dialog/modal overlay component for displaying actions, forms, or confirmation content.",
|
|
1840
|
+
example: `<Modal open={open} onOpenChange={setOpen}>
|
|
418
1841
|
<ModalHeader>Modal Title</ModalHeader>
|
|
419
1842
|
<ModalContent>Modal body</ModalContent>
|
|
420
1843
|
<ModalFooter>
|
|
421
1844
|
<Button onClick={() => setOpen(false)}>Close</Button>
|
|
422
1845
|
</ModalFooter>
|
|
423
|
-
</Modal>`,
|
|
1846
|
+
</Modal>`,
|
|
1847
|
+
props: [
|
|
1848
|
+
{ name: "open", type: "boolean", required: true, description: "Whether the modal is open" },
|
|
1849
|
+
{ name: "onOpenChange", type: "(open: boolean) => void", required: true, description: "Called with new open state when modal is toggled" },
|
|
1850
|
+
{ name: "children", type: "ReactNode", required: true, description: "Content of the modal dialog" }
|
|
1851
|
+
],
|
|
1852
|
+
component: showcasePreviewMap["modal"]
|
|
1853
|
+
},
|
|
1854
|
+
spinner: {
|
|
1855
|
+
name: "Spinner",
|
|
1856
|
+
description: "A loading spinner to indicate ongoing processing or loading state.",
|
|
1857
|
+
example: `<Spinner size="md" />`,
|
|
1858
|
+
props: [
|
|
1859
|
+
{ name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Spinner size" },
|
|
1860
|
+
{ name: "color", type: "string", default: "primary", description: "Spinner color (optional)" },
|
|
1861
|
+
{ name: "className", type: "string", description: "Custom CSS class for the spinner" }
|
|
1862
|
+
],
|
|
1863
|
+
component: showcasePreviewMap["spinner"]
|
|
1864
|
+
},
|
|
1865
|
+
skeleton: {
|
|
1866
|
+
name: "Skeleton",
|
|
1867
|
+
description: "A placeholder skeleton component for loading states. Use to display a placeholder UI while content loads.",
|
|
1868
|
+
example: `<Skeleton className="h-6 w-32" />`,
|
|
1869
|
+
props: [
|
|
1870
|
+
{ name: "className", type: "string", description: "Custom class for size and style" }
|
|
1871
|
+
],
|
|
1872
|
+
component: showcasePreviewMap["skeleton"]
|
|
1873
|
+
},
|
|
1874
|
+
alert: {
|
|
1875
|
+
name: "Alert",
|
|
1876
|
+
description: "Display important messages and notifications to users.",
|
|
1877
|
+
example: `<Alert variant="info">
|
|
424
1878
|
<AlertTitle>Information</AlertTitle>
|
|
425
1879
|
<AlertDescription>
|
|
426
1880
|
This is an informational alert.
|
|
427
1881
|
</AlertDescription>
|
|
428
|
-
</Alert>`,
|
|
1882
|
+
</Alert>`,
|
|
1883
|
+
props: [
|
|
1884
|
+
{ name: "variant", type: "string", default: "default", description: "Alert type variant" }
|
|
1885
|
+
],
|
|
1886
|
+
component: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
1887
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "info", children: [
|
|
1888
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Information" }),
|
|
1889
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "This is an informational alert message." })
|
|
1890
|
+
] }),
|
|
1891
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "success", children: [
|
|
1892
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Success" }),
|
|
1893
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Operation completed successfully!" })
|
|
1894
|
+
] }),
|
|
1895
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
|
|
1896
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Warning" }),
|
|
1897
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Please review your input before proceeding." })
|
|
1898
|
+
] }),
|
|
1899
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "danger", children: [
|
|
1900
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Error" }),
|
|
1901
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Something went wrong. Please try again." })
|
|
1902
|
+
] })
|
|
1903
|
+
] })
|
|
1904
|
+
},
|
|
1905
|
+
statscard: {
|
|
1906
|
+
name: "StatsCard",
|
|
1907
|
+
description: "Display key metrics and statistics with trend indicators.",
|
|
1908
|
+
example: `<StatsCard
|
|
429
1909
|
title="Total Users"
|
|
430
1910
|
value="2,543"
|
|
431
1911
|
trend={{
|
|
@@ -434,18 +1914,579 @@ to {
|
|
|
434
1914
|
label: "from last month"
|
|
435
1915
|
}}
|
|
436
1916
|
icon={<Users className="h-6 w-6" />}
|
|
437
|
-
/>`,
|
|
1917
|
+
/>`,
|
|
1918
|
+
props: [
|
|
1919
|
+
{ name: "title", type: "string", required: true, description: "Card title" },
|
|
1920
|
+
{ name: "value", type: "string | number", required: true, description: "Main value to display" },
|
|
1921
|
+
{ name: "trend", type: "object", description: "Trend information" },
|
|
1922
|
+
{ name: "icon", type: "ReactNode", description: "Icon to display" }
|
|
1923
|
+
],
|
|
1924
|
+
component: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
1925
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1926
|
+
StatsCard,
|
|
1927
|
+
{
|
|
1928
|
+
title: "Total Users",
|
|
1929
|
+
value: "2,543",
|
|
1930
|
+
trend: {
|
|
1931
|
+
direction: "up",
|
|
1932
|
+
value: "+12%",
|
|
1933
|
+
label: "from last month"
|
|
1934
|
+
},
|
|
1935
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6 text-primary-600" })
|
|
1936
|
+
}
|
|
1937
|
+
),
|
|
1938
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1939
|
+
StatsCard,
|
|
1940
|
+
{
|
|
1941
|
+
variant: "gradient",
|
|
1942
|
+
color: "success",
|
|
1943
|
+
title: "Revenue",
|
|
1944
|
+
value: "$45,231",
|
|
1945
|
+
trend: {
|
|
1946
|
+
direction: "up",
|
|
1947
|
+
value: "+8.2%",
|
|
1948
|
+
label: "from last month"
|
|
1949
|
+
},
|
|
1950
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6" })
|
|
1951
|
+
}
|
|
1952
|
+
)
|
|
1953
|
+
] })
|
|
1954
|
+
},
|
|
1955
|
+
"dashboard-layout": {
|
|
1956
|
+
name: "DashboardLayout",
|
|
1957
|
+
description: "Layout component for admin dashboards and analytics panels. Useful for wrapping dashboard structure with sidebars and content.",
|
|
1958
|
+
example: `<DashboardLayout>
|
|
438
1959
|
<Sidebar />
|
|
439
1960
|
<main>
|
|
440
1961
|
Dashboard content here
|
|
441
1962
|
</main>
|
|
442
|
-
</DashboardLayout>`,
|
|
1963
|
+
</DashboardLayout>`,
|
|
1964
|
+
props: [
|
|
1965
|
+
{ name: "children", type: "ReactNode", required: true, description: "Dashboard page content" }
|
|
1966
|
+
],
|
|
1967
|
+
component: showcasePreviewMap["dashboard-layout"]
|
|
1968
|
+
},
|
|
1969
|
+
"dashboard-grid": {
|
|
1970
|
+
name: "DashboardGrid",
|
|
1971
|
+
description: "Grid container for dashboard widgets.",
|
|
1972
|
+
example: `<DashboardGrid>
|
|
443
1973
|
<Widget />
|
|
444
1974
|
<Widget />
|
|
445
|
-
</DashboardGrid>`,
|
|
1975
|
+
</DashboardGrid>`,
|
|
1976
|
+
props: [
|
|
1977
|
+
{ name: "children", type: "ReactNode", required: true, description: "Widgets to show in the grid" }
|
|
1978
|
+
],
|
|
1979
|
+
component: showcasePreviewMap["dashboard-grid"]
|
|
1980
|
+
},
|
|
1981
|
+
"sidebar": {
|
|
1982
|
+
name: "Sidebar",
|
|
1983
|
+
description: "Navigation sidebar for layouts. Supports menu items and responsive display.",
|
|
1984
|
+
example: `<Sidebar menuItems={menuItems} />`,
|
|
1985
|
+
props: [
|
|
1986
|
+
{ name: "menuItems", type: "Array", required: true, description: "Sidebar navigation items" }
|
|
1987
|
+
],
|
|
1988
|
+
component: showcasePreviewMap["sidebar"]
|
|
1989
|
+
},
|
|
1990
|
+
"navbar": {
|
|
1991
|
+
name: "Navbar",
|
|
1992
|
+
description: "Navigation bar for app layout. Add links, branding, user actions etc.",
|
|
1993
|
+
example: `<Navbar>
|
|
446
1994
|
<NavbarBrand>My App</NavbarBrand>
|
|
447
1995
|
<NavbarLinks>
|
|
448
1996
|
<a href="#">Home</a>
|
|
449
1997
|
<a href="#">About</a>
|
|
450
1998
|
</NavbarLinks>
|
|
451
|
-
</Navbar>`,props:[{name:"children",type:"ReactNode",required:!0,description:"Navbar content (branding, links, actions)"}],component:B.navbar}},eo=({className:t})=>{var W;const[r,a]=N.useState("button"),[s,o]=N.useState(""),[i,l]=N.useState(!1),[c,u]=N.useState(["Forms"]),[p,m]=N.useState("desktop"),[h,b]=N.useState(!1),[x,E]=N.useState(null),A=R=>{u(U=>U.includes(R)?U.filter(q=>q!==R):[...U,R])},k=async R=>{try{await navigator.clipboard.writeText(R),E(R),nt.success("Code copied to clipboard!"),setTimeout(()=>E(null),2e3)}catch{nt.error("Failed to copy code")}},M=Object.entries(Xn).reduce((R,[U,q])=>{const Ne=q.components.filter(ie=>ie.name.toLowerCase().includes(s.toLowerCase()));return Ne.length>0&&(R[U]={...q,components:Ne}),R},{}),v=Qn[r],O=()=>{switch(p){case"tablet":return"max-w-2xl";case"mobile":return"max-w-sm";default:return"w-full"}};return e.jsxs("div",{className:y("flex h-screen bg-gray-50",t),children:[e.jsx(Et,{}),e.jsxs("div",{className:y("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col",i?"w-16":"w-80"),children:[e.jsxs("div",{className:"p-4 border-b border-gray-200",children:[!i&&e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("div",{className:"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center",children:e.jsx(sr,{className:"h-4 w-4 text-white"})}),e.jsx("span",{className:"font-bold text-lg text-gray-900",children:"Beyond UI"})]}),e.jsx(P,{variant:"ghost",size:"sm",onClick:()=>l(!0),children:e.jsx(Ar,{className:"h-4 w-4"})})]}),i&&e.jsx("div",{className:"flex justify-center",children:e.jsx(P,{variant:"ghost",size:"sm",onClick:()=>l(!1),children:e.jsx(sr,{className:"h-4 w-4"})})}),!i&&e.jsxs("div",{className:"relative",children:[e.jsx(Dr,{className:"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400"}),e.jsx(Q,{placeholder:"Search components...",value:s,onChange:R=>o(R.target.value),className:"pl-10"})]})]}),e.jsx("nav",{className:"flex-1 p-4 overflow-y-auto",children:Object.entries(M).map(([R,U])=>e.jsxs("div",{className:"mb-4",children:[e.jsxs("button",{onClick:()=>!i&&A(R),className:y("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors","hover:bg-gray-100 text-gray-700",i?"justify-center":"justify-between"),children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[U.icon,!i&&e.jsx("span",{children:R})]}),!i&&e.jsx(Er,{className:y("h-4 w-4 transition-transform",c.includes(R)&&"rotate-180")})]}),!i&&c.includes(R)&&e.jsx("div",{className:"mt-2 ml-6 space-y-1",children:U.components.map(q=>e.jsx("button",{onClick:()=>a(q.id),className:y("flex items-center w-full p-2 text-sm rounded-lg transition-colors",r===q.id?"bg-primary-50 text-primary-700 border-r-2 border-primary-600":"text-gray-600 hover:bg-gray-50 hover:text-gray-900"),children:q.name},q.id))})]},R))})]}),e.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[e.jsx("header",{className:"bg-white border-b border-gray-200 p-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("h1",{className:"text-2xl font-bold text-gray-900",children:(v==null?void 0:v.name)||"Component Showcase"}),v&&e.jsx(X,{variant:"outline",children:v.name})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxs("div",{className:"flex items-center bg-gray-100 rounded-lg p-1",children:[e.jsx(P,{variant:p==="desktop"?"primary":"ghost",size:"sm",onClick:()=>m("desktop"),children:e.jsx(Fs,{className:"h-4 w-4"})}),e.jsx(P,{variant:p==="tablet"?"primary":"ghost",size:"sm",onClick:()=>m("tablet"),children:e.jsx(qs,{className:"h-4 w-4"})}),e.jsx(P,{variant:p==="mobile"?"primary":"ghost",size:"sm",onClick:()=>m("mobile"),children:e.jsx(Us,{className:"h-4 w-4"})})]}),e.jsx(P,{variant:"ghost",size:"sm",onClick:()=>b(!h),children:h?e.jsx(Gs,{className:"h-4 w-4"}):e.jsx($s,{className:"h-4 w-4"})})]})]})}),e.jsx("main",{className:"flex-1 overflow-auto p-6",children:v?e.jsxs("div",{className:"max-w-6xl mx-auto space-y-8",children:[e.jsx("div",{children:e.jsx("p",{className:"text-lg text-gray-600",children:v.description})}),e.jsxs(At,{value:"preview",onValueChange:()=>{},children:[e.jsxs(ct,{children:[e.jsxs(ye,{value:"preview",children:[e.jsx(zs,{className:"h-4 w-4 mr-2"}),"Preview"]}),e.jsxs(ye,{value:"code",children:[e.jsx(Ms,{className:"h-4 w-4 mr-2"}),"Code"]}),e.jsxs(ye,{value:"props",children:[e.jsx(Oe,{className:"h-4 w-4 mr-2"}),"Props"]})]}),e.jsx(ve,{value:"preview",className:"mt-6",children:e.jsx(fe,{children:e.jsx(he,{className:"p-8",children:e.jsx("div",{className:y("mx-auto transition-all duration-300",O()),children:e.jsx("div",{className:y(h&&"dark"),children:B[r]?f.createElement(B[r]):null})})})})}),e.jsx(ve,{value:"code",className:"mt-6",children:e.jsxs(fe,{children:[e.jsxs(Pe,{className:"flex flex-row items-center justify-between",children:[e.jsx(Ve,{className:"text-lg",children:"Usage Example"}),e.jsxs(P,{variant:"outline",size:"sm",onClick:()=>k(v.example),children:[x===v.example?e.jsx(Rr,{className:"h-4 w-4 mr-2"}):e.jsx(Ds,{className:"h-4 w-4 mr-2"}),"Copy"]})]}),e.jsx(he,{children:e.jsx("pre",{className:"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto",children:e.jsx("code",{children:v.example})})})]})}),e.jsx(ve,{value:"props",className:"mt-6",children:e.jsxs(fe,{children:[e.jsx(Pe,{children:e.jsx(Ve,{className:"text-lg",children:"Component Props"})}),e.jsx(he,{children:e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-gray-200",children:[e.jsx("th",{className:"text-left p-3 font-medium text-gray-900",children:"Prop"}),e.jsx("th",{className:"text-left p-3 font-medium text-gray-900",children:"Type"}),e.jsx("th",{className:"text-left p-3 font-medium text-gray-900",children:"Default"}),e.jsx("th",{className:"text-left p-3 font-medium text-gray-900",children:"Description"})]})}),e.jsx("tbody",{children:(W=v.props)==null?void 0:W.map((R,U)=>e.jsxs("tr",{className:"border-b border-gray-100",children:[e.jsxs("td",{className:"p-3",children:[e.jsx("code",{className:"bg-gray-100 px-2 py-1 rounded text-sm",children:R.name}),"required"in R&&R.required&&e.jsx(X,{variant:"danger",className:"ml-2 text-xs",children:"Required"})]}),e.jsx("td",{className:"p-3 text-gray-600",children:R.type}),e.jsx("td",{className:"p-3 text-gray-600",children:"default"in R&&R.default?e.jsx("code",{className:"bg-gray-100 px-2 py-1 rounded text-sm",children:R.default}):null}),e.jsx("td",{className:"p-3 text-gray-600",children:R.description})]},U))})]})})})]})})]})]}):e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsxs("div",{className:"text-center",children:[e.jsx(Ts,{className:"h-16 w-16 text-gray-400 mx-auto mb-4"}),e.jsx("h2",{className:"text-xl font-semibold text-gray-900 mb-2",children:"Select a Component"}),e.jsx("p",{className:"text-gray-600",children:"Choose a component from the sidebar to view its documentation and examples."})]})})})]})]})};function to(){const[t,r]=N.useState(()=>{if(typeof window<"u"){const s=localStorage.getItem("darkMode");return s?JSON.parse(s):window.matchMedia("(prefers-color-scheme: dark)").matches}return!1});return N.useEffect(()=>{const s=window.document.documentElement;t?s.classList.add("dark"):s.classList.remove("dark"),localStorage.setItem("darkMode",JSON.stringify(t))},[t]),{isDarkMode:t,toggle:()=>r(s=>!s)}}function ro(t,r){const[a,s]=N.useState(t);return N.useEffect(()=>{const o=setTimeout(()=>{s(t)},r);return()=>{clearTimeout(o)}},[t,r]),a}function ao(t,r){const[a,s]=N.useState(()=>{if(typeof window>"u")return r;try{const l=window.localStorage.getItem(t);return l?JSON.parse(l):r}catch(l){return console.error(`Error reading localStorage key "${t}":`,l),r}}),o=N.useCallback(l=>{try{const c=l instanceof Function?l(a):l;s(c),typeof window<"u"&&window.localStorage.setItem(t,JSON.stringify(c))}catch(c){console.error(`Error setting localStorage key "${t}":`,c)}},[t,a]),i=N.useCallback(()=>{try{s(r),typeof window<"u"&&window.localStorage.removeItem(t)}catch(l){console.error(`Error removing localStorage key "${t}":`,l)}},[t,r]);return[a,o,i]}function so(t=!1){const[r,a]=N.useState(t),s=N.useCallback(()=>a(i=>!i),[]),o=N.useCallback(i=>a(i),[]);return[r,s,o]}const pe={sm:640,md:768,lg:1024,xl:1280,"2xl":1536};function no(){const[t,r]=N.useState("sm");return N.useEffect(()=>{const o=()=>{const i=window.innerWidth;let l="sm";i>=pe["2xl"]?l="2xl":i>=pe.xl?l="xl":i>=pe.lg?l="lg":i>=pe.md&&(l="md"),r(l)};return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),{currentBreakpoint:t,isAbove:o=>pe[t]>=pe[o],isBelow:o=>pe[t]<pe[o]}}const oo={colors:{primary:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554"},secondary:{50:"#f8fafc",100:"#f1f5f9",200:"#e2e8f0",300:"#cbd5e1",400:"#94a3b8",500:"#64748b",600:"#475569",700:"#334155",800:"#1e293b",900:"#0f172a",950:"#020617"},danger:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d",950:"#450a0a"},success:{50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d",950:"#052e16"},warning:{50:"#fffbeb",100:"#fef3c7",200:"#fde68a",300:"#fcd34d",400:"#fbbf24",500:"#f59e0b",600:"#d97706",700:"#b45309",800:"#92400e",900:"#78350f",950:"#451a03"}}};exports.Alert=ee;exports.AlertDescription=re;exports.AlertTitle=te;exports.Avatar=ge;exports.AvatarFallback=be;exports.AvatarImage=xe;exports.Badge=X;exports.Button=P;exports.Card=fe;exports.CardContent=he;exports.CardDescription=xr;exports.CardFooter=br;exports.CardHeader=Pe;exports.CardTitle=Ve;exports.Checkbox=Ee;exports.ComponentShowcase=eo;exports.DashboardGrid=_t;exports.DashboardGridItem=aa;exports.DashboardHeader=Dt;exports.DashboardLayout=zt;exports.Input=Q;exports.Modal=Pr;exports.ModalContent=Ir;exports.ModalDescription=Js;exports.ModalFooter=Lr;exports.ModalHeader=Vr;exports.ModalTitle=Or;exports.NavItem=Qr;exports.Navbar=Mt;exports.Sidebar=dt;exports.Skeleton=Se;exports.Spinner=Ke;exports.StatsCard=Ie;exports.Switch=Re;exports.Tabs=At;exports.TabsContent=ve;exports.TabsList=ct;exports.TabsTrigger=ye;exports.Textarea=Te;exports.Toast=Et;exports.alertVariants=vr;exports.avatarVariants=wr;exports.badgeVariants=yr;exports.buttonVariants=fr;exports.cardVariants=gr;exports.checkboxVariants=zr;exports.cn=y;exports.defaultTheme=oo;exports.gridItemVariants=ra;exports.gridVariants=ta;exports.inputVariants=hr;exports.modalVariants=_r;exports.navbarVariants=Xr;exports.showToast=nt;exports.sidebarVariants=ea;exports.skeletonVariants=Nr;exports.spinnerVariants=jr;exports.statsCardVariants=Zr;exports.switchVariants=Cr;exports.tabsListVariants=Jr;exports.tabsTriggerVariants=Kr;exports.textareaVariants=kr;exports.toastVariants=Yr;exports.useBreakpoint=no;exports.useDarkMode=to;exports.useDebounce=ro;exports.useLocalStorage=ao;exports.useToggle=so;
|
|
1999
|
+
</Navbar>`,
|
|
2000
|
+
props: [
|
|
2001
|
+
{ name: "children", type: "ReactNode", required: true, description: "Navbar content (branding, links, actions)" }
|
|
2002
|
+
],
|
|
2003
|
+
component: showcasePreviewMap["navbar"]
|
|
2004
|
+
}
|
|
2005
|
+
};
|
|
2006
|
+
var ComponentShowcase = ({ className }) => {
|
|
2007
|
+
const [selectedComponent, setSelectedComponent] = React11.useState("button");
|
|
2008
|
+
const [searchQuery, setSearchQuery] = React11.useState("");
|
|
2009
|
+
const [sidebarCollapsed, setSidebarCollapsed] = React11.useState(false);
|
|
2010
|
+
const [expandedCategories, setExpandedCategories] = React11.useState(["Forms"]);
|
|
2011
|
+
const [viewMode, setViewMode] = React11.useState("desktop");
|
|
2012
|
+
const [darkMode, setDarkMode] = React11.useState(false);
|
|
2013
|
+
const [copiedCode, setCopiedCode] = React11.useState(null);
|
|
2014
|
+
const toggleCategory = (category) => {
|
|
2015
|
+
setExpandedCategories(
|
|
2016
|
+
(prev) => prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category]
|
|
2017
|
+
);
|
|
2018
|
+
};
|
|
2019
|
+
const copyToClipboard = async (code) => {
|
|
2020
|
+
try {
|
|
2021
|
+
await navigator.clipboard.writeText(code);
|
|
2022
|
+
setCopiedCode(code);
|
|
2023
|
+
showToast.success("Code copied to clipboard!");
|
|
2024
|
+
setTimeout(() => setCopiedCode(null), 2e3);
|
|
2025
|
+
} catch (err) {
|
|
2026
|
+
showToast.error("Failed to copy code");
|
|
2027
|
+
}
|
|
2028
|
+
};
|
|
2029
|
+
const filteredCategories = Object.entries(componentCategories).reduce((acc, [categoryName, categoryData]) => {
|
|
2030
|
+
const filteredComponents = categoryData.components.filter(
|
|
2031
|
+
(component) => component.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
2032
|
+
);
|
|
2033
|
+
if (filteredComponents.length > 0) {
|
|
2034
|
+
acc[categoryName] = {
|
|
2035
|
+
...categoryData,
|
|
2036
|
+
components: filteredComponents
|
|
2037
|
+
};
|
|
2038
|
+
}
|
|
2039
|
+
return acc;
|
|
2040
|
+
}, {});
|
|
2041
|
+
const currentDoc = componentDocs[selectedComponent];
|
|
2042
|
+
const getViewportClass = () => {
|
|
2043
|
+
switch (viewMode) {
|
|
2044
|
+
case "tablet":
|
|
2045
|
+
return "max-w-2xl";
|
|
2046
|
+
case "mobile":
|
|
2047
|
+
return "max-w-sm";
|
|
2048
|
+
default:
|
|
2049
|
+
return "w-full";
|
|
2050
|
+
}
|
|
2051
|
+
};
|
|
2052
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [
|
|
2053
|
+
/* @__PURE__ */ jsxRuntime.jsx(Toast, {}),
|
|
2054
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
2055
|
+
"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col",
|
|
2056
|
+
sidebarCollapsed ? "w-16" : "w-80"
|
|
2057
|
+
), children: [
|
|
2058
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-gray-200", children: [
|
|
2059
|
+
!sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
|
|
2060
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
2061
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4 text-white" }) }),
|
|
2062
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })
|
|
2063
|
+
] }),
|
|
2064
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2065
|
+
Button,
|
|
2066
|
+
{
|
|
2067
|
+
variant: "ghost",
|
|
2068
|
+
size: "sm",
|
|
2069
|
+
onClick: () => setSidebarCollapsed(true),
|
|
2070
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
|
|
2071
|
+
}
|
|
2072
|
+
)
|
|
2073
|
+
] }),
|
|
2074
|
+
sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2075
|
+
Button,
|
|
2076
|
+
{
|
|
2077
|
+
variant: "ghost",
|
|
2078
|
+
size: "sm",
|
|
2079
|
+
onClick: () => setSidebarCollapsed(false),
|
|
2080
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4" })
|
|
2081
|
+
}
|
|
2082
|
+
) }),
|
|
2083
|
+
!sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
2084
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }),
|
|
2085
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2086
|
+
Input,
|
|
2087
|
+
{
|
|
2088
|
+
placeholder: "Search components...",
|
|
2089
|
+
value: searchQuery,
|
|
2090
|
+
onChange: (e) => setSearchQuery(e.target.value),
|
|
2091
|
+
className: "pl-10"
|
|
2092
|
+
}
|
|
2093
|
+
)
|
|
2094
|
+
] })
|
|
2095
|
+
] }),
|
|
2096
|
+
/* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
2097
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2098
|
+
"button",
|
|
2099
|
+
{
|
|
2100
|
+
onClick: () => !sidebarCollapsed && toggleCategory(categoryName),
|
|
2101
|
+
className: cn(
|
|
2102
|
+
"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors",
|
|
2103
|
+
"hover:bg-gray-100 text-gray-700",
|
|
2104
|
+
sidebarCollapsed ? "justify-center" : "justify-between"
|
|
2105
|
+
),
|
|
2106
|
+
children: [
|
|
2107
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
2108
|
+
categoryData.icon,
|
|
2109
|
+
!sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { children: categoryName })
|
|
2110
|
+
] }),
|
|
2111
|
+
!sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
|
|
2112
|
+
"h-4 w-4 transition-transform",
|
|
2113
|
+
expandedCategories.includes(categoryName) && "rotate-180"
|
|
2114
|
+
) })
|
|
2115
|
+
]
|
|
2116
|
+
}
|
|
2117
|
+
),
|
|
2118
|
+
!sidebarCollapsed && expandedCategories.includes(categoryName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2119
|
+
"button",
|
|
2120
|
+
{
|
|
2121
|
+
onClick: () => setSelectedComponent(component.id),
|
|
2122
|
+
className: cn(
|
|
2123
|
+
"flex items-center w-full p-2 text-sm rounded-lg transition-colors",
|
|
2124
|
+
selectedComponent === component.id ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
|
2125
|
+
),
|
|
2126
|
+
children: component.name
|
|
2127
|
+
},
|
|
2128
|
+
component.id
|
|
2129
|
+
)) })
|
|
2130
|
+
] }, categoryName)) })
|
|
2131
|
+
] }),
|
|
2132
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
|
|
2133
|
+
/* @__PURE__ */ jsxRuntime.jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
2134
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
|
|
2135
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }),
|
|
2136
|
+
currentDoc && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: currentDoc.name })
|
|
2137
|
+
] }),
|
|
2138
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
2139
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [
|
|
2140
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2141
|
+
Button,
|
|
2142
|
+
{
|
|
2143
|
+
variant: viewMode === "desktop" ? "primary" : "ghost",
|
|
2144
|
+
size: "sm",
|
|
2145
|
+
onClick: () => setViewMode("desktop"),
|
|
2146
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "h-4 w-4" })
|
|
2147
|
+
}
|
|
2148
|
+
),
|
|
2149
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2150
|
+
Button,
|
|
2151
|
+
{
|
|
2152
|
+
variant: viewMode === "tablet" ? "primary" : "ghost",
|
|
2153
|
+
size: "sm",
|
|
2154
|
+
onClick: () => setViewMode("tablet"),
|
|
2155
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tablet, { className: "h-4 w-4" })
|
|
2156
|
+
}
|
|
2157
|
+
),
|
|
2158
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2159
|
+
Button,
|
|
2160
|
+
{
|
|
2161
|
+
variant: viewMode === "mobile" ? "primary" : "ghost",
|
|
2162
|
+
size: "sm",
|
|
2163
|
+
onClick: () => setViewMode("mobile"),
|
|
2164
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Smartphone, { className: "h-4 w-4" })
|
|
2165
|
+
}
|
|
2166
|
+
)
|
|
2167
|
+
] }),
|
|
2168
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2169
|
+
Button,
|
|
2170
|
+
{
|
|
2171
|
+
variant: "ghost",
|
|
2172
|
+
size: "sm",
|
|
2173
|
+
onClick: () => setDarkMode(!darkMode),
|
|
2174
|
+
children: darkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
|
|
2175
|
+
}
|
|
2176
|
+
)
|
|
2177
|
+
] })
|
|
2178
|
+
] }) }),
|
|
2179
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
|
|
2180
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }),
|
|
2181
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: "preview", onValueChange: () => {
|
|
2182
|
+
}, children: [
|
|
2183
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TabsList, { children: [
|
|
2184
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "preview", children: [
|
|
2185
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-2" }),
|
|
2186
|
+
"Preview"
|
|
2187
|
+
] }),
|
|
2188
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "code", children: [
|
|
2189
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4 mr-2" }),
|
|
2190
|
+
"Code"
|
|
2191
|
+
] }),
|
|
2192
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "props", children: [
|
|
2193
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4 mr-2" }),
|
|
2194
|
+
"Props"
|
|
2195
|
+
] })
|
|
2196
|
+
] }),
|
|
2197
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "preview", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(darkMode && "dark"), children: showcasePreviewMap[selectedComponent] ? React11__namespace.createElement(showcasePreviewMap[selectedComponent]) : null }) }) }) }) }),
|
|
2198
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "code", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
|
|
2199
|
+
/* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [
|
|
2200
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: "Usage Example" }),
|
|
2201
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2202
|
+
Button,
|
|
2203
|
+
{
|
|
2204
|
+
variant: "outline",
|
|
2205
|
+
size: "sm",
|
|
2206
|
+
onClick: () => copyToClipboard(currentDoc.example),
|
|
2207
|
+
children: [
|
|
2208
|
+
copiedCode === currentDoc.example ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-4 w-4 mr-2" }),
|
|
2209
|
+
"Copy"
|
|
2210
|
+
]
|
|
2211
|
+
}
|
|
2212
|
+
)
|
|
2213
|
+
] }),
|
|
2214
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: currentDoc.example }) }) })
|
|
2215
|
+
] }) }),
|
|
2216
|
+
/* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "props", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
|
|
2217
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: "Component Props" }) }),
|
|
2218
|
+
/* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
|
|
2219
|
+
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-gray-200", children: [
|
|
2220
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }),
|
|
2221
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }),
|
|
2222
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }),
|
|
2223
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })
|
|
2224
|
+
] }) }),
|
|
2225
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: currentDoc.props?.map((prop, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-gray-100", children: [
|
|
2226
|
+
/* @__PURE__ */ jsxRuntime.jsxs("td", { className: "p-3", children: [
|
|
2227
|
+
/* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }),
|
|
2228
|
+
"required" in prop && prop.required && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" })
|
|
2229
|
+
] }),
|
|
2230
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-gray-600", children: prop.type }),
|
|
2231
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-gray-600", children: "default" in prop && prop.default ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default }) : null }),
|
|
2232
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-gray-600", children: prop.description })
|
|
2233
|
+
] }, index)) })
|
|
2234
|
+
] }) }) })
|
|
2235
|
+
] }) })
|
|
2236
|
+
] })
|
|
2237
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
|
|
2238
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }),
|
|
2239
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }),
|
|
2240
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })
|
|
2241
|
+
] }) }) })
|
|
2242
|
+
] })
|
|
2243
|
+
] });
|
|
2244
|
+
};
|
|
2245
|
+
function useDarkMode() {
|
|
2246
|
+
const [isDarkMode, setIsDarkMode] = React11.useState(() => {
|
|
2247
|
+
if (typeof window !== "undefined") {
|
|
2248
|
+
const stored = localStorage.getItem("darkMode");
|
|
2249
|
+
if (stored) {
|
|
2250
|
+
return JSON.parse(stored);
|
|
2251
|
+
}
|
|
2252
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
2253
|
+
}
|
|
2254
|
+
return false;
|
|
2255
|
+
});
|
|
2256
|
+
React11.useEffect(() => {
|
|
2257
|
+
const root = window.document.documentElement;
|
|
2258
|
+
if (isDarkMode) {
|
|
2259
|
+
root.classList.add("dark");
|
|
2260
|
+
} else {
|
|
2261
|
+
root.classList.remove("dark");
|
|
2262
|
+
}
|
|
2263
|
+
localStorage.setItem("darkMode", JSON.stringify(isDarkMode));
|
|
2264
|
+
}, [isDarkMode]);
|
|
2265
|
+
const toggle = () => setIsDarkMode((prev) => !prev);
|
|
2266
|
+
return { isDarkMode, toggle };
|
|
2267
|
+
}
|
|
2268
|
+
function useDebounce(value, delay) {
|
|
2269
|
+
const [debouncedValue, setDebouncedValue] = React11.useState(value);
|
|
2270
|
+
React11.useEffect(() => {
|
|
2271
|
+
const handler = setTimeout(() => {
|
|
2272
|
+
setDebouncedValue(value);
|
|
2273
|
+
}, delay);
|
|
2274
|
+
return () => {
|
|
2275
|
+
clearTimeout(handler);
|
|
2276
|
+
};
|
|
2277
|
+
}, [value, delay]);
|
|
2278
|
+
return debouncedValue;
|
|
2279
|
+
}
|
|
2280
|
+
function useLocalStorage(key, initialValue) {
|
|
2281
|
+
const [storedValue, setStoredValue] = React11.useState(() => {
|
|
2282
|
+
if (typeof window === "undefined") {
|
|
2283
|
+
return initialValue;
|
|
2284
|
+
}
|
|
2285
|
+
try {
|
|
2286
|
+
const item = window.localStorage.getItem(key);
|
|
2287
|
+
return item ? JSON.parse(item) : initialValue;
|
|
2288
|
+
} catch (error) {
|
|
2289
|
+
console.error(`Error reading localStorage key "${key}":`, error);
|
|
2290
|
+
return initialValue;
|
|
2291
|
+
}
|
|
2292
|
+
});
|
|
2293
|
+
const setValue = React11.useCallback((value) => {
|
|
2294
|
+
try {
|
|
2295
|
+
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
2296
|
+
setStoredValue(valueToStore);
|
|
2297
|
+
if (typeof window !== "undefined") {
|
|
2298
|
+
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
2299
|
+
}
|
|
2300
|
+
} catch (error) {
|
|
2301
|
+
console.error(`Error setting localStorage key "${key}":`, error);
|
|
2302
|
+
}
|
|
2303
|
+
}, [key, storedValue]);
|
|
2304
|
+
const removeValue = React11.useCallback(() => {
|
|
2305
|
+
try {
|
|
2306
|
+
setStoredValue(initialValue);
|
|
2307
|
+
if (typeof window !== "undefined") {
|
|
2308
|
+
window.localStorage.removeItem(key);
|
|
2309
|
+
}
|
|
2310
|
+
} catch (error) {
|
|
2311
|
+
console.error(`Error removing localStorage key "${key}":`, error);
|
|
2312
|
+
}
|
|
2313
|
+
}, [key, initialValue]);
|
|
2314
|
+
return [storedValue, setValue, removeValue];
|
|
2315
|
+
}
|
|
2316
|
+
function useToggle(initialValue = false) {
|
|
2317
|
+
const [value, setValue] = React11.useState(initialValue);
|
|
2318
|
+
const toggle = React11.useCallback(() => setValue((prev) => !prev), []);
|
|
2319
|
+
const setToggle = React11.useCallback((newValue) => setValue(newValue), []);
|
|
2320
|
+
return [value, toggle, setToggle];
|
|
2321
|
+
}
|
|
2322
|
+
var breakpoints = {
|
|
2323
|
+
sm: 640,
|
|
2324
|
+
md: 768,
|
|
2325
|
+
lg: 1024,
|
|
2326
|
+
xl: 1280,
|
|
2327
|
+
"2xl": 1536
|
|
2328
|
+
};
|
|
2329
|
+
function useBreakpoint() {
|
|
2330
|
+
const [currentBreakpoint, setCurrentBreakpoint] = React11.useState("sm");
|
|
2331
|
+
React11.useEffect(() => {
|
|
2332
|
+
const checkBreakpoint = () => {
|
|
2333
|
+
const width = window.innerWidth;
|
|
2334
|
+
let breakpoint = "sm";
|
|
2335
|
+
if (width >= breakpoints["2xl"]) breakpoint = "2xl";
|
|
2336
|
+
else if (width >= breakpoints.xl) breakpoint = "xl";
|
|
2337
|
+
else if (width >= breakpoints.lg) breakpoint = "lg";
|
|
2338
|
+
else if (width >= breakpoints.md) breakpoint = "md";
|
|
2339
|
+
setCurrentBreakpoint(breakpoint);
|
|
2340
|
+
};
|
|
2341
|
+
checkBreakpoint();
|
|
2342
|
+
window.addEventListener("resize", checkBreakpoint);
|
|
2343
|
+
return () => window.removeEventListener("resize", checkBreakpoint);
|
|
2344
|
+
}, []);
|
|
2345
|
+
const isAbove = (breakpoint) => {
|
|
2346
|
+
return breakpoints[currentBreakpoint] >= breakpoints[breakpoint];
|
|
2347
|
+
};
|
|
2348
|
+
const isBelow = (breakpoint) => {
|
|
2349
|
+
return breakpoints[currentBreakpoint] < breakpoints[breakpoint];
|
|
2350
|
+
};
|
|
2351
|
+
return { currentBreakpoint, isAbove, isBelow };
|
|
2352
|
+
}
|
|
2353
|
+
|
|
2354
|
+
// src/theme/default.ts
|
|
2355
|
+
var defaultTheme = {
|
|
2356
|
+
colors: {
|
|
2357
|
+
primary: {
|
|
2358
|
+
50: "#eff6ff",
|
|
2359
|
+
100: "#dbeafe",
|
|
2360
|
+
200: "#bfdbfe",
|
|
2361
|
+
300: "#93c5fd",
|
|
2362
|
+
400: "#60a5fa",
|
|
2363
|
+
500: "#3b82f6",
|
|
2364
|
+
600: "#2563eb",
|
|
2365
|
+
700: "#1d4ed8",
|
|
2366
|
+
800: "#1e40af",
|
|
2367
|
+
900: "#1e3a8a",
|
|
2368
|
+
950: "#172554"
|
|
2369
|
+
},
|
|
2370
|
+
secondary: {
|
|
2371
|
+
50: "#f8fafc",
|
|
2372
|
+
100: "#f1f5f9",
|
|
2373
|
+
200: "#e2e8f0",
|
|
2374
|
+
300: "#cbd5e1",
|
|
2375
|
+
400: "#94a3b8",
|
|
2376
|
+
500: "#64748b",
|
|
2377
|
+
600: "#475569",
|
|
2378
|
+
700: "#334155",
|
|
2379
|
+
800: "#1e293b",
|
|
2380
|
+
900: "#0f172a",
|
|
2381
|
+
950: "#020617"
|
|
2382
|
+
},
|
|
2383
|
+
danger: {
|
|
2384
|
+
50: "#fef2f2",
|
|
2385
|
+
100: "#fee2e2",
|
|
2386
|
+
200: "#fecaca",
|
|
2387
|
+
300: "#fca5a5",
|
|
2388
|
+
400: "#f87171",
|
|
2389
|
+
500: "#ef4444",
|
|
2390
|
+
600: "#dc2626",
|
|
2391
|
+
700: "#b91c1c",
|
|
2392
|
+
800: "#991b1b",
|
|
2393
|
+
900: "#7f1d1d",
|
|
2394
|
+
950: "#450a0a"
|
|
2395
|
+
},
|
|
2396
|
+
success: {
|
|
2397
|
+
50: "#f0fdf4",
|
|
2398
|
+
100: "#dcfce7",
|
|
2399
|
+
200: "#bbf7d0",
|
|
2400
|
+
300: "#86efac",
|
|
2401
|
+
400: "#4ade80",
|
|
2402
|
+
500: "#22c55e",
|
|
2403
|
+
600: "#16a34a",
|
|
2404
|
+
700: "#15803d",
|
|
2405
|
+
800: "#166534",
|
|
2406
|
+
900: "#14532d",
|
|
2407
|
+
950: "#052e16"
|
|
2408
|
+
},
|
|
2409
|
+
warning: {
|
|
2410
|
+
50: "#fffbeb",
|
|
2411
|
+
100: "#fef3c7",
|
|
2412
|
+
200: "#fde68a",
|
|
2413
|
+
300: "#fcd34d",
|
|
2414
|
+
400: "#fbbf24",
|
|
2415
|
+
500: "#f59e0b",
|
|
2416
|
+
600: "#d97706",
|
|
2417
|
+
700: "#b45309",
|
|
2418
|
+
800: "#92400e",
|
|
2419
|
+
900: "#78350f",
|
|
2420
|
+
950: "#451a03"
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
};
|
|
2424
|
+
|
|
2425
|
+
exports.Alert = Alert;
|
|
2426
|
+
exports.AlertDescription = AlertDescription;
|
|
2427
|
+
exports.AlertTitle = AlertTitle;
|
|
2428
|
+
exports.Avatar = Avatar;
|
|
2429
|
+
exports.AvatarFallback = AvatarFallback;
|
|
2430
|
+
exports.AvatarImage = AvatarImage;
|
|
2431
|
+
exports.Badge = Badge;
|
|
2432
|
+
exports.Button = Button;
|
|
2433
|
+
exports.Card = Card;
|
|
2434
|
+
exports.CardContent = CardContent;
|
|
2435
|
+
exports.CardDescription = CardDescription;
|
|
2436
|
+
exports.CardFooter = CardFooter;
|
|
2437
|
+
exports.CardHeader = CardHeader;
|
|
2438
|
+
exports.CardTitle = CardTitle;
|
|
2439
|
+
exports.Checkbox = Checkbox;
|
|
2440
|
+
exports.ComponentShowcase = ComponentShowcase;
|
|
2441
|
+
exports.DashboardGrid = DashboardGrid;
|
|
2442
|
+
exports.DashboardGridItem = DashboardGridItem;
|
|
2443
|
+
exports.DashboardHeader = DashboardHeader;
|
|
2444
|
+
exports.DashboardLayout = DashboardLayout;
|
|
2445
|
+
exports.Input = Input;
|
|
2446
|
+
exports.Modal = Modal;
|
|
2447
|
+
exports.ModalContent = ModalContent;
|
|
2448
|
+
exports.ModalDescription = ModalDescription;
|
|
2449
|
+
exports.ModalFooter = ModalFooter;
|
|
2450
|
+
exports.ModalHeader = ModalHeader;
|
|
2451
|
+
exports.ModalTitle = ModalTitle;
|
|
2452
|
+
exports.NavItem = NavItem;
|
|
2453
|
+
exports.Navbar = Navbar;
|
|
2454
|
+
exports.Sidebar = Sidebar;
|
|
2455
|
+
exports.Skeleton = Skeleton;
|
|
2456
|
+
exports.Spinner = Spinner;
|
|
2457
|
+
exports.StatsCard = StatsCard;
|
|
2458
|
+
exports.Switch = Switch;
|
|
2459
|
+
exports.Tabs = Tabs;
|
|
2460
|
+
exports.TabsContent = TabsContent;
|
|
2461
|
+
exports.TabsList = TabsList;
|
|
2462
|
+
exports.TabsTrigger = TabsTrigger;
|
|
2463
|
+
exports.Textarea = Textarea;
|
|
2464
|
+
exports.Toast = Toast;
|
|
2465
|
+
exports.alertVariants = alertVariants;
|
|
2466
|
+
exports.avatarVariants = avatarVariants;
|
|
2467
|
+
exports.badgeVariants = badgeVariants;
|
|
2468
|
+
exports.buttonVariants = buttonVariants;
|
|
2469
|
+
exports.cardVariants = cardVariants;
|
|
2470
|
+
exports.checkboxVariants = checkboxVariants;
|
|
2471
|
+
exports.cn = cn;
|
|
2472
|
+
exports.defaultTheme = defaultTheme;
|
|
2473
|
+
exports.gridItemVariants = gridItemVariants;
|
|
2474
|
+
exports.gridVariants = gridVariants;
|
|
2475
|
+
exports.inputVariants = inputVariants;
|
|
2476
|
+
exports.modalVariants = modalVariants;
|
|
2477
|
+
exports.navbarVariants = navbarVariants;
|
|
2478
|
+
exports.showToast = showToast;
|
|
2479
|
+
exports.sidebarVariants = sidebarVariants;
|
|
2480
|
+
exports.skeletonVariants = skeletonVariants;
|
|
2481
|
+
exports.spinnerVariants = spinnerVariants;
|
|
2482
|
+
exports.statsCardVariants = statsCardVariants;
|
|
2483
|
+
exports.switchVariants = switchVariants;
|
|
2484
|
+
exports.tabsListVariants = tabsListVariants;
|
|
2485
|
+
exports.tabsTriggerVariants = tabsTriggerVariants;
|
|
2486
|
+
exports.textareaVariants = textareaVariants;
|
|
2487
|
+
exports.toastVariants = toastVariants;
|
|
2488
|
+
exports.useBreakpoint = useBreakpoint;
|
|
2489
|
+
exports.useDarkMode = useDarkMode;
|
|
2490
|
+
exports.useDebounce = useDebounce;
|
|
2491
|
+
exports.useLocalStorage = useLocalStorage;
|
|
2492
|
+
exports.useToggle = useToggle;
|