pure-react-ui 1.4.5 → 1.4.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.
- package/README.md +64 -0
- package/dist/components/Button/Button.d.ts +2 -1
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/dist/index.css +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.css +1 -0
- package/dist/index.esm.js +4 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -33
- package/dist/index.js.map +1 -1
- package/package.json +8 -4
- package/src/styles/index.css +81 -0
- package/src/styles/variables.css +80 -0
package/README.md
CHANGED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Pure React UI
|
|
2
|
+
|
|
3
|
+
A modern, accessible React UI component library with TypeScript support.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install pure-react-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
import React from 'react';
|
|
15
|
+
import { PureButton } from 'pure-react-ui';
|
|
16
|
+
import 'pure-react-ui/src/styles/index.css'; // Import the CSS variables
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<div>
|
|
21
|
+
<PureButton variant="primary" size="md">
|
|
22
|
+
Click me
|
|
23
|
+
</PureButton>
|
|
24
|
+
|
|
25
|
+
<PureButton variant="secondary" size="lg" fullWidth>
|
|
26
|
+
Full Width Button
|
|
27
|
+
</PureButton>
|
|
28
|
+
|
|
29
|
+
<PureButton variant="outline" size="sm" loading>
|
|
30
|
+
Loading...
|
|
31
|
+
</PureButton>
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export default App;
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Components
|
|
40
|
+
|
|
41
|
+
### PureButton
|
|
42
|
+
|
|
43
|
+
A versatile button component with multiple variants, sizes, and states.
|
|
44
|
+
|
|
45
|
+
#### Props
|
|
46
|
+
|
|
47
|
+
- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'outline' | 'ghost'
|
|
48
|
+
- `size`: 'sm' | 'md' | 'lg'
|
|
49
|
+
- `fullWidth`: boolean
|
|
50
|
+
- `loading`: boolean
|
|
51
|
+
- `disabled`: boolean
|
|
52
|
+
- `leftIcon`: ReactNode
|
|
53
|
+
- `rightIcon`: ReactNode
|
|
54
|
+
- Plus all standard button props
|
|
55
|
+
|
|
56
|
+
## Features
|
|
57
|
+
|
|
58
|
+
- TypeScript support with full type definitions
|
|
59
|
+
- Accessible design with proper ARIA attributes
|
|
60
|
+
- CSS variables for easy theming
|
|
61
|
+
- Multiple variants and sizes
|
|
62
|
+
- Loading and disabled states
|
|
63
|
+
- Icon support
|
|
64
|
+
- Responsive design
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AAEpC,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmD5C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Button-module_button__2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module_button--primary__0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module_button--primary__0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module_button--secondary__iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module_button--secondary__iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module_button--success__1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module_button--success__1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module_button--danger__y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module_button--danger__y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module_button--warning__cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module_button--warning__cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module_button--outline__eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module_button--outline__eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--ghost__nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module_button--ghost__nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--sm__-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module_button--md__-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module_button--lg__p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module_button--full-width__XyuwA{width:100%}.Button-module_button--loading__lNyfH{opacity:.8;pointer-events:none}.Button-module_button__2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__icon__e6c-f,.Button-module_button__text__JjFiL{align-items:center;display:flex;justify-content:center}.Button-module_button__spinner__1soI4{height:20px;position:absolute;width:20px}.Button-module_spinner__ZExvW{animation:Button-module_rotate__TQjyl 2s linear infinite;height:100%;width:100%}.Button-module_spinner-path__Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module_dash__NItHE 1.5s ease-in-out infinite}@keyframes Button-module_rotate__TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module_dash__NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:root{--pure-color-primary:#2563eb;--pure-color-primary-hover:#1d4ed8;--pure-color-primary-light:#dbeafe;--pure-color-secondary:#64748b;--pure-color-secondary-hover:#475569;--pure-color-secondary-light:#f1f5f9;--pure-color-success:#10b981;--pure-color-success-hover:#059669;--pure-color-success-light:#d1fae5;--pure-color-danger:#ef4444;--pure-color-danger-hover:#dc2626;--pure-color-danger-light:#fee2e2;--pure-color-warning:#f59e0b;--pure-color-warning-hover:#d97706;--pure-color-warning-light:#fef3c7;--pure-color-info:#3b82f6;--pure-color-info-hover:#2563eb;--pure-color-info-light:#dbeafe;--pure-color-white:#fff;--pure-color-black:#000;--pure-color-gray-50:#f9fafb;--pure-color-gray-100:#f3f4f6;--pure-color-gray-200:#e5e7eb;--pure-color-gray-300:#d1d5db;--pure-color-gray-400:#9ca3af;--pure-color-gray-500:#6b7280;--pure-color-gray-600:#4b5563;--pure-color-gray-700:#374151;--pure-color-gray-800:#1f2937;--pure-color-gray-900:#111827;--pure-spacing-xs:0.25rem;--pure-spacing-sm:0.5rem;--pure-spacing-md:1rem;--pure-spacing-lg:1.5rem;--pure-spacing-xl:2rem;--pure-spacing-2xl:3rem;--pure-radius-sm:0.25rem;--pure-radius-md:0.375rem;--pure-radius-lg:0.5rem;--pure-radius-xl:0.75rem;--pure-radius-full:9999px;--pure-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--pure-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--pure-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--pure-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--pure-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--pure-font-size-xs:0.75rem;--pure-font-size-sm:0.875rem;--pure-font-size-md:1rem;--pure-font-size-lg:1.125rem;--pure-font-size-xl:1.25rem;--pure-font-size-2xl:1.5rem;--pure-transition-fast:150ms ease-in-out;--pure-transition-base:200ms ease-in-out;--pure-transition-slow:300ms ease-in-out;--pure-z-dropdown:1000;--pure-z-modal:1050;--pure-z-tooltip:1100}
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Button-module__button___2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module__button--primary___0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module__button--primary___0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module__button--secondary___iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module__button--secondary___iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module__button--success___1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module__button--success___1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module__button--danger___y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module__button--danger___y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module__button--warning___cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module__button--warning___cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module__button--outline___eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module__button--outline___eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module__button--ghost___nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module__button--ghost___nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module__button--sm___-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module__button--md___-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module__button--lg___p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module__button--full-width___XyuwA{width:100%}.Button-module__button--loading___lNyfH{opacity:.8;pointer-events:none}.Button-module__button___2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module__button__icon___e6c-f,.Button-module__button__text___JjFiL{align-items:center;display:flex;justify-content:center}.Button-module__button__spinner___1soI4{height:20px;position:absolute;width:20px}.Button-module__spinner___ZExvW{animation:Button-module__rotate___TQjyl 2s linear infinite;height:100%;width:100%}.Button-module__spinner-path___Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module__dash___NItHE 1.5s ease-in-out infinite}@keyframes Button-module__rotate___TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module__dash___NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:root{--pure-color-primary:#2563eb;--pure-color-primary-hover:#1d4ed8;--pure-color-primary-light:#dbeafe;--pure-color-secondary:#64748b;--pure-color-secondary-hover:#475569;--pure-color-secondary-light:#f1f5f9;--pure-color-success:#10b981;--pure-color-success-hover:#059669;--pure-color-success-light:#d1fae5;--pure-color-danger:#ef4444;--pure-color-danger-hover:#dc2626;--pure-color-danger-light:#fee2e2;--pure-color-warning:#f59e0b;--pure-color-warning-hover:#d97706;--pure-color-warning-light:#fef3c7;--pure-color-info:#3b82f6;--pure-color-info-hover:#2563eb;--pure-color-info-light:#dbeafe;--pure-color-white:#fff;--pure-color-black:#000;--pure-color-gray-50:#f9fafb;--pure-color-gray-100:#f3f4f6;--pure-color-gray-200:#e5e7eb;--pure-color-gray-300:#d1d5db;--pure-color-gray-400:#9ca3af;--pure-color-gray-500:#6b7280;--pure-color-gray-600:#4b5563;--pure-color-gray-700:#374151;--pure-color-gray-800:#1f2937;--pure-color-gray-900:#111827;--pure-spacing-xs:0.25rem;--pure-spacing-sm:0.5rem;--pure-spacing-md:1rem;--pure-spacing-lg:1.5rem;--pure-spacing-xl:2rem;--pure-spacing-2xl:3rem;--pure-radius-sm:0.25rem;--pure-radius-md:0.375rem;--pure-radius-lg:0.5rem;--pure-radius-xl:0.75rem;--pure-radius-full:9999px;--pure-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--pure-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--pure-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--pure-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--pure-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--pure-font-size-xs:0.75rem;--pure-font-size-sm:0.875rem;--pure-font-size-md:1rem;--pure-font-size-lg:1.125rem;--pure-font-size-xl:1.25rem;--pure-font-size-2xl:1.5rem;--pure-transition-fast:150ms ease-in-out;--pure-transition-base:200ms ease-in-out;--pure-transition-slow:300ms ease-in-out;--pure-z-dropdown:1000;--pure-z-modal:1050;--pure-z-tooltip:1100}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { PureButton } from './components/Button';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Button-module__button___2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module__button--primary___0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module__button--primary___0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module__button--secondary___iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module__button--secondary___iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module__button--success___1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module__button--success___1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module__button--danger___y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module__button--danger___y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module__button--warning___cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module__button--warning___cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module__button--outline___eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module__button--outline___eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module__button--ghost___nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module__button--ghost___nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module__button--sm___-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module__button--md___-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module__button--lg___p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module__button--full-width___XyuwA{width:100%}.Button-module__button--loading___lNyfH{opacity:.8;pointer-events:none}.Button-module__button___2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module__button__icon___e6c-f,.Button-module__button__text___JjFiL{align-items:center;display:flex;justify-content:center}.Button-module__button__spinner___1soI4{height:20px;position:absolute;width:20px}.Button-module__spinner___ZExvW{animation:Button-module__rotate___TQjyl 2s linear infinite;height:100%;width:100%}.Button-module__spinner-path___Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module__dash___NItHE 1.5s ease-in-out infinite}@keyframes Button-module__rotate___TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module__dash___NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:root{--pure-color-primary:#2563eb;--pure-color-primary-hover:#1d4ed8;--pure-color-primary-light:#dbeafe;--pure-color-secondary:#64748b;--pure-color-secondary-hover:#475569;--pure-color-secondary-light:#f1f5f9;--pure-color-success:#10b981;--pure-color-success-hover:#059669;--pure-color-success-light:#d1fae5;--pure-color-danger:#ef4444;--pure-color-danger-hover:#dc2626;--pure-color-danger-light:#fee2e2;--pure-color-warning:#f59e0b;--pure-color-warning-hover:#d97706;--pure-color-warning-light:#fef3c7;--pure-color-info:#3b82f6;--pure-color-info-hover:#2563eb;--pure-color-info-light:#dbeafe;--pure-color-white:#fff;--pure-color-black:#000;--pure-color-gray-50:#f9fafb;--pure-color-gray-100:#f3f4f6;--pure-color-gray-200:#e5e7eb;--pure-color-gray-300:#d1d5db;--pure-color-gray-400:#9ca3af;--pure-color-gray-500:#6b7280;--pure-color-gray-600:#4b5563;--pure-color-gray-700:#374151;--pure-color-gray-800:#1f2937;--pure-color-gray-900:#111827;--pure-spacing-xs:0.25rem;--pure-spacing-sm:0.5rem;--pure-spacing-md:1rem;--pure-spacing-lg:1.5rem;--pure-spacing-xl:2rem;--pure-spacing-2xl:3rem;--pure-radius-sm:0.25rem;--pure-radius-md:0.375rem;--pure-radius-lg:0.5rem;--pure-radius-xl:0.75rem;--pure-radius-full:9999px;--pure-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--pure-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--pure-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--pure-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--pure-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--pure-font-size-xs:0.75rem;--pure-font-size-sm:0.875rem;--pure-font-size-md:1rem;--pure-font-size-lg:1.125rem;--pure-font-size-xl:1.25rem;--pure-font-size-2xl:1.5rem;--pure-transition-fast:150ms ease-in-out;--pure-transition-base:200ms ease-in-out;--pure-transition-slow:300ms ease-in-out;--pure-z-dropdown:1000;--pure-z-modal:1050;--pure-z-tooltip:1100}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,37 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
if ( ref === void 0 ) ref = {};
|
|
5
|
-
var insertAt = ref.insertAt;
|
|
3
|
+
var styles = {"button":"Button-module__button___2ZuB7","button--primary":"Button-module__button--primary___0eqDM","button--secondary":"Button-module__button--secondary___iK3TS","button--success":"Button-module__button--success___1WVzM","button--danger":"Button-module__button--danger___y2uGS","button--warning":"Button-module__button--warning___cp3iP","button--outline":"Button-module__button--outline___eVhnr","button--ghost":"Button-module__button--ghost___nktSD","button--sm":"Button-module__button--sm___-XOLs","button--md":"Button-module__button--md___-GRga","button--lg":"Button-module__button--lg___p-URz","button--full-width":"Button-module__button--full-width___XyuwA","button--loading":"Button-module__button--loading___lNyfH","button__icon":"Button-module__button__icon___e6c-f","button__text":"Button-module__button__text___JjFiL","button__spinner":"Button-module__button__spinner___1soI4","spinner":"Button-module__spinner___ZExvW","rotate":"Button-module__rotate___TQjyl","spinner-path":"Button-module__spinner-path___Zk3SN","dash":"Button-module__dash___NItHE"};
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
10
|
-
var style = document.createElement('style');
|
|
11
|
-
style.type = 'text/css';
|
|
12
|
-
|
|
13
|
-
if (insertAt === 'top') {
|
|
14
|
-
if (head.firstChild) {
|
|
15
|
-
head.insertBefore(style, head.firstChild);
|
|
16
|
-
} else {
|
|
17
|
-
head.appendChild(style);
|
|
18
|
-
}
|
|
19
|
-
} else {
|
|
20
|
-
head.appendChild(style);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
if (style.styleSheet) {
|
|
24
|
-
style.styleSheet.cssText = css;
|
|
25
|
-
} else {
|
|
26
|
-
style.appendChild(document.createTextNode(css));
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
var css_248z = ".Button-module_button__2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module_button--primary__0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module_button--primary__0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module_button--secondary__iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module_button--secondary__iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module_button--success__1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module_button--success__1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module_button--danger__y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module_button--danger__y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module_button--warning__cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module_button--warning__cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module_button--outline__eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module_button--outline__eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--ghost__nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module_button--ghost__nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--sm__-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module_button--md__-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module_button--lg__p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module_button--full-width__XyuwA{width:100%}.Button-module_button--loading__lNyfH{opacity:.8;pointer-events:none}.Button-module_button__2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__icon__e6c-f,.Button-module_button__text__JjFiL{align-items:center;display:flex;justify-content:center}.Button-module_button__spinner__1soI4{height:20px;position:absolute;width:20px}.Button-module_spinner__ZExvW{animation:Button-module_rotate__TQjyl 2s linear infinite;height:100%;width:100%}.Button-module_spinner-path__Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module_dash__NItHE 1.5s ease-in-out infinite}@keyframes Button-module_rotate__TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module_dash__NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}";
|
|
31
|
-
var styles = {"button":"Button-module_button__2ZuB7","button--primary":"Button-module_button--primary__0eqDM","button--secondary":"Button-module_button--secondary__iK3TS","button--success":"Button-module_button--success__1WVzM","button--danger":"Button-module_button--danger__y2uGS","button--warning":"Button-module_button--warning__cp3iP","button--outline":"Button-module_button--outline__eVhnr","button--ghost":"Button-module_button--ghost__nktSD","button--sm":"Button-module_button--sm__-XOLs","button--md":"Button-module_button--md__-GRga","button--lg":"Button-module_button--lg__p-URz","button--full-width":"Button-module_button--full-width__XyuwA","button--loading":"Button-module_button--loading__lNyfH","button__icon":"Button-module_button__icon__e6c-f","button__text":"Button-module_button__text__JjFiL","button__spinner":"Button-module_button__spinner__1soI4","spinner":"Button-module_spinner__ZExvW","rotate":"Button-module_rotate__TQjyl","spinner-path":"Button-module_spinner-path__Zk3SN","dash":"Button-module_dash__NItHE"};
|
|
32
|
-
styleInject(css_248z);
|
|
33
|
-
|
|
34
|
-
const Button = ({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, children, leftIcon, rightIcon, className = '', ...props }) => {
|
|
5
|
+
const PureButton = ({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, children, leftIcon, rightIcon, className = '', ...props }) => {
|
|
35
6
|
const classes = [
|
|
36
7
|
styles.button,
|
|
37
8
|
styles[`button--${variant}`],
|
|
@@ -48,7 +19,7 @@ const Button = ({ variant = 'primary', size = 'md', fullWidth = false, loading =
|
|
|
48
19
|
React.createElement("span", { className: styles['button__text'] }, children),
|
|
49
20
|
!loading && rightIcon && (React.createElement("span", { className: styles['button__icon'] }, rightIcon))));
|
|
50
21
|
};
|
|
51
|
-
|
|
22
|
+
PureButton.displayName = 'PureButton';
|
|
52
23
|
|
|
53
|
-
export {
|
|
24
|
+
export { PureButton };
|
|
54
25
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport { ButtonProps } from './Button.types';\r\nimport styles from \"./Button.module.css\";\r\nimport \"../../styles/variables.css\";\r\n\r\nexport const PureButton: React.FC<ButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n fullWidth = false,\r\n loading = false,\r\n disabled = false,\r\n children,\r\n leftIcon,\r\n rightIcon,\r\n className = '',\r\n ...props\r\n}) => {\r\n const classes = [\r\n styles.button,\r\n styles[`button--${variant}`],\r\n styles[`button--${size}`],\r\n fullWidth && styles['button--full-width'],\r\n loading && styles['button--loading'],\r\n className\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <button\r\n className={classes}\r\n disabled={disabled || loading}\r\n {...props}\r\n >\r\n {loading && (\r\n <span className={styles['button__spinner']}>\r\n {/* Loading spinner */}\r\n <svg className={styles['spinner']} viewBox=\"0 0 50 50\">\r\n <circle\r\n className={styles['spinner-path']}\r\n cx=\"25\"\r\n cy=\"25\"\r\n r=\"20\"\r\n fill=\"none\"\r\n strokeWidth=\"4\"\r\n />\r\n </svg>\r\n </span>\r\n )}\r\n {!loading && leftIcon && (\r\n <span className={styles['button__icon']}>{leftIcon}</span>\r\n )}\r\n <span className={styles['button__text']}>{children}</span>\r\n {!loading && rightIcon && (\r\n <span className={styles['button__icon']}>{rightIcon}</span>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nPureButton.displayName = 'PureButton';"],"names":[],"mappings":";;;;AAKO,MAAM,UAAU,GAA0B,CAAC,EAC9C,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,MAAM,CAAC,MAAM;AACb,QAAA,MAAM,CAAC,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,CAAC;AAC5B,QAAA,MAAM,CAAC,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE,CAAC;AACzB,QAAA,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC;AACzC,QAAA,OAAO,IAAI,MAAM,CAAC,iBAAiB,CAAC;QACpC;KACH,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAE3B,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,GACzB,KAAK,EAAA;QAER,OAAO,KACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAA;YAEtC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAC,WAAW,EAAA;AAClD,gBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EAAA,CACjB,CACA,CACH,CACV;AACA,QAAA,CAAC,OAAO,IAAI,QAAQ,KACjB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAQ,CAC7D;QACD,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAQ;AACzD,QAAA,CAAC,OAAO,IAAI,SAAS,KAClB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,SAAS,CAAQ,CAC9D,CACI;AAEjB;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -2,38 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
if ( ref === void 0 ) ref = {};
|
|
7
|
-
var insertAt = ref.insertAt;
|
|
5
|
+
var styles = {"button":"Button-module__button___2ZuB7","button--primary":"Button-module__button--primary___0eqDM","button--secondary":"Button-module__button--secondary___iK3TS","button--success":"Button-module__button--success___1WVzM","button--danger":"Button-module__button--danger___y2uGS","button--warning":"Button-module__button--warning___cp3iP","button--outline":"Button-module__button--outline___eVhnr","button--ghost":"Button-module__button--ghost___nktSD","button--sm":"Button-module__button--sm___-XOLs","button--md":"Button-module__button--md___-GRga","button--lg":"Button-module__button--lg___p-URz","button--full-width":"Button-module__button--full-width___XyuwA","button--loading":"Button-module__button--loading___lNyfH","button__icon":"Button-module__button__icon___e6c-f","button__text":"Button-module__button__text___JjFiL","button__spinner":"Button-module__button__spinner___1soI4","spinner":"Button-module__spinner___ZExvW","rotate":"Button-module__rotate___TQjyl","spinner-path":"Button-module__spinner-path___Zk3SN","dash":"Button-module__dash___NItHE"};
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
12
|
-
var style = document.createElement('style');
|
|
13
|
-
style.type = 'text/css';
|
|
14
|
-
|
|
15
|
-
if (insertAt === 'top') {
|
|
16
|
-
if (head.firstChild) {
|
|
17
|
-
head.insertBefore(style, head.firstChild);
|
|
18
|
-
} else {
|
|
19
|
-
head.appendChild(style);
|
|
20
|
-
}
|
|
21
|
-
} else {
|
|
22
|
-
head.appendChild(style);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
if (style.styleSheet) {
|
|
26
|
-
style.styleSheet.cssText = css;
|
|
27
|
-
} else {
|
|
28
|
-
style.appendChild(document.createTextNode(css));
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
var css_248z = ".Button-module_button__2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module_button--primary__0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module_button--primary__0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module_button--secondary__iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module_button--secondary__iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module_button--success__1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module_button--success__1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module_button--danger__y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module_button--danger__y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module_button--warning__cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module_button--warning__cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module_button--outline__eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module_button--outline__eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--ghost__nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module_button--ghost__nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--sm__-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module_button--md__-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module_button--lg__p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module_button--full-width__XyuwA{width:100%}.Button-module_button--loading__lNyfH{opacity:.8;pointer-events:none}.Button-module_button__2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__icon__e6c-f,.Button-module_button__text__JjFiL{align-items:center;display:flex;justify-content:center}.Button-module_button__spinner__1soI4{height:20px;position:absolute;width:20px}.Button-module_spinner__ZExvW{animation:Button-module_rotate__TQjyl 2s linear infinite;height:100%;width:100%}.Button-module_spinner-path__Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module_dash__NItHE 1.5s ease-in-out infinite}@keyframes Button-module_rotate__TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module_dash__NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}";
|
|
33
|
-
var styles = {"button":"Button-module_button__2ZuB7","button--primary":"Button-module_button--primary__0eqDM","button--secondary":"Button-module_button--secondary__iK3TS","button--success":"Button-module_button--success__1WVzM","button--danger":"Button-module_button--danger__y2uGS","button--warning":"Button-module_button--warning__cp3iP","button--outline":"Button-module_button--outline__eVhnr","button--ghost":"Button-module_button--ghost__nktSD","button--sm":"Button-module_button--sm__-XOLs","button--md":"Button-module_button--md__-GRga","button--lg":"Button-module_button--lg__p-URz","button--full-width":"Button-module_button--full-width__XyuwA","button--loading":"Button-module_button--loading__lNyfH","button__icon":"Button-module_button__icon__e6c-f","button__text":"Button-module_button__text__JjFiL","button__spinner":"Button-module_button__spinner__1soI4","spinner":"Button-module_spinner__ZExvW","rotate":"Button-module_rotate__TQjyl","spinner-path":"Button-module_spinner-path__Zk3SN","dash":"Button-module_dash__NItHE"};
|
|
34
|
-
styleInject(css_248z);
|
|
35
|
-
|
|
36
|
-
const Button = ({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, children, leftIcon, rightIcon, className = '', ...props }) => {
|
|
7
|
+
const PureButton = ({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, children, leftIcon, rightIcon, className = '', ...props }) => {
|
|
37
8
|
const classes = [
|
|
38
9
|
styles.button,
|
|
39
10
|
styles[`button--${variant}`],
|
|
@@ -50,7 +21,7 @@ const Button = ({ variant = 'primary', size = 'md', fullWidth = false, loading =
|
|
|
50
21
|
React.createElement("span", { className: styles['button__text'] }, children),
|
|
51
22
|
!loading && rightIcon && (React.createElement("span", { className: styles['button__icon'] }, rightIcon))));
|
|
52
23
|
};
|
|
53
|
-
|
|
24
|
+
PureButton.displayName = 'PureButton';
|
|
54
25
|
|
|
55
|
-
exports.
|
|
26
|
+
exports.PureButton = PureButton;
|
|
56
27
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport { ButtonProps } from './Button.types';\r\nimport styles from \"./Button.module.css\";\r\nimport \"../../styles/variables.css\";\r\n\r\nexport const PureButton: React.FC<ButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n fullWidth = false,\r\n loading = false,\r\n disabled = false,\r\n children,\r\n leftIcon,\r\n rightIcon,\r\n className = '',\r\n ...props\r\n}) => {\r\n const classes = [\r\n styles.button,\r\n styles[`button--${variant}`],\r\n styles[`button--${size}`],\r\n fullWidth && styles['button--full-width'],\r\n loading && styles['button--loading'],\r\n className\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <button\r\n className={classes}\r\n disabled={disabled || loading}\r\n {...props}\r\n >\r\n {loading && (\r\n <span className={styles['button__spinner']}>\r\n {/* Loading spinner */}\r\n <svg className={styles['spinner']} viewBox=\"0 0 50 50\">\r\n <circle\r\n className={styles['spinner-path']}\r\n cx=\"25\"\r\n cy=\"25\"\r\n r=\"20\"\r\n fill=\"none\"\r\n strokeWidth=\"4\"\r\n />\r\n </svg>\r\n </span>\r\n )}\r\n {!loading && leftIcon && (\r\n <span className={styles['button__icon']}>{leftIcon}</span>\r\n )}\r\n <span className={styles['button__text']}>{children}</span>\r\n {!loading && rightIcon && (\r\n <span className={styles['button__icon']}>{rightIcon}</span>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nPureButton.displayName = 'PureButton';"],"names":[],"mappings":";;;;;;AAKO,MAAM,UAAU,GAA0B,CAAC,EAC9C,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,MAAM,CAAC,MAAM;AACb,QAAA,MAAM,CAAC,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,CAAC;AAC5B,QAAA,MAAM,CAAC,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE,CAAC;AACzB,QAAA,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC;AACzC,QAAA,OAAO,IAAI,MAAM,CAAC,iBAAiB,CAAC;QACpC;KACH,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAE3B,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,GACzB,KAAK,EAAA;QAER,OAAO,KACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAA;YAEtC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAC,WAAW,EAAA;AAClD,gBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EAAA,CACjB,CACA,CACH,CACV;AACA,QAAA,CAAC,OAAO,IAAI,QAAQ,KACjB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAQ,CAC7D;QACD,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAQ;AACzD,QAAA,CAAC,OAAO,IAAI,SAAS,KAClB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,SAAS,CAAQ,CAC9D,CACI;AAEjB;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pure-react-ui",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.6",
|
|
4
4
|
"description": "A modern, accessible React UI component library with TypeScript",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"style": "src/styles/index.css",
|
|
8
9
|
"type": "module",
|
|
9
10
|
"files": [
|
|
10
|
-
"dist"
|
|
11
|
+
"dist",
|
|
12
|
+
"src/styles"
|
|
11
13
|
],
|
|
12
14
|
"scripts": {
|
|
13
15
|
"build": "rollup -c",
|
|
@@ -26,6 +28,10 @@
|
|
|
26
28
|
],
|
|
27
29
|
"author": "Asad",
|
|
28
30
|
"license": "ISC",
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"react": "^19.2.3",
|
|
33
|
+
"react-dom": "^19.2.3"
|
|
34
|
+
},
|
|
29
35
|
"devDependencies": {
|
|
30
36
|
"@rollup/plugin-commonjs": "^29.0.0",
|
|
31
37
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
@@ -42,8 +48,6 @@
|
|
|
42
48
|
"jest-environment-jsdom": "^30.2.0",
|
|
43
49
|
"postcss": "^8.5.6",
|
|
44
50
|
"prettier": "^3.7.4",
|
|
45
|
-
"react": "^19.2.3",
|
|
46
|
-
"react-dom": "^19.2.3",
|
|
47
51
|
"rollup": "^4.54.0",
|
|
48
52
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
49
53
|
"rollup-plugin-postcss": "^4.0.2",
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* CSS Variables */
|
|
2
|
+
:root {
|
|
3
|
+
/* Colors */
|
|
4
|
+
--pure-color-primary: #2563eb;
|
|
5
|
+
--pure-color-primary-hover: #1d4ed8;
|
|
6
|
+
--pure-color-primary-light: #dbeafe;
|
|
7
|
+
|
|
8
|
+
--pure-color-secondary: #64748b;
|
|
9
|
+
--pure-color-secondary-hover: #475569;
|
|
10
|
+
--pure-color-secondary-light: #f1f5f9;
|
|
11
|
+
|
|
12
|
+
--pure-color-success: #10b981;
|
|
13
|
+
--pure-color-success-hover: #059669;
|
|
14
|
+
--pure-color-success-light: #d1fae5;
|
|
15
|
+
|
|
16
|
+
--pure-color-danger: #ef4444;
|
|
17
|
+
--pure-color-danger-hover: #dc2626;
|
|
18
|
+
--pure-color-danger-light: #fee2e2;
|
|
19
|
+
|
|
20
|
+
--pure-color-warning: #f59e0b;
|
|
21
|
+
--pure-color-warning-hover: #d97706;
|
|
22
|
+
--pure-color-warning-light: #fef3c7;
|
|
23
|
+
|
|
24
|
+
--pure-color-info: #3b82f6;
|
|
25
|
+
--pure-color-info-hover: #2563eb;
|
|
26
|
+
--pure-color-info-light: #dbeafe;
|
|
27
|
+
|
|
28
|
+
/* Neutrals */
|
|
29
|
+
--pure-color-white: #ffffff;
|
|
30
|
+
--pure-color-black: #000000;
|
|
31
|
+
--pure-color-gray-50: #f9fafb;
|
|
32
|
+
--pure-color-gray-100: #f3f4f6;
|
|
33
|
+
--pure-color-gray-200: #e5e7eb;
|
|
34
|
+
--pure-color-gray-300: #d1d5db;
|
|
35
|
+
--pure-color-gray-400: #9ca3af;
|
|
36
|
+
--pure-color-gray-500: #6b7280;
|
|
37
|
+
--pure-color-gray-600: #4b5563;
|
|
38
|
+
--pure-color-gray-700: #374151;
|
|
39
|
+
--pure-color-gray-800: #1f2937;
|
|
40
|
+
--pure-color-gray-900: #111827;
|
|
41
|
+
|
|
42
|
+
/* Spacing */
|
|
43
|
+
--pure-spacing-xs: 0.25rem;
|
|
44
|
+
--pure-spacing-sm: 0.5rem;
|
|
45
|
+
--pure-spacing-md: 1rem;
|
|
46
|
+
--pure-spacing-lg: 1.5rem;
|
|
47
|
+
--pure-spacing-xl: 2rem;
|
|
48
|
+
--pure-spacing-2xl: 3rem;
|
|
49
|
+
|
|
50
|
+
/* Border Radius */
|
|
51
|
+
--pure-radius-sm: 0.25rem;
|
|
52
|
+
--pure-radius-md: 0.375rem;
|
|
53
|
+
--pure-radius-lg: 0.5rem;
|
|
54
|
+
--pure-radius-xl: 0.75rem;
|
|
55
|
+
--pure-radius-full: 9999px;
|
|
56
|
+
|
|
57
|
+
/* Shadows */
|
|
58
|
+
--pure-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
59
|
+
--pure-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
60
|
+
--pure-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
61
|
+
--pure-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
62
|
+
|
|
63
|
+
/* Typography */
|
|
64
|
+
--pure-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
65
|
+
--pure-font-size-xs: 0.75rem;
|
|
66
|
+
--pure-font-size-sm: 0.875rem;
|
|
67
|
+
--pure-font-size-md: 1rem;
|
|
68
|
+
--pure-font-size-lg: 1.125rem;
|
|
69
|
+
--pure-font-size-xl: 1.25rem;
|
|
70
|
+
--pure-font-size-2xl: 1.5rem;
|
|
71
|
+
|
|
72
|
+
/* Transitions */
|
|
73
|
+
--pure-transition-fast: 150ms ease-in-out;
|
|
74
|
+
--pure-transition-base: 200ms ease-in-out;
|
|
75
|
+
--pure-transition-slow: 300ms ease-in-out;
|
|
76
|
+
|
|
77
|
+
/* Z-index */
|
|
78
|
+
--pure-z-dropdown: 1000;
|
|
79
|
+
--pure-z-modal: 1050;
|
|
80
|
+
--pure-z-tooltip: 1100;
|
|
81
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Colors */
|
|
3
|
+
--pure-color-primary: #2563eb;
|
|
4
|
+
--pure-color-primary-hover: #1d4ed8;
|
|
5
|
+
--pure-color-primary-light: #dbeafe;
|
|
6
|
+
|
|
7
|
+
--pure-color-secondary: #64748b;
|
|
8
|
+
--pure-color-secondary-hover: #475569;
|
|
9
|
+
--pure-color-secondary-light: #f1f5f9;
|
|
10
|
+
|
|
11
|
+
--pure-color-success: #10b981;
|
|
12
|
+
--pure-color-success-hover: #059669;
|
|
13
|
+
--pure-color-success-light: #d1fae5;
|
|
14
|
+
|
|
15
|
+
--pure-color-danger: #ef4444;
|
|
16
|
+
--pure-color-danger-hover: #dc2626;
|
|
17
|
+
--pure-color-danger-light: #fee2e2;
|
|
18
|
+
|
|
19
|
+
--pure-color-warning: #f59e0b;
|
|
20
|
+
--pure-color-warning-hover: #d97706;
|
|
21
|
+
--pure-color-warning-light: #fef3c7;
|
|
22
|
+
|
|
23
|
+
--pure-color-info: #3b82f6;
|
|
24
|
+
--pure-color-info-hover: #2563eb;
|
|
25
|
+
--pure-color-info-light: #dbeafe;
|
|
26
|
+
|
|
27
|
+
/* Neutrals */
|
|
28
|
+
--pure-color-white: #ffffff;
|
|
29
|
+
--pure-color-black: #000000;
|
|
30
|
+
--pure-color-gray-50: #f9fafb;
|
|
31
|
+
--pure-color-gray-100: #f3f4f6;
|
|
32
|
+
--pure-color-gray-200: #e5e7eb;
|
|
33
|
+
--pure-color-gray-300: #d1d5db;
|
|
34
|
+
--pure-color-gray-400: #9ca3af;
|
|
35
|
+
--pure-color-gray-500: #6b7280;
|
|
36
|
+
--pure-color-gray-600: #4b5563;
|
|
37
|
+
--pure-color-gray-700: #374151;
|
|
38
|
+
--pure-color-gray-800: #1f2937;
|
|
39
|
+
--pure-color-gray-900: #111827;
|
|
40
|
+
|
|
41
|
+
/* Spacing */
|
|
42
|
+
--pure-spacing-xs: 0.25rem;
|
|
43
|
+
--pure-spacing-sm: 0.5rem;
|
|
44
|
+
--pure-spacing-md: 1rem;
|
|
45
|
+
--pure-spacing-lg: 1.5rem;
|
|
46
|
+
--pure-spacing-xl: 2rem;
|
|
47
|
+
--pure-spacing-2xl: 3rem;
|
|
48
|
+
|
|
49
|
+
/* Border Radius */
|
|
50
|
+
--pure-radius-sm: 0.25rem;
|
|
51
|
+
--pure-radius-md: 0.375rem;
|
|
52
|
+
--pure-radius-lg: 0.5rem;
|
|
53
|
+
--pure-radius-xl: 0.75rem;
|
|
54
|
+
--pure-radius-full: 9999px;
|
|
55
|
+
|
|
56
|
+
/* Shadows */
|
|
57
|
+
--pure-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
58
|
+
--pure-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
59
|
+
--pure-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
60
|
+
--pure-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
61
|
+
|
|
62
|
+
/* Typography */
|
|
63
|
+
--pure-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
64
|
+
--pure-font-size-xs: 0.75rem;
|
|
65
|
+
--pure-font-size-sm: 0.875rem;
|
|
66
|
+
--pure-font-size-md: 1rem;
|
|
67
|
+
--pure-font-size-lg: 1.125rem;
|
|
68
|
+
--pure-font-size-xl: 1.25rem;
|
|
69
|
+
--pure-font-size-2xl: 1.5rem;
|
|
70
|
+
|
|
71
|
+
/* Transitions */
|
|
72
|
+
--pure-transition-fast: 150ms ease-in-out;
|
|
73
|
+
--pure-transition-base: 200ms ease-in-out;
|
|
74
|
+
--pure-transition-slow: 300ms ease-in-out;
|
|
75
|
+
|
|
76
|
+
/* Z-index */
|
|
77
|
+
--pure-z-dropdown: 1000;
|
|
78
|
+
--pure-z-modal: 1050;
|
|
79
|
+
--pure-z-tooltip: 1100;
|
|
80
|
+
}
|