@blibliki/ui 0.9.2

package/README.md

@@ -0,0 +1,91 @@
+# @blibliki/ui
+
+Foundational UI package for Blibliki applications.
+
+## Goals
+
+- Provide reusable UI primitives with a consistent API.
+- Enforce UI governance rules (class bloat + palette discipline).
+- Provide an opinionated themeable UI system with simple app integration.
+
+## Included in bootstrap
+
+- `cn(...)` utility (`clsx` + `tailwind-merge`)
+- `Button` component (`color`, `variant`, `size`, `asChild`)
+- `UIProvider` + `createTheme(...)` for runtime theme customization
+- Shared UI governance ESLint plugin/config
+- Shared palette tokens (`tokens.css`) and component styles (`styles.css`)
+- CSS palette checker script
+
+## Governance usage in an app
+
+```js
+import { createUIGovernanceConfig } from "@blibliki/ui/eslint";
+import { defineConfig } from "eslint/config";
+import baseConfig from "../../eslint.config.js";
+
+export default defineConfig([baseConfig, createUIGovernanceConfig()]);
+```
+
+## Quick start
+
+Import styles once:
+
+```css
+@import "@blibliki/ui/styles.css";
+```
+
+No Tailwind `@source` wiring is required in consuming apps.
+
+Render with provider:
+
+```tsx
+import { Button, UIProvider } from "@blibliki/ui";
+
+export function Example() {
+  return (
+    <UIProvider mode="dark">
+      <Button color="secondary" variant="contained">
+        Save
+      </Button>
+    </UIProvider>
+  );
+}
+```
+
+Dark mode is handled via `mode="light" | "dark"` and corresponding CSS variables.
+
+Button API:
+
+- `color`: `primary | neutral | secondary | error | warning | info | success`
+- `variant`: `contained | outlined | text`
+- `size`: `md | sm | lg | icon`
+
+## Theme customization
+
+```tsx
+import { UIProvider, createTheme } from "@blibliki/ui";
+
+const theme = createTheme({
+  light: {
+    primary500: "oklch(0.72 0.18 185)",
+    primary600: "oklch(0.66 0.19 185)",
+    success500: "oklch(0.7 0.18 155)",
+  },
+  dark: {
+    surface0: "oklch(0.09 0.01 260)",
+    surface1: "oklch(0.13 0.01 260)",
+  },
+  radius: {
+    md: "10px",
+  },
+});
+
+export function ThemedApp() {
+  return (
+    <UIProvider mode="light" theme={theme}>
+      {/* app */}
+    </UIProvider>
+  );
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,542 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { ComponentProps, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+import { ClassValue } from "clsx";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+//#region src/components/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "contained" | "outlined" | "text" | null | undefined;
+  color?: "primary" | "neutral" | "secondary" | "error" | "warning" | "info" | "success" | null | undefined;
+  size?: "md" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonElement = HTMLButtonElement;
+interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<ButtonElement>, "color">, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/card.d.ts
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function CardHeader({
+  className,
+  ...props
+}: ComponentProps<"div">): import("react").JSX.Element;
+declare function CardTitle({
+  className,
+  ...props
+}: ComponentProps<"div">): import("react").JSX.Element;
+declare function CardDescription({
+  className,
+  ...props
+}: ComponentProps<"div">): import("react").JSX.Element;
+declare function CardAction({
+  className,
+  ...props
+}: ComponentProps<"div">): import("react").JSX.Element;
+declare function CardContent({
+  className,
+  ...props
+}: ComponentProps<"div">): import("react").JSX.Element;
+declare function CardFooter({
+  className,
+  ...props
+}: ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+//#region src/components/surface.d.ts
+declare const surfaceVariants: (props?: ({
+  tone?: "subtle" | "canvas" | "panel" | "raised" | null | undefined;
+  border?: "none" | "subtle" | null | undefined;
+  radius?: "md" | "sm" | "lg" | "none" | null | undefined;
+  shadow?: "md" | "sm" | "lg" | "none" | "xl" | null | undefined;
+  intent?: "neutral" | "error" | "warning" | "info" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SurfaceElement = HTMLDivElement;
+interface SurfaceProps extends React$1.HTMLAttributes<SurfaceElement>, VariantProps<typeof surfaceVariants> {
+  asChild?: boolean;
+}
+declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/stack.d.ts
+declare const stackVariants: (props?: ({
+  direction?: "row" | "column" | null | undefined;
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | null | undefined;
+  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
+  wrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StackElement = HTMLDivElement;
+interface StackProps extends React$1.HTMLAttributes<StackElement>, VariantProps<typeof stackVariants> {
+  asChild?: boolean;
+}
+declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/divider.d.ts
+declare const dividerVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | null | undefined;
+  tone?: "subtle" | "strong" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type DividerElement = HTMLDivElement;
+interface DividerProps extends React$1.HTMLAttributes<DividerElement>, VariantProps<typeof dividerVariants> {}
+declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/icon-button.d.ts
+type IconButtonSize = "xs" | "sm" | "md";
+interface IconButtonProps extends Omit<ButtonProps, "children" | "size" | "asChild"> {
+  icon: React$1.ReactNode;
+  size?: IconButtonSize;
+  "aria-label": string;
+}
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/input.d.ts
+declare const inputVariants: (props?: ({
+  size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {}
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/textarea.d.ts
+declare const textareaVariants: (props?: ({
+  size?: "md" | "sm" | null | undefined;
+  resize?: "none" | "vertical" | "both" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, VariantProps<typeof textareaVariants> {}
+declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+//#region src/components/label.d.ts
+declare function Label({
+  className,
+  ...props
+}: ComponentProps<typeof LabelPrimitive.Root>): import("react").JSX.Element;
+//#endregion
+//#region src/components/text.d.ts
+declare const textVariants: (props?: ({
+  tone?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "muted" | null | undefined;
+  size?: "md" | "sm" | "lg" | "xs" | null | undefined;
+  weight?: "regular" | "medium" | "semibold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextElement = HTMLParagraphElement;
+interface TextProps extends HTMLAttributes<TextElement>, VariantProps<typeof textVariants> {
+  asChild?: boolean;
+}
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+//#region src/components/badge.d.ts
+declare const badgeVariants: (props?: ({
+  tone?: "primary" | "neutral" | "secondary" | "error" | "warning" | "info" | "success" | null | undefined;
+  variant?: "soft" | "solid" | "outline" | null | undefined;
+  size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeElement = HTMLSpanElement;
+interface BadgeProps extends HTMLAttributes<BadgeElement>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+}
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//#region src/components/switch.d.ts
+declare const switchVariants: (props?: ({
+  size?: "md" | "sm" | null | undefined;
+  color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SwitchProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "onChange">, VariantProps<typeof switchVariants> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/select.d.ts
+declare function Select(props: ComponentProps<typeof SelectPrimitive.Root>): import("react").JSX.Element;
+declare function SelectGroup(props: ComponentProps<typeof SelectPrimitive.Group>): import("react").JSX.Element;
+declare function SelectValue({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Value>): import("react").JSX.Element;
+declare function SelectTrigger({
+  className,
+  size,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "md";
+}): import("react").JSX.Element;
+declare function SelectContent({
+  className,
+  children,
+  position,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content>): import("react").JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Label>): import("react").JSX.Element;
+declare function SelectItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Item>): import("react").JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator>): import("react").JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react").JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react").JSX.Element;
+type OptionSelectValue = string | number;
+type OptionSelectValueOption = {
+  name: string;
+  value: OptionSelectValue;
+};
+type OptionSelectIdOption = {
+  id: string;
+  name: string;
+};
+type OptionSelectInput = readonly string[] | readonly number[] | readonly OptionSelectValueOption[] | readonly OptionSelectIdOption[];
+interface OptionSelectProps<T extends OptionSelectValue | undefined> {
+  value: T;
+  options: OptionSelectInput;
+  label?: string;
+  contentClassName?: string;
+  triggerClassName?: string;
+  disabled?: boolean;
+  onChange: (value: T) => void;
+}
+declare function OptionSelect<T extends OptionSelectValue | undefined>({
+  value,
+  options,
+  label,
+  contentClassName,
+  triggerClassName,
+  disabled,
+  onChange
+}: OptionSelectProps<T>): import("react").JSX.Element;
+//#endregion
+//#region src/components/fader.d.ts
+type TOrientation = "vertical" | "horizontal";
+type MarkProps = {
+  value: number;
+  label: string;
+};
+interface FaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  name: string;
+  onChange: (value: number, calculatedValue: number) => void;
+  defaultValue?: number;
+  value?: number;
+  orientation?: TOrientation;
+  marks?: readonly MarkProps[];
+  hideMarks?: boolean;
+  max?: number;
+  min?: number;
+  step?: number;
+  exp?: number;
+}
+declare function Fader(props: FaderProps): import("react").JSX.Element;
+declare namespace Fader {
+  var displayName: string;
+}
+//#endregion
+//#region src/components/encoder.d.ts
+type EncoderSize = "sm" | "md";
+interface EncoderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  name: string;
+  onChange: (value: number) => void;
+  defaultValue?: number;
+  value?: number;
+  max?: number;
+  min?: number;
+  step?: number;
+  exp?: number;
+  size?: EncoderSize;
+  disabled?: boolean;
+  formatValue?: (value: number) => string;
+}
+declare const Encoder: import("react").ForwardRefExoticComponent<EncoderProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/dialog.d.ts
+declare function Dialog(props: React$1.ComponentProps<typeof DialogPrimitive.Root>): React$1.JSX.Element;
+declare function DialogTrigger(props: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): React$1.JSX.Element;
+declare function DialogPortal(props: React$1.ComponentProps<typeof DialogPrimitive.Portal>): React$1.JSX.Element;
+declare function DialogClose(props: React$1.ComponentProps<typeof DialogPrimitive.Close>): React$1.JSX.Element;
+declare function DialogOverlay({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): React$1.JSX.Element;
+interface DialogContentProps extends React$1.ComponentProps<typeof DialogPrimitive.Content> {
+  hideCloseButton?: boolean;
+}
+declare function DialogContent({
+  className,
+  children,
+  hideCloseButton,
+  ...props
+}: DialogContentProps): React$1.JSX.Element;
+declare function DialogHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof DialogPrimitive.Title>): React$1.JSX.Element;
+declare function DialogDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof DialogPrimitive.Description>): React$1.JSX.Element;
+//#endregion
+//#region src/components/context-menu.d.ts
+declare function ContextMenu(props: ComponentProps<typeof ContextMenuPrimitive.Root>): import("react").JSX.Element;
+declare function ContextMenuTrigger(props: ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react").JSX.Element;
+declare function ContextMenuGroup(props: ComponentProps<typeof ContextMenuPrimitive.Group>): import("react").JSX.Element;
+declare function ContextMenuPortal(props: ComponentProps<typeof ContextMenuPrimitive.Portal>): import("react").JSX.Element;
+declare function ContextMenuSub(props: ComponentProps<typeof ContextMenuPrimitive.Sub>): import("react").JSX.Element;
+declare function ContextMenuRadioGroup(props: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): import("react").JSX.Element;
+declare function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+declare function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react").JSX.Element;
+declare function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>): import("react").JSX.Element;
+declare function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>): import("react").JSX.Element;
+declare function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+declare function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>): import("react").JSX.Element;
+declare function ContextMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">): import("react").JSX.Element;
+//#endregion
+//#region src/components/dropdown-menu.d.ts
+declare function DropdownMenu(props: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal(props: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger(props: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): React$1.JSX.Element;
+declare function DropdownMenuGroup(props: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): React$1.JSX.Element;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup(props: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React$1.JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub(props: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React$1.JSX.Element;
+//#endregion
+//#region src/theme.d.ts
+type UIMode = "light" | "dark";
+interface UIColorTokens {
+  surface0: string;
+  surfaceRaised: string;
+  surfaceRaisedHover: string;
+  surface1: string;
+  surface2: string;
+  borderSubtle: string;
+  textPrimary: string;
+  textSecondary: string;
+  textMuted: string;
+  primary500: string;
+  primary600: string;
+  primaryContrast: string;
+  secondary500: string;
+  secondary600: string;
+  secondaryContrast: string;
+  error500: string;
+  error600: string;
+  errorContrast: string;
+  warning500: string;
+  warning600: string;
+  warningContrast: string;
+  info500: string;
+  info600: string;
+  infoContrast: string;
+  success500: string;
+  success600: string;
+  successContrast: string;
+}
+interface UIRadiusTokens {
+  sm: string;
+  md: string;
+  lg: string;
+}
+interface UITheme {
+  light?: Partial<UIColorTokens>;
+  dark?: Partial<UIColorTokens>;
+  radius?: Partial<UIRadiusTokens>;
+}
+interface UIResolvedTheme {
+  light: UIColorTokens;
+  dark: UIColorTokens;
+  radius: UIRadiusTokens;
+}
+declare const createTheme: (theme?: UITheme) => UIResolvedTheme;
+declare function themeToCssVariables(theme: UIResolvedTheme, mode: UIMode): Record<string, string>;
+//#endregion
+//#region src/UIProvider.d.ts
+interface UIProviderProps {
+  children: React$1.ReactNode;
+  mode?: UIMode;
+  theme?: UITheme;
+  className?: string;
+}
+declare function UIProvider({
+  children,
+  mode,
+  theme,
+  className
+}: UIProviderProps): React$1.JSX.Element;
+//#endregion
+//#region src/lib/cn.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+//#region src/semantic.d.ts
+declare const uiVars: {
+  readonly surface: {
+    readonly canvas: "var(--ui-color-surface-0)";
+    readonly panel: "var(--ui-color-surface-1)";
+    readonly raised: "var(--ui-color-surface-raised)";
+    readonly subtle: "var(--ui-color-surface-2)";
+  };
+  readonly text: {
+    readonly primary: "var(--ui-color-text-primary)";
+    readonly secondary: "var(--ui-color-text-secondary)";
+    readonly muted: "var(--ui-color-text-muted)";
+  };
+  readonly border: {
+    readonly subtle: "var(--ui-color-border-subtle)";
+  };
+};
+declare const toneVars: {
+  readonly primary: {
+    readonly "500": "var(--ui-color-primary-500)";
+    readonly "600": "var(--ui-color-primary-600)";
+    readonly contrast: "var(--ui-color-primary-contrast)";
+  };
+  readonly secondary: {
+    readonly "500": "var(--ui-color-secondary-500)";
+    readonly "600": "var(--ui-color-secondary-600)";
+    readonly contrast: "var(--ui-color-secondary-contrast)";
+  };
+  readonly success: {
+    readonly "500": "var(--ui-color-success-500)";
+    readonly "600": "var(--ui-color-success-600)";
+    readonly contrast: "var(--ui-color-success-contrast)";
+  };
+  readonly warning: {
+    readonly "500": "var(--ui-color-warning-500)";
+    readonly "600": "var(--ui-color-warning-600)";
+    readonly contrast: "var(--ui-color-warning-contrast)";
+  };
+  readonly error: {
+    readonly "500": "var(--ui-color-error-500)";
+    readonly "600": "var(--ui-color-error-600)";
+    readonly contrast: "var(--ui-color-error-contrast)";
+  };
+  readonly info: {
+    readonly "500": "var(--ui-color-info-500)";
+    readonly "600": "var(--ui-color-info-600)";
+    readonly contrast: "var(--ui-color-info-contrast)";
+  };
+};
+type UIIntentTone = keyof typeof toneVars;
+type UIIntentToneLevel = keyof (typeof toneVars)[UIIntentTone];
+declare function uiTone(tone: UIIntentTone, level?: UIIntentToneLevel): string;
+declare function uiColorMix(base: string, mixWith: string, mixWithPercent: number): string;
+//#endregion
+//#region src/index.d.ts
+declare const UI_MAX_TAILWIND_CLASSES = 12;
+//#endregion
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, type DividerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Encoder, type EncoderProps, Fader, type FaderProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type MarkProps, OptionSelect, type OptionSelectProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Stack, type StackProps, Surface, type SurfaceProps, Switch, type SwitchProps, type TOrientation, Text, type TextProps, Textarea, type TextareaProps, type UIColorTokens, type UIIntentTone, type UIIntentToneLevel, type UIMode, UIProvider, type UIProviderProps, type UIRadiusTokens, type UIResolvedTheme, type UITheme, UI_MAX_TAILWIND_CLASSES, badgeVariants, buttonVariants, cn, createTheme, dividerVariants, inputVariants, stackVariants, surfaceVariants, textVariants, textareaVariants, themeToCssVariables, uiColorMix, uiTone, uiVars };
+//# sourceMappingURL=index.d.ts.map