pure-react-ui 1.3.0 → 1.4.0

package/README.md

@@ -1,321 +1,73 @@
-# Advanced Professional Button Component
-
-A modern, fully-featured React button component with TypeScript support, multiple variants, sizes, and advanced features like ripple effects, loading states, and elevation shadows.
-
-## Features
-
-✨ **Multiple Variants**: Solid, Outline, Ghost, and Gradient styles  
-🎨 **6 Color Schemes**: Primary, Secondary, Success, Danger, Warning, Info  
-📏 **5 Size Options**: Extra Small, Small, Medium, Large, Extra Large  
-🎭 **Advanced Effects**: Ripple animation, Elevation shadows, Smooth transitions  
-♿ **Accessible**: ARIA attributes, Keyboard navigation, Focus states  
-🔄 **Loading States**: Built-in spinner with disabled interaction  
-🎯 **Icon Support**: Left and right icon positioning  
-📱 **Responsive**: Mobile-friendly with adaptive sizing  
-⚡ **TypeScript**: Full type safety and IntelliSense support  
-🎪 **2px Border Radius**: Sharp, professional appearance
-
-## Installation
-
-```bash
-# Copy these files to your project:
-# - Button.tsx
-# - Button.css
-```
-
-## Basic Usage
-
-```tsx
-import { Button } from './components/Button';
-import './components/Button.css';
-
-function App() {
-  return (
-    <Button variant="primary" size="medium">
-      Click Me
-    </Button>
-  );
-}
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Button content (required) |
-| `variant` | `string` | `'primary'` | Button style variant |
-| `size` | `'xs' \| 'small' \| 'medium' \| 'large' \| 'xl'` | `'medium'` | Button size |
-| `loading` | `boolean` | `false` | Show loading spinner |
-| `disabled` | `boolean` | `false` | Disable button interaction |
-| `iconLeft` | `ReactNode` | - | Icon before text |
-| `iconRight` | `ReactNode` | - | Icon after text |
-| `fullWidth` | `boolean` | `false` | Make button full width |
-| `rounded` | `boolean` | `false` | Use pill-shaped border radius |
-| `elevation` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'none'` | Shadow elevation level |
-| `ripple` | `boolean` | `true` | Enable ripple effect on click |
-| `className` | `string` | `''` | Additional CSS classes |
-| `onClick` | `function` | - | Click handler |
-
-Plus all standard HTML button attributes.
-
-## Variants
-
-### Solid Variants
-```tsx
-<Button variant="primary">Primary</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="success">Success</Button>
-<Button variant="danger">Danger</Button>
-<Button variant="warning">Warning</Button>
-<Button variant="info">Info</Button>
-```
-
-### Outline Variants
-```tsx
-<Button variant="outline-primary">Primary</Button>
-<Button variant="outline-secondary">Secondary</Button>
-<Button variant="outline-success">Success</Button>
-<Button variant="outline-danger">Danger</Button>
-<Button variant="outline-warning">Warning</Button>
-<Button variant="outline-info">Info</Button>
-```
-
-### Ghost Variants
-```tsx
-<Button variant="ghost-primary">Primary</Button>
-<Button variant="ghost-secondary">Secondary</Button>
-<Button variant="ghost-success">Success</Button>
-<Button variant="ghost-danger">Danger</Button>
-<Button variant="ghost-warning">Warning</Button>
-<Button variant="ghost-info">Info</Button>
-```
-
-### Gradient Variants
-```tsx
-<Button variant="gradient-primary">Gradient Primary</Button>
-<Button variant="gradient-success">Gradient Success</Button>
-<Button variant="gradient-danger">Gradient Danger</Button>
-```
-
-## Examples
-
-### With Icons
-
-```tsx
-import { Download, Check, Search } from 'lucide-react';
-
-<Button variant="primary" iconLeft={<Download />}>
-  Download
-</Button>
-
-<Button variant="success" iconRight={<Check />}>
-  Confirm
-</Button>
-
-<Button variant="outline-primary" iconLeft={<Search />}>
-  Search
-</Button>
-```
-
-### Loading State
-
-```tsx
-const [loading, setLoading] = useState(false);
-
-const handleSubmit = async () => {
-  setLoading(true);
-  await someAsyncOperation();
-  setLoading(false);
-};
-
-<Button 
-  variant="primary" 
-  loading={loading}
-  onClick={handleSubmit}
->
-  {loading ? 'Processing...' : 'Submit'}
-</Button>
-```
-
-### Different Sizes
-
-```tsx
-<Button size="xs">Extra Small</Button>
-<Button size="small">Small</Button>
-<Button size="medium">Medium</Button>
-<Button size="large">Large</Button>
-<Button size="xl">Extra Large</Button>
-```
-
-### With Elevation
-
-```tsx
-<Button variant="primary" elevation="sm">Small Shadow</Button>
-<Button variant="primary" elevation="md">Medium Shadow</Button>
-<Button variant="primary" elevation="lg">Large Shadow</Button>
-```
-
-### Rounded Buttons
-
-```tsx
-<Button variant="primary" rounded>
-  Rounded Button
-</Button>
-
-<Button variant="outline-success" rounded elevation="md">
-  Rounded with Shadow
-</Button>
-```
-
-### Full Width
-
-```tsx
-<Button variant="gradient-primary" fullWidth size="large">
-  Full Width Button
-</Button>
-```
-
-### Disabled State
-
-```tsx
-<Button variant="primary" disabled>
-  Disabled Button
-</Button>
-```
-
-### Advanced Combinations
-
-```tsx
-<Button 
-  variant="gradient-primary"
-  size="large"
-  rounded
-  elevation="lg"
-  iconLeft={<Download />}
->
-  Premium Action
-</Button>
-
-<Button 
-  variant="outline-success"
-  size="large"
-  rounded
-  iconRight={<Check />}
-  onClick={handleConfirm}
->
-  Confirm Choice
-</Button>
-```
-
-## Styling Customization
-
-### Override Styles
-
-You can override default styles by targeting CSS classes:
-
-```css
-/* Custom primary color */
-.pru-btn-primary {
-  background-color: #your-color;
-}
-
-.pru-btn-primary:hover:not(:disabled) {
-  background-color: #your-hover-color;
-}
-
-/* Custom size */
-.pru-btn-custom {
-  padding: 12px 24px;
-  font-size: 15px;
-}
-
-/* Custom border radius */
-.pru-btn {
-  border-radius: 4px; /* Override default 2px */
-}
-```
-
-### Additional Classes
-
-```tsx
-<Button 
-  variant="primary" 
-  className="my-custom-class"
->
-  Custom Button
-</Button>
-```
-
-## Accessibility
-
-The button component includes:
-
-- ✅ Proper ARIA attributes (`aria-disabled`, `aria-busy`)
-- ✅ Keyboard navigation support
-- ✅ Focus visible states
-- ✅ Screen reader friendly loading states
-- ✅ Disabled state handling
-- ✅ Semantic HTML button element
-
-## Best Practices
-
-1. **Use appropriate variants** for different actions:
-   - `primary` for main actions
-   - `secondary` for secondary actions
-   - `success` for confirmations
-   - `danger` for destructive actions
-   - `outline` for less prominent actions
-   - `ghost` for tertiary actions
-
-2. **Choose the right size**:
-   - `xs` for compact UIs
-   - `small` for inline actions
-   - `medium` for most use cases
-   - `large` for CTAs
-   - `xl` for hero sections
-
-3. **Loading states**: Always show loading feedback for async operations
-
-4. **Icons**: Use meaningful icons that enhance understanding
-
-5. **Elevation**: Use shadows to create visual hierarchy
-
-## Browser Support
-
-- ✅ Chrome (latest)
-- ✅ Firefox (latest)
-- ✅ Safari (latest)
-- ✅ Edge (latest)
-- ✅ Mobile browsers
-
-## Performance
-
-- Lightweight CSS with efficient selectors
-- Optimized animations using transform and opacity
-- Minimal JavaScript overhead
-- No external dependencies (except React)
-
-## TypeScript Support
-
-Full TypeScript support with:
-- Type-safe props
-- IntelliSense autocomplete
-- Type checking for variants and sizes
-- Proper event typing
-
-## License
-
-MIT License - Feel free to use in your projects!
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit issues or pull requests.
-
-## Credits
-
-Created with ❤️ for professional React applications.
-
----
-
-**Version**: 1.0.0  
-**Last Updated**: 2024
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/index.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react");var v={exports:{}},_={};var I;function re(){if(I)return _;I=1;var u=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function l(c,o,s){var i=null;if(s!==void 0&&(i=""+s),o.key!==void 0&&(i=""+o.key),"key"in o){s={};for(var f in o)f!=="key"&&(s[f]=o[f])}else s=o;return o=s.ref,{$$typeof:u,type:c,key:i,ref:o!==void 0?o:null,props:s}}return _.Fragment=d,_.jsx=l,_.jsxs=l,_}var E={};var F;function te(){return F||(F=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case q:return"Profiler";case U:return"StrictMode";case G:return"Suspense";case X:return"SuspenseList";case H:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case V:return e.displayName||"Context";case J:return(e._context.displayName||"Context")+".Consumer";case z:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case B:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function d(e){return""+e}function l(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),d(e)}}function c(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=O.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function i(e){if(h.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function f(e,r){function t(){g||(g=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function M(){var e=u(this.type);return N[e]||(N[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function L(e,r,t,n,R,S){var a=t.ref;return e={$$typeof:w,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:M}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:R}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function j(e,r,t,n,R,S){var a=r.children;if(a!==void 0)if(n)if(Q(a)){for(n=0;n<a.length;n++)x(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else x(a);if(h.call(r,"key")){a=u(e);var m=Object.keys(r).filter(function(K){return K!=="key"});n=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",$[a+n]||(m=0<m.length?"{"+m.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,a,m,a),$[a+n]=!0)}if(a=null,t!==void 0&&(l(t),a=""+t),i(r)&&(l(r.key),a=""+r.key),"key"in r){t={};for(var A in r)A!=="key"&&(t[A]=r[A])}else t=r;return a&&f(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),L(e,a,t,o(),R,S)}function x(e){y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===k&&(e._payload.status==="fulfilled"?y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function y(e){return typeof e=="object"&&e!==null&&e.$$typeof===w}var b=ee,w=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),q=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),V=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),X=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),H=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),O=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,h=Object.prototype.hasOwnProperty,Q=Array.isArray,P=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var g,N={},C=b.react_stack_bottom_frame.bind(b,s)(),Y=P(c(s)),$={};E.Fragment=T,E.jsx=function(e,r,t){var n=1e4>O.recentlyCreatedOwnerStacks++;return j(e,r,t,!1,n?Error("react-stack-top-frame"):C,n?P(c(e)):Y)},E.jsxs=function(e,r,t){var n=1e4>O.recentlyCreatedOwnerStacks++;return j(e,r,t,!0,n?Error("react-stack-top-frame"):C,n?P(c(e)):Y)}})()),E}var D;function ne(){return D||(D=1,process.env.NODE_ENV==="production"?v.exports=re():v.exports=te()),v.exports}var p=ne();const ae=({variant:u="solid",size:d="md",loading:l=!1,icon:c,children:o,className:s="",disabled:i,...f})=>p.jsxs("button",{className:`pure-btn ${u}-btn ${d}-btn ${s}`,disabled:i||l,...f,children:[l&&p.jsx("span",{className:"loader"}),c&&p.jsx("span",{className:"btn-icon",children:c}),p.jsx("span",{className:c||l?"btn-text":"",children:o})]});exports.PureButton=ae;