@liiift-studio/mac-os9-ui 0.1.0

package/ATTRIBUTION.md

@@ -0,0 +1,100 @@
+# Attribution
+
+## Design Credits
+
+This component library is based on the **Mac OS 9 UI Kit** created by **Michael Feeney**.
+
+### Original Design Information
+
+- **Project**: Mac OS 9 UI Kit (Macostalgia)
+- **Creator**: Michael Feeney
+- **Website**: https://swallowmygraphicdesign.com/project/macostalgia
+- **Figma Community File**: https://www.figma.com/design/vy2T5MCXFz7QWf4Ba86eqN/Mac-OS-9--UI-Kit--Community-
+
+### License
+
+The original Mac OS 9 UI Kit designs are licensed under **Creative Commons Attribution 4.0 International License (CC BY 4.0)**.
+
+**License URL**: https://creativecommons.org/licenses/by/4.0/
+
+#### What this means:
+
+You are free to:
+- ✅ **Share** — copy and redistribute the material in any medium or format
+- ✅ **Adapt** — remix, transform, and build upon the material for any purpose, even commercially
+
+Under the following terms:
+- ⚠️ **Attribution** — You must give appropriate credit to Michael Feeney, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+
+## Implementation
+
+This React/TypeScript component library (`mac-os9-ui`) implements Michael Feeney's designs as functional web components with:
+
+- Pixel-accurate visual fidelity to the original designs
+- Modern accessibility features (ARIA, keyboard navigation)
+- TypeScript type definitions
+- Comprehensive testing and documentation
+
+### Changes Made
+
+From the original Figma designs, this library has:
+
+1. **Added**: Full accessibility support (ARIA attributes, keyboard navigation, focus management)
+2. **Added**: Responsive behavior for modern web applications
+3. **Added**: TypeScript type definitions for all components
+4. **Adapted**: CSS implementations using modern web standards (CSS Modules, CSS Custom Properties)
+5. **Enhanced**: Interactive states with proper event handling
+
+All visual design decisions remain faithful to Michael Feeney's original Mac OS 9 UI Kit.
+
+## How to Attribute
+
+When using this library in your projects, please include attribution to both:
+
+### 1. This Library (mac-os9-ui)
+
+```
+Built with mac-os9-ui component library
+https://github.com/Liiift-Studio/Mac-OS-9-React
+Licensed under MIT License
+```
+
+### 2. Original Designs (Michael Feeney)
+
+```
+Designs by Michael Feeney
+Mac OS 9 UI Kit (Macostalgia)
+https://swallowmygraphicdesign.com/project/macostalgia
+Licensed under CC BY 4.0
+```
+
+### Recommended Attribution Format
+
+For websites or applications:
+
+```html
+<!-- Footer or About section -->
+<p>
+  UI components powered by 
+  <a href="https://github.com/Liiift-Studio/Mac-OS-9-React">mac-os9-ui</a>.
+  Original designs by 
+  <a href="https://swallowmygraphicdesign.com/project/macostalgia">Michael Feeney</a>
+  licensed under 
+  <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+</p>
+```
+
+For documentation or README:
+
+```markdown
+## Credits
+
+- UI Components: [mac-os9-ui](https://github.com/Liiift-Studio/Mac-OS-9-React) (MIT License)
+- Original Designs: [Michael Feeney - Mac OS 9 UI Kit](https://swallowmygraphicdesign.com/project/macostalgia) (CC BY 4.0)
+```
+
+## Thank You
+
+Special thanks to Michael Feeney for creating and sharing this beautiful Mac OS 9 UI Kit with the design community. His work preserves an important piece of computing history and enables developers to bring that nostalgic aesthetic to modern web applications.
+
+Visit his website to see more of his excellent work: https://swallowmygraphicdesign.com/

package/LICENSE

@@ -0,0 +1,50 @@
+MIT License
+
+Copyright (c) 2026 Liiift Studio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+DESIGN ATTRIBUTION
+
+The Mac OS 9 UI designs implemented in this library are based on the 
+"Mac OS 9 UI Kit" created by Michael Feeney.
+
+Original Design: Mac OS 9 UI Kit
+Creator: Michael Feeney
+Website: https://swallowmygraphicdesign.com/project/macostalgia
+Figma File: https://www.figma.com/design/vy2T5MCXFz7QWf4Ba86eqN/Mac-OS-9--UI-Kit--Community-
+
+The original designs are licensed under Creative Commons Attribution 4.0 
+International License (CC BY 4.0).
+https://creativecommons.org/licenses/by/4.0/
+
+This means you are free to:
+- Share — copy and redistribute the material in any medium or format
+- Adapt — remix, transform, and build upon the material for any purpose, 
+  even commercially
+
+Under the following terms:
+- Attribution — You must give appropriate credit to Michael Feeney, provide 
+  a link to the license, and indicate if changes were made.
+
+When using this library, please include attribution to both:
+1. This library (mac-os9-ui) under MIT License
+2. Michael Feeney's original Mac OS 9 UI Kit designs under CC BY 4.0

package/README.md

