From 9053518d3ef529e4b66e58dc6c03ac80dc762907 Mon Sep 17 00:00:00 2001 From: Bipin Prajapati Date: Sat, 18 Jul 2026 11:24:05 +0530 Subject: [PATCH 1/3] new block's and component's added --- README.md | 283 ++- package-lock.json | 1715 +++-------------- package.json | 2 +- src/category-counts.json | 40 +- src/components-grid.ts | 25 + .../uiable/avatar/avatar-border-radius.tsx | 42 + .../avatar/avatar-counter-indicator.tsx | 48 + .../uiable/avatar/avatar-fallback.tsx | 31 + .../uiable/avatar/avatar-placeholder-icon.tsx | 34 + src/components/uiable/badge/badge-avatar.tsx | 40 + .../uiable/badge/badge-gradient.tsx | 26 + src/components/uiable/badge/badge-sizes.tsx | 15 + src/components/uiable/badge/badge-status.tsx | 43 + .../blocks/feature/feature-1/feature-1.tsx | 102 + .../blocks/feature/feature-2/feature-2.tsx | 106 + .../blocks/footer/footer-1/footer-1.tsx | 302 +++ .../blocks/footer/footer-2/footer-2.tsx | 258 +++ .../blocks/footer/footer-3/footer-3.tsx | 177 ++ .../blocks/gallery/gallery-1/gallery-1.tsx | 132 ++ .../blocks/gallery/gallery-2/gallery-2.tsx | 98 + .../blocks/gallery/gallery-3/gallery-3.tsx | 171 ++ .../blocks/gallery/gallery-4/gallery-4.tsx | 116 ++ .../uiable/blocks/hero/hero-1/hero-1.tsx | 192 ++ .../uiable/blocks/hero/hero-2/hero-2.tsx | 368 ++++ .../uiable/blocks/landing/footer/footer.tsx | 2 +- .../portfolio/portfolio-1/portfolio-1.tsx | 83 + .../portfolio/portfolio-2/portfolio-2.tsx | 107 + .../portfolio/portfolio-3/portfolio-3.tsx | 135 ++ .../portfolio/portfolio-4/portfolio-4.tsx | 111 ++ src/components/uiable/blocks/registry.json | 285 +++ .../calendar/calendar-right-navigation.tsx | 72 + .../uiable/card/card-animated-flip.tsx | 212 ++ .../uiable/card/card-animated-tilt.tsx | 164 ++ src/components/uiable/card/card-product.tsx | 135 ++ src/components/uiable/card/card-tabs.tsx | 238 +++ src/components/uiable/registry.json | 638 ++++++ .../uiable/select/select-clearable.tsx | 79 + .../uiable/select/select-with-icons.tsx | 89 + .../uiable/select/select-with-status.tsx | 84 + .../uiable/select/select-with-users.tsx | 115 ++ .../uiable/slider/slider-color-options.tsx | 90 + .../uiable/switch/switch-color-options.tsx | 87 + .../uiable/switch/switch-outline.tsx | 87 + .../uiable/switch/switch-square.tsx | 65 + .../uiable/switch/switch-toggle-theme.tsx | 54 + .../textarea/textarea-character-count.tsx | 35 + .../uiable/textarea/textarea-feedback.tsx | 30 + .../uiable/textarea/textarea-helper-text.tsx | 23 + .../uiable/textarea/textarea-readonly.tsx | 26 + .../toggle-group/toggle-group-filled-icon.tsx | 90 + .../uiable/toggle/toggle-animated.tsx | 155 ++ src/components/uiable/toggle/toggle-icon.tsx | 81 + 52 files changed, 6157 insertions(+), 1581 deletions(-) create mode 100644 src/components/uiable/avatar/avatar-border-radius.tsx create mode 100644 src/components/uiable/avatar/avatar-counter-indicator.tsx create mode 100644 src/components/uiable/avatar/avatar-fallback.tsx create mode 100644 src/components/uiable/avatar/avatar-placeholder-icon.tsx create mode 100644 src/components/uiable/badge/badge-avatar.tsx create mode 100644 src/components/uiable/badge/badge-gradient.tsx create mode 100644 src/components/uiable/badge/badge-sizes.tsx create mode 100644 src/components/uiable/badge/badge-status.tsx create mode 100644 src/components/uiable/blocks/feature/feature-1/feature-1.tsx create mode 100644 src/components/uiable/blocks/feature/feature-2/feature-2.tsx create mode 100644 src/components/uiable/blocks/footer/footer-1/footer-1.tsx create mode 100644 src/components/uiable/blocks/footer/footer-2/footer-2.tsx create mode 100644 src/components/uiable/blocks/footer/footer-3/footer-3.tsx create mode 100644 src/components/uiable/blocks/gallery/gallery-1/gallery-1.tsx create mode 100644 src/components/uiable/blocks/gallery/gallery-2/gallery-2.tsx create mode 100644 src/components/uiable/blocks/gallery/gallery-3/gallery-3.tsx create mode 100644 src/components/uiable/blocks/gallery/gallery-4/gallery-4.tsx create mode 100644 src/components/uiable/blocks/hero/hero-1/hero-1.tsx create mode 100644 src/components/uiable/blocks/hero/hero-2/hero-2.tsx create mode 100644 src/components/uiable/blocks/portfolio/portfolio-1/portfolio-1.tsx create mode 100644 src/components/uiable/blocks/portfolio/portfolio-2/portfolio-2.tsx create mode 100644 src/components/uiable/blocks/portfolio/portfolio-3/portfolio-3.tsx create mode 100644 src/components/uiable/blocks/portfolio/portfolio-4/portfolio-4.tsx create mode 100644 src/components/uiable/calendar/calendar-right-navigation.tsx create mode 100644 src/components/uiable/card/card-animated-flip.tsx create mode 100644 src/components/uiable/card/card-animated-tilt.tsx create mode 100644 src/components/uiable/card/card-product.tsx create mode 100644 src/components/uiable/card/card-tabs.tsx create mode 100644 src/components/uiable/select/select-clearable.tsx create mode 100644 src/components/uiable/select/select-with-icons.tsx create mode 100644 src/components/uiable/select/select-with-status.tsx create mode 100644 src/components/uiable/select/select-with-users.tsx create mode 100644 src/components/uiable/slider/slider-color-options.tsx create mode 100644 src/components/uiable/switch/switch-color-options.tsx create mode 100644 src/components/uiable/switch/switch-outline.tsx create mode 100644 src/components/uiable/switch/switch-square.tsx create mode 100644 src/components/uiable/switch/switch-toggle-theme.tsx create mode 100644 src/components/uiable/textarea/textarea-character-count.tsx create mode 100644 src/components/uiable/textarea/textarea-feedback.tsx create mode 100644 src/components/uiable/textarea/textarea-helper-text.tsx create mode 100644 src/components/uiable/textarea/textarea-readonly.tsx create mode 100644 src/components/uiable/toggle-group/toggle-group-filled-icon.tsx create mode 100644 src/components/uiable/toggle/toggle-animated.tsx create mode 100644 src/components/uiable/toggle/toggle-icon.tsx diff --git a/README.md b/README.md index 5eadc0b..37c7f15 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,22 @@ -
+

UIAble

+

A modern UI component library built with Tailwind CSS and Shadcn architecture.

- A modern UI component library built with Tailwind CSS and Shadcn architecture. + React + Next.js + Tailwind CSS + shadcn/ui + Base UI + TypeScript Ready +
+ Discord + X

-

- React - Next.js - Tailwind CSS - shadcn/ui - Base UI - TypeScript Ready -
- Discord - X -

