@tampadevs/react 0.1.0

package/dist/index9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.js","sources":["../src/components/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nexport interface CarouselProps {\n  title?: string;\n  scrollAmount?: number;\n  hideControls?: boolean;\n  gap?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function Carousel({\n  title,\n  scrollAmount = 400,\n  hideControls = false,\n  gap = '1.5rem',\n  children,\n  className,\n}: CarouselProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const scrollTrack = (direction: 'left' | 'right') => {\n    if (trackRef.current) {\n      const amount = direction === 'left' ? -scrollAmount : scrollAmount;\n      trackRef.current.scrollBy({\n        left: amount,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  return (\n    <>\n      <div className={clsx('td-carousel', className)}>\n        {title && <h2 className=\"td-carousel__title\">{title}</h2>}\n\n        <div className=\"td-carousel__wrapper\">\n          {!hideControls && (\n            <button\n              className=\"td-carousel__nav td-carousel__nav--left\"\n              onClick={() => scrollTrack('left')}\n              aria-label=\"Scroll left\"\n            >\n              <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n              </svg>\n            </button>\n          )}\n\n          <div\n            ref={trackRef}\n            className=\"td-carousel__track\"\n            style={{ gap }}\n          >\n            {children}\n          </div>\n\n          {!hideControls && (\n            <button\n              className=\"td-carousel__nav td-carousel__nav--right\"\n              onClick={() => scrollTrack('right')}\n              aria-label=\"Scroll right\"\n            >\n              <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n      <CarouselStyles />\n    </>\n  );\n}\n\nfunction CarouselStyles() {\n  return (\n    <style>{`\n      .td-carousel {\n        position: relative;\n      }\n\n      .td-carousel__title {\n        font-size: 1.5rem;\n        font-weight: 700;\n        color: #111827;\n        margin-bottom: 1.5rem;\n      }\n\n      .td-carousel__wrapper {\n        position: relative;\n      }\n\n      .td-carousel__wrapper:hover .td-carousel__nav {\n        opacity: 1;\n      }\n\n      .td-carousel__track {\n        display: flex;\n        overflow-x: auto;\n        padding-bottom: 1rem;\n        scroll-snap-type: x mandatory;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n      }\n\n      .td-carousel__track::-webkit-scrollbar {\n        display: none;\n      }\n\n      .td-carousel__track > * {\n        flex-shrink: 0;\n        scroll-snap-align: start;\n      }\n\n      .td-carousel__nav {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 10;\n        background: white;\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n        border-radius: 9999px;\n        padding: 0.5rem;\n        opacity: 0;\n        transition: opacity 0.15s ease;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .td-carousel__nav:hover {\n        background: #F3F4F6;\n      }\n\n      .td-carousel__nav--left {\n        left: -1rem;\n      }\n\n      .td-carousel__nav--right {\n        right: -1rem;\n      }\n\n      .td-carousel__nav svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: #6B7280;\n      }\n\n      @media (hover: none) {\n        .td-carousel__nav {\n          opacity: 1;\n        }\n      }\n    `}</style>\n  );\n}\n"],"names":["Carousel","title","scrollAmount","hideControls","gap","children","className","trackRef","useRef","scrollTrack","direction","amount","jsxs","Fragment","clsx","jsx","CarouselStyles"],"mappings":";;;AAcO,SAASA,EAAS;AAAA,EACvB,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,WAAAC;AACF,GAAkB;AAChB,QAAMC,IAAWC,EAAuB,IAAI,GAEtCC,IAAc,CAACC,MAAgC;AACnD,QAAIH,EAAS,SAAS;AACpB,YAAMI,IAASD,MAAc,SAAS,CAACR,IAAeA;AACtD,MAAAK,EAAS,QAAQ,SAAS;AAAA,QACxB,MAAMI;AAAA,QACN,UAAU;AAAA,MAAA,CACX;AAAA,IACH;AAAA,EACF;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWE,EAAK,eAAeR,CAAS,GAC1C,UAAA;AAAA,MAAAL,KAAS,gBAAAc,EAAC,MAAA,EAAG,WAAU,sBAAsB,UAAAd,GAAM;AAAA,MAEpD,gBAAAW,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,QAAA,CAACT,KACA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,MAAMN,EAAY,MAAM;AAAA,YACjC,cAAW;AAAA,YAEX,4BAAC,OAAA,EAAI,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC1C,UAAA,gBAAAM,EAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,mBAAkB,EAAA,CACzF;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,OAAO,EAAE,KAAAH,EAAA;AAAA,YAER,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,CAACF,KACA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,MAAMN,EAAY,OAAO;AAAA,YAClC,cAAW;AAAA,YAEX,4BAAC,OAAA,EAAI,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAC1C,UAAA,gBAAAM,EAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,gBAAe,EAAA,CACtF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,sBACCC,GAAA,CAAA,CAAe;AAAA,EAAA,GAClB;AAEJ;AAEA,SAASA,IAAiB;AACxB,2BACG,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OA+EN;AAEN;"}

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tampadevs/react",
+  "version": "0.1.0",
+  "description": "React components for Tampa Devs design system - SSR compatible",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@tampadevs/tokens": "workspace:*",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/three": "^0.182.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.182.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "three": "^0.170.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}