@muffled-ui/react 1.3.0 → 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.0",
+  "version": "1.3.2",
   "private": false,
   "homepage": "https://ui.muffled.studio/",
   "bugs": {
@@ -30,6 +30,7 @@
   },
   "files": [
     "dist",
+    "src/styles/theme.css",
     "package.json"
   ],
   "peerDependencies": {

package/src/styles/theme.css

@@ -0,0 +1,127 @@
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  font-size: 14px;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.23 0.010 260);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.95 0.006 260);
+  --secondary-foreground: oklch(0.23 0.010 260);
+  --muted: oklch(0.95 0.004 260);
+  --muted-foreground: oklch(0.42 0.012 260);
+  --accent: oklch(0.95 0.006 260);
+  --accent-foreground: oklch(0.23 0.010 260);
+  --destructive: oklch(0.637 0.208 25.3);
+  --destructive-foreground: oklch(0.96 0 0);
+  --border: oklch(0.90 0.006 260);
+  --input: oklch(0.90 0.006 260);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 260);
+  --sidebar-foreground: oklch(0.141 0.005 260);
+  --sidebar-primary: oklch(0.23 0.010 260);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.95 0.006 260);
+  --sidebar-accent-foreground: oklch(0.23 0.010 260);
+  --sidebar-border: oklch(0.90 0.006 260);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.21 0.0109 264);
+  --foreground: oklch(0.96 0 0);
+  --card: oklch(0.22 0.008 260);
+  --card-foreground: oklch(0.96 0 0);
+  --popover: oklch(0.22 0.008 260);
+  --popover-foreground: oklch(0.96 0 0);
+  --primary: oklch(0.92 0.004 260);
+  --primary-foreground: oklch(0.21 0.0109 264);
+  --secondary: oklch(0.28 0.014 260);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.25 0.010 260);
+  --muted-foreground: oklch(0.78 0.010 260);
+  --accent: oklch(0.25 0.010 260);
+  --accent-foreground: oklch(0.96 0 0);
+  --destructive: oklch(0.529 0.195 27.2);
+  --destructive-foreground: oklch(0.96 0 0);
+  --border: oklch(0.34 0.006 260 / 55%);
+  --input: oklch(0.36 0.006 260 / 65%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.24 0.010 260);
+  --sidebar-foreground: oklch(0.90 0.010 260);
+  --sidebar-primary: oklch(0.40 0.070 260);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.28 0.014 260);
+  --sidebar-accent-foreground: oklch(0.90 0.010 260);
+  --sidebar-border: oklch(0.21 0 0 / 18%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --sidebar-width: 20rem;
+  --sidebar-width-mobile: 18rem;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50 antialiased;
+  }
+  body {
+    @apply bg-background text-foreground;
+
+  }
+}