- UIAble is an open-source collection of reusable UI components designed for developers who want clean, practical, and fully customizable building blocks for modern frontend projects, without lock-in, without unnecessary abstraction, and without rebuilding the same UI patterns from scratch every time. -![Uiable Banner](public/assets/images/banner/free-version-banner.gif) +![UIAble Banner](public/assets/images/banner/free-version-banner.gif) --- @@ -79,76 +76,222 @@ The entire component library is transparent and open for contribution. No gated ## Components -UIAble v1.0 ships with the following components: + ### Form Controls -- `Button` -- `Button Group` -- `Checkbox` -- `Combobox` -- `Command Palette` -- `Date Picker` -- `Input` -- `Input Group` -- `Input OTP` -- `Native Select` -- `Radio` -- `Radio Group` -- `Select` -- `Slider` -- `Switch` -- `Textarea` -- `Toggle` -- `Toggle Group` +
+ Button + Button Group + Checkbox + Combobox + Command Palette + Date Picker + Input + Input Group + Input OTP + Native Select + Radio + Radio Group + Select + Slider + Switch + Textarea + Toggle + Toggle Group +
### Data Display -- `Avatar` -- `Badge` -- `Card` -- `Carousel` -- `Chart` -- `Data Table` -- `Empty State` -- `Hover Card` -- `KBD` -- `Label` -- `List Group` -- `Table` -- `Tooltip` -- `Skeleton` -- `Calendar` +
+ Avatar + Badge + Card + Carousel + Chart + Data Table + Empty State + Hover Card + KBD + Label + List Group + Table + Tooltip + Skeleton + Calendar +
### Feedback & Overlays -- `Alert` -- `Alert Dialog` -- `Dialog` -- `Drawer` -- `Progress` -- `Sheet` -- `Sonner` -- `Spinner` +
+ Alert + Alert Dialog + Dialog + Drawer + Progress + Sheet + Sonner + Spinner +
### Navigation -- `Breadcrumb` -- `Dropdown Menu` -- `Menubar` -- `Navbar` -- `Navigation Menu` -- `Pagination` -- `Tabs` -- `Sidebar` +
+ Breadcrumb + Dropdown Menu + Menubar + Navbar + Navigation Menu + Pagination + Tabs + Sidebar +
### Layout & Interaction -- `Accordion` -- `Collapsible` -- `Context Menu` -- `Item` -- `Popover` +
+ Accordion + Collapsible + Context Menu + Item + Popover +
+ +### Other Components + +
+ Aspect Ratio + Attachment + Bubble + Command + Empty + Field + Marker + Message + Message Scroller + Resizable + Scroll Area + Separator + Typography +
+ +--- + +## Blocks + +Pre-built page sections ready to drop into your project. + +### Contact + +
+ Contact 1 +
+ +### Content + +
+ Content 1 +
+ +### CTA + +
+ Call To Action 1 + Call To Action 2 +
+ +### Faq + +
+ FAQ 1 +
+ +### Feature + +
+ Feature 1 + Feature 2 +
+ +### Footer + +
+ Footer 1 + Footer 2 + Footer 3 +
+ +### Gallery + +
+ Gallery 1 + Gallery 2 + Gallery 3 + Gallery 4 +
+ +### Hero + +
+ Hero 1 + Hero 2 +
+ +### Portfolio + +
+ Portfolio 1 + Portfolio 2 + Portfolio 3 + Portfolio 4 +
+ +### Landing + +
+ Landing Header + Hero + Component 1 + Component 2 + Feature + Contact + Footer +
+ +### Portfolio + +
+ Portfolio 1 + Portfolio 2 + Portfolio 3 + Portfolio 4 +
> Components are added based on practical frontend needs, not trend-driven requests. If you need something that isn't here, open a discussion or a PR. diff --git a/package-lock.json b/package-lock.json index 714fcc0..8251b22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "UIAble", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "UIAble", - "version": "1.2.0", + "version": "1.3.0", "dependencies": { "@ai-sdk/react": "4.0.19", "@base-ui/react": "1.6.0", @@ -1275,743 +1275,194 @@ "node": ">=18" } }, - "node_modules/@img/sharp-darwin-arm64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", - "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==", - "cpu": [ - "arm64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-darwin-arm64": "1.2.4" - } - }, - "node_modules/@img/sharp-darwin-x64": { + "node_modules/@img/sharp-win32-x64": { "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", - "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", + "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==", "cpu": [ "x64" ], - "license": "Apache-2.0", + "license": "Apache-2.0 AND LGPL-3.0-or-later", "optional": true, "os": [ - "darwin" + "win32" ], "engines": { "node": "^18.17.0 || ^20.3.0 || >=21.0.0" }, "funding": { "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-darwin-x64": "1.2.4" } }, - "node_modules/@img/sharp-libvips-darwin-arm64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", - "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==", - "cpu": [ - "arm64" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "darwin" - ], - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" } }, - "node_modules/@img/sharp-libvips-darwin-x64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", - "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==", - "cpu": [ - "x64" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "darwin" - ], - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" } }, - "node_modules/@img/sharp-libvips-linux-arm": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", - "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==", - "cpu": [ - "arm" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "linux" - ], - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "license": "MIT", + "engines": { + "node": ">=6.0.0" } }, - "node_modules/@img/sharp-libvips-linux-arm64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", - "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==", - "cpu": [ - "arm64" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "linux" - ], - "funding": { - "url": "https://opencollective.com/libvips" - } + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "license": "MIT" }, - "node_modules/@img/sharp-libvips-linux-ppc64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", - "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==", - "cpu": [ - "ppc64" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "linux" - ], - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@img/sharp-libvips-linux-riscv64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", - "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==", - "cpu": [ - "riscv64" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "linux" - ], - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@modelcontextprotocol/sdk": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz", + "integrity": "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==", + "license": "MIT", + "dependencies": { + "@hono/node-server": "^1.19.9", + "ajv": "^8.17.1", + "ajv-formats": "^3.0.1", + "content-type": "^1.0.5", + "cors": "^2.8.5", + "cross-spawn": "^7.0.5", + "eventsource": "^3.0.2", + "eventsource-parser": "^3.0.0", + "express": "^5.2.1", + "express-rate-limit": "^8.2.1", + "hono": "^4.11.4", + "jose": "^6.1.3", + "json-schema-typed": "^8.0.2", + "pkce-challenge": "^5.0.0", + "raw-body": "^3.0.0", + "zod": "^3.25 || ^4.0", + "zod-to-json-schema": "^3.25.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@cfworker/json-schema": "^4.1.1", + "zod": "^3.25 || ^4.0" + }, + "peerDependenciesMeta": { + "@cfworker/json-schema": { + "optional": true + }, + "zod": { + "optional": false + } } }, - "node_modules/@img/sharp-libvips-linux-s390x": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", - "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==", - "cpu": [ - "s390x" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "linux" - ], + "node_modules/@modelcontextprotocol/sdk/node_modules/ajv": { + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz", + "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==", + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "fast-uri": "^3.0.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2" + }, "funding": { - "url": "https://opencollective.com/libvips" + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" } }, - "node_modules/@img/sharp-libvips-linux-x64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", - "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==", - "cpu": [ - "x64" - ], - "license": "LGPL-3.0-or-later", + "node_modules/@modelcontextprotocol/sdk/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "license": "MIT" + }, + "node_modules/@napi-rs/wasm-runtime": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz", + "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==", + "dev": true, + "license": "MIT", "optional": true, - "os": [ - "linux" - ], + "dependencies": { + "@tybys/wasm-util": "^0.10.3" + }, "funding": { - "url": "https://opencollective.com/libvips" + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "peerDependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1" } }, - "node_modules/@img/sharp-libvips-linuxmusl-arm64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", - "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==", - "cpu": [ - "arm64" - ], - "license": "LGPL-3.0-or-later", - "optional": true, - "os": [ - "linux" - ], - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@next/env": { + "version": "16.2.10", + "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.10.tgz", + "integrity": "sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==", + "license": "MIT" + }, + "node_modules/@next/eslint-plugin-next": { + "version": "16.2.10", + "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.10.tgz", + "integrity": "sha512-Gs8D2m21VnJeFo9qvYIIqJH94frWerWYu41BprU1pLtRVF7PCQNLiFZZ3fG+iPuj3K83Cwv/rt+msLOy8Qgu3Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-glob": "3.3.1" } }, - "node_modules/@img/sharp-libvips-linuxmusl-x64": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", - "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==", + "node_modules/@next/swc-win32-x64-msvc": { + "version": "16.2.10", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.10.tgz", + "integrity": "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==", "cpu": [ "x64" ], - "license": "LGPL-3.0-or-later", + "license": "MIT", "optional": true, "os": [ - "linux" + "win32" ], - "funding": { - "url": "https://opencollective.com/libvips" + "engines": { + "node": ">= 10" } }, - "node_modules/@img/sharp-linux-arm": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", - "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==", - "cpu": [ - "arm" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" }, - "optionalDependencies": { - "@img/sharp-libvips-linux-arm": "1.2.4" - } - }, - "node_modules/@img/sharp-linux-arm64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", - "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==", - "cpu": [ - "arm64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linux-arm64": "1.2.4" - } - }, - "node_modules/@img/sharp-linux-ppc64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", - "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==", - "cpu": [ - "ppc64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linux-ppc64": "1.2.4" - } - }, - "node_modules/@img/sharp-linux-riscv64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", - "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==", - "cpu": [ - "riscv64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linux-riscv64": "1.2.4" - } - }, - "node_modules/@img/sharp-linux-s390x": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", - "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==", - "cpu": [ - "s390x" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linux-s390x": "1.2.4" - } - }, - "node_modules/@img/sharp-linux-x64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", - "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==", - "cpu": [ - "x64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linux-x64": "1.2.4" - } - }, - "node_modules/@img/sharp-linuxmusl-arm64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", - "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==", - "cpu": [ - "arm64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" - } - }, - "node_modules/@img/sharp-linuxmusl-x64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", - "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==", - "cpu": [ - "x64" - ], - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - }, - "optionalDependencies": { - "@img/sharp-libvips-linuxmusl-x64": "1.2.4" - } - }, - "node_modules/@img/sharp-wasm32": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", - "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==", - "cpu": [ - "wasm32" - ], - "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", - "optional": true, - "dependencies": { - "@emnapi/runtime": "^1.7.0" - }, - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - } - }, - "node_modules/@img/sharp-win32-arm64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", - "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==", - "cpu": [ - "arm64" - ], - "license": "Apache-2.0 AND LGPL-3.0-or-later", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - } - }, - "node_modules/@img/sharp-win32-ia32": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", - "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==", - "cpu": [ - "ia32" - ], - "license": "Apache-2.0 AND LGPL-3.0-or-later", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - } - }, - "node_modules/@img/sharp-win32-x64": { - "version": "0.34.5", - "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", - "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==", - "cpu": [ - "x64" - ], - "license": "Apache-2.0 AND LGPL-3.0-or-later", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^18.17.0 || ^20.3.0 || >=21.0.0" - }, - "funding": { - "url": "https://opencollective.com/libvips" - } - }, - "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.13", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", - "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", - "license": "MIT", - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.5.0", - "@jridgewell/trace-mapping": "^0.3.24" - } - }, - "node_modules/@jridgewell/remapping": { - "version": "2.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", - "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", - "license": "MIT", - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.5", - "@jridgewell/trace-mapping": "^0.3.24" - } - }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "license": "MIT", - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.5.5", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", - "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", - "license": "MIT" - }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.31", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", - "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", - "license": "MIT", - "dependencies": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" - } - }, - "node_modules/@modelcontextprotocol/sdk": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz", - "integrity": "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==", - "license": "MIT", - "dependencies": { - "@hono/node-server": "^1.19.9", - "ajv": "^8.17.1", - "ajv-formats": "^3.0.1", - "content-type": "^1.0.5", - "cors": "^2.8.5", - "cross-spawn": "^7.0.5", - "eventsource": "^3.0.2", - "eventsource-parser": "^3.0.0", - "express": "^5.2.1", - "express-rate-limit": "^8.2.1", - "hono": "^4.11.4", - "jose": "^6.1.3", - "json-schema-typed": "^8.0.2", - "pkce-challenge": "^5.0.0", - "raw-body": "^3.0.0", - "zod": "^3.25 || ^4.0", - "zod-to-json-schema": "^3.25.1" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@cfworker/json-schema": "^4.1.1", - "zod": "^3.25 || ^4.0" - }, - "peerDependenciesMeta": { - "@cfworker/json-schema": { - "optional": true - }, - "zod": { - "optional": false - } - } - }, - "node_modules/@modelcontextprotocol/sdk/node_modules/ajv": { - "version": "8.20.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz", - "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==", - "license": "MIT", - "dependencies": { - "fast-deep-equal": "^3.1.3", - "fast-uri": "^3.0.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/@modelcontextprotocol/sdk/node_modules/json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "license": "MIT" - }, - "node_modules/@napi-rs/wasm-runtime": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz", - "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "@tybys/wasm-util": "^0.10.3" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/Brooooooklyn" - }, - "peerDependencies": { - "@emnapi/core": "^1.7.1", - "@emnapi/runtime": "^1.7.1" - } - }, - "node_modules/@next/env": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.10.tgz", - "integrity": "sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==", - "license": "MIT" - }, - "node_modules/@next/eslint-plugin-next": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.10.tgz", - "integrity": "sha512-Gs8D2m21VnJeFo9qvYIIqJH94frWerWYu41BprU1pLtRVF7PCQNLiFZZ3fG+iPuj3K83Cwv/rt+msLOy8Qgu3Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "fast-glob": "3.3.1" - } - }, - "node_modules/@next/swc-darwin-arm64": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.10.tgz", - "integrity": "sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-darwin-x64": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.10.tgz", - "integrity": "sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.10.tgz", - "integrity": "sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.10.tgz", - "integrity": "sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.10.tgz", - "integrity": "sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.10.tgz", - "integrity": "sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.10.tgz", - "integrity": "sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA==", - "cpu": [ - "arm64" - ], - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-x64-msvc": { - "version": "16.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.10.tgz", - "integrity": "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==", - "cpu": [ - "x64" - ], - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@nodelib/fs.scandir": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", - "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", - "license": "MIT", - "dependencies": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" - }, - "engines": { - "node": ">= 8" + "engines": { + "node": ">= 8" } }, "node_modules/@nodelib/fs.stat": { @@ -2606,220 +2057,20 @@ "license": "MIT", "engines": { "node": ">= 20" - }, - "optionalDependencies": { - "@tailwindcss/oxide-android-arm64": "4.3.2", - "@tailwindcss/oxide-darwin-arm64": "4.3.2", - "@tailwindcss/oxide-darwin-x64": "4.3.2", - "@tailwindcss/oxide-freebsd-x64": "4.3.2", - "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2", - "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2", - "@tailwindcss/oxide-linux-arm64-musl": "4.3.2", - "@tailwindcss/oxide-linux-x64-gnu": "4.3.2", - "@tailwindcss/oxide-linux-x64-musl": "4.3.2", - "@tailwindcss/oxide-wasm32-wasi": "4.3.2", - "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2", - "@tailwindcss/oxide-win32-x64-msvc": "4.3.2" - } - }, - "node_modules/@tailwindcss/oxide-android-arm64": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz", - "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-darwin-arm64": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz", - "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-darwin-x64": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz", - "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-freebsd-x64": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz", - "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz", - "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz", - "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-linux-arm64-musl": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz", - "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-linux-x64-gnu": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz", - "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-linux-x64-musl": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz", - "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 20" - } - }, - "node_modules/@tailwindcss/oxide-wasm32-wasi": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz", - "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==", - "bundleDependencies": [ - "@napi-rs/wasm-runtime", - "@emnapi/core", - "@emnapi/runtime", - "@tybys/wasm-util", - "@emnapi/wasi-threads", - "tslib" - ], - "cpu": [ - "wasm32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "@emnapi/core": "^1.11.1", - "@emnapi/runtime": "^1.11.1", - "@emnapi/wasi-threads": "^1.2.2", - "@napi-rs/wasm-runtime": "^1.1.4", - "@tybys/wasm-util": "^0.10.2", - "tslib": "^2.8.1" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz", - "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.2", + "@tailwindcss/oxide-darwin-arm64": "4.3.2", + "@tailwindcss/oxide-darwin-x64": "4.3.2", + "@tailwindcss/oxide-freebsd-x64": "4.3.2", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.2", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.2", + "@tailwindcss/oxide-linux-x64-musl": "4.3.2", + "@tailwindcss/oxide-wasm32-wasi": "4.3.2", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.2" } }, "node_modules/@tailwindcss/oxide-win32-x64-msvc": { @@ -3334,395 +2585,85 @@ }, "engines": { "node": "18 || 20 || >=22" - } - }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { - "version": "10.2.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", - "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==", - "dev": true, - "license": "BlueOak-1.0.0", - "dependencies": { - "brace-expansion": "^5.0.5" - }, - "engines": { - "node": "18 || 20 || >=22" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/@typescript-eslint/utils": { - "version": "8.63.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.63.0.tgz", - "integrity": "sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@eslint-community/eslint-utils": "^4.9.1", - "@typescript-eslint/scope-manager": "8.63.0", - "@typescript-eslint/types": "8.63.0", - "@typescript-eslint/typescript-estree": "8.63.0" - }, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", - "typescript": ">=4.8.4 <6.1.0" - } - }, - "node_modules/@typescript-eslint/visitor-keys": { - "version": "8.63.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.63.0.tgz", - "integrity": "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@typescript-eslint/types": "8.63.0", - "eslint-visitor-keys": "^5.0.0" - }, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz", - "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "^20.19.0 || ^22.13.0 || >=24" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/@ungap/structured-clone": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.3.tgz", - "integrity": "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==", - "dev": true, - "license": "ISC" - }, - "node_modules/@unrs/resolver-binding-android-arm-eabi": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz", - "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@unrs/resolver-binding-android-arm64": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz", - "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@unrs/resolver-binding-darwin-arm64": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.12.2.tgz", - "integrity": "sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@unrs/resolver-binding-darwin-x64": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz", - "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@unrs/resolver-binding-freebsd-x64": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz", - "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz", - "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz", - "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-arm64-gnu": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz", - "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-arm64-musl": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz", - "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-loong64-gnu": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz", - "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-loong64-musl": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz", - "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz", - "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz", - "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-riscv64-musl": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz", - "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-s390x-gnu": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz", - "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-x64-gnu": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz", - "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-linux-x64-musl": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz", - "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@unrs/resolver-binding-openharmony-arm64": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz", - "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==", - "cpu": [ - "arm64" - ], + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "10.2.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz", + "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==", "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openharmony" - ] + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.5" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } }, - "node_modules/@unrs/resolver-binding-wasm32-wasi": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz", - "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==", - "cpu": [ - "wasm32" - ], + "node_modules/@typescript-eslint/utils": { + "version": "8.63.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.63.0.tgz", + "integrity": "sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA==", "dev": true, "license": "MIT", - "optional": true, "dependencies": { - "@emnapi/core": "1.10.0", - "@emnapi/runtime": "1.10.0", - "@napi-rs/wasm-runtime": "^1.1.4" + "@eslint-community/eslint-utils": "^4.9.1", + "@typescript-eslint/scope-manager": "8.63.0", + "@typescript-eslint/types": "8.63.0", + "@typescript-eslint/typescript-estree": "8.63.0" }, "engines": { - "node": ">=14.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", + "typescript": ">=4.8.4 <6.1.0" } }, - "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", - "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==", + "node_modules/@typescript-eslint/visitor-keys": { + "version": "8.63.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.63.0.tgz", + "integrity": "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw==", "dev": true, "license": "MIT", - "optional": true, "dependencies": { - "tslib": "^2.4.0" + "@typescript-eslint/types": "8.63.0", + "eslint-visitor-keys": "^5.0.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@unrs/resolver-binding-win32-arm64-msvc": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz", - "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==", - "cpu": [ - "arm64" - ], + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz", + "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==", "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] + "license": "Apache-2.0", + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } }, - "node_modules/@unrs/resolver-binding-win32-ia32-msvc": { - "version": "1.12.2", - "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz", - "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==", - "cpu": [ - "ia32" - ], + "node_modules/@ungap/structured-clone": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.3.tgz", + "integrity": "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==", "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] + "license": "ISC" }, "node_modules/@unrs/resolver-binding-win32-x64-msvc": { "version": "1.12.2", @@ -7843,216 +6784,6 @@ "lightningcss-win32-x64-msvc": "1.32.0" } }, - "node_modules/lightningcss-android-arm64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", - "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-arm64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", - "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-x64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", - "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-freebsd-x64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", - "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm-gnueabihf": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", - "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-gnu": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", - "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-musl": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", - "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-gnu": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", - "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-musl": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", - "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-arm64-msvc": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", - "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/lightningcss-win32-x64-msvc": { "version": "1.32.0", "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", diff --git a/package.json b/package.json index 867464a..d93f3c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "UIAble", - "version": "1.2.0", + "version": "1.3.0", "private": true, "scripts": { "dev": "next dev", diff --git a/src/category-counts.json b/src/category-counts.json index 0c98c4e..187b657 100644 --- a/src/category-counts.json +++ b/src/category-counts.json @@ -3,15 +3,13 @@ "alert": 32, "alert-dialog": 5, "aspect-ratio": 2, - "attachment": 5, - "avatar": 8, - "badge": 32, + "avatar": 12, + "badge": 36, "breadcrumb": 8, "button": 46, "button-group": 14, - "bubble": 8, - "calendar": 10, - "card": 18, + "calendar": 11, + "card": 22, "carousel": 6, "chart": 6, "checkbox": 11, @@ -32,9 +30,6 @@ "item": 15, "kbd": 4, "list-group": 10, - "marker": 7, - "message": 5, - "message-scroller": 9, "menubar": 4, "native-select": 3, "pagination": 7, @@ -43,28 +38,39 @@ "radio": 1, "radio-group": 9, "resizable": 2, - "select": 5, + "select": 9, "separator": 3, "sheet": 2, "sidebar": 3, "skeleton": 5, - "slider": 5, + "slider": 6, "sonner": 3, "spinner": 22, - "switch": 5, + "switch": 9, "table": 2, "tabs": 7, - "textarea": 4, - "toggle": 4, - "toggle-group": 6, + "textarea": 8, + "toggle": 6, + "toggle-group": 7, "tooltip": 3, "typography": 15, "navigation-menu": 1, "label": 1, "scroll-area": 1, "data-table": 1, + "attachment": 5, + "bubble": 8, + "marker": 7, + "message": 5, + "message-scroller": 9, + "landing": 7, "cta": 2, "contact": 1, "content": 1, - "faq": 1 -} + "faq": 1, + "feature": 2, + "footer": 3, + "gallery": 4, + "hero": 2, + "portfolio": 4 +} \ No newline at end of file diff --git a/src/components-grid.ts b/src/components-grid.ts index 3ad51c5..4f080af 100644 --- a/src/components-grid.ts +++ b/src/components-grid.ts @@ -350,6 +350,31 @@ export const NAV_BLOCKS: NavSection[] = [ slug: "faq", breakpoints: { xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }, }, + { + title: "Feature", + slug: "feature", + breakpoints: { xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }, + }, + { + title: "Footer", + slug: "footer", + breakpoints: { xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }, + }, + { + title: "Gallery", + slug: "gallery", + breakpoints: { xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }, + }, + { + title: "Hero", + slug: "hero", + breakpoints: { xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }, + }, + { + title: "Portfolio", + slug: "portfolio", + breakpoints: { xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }, + }, ], }, ] diff --git a/src/components/uiable/avatar/avatar-border-radius.tsx b/src/components/uiable/avatar/avatar-border-radius.tsx new file mode 100644 index 0000000..6730e1f --- /dev/null +++ b/src/components/uiable/avatar/avatar-border-radius.tsx @@ -0,0 +1,42 @@ +// shadcn +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" + +// ------------------------------ | AVATAR - BORDER RADIUS | ------------------------------ // + +export function AvatarBorderRadius() { + return ( +
+ + + PP + + + + ER + + + + ML + + + + CN + +
+ ) +} diff --git a/src/components/uiable/avatar/avatar-counter-indicator.tsx b/src/components/uiable/avatar/avatar-counter-indicator.tsx new file mode 100644 index 0000000..1cdcb25 --- /dev/null +++ b/src/components/uiable/avatar/avatar-counter-indicator.tsx @@ -0,0 +1,48 @@ +// shadcn +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" + +// ------------------------------ | AVATAR - COUNTER INDICATOR | ------------------------------ // + +export function AvatarCounterIndicator() { + return ( +
+
+ + + CN + + + 3 + +
+
+ + + AL + + + 12 + +
+
+ + + SR + + + 99+ + +
+
+ ) +} diff --git a/src/components/uiable/avatar/avatar-fallback.tsx b/src/components/uiable/avatar/avatar-fallback.tsx new file mode 100644 index 0000000..2e001d8 --- /dev/null +++ b/src/components/uiable/avatar/avatar-fallback.tsx @@ -0,0 +1,31 @@ +// shadcn +import { Avatar, AvatarFallback } from "@/components/ui/avatar" + +// ------------------------------ | AVATAR - FALLBACK | ------------------------------ // + +export function AvatarFallbackDemo() { + return ( +
+ + + AB + + + + + JD + + + + + MK + + + + + ST + + +
+ ) +} diff --git a/src/components/uiable/avatar/avatar-placeholder-icon.tsx b/src/components/uiable/avatar/avatar-placeholder-icon.tsx new file mode 100644 index 0000000..54d1c95 --- /dev/null +++ b/src/components/uiable/avatar/avatar-placeholder-icon.tsx @@ -0,0 +1,34 @@ +// assets +import { BotIcon, BuildingIcon, SparklesIcon, UserIcon } from "lucide-react" + +// shadcn +import { Avatar, AvatarFallback } from "@/components/ui/avatar" + +// ------------------------------ | AVATAR - PLACEHOLDER ICON | ------------------------------ // + +export function AvatarPlaceholderIcon() { + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ) +} diff --git a/src/components/uiable/badge/badge-avatar.tsx b/src/components/uiable/badge/badge-avatar.tsx new file mode 100644 index 0000000..0b0f5c8 --- /dev/null +++ b/src/components/uiable/badge/badge-avatar.tsx @@ -0,0 +1,40 @@ +// shadcn +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" + +// ------------------------------ | BADGE - WITH AVATAR | ------------------------------ // + +export function BadgeWithAvatar() { + return ( +
+ + + + OM + + Olivia Martin + + + + + AR + + Alex Rivera + + + + + JD + + + John Doe + +
+ ) +} diff --git a/src/components/uiable/badge/badge-gradient.tsx b/src/components/uiable/badge/badge-gradient.tsx new file mode 100644 index 0000000..0aa331e --- /dev/null +++ b/src/components/uiable/badge/badge-gradient.tsx @@ -0,0 +1,26 @@ +// shadcn +import { Badge } from "@/components/ui/badge" + +// ------------------------------ | BADGE - GRADIENT VARIANT | ------------------------------ // + +export function BadgeGradient() { + return ( +
+ + Spectrum + + + Ocean + + + Sunset + + + Aurora + + + Subtle Glass + +
+ ) +} diff --git a/src/components/uiable/badge/badge-sizes.tsx b/src/components/uiable/badge/badge-sizes.tsx new file mode 100644 index 0000000..1a0877f --- /dev/null +++ b/src/components/uiable/badge/badge-sizes.tsx @@ -0,0 +1,15 @@ +// shadcn +import { Badge } from "@/components/ui/badge" + +// ------------------------------ | BADGE - SIZES | ------------------------------ // + +export function BadgeSizes() { + return ( +
+ Small + Default + Large + Extra Large +
+ ) +} diff --git a/src/components/uiable/badge/badge-status.tsx b/src/components/uiable/badge/badge-status.tsx new file mode 100644 index 0000000..310e2ff --- /dev/null +++ b/src/components/uiable/badge/badge-status.tsx @@ -0,0 +1,43 @@ +// shadcn +import { Badge } from "@/components/ui/badge" + +// ------------------------------ | BADGE - WITH STATUS | ------------------------------ // + +export function BadgeWithStatus() { + return ( +
+ + + + + + + + + + + + + + Live Status + +
+ ) +} diff --git a/src/components/uiable/blocks/feature/feature-1/feature-1.tsx b/src/components/uiable/blocks/feature/feature-1/feature-1.tsx new file mode 100644 index 0000000..a495f34 --- /dev/null +++ b/src/components/uiable/blocks/feature/feature-1/feature-1.tsx @@ -0,0 +1,102 @@ +// ------------------------------ | FEATURE - 1 | ------------------------------ // + +export default function Feature1() { + const features = [ + { + title: "Easy Setup", + subtitle: "Get Started in Minutes", + colorClass: "bg-pink-500", + description: + "Quickly configure your app with simple onboarding and intuitive tools, allowing teams to become productive.", + }, + { + title: "Smart Automation", + subtitle: "Reduce Manual Work", + colorClass: "bg-violet-500", + description: + "Automate repetitive tasks and workflows to save time, improve efficiency, and focus on what matters most.", + }, + { + title: "Real-Time Analytics", + subtitle: "Make Data-Driven Decisions", + colorClass: "bg-blue-500", + description: + "Access detailed insights and performance metrics instantly to track growth and identify opportunities.", + }, + { + title: "Team Collaboration", + subtitle: "Work Better Together", + colorClass: "bg-cyan-500", + description: + "Enable seamless teamwork with real-time updates, shared workspaces, and efficient communication tools.", + }, + { + title: "Enterprise Security", + subtitle: "Protect Your Data", + colorClass: "bg-lime-500", + description: + "Keep sensitive information secure with advanced encryption, role-based access controls, and continuous monitoring.", + }, + { + title: "Seamless Integrations", + subtitle: "Connect Your Favorite Tools", + colorClass: "bg-amber-500", + description: + "Integrate effortlessly with popular platforms and services to create a unified and efficient workflow.", + }, + ] + return ( +
+
+
+
+

