plainframe-ui 0.1.92 → 0.1.93

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Plainframe
+
+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.

package/README.md

@@ -0,0 +1,184 @@
+# plainframe-ui
+
+Token-driven React UI components with built-in theming, color modes, and accessible primitives.
+
+Plainframe UI is a practical component library for apps that need consistent styling without fighting the system.
+You get a theme with spacing/radius/typography + neutral/primary scales, plus components that are keyboard-safe by default.
+
+## Install
+
+npm:
+```bash
+npm install plainframe-ui @emotion/react
+```
+
+pnpm:
+```bash
+pnpm add plainframe-ui @emotion/react
+```
+
+yarn:
+```bash
+yarn add plainframe-ui @emotion/react
+```
+
+## Requirements
+
+- React 18 / 19
+- @emotion/react 11+
+
+## Quick start
+
+```tsx
+import { ThemeProvider, CssBaseline, Button } from "plainframe-ui";
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <CssBaseline />
+      <Button variant="filled">Hello</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## What you get
+
+- **Theme tokens**: spacing, radius, typography, neutral scale, primary palettes
+- **Color modes**: light/dark + system-friendly patterns
+- **Accessible defaults**: focus states, keyboard behavior, sensible ARIA patterns
+- **TypeScript-first**: predictable prop typing, good autocomplete
+- **Composable primitives**: easy to build custom UI on top without rewriting everything
+
+## Theming
+
+### Default mode
+
+```tsx
+<ThemeProvider defaultMode="dark">
+  {/* ... */}
+</ThemeProvider>
+```
+
+### Read the theme inside components
+
+```tsx
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { Button, usePlainframeUITheme } from "plainframe-ui";
+
+export function Example() {
+  const theme = usePlainframeUITheme();
+
+  return (
+    <Button
+      css={css({
+        borderRadius: theme.radius.lg,
+        paddingInline: theme.spacing.md,
+      })}
+    >
+      Styled by tokens
+    </Button>
+  );
+}
+```
+
+### Change primary palette
+
+```tsx
+<ThemeProvider theme={{ primaryKey: "indigo" }}>
+  {/* components use theme.palette[primaryKey] */}
+</ThemeProvider>
+```
+
+### Override tokens (spacing / radius)
+
+```tsx
+<ThemeProvider
+  theme={{
+    spacing: {
+      xxs: "0.25rem",
+      xs: "0.4rem",
+      sm: "0.6rem",
+      md: "0.85rem",
+      lg: "1.2rem",
+      xl: "1.8rem",
+    },
+    radius: {
+      xxs: "0.2rem",
+      xs: "0.35rem",
+      sm: "0.55rem",
+      md: "0.75rem",
+      lg: "1rem",
+      xl: "1.5rem",
+      full: "9999px",
+    },
+  }}
+>
+  {/* ... */}
+</ThemeProvider>
+```
+
+## Components
+
+Grouped so it’s easier to scan.
+
+### Foundation & layout
+- Container
+- Flex
+- Divider
+- Typography
+- Kbd
+- Image
+- Quote
+- Card
+- CardGroup
+- ContextZone
+- ActionBar
+
+### Inputs
+- Button
+- ButtonGroup
+- Checkbox
+- Switch
+- Slider
+- RadioGroup
+- TextField
+- TextArea
+- Select
+- Autocomplete
+- CodeField
+- Chip
+
+### Navigation
+- Menu
+- DropdownMenu
+- Tabs
+- Pagination
+- Breadcrumbs
+- Stepper
+
+### Overlay
+- Modal
+- Drawer
+- Popover
+- Tooltip
+- Backdrop
+
+### Feedback
+- Alert
+- Toast
+- Progress
+- Skeleton
+- Badge
+
+### Transitions
+- Fade
+- Grow
+- Slide
+- Rotate
+- Swap
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -810,10 +810,6 @@ type KbdProps = Omit<React.HTMLAttributes<HTMLElement>, "style"> & {
     radius?: number | string;
     mono?: boolean;
     uppercase?: boolean;
-    /**
-     * Extra px to boost symbol-only content in mono fonts.
-     * Set to 0 to disable.
-     */
     symbolBoost?: number;
     css?: Interpolation<Theme>;
     className?: string;
@@ -1383,7 +1379,6 @@ type TextFieldProps = WithCss & {
     readOnly?: boolean;
     required?: boolean;
     maxLength?: number;
-    /** Called when the surface (wrapper) is clicked, excluding buttons/icons with role="button" */
     onSurfaceClick?: (e: React.MouseEvent) => void;
 };
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "plainframe-ui",
-  "version": "0.1.92",
-  "description": "Beautiful React component library with built-in theming, animations, and accessibility",
+  "version": "0.1.93",
+  "description": "A modern React component library with theming, accessibility, and motion-ready primitives.",
   "author": "Plainframe",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/plainframe-ui"
+    "url": "https://github.com/milkevich/plainframe-ui"
   },
-  "homepage": "https://plainframe.com",
+  "homepage": "https://plainframe-ui.com",
   "keywords": [
     "react",
     "components",