@northslopetech/altitude-ui 1.2.0 → 1.6.0

package/README.md

@@ -1,13 +1,13 @@
-# @nslp/altitude
+# @northslopetech/altitude-ui
 
 React UI components for the Altitude design system, built on top of [shadcn/ui](https://ui.shadcn.com/) and styled with Altitude design tokens.
 
 ## Installation
 
 ```bash
-npm install @nslp/altitude
+npm install @northslopetech/altitude-ui
 # or
-pnpm add @nslp/altitude
+pnpm add @northslopetech/altitude-ui
 ```
 
 ## Architecture
@@ -18,10 +18,21 @@ This package combines the best of both worlds:
 - **Altitude Design Tokens**: Replaces shadcn/ui's default colors and typography with our design system
 
 Components are built using:
+
 - **Radix UI**: For accessibility and behavior
 - **class-variance-authority**: For type-safe variant management
 - **Tailwind CSS**: For styling with Altitude design tokens
 
+## Available Components
+
+This package includes the following components:
+
+- **Button** - Interactive button component with multiple variants and sizes
+- **Select** - Dropdown selection component with search capabilities
+- **DatePicker** - Date selection component with calendar popup
+- **FormField** - Form field wrapper with label and error handling
+- **Typography** - Text components with design system typography tokens
+
 ## Usage
 
 ### Button
@@ -29,21 +40,21 @@ Components are built using:
 The Button component is built on shadcn/ui's Button but styled with Altitude design tokens.
 
 ```tsx
-import { Button } from '@nslp/altitude';
+import { Button } from "@northslopetech/altitude-ui";
 
 function Example() {
   return (
     <div className="flex gap-2 flex-wrap">
       {/* Default variant */}
       <Button>Primary Button</Button>
-      
+
       {/* Other variants */}
       <Button variant="secondary">Secondary</Button>
       <Button variant="outline">Outline</Button>
       <Button variant="ghost">Ghost</Button>
       <Button variant="link">Link</Button>
       <Button variant="destructive">Destructive</Button>
-      
+
       {/* Different sizes */}
       <Button size="sm">Small</Button>
       <Button size="lg">Large</Button>
@@ -56,11 +67,11 @@ function Example() {
 
 #### Button Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'link' \| 'destructive'` | `'default'` | Visual style variant |
-| `size` | `'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon'` | `'default'` | Size of the button |
-| `asChild` | `boolean` | `false` | Render as child element (for composition) |
+| Prop      | Type                                                                          | Default     | Description                               |
+| --------- | ----------------------------------------------------------------------------- | ----------- | ----------------------------------------- |
+| `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'link' \| 'destructive'` | `'default'` | Visual style variant                      |
+| `size`    | `'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon'`                                 | `'default'` | Size of the button                        |
+| `asChild` | `boolean`                                                                     | `false`     | Render as child element (for composition) |
 
 All standard HTML button attributes are also supported.
 
@@ -73,17 +84,38 @@ The Button component uses Altitude design tokens:
 - **Focus states**: `primary-500` ring color
 - **Hover states**: Consistent with design system color scales
 
+### Checkbox
+
+The Checkbox component is built on Radix UI Checkbox with Altitude design tokens.
+
+```tsx
+import { Checkbox } from "@nslp/altitude";
+
+function Example() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <label htmlFor="terms">Accept terms and conditions</label>
+    </div>
+  );
+}
+```
+
+#### Checkbox Props
+
+All standard Radix UI Checkbox attributes are also supported.
+
 ### asChild Pattern
 
 Use the `asChild` prop for composition with other components (powered by Radix UI Slot):
 
 ```tsx
-import { Button } from '@nslp/altitude';
-import Link from 'next/link';
+import { Button } from "@northslopetech/altitude-ui";
+import Link from "next/link";
 
 <Button asChild>
   <Link href="/dashboard">Go to Dashboard</Link>
-</Button>
+</Button>;
 ```
 
 ## shadcn/ui Integration
@@ -97,11 +129,22 @@ This package is configured to work with shadcn/ui:
 
 ## Development
 
+### Prerequisites
+
+This package depends on design tokens. Before development, ensure tokens are built:
+
+```bash
+# From the root directory
+pnpm tokens:build
+```
+
+### Commands
+
 ```bash
 # Build the package
 pnpm build
 
-# Watch for changes
+# Watch for changes (tokens must be built first)
 pnpm dev
 
 # Run linting
@@ -114,6 +157,8 @@ pnpm check-types
 npx shadcn@latest add [component-name]
 ```
 
+> **Note**: The package includes a prebuild script that automatically builds tokens, but for development mode you should build tokens manually first.
+
 ## Adding New Components
 
 To add more shadcn/ui components:
@@ -121,4 +166,79 @@ To add more shadcn/ui components:
 1. Run `npx shadcn@latest add [component-name]`
 2. Update the generated component to use Altitude design tokens
 3. Export the component from `src/index.ts`
-4. Update this README with usage examples
+4. Update this README with usage examples
+
+### Select
+
+A dropdown selection component with built-in search and filtering:
+
+```tsx
+import { Select } from "@northslopetech/altitude-ui";
+
+const options = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "orange", label: "Orange" },
+];
+
+function Example() {
+  return (
+    <Select
+      placeholder="Select a fruit..."
+      options={options}
+      onValueChange={(value) => console.log(value)}
+    />
+  );
+}
+```
+
+### DatePicker
+
+A date selection component with calendar popup:
+
+```tsx
+import { DatePicker } from "@northslopetech/altitude-ui";
+
+function Example() {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <DatePicker selected={date} onSelect={setDate} placeholder="Pick a date" />
+  );
+}
+```
+
+### FormField
+
+A form field wrapper that provides consistent styling and error handling:
+
+```tsx
+import { FormField, Input } from "@northslopetech/altitude-ui";
+
+function Example() {
+  return (
+    <FormField label="Email Address" error="Please enter a valid email">
+      <Input type="email" placeholder="Enter your email" />
+    </FormField>
+  );
+}
+```
+
+### Typography
+
+Pre-styled text components using design system typography tokens:
+
+```tsx
+import { Typography } from "@northslopetech/altitude-ui";
+
+function Example() {
+  return (
+    <div>
+      <Typography variant="display-xl">Large Display Text</Typography>
+      <Typography variant="heading-lg">Section Heading</Typography>
+      <Typography variant="body-md">Body paragraph text</Typography>
+      <Typography variant="label-sm-bold">Form Label</Typography>
+    </div>
+  );
+}
+```

package/dist/index.d.mts

@@ -1,11 +1,19 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { JSX } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 
+declare enum ButtonSize {
+    Small = "sm",
+    Default = "default",
+    Large = "lg",
+    Icon = "icon"
+}
 declare const buttonVariants: (props?: ({
     variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: ButtonSize | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -34,7 +42,7 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>, VariantProps<typeof selectContentVariants> {
+interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "position">, VariantProps<typeof selectContentVariants> {
 }
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -53,4 +61,74 @@ interface FormFieldProps {
 }
 declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Button, type ButtonProps, FormField, type FormFieldProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Typography, type TypographyProps, buttonVariants, selectTriggerVariants, typographyVariants };
+declare const datePickerTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface DatePickerProps {
+    value?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    defaultValue?: Date | string | number;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+    className?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+declare enum UploadState {
+    Default = "default",
+    DragOver = "dragOver",
+    Error = "error",
+    Uploading = "uploading",
+    Success = "success"
+}
+declare const uploadVariants: (props?: ({
+    state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onError"> {
+    endpoint?: string;
+    onFileSelect?: (files: File[]) => void;
+    onUploadProgress?: (progress: number) => void;
+    onUploadError?: (error: string) => void;
+    onUploadComplete?: (files: File[]) => void;
+    onUploadSuccess?: (response: unknown) => void;
+    maxFileSize?: number;
+    acceptedFileTypes?: string[];
+    disabled?: boolean;
+    state?: UploadState;
+    progress?: number;
+    errorMessage?: string;
+    loading?: boolean;
+}
+declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    variant?: "textarea" | "input" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BaseInputProps extends VariantProps<typeof inputVariants> {
+    className?: string;
+    style?: React.CSSProperties;
+    onClear?: () => void;
+}
+interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "style"> {
+    variant?: "input";
+}
+interface TextareaFieldProps extends BaseInputProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
+    variant: "textarea";
+}
+type InputProps = InputFieldProps | TextareaFieldProps;
+interface InputComponent {
+    (props: InputFieldProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }): JSX.Element;
+    (props: TextareaFieldProps & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+    }): JSX.Element;
+}
+declare const TypedInput: InputComponent;
+
+export { Button, type ButtonProps, ButtonSize, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, UploadState, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, typographyVariants, uploadVariants };

package/dist/index.d.ts

@@ -1,11 +1,19 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { JSX } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 
+declare enum ButtonSize {
+    Small = "sm",
+    Default = "default",
+    Large = "lg",
+    Icon = "icon"
+}
 declare const buttonVariants: (props?: ({
     variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: ButtonSize | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -34,7 +42,7 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>, VariantProps<typeof selectContentVariants> {
+interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "position">, VariantProps<typeof selectContentVariants> {
 }
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -53,4 +61,74 @@ interface FormFieldProps {
 }
 declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Button, type ButtonProps, FormField, type FormFieldProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Typography, type TypographyProps, buttonVariants, selectTriggerVariants, typographyVariants };
+declare const datePickerTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface DatePickerProps {
+    value?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    defaultValue?: Date | string | number;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+    className?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+declare enum UploadState {
+    Default = "default",
+    DragOver = "dragOver",
+    Error = "error",
+    Uploading = "uploading",
+    Success = "success"
+}
+declare const uploadVariants: (props?: ({
+    state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onError"> {
+    endpoint?: string;
+    onFileSelect?: (files: File[]) => void;
+    onUploadProgress?: (progress: number) => void;
+    onUploadError?: (error: string) => void;
+    onUploadComplete?: (files: File[]) => void;
+    onUploadSuccess?: (response: unknown) => void;
+    maxFileSize?: number;
+    acceptedFileTypes?: string[];
+    disabled?: boolean;
+    state?: UploadState;
+    progress?: number;
+    errorMessage?: string;
+    loading?: boolean;
+}
+declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    variant?: "textarea" | "input" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BaseInputProps extends VariantProps<typeof inputVariants> {
+    className?: string;
+    style?: React.CSSProperties;
+    onClear?: () => void;
+}
+interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "style"> {
+    variant?: "input";
+}
+interface TextareaFieldProps extends BaseInputProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
+    variant: "textarea";
+}
+type InputProps = InputFieldProps | TextareaFieldProps;
+interface InputComponent {
+    (props: InputFieldProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }): JSX.Element;
+    (props: TextareaFieldProps & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+    }): JSX.Element;
+}
+declare const TypedInput: InputComponent;
+
+export { Button, type ButtonProps, ButtonSize, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, UploadState, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, typographyVariants, uploadVariants };