@epilot/volt-ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/README.md

@@ -1,43 +1,47 @@
-# @epilot/volt-ui
+# Volt UI
 
-A tree-shakeable design system library for React applications. Built with Tailwind CSS v4, Radix UI primitives, and TypeScript.
+**@epilot/volt-ui** is a tree-shakeable design system library for React applications.
 
-## Docs
+## Stack
 
-See [documentation](./docs) for more information.
+- [Bun](https://bun.com/)
+- [Vite](https://vitejs.dev/) for development and bundling
+- [Tailwind CSS](https://tailwindcss.com/) for styling
+- [Radix UI](https://www.radix-ui.com/) for UI components
+- [Docs](https://fumadocs.com/) for documentation
+
+> **Note**: We prefix the CSS classes and variables with `volt-ui-` to avoid conflicts with the application styles.
 
 ## Installation
 
+Install dependencies via [bun](https://bun.com/docs/installation).
+
+```bash
+bun install
+```
+
+## Development
+
+To run the development, documentation server and watch for changes, run:
+
 ```bash
-npm install @epilot/volt-ui
-# or
-yarn add @epilot/volt-ui
-# or
-bun add @epilot/volt-ui
+bun run dev:watch
 ```
 
+Open http://localhost:3000 with your browser to see the result.
+
 ## Build
 
 ```bash
-npm run build
-# or
-yarn build
-# or
 bun run build
 ```
 
-## Build Output
+> **Note**: This will generate the `dist` folder with the compiled code.
 
-```
-@epilot/volt-ui/
-├── dist/
-│   ├── index.es.js          # ESM bundle
-│   ├── index.umd.js         # UMD bundle
-│   ├── index.d.ts           # TypeScript declarations
-│   └── style.css            # Scoped CSS (requires [data-volt-ui])
-└── ...
-```
+## Release
 
-## License
+To release a new version, run:
 
-See LICENSE file for details.
+```bash
+npm run publish
+```

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare const Accordion: ({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionItem: ({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) => import("react/jsx-runtime").JSX.Element;
+type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
+    align?: "start" | "end";
+};
+declare const AccordionTrigger: ({ className, align, children, ...props }: AccordionTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionContent: ({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) => import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const baseColors: {
+    readonly blue: "text-blue-default";
+    readonly sky: "text-sky-default";
+    readonly mint: "text-mint-default";
+    readonly green: "text-green-default";
+    readonly teal: "text-teal-default";
+    readonly cyan: "text-cyan-default";
+    readonly indigo: "text-indigo-default";
+    readonly purple: "text-purple-default";
+    readonly pink: "text-pink-default";
+    readonly red: "text-red-default";
+    readonly orange: "text-orange-default";
+    readonly yellow: "text-yellow-default";
+    readonly bronze: "text-bronze-default";
+    readonly gray: "text-gray-default";
+};
+declare const styleClasses: {
+    readonly soft: (color: string) => string;
+    readonly solid: (color: string) => string;
+    readonly surface: (color: string) => string;
+};
+declare const badgeVariants: (props?: ({
+    color?: "blue" | "sky" | "mint" | "green" | "teal" | "cyan" | "indigo" | "purple" | "pink" | "red" | "orange" | "yellow" | "bronze" | "gray" | null | undefined;
+    style?: "soft" | "solid" | "surface" | null | undefined;
+    shape?: "default" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeColor = keyof typeof baseColors;
+type BadgeStyle = keyof typeof styleClasses;
+type BadgeShape = "default" | "rounded";
+type BadgeProps = React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+    color?: BadgeColor;
+    style?: BadgeStyle;
+    shape?: BadgeShape;
+};
+declare const Badge: ({ className, color, style, shape, asChild, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/button/button-group.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../../components/separator/seperator";
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const ButtonGroup: ({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonGroupText: ({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonGroupSeparator: ({ className, orientation, ...props }: React.ComponentProps<typeof Separator>) => import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/components/button/button.d.ts

@@ -1,8 +1,8 @@
-import { type VariantProps } from "class-variance-authority";
 import type { ComponentPropsWithoutRef } from "react";
+import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | null | undefined;
-    size?: "sm" | "base" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | "destructive" | null | undefined;
+    size?: "xs" | "sm" | "base" | "large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
@@ -10,8 +10,8 @@ export type ButtonProps = ComponentPropsWithoutRef<"button"> & VariantProps<type
     asChild?: boolean;
 };
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | null | undefined;
-    size?: "sm" | "base" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | "destructive" | null | undefined;
+    size?: "xs" | "sm" | "base" | "large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     asChild?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/callout/callout.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const calloutVariants: (props?: ({
+    type?: "destructive" | "gray" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Callout: ({ className, type, ...props }: React.ComponentProps<"div"> & VariantProps<typeof calloutVariants>) => import("react/jsx-runtime").JSX.Element;
+declare const CalloutTitle: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CalloutDescription: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CalloutAction: ({ className, align, ...props }: React.ComponentProps<"div"> & {
+    align?: "start" | "end";
+}) => import("react/jsx-runtime").JSX.Element;
+declare const CalloutIcon: ({ className, custom, ...props }: React.ComponentProps<"svg"> & {
+    custom?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Callout, CalloutTitle, CalloutDescription, CalloutIcon, CalloutAction };

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: ({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: ({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTrigger: ({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogPortal: ({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogClose: ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogOverlay: ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) => import("react/jsx-runtime").JSX.Element;
+type DialogContentSize = "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "5xlarge" | "full-width";
+declare const DialogContent: ({ className, children, showCloseButton, size, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    size?: DialogContentSize;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DialogHeader: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DialogFooter: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogDescription: ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) => import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/field/field-addon.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from "class-variance-authority";
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FieldGroupAddonProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
+declare const FieldGroupAddon: ({ className, align, ...props }: FieldGroupAddonProps) => import("react/jsx-runtime").JSX.Element;
+export { FieldGroupAddon };

package/dist/components/field/field-input.d.ts

@@ -0,0 +1,3 @@
+declare const FieldInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { FieldInput, FieldInputGroup };

package/dist/components/field/field-select.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare const Select: ({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectGroup: ({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectValue: ({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: ({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectLabel: ({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectItem: ({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectSeparator: ({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectScrollUpButton: ({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectScrollDownButton: ({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) => import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/field/field-textarea.d.ts

@@ -0,0 +1,4 @@
+declare const FieldTextarea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    resize?: "none" | "vertical" | "horizontal";
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { FieldTextarea };

package/dist/components/field/field.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Label } from "../../components/label/label";
+type FieldInputRef = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement | null;
+declare const useFieldContext: () => {
+    inputRef: React.RefObject<FieldInputRef>;
+};
+declare const FieldGroup: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const FieldSet: ({ className, ...props }: React.ComponentProps<"fieldset">) => import("react/jsx-runtime").JSX.Element;
+type FieldProps = React.ComponentProps<"div"> & {
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const Field: ({ className, children, onClick, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+declare const FieldContent: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const FieldLabel: ({ className, ...props }: React.ComponentProps<typeof Label>) => import("react/jsx-runtime").JSX.Element;
+type FieldLabelContentProps = React.ComponentProps<"div"> & {
+    showOnHover?: boolean;
+};
+declare const FieldLabelContent: ({ className, showOnHover, ...props }: FieldLabelContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const FieldDescription: ({ className, ...props }: React.ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+declare const FieldError: ({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldSet, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLabelContent, useFieldContext, };

package/dist/components/label/label.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { VariantProps } from "class-variance-authority";
+declare const labelVariants: (props?: ({
+    variant?: "primary" | "destructive" | null | undefined;
+    size?: "sm" | "base" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>;
+declare const Label: ({ variant, size, className, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export { Label };

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const PopoverPortal: ({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Portal>) => import("react/jsx-runtime").JSX.Element;
+declare const Popover: ({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverTrigger: ({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverContent: ({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverAnchor: ({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) => import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal };

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+declare const RadioGroup: ({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroupItem: ({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) => import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/components/separator/seperator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: ({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { VariantProps } from "class-variance-authority";
+declare const switchVariants: (props?: ({
+    variant?: "primary" | "destructive" | null | undefined;
+    size?: "sm" | "base" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    variant?: VariantProps<typeof switchVariants>["variant"];
+    size?: VariantProps<typeof switchVariants>["size"];
+};
+declare function Switch({ variant, size, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipTrigger: ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+type TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    hideArrow?: boolean;
+};
+declare const TooltipContent: ({ className, sideOffset, hideArrow, children, ...props }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };