@alkimi.org/ui-kit 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.github.md +45 -218
- package/dist/{chunk-SVWC2KRP.js → chunk-5CDUAMIG.js} +2 -2
- package/dist/{chunk-SVWC2KRP.js.map → chunk-5CDUAMIG.js.map} +1 -1
- package/dist/{chunk-BCAQUOTY.mjs → chunk-AXL7HSZW.mjs} +2 -2
- package/dist/{chunk-BCAQUOTY.mjs.map → chunk-AXL7HSZW.mjs.map} +1 -1
- package/dist/chunk-JK6CQDLQ.mjs +3 -0
- package/dist/chunk-JK6CQDLQ.mjs.map +1 -0
- package/dist/{chunk-WJXJQZGO.js → chunk-LX3KCZOW.js} +2 -2
- package/dist/{chunk-WJXJQZGO.js.map → chunk-LX3KCZOW.js.map} +1 -1
- package/dist/chunk-SIGGW2CQ.js +3 -0
- package/dist/{chunk-74PDRKS7.js.map → chunk-SIGGW2CQ.js.map} +1 -1
- package/dist/chunk-V5ORUPUF.mjs +3 -0
- package/dist/chunk-V5ORUPUF.mjs.map +1 -0
- package/dist/components/TextDecoder.js +1 -1
- package/dist/components/TextDecoder.mjs +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/button.mjs +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/tabs.mjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-2XHWLYXD.mjs +0 -3
- package/dist/chunk-2XHWLYXD.mjs.map +0 -1
- package/dist/chunk-74PDRKS7.js +0 -3
- package/dist/chunk-XNHJPYUV.mjs +0 -3
- package/dist/chunk-XNHJPYUV.mjs.map +0 -1
package/README.github.md
CHANGED
|
@@ -65,17 +65,20 @@ Create your `globals.css`:
|
|
|
65
65
|
/* Optional: Override library CSS variables */
|
|
66
66
|
:root {
|
|
67
67
|
/* Example: Custom primary color */
|
|
68
|
-
--primary:
|
|
69
|
-
--primary-foreground:
|
|
68
|
+
--primary: 140 100% 97.1%;
|
|
69
|
+
--primary-foreground: 240 6% 10%;
|
|
70
70
|
|
|
71
71
|
/* You can override any of these variables:
|
|
72
72
|
--secondary, --secondary-foreground
|
|
73
73
|
--background, --foreground
|
|
74
|
-
--muted, --muted-foreground
|
|
74
|
+
--muted, --muted-foreground, --bg-muted
|
|
75
75
|
--accent, --accent-foreground
|
|
76
76
|
--destructive, --destructive-foreground
|
|
77
77
|
--border, --input, --ring
|
|
78
|
+
--primary-accent
|
|
78
79
|
--radius (border radius)
|
|
80
|
+
|
|
81
|
+
Format: H S% L% (Hue Saturation% Lightness%)
|
|
79
82
|
*/
|
|
80
83
|
}
|
|
81
84
|
```
|
|
@@ -143,26 +146,28 @@ Create your `globals.css`:
|
|
|
143
146
|
@source "../node_modules/@alkimi.org/ui-kit/dist/**/*.{js,mjs}";
|
|
144
147
|
|
|
145
148
|
/* REQUIRED: Define ALL CSS variables the library needs */
|
|
149
|
+
/* Format: H S% L% (Hue Saturation% Lightness%) */
|
|
146
150
|
:root {
|
|
147
|
-
--background:
|
|
148
|
-
--foreground:
|
|
149
|
-
--card:
|
|
150
|
-
--card-foreground:
|
|
151
|
-
--popover:
|
|
152
|
-
--popover-foreground:
|
|
153
|
-
--primary:
|
|
154
|
-
--primary-foreground:
|
|
155
|
-
--
|
|
156
|
-
--secondary
|
|
157
|
-
--
|
|
158
|
-
--muted
|
|
159
|
-
--
|
|
160
|
-
--accent
|
|
161
|
-
--
|
|
162
|
-
--destructive
|
|
163
|
-
--
|
|
164
|
-
--
|
|
165
|
-
--
|
|
151
|
+
--background: 240 10% 4%;
|
|
152
|
+
--foreground: 144 100% 97%;
|
|
153
|
+
--card: 0 0% 3.5%;
|
|
154
|
+
--card-foreground: 140 100% 97.1%;
|
|
155
|
+
--popover: 0 0% 3.5%;
|
|
156
|
+
--popover-foreground: 140 100% 97.1%;
|
|
157
|
+
--primary: 140 100% 97.1%;
|
|
158
|
+
--primary-foreground: 240 6% 10%;
|
|
159
|
+
--primary-accent: 140 100% 97.1%;
|
|
160
|
+
--secondary: 240 4.5% 15.88%;
|
|
161
|
+
--secondary-foreground: 140 100% 97.1%;
|
|
162
|
+
--muted: 240 10% 3.92%; /* #09090B */
|
|
163
|
+
--muted-foreground: 144 4.3% 54.9%;
|
|
164
|
+
--accent: 0 0% 15.3%;
|
|
165
|
+
--accent-foreground: 140 100% 97.1%;
|
|
166
|
+
--destructive: 0 62.8% 30.6%;
|
|
167
|
+
--destructive-foreground: 140 100% 97.1%;
|
|
168
|
+
--border: 240 3.7% 27.6%;
|
|
169
|
+
--input: 240 3.7% 27.6%;
|
|
170
|
+
--ring: 140 100% 97.1%;
|
|
166
171
|
--radius: 0.625rem;
|
|
167
172
|
--font-family: "Helvetica Now Display", "Helvetica", sans-serif;
|
|
168
173
|
}
|
|
@@ -246,64 +251,12 @@ Make sure to include your custom font using `@font-face` or a web font service l
|
|
|
246
251
|
|
|
247
252
|
You can import components in two ways:
|
|
248
253
|
|
|
249
|
-
### Option 1: Import from Main Package
|
|
250
|
-
|
|
251
|
-
```tsx
|
|
252
|
-
import { Button, Card } from "@alkimi.org/ui-kit"
|
|
253
|
-
```
|
|
254
|
+
### Option 1: Import from Main Package
|
|
254
255
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
For better code splitting and smaller production bundles, import components individually:
|
|
256
|
+
Import all components from the main package entry point:
|
|
258
257
|
|
|
259
258
|
```tsx
|
|
260
|
-
|
|
261
|
-
import { Button } from "@alkimi.org/ui-kit/button"
|
|
262
|
-
|
|
263
|
-
// Import only the Tabs components
|
|
264
|
-
import {
|
|
265
|
-
Tabs,
|
|
266
|
-
TabsList,
|
|
267
|
-
TabsTrigger,
|
|
268
|
-
TabsContent,
|
|
269
|
-
} from "@alkimi.org/ui-kit/tabs"
|
|
270
|
-
|
|
271
|
-
// Import utilities
|
|
272
|
-
import { cn } from "@alkimi.org/ui-kit/utils"
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
**Note**: Both import methods require installing the full `@alkimi.org/ui-kit` package. The individual imports help optimize your production bundle size (only used components are included), but don't reduce installation size.
|
|
276
|
-
|
|
277
|
-
### Available Component Paths
|
|
278
|
-
|
|
279
|
-
- `@alkimi.org/ui-kit/button` - Button component
|
|
280
|
-
- `@alkimi.org/ui-kit/tabs` - Tabs components (with animated sliding indicator)
|
|
281
|
-
- `@alkimi.org/ui-kit/text-decoder` - TextDecoder component
|
|
282
|
-
- `@alkimi.org/ui-kit/glitch-link` - GlitchLink component (requires Next.js)
|
|
283
|
-
- `@alkimi.org/ui-kit/pixel-load` - PixelLoad component (requires Next.js)
|
|
284
|
-
- `@alkimi.org/ui-kit/utils` - Utility functions
|
|
285
|
-
|
|
286
|
-
### Next.js Components
|
|
287
|
-
|
|
288
|
-
Some components require Next.js to be installed:
|
|
289
|
-
|
|
290
|
-
```bash
|
|
291
|
-
npm install next
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
Then you can use:
|
|
295
|
-
|
|
296
|
-
```tsx
|
|
297
|
-
import GlitchLink from "@alkimi.org/ui-kit/glitch-link"
|
|
298
|
-
import { PixelLoad } from "@alkimi.org/ui-kit/pixel-load"
|
|
299
|
-
```
|
|
300
|
-
|
|
301
|
-
> **Note:** If you're not using Next.js, you can still use all other components. Next.js is marked as an optional peer dependency.
|
|
302
|
-
|
|
303
|
-
### Button Component
|
|
304
|
-
|
|
305
|
-
```tsx
|
|
306
|
-
import { Button } from "@alkimi.org/ui-kit/button"
|
|
259
|
+
import { Button, Tabs } from "@alkimi.org/ui-kit"
|
|
307
260
|
|
|
308
261
|
function App() {
|
|
309
262
|
return (
|
|
@@ -321,153 +274,27 @@ function App() {
|
|
|
321
274
|
}
|
|
322
275
|
```
|
|
323
276
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
To add more shadcn/ui components to this library:
|
|
327
|
-
|
|
328
|
-
1. Use the shadcn CLI to add components:
|
|
329
|
-
|
|
330
|
-
```bash
|
|
331
|
-
npx shadcn-ui@latest add [component-name]
|
|
332
|
-
```
|
|
333
|
-
|
|
334
|
-
2. Export the new component in [src/index.ts](src/index.ts):
|
|
335
|
-
|
|
336
|
-
```tsx
|
|
337
|
-
export { ComponentName } from "./components/component-name"
|
|
338
|
-
```
|
|
339
|
-
|
|
340
|
-
3. Create a story file in the `stories/` folder:
|
|
341
|
-
|
|
342
|
-
```tsx
|
|
343
|
-
// stories/ComponentName.stories.tsx
|
|
344
|
-
import type { Meta, StoryObj } from "@storybook/react"
|
|
345
|
-
import { ComponentName } from "../src/components/component-name"
|
|
346
|
-
|
|
347
|
-
const meta = {
|
|
348
|
-
title: "Components/ComponentName",
|
|
349
|
-
component: ComponentName,
|
|
350
|
-
parameters: {
|
|
351
|
-
layout: "centered",
|
|
352
|
-
},
|
|
353
|
-
tags: ["autodocs"],
|
|
354
|
-
} satisfies Meta<typeof ComponentName>
|
|
355
|
-
|
|
356
|
-
export default meta
|
|
357
|
-
type Story = StoryObj<typeof meta>
|
|
358
|
-
|
|
359
|
-
export const Default: Story = {
|
|
360
|
-
args: {
|
|
361
|
-
// your component props
|
|
362
|
-
},
|
|
363
|
-
}
|
|
364
|
-
```
|
|
365
|
-
|
|
366
|
-
4. Test locally with Storybook:
|
|
367
|
-
|
|
368
|
-
```bash
|
|
369
|
-
npm run storybook
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
5. Commit and push to main:
|
|
373
|
-
|
|
374
|
-
```bash
|
|
375
|
-
git add .
|
|
376
|
-
git commit -m "feat: add ComponentName"
|
|
377
|
-
git push
|
|
378
|
-
```
|
|
379
|
-
|
|
380
|
-
6. Update the Storybook deployment:
|
|
381
|
-
|
|
382
|
-
```bash
|
|
383
|
-
git checkout storybook
|
|
384
|
-
git merge main
|
|
385
|
-
git push
|
|
386
|
-
```
|
|
387
|
-
|
|
388
|
-
Vercel will automatically rebuild and deploy the updated Storybook.
|
|
389
|
-
|
|
390
|
-
7. (Optional) Publish to npm:
|
|
391
|
-
```bash
|
|
392
|
-
git checkout main
|
|
393
|
-
# Update version in package.json
|
|
394
|
-
npm run build
|
|
395
|
-
npm publish
|
|
396
|
-
```
|
|
397
|
-
|
|
398
|
-
## Development
|
|
399
|
-
|
|
400
|
-
### Running the Demo
|
|
401
|
-
|
|
402
|
-
To see the components in action, run the demo application:
|
|
403
|
-
|
|
404
|
-
```bash
|
|
405
|
-
cd demo
|
|
406
|
-
npm install
|
|
407
|
-
npm run dev
|
|
408
|
-
```
|
|
409
|
-
|
|
410
|
-
Then open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
411
|
-
|
|
412
|
-
The demo showcases all available components with interactive examples, including:
|
|
413
|
-
|
|
414
|
-
- All button variants and sizes
|
|
415
|
-
- Card layouts and compositions
|
|
416
|
-
- Dark mode toggle
|
|
417
|
-
- Interactive component states
|
|
418
|
-
|
|
419
|
-
### Build
|
|
420
|
-
|
|
421
|
-
Build the library for production:
|
|
422
|
-
|
|
423
|
-
```bash
|
|
424
|
-
npm run build
|
|
425
|
-
```
|
|
426
|
-
|
|
427
|
-
### Watch Mode
|
|
428
|
-
|
|
429
|
-
Build the library in watch mode during development:
|
|
430
|
-
|
|
431
|
-
```bash
|
|
432
|
-
npm run dev
|
|
433
|
-
```
|
|
434
|
-
|
|
435
|
-
### Type Check
|
|
436
|
-
|
|
437
|
-
Run TypeScript type checking:
|
|
438
|
-
|
|
439
|
-
```bash
|
|
440
|
-
npm run type-check
|
|
441
|
-
```
|
|
442
|
-
|
|
443
|
-
### Storybook
|
|
444
|
-
|
|
445
|
-
View and develop components in isolation using Storybook:
|
|
446
|
-
|
|
447
|
-
```bash
|
|
448
|
-
npm run storybook
|
|
449
|
-
```
|
|
277
|
+
### Option 2: Import Individual Components (Optimized Bundle Size)
|
|
450
278
|
|
|
451
|
-
|
|
279
|
+
For better code splitting and smaller production bundles, import components individually:
|
|
452
280
|
|
|
453
|
-
|
|
281
|
+
```tsx
|
|
282
|
+
// Import only the Button component
|
|
283
|
+
import { Button } from "@alkimi.org/ui-kit/button"
|
|
454
284
|
|
|
455
|
-
|
|
285
|
+
// Import only the Tabs components
|
|
286
|
+
import {
|
|
287
|
+
Tabs,
|
|
288
|
+
TabsList,
|
|
289
|
+
TabsTrigger,
|
|
290
|
+
TabsContent,
|
|
291
|
+
} from "@alkimi.org/ui-kit/tabs"
|
|
456
292
|
|
|
457
|
-
|
|
458
|
-
|
|
293
|
+
// Import utilities
|
|
294
|
+
import { cn } from "@alkimi.org/ui-kit/utils"
|
|
459
295
|
```
|
|
460
296
|
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
## Publishing to npm
|
|
464
|
-
|
|
465
|
-
1. Update the version number in [package.json](package.json) (e.g., from `0.1.3` to `0.1.4`)
|
|
466
|
-
2. Build the library: `npm run build`
|
|
467
|
-
3. Login to npm (if not already logged in): `npm login`
|
|
468
|
-
4. Publish: `npm publish`
|
|
469
|
-
|
|
470
|
-
**Note:** Make sure to bump the version in [package.json](package.json) before publishing any changes to avoid conflicts with existing versions on npm.
|
|
297
|
+
**Note**: Both import methods require installing the full `@alkimi.org/ui-kit` package. The individual imports help optimize your production bundle size (only used components are included), but don't reduce installation size.
|
|
471
298
|
|
|
472
299
|
## License
|
|
473
300
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client";
|
|
2
|
-
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _jsxruntime = require('react/jsx-runtime');var D=["\\","-","?","/","#","!","_","+","<",">"],O=3,H=200,v=e=>e?e.split(" ").map(n=>n?D[Math.floor(Math.random()*D.length)].repeat(n.length):"").join(" "):"",d=e=>{if(typeof e=="string"||typeof e=="number")return String(e);if(Array.isArray(e))return e.map(d).join("");if(_react2.default.isValidElement(e)){let n=e.props,r="";return typeof n.text=="string"&&(r+=n.text),typeof n.label=="string"&&(r+=n.label),typeof n.title=="string"&&(r+=n.title),n.children&&(r+=d(n.children)),r}return""},p=(e,n,r)=>{if(typeof e=="string"||typeof e=="number"){let s=String(e),i="";for(let t=0;t<s.length;t++)r.current<n.length?(i+=n[r.current],r.current++):i+=s[t];return i}if(Array.isArray(e))return e.map((s,i)=>{let t=p(s,n,r);if(_react2.default.isValidElement(t)){let l=_react2.default.isValidElement(s)?s.key:null;if(t.key==null&&l==null)return _react2.default.cloneElement(t,{key:`decoded-${i}`});if(t.key==null&&l!=null)return _react2.default.cloneElement(t,{key:l})}return t});if(_react2.default.isValidElement(e)){let s=e.props,i={...s};if(typeof s.text=="string"){let t=s.text,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.text=l}if(typeof s.label=="string"){let t=s.label,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.label=l}if(typeof s.title=="string"){let t=s.title,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.title=l}return s.children&&(i.children=p(s.children,n,r)),_react2.default.cloneElement(e,i)}return e},I=({children:e,className:n,delay:r=0})=>{let[s,i]=_react.useState.call(void 0, null),[t,l]=_react.useState.call(void 0, !1),[o,u]=_react.useState.call(void 0, !0),k=_react.useRef.call(void 0, null),c=_react.useMemo.call(void 0, ()=>d(e),[e]),g=_react.useMemo.call(void 0, ()=>v(c),[c]);_react.useEffect.call(void 0, ()=>{if(!t&&c){let y=p(e,g,{current:0});i(y),u(!0)}},[e,g,t,c]),_react.useEffect.call(void 0, ()=>{if(!c){i(null),u(!1);return}if(t){u(!1);return}let N=k.current;if(!N)return;let y=0,f=null,h=null,R=new IntersectionObserver(T=>{T[0].isIntersecting&&!t&&(h=setTimeout(()=>{let C=p(e,g,{current:0});i(C),u(!0),f=setInterval(()=>{if(y++,y>=O)l(!0),u(!1),f&&clearInterval(f);else{let M=v(c),P=p(e,M,{current:0});i(P)}},H)},r),R.disconnect())},{threshold:.1});return R.observe(N),()=>{R.disconnect(),f&&clearInterval(f),h&&clearTimeout(h)}},[e,c,g,t,r]);let w=_react.useMemo.call(void 0, ()=>d(e),[e]);return _jsxruntime.jsxs.call(void 0, "span",{ref:k,"aria-label":w,className:_chunkFUYXCJOQjs.a.call(void 0, "
|
|
3
|
-
//# sourceMappingURL=chunk-
|
|
2
|
+
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _jsxruntime = require('react/jsx-runtime');var D=["\\","-","?","/","#","!","_","+","<",">"],O=3,H=200,v=e=>e?e.split(" ").map(n=>n?D[Math.floor(Math.random()*D.length)].repeat(n.length):"").join(" "):"",d=e=>{if(typeof e=="string"||typeof e=="number")return String(e);if(Array.isArray(e))return e.map(d).join("");if(_react2.default.isValidElement(e)){let n=e.props,r="";return typeof n.text=="string"&&(r+=n.text),typeof n.label=="string"&&(r+=n.label),typeof n.title=="string"&&(r+=n.title),n.children&&(r+=d(n.children)),r}return""},p=(e,n,r)=>{if(typeof e=="string"||typeof e=="number"){let s=String(e),i="";for(let t=0;t<s.length;t++)r.current<n.length?(i+=n[r.current],r.current++):i+=s[t];return i}if(Array.isArray(e))return e.map((s,i)=>{let t=p(s,n,r);if(_react2.default.isValidElement(t)){let l=_react2.default.isValidElement(s)?s.key:null;if(t.key==null&&l==null)return _react2.default.cloneElement(t,{key:`decoded-${i}`});if(t.key==null&&l!=null)return _react2.default.cloneElement(t,{key:l})}return t});if(_react2.default.isValidElement(e)){let s=e.props,i={...s};if(typeof s.text=="string"){let t=s.text,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.text=l}if(typeof s.label=="string"){let t=s.label,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.label=l}if(typeof s.title=="string"){let t=s.title,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.title=l}return s.children&&(i.children=p(s.children,n,r)),_react2.default.cloneElement(e,i)}return e},I=({children:e,className:n,delay:r=0})=>{let[s,i]=_react.useState.call(void 0, null),[t,l]=_react.useState.call(void 0, !1),[o,u]=_react.useState.call(void 0, !0),k=_react.useRef.call(void 0, null),c=_react.useMemo.call(void 0, ()=>d(e),[e]),g=_react.useMemo.call(void 0, ()=>v(c),[c]);_react.useEffect.call(void 0, ()=>{if(!t&&c){let y=p(e,g,{current:0});i(y),u(!0)}},[e,g,t,c]),_react.useEffect.call(void 0, ()=>{if(!c){i(null),u(!1);return}if(t){u(!1);return}let N=k.current;if(!N)return;let y=0,f=null,h=null,R=new IntersectionObserver(T=>{T[0].isIntersecting&&!t&&(h=setTimeout(()=>{let C=p(e,g,{current:0});i(C),u(!0),f=setInterval(()=>{if(y++,y>=O)l(!0),u(!1),f&&clearInterval(f);else{let M=v(c),P=p(e,M,{current:0});i(P)}},H)},r),R.disconnect())},{threshold:.1});return R.observe(N),()=>{R.disconnect(),f&&clearInterval(f),h&&clearTimeout(h)}},[e,c,g,t,r]);let w=_react.useMemo.call(void 0, ()=>d(e),[e]);return _jsxruntime.jsxs.call(void 0, "span",{ref:k,"aria-label":w,className:_chunkFUYXCJOQjs.a.call(void 0, "grid *:col-start-1 *:row-start-1",n),children:[_jsxruntime.jsx.call(void 0, "span",{className:_chunkFUYXCJOQjs.a.call(void 0, "transition-opacity duration-300",t?"opacity-100":"opacity-0"),children:e}),o&&s&&_jsxruntime.jsx.call(void 0, "span",{className:"transition-opacity duration-300",children:s})]})},J=e=>_jsxruntime.jsx.call(void 0, _react.Suspense,{fallback:_jsxruntime.jsx.call(void 0, "span",{className:_chunkFUYXCJOQjs.a.call(void 0, "opacity-0",e.className),children:e.children}),children:_jsxruntime.jsx.call(void 0, I,{...e})}),q= exports.a =J;exports.a = q;
|
|
3
|
+
//# sourceMappingURL=chunk-5CDUAMIG.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-SVWC2KRP.js","../src/components/TextDecoder.tsx"],"names":["SYMBOLS","MAX_ITERATIONS","SPEED","scrambleText","input","word","extractText","node","React","props","result","scrambleReactNode","scrambledText","textStartIndex","text","scrambled","i","child","index","scrambledChild","originalKey"],"mappings":"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","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-SVWC2KRP.js","sourcesContent":[null,"\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n useState,\n useEffect,\n useMemo,\n useRef,\n Suspense,\n ReactNode,\n} from \"react\"\n\n// The symbols to use for the scrambling effect (moved outside to avoid recreation)\nconst SYMBOLS = [\"\\\\\", \"-\", \"?\", \"/\", \"#\", \"!\", \"_\", \"+\", \"<\", \">\"]\nconst MAX_ITERATIONS = 3 // How many times to scramble\nconst SPEED = 200 // Speed in milliseconds between scrambles\n\n// Helper function moved outside component to avoid recreation\nconst scrambleText = (input: string): string => {\n if (!input) return \"\"\n\n return input\n .split(\" \")\n .map((word: string) => {\n if (!word) return \"\"\n const randomSymbol = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]\n return randomSymbol.repeat(word.length)\n })\n .join(\" \")\n}\n\n// Extract text content from React nodes recursively\n// Also checks common text props like 'text', 'label', 'title', etc.\nconst extractText = (node: ReactNode): string => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n return String(node)\n }\n\n if (Array.isArray(node)) {\n return node.map(extractText).join(\"\")\n }\n\n if (React.isValidElement(node)) {\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n\n let result = \"\"\n\n // Extract text from props first (in order: text, label, title)\n if (typeof props.text === \"string\") {\n result += props.text\n }\n if (typeof props.label === \"string\") {\n result += props.label\n }\n if (typeof props.title === \"string\") {\n result += props.title\n }\n\n // Then extract from children\n if (props.children) {\n result += extractText(props.children)\n }\n\n return result\n }\n\n return \"\"\n}\n\n// Clone React nodes and replace text content with scrambled text\n// This function maps scrambled text back to the original structure\nconst scrambleReactNode = (\n node: ReactNode,\n scrambledText: string,\n textStartIndex: { current: number }\n): ReactNode => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n const text = String(node)\n // For each character in the original text, take the corresponding scrambled character\n // This preserves the length and structure\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n // Fallback if scrambled text is shorter (shouldn't happen, but safety check)\n scrambled += text[i]\n }\n }\n return scrambled\n }\n\n if (Array.isArray(node)) {\n return node.map((child, index) => {\n const scrambledChild = scrambleReactNode(\n child,\n scrambledText,\n textStartIndex\n )\n // Preserve original key if it exists, otherwise add one for React elements\n if (React.isValidElement(scrambledChild)) {\n const originalKey = React.isValidElement(child) ? child.key : null\n if (scrambledChild.key == null && originalKey == null) {\n return React.cloneElement(scrambledChild, { key: `decoded-${index}` })\n }\n // If original had a key but scrambled doesn't, preserve it\n if (scrambledChild.key == null && originalKey != null) {\n return React.cloneElement(scrambledChild, { key: originalKey })\n }\n }\n return scrambledChild\n })\n }\n\n if (React.isValidElement(node)) {\n // Regular element handling - works for all components\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n const newProps = { ...props }\n\n // Handle text props in the same order as extraction (text, label, title)\n if (typeof props.text === \"string\") {\n const text = props.text\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += text[i]\n }\n }\n newProps.text = scrambled\n }\n\n if (typeof props.label === \"string\") {\n const label = props.label\n let scrambled = \"\"\n for (let i = 0; i < label.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += label[i]\n }\n }\n newProps.label = scrambled\n }\n\n if (typeof props.title === \"string\") {\n const title = props.title\n let scrambled = \"\"\n for (let i = 0; i < title.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += title[i]\n }\n }\n newProps.title = scrambled\n }\n\n // Handle children after props\n if (props.children) {\n newProps.children = scrambleReactNode(\n props.children,\n scrambledText,\n textStartIndex\n )\n }\n return React.cloneElement(node, newProps)\n }\n\n return node\n}\n\nexport interface TextDecoderProps {\n children: ReactNode\n className?: string\n delay?: number // Delay in milliseconds before starting animation\n}\n\nconst TextDecoder = ({ children, className, delay = 0 }: TextDecoderProps) => {\n const [displayContent, setDisplayContent] = useState<ReactNode>(null)\n const [hasAnimated, setHasAnimated] = useState(false)\n const [showDecoded, setShowDecoded] = useState(true)\n const elementRef = useRef<HTMLSpanElement>(null)\n\n // Extract full text for scrambling\n const fullText = useMemo(() => extractText(children), [children])\n\n // Memoize initial scrambled text\n const initialScrambled = useMemo(() => scrambleText(fullText), [fullText])\n\n // Initialize with scrambled content to prevent layout shift\n useEffect(() => {\n if (!hasAnimated && fullText) {\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n }\n }, [children, initialScrambled, hasAnimated, fullText])\n\n useEffect(() => {\n if (!fullText) {\n setDisplayContent(null)\n setShowDecoded(false)\n return\n }\n\n // If already animated, hide decoded and show children\n if (hasAnimated) {\n setShowDecoded(false)\n return\n }\n\n const element = elementRef.current\n if (!element) return\n\n let iteration = 0\n let intervalId: NodeJS.Timeout | null = null\n let delayTimeoutId: NodeJS.Timeout | null = null\n\n // Intersection Observer to detect when element is visible\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0]\n if (entry.isIntersecting && !hasAnimated) {\n // Start animation after delay\n delayTimeoutId = setTimeout(() => {\n // 1. Initial scramble\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n\n // 2. Set up the interval\n intervalId = setInterval(() => {\n iteration++\n\n if (iteration >= MAX_ITERATIONS) {\n // Stop scrambling, fade out decoded and fade in children\n setHasAnimated(true)\n setShowDecoded(false)\n if (intervalId) clearInterval(intervalId)\n } else {\n // Continue scrambling\n const newScrambled = scrambleText(fullText)\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n newScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n }\n }, SPEED)\n }, delay)\n\n // Disconnect observer once animation starts\n observer.disconnect()\n }\n },\n {\n threshold: 0.1, // Trigger when 10% of the element is visible\n }\n )\n\n observer.observe(element)\n\n // Cleanup function\n return () => {\n observer.disconnect()\n if (intervalId) clearInterval(intervalId)\n if (delayTimeoutId) clearTimeout(delayTimeoutId)\n }\n }, [children, fullText, initialScrambled, hasAnimated, delay])\n\n const ariaLabel = useMemo(() => extractText(children), [children])\n\n return (\n <span\n ref={elementRef}\n aria-label={ariaLabel} // Accessibility: Screen readers read the real text\n className={cn(\"inline-grid *:col-start-1 *:row-start-1\", className)}\n >\n {/* Both elements in the same grid cell - prevents width changes */}\n <span\n className={cn(\n \"transition-opacity duration-300\",\n hasAnimated ? \"opacity-100\" : \"opacity-0\"\n )}\n >\n {children}\n </span>\n {/* Decoded animation overlay in the same grid cell */}\n {showDecoded && displayContent && (\n <span className=\"transition-opacity duration-300\">\n {displayContent}\n </span>\n )}\n </span>\n )\n}\n\nconst SuspenseDecodedText = (props: TextDecoderProps) => {\n return (\n <Suspense\n fallback={\n <span className={cn(\"opacity-0\", props.className)}>\n {props.children}\n </span>\n }\n >\n <TextDecoder {...props} />\n </Suspense>\n )\n}\n\nexport default SuspenseDecodedText\n"]}
|
|
1
|
+
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-5CDUAMIG.js","../src/components/TextDecoder.tsx"],"names":["SYMBOLS","MAX_ITERATIONS","SPEED","scrambleText","input","word","extractText","node","React","props","result","scrambleReactNode","scrambledText","textStartIndex","text","scrambled","i","child","index","scrambledChild","originalKey"],"mappings":"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","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-5CDUAMIG.js","sourcesContent":[null,"\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n useState,\n useEffect,\n useMemo,\n useRef,\n Suspense,\n ReactNode,\n} from \"react\"\n\n// The symbols to use for the scrambling effect (moved outside to avoid recreation)\nconst SYMBOLS = [\"\\\\\", \"-\", \"?\", \"/\", \"#\", \"!\", \"_\", \"+\", \"<\", \">\"]\nconst MAX_ITERATIONS = 3 // How many times to scramble\nconst SPEED = 200 // Speed in milliseconds between scrambles\n\n// Helper function moved outside component to avoid recreation\nconst scrambleText = (input: string): string => {\n if (!input) return \"\"\n\n return input\n .split(\" \")\n .map((word: string) => {\n if (!word) return \"\"\n const randomSymbol = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]\n return randomSymbol.repeat(word.length)\n })\n .join(\" \")\n}\n\n// Extract text content from React nodes recursively\n// Also checks common text props like 'text', 'label', 'title', etc.\nconst extractText = (node: ReactNode): string => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n return String(node)\n }\n\n if (Array.isArray(node)) {\n return node.map(extractText).join(\"\")\n }\n\n if (React.isValidElement(node)) {\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n\n let result = \"\"\n\n // Extract text from props first (in order: text, label, title)\n if (typeof props.text === \"string\") {\n result += props.text\n }\n if (typeof props.label === \"string\") {\n result += props.label\n }\n if (typeof props.title === \"string\") {\n result += props.title\n }\n\n // Then extract from children\n if (props.children) {\n result += extractText(props.children)\n }\n\n return result\n }\n\n return \"\"\n}\n\n// Clone React nodes and replace text content with scrambled text\n// This function maps scrambled text back to the original structure\nconst scrambleReactNode = (\n node: ReactNode,\n scrambledText: string,\n textStartIndex: { current: number }\n): ReactNode => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n const text = String(node)\n // For each character in the original text, take the corresponding scrambled character\n // This preserves the length and structure\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n // Fallback if scrambled text is shorter (shouldn't happen, but safety check)\n scrambled += text[i]\n }\n }\n return scrambled\n }\n\n if (Array.isArray(node)) {\n return node.map((child, index) => {\n const scrambledChild = scrambleReactNode(\n child,\n scrambledText,\n textStartIndex\n )\n // Preserve original key if it exists, otherwise add one for React elements\n if (React.isValidElement(scrambledChild)) {\n const originalKey = React.isValidElement(child) ? child.key : null\n if (scrambledChild.key == null && originalKey == null) {\n return React.cloneElement(scrambledChild, { key: `decoded-${index}` })\n }\n // If original had a key but scrambled doesn't, preserve it\n if (scrambledChild.key == null && originalKey != null) {\n return React.cloneElement(scrambledChild, { key: originalKey })\n }\n }\n return scrambledChild\n })\n }\n\n if (React.isValidElement(node)) {\n // Regular element handling - works for all components\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n const newProps = { ...props }\n\n // Handle text props in the same order as extraction (text, label, title)\n if (typeof props.text === \"string\") {\n const text = props.text\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += text[i]\n }\n }\n newProps.text = scrambled\n }\n\n if (typeof props.label === \"string\") {\n const label = props.label\n let scrambled = \"\"\n for (let i = 0; i < label.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += label[i]\n }\n }\n newProps.label = scrambled\n }\n\n if (typeof props.title === \"string\") {\n const title = props.title\n let scrambled = \"\"\n for (let i = 0; i < title.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += title[i]\n }\n }\n newProps.title = scrambled\n }\n\n // Handle children after props\n if (props.children) {\n newProps.children = scrambleReactNode(\n props.children,\n scrambledText,\n textStartIndex\n )\n }\n return React.cloneElement(node, newProps)\n }\n\n return node\n}\n\nexport interface TextDecoderProps {\n children: ReactNode\n className?: string\n delay?: number // Delay in milliseconds before starting animation\n}\n\nconst TextDecoder = ({ children, className, delay = 0 }: TextDecoderProps) => {\n const [displayContent, setDisplayContent] = useState<ReactNode>(null)\n const [hasAnimated, setHasAnimated] = useState(false)\n const [showDecoded, setShowDecoded] = useState(true)\n const elementRef = useRef<HTMLSpanElement>(null)\n\n // Extract full text for scrambling\n const fullText = useMemo(() => extractText(children), [children])\n\n // Memoize initial scrambled text\n const initialScrambled = useMemo(() => scrambleText(fullText), [fullText])\n\n // Initialize with scrambled content to prevent layout shift\n useEffect(() => {\n if (!hasAnimated && fullText) {\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n }\n }, [children, initialScrambled, hasAnimated, fullText])\n\n useEffect(() => {\n if (!fullText) {\n setDisplayContent(null)\n setShowDecoded(false)\n return\n }\n\n // If already animated, hide decoded and show children\n if (hasAnimated) {\n setShowDecoded(false)\n return\n }\n\n const element = elementRef.current\n if (!element) return\n\n let iteration = 0\n let intervalId: NodeJS.Timeout | null = null\n let delayTimeoutId: NodeJS.Timeout | null = null\n\n // Intersection Observer to detect when element is visible\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0]\n if (entry.isIntersecting && !hasAnimated) {\n // Start animation after delay\n delayTimeoutId = setTimeout(() => {\n // 1. Initial scramble\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n\n // 2. Set up the interval\n intervalId = setInterval(() => {\n iteration++\n\n if (iteration >= MAX_ITERATIONS) {\n // Stop scrambling, fade out decoded and fade in children\n setHasAnimated(true)\n setShowDecoded(false)\n if (intervalId) clearInterval(intervalId)\n } else {\n // Continue scrambling\n const newScrambled = scrambleText(fullText)\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n newScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n }\n }, SPEED)\n }, delay)\n\n // Disconnect observer once animation starts\n observer.disconnect()\n }\n },\n {\n threshold: 0.1, // Trigger when 10% of the element is visible\n }\n )\n\n observer.observe(element)\n\n // Cleanup function\n return () => {\n observer.disconnect()\n if (intervalId) clearInterval(intervalId)\n if (delayTimeoutId) clearTimeout(delayTimeoutId)\n }\n }, [children, fullText, initialScrambled, hasAnimated, delay])\n\n const ariaLabel = useMemo(() => extractText(children), [children])\n\n return (\n <span\n ref={elementRef}\n aria-label={ariaLabel} // Accessibility: Screen readers read the real text\n className={cn(\"grid *:col-start-1 *:row-start-1\", className)}\n >\n {/* Both elements in the same grid cell - prevents width changes */}\n <span\n className={cn(\n \"transition-opacity duration-300\",\n hasAnimated ? \"opacity-100\" : \"opacity-0\"\n )}\n >\n {children}\n </span>\n {/* Decoded animation overlay in the same grid cell */}\n {showDecoded && displayContent && (\n <span className=\"transition-opacity duration-300\">\n {displayContent}\n </span>\n )}\n </span>\n )\n}\n\nconst SuspenseDecodedText = (props: TextDecoderProps) => {\n return (\n <Suspense\n fallback={\n <span className={cn(\"opacity-0\", props.className)}>\n {props.children}\n </span>\n }\n >\n <TextDecoder {...props} />\n </Suspense>\n )\n}\n\nexport default SuspenseDecodedText\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{a as b}from"./chunk-S5TKCF6T.mjs";import a,{useState as E,useEffect as A,useMemo as S,useRef as V,Suspense as L}from"react";import{jsx as m,jsxs as _}from"react/jsx-runtime";var D=["\\","-","?","/","#","!","_","+","<",">"],O=3,H=200,v=e=>e?e.split(" ").map(n=>n?D[Math.floor(Math.random()*D.length)].repeat(n.length):"").join(" "):"",d=e=>{if(typeof e=="string"||typeof e=="number")return String(e);if(Array.isArray(e))return e.map(d).join("");if(a.isValidElement(e)){let n=e.props,r="";return typeof n.text=="string"&&(r+=n.text),typeof n.label=="string"&&(r+=n.label),typeof n.title=="string"&&(r+=n.title),n.children&&(r+=d(n.children)),r}return""},p=(e,n,r)=>{if(typeof e=="string"||typeof e=="number"){let s=String(e),i="";for(let t=0;t<s.length;t++)r.current<n.length?(i+=n[r.current],r.current++):i+=s[t];return i}if(Array.isArray(e))return e.map((s,i)=>{let t=p(s,n,r);if(a.isValidElement(t)){let l=a.isValidElement(s)?s.key:null;if(t.key==null&&l==null)return a.cloneElement(t,{key:`decoded-${i}`});if(t.key==null&&l!=null)return a.cloneElement(t,{key:l})}return t});if(a.isValidElement(e)){let s=e.props,i={...s};if(typeof s.text=="string"){let t=s.text,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.text=l}if(typeof s.label=="string"){let t=s.label,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.label=l}if(typeof s.title=="string"){let t=s.title,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.title=l}return s.children&&(i.children=p(s.children,n,r)),a.cloneElement(e,i)}return e},I=({children:e,className:n,delay:r=0})=>{let[s,i]=E(null),[t,l]=E(!1),[o,u]=E(!0),k=V(null),c=S(()=>d(e),[e]),g=S(()=>v(c),[c]);A(()=>{if(!t&&c){let y=p(e,g,{current:0});i(y),u(!0)}},[e,g,t,c]),A(()=>{if(!c){i(null),u(!1);return}if(t){u(!1);return}let N=k.current;if(!N)return;let y=0,f=null,h=null,R=new IntersectionObserver(T=>{T[0].isIntersecting&&!t&&(h=setTimeout(()=>{let C=p(e,g,{current:0});i(C),u(!0),f=setInterval(()=>{if(y++,y>=O)l(!0),u(!1),f&&clearInterval(f);else{let M=v(c),P=p(e,M,{current:0});i(P)}},H)},r),R.disconnect())},{threshold:.1});return R.observe(N),()=>{R.disconnect(),f&&clearInterval(f),h&&clearTimeout(h)}},[e,c,g,t,r]);let w=S(()=>d(e),[e]);return _("span",{ref:k,"aria-label":w,className:b("
|
|
3
|
-
//# sourceMappingURL=chunk-
|
|
2
|
+
import{a as b}from"./chunk-S5TKCF6T.mjs";import a,{useState as E,useEffect as A,useMemo as S,useRef as V,Suspense as L}from"react";import{jsx as m,jsxs as _}from"react/jsx-runtime";var D=["\\","-","?","/","#","!","_","+","<",">"],O=3,H=200,v=e=>e?e.split(" ").map(n=>n?D[Math.floor(Math.random()*D.length)].repeat(n.length):"").join(" "):"",d=e=>{if(typeof e=="string"||typeof e=="number")return String(e);if(Array.isArray(e))return e.map(d).join("");if(a.isValidElement(e)){let n=e.props,r="";return typeof n.text=="string"&&(r+=n.text),typeof n.label=="string"&&(r+=n.label),typeof n.title=="string"&&(r+=n.title),n.children&&(r+=d(n.children)),r}return""},p=(e,n,r)=>{if(typeof e=="string"||typeof e=="number"){let s=String(e),i="";for(let t=0;t<s.length;t++)r.current<n.length?(i+=n[r.current],r.current++):i+=s[t];return i}if(Array.isArray(e))return e.map((s,i)=>{let t=p(s,n,r);if(a.isValidElement(t)){let l=a.isValidElement(s)?s.key:null;if(t.key==null&&l==null)return a.cloneElement(t,{key:`decoded-${i}`});if(t.key==null&&l!=null)return a.cloneElement(t,{key:l})}return t});if(a.isValidElement(e)){let s=e.props,i={...s};if(typeof s.text=="string"){let t=s.text,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.text=l}if(typeof s.label=="string"){let t=s.label,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.label=l}if(typeof s.title=="string"){let t=s.title,l="";for(let o=0;o<t.length;o++)r.current<n.length?(l+=n[r.current],r.current++):l+=t[o];i.title=l}return s.children&&(i.children=p(s.children,n,r)),a.cloneElement(e,i)}return e},I=({children:e,className:n,delay:r=0})=>{let[s,i]=E(null),[t,l]=E(!1),[o,u]=E(!0),k=V(null),c=S(()=>d(e),[e]),g=S(()=>v(c),[c]);A(()=>{if(!t&&c){let y=p(e,g,{current:0});i(y),u(!0)}},[e,g,t,c]),A(()=>{if(!c){i(null),u(!1);return}if(t){u(!1);return}let N=k.current;if(!N)return;let y=0,f=null,h=null,R=new IntersectionObserver(T=>{T[0].isIntersecting&&!t&&(h=setTimeout(()=>{let C=p(e,g,{current:0});i(C),u(!0),f=setInterval(()=>{if(y++,y>=O)l(!0),u(!1),f&&clearInterval(f);else{let M=v(c),P=p(e,M,{current:0});i(P)}},H)},r),R.disconnect())},{threshold:.1});return R.observe(N),()=>{R.disconnect(),f&&clearInterval(f),h&&clearTimeout(h)}},[e,c,g,t,r]);let w=S(()=>d(e),[e]);return _("span",{ref:k,"aria-label":w,className:b("grid *:col-start-1 *:row-start-1",n),children:[m("span",{className:b("transition-opacity duration-300",t?"opacity-100":"opacity-0"),children:e}),o&&s&&m("span",{className:"transition-opacity duration-300",children:s})]})},J=e=>m(L,{fallback:m("span",{className:b("opacity-0",e.className),children:e.children}),children:m(I,{...e})}),q=J;export{q as a};
|
|
3
|
+
//# sourceMappingURL=chunk-AXL7HSZW.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TextDecoder.tsx"],"sourcesContent":["\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n useState,\n useEffect,\n useMemo,\n useRef,\n Suspense,\n ReactNode,\n} from \"react\"\n\n// The symbols to use for the scrambling effect (moved outside to avoid recreation)\nconst SYMBOLS = [\"\\\\\", \"-\", \"?\", \"/\", \"#\", \"!\", \"_\", \"+\", \"<\", \">\"]\nconst MAX_ITERATIONS = 3 // How many times to scramble\nconst SPEED = 200 // Speed in milliseconds between scrambles\n\n// Helper function moved outside component to avoid recreation\nconst scrambleText = (input: string): string => {\n if (!input) return \"\"\n\n return input\n .split(\" \")\n .map((word: string) => {\n if (!word) return \"\"\n const randomSymbol = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]\n return randomSymbol.repeat(word.length)\n })\n .join(\" \")\n}\n\n// Extract text content from React nodes recursively\n// Also checks common text props like 'text', 'label', 'title', etc.\nconst extractText = (node: ReactNode): string => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n return String(node)\n }\n\n if (Array.isArray(node)) {\n return node.map(extractText).join(\"\")\n }\n\n if (React.isValidElement(node)) {\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n\n let result = \"\"\n\n // Extract text from props first (in order: text, label, title)\n if (typeof props.text === \"string\") {\n result += props.text\n }\n if (typeof props.label === \"string\") {\n result += props.label\n }\n if (typeof props.title === \"string\") {\n result += props.title\n }\n\n // Then extract from children\n if (props.children) {\n result += extractText(props.children)\n }\n\n return result\n }\n\n return \"\"\n}\n\n// Clone React nodes and replace text content with scrambled text\n// This function maps scrambled text back to the original structure\nconst scrambleReactNode = (\n node: ReactNode,\n scrambledText: string,\n textStartIndex: { current: number }\n): ReactNode => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n const text = String(node)\n // For each character in the original text, take the corresponding scrambled character\n // This preserves the length and structure\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n // Fallback if scrambled text is shorter (shouldn't happen, but safety check)\n scrambled += text[i]\n }\n }\n return scrambled\n }\n\n if (Array.isArray(node)) {\n return node.map((child, index) => {\n const scrambledChild = scrambleReactNode(\n child,\n scrambledText,\n textStartIndex\n )\n // Preserve original key if it exists, otherwise add one for React elements\n if (React.isValidElement(scrambledChild)) {\n const originalKey = React.isValidElement(child) ? child.key : null\n if (scrambledChild.key == null && originalKey == null) {\n return React.cloneElement(scrambledChild, { key: `decoded-${index}` })\n }\n // If original had a key but scrambled doesn't, preserve it\n if (scrambledChild.key == null && originalKey != null) {\n return React.cloneElement(scrambledChild, { key: originalKey })\n }\n }\n return scrambledChild\n })\n }\n\n if (React.isValidElement(node)) {\n // Regular element handling - works for all components\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n const newProps = { ...props }\n\n // Handle text props in the same order as extraction (text, label, title)\n if (typeof props.text === \"string\") {\n const text = props.text\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += text[i]\n }\n }\n newProps.text = scrambled\n }\n\n if (typeof props.label === \"string\") {\n const label = props.label\n let scrambled = \"\"\n for (let i = 0; i < label.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += label[i]\n }\n }\n newProps.label = scrambled\n }\n\n if (typeof props.title === \"string\") {\n const title = props.title\n let scrambled = \"\"\n for (let i = 0; i < title.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += title[i]\n }\n }\n newProps.title = scrambled\n }\n\n // Handle children after props\n if (props.children) {\n newProps.children = scrambleReactNode(\n props.children,\n scrambledText,\n textStartIndex\n )\n }\n return React.cloneElement(node, newProps)\n }\n\n return node\n}\n\nexport interface TextDecoderProps {\n children: ReactNode\n className?: string\n delay?: number // Delay in milliseconds before starting animation\n}\n\nconst TextDecoder = ({ children, className, delay = 0 }: TextDecoderProps) => {\n const [displayContent, setDisplayContent] = useState<ReactNode>(null)\n const [hasAnimated, setHasAnimated] = useState(false)\n const [showDecoded, setShowDecoded] = useState(true)\n const elementRef = useRef<HTMLSpanElement>(null)\n\n // Extract full text for scrambling\n const fullText = useMemo(() => extractText(children), [children])\n\n // Memoize initial scrambled text\n const initialScrambled = useMemo(() => scrambleText(fullText), [fullText])\n\n // Initialize with scrambled content to prevent layout shift\n useEffect(() => {\n if (!hasAnimated && fullText) {\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n }\n }, [children, initialScrambled, hasAnimated, fullText])\n\n useEffect(() => {\n if (!fullText) {\n setDisplayContent(null)\n setShowDecoded(false)\n return\n }\n\n // If already animated, hide decoded and show children\n if (hasAnimated) {\n setShowDecoded(false)\n return\n }\n\n const element = elementRef.current\n if (!element) return\n\n let iteration = 0\n let intervalId: NodeJS.Timeout | null = null\n let delayTimeoutId: NodeJS.Timeout | null = null\n\n // Intersection Observer to detect when element is visible\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0]\n if (entry.isIntersecting && !hasAnimated) {\n // Start animation after delay\n delayTimeoutId = setTimeout(() => {\n // 1. Initial scramble\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n\n // 2. Set up the interval\n intervalId = setInterval(() => {\n iteration++\n\n if (iteration >= MAX_ITERATIONS) {\n // Stop scrambling, fade out decoded and fade in children\n setHasAnimated(true)\n setShowDecoded(false)\n if (intervalId) clearInterval(intervalId)\n } else {\n // Continue scrambling\n const newScrambled = scrambleText(fullText)\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n newScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n }\n }, SPEED)\n }, delay)\n\n // Disconnect observer once animation starts\n observer.disconnect()\n }\n },\n {\n threshold: 0.1, // Trigger when 10% of the element is visible\n }\n )\n\n observer.observe(element)\n\n // Cleanup function\n return () => {\n observer.disconnect()\n if (intervalId) clearInterval(intervalId)\n if (delayTimeoutId) clearTimeout(delayTimeoutId)\n }\n }, [children, fullText, initialScrambled, hasAnimated, delay])\n\n const ariaLabel = useMemo(() => extractText(children), [children])\n\n return (\n <span\n ref={elementRef}\n aria-label={ariaLabel} // Accessibility: Screen readers read the real text\n className={cn(\"inline-grid *:col-start-1 *:row-start-1\", className)}\n >\n {/* Both elements in the same grid cell - prevents width changes */}\n <span\n className={cn(\n \"transition-opacity duration-300\",\n hasAnimated ? \"opacity-100\" : \"opacity-0\"\n )}\n >\n {children}\n </span>\n {/* Decoded animation overlay in the same grid cell */}\n {showDecoded && displayContent && (\n <span className=\"transition-opacity duration-300\">\n {displayContent}\n </span>\n )}\n </span>\n )\n}\n\nconst SuspenseDecodedText = (props: TextDecoderProps) => {\n return (\n <Suspense\n fallback={\n <span className={cn(\"opacity-0\", props.className)}>\n {props.children}\n </span>\n }\n >\n <TextDecoder {...props} />\n </Suspense>\n )\n}\n\nexport default SuspenseDecodedText\n"],"mappings":"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","names":["React","useState","useEffect","useMemo","useRef","Suspense","jsx","jsxs","SYMBOLS","MAX_ITERATIONS","SPEED","scrambleText","input","word","extractText","node","props","result","scrambleReactNode","scrambledText","textStartIndex","text","scrambled","i","child","index","scrambledChild","originalKey","newProps","label","title","TextDecoder","children","className","delay","displayContent","setDisplayContent","hasAnimated","setHasAnimated","showDecoded","setShowDecoded","elementRef","fullText","initialScrambled","scrambledContent","element","iteration","intervalId","delayTimeoutId","observer","entries","newScrambled","ariaLabel","cn","SuspenseDecodedText","TextDecoder_default"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/TextDecoder.tsx"],"sourcesContent":["\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n useState,\n useEffect,\n useMemo,\n useRef,\n Suspense,\n ReactNode,\n} from \"react\"\n\n// The symbols to use for the scrambling effect (moved outside to avoid recreation)\nconst SYMBOLS = [\"\\\\\", \"-\", \"?\", \"/\", \"#\", \"!\", \"_\", \"+\", \"<\", \">\"]\nconst MAX_ITERATIONS = 3 // How many times to scramble\nconst SPEED = 200 // Speed in milliseconds between scrambles\n\n// Helper function moved outside component to avoid recreation\nconst scrambleText = (input: string): string => {\n if (!input) return \"\"\n\n return input\n .split(\" \")\n .map((word: string) => {\n if (!word) return \"\"\n const randomSymbol = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]\n return randomSymbol.repeat(word.length)\n })\n .join(\" \")\n}\n\n// Extract text content from React nodes recursively\n// Also checks common text props like 'text', 'label', 'title', etc.\nconst extractText = (node: ReactNode): string => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n return String(node)\n }\n\n if (Array.isArray(node)) {\n return node.map(extractText).join(\"\")\n }\n\n if (React.isValidElement(node)) {\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n\n let result = \"\"\n\n // Extract text from props first (in order: text, label, title)\n if (typeof props.text === \"string\") {\n result += props.text\n }\n if (typeof props.label === \"string\") {\n result += props.label\n }\n if (typeof props.title === \"string\") {\n result += props.title\n }\n\n // Then extract from children\n if (props.children) {\n result += extractText(props.children)\n }\n\n return result\n }\n\n return \"\"\n}\n\n// Clone React nodes and replace text content with scrambled text\n// This function maps scrambled text back to the original structure\nconst scrambleReactNode = (\n node: ReactNode,\n scrambledText: string,\n textStartIndex: { current: number }\n): ReactNode => {\n if (typeof node === \"string\" || typeof node === \"number\") {\n const text = String(node)\n // For each character in the original text, take the corresponding scrambled character\n // This preserves the length and structure\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n // Fallback if scrambled text is shorter (shouldn't happen, but safety check)\n scrambled += text[i]\n }\n }\n return scrambled\n }\n\n if (Array.isArray(node)) {\n return node.map((child, index) => {\n const scrambledChild = scrambleReactNode(\n child,\n scrambledText,\n textStartIndex\n )\n // Preserve original key if it exists, otherwise add one for React elements\n if (React.isValidElement(scrambledChild)) {\n const originalKey = React.isValidElement(child) ? child.key : null\n if (scrambledChild.key == null && originalKey == null) {\n return React.cloneElement(scrambledChild, { key: `decoded-${index}` })\n }\n // If original had a key but scrambled doesn't, preserve it\n if (scrambledChild.key == null && originalKey != null) {\n return React.cloneElement(scrambledChild, { key: originalKey })\n }\n }\n return scrambledChild\n })\n }\n\n if (React.isValidElement(node)) {\n // Regular element handling - works for all components\n const props = node.props as {\n children?: ReactNode\n text?: string\n label?: string\n title?: string\n [key: string]: unknown\n }\n const newProps = { ...props }\n\n // Handle text props in the same order as extraction (text, label, title)\n if (typeof props.text === \"string\") {\n const text = props.text\n let scrambled = \"\"\n for (let i = 0; i < text.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += text[i]\n }\n }\n newProps.text = scrambled\n }\n\n if (typeof props.label === \"string\") {\n const label = props.label\n let scrambled = \"\"\n for (let i = 0; i < label.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += label[i]\n }\n }\n newProps.label = scrambled\n }\n\n if (typeof props.title === \"string\") {\n const title = props.title\n let scrambled = \"\"\n for (let i = 0; i < title.length; i++) {\n if (textStartIndex.current < scrambledText.length) {\n scrambled += scrambledText[textStartIndex.current]\n textStartIndex.current++\n } else {\n scrambled += title[i]\n }\n }\n newProps.title = scrambled\n }\n\n // Handle children after props\n if (props.children) {\n newProps.children = scrambleReactNode(\n props.children,\n scrambledText,\n textStartIndex\n )\n }\n return React.cloneElement(node, newProps)\n }\n\n return node\n}\n\nexport interface TextDecoderProps {\n children: ReactNode\n className?: string\n delay?: number // Delay in milliseconds before starting animation\n}\n\nconst TextDecoder = ({ children, className, delay = 0 }: TextDecoderProps) => {\n const [displayContent, setDisplayContent] = useState<ReactNode>(null)\n const [hasAnimated, setHasAnimated] = useState(false)\n const [showDecoded, setShowDecoded] = useState(true)\n const elementRef = useRef<HTMLSpanElement>(null)\n\n // Extract full text for scrambling\n const fullText = useMemo(() => extractText(children), [children])\n\n // Memoize initial scrambled text\n const initialScrambled = useMemo(() => scrambleText(fullText), [fullText])\n\n // Initialize with scrambled content to prevent layout shift\n useEffect(() => {\n if (!hasAnimated && fullText) {\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n }\n }, [children, initialScrambled, hasAnimated, fullText])\n\n useEffect(() => {\n if (!fullText) {\n setDisplayContent(null)\n setShowDecoded(false)\n return\n }\n\n // If already animated, hide decoded and show children\n if (hasAnimated) {\n setShowDecoded(false)\n return\n }\n\n const element = elementRef.current\n if (!element) return\n\n let iteration = 0\n let intervalId: NodeJS.Timeout | null = null\n let delayTimeoutId: NodeJS.Timeout | null = null\n\n // Intersection Observer to detect when element is visible\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0]\n if (entry.isIntersecting && !hasAnimated) {\n // Start animation after delay\n delayTimeoutId = setTimeout(() => {\n // 1. Initial scramble\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n initialScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n setShowDecoded(true)\n\n // 2. Set up the interval\n intervalId = setInterval(() => {\n iteration++\n\n if (iteration >= MAX_ITERATIONS) {\n // Stop scrambling, fade out decoded and fade in children\n setHasAnimated(true)\n setShowDecoded(false)\n if (intervalId) clearInterval(intervalId)\n } else {\n // Continue scrambling\n const newScrambled = scrambleText(fullText)\n const textStartIndex = { current: 0 }\n const scrambledContent = scrambleReactNode(\n children,\n newScrambled,\n textStartIndex\n )\n setDisplayContent(scrambledContent)\n }\n }, SPEED)\n }, delay)\n\n // Disconnect observer once animation starts\n observer.disconnect()\n }\n },\n {\n threshold: 0.1, // Trigger when 10% of the element is visible\n }\n )\n\n observer.observe(element)\n\n // Cleanup function\n return () => {\n observer.disconnect()\n if (intervalId) clearInterval(intervalId)\n if (delayTimeoutId) clearTimeout(delayTimeoutId)\n }\n }, [children, fullText, initialScrambled, hasAnimated, delay])\n\n const ariaLabel = useMemo(() => extractText(children), [children])\n\n return (\n <span\n ref={elementRef}\n aria-label={ariaLabel} // Accessibility: Screen readers read the real text\n className={cn(\"grid *:col-start-1 *:row-start-1\", className)}\n >\n {/* Both elements in the same grid cell - prevents width changes */}\n <span\n className={cn(\n \"transition-opacity duration-300\",\n hasAnimated ? \"opacity-100\" : \"opacity-0\"\n )}\n >\n {children}\n </span>\n {/* Decoded animation overlay in the same grid cell */}\n {showDecoded && displayContent && (\n <span className=\"transition-opacity duration-300\">\n {displayContent}\n </span>\n )}\n </span>\n )\n}\n\nconst SuspenseDecodedText = (props: TextDecoderProps) => {\n return (\n <Suspense\n fallback={\n <span className={cn(\"opacity-0\", props.className)}>\n {props.children}\n </span>\n }\n >\n <TextDecoder {...props} />\n </Suspense>\n )\n}\n\nexport default SuspenseDecodedText\n"],"mappings":"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","names":["React","useState","useEffect","useMemo","useRef","Suspense","jsx","jsxs","SYMBOLS","MAX_ITERATIONS","SPEED","scrambleText","input","word","extractText","node","props","result","scrambleReactNode","scrambledText","textStartIndex","text","scrambled","i","child","index","scrambledChild","originalKey","newProps","label","title","TextDecoder","children","className","delay","displayContent","setDisplayContent","hasAnimated","setHasAnimated","showDecoded","setShowDecoded","elementRef","fullText","initialScrambled","scrambledContent","element","iteration","intervalId","delayTimeoutId","observer","entries","newScrambled","ariaLabel","cn","SuspenseDecodedText","TextDecoder_default"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import{a as o}from"./chunk-S5TKCF6T.mjs";import*as e from"@radix-ui/react-tabs";import{forwardRef as a,useCallback as p,useEffect as g,useRef as T,useState as R}from"react";import{jsx as c,jsxs as L}from"react/jsx-runtime";var C=e.Root,y=a(({className:r,...n},t)=>{let[l,b]=R({left:0,width:0}),s=T(null);g(()=>{let i=()=>{if(!s.current)return;let f=s.current.querySelector('[data-state="active"]');if(f){let v=s.current.getBoundingClientRect(),m=f.getBoundingClientRect();b({left:m.left-v.left,width:m.width})}};i();let u=new MutationObserver(i);return s.current&&u.observe(s.current,{attributes:!0,attributeFilter:["data-state"],subtree:!0}),window.addEventListener("resize",i),()=>{u.disconnect(),window.removeEventListener("resize",i)}},[]);let d=p(i=>{s.current=i,typeof t=="function"?t(i):t&&(t.current=i)},[t]);return L(e.List,{ref:d,className:o("relative inline-flex items-center justify-center rounded-3xl bg-secondary p-1 text-muted-foreground",r),...n,children:[c("span",{className:"absolute h-[calc(100%-0.5rem)] rounded-3xl bg-background shadow-sm transition-all duration-200 ease-out",style:{left:`${l.left}px`,width:`${l.width}px`}}),n.children]})});y.displayName=e.List.displayName;var P=a(({className:r,...n},t)=>c(e.Trigger,{ref:t,className:o("cursor-pointer relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl px-3 py-1 text-sm font-medium ring-offset-background transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground z-10",r),...n}));P.displayName=e.Trigger.displayName;var w=a(({className:r,...n},t)=>c(e.Content,{ref:t,className:o("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",r),...n}));w.displayName=e.Content.displayName;export{C as a,y as b,P as c,w as d};
|
|
3
|
+
//# sourceMappingURL=chunk-JK6CQDLQ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const [indicatorStyle, setIndicatorStyle] = useState({\n left: 0,\n width: 0,\n })\n const listRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const updateIndicator = () => {\n if (!listRef.current) return\n\n const activeTab = listRef.current.querySelector(\n '[data-state=\"active\"]'\n ) as HTMLElement\n\n if (activeTab) {\n const listRect = listRef.current.getBoundingClientRect()\n const tabRect = activeTab.getBoundingClientRect()\n\n setIndicatorStyle({\n left: tabRect.left - listRect.left,\n width: tabRect.width,\n })\n }\n }\n\n updateIndicator()\n\n // Use MutationObserver to detect when data-state changes\n const observer = new MutationObserver(updateIndicator)\n\n if (listRef.current) {\n observer.observe(listRef.current, {\n attributes: true,\n attributeFilter: [\"data-state\"],\n subtree: true,\n })\n }\n\n // Also update on window resize\n window.addEventListener(\"resize\", updateIndicator)\n\n return () => {\n observer.disconnect()\n window.removeEventListener(\"resize\", updateIndicator)\n }\n }, [])\n\n // Combine refs\n const combinedRef = useCallback(\n (node: HTMLDivElement | null) => {\n ;(listRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n }\n },\n [ref]\n )\n\n return (\n <TabsPrimitive.List\n ref={combinedRef}\n className={cn(\n \"relative inline-flex items-center justify-center rounded-3xl bg-secondary p-1 text-muted-foreground\",\n className\n )}\n {...props}\n >\n {/* Animated indicator */}\n <span\n className=\"absolute h-[calc(100%-0.5rem)] rounded-3xl bg-background shadow-sm transition-all duration-200 ease-out\"\n style={{\n left: `${indicatorStyle.left}px`,\n width: `${indicatorStyle.width}px`,\n }}\n />\n {props.children}\n </TabsPrimitive.List>\n )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"cursor-pointer relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl px-3 py-1 text-sm font-medium ring-offset-background transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground z-10\",\n className\n )}\n {...props}\n />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],"mappings":";yCAAA,UAAYA,MAAmB,uBAG/B,OAAS,cAAAC,EAAY,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAsEjE,OASE,OAAAC,EATF,QAAAC,MAAA,oBApEJ,IAAMC,EAAqB,OAErBC,EAAWR,EAGf,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAClC,GAAM,CAACC,EAAgBC,CAAiB,EAAIT,EAAS,CACnD,KAAM,EACN,MAAO,CACT,CAAC,EACKU,EAAUX,EAAuB,IAAI,EAE3CD,EAAU,IAAM,CACd,IAAMa,EAAkB,IAAM,CAC5B,GAAI,CAACD,EAAQ,QAAS,OAEtB,IAAME,EAAYF,EAAQ,QAAQ,cAChC,uBACF,EAEA,GAAIE,EAAW,CACb,IAAMC,EAAWH,EAAQ,QAAQ,sBAAsB,EACjDI,EAAUF,EAAU,sBAAsB,EAEhDH,EAAkB,CAChB,KAAMK,EAAQ,KAAOD,EAAS,KAC9B,MAAOC,EAAQ,KACjB,CAAC,CACH,CACF,EAEAH,EAAgB,EAGhB,IAAMI,EAAW,IAAI,iBAAiBJ,CAAe,EAErD,OAAID,EAAQ,SACVK,EAAS,QAAQL,EAAQ,QAAS,CAChC,WAAY,GACZ,gBAAiB,CAAC,YAAY,EAC9B,QAAS,EACX,CAAC,EAIH,OAAO,iBAAiB,SAAUC,CAAe,EAE1C,IAAM,CACXI,EAAS,WAAW,EACpB,OAAO,oBAAoB,SAAUJ,CAAe,CACtD,CACF,EAAG,CAAC,CAAC,EAGL,IAAMK,EAAcnB,EACjBoB,GAAgC,CAC7BP,EAA0D,QAAUO,EAElE,OAAOV,GAAQ,WACjBA,EAAIU,CAAI,EACCV,IACPA,EAAsD,QAAUU,EAEtE,EACA,CAACV,CAAG,CACN,EAEA,OACEL,EAAe,OAAd,CACC,IAAKc,EACL,UAAWE,EACT,sGACAb,CACF,EACC,GAAGC,EAGJ,UAAAL,EAAC,QACC,UAAU,0GACV,MAAO,CACL,KAAM,GAAGO,EAAe,IAAI,KAC5B,MAAO,GAAGA,EAAe,KAAK,IAChC,EACF,EACCF,EAAM,UACT,CAEJ,CAAC,EACDF,EAAS,YAA4B,OAAK,YAE1C,IAAMe,EAAcvB,EAGlB,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1BN,EAAe,UAAd,CACC,IAAKM,EACL,UAAWW,EACT,kXACAb,CACF,EACC,GAAGC,EACN,CACD,EACDa,EAAY,YAA4B,UAAQ,YAEhD,IAAMC,EAAcxB,EAGlB,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1BN,EAAe,UAAd,CACC,IAAKM,EACL,UAAWW,EACT,kIACAb,CACF,EACC,GAAGC,EACN,CACD,EACDc,EAAY,YAA4B,UAAQ","names":["TabsPrimitive","forwardRef","useCallback","useEffect","useRef","useState","jsx","jsxs","Tabs","TabsList","className","props","ref","indicatorStyle","setIndicatorStyle","listRef","updateIndicator","activeTab","listRect","tabRect","observer","combinedRef","node","cn","TabsTrigger","TabsContent"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
|
|
2
|
-
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var a = _interopRequireWildcard(_react);var _reactslot = require('@radix-ui/react-slot');var _classvarianceauthority = require('class-variance-authority');var _jsxruntime = require('react/jsx-runtime');var p=_classvarianceauthority.cva.call(void 0, "inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-3xl font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary
|
|
3
|
-
//# sourceMappingURL=chunk-
|
|
2
|
+
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var a = _interopRequireWildcard(_react);var _reactslot = require('@radix-ui/react-slot');var _classvarianceauthority = require('class-variance-authority');var _jsxruntime = require('react/jsx-runtime');var p=_classvarianceauthority.cva.call(void 0, "inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-3xl font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-primary-accent hover:bg-muted",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 text-base",sm:"h-8 text-sm px-3 py-2",lg:"h-10 px-8 py-2 text-base",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),b= exports.b =a.forwardRef(({className:i,variant:s,size:d,asChild:c=!1,loading:e=!1,icon:r,...t},u)=>_jsxruntime.jsxs.call(void 0, c?_reactslot.Slot:"button",{className:_chunkFUYXCJOQjs.a.call(void 0, p({variant:s,size:d,className:i})),ref:u,disabled:e||t.disabled,...t,children:[e&&_jsxruntime.jsx.call(void 0, "div",{className:"mr-2 h-4 w-4 animate-spin rounded-full border border-primary-foreground border-t-transparent"}),!e&&r&&_jsxruntime.jsx.call(void 0, "span",{className:"mr-2",children:r}),t.children]}));b.displayName="Button";exports.a = p; exports.b = b;
|
|
3
|
+
//# sourceMappingURL=chunk-LX3KCZOW.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-LX3KCZOW.js","../src/components/button.tsx"],"names":["buttonVariants","cva","Button","className","variant","size","asChild","loading","icon","props","ref","jsxs","Slot","cn","jsx"],"mappings":"AAAA,uWAAY;AACZ,sDAAuC,uECDhB,iDACF,kEACkB,+CAuDjC,IAnDAA,CAAAA,CAAiBC,yCAAAA,gSACrB,CACA,CACE,QAAA,CAAU,CACR,OAAA,CAAS,CACP,OAAA,CAAS,wDAAA,CACT,WAAA,CACE,oEAAA,CACF,OAAA,CACE,gFAAA,CACF,SAAA,CAAW,iDAAA,CACX,KAAA,CAAO,8CAAA,CACP,IAAA,CAAM,iDACR,CAAA,CACA,IAAA,CAAM,CACJ,OAAA,CAAS,yBAAA,CACT,EAAA,CAAI,uBAAA,CACJ,EAAA,CAAI,0BAAA,CACJ,IAAA,CAAM,SACR,CACF,CAAA,CACA,eAAA,CAAiB,CACf,OAAA,CAAS,SAAA,CACT,IAAA,CAAM,SACR,CACF,CACF,CAAA,CAUMC,CAAAA,aAAe,CAAA,CAAA,UAAA,CACnB,CACE,CACE,SAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CAAU,CAAA,CAAA,CACV,OAAA,CAAAC,CAAAA,CAAU,CAAA,CAAA,CACV,IAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CACAC,CAAAA,CAAAA,EAIEC,8BAAAA,CAFWL,CAAUM,eAAAA,CAAO,QAAA,CAE3B,CACC,SAAA,CAAWC,gCAAAA,CAAGb,CAAe,CAAE,OAAA,CAAAI,CAAAA,CAAS,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAF,CAAU,CAAC,CAAC,CAAA,CAC1D,GAAA,CAAKO,CAAAA,CACL,QAAA,CAAUH,CAAAA,EAAWE,CAAAA,CAAM,QAAA,CAC1B,GAAGA,CAAAA,CAEH,QAAA,CAAA,CAAAF,CAAAA,EACCO,6BAAAA,KAAC,CAAA,CAAI,SAAA,CAAU,8FAAA,CAA+F,CAAA,CAE/G,CAACP,CAAAA,EAAWC,CAAAA,EAAQM,6BAAAA,MAAC,CAAA,CAAK,SAAA,CAAU,MAAA,CAAQ,QAAA,CAAAN,CAAAA,CAAK,CAAA,CACjDC,CAAAA,CAAM,QAAA,CAAA,CACT,CAGN,CAAA,CACAP,CAAAA,CAAO,WAAA,CAAc,QAAA,CAAA,6BAAA","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-LX3KCZOW.js","sourcesContent":[null,"import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-3xl font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-primary-accent hover:bg-muted\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 text-base\",\n sm: \"h-8 text-sm px-3 py-2\",\n lg: \"h-10 px-8 py-2 text-base\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n loading?: boolean\n icon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n asChild = false,\n loading = false,\n icon,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={loading || props.disabled}\n {...props}\n >\n {loading && (\n <div className=\"mr-2 h-4 w-4 animate-spin rounded-full border border-primary-foreground border-t-transparent\" />\n )}\n {!loading && icon && <span className=\"mr-2\">{icon}</span>}\n {props.children}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
|
|
2
|
+
var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _reacttabs = require('@radix-ui/react-tabs'); var e = _interopRequireWildcard(_reacttabs);var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var C=e.Root,y= exports.b =_react.forwardRef.call(void 0, ({className:r,...n},t)=>{let[l,b]=_react.useState.call(void 0, {left:0,width:0}),s=_react.useRef.call(void 0, null);_react.useEffect.call(void 0, ()=>{let i=()=>{if(!s.current)return;let f=s.current.querySelector('[data-state="active"]');if(f){let v=s.current.getBoundingClientRect(),m=f.getBoundingClientRect();b({left:m.left-v.left,width:m.width})}};i();let u=new MutationObserver(i);return s.current&&u.observe(s.current,{attributes:!0,attributeFilter:["data-state"],subtree:!0}),window.addEventListener("resize",i),()=>{u.disconnect(),window.removeEventListener("resize",i)}},[]);let d=_react.useCallback.call(void 0, i=>{s.current=i,typeof t=="function"?t(i):t&&(t.current=i)},[t]);return _jsxruntime.jsxs.call(void 0, e.List,{ref:d,className:_chunkFUYXCJOQjs.a.call(void 0, "relative inline-flex items-center justify-center rounded-3xl bg-secondary p-1 text-muted-foreground",r),...n,children:[_jsxruntime.jsx.call(void 0, "span",{className:"absolute h-[calc(100%-0.5rem)] rounded-3xl bg-background shadow-sm transition-all duration-200 ease-out",style:{left:`${l.left}px`,width:`${l.width}px`}}),n.children]})});y.displayName=e.List.displayName;var P=_react.forwardRef.call(void 0, ({className:r,...n},t)=>_jsxruntime.jsx.call(void 0, e.Trigger,{ref:t,className:_chunkFUYXCJOQjs.a.call(void 0, "cursor-pointer relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl px-3 py-1 text-sm font-medium ring-offset-background transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground z-10",r),...n}));P.displayName=e.Trigger.displayName;var w=_react.forwardRef.call(void 0, ({className:r,...n},t)=>_jsxruntime.jsx.call(void 0, e.Content,{ref:t,className:_chunkFUYXCJOQjs.a.call(void 0, "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",r),...n}));w.displayName=e.Content.displayName;exports.a = C; exports.b = y; exports.c = P; exports.d = w;
|
|
3
|
+
//# sourceMappingURL=chunk-SIGGW2CQ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-SIGGW2CQ.js","../src/components/tabs.tsx"],"names":["Tabs","TabsList","forwardRef","className","props","ref","indicatorStyle","setIndicatorStyle","useState","listRef","useRef","useEffect","updateIndicator","activeTab","listRect","tabRect","observer","combinedRef","useCallback","node","jsxs","cn","jsx"],"mappings":"AAAA,uWAAY;AACZ,sDAAuC,8FCDR,8BAGsC,+CAsEjE,IApEEA,CAAAA,CAAqB,CAAA,CAAA,IAAA,CAErBC,CAAAA,aAAWC,+BAAAA,CAGd,CAAE,SAAA,CAAAC,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CAAAA,CAAAA,EAAQ,CAClC,GAAM,CAACC,CAAAA,CAAgBC,CAAiB,CAAA,CAAIC,6BAAAA,CAC1C,IAAA,CAAM,CAAA,CACN,KAAA,CAAO,CACT,CAAC,CAAA,CACKC,CAAAA,CAAUC,2BAAAA,IAA2B,CAAA,CAE3CC,8BAAAA,CAAU,CAAA,EAAM,CACd,IAAMC,CAAAA,CAAkB,CAAA,CAAA,EAAM,CAC5B,EAAA,CAAI,CAACH,CAAAA,CAAQ,OAAA,CAAS,MAAA,CAEtB,IAAMI,CAAAA,CAAYJ,CAAAA,CAAQ,OAAA,CAAQ,aAAA,CAChC,uBACF,CAAA,CAEA,EAAA,CAAII,CAAAA,CAAW,CACb,IAAMC,CAAAA,CAAWL,CAAAA,CAAQ,OAAA,CAAQ,qBAAA,CAAsB,CAAA,CACjDM,CAAAA,CAAUF,CAAAA,CAAU,qBAAA,CAAsB,CAAA,CAEhDN,CAAAA,CAAkB,CAChB,IAAA,CAAMQ,CAAAA,CAAQ,IAAA,CAAOD,CAAAA,CAAS,IAAA,CAC9B,KAAA,CAAOC,CAAAA,CAAQ,KACjB,CAAC,CACH,CACF,CAAA,CAEAH,CAAAA,CAAgB,CAAA,CAGhB,IAAMI,CAAAA,CAAW,IAAI,gBAAA,CAAiBJ,CAAe,CAAA,CAErD,OAAIH,CAAAA,CAAQ,OAAA,EACVO,CAAAA,CAAS,OAAA,CAAQP,CAAAA,CAAQ,OAAA,CAAS,CAChC,UAAA,CAAY,CAAA,CAAA,CACZ,eAAA,CAAiB,CAAC,YAAY,CAAA,CAC9B,OAAA,CAAS,CAAA,CACX,CAAC,CAAA,CAIH,MAAA,CAAO,gBAAA,CAAiB,QAAA,CAAUG,CAAe,CAAA,CAE1C,CAAA,CAAA,EAAM,CACXI,CAAAA,CAAS,UAAA,CAAW,CAAA,CACpB,MAAA,CAAO,mBAAA,CAAoB,QAAA,CAAUJ,CAAe,CACtD,CACF,CAAA,CAAG,CAAC,CAAC,CAAA,CAGL,IAAMK,CAAAA,CAAcC,gCAAAA,CACjBC,EAAgC,CAC7BV,CAAAA,CAA0D,OAAA,CAAUU,CAAAA,CAElE,OAAOd,CAAAA,EAAQ,UAAA,CACjBA,CAAAA,CAAIc,CAAI,CAAA,CACCd,CAAAA,EAAAA,CACPA,CAAAA,CAAsD,OAAA,CAAUc,CAAAA,CAEtE,CAAA,CACA,CAACd,CAAG,CACN,CAAA,CAEA,OACEe,8BAAAA,CAAe,CAAA,IAAA,CAAd,CACC,GAAA,CAAKH,CAAAA,CACL,SAAA,CAAWI,gCAAAA,qGACT,CACAlB,CACF,CAAA,CACC,GAAGC,CAAAA,CAGJ,QAAA,CAAA,CAAAkB,6BAAAA,MAAC,CAAA,CACC,SAAA,CAAU,yGAAA,CACV,KAAA,CAAO,CACL,IAAA,CAAM,CAAA,EAAA","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-SIGGW2CQ.js","sourcesContent":[null,"import * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const [indicatorStyle, setIndicatorStyle] = useState({\n left: 0,\n width: 0,\n })\n const listRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const updateIndicator = () => {\n if (!listRef.current) return\n\n const activeTab = listRef.current.querySelector(\n '[data-state=\"active\"]'\n ) as HTMLElement\n\n if (activeTab) {\n const listRect = listRef.current.getBoundingClientRect()\n const tabRect = activeTab.getBoundingClientRect()\n\n setIndicatorStyle({\n left: tabRect.left - listRect.left,\n width: tabRect.width,\n })\n }\n }\n\n updateIndicator()\n\n // Use MutationObserver to detect when data-state changes\n const observer = new MutationObserver(updateIndicator)\n\n if (listRef.current) {\n observer.observe(listRef.current, {\n attributes: true,\n attributeFilter: [\"data-state\"],\n subtree: true,\n })\n }\n\n // Also update on window resize\n window.addEventListener(\"resize\", updateIndicator)\n\n return () => {\n observer.disconnect()\n window.removeEventListener(\"resize\", updateIndicator)\n }\n }, [])\n\n // Combine refs\n const combinedRef = useCallback(\n (node: HTMLDivElement | null) => {\n ;(listRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n }\n },\n [ref]\n )\n\n return (\n <TabsPrimitive.List\n ref={combinedRef}\n className={cn(\n \"relative inline-flex items-center justify-center rounded-3xl bg-secondary p-1 text-muted-foreground\",\n className\n )}\n {...props}\n >\n {/* Animated indicator */}\n <span\n className=\"absolute h-[calc(100%-0.5rem)] rounded-3xl bg-background shadow-sm transition-all duration-200 ease-out\"\n style={{\n left: `${indicatorStyle.left}px`,\n width: `${indicatorStyle.width}px`,\n }}\n />\n {props.children}\n </TabsPrimitive.List>\n )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"cursor-pointer relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl px-3 py-1 text-sm font-medium ring-offset-background transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground z-10\",\n className\n )}\n {...props}\n />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import{a as o}from"./chunk-S5TKCF6T.mjs";import*as a from"react";import{Slot as l}from"@radix-ui/react-slot";import{cva as f}from"class-variance-authority";import{jsx as n,jsxs as m}from"react/jsx-runtime";var p=f("inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-3xl font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-primary-accent hover:bg-muted",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 text-base",sm:"h-8 text-sm px-3 py-2",lg:"h-10 px-8 py-2 text-base",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),b=a.forwardRef(({className:i,variant:s,size:d,asChild:c=!1,loading:e=!1,icon:r,...t},u)=>m(c?l:"button",{className:o(p({variant:s,size:d,className:i})),ref:u,disabled:e||t.disabled,...t,children:[e&&n("div",{className:"mr-2 h-4 w-4 animate-spin rounded-full border border-primary-foreground border-t-transparent"}),!e&&r&&n("span",{className:"mr-2",children:r}),t.children]}));b.displayName="Button";export{p as a,b};
|
|
3
|
+
//# sourceMappingURL=chunk-V5ORUPUF.mjs.map
|