+ Powerful Features for Modern Apps +

+

+ Built for modern teams, our platform combines powerful + functionality with an intuitive user experience to help you + organize projects, automate processes, collaborate effectively, + and make data-driven decisions that accelerate success. +

+
+
+ {features.map((feature, idx) => ( +
+
+
+ + 0{idx + 1} + +
+
+
+

+ {feature.title} +

+

+ {feature.subtitle} +

+
+

+ {feature.description} +

+
+
+
+ ))} +
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/feature/feature-2/feature-2.tsx b/src/components/uiable/blocks/feature/feature-2/feature-2.tsx new file mode 100644 index 0000000..fe6aca6 --- /dev/null +++ b/src/components/uiable/blocks/feature/feature-2/feature-2.tsx @@ -0,0 +1,106 @@ +import { Blocks, Cpu, Rocket, Shield, TrendingUp, Users } from "lucide-react" + +// ------------------------------ | FEATURE - 2 | ------------------------------ // + +export default function Feature2() { + const features = [ + { + title: "Easy Setup", + colorClass: + "bg-pink-500/5 text-pink-500 group-hover:bg-pink-500 group-hover:text-white", + icon: Rocket, + description: + "Quickly configure your app with simple onboarding and intuitive tools, allowing teams to become productive.", + }, + { + title: "Smart Automation", + colorClass: + "bg-violet-500/5 text-violet-500 group-hover:bg-violet-500 group-hover:text-white", + icon: Cpu, + description: + "Automate repetitive tasks and workflows to save time, improve efficiency, and focus on what matters most.", + }, + { + title: "Real-Time Analytics", + colorClass: + "bg-blue-500/5 text-blue-500 group-hover:bg-blue-500 group-hover:text-white", + icon: TrendingUp, + description: + "Access detailed insights and performance metrics instantly to track growth and identify opportunities.", + }, + { + title: "Team Collaboration", + colorClass: + "bg-cyan-500/5 text-cyan-500 group-hover:bg-cyan-500 group-hover:text-white", + icon: Users, + description: + "Enable seamless teamwork with real-time updates, shared workspaces, and efficient communication tools.", + }, + { + title: "Enterprise Security", + colorClass: + "bg-lime-500/5 text-lime-500 group-hover:bg-lime-500 group-hover:text-white", + icon: Shield, + description: + "Keep sensitive information secure with advanced encryption, role-based access controls, and continuous monitoring.", + }, + { + title: "Seamless Integrations", + colorClass: + "bg-amber-500/5 text-amber-500 group-hover:bg-amber-500 group-hover:text-white", + icon: Blocks, + description: + "Integrate effortlessly with popular platforms and services to create a unified and efficient workflow.", + }, + ] + return ( +
+
+
+
+

+ Powerful Features for Modern Apps +

+

+ Built for modern teams, our platform combines powerful + functionality with an intuitive user experience to help you + organize projects, automate processes, collaborate effectively, + and make data-driven decisions that accelerate success. +

+
+ +
+
+ {features.map((feature, idx) => ( +
+
+
+ +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+
+
+ ))} +
+
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/footer/footer-1/footer-1.tsx b/src/components/uiable/blocks/footer/footer-1/footer-1.tsx new file mode 100644 index 0000000..81709aa --- /dev/null +++ b/src/components/uiable/blocks/footer/footer-1/footer-1.tsx @@ -0,0 +1,302 @@ +// shadcn + +// assets +import { ChevronRight } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" + +// constants +const footerColumns = [ + { + title: "About Us", + links: ["Our Story", "Our Team", "Careers", "Press & Media", "Contact Us"], + }, + { + title: "Services", + links: [ + "Web Design", + "App Development", + "SaaS Solutions", + "UI/UX Consultations", + "Digital Marketing", + ], + }, + { + title: "Extra", + links: [ + "Terms & Conditions", + "Privacy Policy", + "FAQ", + "Support Center", + "System Status", + ], + }, +] + +const socialIcons = [ + { + label: "Facebook", + bgClass: "bg-[#1877f2]", + svg: ( + + + + + + + + + + + ), + }, + { + label: "Twitter", + bgClass: "bg-[#101411]", + svg: ( + + + + + + + + + + + ), + }, + { + label: "LinkedIn", + bgClass: "bg-[#0072b1]", + svg: ( + + + + ), + }, + { + label: "YouTube", + bgClass: "bg-[#ff0000]", + svg: ( + + + + + + + + + + + ), + }, + { + label: "Dribbble", + bgClass: "bg-[#ea4c89]", + svg: ( + + + + ), + }, +] + +// ------------------------------ | FOOTER - 1 | ------------------------------ // + +export default function Footer1() { + return ( +
+
+
+
+
+ + + + + + + + + + + + + + + SaaS Products + +

+ Built for modern teams to organize projects, automate workflows, + and collaborate. Make smarter, data-driven decisions. +

+
+
+
+
+ {footerColumns.map((col) => ( +
+
+
+ {col.title} +
+ +
+
+ ))} +
+
+
+
+ Follow Us +
+
+ {socialIcons.map(({ label, bgClass, svg }) => ( + + {svg} + + ))} +
+
+
+
+ Stay Connected +
+
+
+
+ + + + +
+ +
+ +
+
+

+ Get updates, news, and insights delivered to you. +

+
+
+
+
+
+
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/footer/footer-2/footer-2.tsx b/src/components/uiable/blocks/footer/footer-2/footer-2.tsx new file mode 100644 index 0000000..2b35858 --- /dev/null +++ b/src/components/uiable/blocks/footer/footer-2/footer-2.tsx @@ -0,0 +1,258 @@ +// assets +import { ChevronRight } from "lucide-react" + +// constants +const footerColumns = [ + { + title: "About Us", + links: ["Our Story", "Our Team", "Careers", "Press & Media", "Contact Us"], + }, + { + title: "Services", + links: [ + "Web Design", + "App Development", + "SaaS Solutions", + "UI/UX Consultations", + "Digital Marketing", + ], + }, + { + title: "Resources", + links: [ + "Blog", + "Documentation", + "Community", + "Help Center", + "API Reference", + ], + }, + { + title: "Extra", + links: [ + "Terms & Conditions", + "Privacy Policy", + "FAQ", + "Support Center", + "System Status", + ], + }, +] + +const socialIcons = [ + { + label: "Facebook", + bgClass: "hover:text-[#1877f2]", + svg: ( + + + + + + + + + + + ), + }, + { + label: "Twitter", + bgClass: "hover:text-[#101411]", + svg: ( + + + + + + + + + + + ), + }, + { + label: "LinkedIn", + bgClass: "hover:text-[#0072b1]", + svg: ( + + + + ), + }, + { + label: "YouTube", + bgClass: "hover:text-[#ff0000]", + svg: ( + + + + + + + + + + + ), + }, + { + label: "Dribbble", + bgClass: "hover:text-[#ea4c89]", + svg: ( + + + + ), + }, +] + +// ------------------------------ | FOOTER - 1 | ------------------------------ // + +export default function Footer1() { + return ( +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + SaaSify + +
+

+ Built for modern teams to organize projects, automate workflows, + and collaborate. Make smarter, data-driven decisions. +

+
+
+
+
+ {footerColumns.map((col) => ( +
+
+
+ {col.title} +
+ +
+
+ ))} +
+
+
+
+
+
+ + SaaSify + +
+
+
+
+
+
+

+ Copyright © 2026 SaaSify. All Rights Reserved +

+
+
+
+ {socialIcons.map(({ label, bgClass, svg }) => ( + + {svg} + + ))} +
+
+
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/footer/footer-3/footer-3.tsx b/src/components/uiable/blocks/footer/footer-3/footer-3.tsx new file mode 100644 index 0000000..b3111f1 --- /dev/null +++ b/src/components/uiable/blocks/footer/footer-3/footer-3.tsx @@ -0,0 +1,177 @@ +// constants +const footerColumns = [ + { + title: "About Us", + links: ["Our Story", "Our Team", "Careers", "Press & Media", "Contact Us"], + }, +] +const socialIcons = [ + { + label: "Facebook", + svg: ( + + + + + + + + + + + ), + }, + { + label: "Twitter", + svg: ( + + + + + + + + + + + ), + }, + { + label: "LinkedIn", + svg: ( + + + + ), + }, + { + label: "YouTube", + svg: ( + + + + + + + + + + + ), + }, + { + label: "Dribbble", + svg: ( + + + + ), + }, +] +// ------------------------------ | FOOTER - 3 | ------------------------------ // +export default function Footer3() { + return ( +
+ + +
+
+
+ + + + + + + + + + + + + + + SaaSify + +
+
+ {footerColumns.map((col) => ( + + ))} +
+
+ {socialIcons.map(({ label, svg }) => ( + + {svg} + + ))} +
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/gallery/gallery-1/gallery-1.tsx b/src/components/uiable/blocks/gallery/gallery-1/gallery-1.tsx new file mode 100644 index 0000000..bd42008 --- /dev/null +++ b/src/components/uiable/blocks/gallery/gallery-1/gallery-1.tsx @@ -0,0 +1,132 @@ +import { useState } from "react" + +// constants +const Gallery = [ + { + title: "Urban Reflections", + colorClass: "bg-pink-500", + images: "/assets/images/block/img-gallery-1.png", + description: + "Rain-soaked streets mirror towering skyscrapers, creating dramatic reflections that highlight the beauty and energy of the modern city.", + }, + { + title: "Stormy Horizons", + colorClass: "bg-violet-500", + images: "/assets/images/block/img-gallery-2.png", + description: + "Dark clouds gather above a bustling highway, capturing the contrast between nature's power and the rhythm of urban life.", + }, + { + title: "Golden City", + colorClass: "bg-blue-500", + images: "/assets/images/block/img-gallery-3.png", + description: + "Warm evening light paints the skyline with soft colors, showcasing the architectural elegance and atmosphere of a thriving city.", + }, + { + title: "Architectural Charm", + colorClass: "bg-cyan-500", + images: "/assets/images/block/img-gallery-4.png", + description: + "Historic buildings and unique street corners reveal the character, craftsmanship, and timeless beauty of urban architecture.", + }, + { + title: "City Movement", + colorClass: "bg-lime-500", + images: "/assets/images/block/img-gallery-5.png", + description: + "Busy streets filled with vehicles and towering buildings capture the constant motion and vibrant pace of city living.", + }, + { + title: "Neon Nights", + colorClass: "bg-amber-500", + images: "/assets/images/block/img-gallery-6.png", + description: + "Glowing lights, reflections, and long-exposure effects transform the city after dark into a captivating visual experience.", + }, +] +// ------------------------------ | GALLERY 1 | ------------------------------ // + +export default function Gallery1() { + const [activeIdx, setActiveIdx] = useState(2) + + return ( +
+
+
+
+
+ Gallery +
+

+ Through My Lens +

+

+ A collection of moments, perspectives, and stories captured + through my camera. Each image reflects creativity, emotion, and + the beauty found in everyday experiences. +

+
+
+ {Gallery.map((gallery, idx) => ( +
setActiveIdx(idx)} + className={`group h-80 cursor-pointer transition-all duration-500 ease-in-out max-md:flex-auto md:h-130 ${ + activeIdx === idx ? "md:flex-3" : "md:flex-1" + }`} + > +
+
+
+
+
+
+
+ + 0{idx + 1} + +
+
+

+ {gallery.title} +

+

+ {gallery.description} +

+
+
+
+
+
+
+ ))} +
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/gallery/gallery-2/gallery-2.tsx b/src/components/uiable/blocks/gallery/gallery-2/gallery-2.tsx new file mode 100644 index 0000000..0a6eb45 --- /dev/null +++ b/src/components/uiable/blocks/gallery/gallery-2/gallery-2.tsx @@ -0,0 +1,98 @@ +// constants +const Gallery = [ + { + title: "Traditional Wedding Ceremony", + images: "/assets/images/block/img-gal-wed-1.png", + description: + "A beautifully decorated wedding mandap adorned with floral arrangements, capturing the elegance and traditions of a cultural wedding ceremony.", + }, + { + title: "Joyful Wedding Celebration", + images: "/assets/images/block/img-gal-wed-2.png", + description: + "The newlyweds celebrate their special moment with family and friends as balloons fill the sky, creating unforgettable memories.", + }, + { + title: "Elegant Ceremony Setup", + images: "/assets/images/block/img-gal-wed-3.png", + description: + "Beautiful floral aisle decorations and seating arrangements create a romantic atmosphere for exchanging vows.", + }, + { + title: "Romantic Beach Walk", + images: "/assets/images/block/img-gal-wed-4.png", + description: + "A newly married couple strolls hand in hand along the shoreline, embracing a peaceful and romantic sunset moment.", + }, + { + title: "Bridal Bouquet Elegance", + images: "/assets/images/block/img-gal-wed-5.png", + description: + "A stunning bouquet of roses and seasonal flowers symbolizes love, beauty, and the celebration of a new beginning.", + }, + { + title: "Wedding Details & Rings", + images: "/assets/images/block/img-gal-wed-6.png", + description: + "Delicate bridal shoes and wedding rings capture the charming details that make the special day truly memorable.", + }, +] +// ------------------------------ | GALLERY 2 | ------------------------------ // + +export default function Gallery2() { + return ( +
+
+
+
+
+
+
+ Love in Pictures +
+

+ Moments We Treasure +

+

+ Take a glimpse into our favorite memories. These photographs + celebrate the laughter, love, and experiences that have shaped our + relationship and brought us to this exciting new chapter. +

