@orbit_ui_toolkit/orbitui-kit 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -73
- package/dist/components/AppLayout/AppLayout.d.ts +10 -0
- package/dist/components/AppLayout/AppLayout.stories.d.ts +8 -0
- package/dist/components/InboxLayout/InboxLayout.d.ts +12 -0
- package/dist/components/InboxLayout/InboxLayout.stories.d.ts +6 -0
- package/dist/components/SocialLayout/SocialLayout.d.ts +10 -0
- package/dist/components/SocialLayout/SocialLayout.stories.d.ts +7 -0
- package/dist/components/TextArea/TextArea.d.ts +7 -0
- package/dist/components/TextArea/TextArea.stories.d.ts +10 -0
- package/dist/index.d.ts +4 -0
- package/dist/orbitui.cjs.js +36 -5
- package/dist/orbitui.es.js +477 -309
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,73 +1,31 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
// Other configs...
|
|
34
|
-
],
|
|
35
|
-
languageOptions: {
|
|
36
|
-
parserOptions: {
|
|
37
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
38
|
-
tsconfigRootDir: import.meta.dirname,
|
|
39
|
-
},
|
|
40
|
-
// other options...
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
])
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
47
|
-
|
|
48
|
-
```js
|
|
49
|
-
// eslint.config.js
|
|
50
|
-
import reactX from 'eslint-plugin-react-x'
|
|
51
|
-
import reactDom from 'eslint-plugin-react-dom'
|
|
52
|
-
|
|
53
|
-
export default defineConfig([
|
|
54
|
-
globalIgnores(['dist']),
|
|
55
|
-
{
|
|
56
|
-
files: ['**/*.{ts,tsx}'],
|
|
57
|
-
extends: [
|
|
58
|
-
// Other configs...
|
|
59
|
-
// Enable lint rules for React
|
|
60
|
-
reactX.configs['recommended-typescript'],
|
|
61
|
-
// Enable lint rules for React DOM
|
|
62
|
-
reactDom.configs.recommended,
|
|
63
|
-
],
|
|
64
|
-
languageOptions: {
|
|
65
|
-
parserOptions: {
|
|
66
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
67
|
-
tsconfigRootDir: import.meta.dirname,
|
|
68
|
-
},
|
|
69
|
-
// other options...
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
])
|
|
73
|
-
```
|
|
1
|
+
# 🚀 OrbitUI
|
|
2
|
+
|
|
3
|
+
OrbitUI is a modern **frontend UI toolkit** designed to help developers build fast, consistent, and scalable user interfaces.
|
|
4
|
+
|
|
5
|
+
It is built with a strong focus on **reusability, accessibility, and developer experience**, making it easy to use across multiple projects without rewriting common UI components.
|
|
6
|
+
|
|
7
|
+
OrbitUI provides a collection of reusable components such as **buttons, inputs, forms, modals, and layout utilities**, all designed to be customizable and production-ready.
|
|
8
|
+
|
|
9
|
+
This toolkit is developed and maintained by **Mahammad Devarakonda**.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## ✨ Key Features
|
|
14
|
+
- Reusable and modular UI components
|
|
15
|
+
- Clean and minimal design system
|
|
16
|
+
- Easy integration with React projects
|
|
17
|
+
- Customizable styles and variants
|
|
18
|
+
- Built for scalability and maintainability
|
|
19
|
+
- Suitable for both internal tools and production apps
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 🛠 Tech Stack
|
|
24
|
+
- React
|
|
25
|
+
- TypeScript
|
|
26
|
+
- Tailwind CSS
|
|
27
|
+
- Storybook (for component documentation)
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
##
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface AppLayoutProps {
|
|
3
|
+
sidebar?: React.ReactNode;
|
|
4
|
+
header?: React.ReactNode;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
footer?: React.ReactNode;
|
|
7
|
+
sidebarWidth?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const AppLayout: React.FC<AppLayoutProps>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { AppLayout } from './AppLayout';
|
|
3
|
+
declare const meta: Meta<typeof AppLayout>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof AppLayout>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithFooter: Story;
|
|
8
|
+
export declare const minimalist: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface InboxLayoutProps {
|
|
3
|
+
list: React.ReactNode;
|
|
4
|
+
header?: React.ReactNode;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
footer?: React.ReactNode;
|
|
7
|
+
isChatActive?: boolean;
|
|
8
|
+
onBack?: () => void;
|
|
9
|
+
listWidth?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const InboxLayout: React.FC<InboxLayoutProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface SocialLayoutProps {
|
|
3
|
+
sidebar?: React.ReactNode;
|
|
4
|
+
header?: React.ReactNode;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
footer?: React.ReactNode;
|
|
7
|
+
maxWidth?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const SocialLayout: React.FC<SocialLayoutProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { SocialLayout } from './SocialLayout';
|
|
3
|
+
declare const meta: Meta<typeof SocialLayout>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof SocialLayout>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const MinimalShell: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { TextArea } from './TextArea';
|
|
3
|
+
declare const meta: Meta<typeof TextArea>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof TextArea>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithLabel: Story;
|
|
8
|
+
export declare const WithError: Story;
|
|
9
|
+
export declare const AutoResize: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
package/dist/index.d.ts
CHANGED
|
@@ -7,3 +7,7 @@ export * from './components/Alert/Alert';
|
|
|
7
7
|
export * from './components/Grid/Grid';
|
|
8
8
|
export * from './components/Typography/Typography';
|
|
9
9
|
export * from './components/Box/Box';
|
|
10
|
+
export * from './components/TextArea/TextArea';
|
|
11
|
+
export * from './components/AppLayout/AppLayout';
|
|
12
|
+
export * from './components/SocialLayout/SocialLayout';
|
|
13
|
+
export * from './components/InboxLayout/InboxLayout';
|
package/dist/orbitui.cjs.js
CHANGED
|
@@ -1,24 +1,55 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react");var R={exports:{}},C={};var U;function ne(){if(U)return C;U=1;var s=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function l(t,o,a){var d=null;if(a!==void 0&&(d=""+a),o.key!==void 0&&(d=""+o.key),"key"in o){a={};for(var c in o)c!=="key"&&(a[c]=o[c])}else a=o;return o=a.ref,{$$typeof:s,type:t,key:d,ref:o!==void 0?o:null,props:a}}return C.Fragment=n,C.jsx=l,C.jsxs=l,C}var _={};var G;function oe(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function s(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===re?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case k:return"Fragment";case z:return"Profiler";case M:return"StrictMode";case X:return"Suspense";case Q:return"SuspenseList";case ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case N:return"Portal";case J:return r.displayName||"Context";case $:return(r._context.displayName||"Context")+".Consumer";case Z:var i=r.render;return r=r.displayName,r||(r=i.displayName||i.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case K:return i=r.displayName||null,i!==null?i:s(r.type)||"Memo";case T:i=r._payload,r=r._init;try{return s(r(i))}catch{}}return null}function n(r){return""+r}function l(r){try{n(r);var i=!1}catch{i=!0}if(i){i=console;var u=i.error,x=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return u.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",x),n(r)}}function t(r){if(r===k)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===T)return"<...>";try{var i=s(r);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var r=S.A;return r===null?null:r.getOwner()}function a(){return Error("react-stack-top-frame")}function d(r){if(I.call(r,"key")){var i=Object.getOwnPropertyDescriptor(r,"key").get;if(i&&i.isReactWarning)return!1}return r.key!==void 0}function c(r,i){function u(){W||(W=!0,console.error("%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://react.dev/link/special-props)",i))}u.isReactWarning=!0,Object.defineProperty(r,"key",{get:u,configurable:!0})}function f(){var r=s(this.type);return B[r]||(B[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function g(r,i,u,x,E,O){var m=u.ref;return r={$$typeof:v,type:r,key:i,props:u,_owner:x},(m!==void 0?m:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:f}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:E}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function p(r,i,u,x,E,O){var m=i.children;if(m!==void 0)if(x)if(te(m)){for(x=0;x<m.length;x++)b(m[x]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else b(m);if(I.call(i,"key")){m=s(r);var w=Object.keys(i).filter(function(se){return se!=="key"});x=0<w.length?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}",F[m+x]||(w=0<w.length?"{"+w.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,x,m,w,m),
|
|
6
|
+
<%s key={someKey} {...props} />`,x,m,w,m),F[m+x]=!0)}if(m=null,u!==void 0&&(l(u),m=""+u),d(i)&&(l(i.key),m=""+i.key),"key"in i){u={};for(var L in i)L!=="key"&&(u[L]=i[L])}else u=i;return m&&c(u,typeof r=="function"?r.displayName||r.name||"Unknown":r),g(r,m,u,o(),E,O)}function b(r){j(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===T&&(r._payload.status==="fulfilled"?j(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function j(r){return typeof r=="object"&&r!==null&&r.$$typeof===v}var h=P,v=Symbol.for("react.transitional.element"),N=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),J=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),K=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),re=Symbol.for("react.client.reference"),S=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,te=Array.isArray,A=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(r){return r()}};var W,B={},D=h.react_stack_bottom_frame.bind(h,a)(),Y=A(t(a)),F={};_.Fragment=k,_.jsx=function(r,i,u){var x=1e4>S.recentlyCreatedOwnerStacks++;return p(r,i,u,!1,x?Error("react-stack-top-frame"):D,x?A(t(r)):Y)},_.jsxs=function(r,i,u){var x=1e4>S.recentlyCreatedOwnerStacks++;return p(r,i,u,!0,x?Error("react-stack-top-frame"):D,x?A(t(r)):Y)}})()),_}var V;function ae(){return V||(V=1,process.env.NODE_ENV==="production"?R.exports=ne():R.exports=oe()),R.exports}var e=ae();const y=({variant:s="primary",size:n="md",rounded:l="full",isLoading:t=!1,fullWidth:o=!1,leftIcon:a,rightIcon:d,className:c="",children:f,disabled:g,...p})=>{const b="inline-flex items-center justify-center font-medium disabled:opacity-50 disabled:pointer-events-none transition-colors duration-150",j={primary:"bg-[#0070f3] text-white hover:bg-[#0060df] border border-transparent",secondary:"bg-transparent text-[#0070f3] border border-[#0070f3] hover:bg-blue-50",tertiary:"bg-transparent text-[#0070f3] border border-gray-300 hover:border-gray-400 hover:bg-gray-50",danger:"bg-[#c23b22] text-white hover:bg-[#a0301b] border border-transparent",link:"bg-transparent text-[#0070f3] hover:underline px-0 py-0 h-auto border-none",ghost:"bg-transparent text-gray-700 hover:bg-gray-100 border-transparent"},h={sm:"px-4 py-1.5 text-xs gap-1.5 min-w-[80px]",md:"px-6 py-2 text-sm gap-2 min-w-[100px]",lg:"px-8 py-3 text-base gap-2 min-w-[120px]",icon:"w-10 h-10 p-0 min-w-0"},v={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg",full:"rounded-full"},N=o?"w-full":"";return e.jsxs("button",{className:`${b} ${j[s]} ${h[n]} ${v[l]} ${N} ${c}`,disabled:g||t,...p,children:[t&&e.jsxs("svg",{className:"animate-spin -ml-1 mr-2 h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),!t&&a&&e.jsx("span",{className:"shrink-0",children:a}),e.jsx("span",{className:"truncate",children:t?"Loading...":f}),!t&&d&&e.jsx("span",{className:"shrink-0",children:d})]})},le=({label:s,error:n,leftIcon:l,rightIcon:t,className:o="",...a})=>e.jsxs("div",{className:"flex flex-col gap-1.5 w-full",children:[s&&e.jsx("label",{className:"text-sm font-medium text-gray-700",children:s}),e.jsxs("div",{className:"relative",children:[l&&e.jsx("div",{className:"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400",children:l}),e.jsx("input",{className:`
|
|
7
7
|
w-full
|
|
8
8
|
${l?"pl-10":"px-3"}
|
|
9
9
|
${t?"pr-10":"px-3"}
|
|
10
10
|
py-2
|
|
11
11
|
bg-white
|
|
12
12
|
border
|
|
13
|
-
${
|
|
13
|
+
${n?"border-red-500":"border-gray-300"}
|
|
14
14
|
rounded-md
|
|
15
15
|
shadow-sm
|
|
16
16
|
focus:outline-none
|
|
17
17
|
focus:ring-2
|
|
18
|
-
${
|
|
18
|
+
${n?"focus:ring-red-500":"focus:ring-blue-500"}
|
|
19
19
|
focus:border-transparent
|
|
20
20
|
transition-all
|
|
21
21
|
duration-200
|
|
22
22
|
hover:border-gray-400
|
|
23
23
|
${o}
|
|
24
|
-
`,...i}),t&&r.jsx("div",{className:"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400",children:t})]}),a&&r.jsx("span",{className:"text-xs text-red-500",children:a})]}),ie=({title:n,subtitle:a,children:l,footer:t,className:o=""})=>r.jsxs("div",{className:`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${o}`,children:[(n||a)&&r.jsxs("div",{className:"px-6 py-4 border-b border-gray-100",children:[n&&r.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:n}),a&&r.jsx("p",{className:"text-sm text-gray-500 mt-1",children:a})]}),r.jsx("div",{className:"px-6 py-4",children:l}),t&&r.jsx("div",{className:"px-6 py-4 bg-gray-50 border-t border-gray-100",children:t})]}),ce=({username:n,profilePic:a,postImage:l,likesCount:t,caption:o,location:i,isLiked:c=!1,isBookmarked:d=!1,onLike:h,onComment:p,onShare:g,onBookmark:b})=>r.jsxs("div",{className:"group relative max-w-[420px] mx-auto bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100/50",children:[r.jsxs("div",{className:"relative w-full aspect-4/5 bg-gray-100 overflow-hidden",children:[r.jsx("img",{src:l,alt:"Post content",className:"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"}),r.jsx("div",{className:"absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity",children:r.jsx(y,{variant:"ghost",size:"icon",rounded:"full",className:"bg-black/20 backdrop-blur-md text-white hover:bg-black/40 border-none",children:r.jsxs("svg",{"aria-label":"More options",fill:"currentColor",height:"24",role:"img",viewBox:"0 0 24 24",width:"24",children:[r.jsx("circle",{cx:"12",cy:"12",r:"1.5"}),r.jsx("circle",{cx:"6",cy:"12",r:"1.5"}),r.jsx("circle",{cx:"18",cy:"12",r:"1.5"})]})})})]}),r.jsxs("div",{className:"p-5",children:[r.jsxs("div",{className:"flex items-center justify-between mb-4",children:[r.jsxs("div",{className:"flex items-center gap-3",children:[r.jsx("div",{className:"relative",children:r.jsx("img",{src:a,alt:n,className:"w-10 h-10 rounded-full object-cover ring-2 ring-offset-2 ring-indigo-500"})}),r.jsxs("div",{className:"flex flex-col",children:[r.jsx("span",{className:"font-bold text-gray-900 text-sm leading-tight hover:text-indigo-600 cursor-pointer transition-colors",children:n}),i&&r.jsx("span",{className:"text-[11px] font-medium text-gray-400 uppercase tracking-wide",children:i})]})]}),r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:h,className:`transition-colors ${c?"text-rose-500 hover:bg-rose-50":"text-gray-400 hover:text-rose-500"}`,children:c?r.jsx("svg",{"aria-label":"Unlike",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 48 48",width:"26",children:r.jsx("path",{d:"M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 14.9 17.8 29.1 23.9 30.2h.2c6.1-1.1 23.9-15.3 23.9-30.2 0-8-6-14.5-13.4-14.5z"})}):r.jsx("svg",{"aria-label":"Like",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 24 24",width:"26",children:r.jsx("path",{d:"M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.194 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.252.342.392.545.517.545s.265-.203.517-.545a4.21 4.21 0 0 1 3.675-1.941m0-2a6.21 6.21 0 0 0-5.292 2.768 6.21 6.21 0 0 0-5.292-2.768 6.989 6.989 0 0 0-6.708 7.218c0 4.19 2.923 6.64 5.642 9.066 2.057 1.838 4.19 3.744 5.358 5.485.474-.707 2.112-2.298 5.358-5.188 2.308-2.053 5.358-4.706 5.358-9.363a6.989 6.989 0 0 0-6.708-7.218Z"})})}),r.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:p,className:"text-gray-400 hover:text-indigo-500",children:r.jsx("svg",{"aria-label":"Comment",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 24 24",width:"26",children:r.jsx("path",{d:"M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z",fill:"none",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"2"})})}),r.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:g,className:"text-gray-400 hover:text-indigo-500",children:r.jsxs("svg",{"aria-label":"Share Post",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 24 24",width:"26",children:[r.jsx("line",{fill:"none",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"2",x1:"22",x2:"9.218",y1:"3",y2:"10.083"}),r.jsx("polygon",{fill:"none",points:"11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"2"})]})})]})]}),r.jsxs("div",{className:"space-y-3",children:[r.jsx("p",{className:"text-gray-800 text-sm leading-relaxed",children:o}),r.jsxs("div",{className:"flex items-center justify-between pt-2 border-t border-gray-50",children:[r.jsxs("span",{className:"font-semibold text-xs text-gray-500",children:[t.toLocaleString()," Likes"]}),r.jsx("div",{className:"flex items-center gap-3",children:r.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:b,className:`transition-colors ${d?"text-gray-900":"text-gray-400 hover:text-gray-900"}`,children:d?r.jsx("svg",{"aria-label":"Remove",fill:"currentColor",height:"22",role:"img",viewBox:"0 0 24 24",width:"22",children:r.jsx("path",{d:"M20 22a.999.999 0 0 1-.687-.273L12 14.89l-7.313 6.837A1 1 0 0 1 3 21V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1Z"})}):r.jsx("svg",{"aria-label":"Save",fill:"currentColor",height:"22",role:"img",viewBox:"0 0 24 24",width:"22",children:r.jsx("path",{d:"M20 22a.999.999 0 0 1-.687-.273L12 14.89l-7.313 6.837A1 1 0 0 1 3 21V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1Z",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})})})})]}),r.jsxs("div",{className:"relative mt-2",children:[r.jsx("input",{type:"text",placeholder:"Add a comment...",className:"w-full text-xs text-gray-600 bg-gray-50 rounded-full px-3 py-2 outline-none focus:ring-1 focus:ring-indigo-200 transition-all"}),r.jsx("div",{className:"absolute right-2 top-1/2 -translate-y-1/2",children:r.jsx(y,{variant:"ghost",size:"sm",className:"text-indigo-500 font-bold px-2 py-0 h-auto hover:bg-transparent hover:text-indigo-700 min-w-0",children:"Post"})})]})]})]})]}),de=({variant:n="spinner",size:a="md",className:l="",color:t,colors:o})=>{const i={sm:"w-4 h-4",md:"w-8 h-8",lg:"w-12 h-12",xl:"w-16 h-16"},c={sm:"w-1 h-1",md:"w-2 h-2",lg:"w-3 h-3",xl:"w-4 h-4"},d=i[a],h="bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600";if(n==="dots"){const p=c[a],g=!!t||!!o?.length,b=f=>{if(!g)return{};const v=o?.[f]||t;return v?{backgroundColor:v}:{}},j=()=>g?"":h;return r.jsx("div",{className:`flex items-center justify-center gap-1 ${l}`,children:[0,1,2].map(f=>r.jsx("div",{className:`${p} rounded-full animate-bounce ${j()}`,style:{...b(f),animationDelay:f===0?"-0.3s":f===1?"-0.15s":"0s"}},f))})}if(n==="pulse"){const p=t?"":h;return r.jsxs("div",{className:`relative flex items-center justify-center ${d} ${l}`,children:[r.jsx("span",{className:`absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping ${p}`,style:t?{backgroundColor:t}:{}}),r.jsx("span",{className:`relative inline-flex rounded-full h-3/4 w-3/4 ${p}`,style:t?{backgroundColor:t}:{}})]})}return n==="multicolor"?r.jsx("div",{className:`${d} relative ${l}`,children:r.jsx("div",{className:`absolute inset-0 rounded-full ${h} animate-spin`,children:r.jsx("div",{className:"absolute inset-[3px] bg-white rounded-full"})})}):n==="orbit"?t?r.jsxs("div",{className:`relative ${d} ${l}`,children:[r.jsx("div",{className:"absolute inset-0 rounded-full border-2 border-t-transparent border-b-transparent animate-spin",style:{borderColor:t,borderTopColor:"transparent",borderBottomColor:"transparent"}}),r.jsx("div",{className:"absolute inset-1 rounded-full border-2 border-l-transparent border-r-transparent animate-spin-reverse opacity-75",style:{borderColor:t,borderLeftColor:"transparent",borderRightColor:"transparent",animationDirection:"reverse",animationDuration:"1.5s"}})]}):r.jsxs("div",{className:`relative ${d} ${l}`,children:[r.jsx("div",{className:`absolute inset-0 rounded-full ${h} animate-spin`,children:r.jsx("div",{className:"absolute inset-[2px] bg-white rounded-full"})}),r.jsx("div",{className:`absolute inset-1 rounded-full ${h} animate-spin-reverse opacity-75`,style:{animationDirection:"reverse",animationDuration:"1.5s"},children:r.jsx("div",{className:"absolute inset-[2px] bg-white rounded-full"})})]}):null},ue=({variant:n="info",title:a,children:l,onClose:t,className:o=""})=>{const c={success:{container:"bg-green-50 text-green-900 border-green-200",iconColor:"text-green-600",closeHover:"hover:bg-green-100 text-green-600",Icon:()=>r.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})})},error:{container:"bg-red-50 text-red-900 border-red-200",iconColor:"text-red-600",closeHover:"hover:bg-red-100 text-red-600",Icon:()=>r.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})},warning:{container:"bg-yellow-50 text-yellow-900 border-yellow-200",iconColor:"text-yellow-600",closeHover:"hover:bg-yellow-100 text-yellow-600",Icon:()=>r.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})})},info:{container:"bg-blue-50 text-blue-900 border-blue-200",iconColor:"text-blue-600",closeHover:"hover:bg-blue-100 text-blue-600",Icon:()=>r.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})}}[n],d=c.Icon;return r.jsxs("div",{role:"alert",className:`flex p-4 rounded-lg border ${c.container} ${o}`,children:[r.jsx("div",{className:`shrink-0 ${c.iconColor}`,children:r.jsx(d,{})}),r.jsxs("div",{className:"ml-3 text-sm flex-1",children:[a&&r.jsx("span",{className:"font-semibold block mb-1",children:a}),r.jsx("div",{className:"leading-relaxed",children:l})]}),t&&r.jsx("button",{onClick:t,className:`ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 items-center justify-center transition-colors ${c.closeHover}`,"aria-label":"Close",children:r.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})},xe=({children:n,colSpan:a,rowSpan:l,colStart:t,className:o=""})=>{const i={1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12",full:"col-span-full"},c={1:"row-span-1",2:"row-span-2",3:"row-span-3",4:"row-span-4",5:"row-span-5",6:"row-span-6"},d=[a?i[a]:"",l?c[l]:"",t?`col-start-${t}`:"",o].filter(Boolean).join(" ");return r.jsx("div",{className:d,children:n})},q=({children:n,cols:a=1,gap:l=4,gapX:t,gapY:o,flow:i="row",align:c,justify:d,className:h=""})=>{const p={1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",8:"grid-cols-8",10:"grid-cols-10",12:"grid-cols-12"},g={0:"gap-0",1:"gap-1",2:"gap-2",3:"gap-3",4:"gap-4",5:"gap-5",6:"gap-6",8:"gap-8",10:"gap-10",12:"gap-12"},b=["grid",p[a],t===void 0&&o===void 0?g[l]:"",t?`gap-x-${t}`:"",o?`gap-y-${o}`:"",i?`grid-flow-${i}`:"",c?`items-${c}`:"",d?`justify-${d}`:"",h].filter(Boolean).join(" ");return r.jsx("div",{className:b,children:n})};q.Item=xe;const me=({variant:n="body1",component:a,children:l,weight:t,align:o="left",color:i,className:c="",noWrap:d=!1})=>{const p=a||{h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",body1:"p",body2:"p",caption:"span",overline:"span"}[n]||"p",g={h1:"text-5xl md:text-6xl tracking-tight leading-tight",h2:"text-4xl md:text-5xl tracking-tight leading-tight",h3:"text-3xl md:text-4xl tracking-tight",h4:"text-2xl md:text-3xl tracking-tight",h5:"text-xl md:text-2xl tracking-normal",h6:"text-lg md:text-xl tracking-normal",body1:"text-base md:text-lg leading-relaxed",body2:"text-sm md:text-base leading-relaxed",caption:"text-xs md:text-sm text-gray-500",overline:"text-xs uppercase tracking-widest font-semibold"},b={h1:"font-extrabold",h2:"font-bold",h3:"font-bold",h4:"font-bold",h5:"font-semibold",h6:"font-semibold",body1:"font-normal",body2:"font-normal",caption:"font-normal",overline:"font-bold"},j={normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold"},f={left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"},v=g[n],k=t?j[t]:b[n],N=f[o],T=[v,k,N,i||"text-gray-900",d?"truncate":"",c].filter(Boolean).join(" ");return r.jsx(p,{className:T,children:l})},H=G.forwardRef(({as:n,className:a="",children:l,...t},o)=>{const i=n||"div";return r.jsx(i,{ref:o,className:a,...t,children:l})});H.displayName="Box";exports.Alert=ue;exports.Box=H;exports.Button=y;exports.Card=ie;exports.Grid=q;exports.Input=le;exports.Loader=de;exports.Post=ce;exports.Typography=me;
|
|
24
|
+
`,...a}),t&&e.jsx("div",{className:"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400",children:t})]}),n&&e.jsx("span",{className:"text-xs text-red-500",children:n})]}),ie=({title:s,subtitle:n,children:l,footer:t,className:o=""})=>e.jsxs("div",{className:`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${o}`,children:[(s||n)&&e.jsxs("div",{className:"px-6 py-4 border-b border-gray-100",children:[s&&e.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:s}),n&&e.jsx("p",{className:"text-sm text-gray-500 mt-1",children:n})]}),e.jsx("div",{className:"px-6 py-4",children:l}),t&&e.jsx("div",{className:"px-6 py-4 bg-gray-50 border-t border-gray-100",children:t})]}),ce=({username:s,profilePic:n,postImage:l,likesCount:t,caption:o,location:a,isLiked:d=!1,isBookmarked:c=!1,onLike:f,onComment:g,onShare:p,onBookmark:b})=>e.jsxs("div",{className:"group relative max-w-[420px] mx-auto bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100/50",children:[e.jsxs("div",{className:"relative w-full aspect-4/5 bg-gray-100 overflow-hidden",children:[e.jsx("img",{src:l,alt:"Post content",className:"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"}),e.jsx("div",{className:"absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity",children:e.jsx(y,{variant:"ghost",size:"icon",rounded:"full",className:"bg-black/20 backdrop-blur-md text-white hover:bg-black/40 border-none",children:e.jsxs("svg",{"aria-label":"More options",fill:"currentColor",height:"24",role:"img",viewBox:"0 0 24 24",width:"24",children:[e.jsx("circle",{cx:"12",cy:"12",r:"1.5"}),e.jsx("circle",{cx:"6",cy:"12",r:"1.5"}),e.jsx("circle",{cx:"18",cy:"12",r:"1.5"})]})})})]}),e.jsxs("div",{className:"p-5",children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"relative",children:e.jsx("img",{src:n,alt:s,className:"w-10 h-10 rounded-full object-cover ring-2 ring-offset-2 ring-indigo-500"})}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"font-bold text-gray-900 text-sm leading-tight hover:text-indigo-600 cursor-pointer transition-colors",children:s}),a&&e.jsx("span",{className:"text-[11px] font-medium text-gray-400 uppercase tracking-wide",children:a})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:f,className:`transition-colors ${d?"text-rose-500 hover:bg-rose-50":"text-gray-400 hover:text-rose-500"}`,children:d?e.jsx("svg",{"aria-label":"Unlike",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 48 48",width:"26",children:e.jsx("path",{d:"M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 14.9 17.8 29.1 23.9 30.2h.2c6.1-1.1 23.9-15.3 23.9-30.2 0-8-6-14.5-13.4-14.5z"})}):e.jsx("svg",{"aria-label":"Like",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 24 24",width:"26",children:e.jsx("path",{d:"M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.194 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.252.342.392.545.517.545s.265-.203.517-.545a4.21 4.21 0 0 1 3.675-1.941m0-2a6.21 6.21 0 0 0-5.292 2.768 6.21 6.21 0 0 0-5.292-2.768 6.989 6.989 0 0 0-6.708 7.218c0 4.19 2.923 6.64 5.642 9.066 2.057 1.838 4.19 3.744 5.358 5.485.474-.707 2.112-2.298 5.358-5.188 2.308-2.053 5.358-4.706 5.358-9.363a6.989 6.989 0 0 0-6.708-7.218Z"})})}),e.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:g,className:"text-gray-400 hover:text-indigo-500",children:e.jsx("svg",{"aria-label":"Comment",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 24 24",width:"26",children:e.jsx("path",{d:"M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z",fill:"none",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"2"})})}),e.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:p,className:"text-gray-400 hover:text-indigo-500",children:e.jsxs("svg",{"aria-label":"Share Post",fill:"currentColor",height:"26",role:"img",viewBox:"0 0 24 24",width:"26",children:[e.jsx("line",{fill:"none",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"2",x1:"22",x2:"9.218",y1:"3",y2:"10.083"}),e.jsx("polygon",{fill:"none",points:"11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"2"})]})})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("p",{className:"text-gray-800 text-sm leading-relaxed",children:o}),e.jsxs("div",{className:"flex items-center justify-between pt-2 border-t border-gray-50",children:[e.jsxs("span",{className:"font-semibold text-xs text-gray-500",children:[t.toLocaleString()," Likes"]}),e.jsx("div",{className:"flex items-center gap-3",children:e.jsx(y,{variant:"ghost",size:"icon",rounded:"full",onClick:b,className:`transition-colors ${c?"text-gray-900":"text-gray-400 hover:text-gray-900"}`,children:c?e.jsx("svg",{"aria-label":"Remove",fill:"currentColor",height:"22",role:"img",viewBox:"0 0 24 24",width:"22",children:e.jsx("path",{d:"M20 22a.999.999 0 0 1-.687-.273L12 14.89l-7.313 6.837A1 1 0 0 1 3 21V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1Z"})}):e.jsx("svg",{"aria-label":"Save",fill:"currentColor",height:"22",role:"img",viewBox:"0 0 24 24",width:"22",children:e.jsx("path",{d:"M20 22a.999.999 0 0 1-.687-.273L12 14.89l-7.313 6.837A1 1 0 0 1 3 21V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1Z",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})})})})]}),e.jsxs("div",{className:"relative mt-2",children:[e.jsx("input",{type:"text",placeholder:"Add a comment...",className:"w-full text-xs text-gray-600 bg-gray-50 rounded-full px-3 py-2 outline-none focus:ring-1 focus:ring-indigo-200 transition-all"}),e.jsx("div",{className:"absolute right-2 top-1/2 -translate-y-1/2",children:e.jsx(y,{variant:"ghost",size:"sm",className:"text-indigo-500 font-bold px-2 py-0 h-auto hover:bg-transparent hover:text-indigo-700 min-w-0",children:"Post"})})]})]})]})]}),de=({variant:s="spinner",size:n="md",className:l="",color:t,colors:o})=>{const a={sm:"w-4 h-4",md:"w-8 h-8",lg:"w-12 h-12",xl:"w-16 h-16"},d={sm:"w-1 h-1",md:"w-2 h-2",lg:"w-3 h-3",xl:"w-4 h-4"},c=a[n],f="bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600";if(s==="dots"){const g=d[n],p=!!t||!!o?.length,b=h=>{if(!p)return{};const v=o?.[h]||t;return v?{backgroundColor:v}:{}},j=()=>p?"":f;return e.jsx("div",{className:`flex items-center justify-center gap-1 ${l}`,children:[0,1,2].map(h=>e.jsx("div",{className:`${g} rounded-full animate-bounce ${j()}`,style:{...b(h),animationDelay:h===0?"-0.3s":h===1?"-0.15s":"0s"}},h))})}if(s==="pulse"){const g=t?"":f;return e.jsxs("div",{className:`relative flex items-center justify-center ${c} ${l}`,children:[e.jsx("span",{className:`absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping ${g}`,style:t?{backgroundColor:t}:{}}),e.jsx("span",{className:`relative inline-flex rounded-full h-3/4 w-3/4 ${g}`,style:t?{backgroundColor:t}:{}})]})}return s==="multicolor"?e.jsx("div",{className:`${c} relative ${l}`,children:e.jsx("div",{className:`absolute inset-0 rounded-full ${f} animate-spin`,children:e.jsx("div",{className:"absolute inset-[3px] bg-white rounded-full"})})}):s==="orbit"?t?e.jsxs("div",{className:`relative ${c} ${l}`,children:[e.jsx("div",{className:"absolute inset-0 rounded-full border-2 border-t-transparent border-b-transparent animate-spin",style:{borderColor:t,borderTopColor:"transparent",borderBottomColor:"transparent"}}),e.jsx("div",{className:"absolute inset-1 rounded-full border-2 border-l-transparent border-r-transparent animate-spin-reverse opacity-75",style:{borderColor:t,borderLeftColor:"transparent",borderRightColor:"transparent",animationDirection:"reverse",animationDuration:"1.5s"}})]}):e.jsxs("div",{className:`relative ${c} ${l}`,children:[e.jsx("div",{className:`absolute inset-0 rounded-full ${f} animate-spin`,children:e.jsx("div",{className:"absolute inset-[2px] bg-white rounded-full"})}),e.jsx("div",{className:`absolute inset-1 rounded-full ${f} animate-spin-reverse opacity-75`,style:{animationDirection:"reverse",animationDuration:"1.5s"},children:e.jsx("div",{className:"absolute inset-[2px] bg-white rounded-full"})})]}):null},ue=({variant:s="info",title:n,children:l,onClose:t,className:o=""})=>{const d={success:{container:"bg-green-50 text-green-900 border-green-200",iconColor:"text-green-600",closeHover:"hover:bg-green-100 text-green-600",Icon:()=>e.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})})},error:{container:"bg-red-50 text-red-900 border-red-200",iconColor:"text-red-600",closeHover:"hover:bg-red-100 text-red-600",Icon:()=>e.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})},warning:{container:"bg-yellow-50 text-yellow-900 border-yellow-200",iconColor:"text-yellow-600",closeHover:"hover:bg-yellow-100 text-yellow-600",Icon:()=>e.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})})},info:{container:"bg-blue-50 text-blue-900 border-blue-200",iconColor:"text-blue-600",closeHover:"hover:bg-blue-100 text-blue-600",Icon:()=>e.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})}}[s],c=d.Icon;return e.jsxs("div",{role:"alert",className:`flex p-4 rounded-lg border ${d.container} ${o}`,children:[e.jsx("div",{className:`shrink-0 ${d.iconColor}`,children:e.jsx(c,{})}),e.jsxs("div",{className:"ml-3 text-sm flex-1",children:[n&&e.jsx("span",{className:"font-semibold block mb-1",children:n}),e.jsx("div",{className:"leading-relaxed",children:l})]}),t&&e.jsx("button",{onClick:t,className:`ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 items-center justify-center transition-colors ${d.closeHover}`,"aria-label":"Close",children:e.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})},xe=({children:s,colSpan:n,rowSpan:l,colStart:t,className:o=""})=>{const a={1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12",full:"col-span-full"},d={1:"row-span-1",2:"row-span-2",3:"row-span-3",4:"row-span-4",5:"row-span-5",6:"row-span-6"},c=[n?a[n]:"",l?d[l]:"",t?`col-start-${t}`:"",o].filter(Boolean).join(" ");return e.jsx("div",{className:c,children:s})},q=({children:s,cols:n=1,gap:l=4,gapX:t,gapY:o,flow:a="row",align:d,justify:c,className:f=""})=>{const g={1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",8:"grid-cols-8",10:"grid-cols-10",12:"grid-cols-12"},p={0:"gap-0",1:"gap-1",2:"gap-2",3:"gap-3",4:"gap-4",5:"gap-5",6:"gap-6",8:"gap-8",10:"gap-10",12:"gap-12"},b=["grid",g[n],t===void 0&&o===void 0?p[l]:"",t?`gap-x-${t}`:"",o?`gap-y-${o}`:"",a?`grid-flow-${a}`:"",d?`items-${d}`:"",c?`justify-${c}`:"",f].filter(Boolean).join(" ");return e.jsx("div",{className:b,children:s})};q.Item=xe;const me=({variant:s="body1",component:n,children:l,weight:t,align:o="left",color:a,className:d="",noWrap:c=!1})=>{const g=n||{h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",body1:"p",body2:"p",caption:"span",overline:"span"}[s]||"p",p={h1:"text-5xl md:text-6xl tracking-tight leading-tight",h2:"text-4xl md:text-5xl tracking-tight leading-tight",h3:"text-3xl md:text-4xl tracking-tight",h4:"text-2xl md:text-3xl tracking-tight",h5:"text-xl md:text-2xl tracking-normal",h6:"text-lg md:text-xl tracking-normal",body1:"text-base md:text-lg leading-relaxed",body2:"text-sm md:text-base leading-relaxed",caption:"text-xs md:text-sm text-gray-500",overline:"text-xs uppercase tracking-widest font-semibold"},b={h1:"font-extrabold",h2:"font-bold",h3:"font-bold",h4:"font-bold",h5:"font-semibold",h6:"font-semibold",body1:"font-normal",body2:"font-normal",caption:"font-normal",overline:"font-bold"},j={normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold"},h={left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"},v=p[s],N=t?j[t]:b[s],k=h[o],$=[v,N,k,a||"text-gray-900",c?"truncate":"",d].filter(Boolean).join(" ");return e.jsx(g,{className:$,children:l})},H=P.forwardRef(({as:s,className:n="",children:l,...t},o)=>{const a=s||"div";return e.jsx(a,{ref:o,className:n,...t,children:l})});H.displayName="Box";const he=({label:s,error:n,autoResize:l,className:t="",rows:o=4,...a})=>{const d=c=>{l&&(c.target.style.height="auto",c.target.style.height=`${c.target.scrollHeight}px`),a.onChange?.(c)};return e.jsxs("div",{className:"flex flex-col gap-1.5 w-full",children:[s&&e.jsx("label",{className:"text-sm font-medium text-gray-700",children:s}),e.jsx("textarea",{className:`
|
|
25
|
+
w-full
|
|
26
|
+
px-3
|
|
27
|
+
py-2
|
|
28
|
+
bg-white
|
|
29
|
+
border
|
|
30
|
+
${n?"border-red-500":"border-gray-300"}
|
|
31
|
+
rounded-md
|
|
32
|
+
shadow-sm
|
|
33
|
+
focus:outline-none
|
|
34
|
+
focus:ring-2
|
|
35
|
+
${n?"focus:ring-red-500":"focus:ring-blue-500"}
|
|
36
|
+
focus:border-transparent
|
|
37
|
+
transition-all
|
|
38
|
+
duration-200
|
|
39
|
+
hover:border-gray-400
|
|
40
|
+
min-h-[100px]
|
|
41
|
+
resize-y
|
|
42
|
+
${t}
|
|
43
|
+
`,rows:o,onInput:d,...a}),n&&e.jsx("span",{className:"text-xs text-red-500",children:n})]})},fe=({sidebar:s,header:n,children:l,footer:t,sidebarWidth:o="260px",className:a=""})=>{const[d,c]=P.useState(!1);return e.jsxs("div",{className:`flex h-screen bg-gray-50 overflow-hidden ${a}`,children:[s&&e.jsx("div",{className:"hidden md:flex flex-col h-full bg-white border-r border-gray-200",style:{width:o},children:s}),s&&d&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50 md:hidden",onClick:()=>c(!1)}),s&&e.jsx("div",{className:`
|
|
44
|
+
fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transition-transform duration-300 md:hidden
|
|
45
|
+
${d?"translate-x-0":"-translate-x-full"}
|
|
46
|
+
`,children:s}),e.jsxs("div",{className:"flex flex-col flex-1 min-w-0 overflow-hidden",children:[e.jsxs("header",{className:"flex h-16 items-center border-b border-gray-200 bg-white px-4 shrink-0",children:[s&&e.jsx("button",{className:"mr-4 p-2 md:hidden text-gray-500 hover:bg-gray-100 rounded-md",onClick:()=>c(!0),children:e.jsx("svg",{className:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16m-7 6h7"})})}),e.jsx("div",{className:"flex-1 flex items-center justify-between",children:n||e.jsx("div",{className:"font-bold text-xl text-indigo-600",children:"OrbitUI"})})]}),e.jsx("main",{className:"flex-1 overflow-y-auto p-4 md:p-6 lg:p-8",children:l}),t&&e.jsx("footer",{className:"h-14 border-t border-gray-200 bg-white px-4 flex items-center shrink-0",children:t})]})]})},ge=({sidebar:s,header:n,children:l,footer:t,maxWidth:o="935px",className:a=""})=>e.jsxs("div",{className:`flex flex-col md:flex-row h-screen bg-white ${a}`,children:[s&&e.jsx("aside",{className:"hidden md:flex flex-col fixed left-0 h-screen border-r border-gray-200 transition-all duration-300 xl:w-64 w-20 z-50 bg-white",children:s}),e.jsxs("main",{className:`
|
|
47
|
+
flex-1 bg-white overflow-y-auto min-w-0
|
|
48
|
+
${s?"md:ml-20 xl:ml-64":""}
|
|
49
|
+
`,children:[n&&e.jsx("header",{className:"sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-gray-100 md:hidden",children:n}),e.jsx("div",{className:"mx-auto px-4 md:px-8 py-8",style:{maxWidth:o},children:l})]}),t&&e.jsx("nav",{className:"md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50",children:t})]}),pe=({list:s,header:n,children:l,footer:t,isChatActive:o=!1,onBack:a,listWidth:d="350px",className:c=""})=>e.jsxs("div",{className:`flex h-screen bg-white overflow-hidden ${c}`,children:[e.jsx("aside",{className:`
|
|
50
|
+
flex-shrink-0 border-r border-gray-200 bg-white transition-all duration-300
|
|
51
|
+
${o?"hidden md:flex":"flex w-full md:w-auto"}
|
|
52
|
+
`,style:{width:o?d:window.innerWidth<768?"100%":d},children:e.jsx("div",{className:"flex flex-col w-full h-full",children:s})}),e.jsxs("main",{className:`
|
|
53
|
+
flex-1 flex flex-col min-w-0 bg-white transition-all duration-300
|
|
54
|
+
${o?"flex w-full":"hidden md:flex"}
|
|
55
|
+
`,children:[(n||a)&&e.jsxs("header",{className:"flex h-16 items-center px-4 border-b border-gray-100 shrink-0 bg-white/80 backdrop-blur-md sticky top-0 z-10",children:[a&&e.jsx("button",{onClick:a,className:"mr-3 p-2 md:hidden text-gray-500 hover:bg-gray-100 rounded-full transition-colors","aria-label":"Go back",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:n})]}),e.jsx("div",{className:"flex-1 overflow-y-auto bg-gray-50",children:l}),t&&e.jsx("footer",{className:"p-4 bg-white border-t border-gray-100 shrink-0",children:t})]})]});exports.Alert=ue;exports.AppLayout=fe;exports.Box=H;exports.Button=y;exports.Card=ie;exports.Grid=q;exports.InboxLayout=pe;exports.Input=le;exports.Loader=de;exports.Post=ce;exports.SocialLayout=ge;exports.TextArea=he;exports.Typography=me;
|