@northslopetech/altitude-ui 1.2.0

package/README.md

@@ -0,0 +1,124 @@
+# @nslp/altitude
+
+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
+# or
+pnpm add @nslp/altitude
+```
+
+## Architecture
+
+This package combines the best of both worlds:
+
+- **shadcn/ui**: Provides the foundation, accessibility, and component patterns
+- **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
+
+## Usage
+
+### Button
+
+The Button component is built on shadcn/ui's Button but styled with Altitude design tokens.
+
+```tsx
+import { Button } from '@nslp/altitude';
+
+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>
+      <Button size="xl">Extra Large</Button>
+      <Button size="icon">🎯</Button>
+    </div>
+  );
+}
+```
+
+#### 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) |
+
+All standard HTML button attributes are also supported.
+
+#### Design Token Integration
+
+The Button component uses Altitude design tokens:
+
+- **Colors**: `primary-*`, `neutral-*`, `semantic-error`, `base-white`
+- **Typography**: `body-xs`, `body-sm`, `body-md`, `body-lg` font sizes
+- **Focus states**: `primary-500` ring color
+- **Hover states**: Consistent with design system color scales
+
+### 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';
+
+<Button asChild>
+  <Link href="/dashboard">Go to Dashboard</Link>
+</Button>
+```
+
+## shadcn/ui Integration
+
+This package is configured to work with shadcn/ui:
+
+- Uses the same component patterns and APIs
+- Configured with `components.json` for CLI compatibility
+- Can add more shadcn/ui components with: `npx shadcn@latest add [component]`
+- All components are automatically styled with Altitude design tokens
+
+## Development
+
+```bash
+# Build the package
+pnpm build
+
+# Watch for changes
+pnpm dev
+
+# Run linting
+pnpm lint
+
+# Type checking
+pnpm check-types
+
+# Add more shadcn/ui components
+npx shadcn@latest add [component-name]
+```
+
+## Adding New Components
+
+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

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const typographyVariants: (props?: ({
+    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;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: React.ElementType;
+}
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+
+declare const selectTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const selectContentVariants: (props?: ({
+    position?: "popper" | "item-aligned" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
+    className?: string;
+    children?: React.ReactNode;
+}
+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> {
+}
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface FormFieldProps {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    compact?: boolean;
+}
+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 };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const typographyVariants: (props?: ({
+    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;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: React.ElementType;
+}
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+
+declare const selectTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const selectContentVariants: (props?: ({
+    position?: "popper" | "item-aligned" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
+    className?: string;
+    children?: React.ReactNode;
+}
+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> {
+}
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface FormFieldProps {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    compact?: boolean;
+}
+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 };

package/dist/index.js

@@ -0,0 +1,450 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  FormField: () => FormField,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  Typography: () => Typography,
+  buttonVariants: () => buttonVariants,
+  selectTriggerVariants: () => selectTriggerVariants,
+  typographyVariants: () => typographyVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ui/button.tsx
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var import_class_variance_authority = require("class-variance-authority");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-canvas-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
+        outline: "bg-canvas-light text-dark border border-edge-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
+        destructive: "bg-canvas-error-strong text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
+        "destructive-subtle": "bg-canvas-light text-error border border-edge-default shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
+        ghost: "bg-canvas-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
+        link: "bg-canvas-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2"
+      },
+      size: {
+        sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
+        default: "h-10 rounded-md px-3 py-2 min-w-[125px]",
+        lg: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
+        icon: "h-10 w-10 rounded-md"
+      }
+    },
+    compoundVariants: [],
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function getButtonTypographyStyles(size) {
+  switch (size) {
+    case "sm":
+      return { font: "var(--typography-label-sm-bold)" };
+    case "lg":
+      return { font: "var(--typography-label-lg-bold)" };
+    case "icon":
+    case "default":
+    default:
+      return { font: "var(--typography-label-md-bold)" };
+  }
+}
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, style, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const typographyStyles = getButtonTypographyStyles(size);
+    const tokenStyles = {
+      ...typographyStyles,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size }), className),
+        style: tokenStyles,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/typography.tsx
+var React2 = __toESM(require("react"));
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var typographyVariants = (0, import_class_variance_authority3.cva)(
+  "text-foreground",
+  {
+    variants: {
+      variant: {
+        "display-xl": "[font:var(--typography-display-xl)]",
+        "display-lg": "[font:var(--typography-display-lg)]",
+        "display-md": "[font:var(--typography-display-md)]",
+        "display-sm": "[font:var(--typography-display-sm)]",
+        "display-xs": "[font:var(--typography-display-xs)]",
+        "heading-xl": "[font:var(--typography-heading-xl)]",
+        "heading-lg": "[font:var(--typography-heading-lg)]",
+        "heading-md": "[font:var(--typography-heading-md)]",
+        "heading-sm": "[font:var(--typography-heading-sm)]",
+        "heading-xs": "[font:var(--typography-heading-xs)]",
+        "body-xl": "[font:var(--typography-body-xl)]",
+        "body-lg": "[font:var(--typography-body-lg)]",
+        "body-md": "[font:var(--typography-body-md)]",
+        "body-sm": "[font:var(--typography-body-sm)]",
+        "body-xs": "[font:var(--typography-body-xs)]",
+        "label-xl": "[font:var(--typography-label-xl-regular)]",
+        "label-xl-bold": "[font:var(--typography-label-xl-bold)]",
+        "label-lg": "[font:var(--typography-label-lg-regular)]",
+        "label-lg-bold": "[font:var(--typography-label-lg-bold)]",
+        "label-md": "[font:var(--typography-label-md-regular)]",
+        "label-md-bold": "[font:var(--typography-label-md-bold)]",
+        "label-sm": "[font:var(--typography-label-sm-regular)]",
+        "label-sm-bold": "[font:var(--typography-label-sm-bold)]",
+        "label-xs": "[font:var(--typography-label-xs-regular)]",
+        "label-xs-bold": "[font:var(--typography-label-xs-bold)]"
+      }
+    },
+    defaultVariants: {
+      variant: "body-md"
+    }
+  }
+);
+function getDefaultElement(variant) {
+  if (!variant) return "p";
+  if (variant.startsWith("display-")) return "h1";
+  if (variant.startsWith("heading-")) return "h2";
+  if (variant.startsWith("label-")) return "label";
+  if (variant.startsWith("body-")) return "p";
+  return "p";
+}
+var Typography = React2.forwardRef(
+  ({ className, variant, as, style, ...props }, ref) => {
+    const Component = as || getDefaultElement(variant);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      {
+        className: cn(typographyVariants({ variant }), className),
+        style,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+// src/components/ui/select.tsx
+var React3 = __toESM(require("react"));
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var selectTriggerVariants = (0, import_class_variance_authority4.cva)(
+  "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2 min-w-80"
+);
+var selectContentVariants = (0, import_class_variance_authority4.cva)(
+  "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-edge-default bg-canvas-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
+  {
+    variants: {
+      position: {
+        "popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "item-aligned": ""
+      }
+    },
+    defaultVariants: {
+      position: "popper"
+    }
+  }
+);
+var Select = SelectPrimitive.Root;
+Select.displayName = "Select";
+var SelectGroup = SelectPrimitive.Group;
+SelectGroup.displayName = "SelectGroup";
+var SelectValue = SelectPrimitive.Value;
+SelectValue.displayName = "SelectValue";
+var SelectTrigger = React3.forwardRef(({ className, children, style, ...props }, ref) => {
+  const tokenStyles = {
+    font: "var(--typography-label-md-regular)",
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(selectTriggerVariants(), "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong data-[state=open]:[&_svg]:rotate-180", className),
+      style: tokenStyles,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1 text-left truncate", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDown, { className: "h-5 w-5 text-secondary flex-shrink-0 transition-transform duration-200" }) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1 text-secondary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1 text-secondary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const contentPosition = position || "popper";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    SelectPrimitive.Content,
+    {
+      ref,
+      className: cn(selectContentVariants({ position: contentPosition }), className),
+      position: contentPosition,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "py-1.5 pl-8 pr-2 text-secondary",
+      className
+    ),
+    style: { font: "var(--typography-label-xs-regular)", ...style },
+    ...props,
+    children
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-md h-11 px-4 text-dark outline-none transition-colors",
+      "focus:bg-canvas-gray focus:text-dark",
+      "hover:bg-canvas-gray/50",
+      "data-[state=checked]:bg-canvas-surface-info data-[state=checked]:text-dark",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    style: { font: "var(--typography-label-md-regular)", ...style },
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.ItemText, { className: "flex-1 truncate", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.ItemIndicator, { className: "flex h-4 w-4 items-center justify-center ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { className: "h-4 w-4 text-edge-strong" }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-edge-default", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/ui/form-field.tsx
+var React4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FormField = React4.forwardRef(({
+  label,
+  helperText,
+  error = false,
+  required = false,
+  children,
+  className,
+  id,
+  compact = false,
+  ...props
+}, ref) => {
+  const generatedId = React4.useId();
+  const fieldId = id || generatedId;
+  const helperTextId = `${fieldId}-helper`;
+  const labelId = `${fieldId}-label`;
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: cn("w-full space-y-2", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
+        React4.cloneElement(children, {
+          id: fieldId,
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-describedby": helperText ? helperTextId : void 0,
+          "aria-required": required,
+          "aria-invalid": error,
+          className: cn(
+            "pt-7 pb-2 h-14 items-end",
+            error ? "border-2 border-error-500 focus:border-error-500" : "",
+            children.props.className
+          )
+        }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "label",
+          {
+            id: labelId,
+            htmlFor: fieldId,
+            className: "absolute left-3 top-2 text-xs text-semantic-text-info [font:var(--typography-label-xs-bold)] pointer-events-none",
+            children: label
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Typography,
+        {
+          variant: "body-xs",
+          id: helperTextId,
+          className: cn(
+            error ? "text-semantic-text-error" : "text-semantic-text-secondary"
+          ),
+          children: helperText
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: cn("w-full space-y-3", className), ...props, children: [
+    (label || required) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "label",
+        {
+          id: labelId,
+          htmlFor: fieldId,
+          className: "text-semantic-text-primary [font:var(--typography-label-sm-regular)]",
+          children: label
+        }
+      ),
+      required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-semantic-text-secondary [font:var(--typography-label-xs-regular)]", children: "*required" })
+    ] }),
+    React4.cloneElement(children, {
+      id: fieldId,
+      "aria-labelledby": label ? labelId : void 0,
+      "aria-describedby": helperText ? helperTextId : void 0,
+      "aria-required": required,
+      "aria-invalid": error,
+      className: cn(
+        error ? "border-2 border-error-500 focus:border-error-500" : "",
+        children.props.className
+      )
+    }),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Typography,
+      {
+        variant: "body-xs",
+        id: helperTextId,
+        className: cn(
+          error ? "text-semantic-text-error" : "text-semantic-text-secondary"
+        ),
+        children: helperText
+      }
+    )
+  ] });
+});
+FormField.displayName = "FormField";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  FormField,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Typography,
+  buttonVariants,
+  selectTriggerVariants,
+  typographyVariants
+});

package/dist/index.mjs

@@ -0,0 +1,398 @@
+// src/components/ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cva } from "class-variance-authority";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-canvas-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
+        outline: "bg-canvas-light text-dark border border-edge-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
+        destructive: "bg-canvas-error-strong text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
+        "destructive-subtle": "bg-canvas-light text-error border border-edge-default shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
+        ghost: "bg-canvas-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
+        link: "bg-canvas-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2"
+      },
+      size: {
+        sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
+        default: "h-10 rounded-md px-3 py-2 min-w-[125px]",
+        lg: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
+        icon: "h-10 w-10 rounded-md"
+      }
+    },
+    compoundVariants: [],
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function getButtonTypographyStyles(size) {
+  switch (size) {
+    case "sm":
+      return { font: "var(--typography-label-sm-bold)" };
+    case "lg":
+      return { font: "var(--typography-label-lg-bold)" };
+    case "icon":
+    case "default":
+    default:
+      return { font: "var(--typography-label-md-bold)" };
+  }
+}
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const typographyStyles = getButtonTypographyStyles(size);
+    const tokenStyles = {
+      ...typographyStyles,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size }), className),
+        style: tokenStyles,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/typography.tsx
+import * as React2 from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var typographyVariants = cva3(
+  "text-foreground",
+  {
+    variants: {
+      variant: {
+        "display-xl": "[font:var(--typography-display-xl)]",
+        "display-lg": "[font:var(--typography-display-lg)]",
+        "display-md": "[font:var(--typography-display-md)]",
+        "display-sm": "[font:var(--typography-display-sm)]",
+        "display-xs": "[font:var(--typography-display-xs)]",
+        "heading-xl": "[font:var(--typography-heading-xl)]",
+        "heading-lg": "[font:var(--typography-heading-lg)]",
+        "heading-md": "[font:var(--typography-heading-md)]",
+        "heading-sm": "[font:var(--typography-heading-sm)]",
+        "heading-xs": "[font:var(--typography-heading-xs)]",
+        "body-xl": "[font:var(--typography-body-xl)]",
+        "body-lg": "[font:var(--typography-body-lg)]",
+        "body-md": "[font:var(--typography-body-md)]",
+        "body-sm": "[font:var(--typography-body-sm)]",
+        "body-xs": "[font:var(--typography-body-xs)]",
+        "label-xl": "[font:var(--typography-label-xl-regular)]",
+        "label-xl-bold": "[font:var(--typography-label-xl-bold)]",
+        "label-lg": "[font:var(--typography-label-lg-regular)]",
+        "label-lg-bold": "[font:var(--typography-label-lg-bold)]",
+        "label-md": "[font:var(--typography-label-md-regular)]",
+        "label-md-bold": "[font:var(--typography-label-md-bold)]",
+        "label-sm": "[font:var(--typography-label-sm-regular)]",
+        "label-sm-bold": "[font:var(--typography-label-sm-bold)]",
+        "label-xs": "[font:var(--typography-label-xs-regular)]",
+        "label-xs-bold": "[font:var(--typography-label-xs-bold)]"
+      }
+    },
+    defaultVariants: {
+      variant: "body-md"
+    }
+  }
+);
+function getDefaultElement(variant) {
+  if (!variant) return "p";
+  if (variant.startsWith("display-")) return "h1";
+  if (variant.startsWith("heading-")) return "h2";
+  if (variant.startsWith("label-")) return "label";
+  if (variant.startsWith("body-")) return "p";
+  return "p";
+}
+var Typography = React2.forwardRef(
+  ({ className, variant, as, style, ...props }, ref) => {
+    const Component = as || getDefaultElement(variant);
+    return /* @__PURE__ */ jsx2(
+      Component,
+      {
+        className: cn(typographyVariants({ variant }), className),
+        style,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+// src/components/ui/select.tsx
+import * as React3 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva as cva4 } from "class-variance-authority";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var selectTriggerVariants = cva4(
+  "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2 min-w-80"
+);
+var selectContentVariants = cva4(
+  "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-edge-default bg-canvas-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
+  {
+    variants: {
+      position: {
+        "popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "item-aligned": ""
+      }
+    },
+    defaultVariants: {
+      position: "popper"
+    }
+  }
+);
+var Select = SelectPrimitive.Root;
+Select.displayName = "Select";
+var SelectGroup = SelectPrimitive.Group;
+SelectGroup.displayName = "SelectGroup";
+var SelectValue = SelectPrimitive.Value;
+SelectValue.displayName = "SelectValue";
+var SelectTrigger = React3.forwardRef(({ className, children, style, ...props }, ref) => {
+  const tokenStyles = {
+    font: "var(--typography-label-md-regular)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(selectTriggerVariants(), "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong data-[state=open]:[&_svg]:rotate-180", className),
+      style: tokenStyles,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex-1 text-left truncate", children }),
+        /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-5 w-5 text-secondary flex-shrink-0 transition-transform duration-200" }) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1 text-secondary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx3(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1 text-secondary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const contentPosition = position || "popper";
+  return /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      ref,
+      className: cn(selectContentVariants({ position: contentPosition }), className),
+      position: contentPosition,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx3(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx3(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "py-1.5 pl-8 pr-2 text-secondary",
+      className
+    ),
+    style: { font: "var(--typography-label-xs-regular)", ...style },
+    ...props,
+    children
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-md h-11 px-4 text-dark outline-none transition-colors",
+      "focus:bg-canvas-gray focus:text-dark",
+      "hover:bg-canvas-gray/50",
+      "data-[state=checked]:bg-canvas-surface-info data-[state=checked]:text-dark",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    style: { font: "var(--typography-label-md-regular)", ...style },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { className: "flex-1 truncate", children }),
+      /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { className: "flex h-4 w-4 items-center justify-center ml-auto", children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4 text-edge-strong" }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-edge-default", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/ui/form-field.tsx
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FormField = React4.forwardRef(({
+  label,
+  helperText,
+  error = false,
+  required = false,
+  children,
+  className,
+  id,
+  compact = false,
+  ...props
+}, ref) => {
+  const generatedId = React4.useId();
+  const fieldId = id || generatedId;
+  const helperTextId = `${fieldId}-helper`;
+  const labelId = `${fieldId}-label`;
+  if (compact) {
+    return /* @__PURE__ */ jsxs2("div", { ref, className: cn("w-full space-y-2", className), ...props, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+        React4.cloneElement(children, {
+          id: fieldId,
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-describedby": helperText ? helperTextId : void 0,
+          "aria-required": required,
+          "aria-invalid": error,
+          className: cn(
+            "pt-7 pb-2 h-14 items-end",
+            error ? "border-2 border-error-500 focus:border-error-500" : "",
+            children.props.className
+          )
+        }),
+        label && /* @__PURE__ */ jsx4(
+          "label",
+          {
+            id: labelId,
+            htmlFor: fieldId,
+            className: "absolute left-3 top-2 text-xs text-semantic-text-info [font:var(--typography-label-xs-bold)] pointer-events-none",
+            children: label
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx4(
+        Typography,
+        {
+          variant: "body-xs",
+          id: helperTextId,
+          className: cn(
+            error ? "text-semantic-text-error" : "text-semantic-text-secondary"
+          ),
+          children: helperText
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("w-full space-y-3", className), ...props, children: [
+    (label || required) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx4(
+        "label",
+        {
+          id: labelId,
+          htmlFor: fieldId,
+          className: "text-semantic-text-primary [font:var(--typography-label-sm-regular)]",
+          children: label
+        }
+      ),
+      required && /* @__PURE__ */ jsx4("span", { className: "text-semantic-text-secondary [font:var(--typography-label-xs-regular)]", children: "*required" })
+    ] }),
+    React4.cloneElement(children, {
+      id: fieldId,
+      "aria-labelledby": label ? labelId : void 0,
+      "aria-describedby": helperText ? helperTextId : void 0,
+      "aria-required": required,
+      "aria-invalid": error,
+      className: cn(
+        error ? "border-2 border-error-500 focus:border-error-500" : "",
+        children.props.className
+      )
+    }),
+    helperText && /* @__PURE__ */ jsx4(
+      Typography,
+      {
+        variant: "body-xs",
+        id: helperTextId,
+        className: cn(
+          error ? "text-semantic-text-error" : "text-semantic-text-secondary"
+        ),
+        children: helperText
+      }
+    )
+  ] });
+});
+FormField.displayName = "FormField";
+export {
+  Button,
+  FormField,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Typography,
+  buttonVariants,
+  selectTriggerVariants,
+  typographyVariants
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@northslopetech/altitude-ui",
+  "version": "1.2.0",
+  "private": false,
+  "description": "React UI components for the Altitude design system",
+  "author": "Northslope",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/northslopetech/altitude-design-system.git",
+    "directory": "packages/altitude-ui"
+  },
+  "homepage": "https://github.com/northslopetech/altitude-design-system#readme",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "tailwind"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./tailwind": "./tailwind.preset.js",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "tailwind.preset.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.1",
+    "eslint": "^9.31.0",
+    "tailwindcss": "^4.1.11",
+    "tsup": "^8.0.0",
+    "typescript": "5.8.2",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@northslopetech/altitude-tokens": "1.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.536.0",
+    "tailwind-merge": "^2.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "prebuild": "cd ../altitude-tokens && npm run build",
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external altitude-tokens",
+    "clean": "rm -rf dist",
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  }
+}