@northslopetech/altitude-ui 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.
Files changed (7) hide show
  1. package/README.md +124 -0
  2. package/dist/index.d.mts +74 -0
  3. package/dist/index.d.ts +74 -0
  4. package/dist/index.js +550 -0
  5. package/dist/index.mjs +496 -0
  6. package/dist/tokens.css +121 -0
  7. package/package.json +81 -0
package/README.md ADDED
@@ -0,0 +1,124 @@
1
+ # @nslp/altitude
2
+
3
+ React UI components for the Altitude design system, built on top of [shadcn/ui](https://ui.shadcn.com/) and styled with Altitude design tokens.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @nslp/altitude
9
+ # or
10
+ pnpm add @nslp/altitude
11
+ ```
12
+
13
+ ## Architecture
14
+
15
+ This package combines the best of both worlds:
16
+
17
+ - **shadcn/ui**: Provides the foundation, accessibility, and component patterns
18
+ - **Altitude Design Tokens**: Replaces shadcn/ui's default colors and typography with our design system
19
+
20
+ Components are built using:
21
+ - **Radix UI**: For accessibility and behavior
22
+ - **class-variance-authority**: For type-safe variant management
23
+ - **Tailwind CSS**: For styling with Altitude design tokens
24
+
25
+ ## Usage
26
+
27
+ ### Button
28
+
29
+ The Button component is built on shadcn/ui's Button but styled with Altitude design tokens.
30
+
31
+ ```tsx
32
+ import { Button } from '@nslp/altitude';
33
+
34
+ function Example() {
35
+ return (
36
+ <div className="flex gap-2 flex-wrap">
37
+ {/* Default variant */}
38
+ <Button>Primary Button</Button>
39
+
40
+ {/* Other variants */}
41
+ <Button variant="secondary">Secondary</Button>
42
+ <Button variant="outline">Outline</Button>
43
+ <Button variant="ghost">Ghost</Button>
44
+ <Button variant="link">Link</Button>
45
+ <Button variant="destructive">Destructive</Button>
46
+
47
+ {/* Different sizes */}
48
+ <Button size="sm">Small</Button>
49
+ <Button size="lg">Large</Button>
50
+ <Button size="xl">Extra Large</Button>
51
+ <Button size="icon">🎯</Button>
52
+ </div>
53
+ );
54
+ }
55
+ ```
56
+
57
+ #### Button Props
58
+
59
+ | Prop | Type | Default | Description |
60
+ |------|------|---------|-------------|
61
+ | `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'link' \| 'destructive'` | `'default'` | Visual style variant |
62
+ | `size` | `'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon'` | `'default'` | Size of the button |
63
+ | `asChild` | `boolean` | `false` | Render as child element (for composition) |
64
+
65
+ All standard HTML button attributes are also supported.
66
+
67
+ #### Design Token Integration
68
+
69
+ The Button component uses Altitude design tokens:
70
+
71
+ - **Colors**: `primary-*`, `neutral-*`, `semantic-error`, `base-white`
72
+ - **Typography**: `body-xs`, `body-sm`, `body-md`, `body-lg` font sizes
73
+ - **Focus states**: `primary-500` ring color
74
+ - **Hover states**: Consistent with design system color scales
75
+
76
+ ### asChild Pattern
77
+
78
+ Use the `asChild` prop for composition with other components (powered by Radix UI Slot):
79
+
80
+ ```tsx
81
+ import { Button } from '@nslp/altitude';
82
+ import Link from 'next/link';
83
+
84
+ <Button asChild>
85
+ <Link href="/dashboard">Go to Dashboard</Link>
86
+ </Button>
87
+ ```
88
+
89
+ ## shadcn/ui Integration
90
+
91
+ This package is configured to work with shadcn/ui:
92
+
93
+ - Uses the same component patterns and APIs
94
+ - Configured with `components.json` for CLI compatibility
95
+ - Can add more shadcn/ui components with: `npx shadcn@latest add [component]`
96
+ - All components are automatically styled with Altitude design tokens
97
+
98
+ ## Development
99
+
100
+ ```bash
101
+ # Build the package
102
+ pnpm build
103
+
104
+ # Watch for changes
105
+ pnpm dev
106
+
107
+ # Run linting
108
+ pnpm lint
109
+
110
+ # Type checking
111
+ pnpm check-types
112
+
113
+ # Add more shadcn/ui components
114
+ npx shadcn@latest add [component-name]
115
+ ```
116
+
117
+ ## Adding New Components
118
+
119
+ To add more shadcn/ui components:
120
+
121
+ 1. Run `npx shadcn@latest add [component-name]`
122
+ 2. Update the generated component to use Altitude design tokens
123
+ 3. Export the component from `src/index.ts`
124
+ 4. Update this README with usage examples
package/dist/index.d.mts ADDED
@@ -0,0 +1,74 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
2
+ import * as React from 'react';
3
+ import { VariantProps } from 'class-variance-authority';
4
+ import * as SelectPrimitive from '@radix-ui/react-select';
5
+
6
+ declare const buttonVariants: (props?: ({
7
+ variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
8
+ size?: "default" | "sm" | "lg" | "icon" | null | undefined;
9
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
10
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
11
+ asChild?: boolean;
12
+ }
13
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
14
+
15
+ declare const typographyVariants: (props?: ({
16
+ variant?: "display-xl" | "display-lg" | "display-md" | "display-sm" | "display-xs" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-xl" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-xl" | "label-xl-bold" | "label-lg" | "label-lg-bold" | "label-md" | "label-md-bold" | "label-sm" | "label-sm-bold" | "label-xs" | "label-xs-bold" | null | undefined;
17
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
18
+ interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
19
+ as?: React.ElementType;
20
+ }
21
+ declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
22
+
23
+ declare const selectTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
24
+ declare const selectContentVariants: (props?: ({
25
+ position?: "popper" | "item-aligned" | null | undefined;
26
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
27
+ declare const Select: React.FC<SelectPrimitive.SelectProps>;
28
+ declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
29
+ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
30
+ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
31
+ className?: string;
32
+ children?: React.ReactNode;
33
+ }
34
+ declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
35
+ declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
36
+ declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
37
+ interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>, VariantProps<typeof selectContentVariants> {
38
+ }
39
+ declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
40
+ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
41
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
42
+ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
43
+
44
+ declare const inputVariants: (props?: ({
45
+ variant?: "textarea" | "input" | null | undefined;
46
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
47
+ type InputElement = HTMLInputElement | HTMLTextAreaElement;
48
+ interface BaseInputProps extends VariantProps<typeof inputVariants> {
49
+ className?: string;
50
+ style?: React.CSSProperties;
51
+ onClear?: () => void;
52
+ }
53
+ interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
54
+ variant?: "input";
55
+ }
56
+ interface TextareaFieldProps extends BaseInputProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {
57
+ variant: "textarea";
58
+ }
59
+ type InputProps = InputFieldProps | TextareaFieldProps;
60
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputElement>>;
61
+
62
+ interface FormFieldProps {
63
+ label?: string;
64
+ helperText?: string;
65
+ error?: boolean;
66
+ required?: boolean;
67
+ children: React.ReactNode;
68
+ className?: string;
69
+ id?: string;
70
+ compact?: boolean;
71
+ }
72
+ declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
73
+
74
+ export { Button, type ButtonProps, FormField, type FormFieldProps, Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type TextareaFieldProps, Typography, type TypographyProps, buttonVariants, inputVariants, selectTriggerVariants, typographyVariants };
package/dist/index.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
2
+ import * as React from 'react';
3
+ import { VariantProps } from 'class-variance-authority';
4
+ import * as SelectPrimitive from '@radix-ui/react-select';
5
+
6
+ declare const buttonVariants: (props?: ({
7
+ variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
8
+ size?: "default" | "sm" | "lg" | "icon" | null | undefined;
9
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
10
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
11
+ asChild?: boolean;
12
+ }
13
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
14
+
15
+ declare const typographyVariants: (props?: ({
16
+ variant?: "display-xl" | "display-lg" | "display-md" | "display-sm" | "display-xs" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-xl" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-xl" | "label-xl-bold" | "label-lg" | "label-lg-bold" | "label-md" | "label-md-bold" | "label-sm" | "label-sm-bold" | "label-xs" | "label-xs-bold" | null | undefined;
17
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
18
+ interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
19
+ as?: React.ElementType;
20
+ }
21
+ declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
22
+
23
+ declare const selectTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
24
+ declare const selectContentVariants: (props?: ({
25
+ position?: "popper" | "item-aligned" | null | undefined;
26
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
27
+ declare const Select: React.FC<SelectPrimitive.SelectProps>;
28
+ declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
29
+ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
30
+ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
31
+ className?: string;
32
+ children?: React.ReactNode;
33
+ }
34
+ declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
35
+ declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
36
+ declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
37
+ interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>, VariantProps<typeof selectContentVariants> {
38
+ }
39
+ declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
40
+ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
41
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
42
+ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
43
+
44
+ declare const inputVariants: (props?: ({
45
+ variant?: "textarea" | "input" | null | undefined;
46
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
47
+ type InputElement = HTMLInputElement | HTMLTextAreaElement;
48
+ interface BaseInputProps extends VariantProps<typeof inputVariants> {
49
+ className?: string;
50
+ style?: React.CSSProperties;
51
+ onClear?: () => void;
52
+ }
53
+ interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
54
+ variant?: "input";
55
+ }
56
+ interface TextareaFieldProps extends BaseInputProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {
57
+ variant: "textarea";
58
+ }
59
+ type InputProps = InputFieldProps | TextareaFieldProps;
60
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputElement>>;
61
+
62
+ interface FormFieldProps {
63
+ label?: string;
64
+ helperText?: string;
65
+ error?: boolean;
66
+ required?: boolean;
67
+ children: React.ReactNode;
68
+ className?: string;
69
+ id?: string;
70
+ compact?: boolean;
71
+ }
72
+ declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
73
+
74
+ export { Button, type ButtonProps, FormField, type FormFieldProps, Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type TextareaFieldProps, Typography, type TypographyProps, buttonVariants, inputVariants, selectTriggerVariants, typographyVariants };