+
+
+ {Gallery.map((gallery, idx) => ( +
+
+ images +
+
+
+
+
+
+
+
+
+

+ {gallery.title} +

+

{gallery.description}

+
+
+
+
+
+ ))} +
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/gallery/gallery-3/gallery-3.tsx b/src/components/uiable/blocks/gallery/gallery-3/gallery-3.tsx new file mode 100644 index 0000000..134c140 --- /dev/null +++ b/src/components/uiable/blocks/gallery/gallery-3/gallery-3.tsx @@ -0,0 +1,171 @@ +import { useState } from "react" + +// constants +const Gallery = [ + { + title: "Modern Villa Exterior", + images: "/assets/images/block/img-gal-home-1.png", + description: + "Clean architectural lines, spacious terraces, and a sparkling pool create a refined luxury living experience.", + }, + { + title: "Luxury Poolside Living", + images: "/assets/images/block/img-gal-home-2.png", + description: + "A resort-inspired outdoor space designed for relaxation, entertainment, and year-round enjoyment.", + }, + { + title: "Elegant Contemporary Design", + images: "/assets/images/block/img-gal-home-3.png", + description: + "Sophisticated architecture blends comfort and style, offering seamless indoor and outdoor living.", + }, + { + title: "Infinity Pool Retreat", + images: "/assets/images/block/img-gal-home-4.png", + description: + "A serene pool area surrounded by natural beauty provides the perfect setting to unwind and recharge.", + }, + { + title: "Panoramic Hillside Views", + images: "/assets/images/block/img-gal-home-5.png", + description: + "Sweeping landscape views enhance the exclusivity and tranquility of this luxury property.", + }, + { + title: "Private Residence", + images: "/assets/images/block/img-gal-home-6.png", + description: + "Premium materials, open spaces, and modern details come together to create an exceptional home.", + }, +] +// ------------------------------ | GALLERY 3 | ------------------------------ // + +interface GalleryItem { + title: string + images: string + description: string +} + +interface GalleryCardProps { + gallery: GalleryItem + isActive: boolean +} + +function GalleryCard({ gallery, isActive }: GalleryCardProps) { + return ( +
+
+ {gallery.title} +
+
+
+
+

+ {gallery.title} +

+

{gallery.description}

+
+
+
+
+
+ ) +} + +export default function Gallery3() { + const [activeIdx, setActiveIdx] = useState(2) + + return ( +
+
+
+
+

+ Modern Architectural Excellence +

+
+

+ Explore contemporary villas featuring clean lines, open spaces, + and breathtaking surroundings that redefine luxury living. +

+
+
+
+
+
+
setActiveIdx(0)}> + +
+
+
+
setActiveIdx(1)}> + +
+
+
+
setActiveIdx(2)}> + +
+
+
+
+
+
+
+
setActiveIdx(5)}> + +
+
+
+
setActiveIdx(3)}> + +
+
+
+
setActiveIdx(4)}> + +
+
+
+
+
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/gallery/gallery-4/gallery-4.tsx b/src/components/uiable/blocks/gallery/gallery-4/gallery-4.tsx new file mode 100644 index 0000000..47d5722 --- /dev/null +++ b/src/components/uiable/blocks/gallery/gallery-4/gallery-4.tsx @@ -0,0 +1,116 @@ +// shadcn +import React from "react" +import Autoplay from "embla-carousel-autoplay" + +import { + Carousel, + CarouselContent, + CarouselItem, +} from "@/components/ui/carousel" + +// constants +const Gallery = [ + { + title: "Urban Reflections", + images: "/assets/images/block/img-gallery-1.png", + description: + "Rain-soaked streets mirror towering skyscrapers, creating dramatic reflections that highlight the beauty and energy of the modern city.", + }, + { + title: "Stormy Horizons", + images: "/assets/images/block/img-gallery-2.png", + description: + "Dark clouds gather above a bustling highway, capturing the contrast between nature's power and the rhythm of urban life.", + }, + { + title: "Golden City", + images: "/assets/images/block/img-gallery-3.png", + description: + "Warm evening light paints the skyline with soft colors, showcasing the architectural elegance and atmosphere of a thriving city.", + }, + { + title: "Architectural Charm", + images: "/assets/images/block/img-gallery-4.png", + description: + "Historic buildings and unique street corners reveal the character, craftsmanship, and timeless beauty of urban architecture.", + }, + { + title: "City Movement", + images: "/assets/images/block/img-gallery-5.png", + description: + "Busy streets filled with vehicles and towering buildings capture the constant motion and vibrant pace of city living.", + }, + { + title: "Neon Nights", + images: "/assets/images/block/img-gallery-6.png", + description: + "Glowing lights, reflections, and long-exposure effects transform the city after dark into a captivating visual experience.", + }, +] + +// ------------------------------ | GALLERY 4 | ------------------------------ // + +export default function Gallery4() { + const plugin = React.useMemo( + () => Autoplay({ delay: 2000, stopOnInteraction: true }), + [] + ) + return ( +
+
+
+
+

+ Portfolio Gallery +

+

+ Explore a curated collection of projects that showcase creativity, + craftsmanship, and attention to detail across a variety of designs + and spaces. +

+
+ plugin.stop()} + onMouseLeave={() => plugin.reset()} + > + + {Gallery.map((gallery, idx) => ( + +
+
+
+ {gallery.title} +
+
+
+
+ {gallery.title} +
+

+ {gallery.description} +

+
+
+
+
+
+
+ + ))} + + +
+
+
+ ) +} diff --git a/src/components/uiable/blocks/hero/hero-1/hero-1.tsx b/src/components/uiable/blocks/hero/hero-1/hero-1.tsx new file mode 100644 index 0000000..cd32486 --- /dev/null +++ b/src/components/uiable/blocks/hero/hero-1/hero-1.tsx @@ -0,0 +1,192 @@ +"use client" + +import { useEffect, useState } from "react" +import { AnimatePresence, motion } from "framer-motion" + +import { Button } from "@/components/ui/button" + +const navLinks = [ + { name: "Home", href: "#" }, + { name: "Feature", href: "#" }, + { name: "Pricing", href: "#" }, + { name: "About", href: "#" }, + { name: "Contact", href: "#" }, +] +// ------------------------------ | HERO1 | ------------------------------ // + +export default function Hero1() { + const [isOpen, setIsOpen] = useState(false) + + useEffect(() => { + const handleResize = () => { + setIsOpen(false) + } + window.addEventListener("resize", handleResize) + return () => window.removeEventListener("resize", handleResize) + }, []) + + return ( +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + SaaSify + +
+ + {isOpen && ( + +
+ {navLinks.map((item) => ( + + {item.name} + + ))} + +
+ + )} + +
+ {navLinks.map((item) => ( + + {item.name} + + ))} +
+ +
+ +
+
+
+
+
+ + + + New Release +
+

+ Work Better With Powerful Automation +

+

+ Transform the way your team works with intelligent automation, + seamless collaboration, and real-time project visibility. + Eliminate bottlenecks, save time, and focus on the work that + drives results. +

+
+ + +
+
+
+ Team meeting in a conference room + images +
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/hero/hero-2/hero-2.tsx b/src/components/uiable/blocks/hero/hero-2/hero-2.tsx new file mode 100644 index 0000000..25aa650 --- /dev/null +++ b/src/components/uiable/blocks/hero/hero-2/hero-2.tsx @@ -0,0 +1,368 @@ +"use client" + +import { useEffect, useState } from "react" +import { AnimatePresence, motion } from "framer-motion" + +import { Button } from "@/components/ui/button" + +const navLinks = [ + { name: "Home", href: "#" }, + { name: "Feature", href: "#" }, + { name: "Pricing", href: "#" }, + { name: "About", href: "#" }, + { name: "Contact", href: "#" }, +] +// ------------------------------ | HERO2 | ------------------------------ // +export default function Hero2() { + const [isOpen, setIsOpen] = useState(false) + + useEffect(() => { + const handleResize = () => { + setIsOpen(false) + } + window.addEventListener("resize", handleResize) + return () => window.removeEventListener("resize", handleResize) + }, []) + + return ( +
+
+
+
+
+
+
+ + + + + + + App + lee + +
+ + {isOpen && ( + +
+ {navLinks.map((item) => ( + + {item.name} + + ))} + +
+ + )} + +
+ {navLinks.map((item) => ( + + {item.name} + + ))} +
+ +
+ +
+
+
+
+
+
+
+
+
+
+ + + + New Release +
+

+ The Perfect Choice for your Mobile App Presentation +

+

+ Transform the way your team works with intelligent automation, + seamless collaboration, and real-time project visibility. + Eliminate bottlenecks, save time, and focus on the work that + drives results. +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Team meeting in a conference room +
+
+
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/landing/footer/footer.tsx b/src/components/uiable/blocks/landing/footer/footer.tsx index 8c9a5a6..8b15085 100644 --- a/src/components/uiable/blocks/landing/footer/footer.tsx +++ b/src/components/uiable/blocks/landing/footer/footer.tsx @@ -72,7 +72,7 @@ export default function Footer({

- v1.2.0 | Built by{" "} + v1.3.0 | Built by{" "} +

+
+
+

+ Featured Projects +

+

+ Explore a selection of projects that showcase my expertise in + UI/UX design and web development. Each project is crafted with a + focus on clean design, seamless user experiences, and modern + development practices. +

+
+
+
+
+ Portfolio showcase +
+
+
+
+
+ + + + + + + + + + + + + +
+

+ Travel Mobile App +

+ + UI/UX DESIGN & MOBILE EXPERIENCE + +
+

+ A modern travel application designed to inspire exploration + and simplify trip planning. The interface emphasizes intuitive + navigation, vibrant visuals, and a user-friendly experience + that helps travelers discover destinations and organize their + journeys effortlessly. +

+
+ +
+
+
+
+
+
+ + ) +} diff --git a/src/components/uiable/blocks/portfolio/portfolio-2/portfolio-2.tsx b/src/components/uiable/blocks/portfolio/portfolio-2/portfolio-2.tsx new file mode 100644 index 0000000..98999e5 --- /dev/null +++ b/src/components/uiable/blocks/portfolio/portfolio-2/portfolio-2.tsx @@ -0,0 +1,107 @@ +// shadcn +import { + Bluetooth, + HardDrive, + Headphones, + Settings, + Shield, + Volume2, +} from "lucide-react" + +import { Button } from "@/components/ui/button" + +// ------------------------------ | PORTFOLIO 2 | ------------------------------ // + +export default function Portfolio2() { + const features = [ + { + title: "audio prompts", + icon: Volume2, + }, + { + title: "bluetooth transfer", + icon: Bluetooth, + }, + { + title: "more free space", + icon: HardDrive, + }, + { + title: "24/7 support", + icon: Headphones, + }, + { + title: "Security", + icon: Shield, + }, + { + title: "settings", + icon: Settings, + }, + ] + return ( +
+
+
+
+
+ img + img +
+
+
+
+
+

+ WearFit Smartwatch UI +

+ + UI/UX • MOBILE & WEARABLE DESIGN + +
+

+ A wearable fitness application built with a user-first approach, + offering workout tracking, activity monitoring, and performance + insights through a clean, responsive, and visually engaging + smartwatch interface. +

+
+ {features.map((feature, idx) => ( +
+
+
+ +
+ {feature.title} +
+
+
+
+ ))} +
+
+ +
+
+
+
+
+
+ ) +} diff --git a/src/components/uiable/blocks/portfolio/portfolio-3/portfolio-3.tsx b/src/components/uiable/blocks/portfolio/portfolio-3/portfolio-3.tsx new file mode 100644 index 0000000..9f45942 --- /dev/null +++ b/src/components/uiable/blocks/portfolio/portfolio-3/portfolio-3.tsx @@ -0,0 +1,135 @@ +// shadcn +import { Button } from "@/components/ui/button" +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel" + +// constants +const Gallery = [ + { + title: "Urban Reflections", + colorClass: "bg-pink-500", + images: "/assets/images/block/img-gallery-1.png", + description: + "Rain-soaked streets mirror towering skyscrapers, creating dramatic reflections that highlight the beauty and energy of the modern city.", + }, + { + title: "Stormy Horizons", + colorClass: "bg-violet-500", + images: "/assets/images/block/img-gallery-2.png", + description: + "Dark clouds gather above a bustling highway, capturing the contrast between nature's power and the rhythm of urban life.", + }, + { + title: "Golden City", + colorClass: "bg-blue-500", + images: "/assets/images/block/img-gallery-3.png", + description: + "Warm evening light paints the skyline with soft colors, showcasing the architectural elegance and atmosphere of a thriving city.", + }, + { + title: "Architectural Charm", + colorClass: "bg-cyan-500", + images: "/assets/images/block/img-gallery-4.png", + description: + "Historic buildings and unique street corners reveal the character, craftsmanship, and timeless beauty of urban architecture.", + }, + { + title: "City Movement", + colorClass: "bg-lime-500", + images: "/assets/images/block/img-gallery-5.png", + description: + "Busy streets filled with vehicles and towering buildings capture the constant motion and vibrant pace of city living.", + }, + { + title: "Neon Nights", + colorClass: "bg-amber-500", + images: "/assets/images/block/img-gallery-6.png", + description: + "Glowing lights, reflections, and long-exposure effects transform the city after dark into a captivating visual experience.", + }, +] + +// ------------------------------ | PORTFOLIO 3 | ------------------------------ // + +export default function Portfolio3() { + return ( +
+
+ +
+
+
+
+

+ Projects That Define My Work +

+

+ Every project represents a unique challenge solved through + thoughtful design, clean code, and modern technologies. + Explore the work that reflects my experience, creativity, + and commitment to delivering quality digital products. +