@@ -0,0 +1,243 @@
+# Mac OS 9 UI Component Library
+
+A pixel-perfect Mac OS 9 UI component library for React and TypeScript. Bring authentic retro Mac OS 9 styling to your web applications with accessible, well-typed components.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🎨 **Pixel-Perfect Design** - Faithful recreation of Mac OS 9 UI elements based on the original design system
+- 📦 **TypeScript First** - Full TypeScript support with complete type definitions
+- ♿ **Accessible** - WCAG 2.1 AA compliant components with proper ARIA attributes
+- 🎭 **Dual Module Support** - ESM and CommonJS builds included
+- 📖 **Storybook Docs** - Interactive component documentation and examples
+- 🧪 **Fully Tested** - Comprehensive test coverage with Vitest
+
+## Installation
+
+```bash
+npm install mac-os9-ui
+```
+
+## Quick Start
+
+```tsx
+import { Button, Window } from 'mac-os9-ui';
+import 'mac-os9-ui/styles';
+
+function App() {
+	return (
+		<Window title="My Application">
+			<div style={{ padding: '16px' }}>
+				<Button variant="primary">Click Me</Button>
+			</div>
+		</Window>
+	);
+}
+```
+
+## Components
+
+### Form Controls
+- **Button** - Classic Mac OS 9 buttons with variants (primary, default, cancel)
+- **Checkbox** - Mac OS 9 style checkboxes
+- **Radio** - Radio button groups
+- **TextField** - Text input fields
+- **Select** - Dropdown select menus
+
+### Layout & Chrome
+- **Window** - Classic Mac OS 9 window container
+- **MenuBar** - Application menu bar with dropdown menus
+- **Tabs** - Tabbed navigation component
+- **Dialog** - Modal dialog windows
+
+### Lists & Navigation
+- **ListView** - List view with Mac OS 9 styling
+- **FolderList** - Hierarchical folder/file list view
+- **Scrollbar** - Custom Mac OS 9 styled scrollbars
+
+### Utilities
+- **Icon** - System icons (folder, document, trash, etc.)
+- **IconButton** - Icon-only button variant
+
+## Usage Examples
+
+### Creating a Window with Menu Bar
+
+```tsx
+import { Window, MenuBar } from 'mac-os9-ui';
+import 'mac-os9-ui/styles';
+
+function MyApp() {
+	const menuItems = [
+		{
+			label: 'File',
+			items: [
+				{ label: 'New', onClick: () => console.log('New') },
+				{ label: 'Open...', onClick: () => console.log('Open') },
+				{ type: 'separator' },
+				{ label: 'Quit', onClick: () => console.log('Quit') },
+			],
+		},
+		{
+			label: 'Edit',
+			items: [
+				{ label: 'Cut', onClick: () => console.log('Cut') },
+				{ label: 'Copy', onClick: () => console.log('Copy') },
+				{ label: 'Paste', onClick: () => console.log('Paste') },
+			],
+		},
+	];
+
+	return (
+		<Window title="My Application">
+			<MenuBar items={menuItems} />
+			{/* Your content here */}
+		</Window>
+	);
+}
+```
+
+### Using Form Controls
+
+```tsx
+import { Button, Checkbox, TextField, Select } from 'mac-os9-ui';
+import { useState } from 'react';
+
+function MyForm() {
+	const [checked, setChecked] = useState(false);
+	const [text, setText] = useState('');
+	const [selected, setSelected] = useState('');
+
+	return (
+		<div>
+			<TextField
+				label="Name"
+				value={text}
+				onChange={(e) => setText(e.target.value)}
+			/>
+			
+			<Checkbox
+				label="I agree to the terms"
+				checked={checked}
+				onChange={(e) => setChecked(e.target.checked)}
+			/>
+			
+			<Select
+				label="Choose an option"
+				value={selected}
+				onChange={(e) => setSelected(e.target.value)}
+				options={[
+					{ value: 'option1', label: 'Option 1' },
+					{ value: 'option2', label: 'Option 2' },
+					{ value: 'option3', label: 'Option 3' },
+				]}
+			/>
+			
+			<Button variant="primary" onClick={() => console.log('Submit')}>
+				Submit
+			</Button>
+		</div>
+	);
+}
+```
+
+### Creating a Dialog
+
+```tsx
+import { Dialog, Button } from 'mac-os9-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button onClick={() => setOpen(true)}>Open Dialog</Button>
+			
+			<Dialog
+				open={open}
+				onClose={() => setOpen(false)}
+				title="Confirm Action"
+			>
+				<p>Are you sure you want to proceed?</p>
+				<div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+					<Button variant="primary" onClick={() => setOpen(false)}>
+						OK
+					</Button>
+					<Button onClick={() => setOpen(false)}>Cancel</Button>
+				</div>
+			</Dialog>
+		</>
+	);
+}
+```
+
+## Styling
+
+The library includes CSS files that need to be imported in your application:
+
+```tsx
+import 'mac-os9-ui/styles';
+```
+
+This imports the theme variables and base styles. All components use CSS Modules internally, so styles are scoped and won't conflict with your application's CSS.
+
+## TypeScript Support
+
+All components are written in TypeScript and include full type definitions. Import types as needed:
+
+```tsx
+import type { ButtonProps, WindowProps } from 'mac-os9-ui';
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook for development
+npm run dev
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Run linting
+npm run lint
+```
+
+## Attribution
+
+This component library is based on the **Mac OS 9 UI Kit** created by [Michael Feeney](https://swallowmygraphicdesign.com/project/macostalgia).
+
+Original Figma design: [Mac OS 9 UI Kit](https://www.figma.com/design/vy2T5MCXFz7QWf4Ba86eqN/Mac-OS-9--UI-Kit--Community-)
+
+Design licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
+
+## License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Links
+
+- [GitHub Repository](https://github.com/Liiift-Studio/Mac-OS-9-React)
+- [Report Issues](https://github.com/Liiift-Studio/Mac-OS-9-React/issues)
+- [Changelog](./CHANGELOG.md)
+
+---
+
+Made with 💾 by [Liiift Studio](https://github.com/Liiift-Studio)