@mahammad_devarakonda/orbitui-kit 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+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:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface AlertProps {
+    /**
+     * The type of the alert, determining its color and icon.
+     */
+    variant?: 'success' | 'error' | 'warning' | 'info';
+    /**
+     * Optional bold title at the start of the alert.
+     */
+    title?: string;
+    /**
+     * The main content of the alert.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional callback for closing the alert. If provided, a close button will appear.
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Alert/Alert.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './Alert';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const AllVariants: Story;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    className?: string;
+    isBordered?: boolean;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const WithStatus: Story;
+export declare const Fallback: Story;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface BadgeProps {
+    variant?: 'primary' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning';
+    size?: 'sm' | 'md' | 'lg';
+    rounded?: 'sm' | 'md' | 'full';
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const Rounded: Story;

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type BoxProps<T extends React.ElementType = 'div'> = {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     * @default 'div'
+     */
+    as?: T;
+    className?: string;
+    children?: React.ReactNode;
+} & React.ComponentPropsWithoutRef<T>;
+export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;

package/dist/components/Box/Box.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Box } from './Box';
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const SemanticElement: Story;
+export declare const Interactive: Story;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'ghost';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Danger: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface CardProps {
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+export declare const Card: React.FC<CardProps>;
+export {};

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const WithHeader: Story;
+export declare const FullFeatured: Story;

package/dist/components/Dialog/BaseDialog.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface BaseDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    showCloseButton?: boolean;
+}
+export declare const BaseDialog: React.FC<BaseDialogProps>;

package/dist/components/Dialog/BaseDialog.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BaseDialog } from './BaseDialog';
+declare const meta: Meta<typeof BaseDialog>;
+export default meta;
+type Story = StoryObj<typeof BaseDialog>;
+export declare const Default: Story;
+export declare const WithForm: Story;
+export declare const LargeSize: Story;

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export interface GridItemProps {
+    children?: React.ReactNode;
+    /** How many columns to span across. 1-12 or 'full' */
+    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full';
+    /** How many rows to span across. */
+    rowSpan?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Start position in grid */
+    colStart?: number | string;
+    /** Additional classes */
+    className?: string;
+}
+declare const GridItem: React.FC<GridItemProps>;
+export interface GridProps {
+    children: React.ReactNode;
+    /** Number of columns. 1-12 */
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Gap size (tailwind spacing scale) */
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Vertical Gap */
+    gapY?: number;
+    /** Horizontal Gap */
+    gapX?: number;
+    /** CSS Grid flow direction */
+    flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
+    /** Align items */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify items */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    className?: string;
+}
+export declare const Grid: React.FC<GridProps> & {
+    Item: typeof GridItem;
+};
+export {};

package/dist/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Grid } from './Grid';
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export declare const BasicGrid: Story;
+export declare const WithSpanning: Story;
+export declare const DashboardLayout: Story;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+export declare const Input: React.FC<InputProps>;

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input } from './Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithError: Story;
+export declare const Password: Story;
+export declare const WithIcons: Story;
+export declare const WithRightIcon: Story;

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface LoaderProps {
+    variant?: 'spinner' | 'dots' | 'pulse' | 'multicolor' | 'orbit';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+    colors?: string[];
+}
+export declare const Loader: React.FC<LoaderProps>;

package/dist/components/Loader/Loader.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Loader } from './Loader';
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof Loader>;
+export declare const SocialMediaMulticolor: Story;
+export declare const Dots: Story;
+export declare const Pulse: Story;
+export declare const Orbit: Story;
+export declare const AllVariants: Story;

package/dist/components/Post/Post.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface PostProps {
+    username: string;
+    profilePic: string;
+    postImage: string;
+    likesCount: number;
+    caption: string;
+    location?: string;
+    isLiked?: boolean;
+    isBookmarked?: boolean;
+    onLike?: () => void;
+    onComment?: () => void;
+    onShare?: () => void;
+    onBookmark?: () => void;
+}
+export declare const Post: React.FC<PostProps>;

