smooth-components 1.1.5 β†’ 1.1.6

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.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +48 -22
  3. package/package.json +1 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Jaime Torres
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # πŸ“¦ smooth-components
2
2
 
3
- `smooth-components` is a growing collection of elegant, customizable, and accessible React components built to help you quickly craft beautiful web interfaces.
3
+ **Elegant, customizable, and accessible React components.**
4
+
5
+ `smooth-components` is a growing library of beautifully designed, reusable UI components for React. Whether you're building a portfolio, dashboard, or e-commerce site, these components help you move fast and look greatβ€”without sacrificing accessibility or flexibility.
4
6
 
5
7
  [![npm version](https://img.shields.io/npm/v/smooth-components.svg)](https://www.npmjs.com/package/smooth-components)
6
8
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -9,7 +11,7 @@
9
11
 
10
12
  ## πŸš€ Installation
11
13
 
12
- Install the package via npm or yarn:
14
+ Install via **npm** or **yarn**:
13
15
 
14
16
  ```bash
15
17
  npm install smooth-components
@@ -21,9 +23,9 @@ yarn add smooth-components
21
23
 
22
24
  ## πŸ–ΌοΈ Poster Component
23
25
 
24
- 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.
26
+ The `Poster` component is ideal for showcasing images like movie posters, artworks, product covers, or any visual element that needs emphasis. It includes styling options for borders, size, opacity, and an optional animated **glint** effect.
25
27
 
26
- ### βœ… Usage
28
+ ### βœ… Example Usage
27
29
 
28
30
  ```tsx
29
31
  import { Poster } from 'smooth-components'
@@ -44,33 +46,57 @@ export default function App() {
44
46
  }
45
47
  ```
46
48
 
49
+ ---
50
+
47
51
  ### πŸ”§ Props
48
52
 
49
- | Prop | Type | Default | Description |
50
- | -------------------- | ------------------ | --------- | ------------------------------------------- |
51
- | `alt` | `string` | β€” | Alternative text for the image. |
52
- | `src` | `string` | β€” | Image source path or URL. |
53
- | `styles` | `object` | β€” | Optional inline styles for the container. |
54
- | `styles.opacity` | `number \| string` | `1` | Opacity of the poster container. |
55
- | `styles.width` | `number \| string` | `'200px'` | Width of the poster. |
56
- | `styles.height` | `number \| string` | `'300px'` | Height of the poster. |
57
- | `styles.borderColor` | `string` | `'#ccc'` | Border color around the poster. |
58
- | `hasGlintEffect` | `boolean` | `true` | Whether to show the animated glint overlay. |
53
+ | Prop | Type | Default | Description |
54
+ | -------------------- | ------------------ | ------------------------------ | --------------------------------------------------------- |
55
+ | `alt` | `string` | β€” | Descriptive alt text for accessibility. |
56
+ | `src` | `string` | β€” | Path or URL to the image. |
57
+ | `styles` | `object` | β€” | Optional custom styles for the container. |
58
+ | `styles.opacity` | `number \| string` | `0.91` | Opacity of the image container. |
59
+ | `styles.width` | `number \| string` | `'auto'` | Width of the image container. |
60
+ | `styles.height` | `number \| string` | `'auto'` | Height of the image container. |
61
+ | `styles.borderColor` | `string` | `'oklch(12.9% 0.042 264.695)'` | Color of the border around the poster. |
62
+ | `hasGlintEffect` | `boolean` | `true` | Enables a subtle animated glint overlay across the image. |
59
63
 
60
- > πŸ’‘ 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.
64
+ > πŸ’‘ You can use numbers (interpreted as `px`) or standard CSS units (`px`, `%`, `em`, etc.) for style values. The `glint` effect adds a stylish shimmer animation for extra polish.
65
+
66
+ ---
67
+
68
+ ## 🧩 More Components Coming Soon
69
+
70
+ This is just the beginning. Stay tuned for new additions including:
71
+
72
+ * Modals
73
+ * Cards
74
+ * Loaders
75
+ * And more...
61
76
 
62
77
  ---
63
78
 
64
79
  ## πŸ“ License
65
80
 
66
- Distributed under the MIT License.
67
- See [LICENSE](LICENSE) for more information.
81
+ MIT Β© [Jaime Torres](https://github.com/jaime00)
82
+ See the full license in [LICENSE](./LICENSE).
83
+
84
+ ---
85
+
86
+ ## πŸ“¬ Connect with Me
87
+
88
+ * 🌐 [Portfolio](https://jaime00portfolio.netlify.app/)
89
+ * πŸ’Ό [LinkedIn](https://www.linkedin.com/in/jaime00)
90
+ * πŸ“§ [Email](mailto:imjaimetorresv@gmail.com)
91
+ * πŸ™ [GitHub](https://github.com/jaime00)
68
92
 
69
93
  ---
70
94
 
71
- ## πŸ“¬ Contact
95
+ Let me know if you’d like to add:
96
+
97
+ * Usage with Tailwind or a specific framework
98
+ * Storybook/preview link
99
+ * Development & contribution guide
100
+ * More animated gifs/screenshots
72
101
 
73
- * 🌐 **Portfolio**: [Visit my website](https://jaime00portfolio.netlify.app/)
74
- * πŸ’Ό **LinkedIn**: [linkedin.com/in/jaime00](https://www.linkedin.com/in/jaime00)
75
- * πŸ“§ **Email**: [imjaimetorresv@gmail.com](mailto:imjaimetorresv@gmail.com)
76
- * πŸ™ **GitHub**: [github.com/jaime00](https://github.com/jaime00)
102
+ Want me to help generate a demo GIF or improve visuals? Happy to assist.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "smooth-components",
3
3
  "description": "A collection of smooth and elegant React components for building modern web applications.",
4
- "version": "1.1.5",
4
+ "version": "1.1.6",
5
5
  "type": "module",
6
6
  "author": "Jaime Torres",
7
7
  "license": "MIT",