orizon 0.2.1 → 0.2.2

package/README.md

@@ -1,6 +1,10 @@
 # Orizon
 
-Ant Design API on shadcn/ui primitives. 68 React components with full TypeScript support.
+Ant Design API on shadcn/ui primitives. 68 production-ready React components with full TypeScript support, built with Tailwind CSS v4.
+
+> **Note:** I'm a junior developer and started this as a side project to learn React component architecture. Currently Orizon works with **Vite** only. Support for Next.js and other frameworks may come in the future.
+
+[Documentation](https://ui-orizon.netlify.app/) | [GitHub](https://github.com/web-vikas/orizon)
 
 ## Install
 
@@ -11,7 +15,7 @@ npm install orizon
 **Peer dependencies** — your project needs:
 
 ```bash
-npm install react react-dom tailwindcss
+npm install react react-dom tailwindcss @tailwindcss/vite
 ```
 
 For the **Form** component (optional):
@@ -20,9 +24,19 @@ For the **Form** component (optional):
 npm install react-hook-form @hookform/resolvers zod
 ```
 
-## Setup
+## Setup (Vite)
+
+1. Add the Tailwind plugin to `vite.config.ts`:
+
+```ts
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+```
 
-Add these 3 lines to your app's CSS file:
+2. Add these 3 lines to your app's CSS file:
 
 ```css
 @import "tailwindcss";
@@ -77,7 +91,17 @@ notification.open({ message: "Done" });
 
 ## Theming
 
-Override CSS variables in your CSS:
+Swap the CSS import to completely change the look of all components:
+
+```css
+/* Default theme */
+@import "orizon/preset.css";
+
+/* Corporate theme — teal primary, large radius */
+@import "orizon/themes/corporate.css";
+```
+
+Or override individual CSS variables:
 
 ```css
 :root {
@@ -86,16 +110,30 @@ Override CSS variables in your CSS:
 }
 ```
 
-Or use the ConfigProvider:
+Or use the ConfigProvider at runtime:
 
 ```tsx
 import { ConfigProvider } from "orizon";
 
-<ConfigProvider theme={{ algorithm: "dark" }}>
+<ConfigProvider theme={{ algorithm: "dark", token: { colorPrimary: "#1890ff" } }}>
   <App />
 </ConfigProvider>
 ```
 
+## CLI
+
+Orizon includes a CLI to help you get started:
+
+```bash
+npx orizon init        # scaffold a new Vite + Orizon project
+npx orizon add button  # show usage info for a component
+npx orizon list        # list all 68 components
+```
+
 ## License
 
 MIT
+
+## Author
+
+[Vikas Patel](https://github.com/web-vikas) — Junior Developer, learning by building.

package/bin/cli.mjs

@@ -3,6 +3,7 @@
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import pc from "picocolors";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const pkg = JSON.parse(
@@ -11,20 +12,47 @@ const pkg = JSON.parse(
 
 const [command] = process.argv.slice(2);
 
-function printHelp() {
-  console.log(`
-  orizon v${pkg.version}
-
-  Usage:
-    npx orizon <command>
-
-  Commands:
-    init        Set up Orizon in your React + Vite project
+function printBanner() {
+  console.log();
+  console.log(
+    pc.cyan(pc.bold("  ⬡ Orizon")) +
+      pc.dim(` v${pkg.version}`) +
+      pc.dim(" — Ant Design API on shadcn/ui primitives"),
+  );
+  console.log(pc.dim("  " + "─".repeat(54)));
+  console.log();
+}
 
-  Options:
-    --version   Show version number
-    --help      Show this help message
-`);
+function printHelp() {
+  printBanner();
+  console.log(
+    `  ${pc.bold("Usage")}`,
+  );
+  console.log(
+    `    ${pc.cyan("$")} npx orizon ${pc.green("<command>")}`,
+  );
+  console.log();
+  console.log(
+    `  ${pc.bold("Commands")}`,
+  );
+  console.log(
+    `    ${pc.green("init")}          Set up Orizon in your React + Vite project`,
+  );
+  console.log();
+  console.log(
+    `  ${pc.bold("Options")}`,
+  );
+  console.log(
+    `    ${pc.yellow("--version")}     Show version number`,
+  );
+  console.log(
+    `    ${pc.yellow("--help")}        Show this help message`,
+  );
+  console.log();
+  console.log(
+    pc.dim("  Docs: https://orizon.dev  |  GitHub: github.com/nicepkg/orizon"),
+  );
+  console.log();
 }
 
 switch (command) {
@@ -36,7 +64,9 @@ switch (command) {
 
   case "--version":
   case "-v":
-    console.log(pkg.version);
+    console.log(
+      pc.cyan(pc.bold("⬡ Orizon")) + " " + pc.bold(pkg.version),
+    );
     break;
 
   case "--help":
@@ -46,7 +76,14 @@ switch (command) {
     break;
 
   default:
-    console.error(`Unknown command: ${command}\n`);
-    printHelp();
+    console.log();
+    console.error(
+      `  ${pc.red("✖")} Unknown command: ${pc.bold(command)}`,
+    );
+    console.log();
+    console.log(
+      `  Run ${pc.cyan("npx orizon --help")} to see available commands.`,
+    );
+    console.log();
     process.exit(1);
 }

package/bin/init.mjs

@@ -204,8 +204,8 @@ export async function init() {
   console.log(
     pc.bold(pc.cyan("  ⬡ Orizon")) + pc.dim(" — project setup wizard"),
   );
+  console.log(pc.dim("  " + "─".repeat(54)));
   console.log();
-  log.divider();
 
   // -----------------------------------------------------------------------
   // Pre-flight: Detect project or scaffold a new one
@@ -613,26 +613,30 @@ export async function init() {
   // Done!
   // =======================================================================
   console.log();
-  log.divider();
+  console.log(pc.dim("  " + "─".repeat(54)));
   console.log();
   console.log(pc.green(pc.bold("  ✓ Orizon setup complete!")));
   console.log();
 
   if (scaffolded) {
-    console.log("  Get started:");
-    console.log(pc.cyan(`    cd ${projectName}`));
-    console.log(pc.cyan("    npm run dev"));
+    console.log(pc.bold("  Get started:"));
+    console.log(`    ${pc.cyan("$")} ${pc.bold(`cd ${projectName}`)}`);
+    console.log(`    ${pc.cyan("$")} ${pc.bold("npm run dev")}`);
     console.log();
   }
 
-  console.log("  Import components:");
+  console.log(pc.bold("  Import components:"));
   console.log(
-    pc.cyan('    import { Button, Form, Input, Select } from "orizon";'),
+    `    ${pc.cyan('import { Button, Form, Input, Select } from')} ${pc.green('"orizon"')}${pc.cyan(";")}`,
   );
   console.log();
-  console.log("  Example with Form + Zod:");
+  console.log(pc.bold("  Example with Form + Zod:"));
   console.log(
-    pc.dim("    const [form] = Form.useForm({ schema: myZodSchema });"),
+    `    ${pc.dim("const [form] = Form.useForm({ schema: myZodSchema });")}`,
+  );
+  console.log();
+  console.log(
+    pc.dim("  Docs: https://orizon.dev  |  68 components ready to use"),
   );
   console.log();
 }

package/dist/components/affix/Affix.d.ts

@@ -1,4 +1,23 @@
 import { AffixProps } from './types';
+/**
+ * @file Affix Component
+ *
+ * Pins its children to the viewport when the scroll position crosses
+ * a configurable offset. Supports both top and bottom pinning, and
+ * a custom scroll container via the `target` prop.
+ *
+ * Key props: `offsetTop`, `offsetBottom`, `target`, `onChange`.
+ *
+ * @example
+ * ```tsx
+ * <Affix offsetTop={80}>
+ *   <nav>Sticky toolbar</nav>
+ * </Affix>
+ * ```
+ *
+ * @see {@link ./types.ts} — prop definitions
+ * @see {@link ./index.ts} — barrel export
+ */
 import * as React from "react";
 declare const Affix: React.FC<AffixProps>;
 export { Affix };

package/dist/components/affix/Affix.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Affix } from './index';
+declare const meta: Meta<typeof Affix>;
+export default meta;
+type Story = StoryObj<typeof Affix>;
+export declare const Playground: Story;
+export declare const OffsetTop: Story;
+export declare const OffsetBottom: Story;
+export declare const OnChange: Story;

package/dist/components/affix/index.d.ts

@@ -1,2 +1,25 @@
+/**
+ * @file Affix — Public Barrel Export
+ *
+ * Re-exports the `<Affix>` component that pins content to the viewport
+ * on scroll.
+ */
+/**
+ * Affix component that pins its children to the viewport when scrolling.
+ *
+ * Supports `offsetTop` / `offsetBottom` for threshold control, a custom
+ * `target` scroll container, and an `onChange` callback.
+ *
+ * @example
+ * ```tsx
+ * <Affix offsetTop={64}>
+ *   <div>I stick 64px from top</div>
+ * </Affix>
+ *
+ * <Affix offsetBottom={20}>
+ *   <button>Floating action</button>
+ * </Affix>
+ * ```
+ */
 export { Affix } from './Affix';
 export type { AffixProps } from './types';

package/dist/components/alert/Alert.d.ts

@@ -1,4 +1,25 @@
 import { AlertProps } from './types';
+/**
+ * @file Alert Component
+ *
+ * Renders a feedback alert banner with semantic colouring for
+ * success, info, warning, and error states. Supports closable
+ * behaviour (with animation), an action slot, custom icons,
+ * and a full-width banner mode.
+ *
+ * Key props: `type`, `message`, `description`, `closable`, `showIcon`,
+ * `banner`, `action`.
+ *
+ * @example
+ * ```tsx
+ * <Alert type="success" message="Saved!" showIcon />
+ * <Alert type="error" message="Failed" description="Details..." closable />
+ * ```
+ *
+ * @see {@link ./types.ts} — prop definitions
+ * @see {@link ./ErrorBoundary.tsx} — error boundary sub-component
+ * @see {@link ./index.ts} — barrel export
+ */
 import * as React from "react";
 declare const InternalAlert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 export { InternalAlert };

package/dist/components/alert/Alert.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './index';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Playground: Story;
+export declare const Types: Story;
+export declare const WithIcon: Story;
+export declare const Closable: Story;
+export declare const Description: Story;
+export declare const Banner: Story;
+export declare const Actions: Story;
+export declare const ErrorBoundaryStory: Story;

package/dist/components/alert/ErrorBoundary.d.ts

@@ -1,4 +1,14 @@
 import { AlertErrorBoundaryProps } from './types';
+/**
+ * @file Alert Error Boundary
+ *
+ * A React class-based error boundary that catches render errors
+ * in its children and displays them as an error `<Alert>`. Used
+ * via `Alert.ErrorBoundary`.
+ *
+ * @see {@link ./Alert.tsx} — main Alert component
+ * @see {@link ./types.ts} — prop definitions
+ */
 import * as React from "react";
 interface ErrorBoundaryState {
     hasError: boolean;

package/dist/components/alert/index.d.ts

@@ -3,6 +3,26 @@ import { AlertErrorBoundary } from './ErrorBoundary';
 type AlertComponent = typeof InternalAlert & {
     ErrorBoundary: typeof AlertErrorBoundary;
 };
+/**
+ * Alert component for feedback messages.
+ *
+ * Supports `type` (success / info / warning / error), `closable`,
+ * `banner` mode, custom `icon`, and an `action` slot.
+ *
+ * Use `Alert.ErrorBoundary` to catch React errors and display
+ * them as an alert.
+ *
+ * @example
+ * ```tsx
+ * <Alert type="success" message="Done!" />
+ * <Alert type="warning" message="Watch out" description="Details here" closable />
+ * <Alert type="info" message="Tip" showIcon banner />
+ *
+ * <Alert.ErrorBoundary message="Oops">
+ *   <SomeComponent />
+ * </Alert.ErrorBoundary>
+ * ```
+ */
 declare const Alert: AlertComponent;
 export { Alert };
 export type { AlertProps, AlertType, AlertClosableConfig, AlertErrorBoundaryProps, } from './types';

package/dist/components/anchor/Anchor.d.ts

@@ -1,4 +1,27 @@
 import { AnchorProps } from './types';
+/**
+ * @file Anchor Component
+ *
+ * A scroll-spy navigation component that highlights the current
+ * section in view and smooth-scrolls to anchor targets on click.
+ * Supports vertical / horizontal layout, nested items, affix
+ * (sticky) positioning, and a sliding active indicator.
+ *
+ * Key props: `items`, `direction`, `affix`, `targetOffset`, `onChange`.
+ *
+ * @example
+ * ```tsx
+ * <Anchor
+ *   items={[
+ *     { key: "1", href: "#section-1", title: "Introduction" },
+ *     { key: "2", href: "#section-2", title: "Usage" },
+ *   ]}
+ * />
+ * ```
+ *
+ * @see {@link ./types.ts} — prop definitions
+ * @see {@link ./index.ts} — barrel export
+ */
 import * as React from "react";
 declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & React.RefAttributes<HTMLDivElement>>;
 export { Anchor };

package/dist/components/anchor/Anchor.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Anchor } from './index';
+declare const meta: Meta<typeof Anchor>;
+export default meta;
+type Story = StoryObj<typeof Anchor>;
+export declare const Playground: Story;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+export declare const NestedItems: Story;

package/dist/components/anchor/index.d.ts

@@ -1,2 +1,26 @@
+/**
+ * @file Anchor — Public Barrel Export
+ *
+ * Re-exports the `<Anchor>` scroll-spy navigation component.
+ */
+/**
+ * Anchor component for scroll-spy navigation.
+ *
+ * Highlights the active section as the user scrolls and smooth-scrolls
+ * to targets on click. Supports `direction` (vertical / horizontal),
+ * `affix` mode, nested `items`, and custom `getContainer`.
+ *
+ * @example
+ * ```tsx
+ * <Anchor
+ *   items={[
+ *     { key: "intro", href: "#intro", title: "Introduction" },
+ *     { key: "api", href: "#api", title: "API" },
+ *   ]}
+ *   direction="vertical"
+ *   offsetTop={80}
+ * />
+ * ```
+ */
 export { Anchor } from './Anchor';
 export type { AnchorProps, AnchorItem, AnchorDirection } from './types';

package/dist/components/app/App.d.ts

@@ -2,6 +2,31 @@ import { MessageAPI } from '../message/types';
 import { NotificationAPI } from '../notification/types';
 import { ModalHookAPI } from '../modal/types';
 import { AppProps } from './types';
+/**
+ * @file App Component
+ *
+ * Top-level provider that makes imperative `message`, `notification`,
+ * and `modal` APIs available via `App.useApp()`. Wrap your application
+ * (or a subtree) with `<App>` and call `const { message } = App.useApp()`
+ * to show feedback without prop-drilling.
+ *
+ * Key props: `children`, `component`, `className`, `style`.
+ *
+ * @example
+ * ```tsx
+ * <App>
+ *   <MyPage />
+ * </App>
+ *
+ * function MyPage() {
+ *   const { message } = App.useApp();
+ *   return <button onClick={() => message.success("Saved!")}>Save</button>;
+ * }
+ * ```
+ *
+ * @see {@link ./types.ts} — prop definitions
+ * @see {@link ./index.ts} — barrel export
+ */
 import * as React from "react";
 interface AppContextValue {
     message: MessageAPI;

package/dist/components/app/App.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { App } from './index';
+declare const meta: Meta<typeof App>;
+export default meta;
+type Story = StoryObj<typeof App>;
+export declare const Playground: Story;
+export declare const CustomComponent: Story;
+export declare const NoWrapper: Story;

package/dist/components/app/index.d.ts

@@ -2,6 +2,24 @@ import { InternalApp, useApp } from './App';
 type AppComponent = typeof InternalApp & {
     useApp: typeof useApp;
 };
+/**
+ * App provider component for imperative feedback APIs.
+ *
+ * Wrap your application with `<App>` to gain access to
+ * `message`, `notification`, and `modal` via the `App.useApp()` hook.
+ *
+ * @example
+ * ```tsx
+ * <App>
+ *   <MyPage />
+ * </App>
+ *
+ * function MyPage() {
+ *   const { message, notification, modal } = App.useApp();
+ *   return <button onClick={() => message.info("Hello!")}>Greet</button>;
+ * }
+ * ```
+ */
 declare const App: AppComponent;
 export { App };
 export type { AppProps } from './types';

package/dist/components/auto-complete/AutoComplete.d.ts

@@ -1,4 +1,26 @@
 import { AutoCompleteProps } from './types';
+/**
+ * @file AutoComplete Component
+ *
+ * An input field with a filterable dropdown suggestion list.
+ * Supports keyboard navigation, controlled / uncontrolled value,
+ * custom filter functions, backfill, allow-clear, and three
+ * visual variants (outlined, borderless, filled).
+ *
+ * Key props: `options`, `value`, `onChange`, `onSelect`, `onSearch`,
+ * `filterOption`, `size`, `status`, `variant`, `allowClear`.
+ *
+ * @example
+ * ```tsx
+ * <AutoComplete
+ *   options={[{ value: "React" }, { value: "Vue" }, { value: "Angular" }]}
+ *   placeholder="Search frameworks"
+ * />
+ * ```
+ *
+ * @see {@link ./types.ts} — prop definitions
+ * @see {@link ./index.ts} — barrel export
+ */
 import * as React from "react";
 declare const InternalAutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLDivElement>>;
 export { InternalAutoComplete };

package/dist/components/auto-complete/AutoComplete.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AutoComplete } from './index';
+declare const meta: Meta<typeof AutoComplete>;
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const Status: Story;
+export declare const AllowClear: Story;
+export declare const Disabled: Story;
+export declare const CustomFilter: Story;

package/dist/components/auto-complete/index.d.ts

@@ -1,3 +1,25 @@
+/**
+ * @file AutoComplete — Public Barrel Export
+ *
+ * Re-exports the `<AutoComplete>` input component with dropdown
+ * suggestions.
+ */
+/**
+ * AutoComplete input with filterable dropdown suggestions.
+ *
+ * Supports `options`, controlled / uncontrolled `value`, custom
+ * `filterOption`, `allowClear`, `size`, `status`, and `variant`.
+ *
+ * @example
+ * ```tsx
+ * <AutoComplete
+ *   options={[{ value: "React" }, { value: "Vue" }]}
+ *   placeholder="Search..."
+ *   onSelect={(val) => console.log(val)}
+ * />
+ * <AutoComplete size="large" variant="filled" allowClear />
+ * ```
+ */
 declare const AutoComplete: import('react').ForwardRefExoticComponent<import('./types').AutoCompleteProps & import('react').RefAttributes<HTMLDivElement>>;
 export { AutoComplete };
 export type { AutoCompleteProps, AutoCompleteOption, AutoCompleteSize, AutoCompleteStatus, AutoCompleteVariant, } from './types';

package/dist/components/avatar/Avatar.d.ts

@@ -1,4 +1,28 @@
 import { AvatarProps, AvatarGroupProps } from './types';
+/**
+ * @file Avatar Component
+ *
+ * Renders a user avatar as an image, icon, or auto-scaled text
+ * initials. Supports circle / square shapes, three preset sizes
+ * (plus custom numeric), and grouped display via `Avatar.Group`.
+ *
+ * Key props: `src`, `size`, `shape`, `icon`, `alt`, `gap`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/user.jpg" alt="Jane" />
+ * <Avatar icon={<UserIcon />} shape="square" size="large" />
+ * <Avatar.Group max={{ count: 3 }}>
+ *   <Avatar src="/a.jpg" />
+ *   <Avatar src="/b.jpg" />
+ *   <Avatar src="/c.jpg" />
+ *   <Avatar src="/d.jpg" />
+ * </Avatar.Group>
+ * ```
+ *
+ * @see {@link ./types.ts} — prop definitions
+ * @see {@link ./index.ts} — barrel export
+ */
 import * as React from "react";
 declare const InternalAvatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 declare const InternalAvatarGroup: React.FC<AvatarGroupProps>;

package/dist/components/avatar/Avatar.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './index';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const Shapes: Story;
+export declare const Fallbacks: Story;
+export declare const Group: Story;

package/dist/components/avatar/index.d.ts

@@ -2,6 +2,27 @@ import { InternalAvatar, InternalAvatarGroup } from './Avatar';
 type AvatarComponent = typeof InternalAvatar & {
     Group: typeof InternalAvatarGroup;
 };
+/**
+ * Avatar component for user profile images, icons, or text initials.
+ *
+ * Supports `src` image, `icon` fallback, text `children` with
+ * auto-scaling, `shape` (circle / square), and `size`.
+ *
+ * Use `Avatar.Group` to display a stacked group with overflow count.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/photo.jpg" alt="User" />
+ * <Avatar shape="square" size={48}>AB</Avatar>
+ *
+ * <Avatar.Group max={{ count: 3 }}>
+ *   <Avatar src="/a.jpg" />
+ *   <Avatar src="/b.jpg" />
+ *   <Avatar src="/c.jpg" />
+ *   <Avatar src="/d.jpg" />
+ * </Avatar.Group>
+ * ```
+ */
 declare const Avatar: AvatarComponent;
 export { Avatar };
 export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape, AvatarGroupMaxConfig } from './types';