smooth-components 1.1.3 → 1.1.5

package/README.md

@@ -1 +1,76 @@
-clean readme
+# 📦 smooth-components
+
+`smooth-components` is a growing collection of elegant, customizable, and accessible React components built to help you quickly craft beautiful web interfaces.
+
+[![npm version](https://img.shields.io/npm/v/smooth-components.svg)](https://www.npmjs.com/package/smooth-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 🚀 Installation
+
+Install the package via npm or yarn:
+
+```bash
+npm install smooth-components
+# or
+yarn add smooth-components
+```
+
+---
+
+## 🖼️ Poster Component
+
+The `Poster` component lets you display an image with customizable size, border, opacity, and an optional animated glint overlay—perfect for showcasing posters, artworks, or product previews.
+
+### ✅ Usage
+
+```tsx
+import { Poster } from 'smooth-components'
+
+export default function App() {
+  return (
+    <Poster
+      alt="Cyberpunk City"
+      src="/images/cyberpunk.jpg"
+      styles={{
+        width: 240,
+        height: 360,
+        borderColor: '#555',
+        opacity: 0.95,
+      }}
+    />
+  )
+}
+```
+
+### 🔧 Props
+
+| Prop                 | Type               | Default   | Description                                 |
+| -------------------- | ------------------ | --------- | ------------------------------------------- |
+| `alt`                | `string`           | —         | Alternative text for the image.             |
+| `src`                | `string`           | —         | Image source path or URL.                   |
+| `styles`             | `object`           | —         | Optional inline styles for the container.   |
+| `styles.opacity`     | `number \| string` | `1`       | Opacity of the poster container.            |
+| `styles.width`       | `number \| string` | `'200px'` | Width of the poster.                        |
+| `styles.height`      | `number \| string` | `'300px'` | Height of the poster.                       |
+| `styles.borderColor` | `string`           | `'#ccc'`  | Border color around the poster.             |
+| `hasGlintEffect`     | `boolean`          | `true`    | Whether to show the animated glint overlay. |
+
+> 💡 All style values can be in CSS units (`px`, `%`, `em`, etc.) or numbers (interpreted as pixels). The `glint` is a visual shimmer that moves across the image.
+
+---
+
+## 📝 License
+
+Distributed under the MIT License.
+See [LICENSE](LICENSE) for more information.
+
+---
+
+## 📬 Contact
+
+* 🌐 **Portfolio**: [Visit my website](https://jaime00portfolio.netlify.app/)
+* 💼 **LinkedIn**: [linkedin.com/in/jaime00](https://www.linkedin.com/in/jaime00)
+* 📧 **Email**: [imjaimetorresv@gmail.com](mailto:imjaimetorresv@gmail.com)
+* 🐙 **GitHub**: [github.com/jaime00](https://github.com/jaime00)

package/dist/smooth-components.d.ts

@@ -1,16 +1,6 @@
 import { JSX } from 'react';
+import { PosterProps } from '../../types/poster';
 
-export declare const Poster: ({ alt, src, styles }: PosterProps) => JSX.Element;
-
-declare type PosterProps = {
-    alt: string;
-    src: string;
-    styles?: {
-        opacity?: number;
-        height?: string;
-        width?: string;
-        borderColor?: string;
-    };
-};
+export declare const Poster: ({ alt, src, styles, hasGlintEffect, }: PosterProps) => JSX.Element;
 
 export { }

package/dist/smooth-components.js

@@ -1,25 +1,30 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".poster-container{position:relative;z-index:30;margin-bottom:6rem;border-radius:3px;overflow:hidden;border:25px solid black;background-color:#6b728080;opacity:.8;cursor:pointer;transform:translateY(0) scale(1);transition:all .3s ease-out;box-shadow:0 20px 25px -5px #000000e6,0 8px 10px -6px #0000001a;filter:grayscale(.1) contrast(.99) sepia(.05) blur(0px)}.poster-container.group{display:none}@media (min-width: 1024px){.poster-container{margin-bottom:0}}.poster-container:hover{transform:scale(1.01) translateY(-.25rem);box-shadow:0 25px 50px -12px #00000040,0 0 20px #000}.poster-image{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;filter:blur(.4px);transition:all .3s ease-in-out;display:block}.poster-container:hover .poster-image{filter:blur(.2px);transform:scale(1.01)}.poster-image-glint{position:absolute;top:0;left:-100%;width:100%;height:100%;pointer-events:none;z-index:10;background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);transform:skew(-12deg);transition:all .6s ease-in-out}.poster-container:hover .poster-image-glint{left:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-const l = 0.91, m = "auto", p = "auto", T = "oklch(12.9% 0.042 264.695)", g = ({ alt: t, src: s, styles: e }) => {
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+const m = 0.91, T = "auto", E = "auto", p = "oklch(12.9% 0.042 264.695)", _ = !0, g = ({
+  alt: o,
+  src: s,
+  styles: e,
+  hasGlintEffect: r = _
+}) => {
   const {
-    opacity: r = l,
-    height: c = p,
-    width: a = m,
-    borderColor: i = T
+    opacity: c = m,
+    height: a = E,
+    width: i = T,
+    borderColor: n = p
   } = e ?? {};
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: "poster-container",
       style: {
-        opacity: r,
-        height: c,
-        width: a,
-        borderColor: i
+        opacity: c,
+        height: a,
+        width: i,
+        borderColor: n
       },
       children: [
-        /* @__PURE__ */ o("img", { alt: t, src: s, className: "poster-image" }),
-        /* @__PURE__ */ o("div", { className: "poster-image-glint" })
+        /* @__PURE__ */ t("img", { alt: o, src: s, className: "poster-image" }),
+        r && /* @__PURE__ */ t("div", { className: "poster-image-glint" })
       ]
     }
   );

package/dist/smooth-components.umd.cjs

@@ -1,2 +1,2 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".poster-container{position:relative;z-index:30;margin-bottom:6rem;border-radius:3px;overflow:hidden;border:25px solid black;background-color:#6b728080;opacity:.8;cursor:pointer;transform:translateY(0) scale(1);transition:all .3s ease-out;box-shadow:0 20px 25px -5px #000000e6,0 8px 10px -6px #0000001a;filter:grayscale(.1) contrast(.99) sepia(.05) blur(0px)}.poster-container.group{display:none}@media (min-width: 1024px){.poster-container{margin-bottom:0}}.poster-container:hover{transform:scale(1.01) translateY(-.25rem);box-shadow:0 25px 50px -12px #00000040,0 0 20px #000}.poster-image{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;filter:blur(.4px);transition:all .3s ease-in-out;display:block}.poster-container:hover .poster-image{filter:blur(.2px);transform:scale(1.01)}.poster-image-glint{position:absolute;top:0;left:-100%;width:100%;height:100%;pointer-events:none;z-index:10;background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);transform:skew(-12deg);transition:all .6s ease-in-out}.poster-container:hover .poster-image-glint{left:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.FaztComponents={},e["react/jsx-runtime"]))})(this,function(e,t){"use strict";const o="auto",s="auto",n="oklch(12.9% 0.042 264.695)",i=({alt:r,src:c,styles:a})=>{const{opacity:d=.91,height:u=s,width:f=o,borderColor:p=n}=a??{};return t.jsxs("div",{className:"poster-container",style:{opacity:d,height:u,width:f,borderColor:p},children:[t.jsx("img",{alt:r,src:c,className:"poster-image"}),t.jsx("div",{className:"poster-image-glint"})]})};e.Poster=i,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.SmoothComponents={},e["react/jsx-runtime"]))})(this,function(e,t){"use strict";const o="auto",s="auto",n="oklch(12.9% 0.042 264.695)",i=({alt:r,src:c,styles:d,hasGlintEffect:a=!0})=>{const{opacity:u=.91,height:T=s,width:f=o,borderColor:m=n}=d??{};return t.jsxs("div",{className:"poster-container",style:{opacity:u,height:T,width:f,borderColor:m},children:[t.jsx("img",{alt:r,src:c,className:"poster-image"}),a&&t.jsx("div",{className:"poster-image-glint"})]})};e.Poster=i,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "smooth-components",
-  "description": "A collection of smooth and elegant React components for building modern web applications...",
-  "version": "1.1.3",
+  "description": "A collection of smooth and elegant React components for building modern web applications.",
+  "version": "1.1.5",
   "type": "module",
+  "author": "Jaime Torres",
+  "license": "MIT",
   "files": [
     "dist"
   ],
@@ -17,7 +19,7 @@
     "./dist/smooth-components.css": "./dist/smooth-components.css"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3000",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
@@ -41,5 +43,17 @@
     "vite": "^6.3.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.4"
-  }
+  },
+  "keywords": [
+    "react",
+    "components",
+    "smooth",
+    "elegant",
+    "modern",
+    "web",
+    "application",
+    "development",
+    "poster",
+    "cinema"
+  ]
 }