@muffled-ui/react 1.3.1 → 1.3.2

package/README.md

@@ -0,0 +1,131 @@
+<p align="center">
+  <img src="/public/logo-dark.svg#gh-dark-mode-only" height="128"/>
+  <img src="/public/logo-light.svg#gh-light-mode-only" height="128"/>
+</p>
+
+<div align="center">
+
+[![License][license-image]][license-url]
+
+[license-image]: https://img.shields.io/github/license/joshbatley/muffled-ui
+[license-url]: https://github.com/joshbatley/muffled-ui/blob/main/LICENSE
+
+</div>
+
+# Muffled UI
+
+Muffled UI is a React component library providing a set of accessible and customizable UI components for modern web applications.
+
+## Features
+
+- 🚀 **React Components**: A collection of reusable React components
+- 📚 **Storybook Documentation**: Comprehensive documentation with Storybook
+- 🧩 **Modular**: Use only the components you need
+- 📱 **Responsive**: Designed to work on all device sizes
+- ♿ **Accessible**: Built with accessibility in mind
+
+## Project Structure
+
+This project is organized as a monorepo using pnpm workspaces:
+
+### Packages
+
+- [React](/packages/react) - The main React UI component library
+
+### Apps
+
+- [Docs](/apps/docs) - Storybook documentation site for the components
+- [Web](/apps/web) - Demo application showcasing the components
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18 or higher
+- pnpm 9.1.4 or higher
+
+### Installation
+
+Install the Muffled UI package:
+
+```bash
+# Using npm
+npm install @muffled-ui/react
+
+# Using yarn
+yarn add @muffled-ui/react
+
+# Using pnpm
+pnpm add @muffled-ui/react
+```
+
+Install the CSS:
+
+Try out muffled-ui with no dependencies, only recommended for demo and prototyping:
+```jsx
+// main.tsx
+import '@muffled-ui/react/styled.css';
+```
+
+Using Tailwind CSS:
+```css
+/* index.css */
+@import "tailwindcss";
+@import '@muffled-ui/react/theme';
+@source "../node_modules/@muffled-ui/react";
+```
+
+Finally wrap the application with the Muffled UI provider:
+```jsx
+// main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MuffledUI } from '@muffled-ui/react';
+import App from './App.tsx';
+
+import './index.css';
+// See CSS imports above
+// import '@muffled-ui/react/styled.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <MuffledUI theme="dark">
+      <App />
+    </MuffledUI>
+  </StrictMode>,
+)
+```
+
+### Usage
+
+```jsx
+import { Button } from '@muffled-ui/react';
+
+function App() {
+  return (
+    <Button variant="primary" onClick={() => console.log('Clicked!')}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+## Development
+
+To develop Muffled UI locally:
+
+```bash
+# Clone the repository
+git clone https://github.com/joshbatley/muffled-ui.git
+cd muffled-ui
+
+# Install dependencies
+pnpm install
+
+# Start the documentation site (Storybook)
+pnpm dev
+```
+
+## License
+
+This project is MIT licensed.

package/dist/index.d.mts

@@ -500,7 +500,7 @@ declare function Textarea({ className, ...props }: React$1.ComponentProps<'texta
 
 type ProvidedTheme = 'light' | 'dark' | 'system';
 type ThemeProviderProps = {
-    theme?: ProvidedTheme;
+    defaultTheme?: ProvidedTheme;
     children?: React$1.ReactNode;
 };
 type SettingsCtx = {

package/dist/index.d.ts

@@ -500,7 +500,7 @@ declare function Textarea({ className, ...props }: React$1.ComponentProps<'texta
 
 type ProvidedTheme = 'light' | 'dark' | 'system';
 type ThemeProviderProps = {
-    theme?: ProvidedTheme;
+    defaultTheme?: ProvidedTheme;
     children?: React$1.ReactNode;
 };
 type SettingsCtx = {

package/dist/index.js

@@ -3796,28 +3796,30 @@ var useMuffledSettings = () => {
   }
   return context;
 };
-var MuffledUI = ({ children }) => {
+var MuffledUI = ({ children, defaultTheme }) => {
   const [theme, setThemeKey] = (0, import_react23.useState)(() => {
     var _a;
     if (localStorage.getItem(LocalStorageKey) !== null) {
       return (_a = JSON.parse(localStorage.getItem(LocalStorageKey) || "")) == null ? void 0 : _a.theme;
     }
-    return "system";
+    return defaultTheme ? defaultTheme : "system";
   });
+  const setTheme = (t) => {
+    localStorage.setItem(LocalStorageKey, JSON.stringify({ theme: t }));
+    setThemeKey(t);
+  };
   (0, import_react23.useEffect)(() => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       root.classList.add(systemTheme);
+      setTheme(systemTheme);
       return;
     }
+    setTheme(theme);
     root.classList.add(theme);
   }, [theme]);
-  const setTheme = (t) => {
-    localStorage.setItem(LocalStorageKey, JSON.stringify({ theme: t }));
-    setThemeKey(t);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     SettingsContext.Provider,
     {

package/dist/index.mjs

@@ -3594,28 +3594,30 @@ var useMuffledSettings = () => {
   }
   return context;
 };
-var MuffledUI = ({ children }) => {
+var MuffledUI = ({ children, defaultTheme }) => {
   const [theme, setThemeKey] = useState2(() => {
     var _a;
     if (localStorage.getItem(LocalStorageKey) !== null) {
       return (_a = JSON.parse(localStorage.getItem(LocalStorageKey) || "")) == null ? void 0 : _a.theme;
     }
-    return "system";
+    return defaultTheme ? defaultTheme : "system";
   });
+  const setTheme = (t) => {
+    localStorage.setItem(LocalStorageKey, JSON.stringify({ theme: t }));
+    setThemeKey(t);
+  };
   useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       root.classList.add(systemTheme);
+      setTheme(systemTheme);
       return;
     }
+    setTheme(theme);
     root.classList.add(theme);
   }, [theme]);
-  const setTheme = (t) => {
-    localStorage.setItem(LocalStorageKey, JSON.stringify({ theme: t }));
-    setThemeKey(t);
-  };
   return /* @__PURE__ */ jsx36(
     SettingsContext.Provider,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muffled-ui/react",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": false,
   "homepage": "https://ui.muffled.studio/",
   "bugs": {