@pycolors/ui 1.0.5 β 1.1.0
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.
- package/README.md +84 -22
- package/dist/components/ui/checkbox.d.ts +14 -0
- package/dist/components/ui/checkbox.d.ts.map +1 -0
- package/dist/components/ui/checkbox.js +24 -0
- package/dist/components/ui/separator.d.ts +8 -0
- package/dist/components/ui/separator.d.ts.map +1 -0
- package/dist/components/ui/separator.js +19 -0
- package/dist/components/ui/textarea.d.ts +19 -0
- package/dist/components/ui/textarea.d.ts.map +1 -0
- package/dist/components/ui/textarea.js +50 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -4,21 +4,74 @@
|
|
|
4
4
|
|
|
5
5
|
# @pycolors/ui
|
|
6
6
|
|
|
7
|
+
Production-ready UI primitives for modern SaaS apps β built for
|
|
8
|
+
**speed**, **consistency**, and **real-world patterns**.
|
|
9
|
+
|
|
10
|
+
π Docs: https://pycolors.io/docs \
|
|
11
|
+
π Discussions: https://github.com/pycolors-io/pycolors-ui/discussions
|
|
12
|
+
|
|
13
|
+
------------------------------------------------------------------------
|
|
14
|
+
|
|
15
|
+
## Status
|
|
16
|
+
|
|
17
|
+
β
Production-ready for modern SaaS starters\
|
|
18
|
+
β‘ Actively maintained\
|
|
19
|
+
π Automated releases from the PyColors monorepo
|
|
20
|
+
|
|
21
|
+
------------------------------------------------------------------------
|
|
22
|
+
|
|
7
23
|
> β οΈ **Read-only mirror**
|
|
8
24
|
>
|
|
9
|
-
> This repository is automatically synced from the **PyColors
|
|
10
|
-
>
|
|
25
|
+
> This repository is automatically synced from the **PyColors
|
|
26
|
+
> monorepo**.\
|
|
27
|
+
> **Source of truth:**
|
|
28
|
+
> https://github.com/pycolors-io/pycolors/tree/main/packages/ui
|
|
11
29
|
>
|
|
12
|
-
>
|
|
30
|
+
> You can safely open **Issues and Discussions here** --- they are part
|
|
31
|
+
> of the public community surface.
|
|
32
|
+
|
|
33
|
+
------------------------------------------------------------------------
|
|
34
|
+
|
|
35
|
+
## Why PyColors UI?
|
|
36
|
+
|
|
37
|
+
PyColors UI is a **documentation-first design system** focused on one
|
|
38
|
+
goal:
|
|
39
|
+
|
|
40
|
+
π **Help developers ship SaaS interfaces faster.**
|
|
41
|
+
|
|
42
|
+
It prioritizes:
|
|
43
|
+
|
|
44
|
+
- clarity over cleverness
|
|
45
|
+
- consistency over trendiness
|
|
46
|
+
- production readiness over demos
|
|
47
|
+
|
|
48
|
+
If it helps you ship faster, it belongs here.
|
|
49
|
+
|
|
50
|
+
------------------------------------------------------------------------
|
|
13
51
|
|
|
14
|
-
|
|
52
|
+
## Community π¬
|
|
15
53
|
|
|
16
|
-
|
|
17
|
-
- Tailwind-friendly (tokens-driven styling)
|
|
18
|
-
- βStarter-gradeβ components: Tables, Dialogs, Sheets, Alerts, Tabsβ¦
|
|
19
|
-
- Designed to power the **PyColors SaaS Starter** and future Pro templates
|
|
54
|
+
Questions, feedback, ideas, or showcase your product:
|
|
20
55
|
|
|
21
|
-
|
|
56
|
+
π https://github.com/pycolors-io/pycolors-ui/discussions
|
|
57
|
+
|
|
58
|
+
We especially love seeing **real products built with PyColors**.
|
|
59
|
+
|
|
60
|
+
------------------------------------------------------------------------
|
|
61
|
+
|
|
62
|
+
## Release & publishing
|
|
63
|
+
|
|
64
|
+
This repository is a **distribution mirror**.
|
|
65
|
+
|
|
66
|
+
- NPM publishing happens from the **PyColors monorepo** (Changesets)
|
|
67
|
+
- This mirror receives version bumps + CHANGELOG via sync PRs
|
|
68
|
+
- A GitHub Release is automatically created when `package.json` and
|
|
69
|
+
`CHANGELOG.md` change on `main`
|
|
70
|
+
|
|
71
|
+
If you want to propose changes, contribute to the monorepo:
|
|
72
|
+
https://github.com/pycolors-io/pycolors/tree/main/packages/ui
|
|
73
|
+
|
|
74
|
+
------------------------------------------------------------------------
|
|
22
75
|
|
|
23
76
|
## Install
|
|
24
77
|
|
|
@@ -30,14 +83,16 @@ npm i @pycolors/ui
|
|
|
30
83
|
yarn add @pycolors/ui
|
|
31
84
|
```
|
|
32
85
|
|
|
33
|
-
|
|
86
|
+
------------------------------------------------------------------------
|
|
34
87
|
|
|
35
|
-
|
|
88
|
+
## Peer dependencies
|
|
36
89
|
|
|
37
90
|
``` bash
|
|
38
91
|
pnpm add react react-dom lucide-react
|
|
39
92
|
```
|
|
40
93
|
|
|
94
|
+
------------------------------------------------------------------------
|
|
95
|
+
|
|
41
96
|
## Quick usage
|
|
42
97
|
|
|
43
98
|
``` tsx
|
|
@@ -57,9 +112,11 @@ export function Example() {
|
|
|
57
112
|
}
|
|
58
113
|
```
|
|
59
114
|
|
|
115
|
+
------------------------------------------------------------------------
|
|
116
|
+
|
|
60
117
|
## What's inside (v1)
|
|
61
118
|
|
|
62
|
-
|
|
119
|
+
Starter-grade components focused on real SaaS interfaces:
|
|
63
120
|
|
|
64
121
|
- Button
|
|
65
122
|
- Card
|
|
@@ -78,15 +135,15 @@ Exports currently include:
|
|
|
78
135
|
- EmptyState
|
|
79
136
|
- cn / utils
|
|
80
137
|
|
|
81
|
-
|
|
82
|
-
|
|
138
|
+
The library is intentionally **small and starter-first**:\
|
|
139
|
+
ship fast β expand with real usage.
|
|
83
140
|
|
|
84
141
|
------------------------------------------------------------------------
|
|
85
142
|
|
|
86
143
|
## Design approach
|
|
87
144
|
|
|
88
|
-
PyColors UI is not
|
|
89
|
-
It's a product system:
|
|
145
|
+
PyColors UI is not just components.\
|
|
146
|
+
It's a **product system** built around real SaaS needs:
|
|
90
147
|
|
|
91
148
|
- predictable layout primitives
|
|
92
149
|
- consistent tokens + spacing
|
|
@@ -97,21 +154,26 @@ It's a product system:
|
|
|
97
154
|
|
|
98
155
|
## Roadmap
|
|
99
156
|
|
|
100
|
-
Next
|
|
157
|
+
Next steps:
|
|
101
158
|
|
|
102
|
-
- `@pycolors/tokens` (CSS variables + semantic tokens)
|
|
103
159
|
- richer form primitives (Select, Checkbox, Radio, Switch)
|
|
104
|
-
-
|
|
160
|
+
- advanced SaaS patterns
|
|
161
|
+
- Pro layer for premium starters & templates
|
|
162
|
+
|
|
163
|
+
Full roadmap β https://pycolors.io/roadmap
|
|
105
164
|
|
|
106
165
|
------------------------------------------------------------------------
|
|
107
166
|
|
|
108
167
|
## License
|
|
109
168
|
|
|
110
|
-
MIT
|
|
169
|
+
MIT
|
|
111
170
|
|
|
112
171
|
------------------------------------------------------------------------
|
|
113
172
|
|
|
114
173
|
## Links
|
|
115
174
|
|
|
116
|
-
|
|
117
|
-
|
|
175
|
+
Website β https://pycolors.io \
|
|
176
|
+
Docs β https://pycolors.io/docs \
|
|
177
|
+
Starters β https://pycolors.io/starters \
|
|
178
|
+
Roadmap β https://pycolors.io/roadmap \
|
|
179
|
+
Discussions β https://github.com/pycolors-io/pycolors-ui/discussions
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
+
export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
|
|
4
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
export type CheckboxFieldProps = React.HTMLAttributes<HTMLDivElement>;
|
|
6
|
+
declare function CheckboxField({ className, ...props }: Readonly<CheckboxFieldProps>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export type CheckboxContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
8
|
+
declare function CheckboxContent({ className, ...props }: Readonly<CheckboxContentProps>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export type CheckboxLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
|
|
10
|
+
declare function CheckboxLabel({ className, ...props }: Readonly<CheckboxLabelProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export type CheckboxDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
12
|
+
declare function CheckboxDescription({ className, ...props }: Readonly<CheckboxDescriptionProps>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { Checkbox, CheckboxField, CheckboxContent, CheckboxLabel, CheckboxDescription, };
|
|
14
|
+
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAS9D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CACxD,OAAO,iBAAiB,CAAC,IAAI,CAC9B,CAAC;AAEF,QAAA,MAAM,QAAQ,iKA+BZ,CAAC;AAOH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEtE,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAQ9B;AAED,MAAM,MAAM,oBAAoB,GAC9B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAQhC;AAED,MAAM,MAAM,kBAAkB,GAC5B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9C,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAa9B;AAED,MAAM,MAAM,wBAAwB,GAClC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,wBAAwB,CAAC,2CAYpC;AAMD,OAAO,EACL,QAAQ,EACR,aAAa,EACb,eAAe,EACf,aAAa,EACb,mBAAmB,GACpB,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
5
|
+
import { Check, Minus } from 'lucide-react';
|
|
6
|
+
import { cn } from '../../lib/utils.js';
|
|
7
|
+
const Checkbox = React.forwardRef(({ className, checked, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, "data-slot": "checkbox", checked: checked, className: cn('peer mt-0.5 size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs transition-colors', 'hover:border-foreground/30', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', 'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: checked === 'indeterminate' ? (_jsx(Minus, { className: "size-3", "aria-hidden": "true" })) : (_jsx(Check, { className: "size-3", "aria-hidden": "true" })) }) })));
|
|
8
|
+
Checkbox.displayName = 'Checkbox';
|
|
9
|
+
function CheckboxField({ className, ...props }) {
|
|
10
|
+
return (_jsx("div", { "data-slot": "checkbox-field", className: cn('flex items-start gap-3', className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
function CheckboxContent({ className, ...props }) {
|
|
13
|
+
return (_jsx("div", { "data-slot": "checkbox-content", className: cn('grid min-w-0 gap-1', className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
function CheckboxLabel({ className, ...props }) {
|
|
16
|
+
return (_jsx("label", { "data-slot": "checkbox-label", className: cn('block cursor-pointer text-sm font-medium leading-5 text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', '[&_p]:m-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5 [&_p]:text-foreground', className), ...props }));
|
|
17
|
+
}
|
|
18
|
+
function CheckboxDescription({ className, ...props }) {
|
|
19
|
+
return (_jsx("div", { "data-slot": "checkbox-description", className: cn('text-sm leading-5 text-muted-foreground', '[&_p]:m-0 [&_p]:text-sm [&_p]:leading-5 [&_p]:text-muted-foreground', className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
/* -----------------------------------------------------------------------------
|
|
22
|
+
* Exports
|
|
23
|
+
* -------------------------------------------------------------------------- */
|
|
24
|
+
export { Checkbox, CheckboxField, CheckboxContent, CheckboxLabel, CheckboxDescription, };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
orientation?: 'horizontal' | 'vertical';
|
|
4
|
+
decorative?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Separator };
|
|
8
|
+
//# sourceMappingURL=separator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/ui/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,uFAkCd,CAAC;AAOF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { cn } from '../../lib/utils.js';
|
|
4
|
+
const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => {
|
|
5
|
+
const semanticProps = decorative
|
|
6
|
+
? { role: 'none' }
|
|
7
|
+
: {
|
|
8
|
+
role: 'separator',
|
|
9
|
+
'aria-orientation': orientation,
|
|
10
|
+
};
|
|
11
|
+
return (_jsx("div", { ref: ref, "data-slot": "separator", "data-orientation": orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal'
|
|
12
|
+
? 'h-px w-full'
|
|
13
|
+
: 'h-full w-px', className), ...semanticProps, ...props }));
|
|
14
|
+
});
|
|
15
|
+
Separator.displayName = 'Separator';
|
|
16
|
+
/* -----------------------------------------------------------------------------
|
|
17
|
+
* Exports
|
|
18
|
+
* -------------------------------------------------------------------------- */
|
|
19
|
+
export { Separator };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const textareaVariants: (props?: ({
|
|
4
|
+
size?: "sm" | "lg" | "md" | null | undefined;
|
|
5
|
+
hasError?: boolean | null | undefined;
|
|
6
|
+
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
export type TextareaSize = 'sm' | 'md' | 'lg';
|
|
9
|
+
export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
|
|
10
|
+
export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
11
|
+
label?: string;
|
|
12
|
+
helperText?: string;
|
|
13
|
+
error?: string;
|
|
14
|
+
size?: TextareaSize;
|
|
15
|
+
resize?: TextareaResize;
|
|
16
|
+
}
|
|
17
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
18
|
+
export { Textarea, textareaVariants };
|
|
19
|
+
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,gBAAgB;;;;8EA0BrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,UAAU,GACV,YAAY,GACZ,MAAM,CAAC;AAEX,MAAM,WAAW,aACf,SACE,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,QAAA,MAAM,QAAQ,2FA0Fb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { cn } from '../../lib/utils.js';
|
|
6
|
+
const textareaVariants = cva('flex min-h-24 w-full rounded-md border bg-background px-3.5 py-2.5 text-sm ring-offset-background transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', {
|
|
7
|
+
variants: {
|
|
8
|
+
size: {
|
|
9
|
+
sm: 'min-h-20 px-3 py-2 text-sm',
|
|
10
|
+
md: 'min-h-24 px-3.5 py-2.5 text-sm',
|
|
11
|
+
lg: 'min-h-32 px-4 py-3 text-base',
|
|
12
|
+
},
|
|
13
|
+
hasError: {
|
|
14
|
+
false: 'border-input',
|
|
15
|
+
true: 'border-destructive focus-visible:ring-destructive',
|
|
16
|
+
},
|
|
17
|
+
resize: {
|
|
18
|
+
none: 'resize-none',
|
|
19
|
+
vertical: 'resize-y',
|
|
20
|
+
horizontal: 'resize-x',
|
|
21
|
+
both: 'resize',
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
size: 'md',
|
|
26
|
+
hasError: false,
|
|
27
|
+
resize: 'vertical',
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
const Textarea = React.forwardRef(({ label, helperText, error, className, size, resize, id, disabled, required, ...props }, ref) => {
|
|
31
|
+
const generatedId = React.useId();
|
|
32
|
+
const textareaId = id ?? generatedId;
|
|
33
|
+
const describedByIds = [];
|
|
34
|
+
if (helperText && !error) {
|
|
35
|
+
describedByIds.push(`${textareaId}-helper`);
|
|
36
|
+
}
|
|
37
|
+
if (error) {
|
|
38
|
+
describedByIds.push(`${textareaId}-error`);
|
|
39
|
+
}
|
|
40
|
+
const describedBy = describedByIds.length > 0
|
|
41
|
+
? describedByIds.join(' ')
|
|
42
|
+
: undefined;
|
|
43
|
+
return (_jsxs("div", { className: "w-full", children: [label ? (_jsxs("label", { htmlFor: textareaId, className: "mb-1 block text-sm font-medium text-foreground", children: [label, required ? (_jsx("span", { className: "ml-1 text-destructive", children: "*" })) : null] })) : null, _jsx("textarea", { id: textareaId, ref: ref, disabled: disabled, required: required, "aria-invalid": !!error, "aria-describedby": describedBy, "aria-errormessage": error ? `${textareaId}-error` : undefined, "aria-required": required ? true : undefined, className: cn(textareaVariants({
|
|
44
|
+
size,
|
|
45
|
+
resize,
|
|
46
|
+
hasError: !!error,
|
|
47
|
+
}), className), ...props }), helperText && !error ? (_jsx("p", { id: `${textareaId}-helper`, className: "mt-1 text-xs text-muted-foreground", children: helperText })) : null, error ? (_jsx("p", { id: `${textareaId}-error`, className: "mt-1 text-xs text-destructive", children: error })) : null] }));
|
|
48
|
+
});
|
|
49
|
+
Textarea.displayName = 'Textarea';
|
|
50
|
+
export { Textarea, textareaVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
export * from './components/ui/button.js';
|
|
2
2
|
export * from './components/ui/card.js';
|
|
3
|
+
export * from './components/ui/checkbox.js';
|
|
3
4
|
export * from './components/ui/badge.js';
|
|
4
5
|
export * from './components/ui/input.js';
|
|
5
6
|
export * from './components/ui/skeleton.js';
|
|
6
7
|
export * from './components/ui/empty-state.js';
|
|
7
8
|
export * from './components/ui/alert.js';
|
|
8
9
|
export * from './components/ui/dialog.js';
|
|
10
|
+
export * from './components/ui/separator.js';
|
|
9
11
|
export * from './components/ui/sheet.js';
|
|
10
12
|
export * from './components/ui/dropdown-menu.js';
|
|
11
13
|
export * from './components/ui/tabs.js';
|
|
12
14
|
export * from './components/ui/toast.js';
|
|
13
15
|
export * from './components/ui/pagination.js';
|
|
14
16
|
export * from './components/ui/table.js';
|
|
17
|
+
export * from './components/ui/textarea.js';
|
|
15
18
|
export * from './components/ui/password-input.js';
|
|
16
19
|
export * from './lib/utils.js';
|
|
17
20
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,gBAAgB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
export * from './components/ui/button.js';
|
|
2
2
|
export * from './components/ui/card.js';
|
|
3
|
+
export * from './components/ui/checkbox.js';
|
|
3
4
|
export * from './components/ui/badge.js';
|
|
4
5
|
export * from './components/ui/input.js';
|
|
5
6
|
export * from './components/ui/skeleton.js';
|
|
6
7
|
export * from './components/ui/empty-state.js';
|
|
7
8
|
export * from './components/ui/alert.js';
|
|
8
9
|
export * from './components/ui/dialog.js';
|
|
10
|
+
export * from './components/ui/separator.js';
|
|
9
11
|
export * from './components/ui/sheet.js';
|
|
10
12
|
export * from './components/ui/dropdown-menu.js';
|
|
11
13
|
export * from './components/ui/tabs.js';
|
|
12
14
|
export * from './components/ui/toast.js';
|
|
13
15
|
export * from './components/ui/pagination.js';
|
|
14
16
|
export * from './components/ui/table.js';
|
|
17
|
+
export * from './components/ui/textarea.js';
|
|
15
18
|
export * from './components/ui/password-input.js';
|
|
16
19
|
export * from './lib/utils.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pycolors/ui",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Production-ready UI primitives for modern SaaS apps (Radix + Tailwind-friendly).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"pycolors",
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
+
"lucide-react": ">=0.300.0",
|
|
45
46
|
"react": ">=18",
|
|
46
|
-
"react-dom": ">=18"
|
|
47
|
-
"lucide-react": ">=0.300.0"
|
|
47
|
+
"react-dom": ">=18"
|
|
48
48
|
},
|
|
49
49
|
"peerDependenciesMeta": {
|
|
50
50
|
"lucide-react": {
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
56
|
+
"@radix-ui/react-checkbox": "^1.3.3",
|
|
56
57
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
57
58
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
58
59
|
"@radix-ui/react-slot": "^1.2.4",
|
|
@@ -63,13 +64,13 @@
|
|
|
63
64
|
"tailwind-merge": "^3.4.0"
|
|
64
65
|
},
|
|
65
66
|
"devDependencies": {
|
|
67
|
+
"@pycolors/eslint-config": "^1.0.0",
|
|
68
|
+
"@pycolors/typescript-config": "^1.0.0",
|
|
66
69
|
"@types/node": "^22.15.3",
|
|
67
70
|
"@types/react": "19.2.2",
|
|
68
71
|
"@types/react-dom": "19.2.2",
|
|
69
72
|
"eslint": "^9.39.1",
|
|
70
|
-
"typescript": "5.9.2"
|
|
71
|
-
"@repo/typescript-config": "0.0.0",
|
|
72
|
-
"@repo/eslint-config": "0.0.0"
|
|
73
|
+
"typescript": "5.9.2"
|
|
73
74
|
},
|
|
74
75
|
"scripts": {
|
|
75
76
|
"clean": "rm -rf dist",
|