@itilite/lumina-ui 1.0.1 → 1.1.0

package/README.md

@@ -22,6 +22,43 @@ npm install react antd
 
 ## Usage
 
+### Prerequisites
+
+This component library requires Tailwind CSS to be set up in your consuming application. The components use Tailwind utility classes and will not be styled without it.
+
+#### Setting up Tailwind CSS in your app
+
+1. Install Tailwind CSS:
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init
+```
+
+2. Configure Tailwind to scan your app (you don't need to scan the component library):
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // No need to scan node_modules - component utilities are pre-compiled
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+3. Add Tailwind directives to your main CSS file:
+```css
+/* app.css or index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+**Important:** The component library includes only the Tailwind utilities it uses. Your app must provide the base/reset styles via `@tailwind base`.
+
 ### Importing Components
 
 You can import components individually (recommended for tree-shaking):
@@ -29,21 +66,20 @@ You can import components individually (recommended for tree-shaking):
 ```tsx
 import { Button } from '@itilite/lumina-ui/button';
 import { Checkbox } from '@itilite/lumina-ui/checkbox';
-import '@itilite/lumina-ui/styles.css';
+import '@itilite/lumina-ui/styles.css'; // Import component styles
 ```
 
 Or import all components from the main entry point:
 
 ```tsx
 import { Button, Checkbox } from '@itilite/lumina-ui';
-import '@itilite/lumina-ui/styles.css';
+import '@itilite/lumina-ui/styles.css'; // Import component styles
 ```
 
 ### Button Component
 
 ```tsx
 import { Button } from '@itilite/lumina-ui/button';
-import '@itilite/lumina-ui/styles.css';
 
 function App() {
   return (
@@ -58,7 +94,6 @@ function App() {
 
 ```tsx
 import { Checkbox } from '@itilite/lumina-ui/checkbox';
-import '@itilite/lumina-ui/styles.css';
 
 function App() {
   return (
@@ -69,13 +104,11 @@ function App() {
 }
 ```
 
-## Styling
+## Requirements
 
-The package exports a `styles.css` file that includes all component styles. Import it in your application:
-
-```tsx
-import '@itilite/lumina-ui/styles.css';
-```
+- **Tailwind CSS**: This library requires Tailwind CSS to be configured in your consuming application
+- **React**: 18+
+- **Ant Design**: 5.13.1
 
 ## Available Components
 

package/dist/Tag.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from 'react';
+
+interface TagProps {
+    type?: "success" | "warning" | "blue" | "processing" | "failed";
+    className?: string;
+    title?: string;
+    icon?: React.ReactElement;
+    size?: string;
+}
+
+declare const Tag: React$1.FC<TagProps>;
+
+export { Tag, Tag as default };

package/dist/Tag.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from 'react';
+
+interface TagProps {
+    type?: "success" | "warning" | "blue" | "processing" | "failed";
+    className?: string;
+    title?: string;
+    icon?: React.ReactElement;
+    size?: string;
+}
+
+declare const Tag: React$1.FC<TagProps>;
+
+export { Tag, Tag as default };

package/dist/Tag.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/atom/Tag/Tag.tsx
+var Tag_exports = {};
+__export(Tag_exports, {
+  Tag: () => Tag,
+  default: () => Tag_default
+});
+module.exports = __toCommonJS(Tag_exports);
+var import_antd = require("antd");
+var import_clsx = __toESM(require("clsx"));
+
+// src/atom/Tag/Tag.module.scss
+var Tag_module_default = { "tag": "Tag-module__tag___PIkhI", "small": "Tag-module__small___nG5XQ", "success": "Tag-module__success___99fad", "blue": "Tag-module__blue___Zky2Z", "warning": "Tag-module__warning___KXsly", "processing": "Tag-module__processing___OssXC", "bookingConfirmed": "Tag-module__bookingConfirmed___potR4", "bookingRescheduled": "Tag-module__bookingRescheduled___ynrwI", "bookingRescheduledPending": "Tag-module__bookingRescheduledPending___K3GqS", "failed": "Tag-module__failed___dvpyQ", "bookingPending": "Tag-module__bookingPending___64umX" };
+
+// src/atom/Tag/Tag.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tag = (_a) => {
+  var _b = _a, {
+    type = "success",
+    className = "",
+    title = "",
+    icon = null,
+    size = ""
+  } = _b, rest = __objRest(_b, [
+    "type",
+    "className",
+    "title",
+    "icon",
+    "size"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_antd.Tag,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx.default)(
+        Tag_module_default.tag,
+        size === "small" && Tag_module_default.small,
+        Tag_module_default[type],
+        className
+      ),
+      icon
+    }, rest), {
+      children: title
+    })
+  );
+};
+Tag.displayName = "Tag";
+var Tag_default = Tag;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tag
+});

package/dist/Tag.mjs

@@ -0,0 +1,9 @@
+import {
+  Tag,
+  Tag_default
+} from "./chunk-4VZB2KR2.mjs";
+import "./chunk-FWCSY2DS.mjs";
+export {
+  Tag,
+  Tag_default as default
+};

package/dist/atom/Avatar/Avatar.d.mts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface AvatarProps {
+    img?: string;
+    className?: string;
+    name: string;
+    height?: number;
+    width?: number;
+    size?: "small" | "normal";
+}
+
+declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+
+export { Avatar, Avatar as default };

package/dist/atom/Avatar/Avatar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface AvatarProps {
+    img?: string;
+    className?: string;
+    name: string;
+    height?: number;
+    width?: number;
+    size?: "small" | "normal";
+}
+
+declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+
+export { Avatar, Avatar as default };

package/dist/atom/Avatar/Avatar.js

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/atom/Avatar/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Avatar: () => Avatar,
+  default: () => Avatar_default
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var COLOR_MAP = {
+  A: "#6455BF",
+  B: "#C46273",
+  C: "#52A79E",
+  D: "#DF8654",
+  E: "#B8639F",
+  F: "#6455BF",
+  G: "#C46273",
+  H: "#52A79E",
+  I: "#DF8654",
+  J: "#B8639F",
+  K: "#6455BF",
+  L: "#C46273",
+  M: "#52A79E",
+  N: "#DF8654",
+  O: "#B8639F",
+  P: "#6455BF",
+  Q: "#C46273",
+  R: "#52A79E",
+  S: "#DF8654",
+  T: "#B8639F",
+  U: "#6455BF",
+  V: "#C46273",
+  W: "#52A79E",
+  X: "#DF8654",
+  Y: "#B8639F",
+  Z: "#6455BF",
+  0: "#6455BF",
+  1: "#C46273",
+  6: "#C46273",
+  2: "#52A79E",
+  7: "#52A79E",
+  3: "#DF8654",
+  8: "#DF8654",
+  4: "#B8639F",
+  9: "#B8639F"
+};
+function Avatar({
+  img,
+  className,
+  name,
+  height = 28,
+  width = 28,
+  size = "normal"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { height, width },
+      className: "tw-rounded-full tw-flex tw-items-center",
+      children: !img && name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            backgroundColor: COLOR_MAP[name[0]],
+            height,
+            width
+          },
+          className: (0, import_clsx.default)(
+            { "tw-text-font-size-10": size === "small" },
+            `tw-text-white tw-font-medium tw-rounded-full tw-flex tw-items-center tw-justify-center`,
+            className
+          ),
+          children: name[0]
+        }
+      ) : img ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: img,
+          style: { height, width },
+          alt: name,
+          className: (0, import_clsx.default)("tw-rounded-full tw-object-cover", className)
+        }
+      ) : null
+    }
+  );
+}
+Avatar.displayName = "Avatar";
+var Avatar_default = Avatar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/atom/Avatar/Avatar.mjs

@@ -0,0 +1,9 @@
+import {
+  Avatar,
+  Avatar_default
+} from "../../chunk-X76GNSBB.mjs";
+import "../../chunk-FWCSY2DS.mjs";
+export {
+  Avatar,
+  Avatar_default as default
+};

package/dist/atom/Button/Button.d.mts

@@ -0,0 +1,25 @@
+import * as React$1 from 'react';
+
+interface ButtonProps {
+    type?: "primary" | "secondary" | "critical" | undefined;
+    variant?: "subtle" | "text" | "link";
+    size?: "large" | "small";
+    shape?: "circle" | "default" | "round";
+    icon?: React.ReactNode;
+    iconPosition?: "start" | "end";
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    onHoverUnderline?: boolean;
+    analytics?: Record<string, unknown>;
+}
+
+declare function Button(props: ButtonProps): React$1.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, Button as default };

package/dist/atom/Button/Button.d.ts

@@ -0,0 +1,25 @@
+import * as React$1 from 'react';
+
+interface ButtonProps {
+    type?: "primary" | "secondary" | "critical" | undefined;
+    variant?: "subtle" | "text" | "link";
+    size?: "large" | "small";
+    shape?: "circle" | "default" | "round";
+    icon?: React.ReactNode;
+    iconPosition?: "start" | "end";
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    onHoverUnderline?: boolean;
+    analytics?: Record<string, unknown>;
+}
+
+declare function Button(props: ButtonProps): React$1.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, Button as default };

package/dist/atom/Button/Button.js

@@ -0,0 +1,111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/atom/Button/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button,
+  default: () => Button_default
+});
+module.exports = __toCommonJS(Button_exports);
+var import_antd = require("antd");
+var import_clsx = __toESM(require("clsx"));
+
+// src/atom/Button/Button.module.scss
+var Button_module_default = { "button": "Button-module__button___cLCyl", "size_large": "Button-module__size_large___S-mbU", "shape_circle": "Button-module__shape_circle___sPUS5", "size_normal": "Button-module__size_normal___qJUMj", "size_small": "Button-module__size_small___IUeei", "type_primary": "Button-module__type_primary___Tauz-", "variant_subtle": "Button-module__variant_subtle___BMbbd", "variant_text": "Button-module__variant_text___Pc5Ia", "variant_link": "Button-module__variant_link___Cj1O9", "type_secondary": "Button-module__type_secondary___CLmrA", "type_critical": "Button-module__type_critical___6ILOp", "onHoverUnderline": "Button-module__onHoverUnderline___LOfXo" };
+
+// src/atom/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(props) {
+  const {
+    type = "primary",
+    variant = "default",
+    size = "normal",
+    shape = "default",
+    className = "",
+    icon = null,
+    children,
+    onClick,
+    href = "",
+    disabled = false,
+    loading = false,
+    onHoverUnderline = false
+  } = props;
+  const buttonMap = {
+    default: "primary",
+    subtle: "default",
+    text: "text",
+    link: "link"
+  };
+  const sizeMap = {
+    small: "small",
+    normal: "middle",
+    // Map "default" to "middle"
+    large: "large"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_antd.Button,
+    {
+      className: (0, import_clsx.default)(
+        Button_module_default.button,
+        Button_module_default[`size_${size}`],
+        Button_module_default[`variant_${variant}`],
+        Button_module_default[`shape_${shape}`],
+        Button_module_default[`type_${type}`],
+        `size_${size}`,
+        `variant_${variant}`,
+        `shape_${shape}`,
+        `type_${type}`,
+        className,
+        {
+          "tw-cursor-not-allowed": disabled,
+          "tw-opacity-40": disabled
+        },
+        disabled && Button_module_default.disabled,
+        onHoverUnderline && Button_module_default.onHoverUnderline
+      ),
+      "data-testid": "lumina-button",
+      disabled,
+      href: href || void 0,
+      icon,
+      loading,
+      onClick,
+      shape,
+      size: sizeMap[size],
+      type: buttonMap[variant],
+      children
+    }
+  );
+}
+Button.displayName = "Button";
+var Button_default = Button;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/atom/Button/Button.mjs

@@ -0,0 +1,9 @@
+import {
+  Button,
+  Button_default
+} from "../../chunk-HISCHZ5H.mjs";
+import "../../chunk-FWCSY2DS.mjs";
+export {
+  Button,
+  Button_default as default
+};

package/dist/atom/Checkbox/Checkbox.d.mts

@@ -0,0 +1,20 @@
+import * as React$1 from 'react';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+
+interface CheckboxProps {
+    checked?: boolean;
+    className?: string;
+    onChange?: (e: CheckboxChangeEvent) => void;
+    children?: React.ReactNode;
+    size?: "large" | "small" | "medium";
+    variant?: "normal" | "emphasized";
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+
+declare function Checkbox(props: CheckboxProps): React$1.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+export { Checkbox, Checkbox as default };

package/dist/atom/Checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from 'react';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+
+interface CheckboxProps {
+    checked?: boolean;
+    className?: string;
+    onChange?: (e: CheckboxChangeEvent) => void;
+    children?: React.ReactNode;
+    size?: "large" | "small" | "medium";
+    variant?: "normal" | "emphasized";
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+
+declare function Checkbox(props: CheckboxProps): React$1.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+export { Checkbox, Checkbox as default };