package/dist/components/Post/Post.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Post } from './Post';
+declare const meta: Meta<typeof Post>;
+export default meta;
+type Story = StoryObj<typeof Post>;
+export declare const Default: Story;
+export declare const Liked: Story;
+export declare const Bookmarked: Story;
+export declare const NoLocation: Story;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface SkeletonProps {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Circular: Story;
+export declare const Rectangular: Story;
+export declare const PostLoadingExample: Story;

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface TypographyProps {
+    /** The visual style variation */
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption' | 'overline';
+    /** The semantic HTML element to render */
+    component?: React.ElementType;
+    children: React.ReactNode;
+    /** Font weight */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Text color class (e.g., text-gray-500) */
+    color?: string;
+    className?: string;
+    /** Truncate text with ellipsis if it overflows */
+    noWrap?: boolean;
+}
+export declare const Typography: React.FC<TypographyProps>;

package/dist/components/Typography/Typography.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from './Typography';
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+export declare const Default: Story;
+export declare const TypeScale: Story;
+export declare const BodyText: Story;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components/Button/Button';
+export * from './components/Input/Input';
+export * from './components/Card/Card';
+export * from './components/Post/Post';
+export * from './components/Loader/Loader';
+export * from './components/Alert/Alert';
+export * from './components/Grid/Grid';
+export * from './components/Typography/Typography';
+export * from './components/Box/Box';

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/orbitui.cjs.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react");var R={exports:{}},C={};var F;function ne(){if(F)return C;F=1;var n=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function l(t,o,i){var c=null;if(i!==void 0&&(c=""+i),o.key!==void 0&&(c=""+o.key),"key"in o){i={};for(var d in o)d!=="key"&&(i[d]=o[d])}else i=o;return o=i.ref,{$$typeof:n,type:t,key:c,ref:o!==void 0?o:null,props:i}}return C.Fragment=a,C.jsx=l,C.jsxs=l,C}var _={};var U;function oe(){return U||(U=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===re?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case M:return"Profiler";case L:return"StrictMode";case X:return"Suspense";case Q:return"SuspenseList";case ee:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case J:return e.displayName||"Context";case T:return(e._context.displayName||"Context")+".Consumer";case Z:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case K:return s=e.displayName||null,s!==null?s:n(e.type)||"Memo";case $:s=e._payload,e=e._init;try{return n(e(s))}catch{}}return null}function a(e){return""+e}function l(e){try{a(e);var s=!1}catch{s=!0}if(s){s=console;var u=s.error,x=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",x),a(e)}}function t(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===$)return"<...>";try{var s=n(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function o(){var e=S.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function c(e){if(z.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function d(e,s){function u(){B||(B=!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)",s))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function h(){var e=n(this.type);return W[e]||(W[e]=!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.")),e=this.props.ref,e!==void 0?e:null}function p(e,s,u,x,E,P){var m=u.ref;return e={$$typeof:v,type:e,key:s,props:u,_owner:x},(m!==void 0?m:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:h}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:E}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,s,u,x,E,P){var m=s.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(z.call(s,"key")){m=n(e);var w=Object.keys(s).filter(function(se){return se!=="key"});x=0<w.length?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}",Y[m+x]||(w=0<w.length?"{"+w.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,x,m,w,m),Y[m+x]=!0)}if(m=null,u!==void 0&&(l(u),m=""+u),c(s)&&(l(s.key),m=""+s.key),"key"in s){u={};for(var O in s)O!=="key"&&(u[O]=s[O])}else u=s;return m&&d(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,m,u,o(),E,P)}function b(e){j(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===$&&(e._payload.status==="fulfilled"?j(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function j(e){return typeof e=="object"&&e!==null&&e.$$typeof===v}var f=G,v=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),L=Symbol.for("react.strict_mode"),M=Symbol.for("react.profiler"),T=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"),$=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),re=Symbol.for("react.client.reference"),S=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,te=Array.isArray,A=console.createTask?console.createTask:function(){return null};f={react_stack_bottom_frame:function(e){return e()}};var B,W={},D=f.react_stack_bottom_frame.bind(f,i)(),I=A(t(i)),Y={};_.Fragment=N,_.jsx=function(e,s,u){var x=1e4>S.recentlyCreatedOwnerStacks++;return g(e,s,u,!1,x?Error("react-stack-top-frame"):D,x?A(t(e)):I)},_.jsxs=function(e,s,u){var x=1e4>S.recentlyCreatedOwnerStacks++;return g(e,s,u,!0,x?Error("react-stack-top-frame"):D,x?A(t(e)):I)}})()),_}var V;function ae(){return V||(V=1,process.env.NODE_ENV==="production"?R.exports=ne():R.exports=oe()),R.exports}var r=ae();const y=({variant:n="primary",size:a="md",rounded:l="full",isLoading:t=!1,fullWidth:o=!1,leftIcon:i,rightIcon:c,className:d="",children:h,disabled:p,...g})=>{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"},f={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"},k=o?"w-full":"";return r.jsxs("button",{className:`${b} ${j[n]} ${f[a]} ${v[l]} ${k} ${d}`,disabled:p||t,...g,children:[t&&r.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:[r.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r.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&&i&&r.jsx("span",{className:"shrink-0",children:i}),r.jsx("span",{className:"truncate",children:t?"Loading...":h}),!t&&c&&r.jsx("span",{className:"shrink-0",children:c})]})},le=({label:n,error:a,leftIcon:l,rightIcon:t,className:o="",...i})=>r.jsxs("div",{className:"flex flex-col gap-1.5 w-full",children:[n&&r.jsx("label",{className:"text-sm font-medium text-gray-700",children:n}),r.jsxs("div",{className:"relative",children:[l&&r.jsx("div",{className:"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400",children:l}),r.jsx("input",{className:`
+                        w-full 
+                        ${l?"pl-10":"px-3"} 
+                        ${t?"pr-10":"px-3"} 
+                        py-2 
+                        bg-white 
+                        border 
+                        ${a?"border-red-500":"border-gray-300"} 
+                        rounded-md 
+                        shadow-sm 
+                        focus:outline-none 
+                        focus:ring-2 
+                        ${a?"focus:ring-red-500":"focus:ring-blue-500"} 
+                        focus:border-transparent 
+                        transition-all 
+                        duration-200 
+                        hover:border-gray-400 
+                        ${o}
+                    `,...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;