@epilot/volt-ui 1.0.0-alpha.16 → 1.0.0-alpha.18

package/README.md

@@ -1,50 +1,47 @@
-# React + TypeScript + Vite
+# Volt UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+**@epilot/volt-ui** is a tree-shakeable design system library for React applications.
 
-Currently, two official plugins are available:
+## Stack
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [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
 
-## Expanding the ESLint configuration
+> **Note**: We prefix the CSS classes and variables with `volt-ui-` to avoid conflicts with the application styles.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Installation
 
-- Configure the top-level `parserOptions` property like this:
+Install dependencies via [bun](https://bun.com/docs/installation).
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```bash
+bun install
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from "eslint-plugin-react"
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: "18.3" } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs["jsx-runtime"].rules,
-  },
-})
+## Development
+
+To run the development, documentation server and watch for changes, run:
+
+```bash
+bun run dev:watch
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+## Build
+
+```bash
+bun run build
+```
+
+> **Note**: This will generate the `dist` folder with the compiled code.
+
+## Release
+
+To release a new version, run:
+
+```bash
+npm run publish
 ```

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.d.ts

@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef } from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "destructive" | null | undefined;
-    size?: "sm" | "base" | "large" | "icon" | 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"];
@@ -11,7 +11,7 @@ export type ButtonProps = ComponentPropsWithoutRef<"button"> & VariantProps<type
 };
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "destructive" | null | undefined;
-    size?: "sm" | "base" | "large" | "icon" | 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.d.ts

@@ -13,10 +13,14 @@ type FieldProps = React.ComponentProps<"div"> & {
 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, useFieldContext, };
+export { Field, FieldSet, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLabelContent, useFieldContext, };

package/dist/components/field-select/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: ({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+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/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 };