pure-react-ui 1.4.6 → 1.5.0

package/README.md

@@ -1,6 +1,6 @@
 # Pure React UI
 
-A modern, accessible React UI component library with TypeScript support.
+A pure React UI component library built with TypeScript. No external dependencies required (except React and ReactDOM as peer dependencies).
 
 ## Installation
 
@@ -8,57 +8,273 @@ A modern, accessible React UI component library with TypeScript support.
 npm install pure-react-ui
 ```
 
-## Usage
-
-```jsx
-import React from 'react';
-import { PureButton } from 'pure-react-ui';
-import 'pure-react-ui/src/styles/index.css'; // Import the CSS variables
-
-function App() {
-  return (
-    <div>
-      <PureButton variant="primary" size="md">
-        Click me
-      </PureButton>
-      
-      <PureButton variant="secondary" size="lg" fullWidth>
-        Full Width Button
-      </PureButton>
-      
-      <PureButton variant="outline" size="sm" loading>
-        Loading...
-      </PureButton>
-    </div>
-  );
-}
-
-export default App;
+## Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+```tsx
+import { Button } from 'pure-react-ui';
+
+<Button variant="primary" size="medium" onClick={handleClick}>
+  Click Me
+</Button>
 ```
 
-## Components
+**Props:**
+- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' (default: 'primary')
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- `fullWidth`: boolean (default: false)
+- `loading`: boolean (default: false)
+- All standard button HTML attributes
+
+### Card
+
+A flexible card component for displaying content.
+
+```tsx
+import { Card } from 'pure-react-ui';
+
+<Card
+  title="Card Title"
+  subtitle="Card Subtitle"
+  image="/path/to/image.jpg"
+  hoverable
+  shadow="medium"
+>
+  Card content goes here
+</Card>
+```
+
+**Props:**
+- `title`: string (optional)
+- `subtitle`: string (optional)
+- `image`: string (optional)
+- `imageAlt`: string (optional)
+- `footer`: React.ReactNode (optional)
+- `hoverable`: boolean (default: false)
+- `shadow`: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
+- `onClick`: () => void (optional)
+
+### Modal
+
+A modal dialog component with overlay and keyboard support.
+
+```tsx
+import { Modal } from 'pure-react-ui';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Modal Title"
+  size="medium"
+>
+  Modal content goes here
+</Modal>
+```
+
+**Props:**
+- `isOpen`: boolean (required)
+- `onClose`: () => void (required)
+- `title`: string (optional)
+- `size`: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
+- `closeOnOverlayClick`: boolean (default: true)
+- `closeOnEscape`: boolean (default: true)
+- `showCloseButton`: boolean (default: true)
+
+### Icon
+
+A comprehensive icon component library with 100+ SVG icons.
+
+```tsx
+import { Icon } from 'pure-react-ui';
+
+<Icon name="Home" size={24} color="#007bff" />
+<Icon name="Search" size={32} onClick={handleClick} />
+```
+
+**Props:**
+- `name`: IconName (required) - Name of the icon to display
+- `size`: number | string (default: 24) - Size of the icon
+- `color`: string (default: 'currentColor') - Color of the icon
+- `className`: string (optional) - Additional CSS classes
+- `onClick`: () => void (optional) - Click handler (makes icon clickable)
+
+**Available Icons:**
+
+**Arrows & Navigation:**
+ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowDownRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, DoubleChevronLeft, DoubleChevronRight, Home, Menu, Close, Search, Filter
+
+**Actions:**
+Plus, Minus, Check, X, Edit, Trash, Save, Download, Upload, Copy, Share
+
+**Media:**
+Play, Pause, Stop, VolumeUp, VolumeDown, VolumeOff, Image, Video, Camera
+
+**Communication:**
+Mail, Message, Phone, Bell, Notification
+
+**Files:**
+File, Folder, FolderOpen, FileText, FilePdf
+
+**User:**
+User, Users, UserPlus, UserMinus, Settings, Logout
+
+**Status:**
+CheckCircle, XCircle, AlertCircle, Info, Warning, Star, Heart, Bookmark
+
+**Social:**
+Facebook, Twitter, Instagram, Linkedin, Github, Youtube
+
+**Technology:**
+Wifi, Bluetooth, Battery, Zap, Lock, Unlock, Shield
+
+**Shopping:**
+ShoppingCart, ShoppingBag, CreditCard, Gift
+
+**Time:**
+Clock, Calendar, Timer
 
-### PureButton
+**Location:**
+MapPin, Globe, Navigation
 
-A versatile button component with multiple variants, sizes, and states.
+**Weather:**
+Sun, Moon, Cloud
+
+**Utility:**
+Eye, EyeOff, Refresh, MoreVertical, MoreHorizontal, Grid, List
+
+You can also import individual icons directly:
+```tsx
+import { Home, Search, User } from 'pure-react-ui';
+
+<Home size={24} color="#007bff" />
+```
+
+### Space
+
+A layout component for adding consistent spacing between elements.
+
+```tsx
+import { Space } from 'pure-react-ui';
+
+<Space size="medium" direction="horizontal">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <Button>Button 3</Button>
+</Space>
+
+<Space size={20} direction="vertical" align="start">
+  <Card>Card 1</Card>
+  <Card>Card 2</Card>
+</Space>
+```
+
+**Props:**
+- `size`: 'small' | 'medium' | 'large' | number (default: 'medium') - Spacing size between items
+- `direction`: 'horizontal' | 'vertical' (default: 'horizontal') - Direction of spacing
+- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'center') - Alignment of items
+- `wrap`: boolean (default: false) - Whether items should wrap to next line
+- `className`: string (optional) - Additional CSS classes
+
+### Flex
+
+A flexible container component based on CSS Flexbox.
+
+```tsx
+import { Flex } from 'pure-react-ui';
+
+<Flex direction="row" justify="between" align="center" gap="medium">
+  <Button>Left</Button>
+  <Button>Center</Button>
+  <Button>Right</Button>
+</Flex>
+
+<Flex direction="column" justify="start" align="stretch" gap={16}>
+  <Card>Card 1</Card>
+  <Card>Card 2</Card>
+</Flex>
+```
+
+**Props:**
+- `direction`: 'row' | 'column' | 'row-reverse' | 'column-reverse' (default: 'row') - Flex direction
+- `justify`: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' (default: 'start') - Justify content
+- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'start') - Align items
+- `wrap`: boolean | 'wrap' | 'nowrap' | 'wrap-reverse' (default: false) - Flex wrap behavior
+- `gap`: 'none' | 'small' | 'medium' | 'large' | number (default: 'none') - Gap between items
+- `className`: string (optional) - Additional CSS classes
+- `style`: React.CSSProperties (optional) - Additional inline styles
+
+### Text
+
+A typography component for consistent text styling with various options.
+
+```tsx
+import { Text } from 'pure-react-ui';
+
+<Text as="h1" size="2xl" weight="bold" color="primary">
+  Heading Text
+</Text>
+
+<Text size="lg" color="muted" align="center">
+  Centered paragraph text
+</Text>
+
+<Text as="span" size="sm" decoration="underline" transform="uppercase">
+  Styled Text
+</Text>
+```
+
+**Props:**
+- `as`: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'small' | 'strong' | 'em' | 'code' | 'pre' (default: 'p') - HTML element to render
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' (default: 'md') - Font size
+- `weight`: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' (default: 'normal') - Font weight
+- `color`: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'muted' (default: 'default') - Text color
+- `align`: 'left' | 'center' | 'right' | 'justify' (default: 'left') - Text alignment
+- `transform`: 'none' | 'uppercase' | 'lowercase' | 'capitalize' (default: 'none') - Text transform
+- `decoration`: 'none' | 'underline' | 'line-through' | 'overline' (default: 'none') - Text decoration
+- `truncate`: boolean (default: false) - Truncate text with ellipsis
+- `className`: string (optional) - Additional CSS classes
+
+## Styling
+
+All components include their own CSS files and use CSS classes with the `pure-` prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:
+
+- **Button**: `pure-button`, `pure-button--primary`, `pure-button--secondary`, etc.
+- **Card**: `pure-card`, `pure-card--hoverable`, `pure-card--shadow-medium`, etc.
+- **Modal**: `pure-modal`, `pure-modal__overlay`, `pure-modal__header`, etc.
+- **Icon**: `pure-icon`, `pure-icon--clickable`, `pure-icon--small`, etc.
+- **Space**: `pure-space`, `pure-space--horizontal`, `pure-space--vertical`, etc.
+- **Flex**: `pure-flex`, `pure-flex--row`, `pure-flex--column`, etc.
+- **Text**: `pure-text`, `pure-text--lg`, `pure-text--bold`, etc.
+
+Each component has its own CSS file located in:
+- `lib/components/Button/Button.css`
+- `lib/components/Card/Card.css`
+- `lib/components/Modal/Modal.css`
+- `lib/components/Icon/Icon.css`
+- `lib/components/Space/Space.css`
+- `lib/components/Flex/Flex.css`
+- `lib/components/Text/Text.css`
+
+## Examples
+
+A complete example application is available in the `example` directory. To run it:
+
+```bash
+# From the root directory, build the package first
+npm run build
+
+# Then navigate to example directory
+cd example
+npm install
+npm run dev
+```
 
-#### Props
+Or check out `EXAMPLES.md` for code examples and usage patterns.
 
-- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'outline' | 'ghost'
-- `size`: 'sm' | 'md' | 'lg'
-- `fullWidth`: boolean
-- `loading`: boolean
-- `disabled`: boolean
-- `leftIcon`: ReactNode
-- `rightIcon`: ReactNode
-- Plus all standard button props
+## License
 
-## Features
+MIT
 
-- TypeScript support with full type definitions
-- Accessible design with proper ARIA attributes
-- CSS variables for easy theming
-- Multiple variants and sizes
-- Loading and disabled states
-- Icon support
-- Responsive design

package/lib/components/Button/Button.css

@@ -0,0 +1,170 @@
+/* Pure Button Component Styles */
+.pure-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease-in-out;
+  background-color: #007bff;
+  color: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.pure-button:hover:not(.pure-button--disabled) {
+  background-color: #0056b3;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.pure-button:active:not(.pure-button--disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.pure-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}
+
+/* Variants */
+.pure-button--primary {
+  background-color: #007bff;
+  color: #ffffff;
+  border-color: #007bff;
+}
+
+.pure-button--primary:hover:not(.pure-button--disabled) {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.pure-button--secondary {
+  background-color: #6c757d;
+  color: #ffffff;
+  border-color: #6c757d;
+}
+
+.pure-button--secondary:hover:not(.pure-button--disabled) {
+  background-color: #545b62;
+  border-color: #545b62;
+}
+
+.pure-button--success {
+  background-color: #28a745;
+  color: #ffffff;
+  border-color: #28a745;
+}
+
+.pure-button--success:hover:not(.pure-button--disabled) {
+  background-color: #218838;
+  border-color: #218838;
+}
+
+.pure-button--danger {
+  background-color: #dc3545;
+  color: #ffffff;
+  border-color: #dc3545;
+}
+
+.pure-button--danger:hover:not(.pure-button--disabled) {
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.pure-button--warning {
+  background-color: #ffc107;
+  color: #212529;
+  border-color: #ffc107;
+}
+
+.pure-button--warning:hover:not(.pure-button--disabled) {
+  background-color: #e0a800;
+  border-color: #e0a800;
+}
+
+.pure-button--info {
+  background-color: #17a2b8;
+  color: #ffffff;
+  border-color: #17a2b8;
+}
+
+.pure-button--info:hover:not(.pure-button--disabled) {
+  background-color: #138496;
+  border-color: #138496;
+}
+
+/* Sizes */
+.pure-button--small {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.pure-button--medium {
+  padding: 0.625rem 1.25rem;
+  font-size: 1rem;
+}
+
+.pure-button--large {
+  padding: 0.875rem 1.75rem;
+  font-size: 1.125rem;
+}
+
+/* Full Width */
+.pure-button--full-width {
+  width: 100%;
+}
+
+/* Loading State */
+.pure-button--loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.pure-button__spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: pure-button-spin 0.6s linear infinite;
+}
+
+@keyframes pure-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pure-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Disabled State */
+.pure-button--disabled,
+.pure-button:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.pure-button--disabled:hover,
+.pure-button:disabled:hover {
+  transform: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Button.css';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    size?: 'small' | 'medium' | 'large';
+    fullWidth?: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

package/lib/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+CxC,CAAC"}

package/lib/components/Button/Button.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Button.css';
+export const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, disabled, children, className = '', onClick, ...props }) => {
+    const baseClass = 'pure-button';
+    const variantClass = `pure-button--${variant}`;
+    const sizeClass = `pure-button--${size}`;
+    const fullWidthClass = fullWidth ? 'pure-button--full-width' : '';
+    const loadingClass = loading ? 'pure-button--loading' : '';
+    const disabledClass = (disabled || loading) ? 'pure-button--disabled' : '';
+    const combinedClassName = [
+        baseClass,
+        variantClass,
+        sizeClass,
+        fullWidthClass,
+        loadingClass,
+        disabledClass,
+        className
+    ].filter(Boolean).join(' ');
+    const handleClick = (e) => {
+        if (disabled || loading) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (React.createElement("button", { className: combinedClassName, disabled: disabled || loading, onClick: handleClick, ...props },
+        loading && React.createElement("span", { className: "pure-button__spinner" }),
+        React.createElement("span", { className: "pure-button__content" }, children)));
+};
+//# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAUtB,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC;IAChC,MAAM,YAAY,GAAG,gBAAgB,OAAO,EAAE,CAAC;IAC/C,MAAM,SAAS,GAAG,gBAAgB,IAAI,EAAE,CAAC;IACzC,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3E,MAAM,iBAAiB,GAAG;QACxB,SAAS;QACT,YAAY;QACZ,SAAS;QACT,cAAc;QACd,YAAY;QACZ,aAAa;QACb,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,WAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC7D,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,gCACE,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,OAAO,EAAE,WAAW,KAChB,KAAK;QAER,OAAO,IAAI,8BAAM,SAAS,EAAC,sBAAsB,GAAG;QACrD,8BAAM,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAQ,CACjD,CACV,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/Card/Card.css

@@ -0,0 +1,116 @@
+/* Pure Card Component Styles */
+.pure-card {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+}
+
+/* Shadow Variants */
+.pure-card--shadow-none {
+  box-shadow: none;
+}
+
+.pure-card--shadow-small {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.pure-card--shadow-medium {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+.pure-card--shadow-large {
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+/* Hoverable */
+.pure-card--hoverable:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Clickable */
+.pure-card--clickable {
+  cursor: pointer;
+}
+
+.pure-card--clickable:active {
+  transform: translateY(-2px);
+}
+
+/* Image Container */
+.pure-card__image-container {
+  width: 100%;
+  overflow: hidden;
+  background-color: #f5f5f5;
+}
+
+.pure-card__image {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.pure-card--hoverable:hover .pure-card__image {
+  transform: scale(1.05);
+}
+
+/* Header */
+.pure-card__header {
+  padding: 1.25rem 1.5rem 0.75rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.pure-card__title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #212529;
+}
+
+.pure-card__subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #6c757d;
+}
+
+/* Body */
+.pure-card__body {
+  padding: 1.5rem;
+  flex: 1;
+  color: #495057;
+  line-height: 1.6;
+}
+
+/* Footer */
+.pure-card__footer {
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid #f0f0f0;
+  background-color: #fafafa;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .pure-card__header,
+  .pure-card__body,
+  .pure-card__footer {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .pure-card__title {
+    font-size: 1.125rem;
+  }
+}
+

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    imageAlt?: string;
+    footer?: React.ReactNode;
+    hoverable?: boolean;
+    shadow?: 'none' | 'small' | 'medium' | 'large';
+    className?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+export declare const Card: React.FC<CardProps>;
+//# sourceMappingURL=Card.d.ts.map

package/lib/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsDpC,CAAC"}