abrplus-ui-kit 0.2.9

package/README.md

@@ -0,0 +1,159 @@
+# Abrplus UI Kit
+
+**Version:** 0.1.3
+
+A modular React UI component library with Tailwind support, designed for building modern and consistent interfaces. Supports both **Tailwind v3 and v4** setups and provides separate global and theme CSS for maximum flexibility.
+
+---
+
+## Features
+
+- Fully typed with TypeScript.
+- Ready-to-use **atoms, molecules, and Ant Design overrides**.
+- Tailwind-compatible styles with auto-generated colors and fonts.
+- Separate **theme CSS** for Tailwind v4 consumers.
+- Built with **Vite**, **Storybook**, and **Vitest** for fast development and testing.
+- Optional peer dependencies for integration flexibility.
+
+---
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add github:1stdevelopment/abrplus-ui-kit
+
+# Using npm
+npm install github:1stdevelopment/abrplus-ui-kit
+
+# Using yarn
+yarn add github:1stdevelopment/abrplus-ui-kit
+```
+
+### Peer Dependencies
+
+Ensure your project includes compatible peer dependencies:
+
+- `react >= 18`
+- `react-dom >= 18`
+- `antd ^5` (optional)
+- `i18next ^23` (optional)
+- `react-i18next ^13` (optional)
+- `react-router-dom ^6` (optional)
+- `tailwind-merge ^1.14` (optional)
+- `starkstring` (optional)
+
+---
+
+## Usage
+
+### 1. Import components
+
+```tsx
+import { Button } from 'abrplus-ui-kit/atoms';
+import { Card } from 'abrplus-ui-kit/molecules';
+import React from 'react';
+```
+
+### 2. Import styles
+
+For **global CSS**:
+
+```ts
+import 'abrplus-ui-kit/style.css';
+```
+
+For **Tailwind v4 theme CSS**:
+
+```ts
+import 'abrplus-ui-kit/theme.css';
+```
+
+### 3. Ant Design overrides (optional)
+
+```ts
+import 'abrplus-ui-kit/ant-overrides';
+```
+
+---
+
+## Available Modules
+
+- **Atoms:** `abrplus-ui-kit/atoms`
+- **Molecules:** `abrplus-ui-kit/molecules`
+- **Ant Design Overrides:** `abrplus-ui-kit/ant-overrides`
+- **Global CSS:** `abrplus-ui-kit/style.css`
+- **Theme CSS:** `abrplus-ui-kit/theme.css` (Tailwind v4 `@theme`)
+
+---
+
+## Scripts
+
+| Command                | Description                                   |
+| ---------------------- | --------------------------------------------- |
+| `pnpm build`           | Lints, formats, tests, and builds the library |
+| `pnpm lint`            | Run ESLint across the project                 |
+| `pnpm format`          | Format code with Prettier                     |
+| `pnpm test`            | Run all Vitest tests                          |
+| `pnpm test:watch`      | Watch mode for tests                          |
+| `pnpm test:ui`         | Run Vitest in UI mode                         |
+| `pnpm test:coverage`   | Generate coverage report                      |
+| `pnpm storybook`       | Run Storybook in dev mode                     |
+| `pnpm build-storybook` | Build Storybook static site                   |
+| `pnpm gen:icon`        | Generate icon components                      |
+| `pnpm gen:tw`          | Generate Tailwind theme CSS                   |
+
+---
+
+## Development
+
+1. Clone the repository and install dependencies:
+
+```bash
+pnpm install
+```
+
+2. Run Storybook to preview components:
+
+```bash
+pnpm storybook
+```
+
+3. Build the library for local testing:
+
+```bash
+pnpm build
+```
+
+4. Run tests and coverage:
+
+```bash
+pnpm test
+pnpm test:coverage
+```
+
+---
+
+## Tailwind Integration
+
+- The library ships **two CSS files** for Tailwind:
+
+1. `style.css` → global classes & default Tailwind utilities
+2. `theme.css` → `@theme` variables for Tailwind v4
+
+**Usage in Tailwind v4 app:**
+
+```css
+@import 'abrplus-ui-kit/style.css';
+@import 'abrplus-ui-kit/theme.css';
+```
+
+- Your Tailwind config can now use the `@theme` variables for consistent theming.
+
+---
+
+## Contributing
+
+- Follow ESLint and Prettier rules (`pnpm lint` / `pnpm format`)
+- Add tests for new components using Vitest
+- Use Storybook to visualize and document UI changes

package/dist/antOverrides.cjs.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const antd = require("antd");
+const index = require("./index-CCvWoynu.cjs");
+const index$1 = require("./index-BnnlMHRY.cjs");
+const index$2 = require("./index-2Q5IExhU.cjs");
+const index$3 = require("./index-CW9vyiq6.cjs");
+const tailwindMerge = require("tailwind-merge");
+const colors = require("./colors-TPZkyKI4.cjs");
+const React = require("react");
+const Alert = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Alert, { ...props });
+};
+const Menu = ({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(antd.Menu, { ...props }) });
+};
+Menu.Item = antd.Menu.Item;
+Menu.ItemGroup = antd.Menu.ItemGroup;
+const PaginationThemeConfig = {
+  components: {
+    Pagination: {}
+  }
+};
+const Pagination = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme: PaginationThemeConfig, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Pagination, { ...props, className: tailwindMerge.twMerge("bg-light-7", className) }) });
+};
+const Progress = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Progress,
+    {
+      strokeColor: colors.colors.secondary,
+      ...props,
+      className: tailwindMerge.twMerge("bg-light-7", className)
+    }
+  );
+};
+const SegmentedSwitch = ({ style, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Segmented,
+    {
+      ...rest,
+      style: {
+        padding: 2,
+        ...style
+      }
+    }
+  ) });
+};
+const Skeleton = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Skeleton, { ...props });
+};
+Skeleton.Avatar = antd.Skeleton.Avatar;
+Skeleton.Button = antd.Skeleton.Button;
+Skeleton.Image = antd.Skeleton.Image;
+Skeleton.Input = antd.Skeleton.Input;
+Skeleton.Node = antd.Skeleton.Node;
+const Slider = ({ size = 2, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { direction: "ltr", theme: { components: { Slider: { railSize: size } } }, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Slider, { ...rest }) });
+};
+const stepTheme = {
+  components: {
+    Steps: {
+      iconFontSize: 18,
+      iconTop: 1
+    }
+  }
+};
+const Steps = ({ colorPrimary, rootClassName, ...props }) => {
+  const mergedTheme = {
+    ...stepTheme,
+    token: {
+      ...stepTheme.token || {},
+      ...colorPrimary ? { colorPrimary } : {}
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme: mergedTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Steps,
+    {
+      rootClassName: tailwindMerge.twMerge("[&_.ant-steps-item-finish_.ant-steps-icon]:top-1", rootClassName),
+      ...props
+    }
+  ) });
+};
+Steps.Step = antd.Steps.Step;
+const SwitchThemeConfig = {
+  components: {
+    Switch: {
+      handleBg: colors.colors.light_1,
+      colorPrimaryHover: colors.colors.primary,
+      colorTextTertiary: colors.colors.light_1,
+      trackMinWidthSM: 26
+    }
+  }
+};
+const Switch = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme: SwitchThemeConfig, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Switch, { ref, ...props, className: tailwindMerge.twMerge("bg-light-7", className) }) });
+});
+const timeThemeConfig = {
+  components: {
+    Timeline: {
+      tailColor: colors.colors.light_7,
+      tailWidth: 4
+    }
+  }
+};
+const Timeline = ({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { theme: timeThemeConfig, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Timeline, { ...props }) });
+};
+exports.Avatar = index.Avatar;
+exports.Breadcrumb = index$1.Breadcrumb;
+exports.Dropdown = index$2.Dropdown;
+exports.Image = index$2.Image;
+exports.InfiniteLoader = index$2.InfiniteLoader;
+exports.Flex = index$3.Flex;
+exports.Loading = index$3.Loading;
+exports.Text = index$3.Text;
+exports.Alert = Alert;
+exports.Menu = Menu;
+exports.Pagination = Pagination;
+exports.Progress = Progress;
+exports.SegmentedSwitch = SegmentedSwitch;
+exports.Skeleton = Skeleton;
+exports.Slider = Slider;
+exports.Steps = Steps;
+exports.Switch = Switch;
+exports.Timeline = Timeline;

package/dist/antOverrides.es.js

@@ -0,0 +1,127 @@
+import { jsx } from "react/jsx-runtime";
+import { Alert as Alert$1, ConfigProvider, Menu as Menu$1, Pagination as Pagination$1, Progress as Progress$1, Segmented, Skeleton as Skeleton$1, Slider as Slider$1, Steps as Steps$1, Switch as Switch$1, Timeline as Timeline$1 } from "antd";
+import { A } from "./index-DLUd_0LP.js";
+import { B } from "./index-BzahloOb.js";
+import { D, a, I } from "./index-DCojd1ld.js";
+import { F, L, T } from "./index-C24zbKLS.js";
+import { twMerge } from "tailwind-merge";
+import { c as colors } from "./colors-CztsZ6e_.js";
+import { forwardRef } from "react";
+const Alert = (props) => {
+  return /* @__PURE__ */ jsx(Alert$1, { ...props });
+};
+const Menu = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { children: /* @__PURE__ */ jsx(Menu$1, { ...props }) });
+};
+Menu.Item = Menu$1.Item;
+Menu.ItemGroup = Menu$1.ItemGroup;
+const PaginationThemeConfig = {
+  components: {
+    Pagination: {}
+  }
+};
+const Pagination = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { theme: PaginationThemeConfig, children: /* @__PURE__ */ jsx(Pagination$1, { ...props, className: twMerge("bg-light-7", className) }) });
+};
+const Progress = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Progress$1,
+    {
+      strokeColor: colors.secondary,
+      ...props,
+      className: twMerge("bg-light-7", className)
+    }
+  );
+};
+const SegmentedSwitch = ({ style, ...rest }) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { children: /* @__PURE__ */ jsx(
+    Segmented,
+    {
+      ...rest,
+      style: {
+        padding: 2,
+        ...style
+      }
+    }
+  ) });
+};
+const Skeleton = (props) => {
+  return /* @__PURE__ */ jsx(Skeleton$1, { ...props });
+};
+Skeleton.Avatar = Skeleton$1.Avatar;
+Skeleton.Button = Skeleton$1.Button;
+Skeleton.Image = Skeleton$1.Image;
+Skeleton.Input = Skeleton$1.Input;
+Skeleton.Node = Skeleton$1.Node;
+const Slider = ({ size = 2, ...rest }) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { direction: "ltr", theme: { components: { Slider: { railSize: size } } }, children: /* @__PURE__ */ jsx(Slider$1, { ...rest }) });
+};
+const stepTheme = {
+  components: {
+    Steps: {
+      iconFontSize: 18,
+      iconTop: 1
+    }
+  }
+};
+const Steps = ({ colorPrimary, rootClassName, ...props }) => {
+  const mergedTheme = {
+    ...stepTheme,
+    token: {
+      ...stepTheme.token || {},
+      ...colorPrimary ? { colorPrimary } : {}
+    }
+  };
+  return /* @__PURE__ */ jsx(ConfigProvider, { theme: mergedTheme, children: /* @__PURE__ */ jsx(
+    Steps$1,
+    {
+      rootClassName: twMerge("[&_.ant-steps-item-finish_.ant-steps-icon]:top-1", rootClassName),
+      ...props
+    }
+  ) });
+};
+Steps.Step = Steps$1.Step;
+const SwitchThemeConfig = {
+  components: {
+    Switch: {
+      handleBg: colors.light_1,
+      colorPrimaryHover: colors.primary,
+      colorTextTertiary: colors.light_1,
+      trackMinWidthSM: 26
+    }
+  }
+};
+const Switch = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { theme: SwitchThemeConfig, children: /* @__PURE__ */ jsx(Switch$1, { ref, ...props, className: twMerge("bg-light-7", className) }) });
+});
+const timeThemeConfig = {
+  components: {
+    Timeline: {
+      tailColor: colors.light_7,
+      tailWidth: 4
+    }
+  }
+};
+const Timeline = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { theme: timeThemeConfig, children: /* @__PURE__ */ jsx(Timeline$1, { ...props }) });
+};
+export {
+  Alert,
+  A as Avatar,
+  B as Breadcrumb,
+  D as Dropdown,
+  F as Flex,
+  a as Image,
+  I as InfiniteLoader,
+  L as Loading,
+  Menu,
+  Pagination,
+  Progress,
+  SegmentedSwitch,
+  Skeleton,
+  Slider,
+  Steps,
+  Switch,
+  T as Text,
+  Timeline
+};