@puzzle-ui/core 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +45 -80
  2. package/package.json +7 -2
package/README.md CHANGED
@@ -1,99 +1,64 @@
1
- ---
2
- title: Getting Started
3
- description: Install Puzzle in your React app, build your first interface, and customize the theme.
4
- ---
1
+ # @puzzle-ui/core
5
2
 
6
- > \[!WARNING\] **Puzzle is not ready for production use.**
7
- >
8
- > This project is under active development. APIs, component props,
9
- > package exports, styling, and internal implementation may change
10
- > without notice. Components may be incomplete, and testing,
11
- > accessibility, documentation, and framework compatibility are not yet
12
- > guaranteed. Use it for experimentation and evaluation only---not for
13
- > production applications.
3
+ Framework-independent utilities shared by all Puzzle packages.
14
4
 
15
- Puzzle is a TypeScript and React UI component library built around reusable components and shared design tokens. Its components are composable and router-independent, with styling supplied by `"@puzzle-ui/theme`. The framework is setup to be compatible with `Next.js`, `Tanstack Start` and `react-router`.
5
+ **Documentation:** [https://puzzle-ui.com/docs/getting-started](https://puzzle-ui.com/docs/getting-started)
16
6
 
17
- **Puzzle is under active development and is not ready for production use.** APIs, props, exports, and styling may change without notice. Accessibility and framework compatibility are still being tested. Use the project for experimentation and evaluation.
7
+ > [!WARNING]
8
+ > **Puzzle is not ready for production use.** APIs and package exports may
9
+ > change without notice. Use it for experimentation and evaluation.
18
10
 
19
- ## Prerequisites
11
+ `@puzzle-ui/core` contains the small, dependency-free helpers that
12
+ [`@puzzle-ui/ui`](https://puzzle-ui.com/docs/ui),
13
+ [`@puzzle-ui/theme`](https://puzzle-ui.com/docs/theme), and the other Puzzle
14
+ packages build on: class name composition, string casing, CSS value safety,
15
+ color parsing and conversion, responsive value resolution, and debouncing.
16
+ It has no React dependency and runs in browsers, Node.js, Bun, and edge
17
+ runtimes.
20
18
 
21
- - A package manager: npm, Bun, pnpm, or Yarn.
22
- - An existing React application with a bundler that supports CSS imports, such as Vite.
23
- - Familiarity with React and TypeScript. The UI and theme packages require React and React DOM 19 or later within the supported React 19 range.
19
+ Use it directly when you build your own components on top of Puzzle and want
20
+ the same conventions, for example `cn` for class names and the shared
21
+ breakpoints for responsive props.
24
22
 
25
- ## Set up a new project
26
-
27
- Simple run our @puzzle-ui/create project template to get started.
28
-
29
- npm:
30
-
31
- ```bash
32
- npx @puzzle-ui/create
33
- ```
34
-
35
- bun:
23
+ ## Install
36
24
 
37
25
  ```bash
38
- bunx @puzzle-ui/create
26
+ npm install @puzzle-ui/core
27
+ # or
28
+ bun add @puzzle-ui/core
29
+ # or
30
+ pnpm add @puzzle-ui/core
31
+ # or
32
+ yarn add @puzzle-ui/core
39
33
  ```
40
34
 
41
- Puzzle can set up a new project for you with the following framework options:
35
+ ## Usage
42
36
 
43
- - Basic React app
44
- - Tanstack start
45
- - Next.js
37
+ ```ts
38
+ import { cn, resolveResponsiveValue, stringWithCasing } from "@puzzle-ui/core";
46
39
 
47
- Furthermore you can choose to install tailwindcss or not.
48
- It directly installs all dependencies and sets up the project for you.
40
+ cn("puzzle-button", isActive && "puzzle-button--active", className);
41
+ // "puzzle-button puzzle-button--active my-class"
49
42
 
50
- ## Set up in an existing project:
43
+ stringWithCasing("hello world", "kebabcase");
44
+ // "hello-world"
51
45
 
52
- Install the UI library and theme package in your application's directory. Choose your package manager below:
53
-
54
- npm:
55
-
56
- ```bash
57
- npm install @puzzle-ui/ui --save
46
+ resolveResponsiveValue({ mobile: "col", desktop: "row" });
47
+ // { mobile: "col", tablet: "col", desktop: "row" }
58
48
  ```
59
49
 
60
- bun:
50
+ ## API
61
51
 
62
- ```bash
63
- bun add @puzzle-ui/create
64
- ```
52
+ | Area | Exports |
53
+ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54
+ | Strings | `cn`, `stringWithCasing`, `normalizeSearchString`, `withSafeCharacters`, `escapeCssString`, `assertSafeCssValue`, `nameToInitials` |
55
+ | Colors | `isColor`, `isHexColor`, `isCssVariable`, `isDarkColor`, `isColorDark`, `getColorType`, `parseColor`, `parseRgb`, `hexToRgb`, `hexToRgba`, `rgbToHex`, `hslToRgb`, `rgbToHsl`, `rgbToCss`, `hslToCss`, `getColorLuminance`, `clamp` |
56
+ | Responsive | `BREAKPOINTS`, `resolveResponsiveValue`, `resolveResponsiveValueForBreakpoint` |
57
+ | Timing | `debounce` (returns a debounced function with a `cancel()` method) |
58
+ | Types | `ClassnameArg`, `ColorType`, `RGBColor`, `HSLColor`, `Breakpoint`, `ResponsiveConfig`, `ResponsiveValue`, `DeepPartial` |
65
59
 
66
- pnpm:
60
+ `stringWithCasing` supports `lowercase`, `uppercase`, `snakecase`,
61
+ `kebabcase`, `camelcase`, `pascalcase`, `sentencecase`, and `headercase`.
67
62
 
68
- ```bash
69
- pnpm add @puzzle-ui/ui
70
- ```
71
-
72
- yarn:
73
-
74
- ```bash
75
- yarn add @puzzle-ui/ui
76
- ```
77
-
78
- These commands install published packages; they do not clone the repository or build its workspaces. Puzzle does not require Bun in your application. React and React DOM are peer dependencies and should already be installed in your app.
79
-
80
- ## Your first interface
81
-
82
- Import components from `"@puzzle-ui/ui` and wrap your application in `Theme` from `"@puzzle-ui/theme`:
83
-
84
- ```tsx
85
- import { Theme } from "@puzzle-ui/theme";
86
- import { Button } from "@puzzle-ui/ui";
87
-
88
- export const App = () => (
89
- <Theme>
90
- <main>
91
- <h1>Hello, Puzzle</h1>
92
- <p>Build your interface with reusable components and shared tokens.</p>
93
- <Button onClick={() => window.alert("Welcome to Puzzle!")}>
94
- Get started
95
- </Button>
96
- </main>
97
- </Theme>
98
- );
99
- ```
63
+ Responsive values use the `mobile`, `tablet`, and `desktop` breakpoints;
64
+ smaller breakpoints cascade to larger ones when a value is omitted.
package/package.json CHANGED
@@ -1,7 +1,12 @@
1
1
  {
2
2
  "name": "@puzzle-ui/core",
3
- "version": "0.4.0",
3
+ "version": "0.5.1",
4
4
  "description": "Framework-independent utilities",
5
+ "homepage": "https://puzzle-ui.com",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/senorprogramador/puzzle.git"
9
+ },
5
10
  "license": "MIT",
6
11
  "publishConfig": {
7
12
  "access": "public",
@@ -37,7 +42,7 @@
37
42
  "devDependencies": {
38
43
  "tsdown": "^0.23.1",
39
44
  "tsup": "latest",
40
- "typescript": "^6.0.3",
45
+ "typescript": "^7.0.2",
41
46
  "vitest": "^5.1.0"
42
47
  }
43
48
  }