@northslopetech/altitude-ui 3.0.0-alpha.11 → 3.0.0-alpha.12
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 +11 -11
- package/dist/index.d.mts +451 -332
- package/dist/index.d.ts +451 -332
- package/dist/index.js +2668 -2409
- package/dist/index.mjs +2690 -2441
- package/dist/styles.css +1 -0
- package/package.json +7 -8
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ This package combines the best of both worlds:
|
|
|
34
34
|
|
|
35
35
|
Components are built using:
|
|
36
36
|
|
|
37
|
-
- **
|
|
37
|
+
- **Base UI**: For accessibility and behavior
|
|
38
38
|
- **class-variance-authority**: For type-safe variant management
|
|
39
39
|
- **Tailwind CSS**: For styling with Altitude design tokens
|
|
40
40
|
|
|
@@ -50,7 +50,7 @@ This package includes the following components:
|
|
|
50
50
|
- **Input** - Text input component with consistent styling
|
|
51
51
|
- **Select** - Dropdown selection component with search capabilities
|
|
52
52
|
- **Tabs** - Tab navigation component
|
|
53
|
-
- **
|
|
53
|
+
- **Text** - Text components with design system typography tokens
|
|
54
54
|
- **Upload** - File upload component with drag and drop support
|
|
55
55
|
|
|
56
56
|
## Usage
|
|
@@ -106,7 +106,7 @@ The Button component uses Altitude design tokens:
|
|
|
106
106
|
|
|
107
107
|
### Checkbox
|
|
108
108
|
|
|
109
|
-
The Checkbox component is built on
|
|
109
|
+
The Checkbox component is built on Base UI Checkbox with Altitude design tokens.
|
|
110
110
|
|
|
111
111
|
```tsx
|
|
112
112
|
import { Checkbox } from "@northslopetech/altitude-ui";
|
|
@@ -123,7 +123,7 @@ function Example() {
|
|
|
123
123
|
|
|
124
124
|
#### Checkbox Props
|
|
125
125
|
|
|
126
|
-
All standard
|
|
126
|
+
All standard Base UI Checkbox attributes are supported, including:
|
|
127
127
|
|
|
128
128
|
- `checked` - Controlled checked state
|
|
129
129
|
- `onCheckedChange` - Callback when checked state changes
|
|
@@ -132,7 +132,7 @@ All standard Radix UI Checkbox attributes are supported, including:
|
|
|
132
132
|
|
|
133
133
|
### asChild Pattern
|
|
134
134
|
|
|
135
|
-
Use the `asChild` prop for composition with other components
|
|
135
|
+
Use the `asChild` prop for composition with other components:
|
|
136
136
|
|
|
137
137
|
```tsx
|
|
138
138
|
import { Button } from "@northslopetech/altitude-ui";
|
|
@@ -292,20 +292,20 @@ function Example() {
|
|
|
292
292
|
}
|
|
293
293
|
```
|
|
294
294
|
|
|
295
|
-
###
|
|
295
|
+
### Text
|
|
296
296
|
|
|
297
297
|
Pre-styled text components using design system typography tokens:
|
|
298
298
|
|
|
299
299
|
```tsx
|
|
300
|
-
import {
|
|
300
|
+
import { Text } from "@northslopetech/altitude-ui";
|
|
301
301
|
|
|
302
302
|
function Example() {
|
|
303
303
|
return (
|
|
304
304
|
<div>
|
|
305
|
-
<
|
|
306
|
-
<
|
|
307
|
-
<
|
|
308
|
-
<
|
|
305
|
+
<Text variant="h1">Large Display Text</Text>
|
|
306
|
+
<Text variant="h5">Section Heading</Text>
|
|
307
|
+
<Text variant="body-md">Body paragraph text</Text>
|
|
308
|
+
<Text variant="label-sm-semibold">Form Label</Text>
|
|
309
309
|
</div>
|
|
310
310
|
);
|
|
311
311
|
}
|