+
+
+
+
+ + +
+
+
+ + {Gallery.map((gallery, idx) => ( + +
+
+
+ {gallery.title} +
+
+
+
+ {gallery.title} +
+
+
+
+

+ {gallery.description} +

+ +
+
+
+
+
+
+
+
+
+ + ))} + +
+ +
+
+ ) +} diff --git a/src/components/uiable/blocks/portfolio/portfolio-4/portfolio-4.tsx b/src/components/uiable/blocks/portfolio/portfolio-4/portfolio-4.tsx new file mode 100644 index 0000000..2b17af8 --- /dev/null +++ b/src/components/uiable/blocks/portfolio/portfolio-4/portfolio-4.tsx @@ -0,0 +1,111 @@ +// shadcn +import { ArrowUpRight } from "lucide-react" + +import { Button } from "@/components/ui/button" + +// ------------------------------ | PORTFOLIO 4 | ------------------------------ // + +export default function Portfolio4() { + return ( +
+
+ ) +} diff --git a/src/components/uiable/blocks/registry.json b/src/components/uiable/blocks/registry.json index 1e6f1d3..9be043e 100644 --- a/src/components/uiable/blocks/registry.json +++ b/src/components/uiable/blocks/registry.json @@ -243,6 +243,291 @@ "categories": [ "faq" ] + }, + { + "name": "uiable-block-feature-1", + "type": "registry:block", + "title": "Feature 1", + "description": "Feature variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "feature/feature-1/feature-1.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/feature/feature-1/feature-1.tsx" + } + ], + "categories": [ + "feature" + ] + }, + { + "name": "uiable-block-feature-2", + "type": "registry:block", + "title": "Feature 2", + "description": "Feature variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "feature/feature-2/feature-2.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/feature/feature-2/feature-2.tsx" + } + ], + "categories": [ + "feature" + ] + }, + { + "name": "uiable-block-footer-1", + "type": "registry:block", + "title": "Footer 1", + "description": "Footer variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "footer/footer-1/footer-1.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/footer/footer-1/footer-1.tsx" + } + ], + "categories": [ + "footer" + ] + }, + { + "name": "uiable-block-footer-2", + "type": "registry:block", + "title": "Footer 2", + "description": "Footer variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "footer/footer-2/footer-2.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/footer/footer-2/footer-2.tsx" + } + ], + "categories": [ + "footer" + ] + }, + { + "name": "uiable-block-footer-3", + "type": "registry:block", + "title": "Footer 3", + "description": "Footer variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "footer/footer-3/footer-3.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/footer/footer-3/footer-3.tsx" + } + ], + "categories": [ + "footer" + ] + }, + { + "name": "uiable-block-gallery-1", + "type": "registry:block", + "title": "Gallery 1", + "description": "Gallery variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "gallery/gallery-1/gallery-1.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/gallery/gallery-1/gallery-1.tsx" + } + ], + "categories": [ + "gallery" + ] + }, + { + "name": "uiable-block-gallery-2", + "type": "registry:block", + "title": "Gallery 2", + "description": "Gallery variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "gallery/gallery-2/gallery-2.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/gallery/gallery-2/gallery-2.tsx" + } + ], + "categories": [ + "gallery" + ] + }, + { + "name": "uiable-block-gallery-3", + "type": "registry:block", + "title": "Gallery 3", + "description": "Gallery variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "gallery/gallery-3/gallery-3.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/gallery/gallery-3/gallery-3.tsx" + } + ], + "categories": [ + "gallery" + ] + }, + { + "name": "uiable-block-gallery-4", + "type": "registry:block", + "title": "Gallery 4", + "description": "Gallery variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "gallery/gallery-4/gallery-4.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/gallery/gallery-4/gallery-4.tsx" + } + ], + "categories": [ + "gallery" + ] + }, + { + "name": "uiable-block-hero-1", + "type": "registry:block", + "title": "Hero 1", + "description": "Hero variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "hero/hero-1/hero-1.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/hero/hero-1/hero-1.tsx" + } + ], + "categories": [ + "hero" + ] + }, + { + "name": "uiable-block-hero-2", + "type": "registry:block", + "title": "Hero 2", + "description": "Hero variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "hero/hero-2/hero-2.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/hero/hero-2/hero-2.tsx" + } + ], + "categories": [ + "hero" + ] + }, + { + "name": "uiable-block-portfolio-1", + "type": "registry:block", + "title": "Portfolio 1", + "description": "Portfolio variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "portfolio/portfolio-1/portfolio-1.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/portfolio/portfolio-1/portfolio-1.tsx" + } + ], + "categories": [ + "portfolio" + ] + }, + { + "name": "uiable-block-portfolio-2", + "type": "registry:block", + "title": "Portfolio 2", + "description": "Portfolio variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "portfolio/portfolio-2/portfolio-2.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/portfolio/portfolio-2/portfolio-2.tsx" + } + ], + "categories": [ + "portfolio" + ] + }, + { + "name": "uiable-block-portfolio-3", + "type": "registry:block", + "title": "Portfolio 3", + "description": "Portfolio variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "portfolio/portfolio-3/portfolio-3.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/portfolio/portfolio-3/portfolio-3.tsx" + } + ], + "categories": [ + "portfolio" + ] + }, + { + "name": "uiable-block-portfolio-4", + "type": "registry:block", + "title": "Portfolio 4", + "description": "Portfolio variant for block.", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "portfolio/portfolio-4/portfolio-4.tsx", + "type": "registry:component", + "target": "@components/uiable/blocks/portfolio/portfolio-4/portfolio-4.tsx" + } + ], + "categories": [ + "portfolio" + ] } ] } \ No newline at end of file diff --git a/src/components/uiable/calendar/calendar-right-navigation.tsx b/src/components/uiable/calendar/calendar-right-navigation.tsx new file mode 100644 index 0000000..8c1d180 --- /dev/null +++ b/src/components/uiable/calendar/calendar-right-navigation.tsx @@ -0,0 +1,72 @@ +"use client" + +import { useState } from "react" +// third party +import { addMonths, format, subMonths } from "date-fns" +// assets +import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react" + +// shadcn +import { Button } from "@/components/ui/button" +import { Calendar } from "@/components/ui/calendar" +import { Card, CardContent } from "@/components/ui/card" + +// ------------------------------ | CALENDAR - RIGHT NAVIGATION | ------------------------------ // + +export function CalendarRightNavigation() { + const [date, setDate] = useState( + new Date(new Date().getFullYear(), new Date().getMonth(), 18) + ) + const [currentMonth, setCurrentMonth] = useState( + new Date(new Date().getFullYear(), new Date().getMonth(), 1) + ) + + return ( + + {/* Top Header with Right-Aligned Navigation Controls */} +
+
+ +

+ {format(currentMonth, "MMMM yyyy")} +

+
+ + {/* Right Side Header Navigation */} +
+ + +
+
+ + + + + + ) +} diff --git a/src/components/uiable/card/card-animated-flip.tsx b/src/components/uiable/card/card-animated-flip.tsx new file mode 100644 index 0000000..76c477c --- /dev/null +++ b/src/components/uiable/card/card-animated-flip.tsx @@ -0,0 +1,212 @@ +"use client" + +import { useState } from "react" +// third party +import { motion } from "framer-motion" +// assets +import { + ArrowLeft, + BarChart3, + CheckCircle, + RotateCw, + Sparkles, + Users, +} from "lucide-react" + +// shadcn +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { Progress } from "@/components/ui/progress" + +const pods = [ + { + label: "Core Infrastructure Pod", + score: 98, + color: "bg-green-500", + progressClass: "[&_[data-slot=progress-indicator]]:bg-green-500", + }, + { + label: "AI & Data Pipeline Squad", + score: 94, + color: "bg-cyan-500", + progressClass: "[&_[data-slot=progress-indicator]]:bg-cyan-500", + }, + { + label: "Frontend & Design Pod", + score: 91, + color: "bg-yellow-500", + progressClass: "[&_[data-slot=progress-indicator]]:bg-yellow-500", + }, +] + +// ------------------------------ | CARD - ANIMATED FLIP | ------------------------------ // + +export default function CardAnimatedFlip() { + const [isFlipped, setIsFlipped] = useState(false) + + return ( +
+ + {/* ================= FRONT SIDE ================= */} +
+ + +
+ + + Overview + + +
+ + + Team Performance Index + + + Q3 quarterly velocity & KPI summary report across core + engineering pods. + + + + + + + + Overall Efficiency Score + +
+

94.2

+ + /100 + +
+

+ +6.4% higher than target benchmark +

+ + + +
+ + {" "} + 24 Engineers + + + {" "} + 142 Sprints + +
+ + + + + + +
+ + {/* ================= BACK SIDE ================= */} +
+ + +
+ + + Deep Dive + + +
+ + + Pod Breakdown + + + Detailed metric distribution per engineering squad. + + + + + {pods.map((pod, idx) => ( +
+
+ + {pod.label} + + + {pod.score}% + +
+ +
+ ))} + + + + + + +
+ +
+ ) +} diff --git a/src/components/uiable/card/card-animated-tilt.tsx b/src/components/uiable/card/card-animated-tilt.tsx new file mode 100644 index 0000000..6c415ea --- /dev/null +++ b/src/components/uiable/card/card-animated-tilt.tsx @@ -0,0 +1,164 @@ +"use client" + +import { type MouseEvent } from "react" +// third party +import { + motion, + useMotionTemplate, + useMotionValue, + useSpring, + useTransform, +} from "framer-motion" +// assets +import { Crown, Shield, Sparkles, Star } from "lucide-react" + +// shadcn +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { + Item, + ItemContent, + ItemGroup, + ItemMedia, + ItemTitle, +} from "@/components/ui/item" + +const benefits = [ + { + icon: Shield, + text: "Unlimited API usage & dedicated nodes", + }, + { + icon: Star, + text: "Direct 1-on-1 engineering advisory channel", + }, +] + +// ------------------------------ | CARD - ANIMATED TILT | ------------------------------ // + +export default function CardAnimatedTilt() { + const x = useMotionValue(0) + const y = useMotionValue(0) + + // Smooth spring physics for fluid 3D tilting + const mouseXSpring = useSpring(x, { stiffness: 150, damping: 15 }) + const mouseYSpring = useSpring(y, { stiffness: 150, damping: 15 }) + + const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["12deg", "-12deg"]) + const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-12deg", "12deg"]) + + const sheenOpacity = useTransform(mouseXSpring, [-0.5, 0.5], [0.1, 0.4]) + + function handleMouseMove(e: MouseEvent) { + const rect = e.currentTarget.getBoundingClientRect() + const width = rect.width + const height = rect.height + const mouseX = e.clientX - rect.left + const mouseY = e.clientY - rect.top + const xPct = mouseX / width - 0.5 + const yPct = mouseY / height - 0.5 + x.set(xPct) + y.set(yPct) + } + + function handleMouseLeave() { + x.set(0) + y.set(0) + } + + return ( +
+ + + + +
+
+ + +
+
+ + + + + + + VIP PASS + +
+ + + TIER 1 + +
+ + + Founding Pro Member + +

+ Exclusive lifetime access to premium tools, priority support, and + private insider betas. +

+ + + + + {benefits.map((benefit, idx) => { + const Icon = benefit.icon + return ( + + + + + + + {benefit.text} + + + + ) + })} + + + + + + + + +
+ ) +} diff --git a/src/components/uiable/card/card-product.tsx b/src/components/uiable/card/card-product.tsx new file mode 100644 index 0000000..dac7989 --- /dev/null +++ b/src/components/uiable/card/card-product.tsx @@ -0,0 +1,135 @@ +"use client" + +import { useState } from "react" +// assets +import { Heart, ShoppingBag, ShoppingCart, Star } from "lucide-react" + +// shadcn +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" + +// ------------------------------ | CARD - PRODUCT | ------------------------------ // + +export default function CardProduct() { + const [isFavorite, setIsFavorite] = useState(false) + const [selectedColor, setSelectedColor] = useState("charcoal") + + const colors = [ + { + id: "charcoal", + name: "Charcoal Black", + className: "bg-zinc-800 hover:bg-zinc-800", + }, + { + id: "navy", + name: "Deep Navy", + className: "bg-blue-900 hover:bg-blue-900", + }, + { + id: "sage", + name: "Sage Green", + className: "bg-emerald-800 hover:bg-emerald-800", + }, + ] + + return ( + + +
+ Wireless Noise-Canceling Headphones + + -20% OFF + + +
+ + + +
+
+ Audio & Tech +
+
+ + 4.8 + (128) +
+
+ + + Acoustic Pro Headphones + + + Premium studio-grade sound with active noise cancellation and 40-hour + extended battery life. + + +
+
+ $149.00 + + $189.00 + +
+
+ {colors.map((color) => ( +
+
+ + + + + + + + ) +} diff --git a/src/components/uiable/card/card-tabs.tsx b/src/components/uiable/card/card-tabs.tsx new file mode 100644 index 0000000..b7a48ca --- /dev/null +++ b/src/components/uiable/card/card-tabs.tsx @@ -0,0 +1,238 @@ +"use client" + +import { useState } from "react" +// assets +import { + Activity, + ArrowUpRight, + Bell, + CheckCircle2, + Lock, + TrendingUp, + Users, +} from "lucide-react" + +// shadcn +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { + Item, + ItemActions, + ItemContent, + ItemDescription, + ItemMedia, + ItemTitle, +} from "@/components/ui/item" +import { Progress } from "@/components/ui/progress" +import { Switch } from "@/components/ui/switch" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" + +// ------------------------------ | CARD - TABS | ------------------------------ // + +export default function CardTabs() { + const [emailAlerts, setEmailAlerts] = useState(true) + const [twoFactor, setTwoFactor] = useState(false) + + return ( + + + +
+ + Project Dashboard + +
+ + + + Overview + + + Analytics + + + Settings + + + + + + {/* OVERVIEW TAB */} + +
+
+ + + + + +
+

System Status

+

+ All services operational +

+
+
+ + 99.9% Uptime + +
+ +
+
+ Sprint Completion + 78% +
+ +
+ +
+ + +

+ Active Members +

+
+ 1,248 + + +12% + +
+ + + + +

Pending Tasks

+
+ 34 + + On track + +
+ + +
+ + + {/* ANALYTICS TAB */} + + + +
+ + + + + +
+

+ Total Revenue +

+

+ $48,290.00 +

+
+
+
+ + +18.4% + +

+ vs last month +

+
+ + + +
    +
  • +
    + + Unique Visitors +
    + 24,512 +
    • +
  • +
    + + Conversion Rate +
    + 3.85% +
    • +
+ + + {/* SETTINGS TAB */} + + + + + + + + Email Notifications + + + Receive daily performance summary + + + + + + + + + + + + + + Two-Factor Authentication + + + Require security code on login + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/uiable/registry.json b/src/components/uiable/registry.json index c648720..b1069e7 100644 --- a/src/components/uiable/registry.json +++ b/src/components/uiable/registry.json @@ -10566,6 +10566,644 @@ "categories": [ "radio-group" ] + }, + { + "name": "uiable-avatar-border-radius", + "type": "registry:ui", + "title": "Border Radius Avatar", + "description": "Avatar Border Radius variant for avatar.", + "registryDependencies": [ + "avatar" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "avatar/avatar-border-radius.tsx", + "type": "registry:component", + "target": "@components/uiable/avatar/avatar-border-radius.tsx" + } + ], + "categories": [ + "avatar" + ] + }, + { + "name": "uiable-avatar-counter-indicator", + "type": "registry:ui", + "title": "Counter Indicator Avatar", + "description": "Avatar Counter Indicator variant for avatar.", + "registryDependencies": [ + "avatar" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "avatar/avatar-counter-indicator.tsx", + "type": "registry:component", + "target": "@components/uiable/avatar/avatar-counter-indicator.tsx" + } + ], + "categories": [ + "avatar" + ] + }, + { + "name": "uiable-avatar-fallback", + "type": "registry:ui", + "title": "Fallback Avatar", + "description": "Avatar Fallback variant for avatar.", + "registryDependencies": [ + "avatar" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "avatar/avatar-fallback.tsx", + "type": "registry:component", + "target": "@components/uiable/avatar/avatar-fallback.tsx" + } + ], + "categories": [ + "avatar" + ] + }, + { + "name": "uiable-avatar-placeholder-icon", + "type": "registry:ui", + "title": "Placeholder Icon Avatar", + "description": "Avatar Placeholder Icon variant for avatar.", + "registryDependencies": [ + "avatar" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "avatar/avatar-placeholder-icon.tsx", + "type": "registry:component", + "target": "@components/uiable/avatar/avatar-placeholder-icon.tsx" + } + ], + "categories": [ + "avatar" + ] + }, + { + "name": "uiable-badge-status", + "type": "registry:ui", + "title": "Status Badge", + "description": "Badge Status variant for badge.", + "registryDependencies": [ + "badge" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "badge/badge-status.tsx", + "type": "registry:component", + "target": "@components/uiable/badge/badge-status.tsx" + } + ], + "categories": [ + "badge" + ] + }, + { + "name": "uiable-badge-avatar", + "type": "registry:ui", + "title": "Avatar Badge", + "description": "Badge Avatar variant for badge.", + "registryDependencies": [ + "badge" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "badge/badge-avatar.tsx", + "type": "registry:component", + "target": "@components/uiable/badge/badge-avatar.tsx" + } + ], + "categories": [ + "badge" + ] + }, + { + "name": "uiable-badge-sizes", + "type": "registry:ui", + "title": "Sizes Badge", + "description": "Badge Sizes variant for badge.", + "registryDependencies": [ + "badge" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "badge/badge-sizes.tsx", + "type": "registry:component", + "target": "@components/uiable/badge/badge-sizes.tsx" + } + ], + "categories": [ + "badge" + ] + }, + { + "name": "uiable-badge-gradient", + "type": "registry:ui", + "title": "Gradient Badge", + "description": "Badge Gradient variant for badge.", + "registryDependencies": [ + "badge" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "badge/badge-gradient.tsx", + "type": "registry:component", + "target": "@components/uiable/badge/badge-gradient.tsx" + } + ], + "categories": [ + "badge" + ] + }, + { + "name": "uiable-calendar-right-navigation", + "type": "registry:ui", + "title": "Right Navigation Calendar", + "description": "Calendar Right Navigation variant for calendar.", + "registryDependencies": [ + "calendar" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "calendar/calendar-right-navigation.tsx", + "type": "registry:component", + "target": "@components/uiable/calendar/calendar-right-navigation.tsx" + } + ], + "categories": [ + "calendar" + ] + }, + { + "name": "uiable-card-product", + "type": "registry:ui", + "title": "Product Card", + "description": "Card Product variant for e-commerce items and checkout.", + "registryDependencies": [ + "card" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "card/card-product.tsx", + "type": "registry:component", + "target": "@components/uiable/card/card-product.tsx" + } + ], + "categories": [ + "card" + ] + }, + { + "name": "uiable-card-tabs", + "type": "registry:ui", + "title": "Tabbing Card", + "description": "Card Tabs variant for multi-section interactive content.", + "registryDependencies": [ + "card" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "card/card-tabs.tsx", + "type": "registry:component", + "target": "@components/uiable/card/card-tabs.tsx" + } + ], + "categories": [ + "card" + ] + }, + { + "name": "uiable-card-animated-tilt", + "type": "registry:ui", + "title": "Animated Tilt Card", + "description": "Interactive 3D perspective tilt card with light sheen using framer-motion.", + "registryDependencies": [ + "card" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "card/card-animated-tilt.tsx", + "type": "registry:component", + "target": "@components/uiable/card/card-animated-tilt.tsx" + } + ], + "categories": [ + "card" + ] + }, + { + "name": "uiable-card-animated-flip", + "type": "registry:ui", + "title": "Animated Flip Card", + "description": "Interactive 3D dual-sided flip card with smooth rotation using framer-motion.", + "registryDependencies": [ + "card" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "card/card-animated-flip.tsx", + "type": "registry:component", + "target": "@components/uiable/card/card-animated-flip.tsx" + } + ], + "categories": [ + "card" + ] + }, + { + "name": "uiable-select-clearable", + "type": "registry:ui", + "title": "Clearable Select", + "description": "Select Clearable variant for select.", + "registryDependencies": [ + "select" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "select/select-clearable.tsx", + "type": "registry:component", + "target": "@components/uiable/select/select-clearable.tsx" + } + ], + "categories": [ + "select" + ] + }, + { + "name": "uiable-select-with-icons", + "type": "registry:ui", + "title": "With Icons Select", + "description": "Select With Icons variant for select.", + "registryDependencies": [ + "select" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "select/select-with-icons.tsx", + "type": "registry:component", + "target": "@components/uiable/select/select-with-icons.tsx" + } + ], + "categories": [ + "select" + ] + }, + { + "name": "uiable-select-with-status", + "type": "registry:ui", + "title": "With Status Select", + "description": "Select With Status variant for select.", + "registryDependencies": [ + "select" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "select/select-with-status.tsx", + "type": "registry:component", + "target": "@components/uiable/select/select-with-status.tsx" + } + ], + "categories": [ + "select" + ] + }, + { + "name": "uiable-select-with-users", + "type": "registry:ui", + "title": "With Users Select", + "description": "Select With Users variant for select.", + "registryDependencies": [ + "select" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "select/select-with-users.tsx", + "type": "registry:component", + "target": "@components/uiable/select/select-with-users.tsx" + } + ], + "categories": [ + "select" + ] + }, + { + "name": "uiable-slider-color-options", + "type": "registry:ui", + "title": "Color Options Slider", + "description": "Color Options Slider Variant for slider.", + "registryDependencies": [ + "slider" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "slider/slider-color-options.tsx", + "type": "registry:component", + "target": "@components/uiable/slider/slider-color-options.tsx" + } + ], + "categories": [ + "slider" + ] + }, + { + "name": "uiable-switch-toggle-theme", + "type": "registry:ui", + "title": "Toggle Theme", + "description": "Switch Toggle Theme variant for switch.", + "registryDependencies": [ + "switch" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "switch/switch-toggle-theme.tsx", + "type": "registry:component", + "target": "@components/uiable/switch/switch-toggle-theme.tsx" + } + ], + "categories": [ + "switch" + ] + }, + { + "name": "uiable-switch-color-options", + "type": "registry:ui", + "title": "Color Options", + "description": "Switch Color Options variant for switch.", + "registryDependencies": [ + "switch" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "switch/switch-color-options.tsx", + "type": "registry:component", + "target": "@components/uiable/switch/switch-color-options.tsx" + } + ], + "categories": [ + "switch" + ] + }, + { + "name": "uiable-switch-outline", + "type": "registry:ui", + "title": "Outline Switch", + "description": "Switch Outline variant for switch.", + "registryDependencies": [ + "switch" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "switch/switch-outline.tsx", + "type": "registry:component", + "target": "@components/uiable/switch/switch-outline.tsx" + } + ], + "categories": [ + "switch" + ] + }, + { + "name": "uiable-switch-square", + "type": "registry:ui", + "title": "Square Switch", + "description": "Switch Square variant for switch.", + "registryDependencies": [ + "switch" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "switch/switch-square.tsx", + "type": "registry:component", + "target": "@components/uiable/switch/switch-square.tsx" + } + ], + "categories": [ + "switch" + ] + }, + { + "name": "uiable-textarea-helper-text", + "type": "registry:ui", + "title": "Textarea With Helper Text", + "description": "Textarea With Helper Text variant for textarea.", + "registryDependencies": [ + "textarea" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "textarea/textarea-helper-text.tsx", + "type": "registry:component", + "target": "@components/uiable/textarea/textarea-helper-text.tsx" + } + ], + "categories": [ + "textarea" + ] + }, + { + "name": "uiable-textarea-character-count", + "type": "registry:ui", + "title": "Character Count Textarea", + "description": "Textarea Character Count variant for textarea.", + "registryDependencies": [ + "textarea" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "textarea/textarea-character-count.tsx", + "type": "registry:component", + "target": "@components/uiable/textarea/textarea-character-count.tsx" + } + ], + "categories": [ + "textarea" + ] + }, + { + "name": "uiable-textarea-feedback", + "type": "registry:ui", + "title": "Feedback Textarea", + "description": "Textarea Feedback variant for textarea.", + "registryDependencies": [ + "textarea" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "textarea/textarea-feedback.tsx", + "type": "registry:component", + "target": "@components/uiable/textarea/textarea-feedback.tsx" + } + ], + "categories": [ + "textarea" + ] + }, + { + "name": "uiable-textarea-readonly", + "type": "registry:ui", + "title": "Readonly Textarea", + "description": "Textarea Readonly variant for textarea.", + "registryDependencies": [ + "textarea" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "textarea/textarea-readonly.tsx", + "type": "registry:component", + "target": "@components/uiable/textarea/textarea-readonly.tsx" + } + ], + "categories": [ + "textarea" + ] + }, + { + "name": "uiable-toggle-group-filled-icon", + "type": "registry:ui", + "title": "Filled Icon", + "description": "Toggle Group Filled Icon variant for toggle-group.", + "registryDependencies": [ + "toggle-group" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "toggle-group/toggle-group-filled-icon.tsx", + "type": "registry:component", + "target": "@components/uiable/toggle-group/toggle-group-filled-icon.tsx" + } + ], + "categories": [ + "toggle-group" + ] + }, + { + "name": "uiable-toggle-icon", + "type": "registry:ui", + "title": "Icon Toggle", + "description": "Icon Toggle variant for toggle.", + "registryDependencies": [ + "toggle" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "toggle/toggle-icon.tsx", + "type": "registry:component", + "target": "@components/uiable/toggle/toggle-icon.tsx" + } + ], + "categories": [ + "toggle" + ] + }, + { + "name": "uiable-toggle-animated", + "type": "registry:ui", + "title": "Animated Toggle", + "description": "Animated Toggle variant for toggle.", + "registryDependencies": [ + "toggle" + ], + "badge": { + "label": "New" + }, + "files": [ + { + "path": "toggle/toggle-animated.tsx", + "type": "registry:component", + "target": "@components/uiable/toggle/toggle-animated.tsx" + } + ], + "categories": [ + "toggle" + ] } ] } \ No newline at end of file diff --git a/src/components/uiable/select/select-clearable.tsx b/src/components/uiable/select/select-clearable.tsx new file mode 100644 index 0000000..6faaaad --- /dev/null +++ b/src/components/uiable/select/select-clearable.tsx @@ -0,0 +1,79 @@ +"use client" + +import { useState } from "react" +// assets +import { X } from "lucide-react" + +// shadcn +import { Button } from "@/components/ui/button" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" + +const categories = [ + { label: "Engineering", value: "engineering" }, + { label: "Design", value: "design" }, + { label: "Product Management", value: "product" }, + { label: "Marketing", value: "marketing" }, + { label: "Customer Success", value: "support" }, +] + +// ------------------------------ | SELECT - CLEARABLE | ------------------------------ // + +export function SelectClearable() { + const [value, setValue] = useState("design") + + const selectedCategory = categories.find((item) => item.value === value) + + return ( +
+ + {value && ( + + )} +
+ ) +} diff --git a/src/components/uiable/select/select-with-icons.tsx b/src/components/uiable/select/select-with-icons.tsx new file mode 100644 index 0000000..ab97311 --- /dev/null +++ b/src/components/uiable/select/select-with-icons.tsx @@ -0,0 +1,89 @@ +"use client" + +import { useState } from "react" +// assets +import { Building2, Coins, CreditCard, Smartphone, Wallet } from "lucide-react" + +// shadcn +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" + +const paymentMethods = [ + { + label: "Credit Card", + value: "card", + icon: CreditCard, + description: "Visa, Mastercard, Amex", + }, + { + label: "PayPal", + value: "paypal", + icon: Wallet, + description: "Fast & secure checkout", + }, + { + label: "Bank Transfer", + value: "bank", + icon: Building2, + description: "Direct account transfer", + }, + { + label: "Apple Pay", + value: "apple", + icon: Smartphone, + description: "One-touch mobile payment", + }, + { + label: "Cryptocurrency", + value: "crypto", + icon: Coins, + description: "BTC, ETH, USDC", + }, +] + +// ------------------------------ | SELECT - WITH ICONS | ------------------------------ // + +export function SelectWithIcons() { + const [value, setValue] = useState("card") + const selectedMethod = paymentMethods.find((item) => item.value === value) + + return ( + + ) +} diff --git a/src/components/uiable/select/select-with-status.tsx b/src/components/uiable/select/select-with-status.tsx new file mode 100644 index 0000000..ba9747d --- /dev/null +++ b/src/components/uiable/select/select-with-status.tsx @@ -0,0 +1,84 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { Badge } from "@/components/ui/badge" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" + +const statuses = [ + { + label: "Backlog", + value: "backlog", + dotColor: "bg-slate-400 dark:bg-slate-500", + }, + { + label: "In Progress", + value: "in-progress", + dotColor: "bg-blue-500", + }, + { + label: "Under Review", + value: "under-review", + dotColor: "bg-amber-500", + }, + { + label: "Completed", + value: "completed", + dotColor: "bg-emerald-500", + }, + { + label: "Cancelled", + value: "cancelled", + dotColor: "bg-rose-500", + }, +] + +// ------------------------------ | SELECT - WITH STATUS | ------------------------------ // + +export function SelectWithStatus() { + const [value, setValue] = useState("in-progress") + const selectedStatus = statuses.find((s) => s.value === value) + + return ( + + ) +} diff --git a/src/components/uiable/select/select-with-users.tsx b/src/components/uiable/select/select-with-users.tsx new file mode 100644 index 0000000..220f05d --- /dev/null +++ b/src/components/uiable/select/select-with-users.tsx @@ -0,0 +1,115 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" + +const users = [ + { + label: "Olivia Martin", + name: "Olivia Martin", + value: "olivia", + role: "Product Designer", + initials: "OM", + color: + "bg-blue-500/15 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300", + }, + { + label: "Jackson Lee", + name: "Jackson Lee", + value: "jackson", + role: "Frontend Lead", + initials: "JL", + color: + "bg-purple-500/15 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300", + }, + { + label: "Isabella Nguyen", + name: "Isabella Nguyen", + value: "isabella", + role: "UX Researcher", + initials: "IN", + color: + "bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300", + }, + { + label: "William Kim", + name: "William Kim", + value: "william", + role: "DevOps Engineer", + initials: "WK", + color: + "bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300", + }, + { + label: "Sofia Davis", + name: "Sofia Davis", + value: "sofia", + role: "Product Manager", + initials: "SD", + color: + "bg-rose-500/15 text-rose-700 dark:bg-rose-500/20 dark:text-rose-300", + }, +] + +// ------------------------------ | SELECT - WITH USERS | ------------------------------ // + +export function SelectWithUsers() { + const [value, setValue] = useState("olivia") + const selectedUser = users.find((u) => u.value === value) + + return ( + + ) +} diff --git a/src/components/uiable/slider/slider-color-options.tsx b/src/components/uiable/slider/slider-color-options.tsx new file mode 100644 index 0000000..2e7b64c --- /dev/null +++ b/src/components/uiable/slider/slider-color-options.tsx @@ -0,0 +1,90 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { Label } from "@/components/ui/label" +import { Slider } from "@/components/ui/slider" + +// ------------------------------ | SLIDER - COLOR OPTIONS | ------------------------------ // + +export function SliderColorOptions() { + const [values, setValues] = useState({ + green: 80, + amber: 40, + error: 75, + }) + + const getValue = (val: number | readonly number[]) => + Array.isArray(val) ? val[0] : val + + return ( +
+ {/* Green */} +
+
+ + + {values.green}% + +
+ + setValues((prev) => ({ + ...prev, + green: getValue(val), + })) + } + max={100} + step={1} + className="[&_[data-slot=slider-range]]:bg-green-500 [&_[data-slot=slider-thumb]]:border-green-500 [&_[data-slot=slider-thumb]]:ring-green-500/30" + /> +
+ + {/* Amber */} +
+
+ + + {values.amber}% + +
+ + setValues((prev) => ({ + ...prev, + amber: getValue(val), + })) + } + max={100} + step={1} + className="[&_[data-slot=slider-range]]:bg-amber-500 [&_[data-slot=slider-thumb]]:border-amber-500 [&_[data-slot=slider-thumb]]:ring-amber-500/30" + /> +
+ + {/* Error */} +
+
+ + + {values.error}% + +
+ + setValues((prev) => ({ + ...prev, + error: getValue(val), + })) + } + max={100} + step={1} + className="[&_[data-slot=slider-range]]:bg-red-500 [&_[data-slot=slider-thumb]]:border-red-500 [&_[data-slot=slider-thumb]]:ring-red-500/30" + /> +
+
+ ) +} diff --git a/src/components/uiable/switch/switch-color-options.tsx b/src/components/uiable/switch/switch-color-options.tsx new file mode 100644 index 0000000..c516756 --- /dev/null +++ b/src/components/uiable/switch/switch-color-options.tsx @@ -0,0 +1,87 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { + Field, + FieldContent, + FieldGroup, + FieldLabel, +} from "@/components/ui/field" +import { Switch } from "@/components/ui/switch" + +// ------------------------------ | SWITCH - COLOR OPTIONS | ------------------------------ // + +export function SwitchColorOptions() { + const [states, setStates] = useState({ + success: true, + info: true, + warning: true, + danger: true, + }) + + return ( + + {/* Success */} + + + Success + + + setStates((prev) => ({ ...prev, success: checked })) + } + className="focus-visible:ring-green-500/50 data-checked:bg-green-500 data-checked:ring-green-500" + /> + + + {/* Info */} + + + Info + + + setStates((prev) => ({ ...prev, info: checked })) + } + className="focus-visible:ring-cyan-500/50 data-checked:bg-cyan-500 data-checked:ring-cyan-500" + /> + + + {/* Warning */} + + + Warning + + + setStates((prev) => ({ ...prev, warning: checked })) + } + className="focus-visible:ring-yellow-500/50 data-checked:bg-yellow-500 data-checked:ring-yellow-500" + /> + + + {/* Danger */} + + + Danger + + + setStates((prev) => ({ ...prev, danger: checked })) + } + className="focus-visible:ring-red-500/50 data-checked:bg-red-500 data-checked:ring-red-500" + /> + + + ) +} diff --git a/src/components/uiable/switch/switch-outline.tsx b/src/components/uiable/switch/switch-outline.tsx new file mode 100644 index 0000000..9d856ab --- /dev/null +++ b/src/components/uiable/switch/switch-outline.tsx @@ -0,0 +1,87 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { + Field, + FieldContent, + FieldGroup, + FieldLabel, +} from "@/components/ui/field" +import { Switch } from "@/components/ui/switch" + +// ------------------------------ | SWITCH - OUTLINE | ------------------------------ // + +export function SwitchOutline() { + const [states, setStates] = useState({ + success: true, + info: true, + warning: true, + danger: true, + }) + + return ( + + {/* Success */} + + + Success + + + setStates((prev) => ({ ...prev, success: checked })) + } + className="border border-green-500 ring-0 data-checked:bg-transparent data-checked:ring-0 [&_[data-slot=switch-thumb]]:data-checked:bg-green-500 [&_[data-slot=switch-thumb]]:data-unchecked:translate-x-0.5" + /> + + + {/* Info */} + + + Info + + + setStates((prev) => ({ ...prev, info: checked })) + } + className="border border-cyan-500 ring-0 data-checked:bg-transparent data-checked:ring-0 [&_[data-slot=switch-thumb]]:data-checked:bg-cyan-500 [&_[data-slot=switch-thumb]]:data-unchecked:translate-x-0.5" + /> + + + {/* Warning */} + + + Warning + + + setStates((prev) => ({ ...prev, warning: checked })) + } + className="border border-yellow-500 ring-0 data-checked:bg-transparent data-checked:ring-0 [&_[data-slot=switch-thumb]]:data-checked:bg-yellow-500 [&_[data-slot=switch-thumb]]:data-unchecked:translate-x-0.5" + /> + + + {/* Danger */} + + + Danger + + + setStates((prev) => ({ ...prev, danger: checked })) + } + className="border border-red-500 ring-0 data-checked:bg-transparent data-checked:ring-0 [&_[data-slot=switch-thumb]]:data-checked:bg-red-500 [&_[data-slot=switch-thumb]]:data-unchecked:translate-x-0.5" + /> + + + ) +} diff --git a/src/components/uiable/switch/switch-square.tsx b/src/components/uiable/switch/switch-square.tsx new file mode 100644 index 0000000..bab5de1 --- /dev/null +++ b/src/components/uiable/switch/switch-square.tsx @@ -0,0 +1,65 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { + Field, + FieldContent, + FieldGroup, + FieldLabel, +} from "@/components/ui/field" +import { Switch } from "@/components/ui/switch" + +// ------------------------------ | SWITCH - SQUARE | ------------------------------ // + +export function SwitchSquare() { + const [sharp, setSharp] = useState(true) + const [roundedSquare, setRoundedSquare] = useState(false) + const [softSquare, setSoftSquare] = useState(true) + + return ( + + {/* Sharp Square */} + + + Sharp square + + + + + {/* Rounded Square */} + + + + Rounded square + + + + + + {/* Soft Square */} + + + Soft square + + + + + ) +} diff --git a/src/components/uiable/switch/switch-toggle-theme.tsx b/src/components/uiable/switch/switch-toggle-theme.tsx new file mode 100644 index 0000000..260d19d --- /dev/null +++ b/src/components/uiable/switch/switch-toggle-theme.tsx @@ -0,0 +1,54 @@ +"use client" + +import { useState } from "react" +// assets +import { Moon, Sun } from "lucide-react" + +// projects +import { cn } from "@/lib/utils" +// shadcn +import { Button } from "@/components/ui/button" +import { Switch } from "@/components/ui/switch" + +// ------------------------------ | SWITCH - TOGGLE THEME | ------------------------------ // + +export function SwitchToggleTheme() { + const [darkBetween, setDarkBetween] = useState(true) + + return ( +
+ + + +
+ ) +} diff --git a/src/components/uiable/textarea/textarea-character-count.tsx b/src/components/uiable/textarea/textarea-character-count.tsx new file mode 100644 index 0000000..1cfadad --- /dev/null +++ b/src/components/uiable/textarea/textarea-character-count.tsx @@ -0,0 +1,35 @@ +"use client" + +import { useState } from "react" + +// shadcn +import { Field, FieldDescription, FieldLabel } from "@/components/ui/field" +import { Textarea } from "@/components/ui/textarea" + +// ------------------------------ | TEXTAREA - CHARACTER COUNT | ------------------------------ // + +export function TextareaCharacterCount() { + const [text, setText] = useState("") + const maxLength = 200 + + return ( + + Short Biography +