@kopexa/chip 0.0.0-canary-20250722083945

package/README.md

@@ -0,0 +1,24 @@
+# @kopexa/chip
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @kopexa/chip
+# or
+npm i @kopexa/chip
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).

package/dist/chip.d.mts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SlotsToClasses, ChipSlots, ChipVariantProps } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+
+type BaseProps = {
+    /**
+     * Element to be rendered in the left side of the chip.
+     * this props overrides the `avatar` prop.
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Element to be rendered in the right side of the chip.
+     * if you pass this prop and the `onClose` prop, the passed element
+     * will have the close button props and it will be rendered instead of the
+     * default close button.
+     */
+    endContent?: React.ReactNode;
+    classNames?: SlotsToClasses<ChipSlots>;
+    /**
+     * A Status text to be displayed in the chip.
+     * This is usually used to display a status like "active", "inactive", etc.
+     */
+    status?: React.ReactNode;
+    /**
+     * Callback fired when the chip is closed.
+     */
+    onClose?: () => void;
+};
+type ChipProps = ComponentProps<"div"> & BaseProps & ChipVariantProps;
+declare const Chip: (props: ChipProps) => react_jsx_runtime.JSX.Element;
+
+export { Chip, type ChipProps };

package/dist/chip.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SlotsToClasses, ChipSlots, ChipVariantProps } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+
+type BaseProps = {
+    /**
+     * Element to be rendered in the left side of the chip.
+     * this props overrides the `avatar` prop.
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Element to be rendered in the right side of the chip.
+     * if you pass this prop and the `onClose` prop, the passed element
+     * will have the close button props and it will be rendered instead of the
+     * default close button.
+     */
+    endContent?: React.ReactNode;
+    classNames?: SlotsToClasses<ChipSlots>;
+    /**
+     * A Status text to be displayed in the chip.
+     * This is usually used to display a status like "active", "inactive", etc.
+     */
+    status?: React.ReactNode;
+    /**
+     * Callback fired when the chip is closed.
+     */
+    onClose?: () => void;
+};
+type ChipProps = ComponentProps<"div"> & BaseProps & ChipVariantProps;
+declare const Chip: (props: ChipProps) => react_jsx_runtime.JSX.Element;
+
+export { Chip, type ChipProps };

package/dist/chip.js

@@ -0,0 +1,130 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chip.tsx
+var chip_exports = {};
+__export(chip_exports, {
+  Chip: () => Chip
+});
+module.exports = __toCommonJS(chip_exports);
+var import_icons = require("@kopexa/icons");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Chip = (props) => {
+  const {
+    className,
+    children,
+    startContent,
+    endContent,
+    classNames,
+    size,
+    disabled,
+    radius,
+    variant,
+    color,
+    indicator,
+    indicatorColor,
+    indicatorVariant,
+    status,
+    isCloseable,
+    onClose,
+    ...rest
+  } = props;
+  const styles = (0, import_theme.chip)({
+    size,
+    radius,
+    variant,
+    disabled,
+    color,
+    indicator,
+    indicatorColor,
+    indicatorVariant,
+    isCloseable,
+    className
+  });
+  const start = (0, import_react.useMemo)(() => {
+    if (indicator) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.indicator({ class: classNames == null ? void 0 : classNames.indicator }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: styles.indicatorPulse({
+              class: classNames == null ? void 0 : classNames.indicatorPulse
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: styles.indicatorDot({
+              class: classNames == null ? void 0 : classNames.indicatorDot
+            })
+          }
+        )
+      ] });
+    }
+    return startContent;
+  }, [startContent, indicator, styles, classNames]);
+  const end = (0, import_react.useMemo)(() => {
+    if (isCloseable) {
+      return (
+        // biome-ignore lint/a11y/useSemanticElements: we use a span here
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Close",
+            className: styles.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
+            onClick: onClose,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onClose == null ? void 0 : onClose();
+              }
+            },
+            children: endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {})
+          }
+        )
+      );
+    }
+    return endContent;
+  }, [endContent, isCloseable, styles, classNames, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: styles.root({
+        className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.root, className)
+      }),
+      ...rest,
+      children: [
+        start,
+        status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.status({ class: classNames == null ? void 0 : classNames.status }), children: status }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.content({ class: classNames == null ? void 0 : classNames.content }), children }),
+        end
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chip
+});

package/dist/chip.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  Chip
+} from "./chunk-DJQHDHYG.mjs";
+export {
+  Chip
+};

package/dist/chunk-DJQHDHYG.mjs

@@ -0,0 +1,109 @@
+"use client";
+
+// src/chip.tsx
+import { CloseIcon } from "@kopexa/icons";
+import { cn } from "@kopexa/shared-utils";
+import {
+  chip
+} from "@kopexa/theme";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Chip = (props) => {
+  const {
+    className,
+    children,
+    startContent,
+    endContent,
+    classNames,
+    size,
+    disabled,
+    radius,
+    variant,
+    color,
+    indicator,
+    indicatorColor,
+    indicatorVariant,
+    status,
+    isCloseable,
+    onClose,
+    ...rest
+  } = props;
+  const styles = chip({
+    size,
+    radius,
+    variant,
+    disabled,
+    color,
+    indicator,
+    indicatorColor,
+    indicatorVariant,
+    isCloseable,
+    className
+  });
+  const start = useMemo(() => {
+    if (indicator) {
+      return /* @__PURE__ */ jsxs("div", { className: styles.indicator({ class: classNames == null ? void 0 : classNames.indicator }), children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles.indicatorPulse({
+              class: classNames == null ? void 0 : classNames.indicatorPulse
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles.indicatorDot({
+              class: classNames == null ? void 0 : classNames.indicatorDot
+            })
+          }
+        )
+      ] });
+    }
+    return startContent;
+  }, [startContent, indicator, styles, classNames]);
+  const end = useMemo(() => {
+    if (isCloseable) {
+      return (
+        // biome-ignore lint/a11y/useSemanticElements: we use a span here
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Close",
+            className: styles.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
+            onClick: onClose,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onClose == null ? void 0 : onClose();
+              }
+            },
+            children: endContent || /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      );
+    }
+    return endContent;
+  }, [endContent, isCloseable, styles, classNames, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.root({
+        className: cn(classNames == null ? void 0 : classNames.root, className)
+      }),
+      ...rest,
+      children: [
+        start,
+        status && /* @__PURE__ */ jsx("span", { className: styles.status({ class: classNames == null ? void 0 : classNames.status }), children: status }),
+        /* @__PURE__ */ jsx("span", { className: styles.content({ class: classNames == null ? void 0 : classNames.content }), children }),
+        end
+      ]
+    }
+  );
+};
+
+export {
+  Chip
+};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { Chip, ChipProps } from './chip.mjs';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Chip, ChipProps } from './chip.js';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import 'react';

package/dist/index.js

@@ -0,0 +1,132 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Chip: () => Chip
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/chip.tsx
+var import_icons = require("@kopexa/icons");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Chip = (props) => {
+  const {
+    className,
+    children,
+    startContent,
+    endContent,
+    classNames,
+    size,
+    disabled,
+    radius,
+    variant,
+    color,
+    indicator,
+    indicatorColor,
+    indicatorVariant,
+    status,
+    isCloseable,
+    onClose,
+    ...rest
+  } = props;
+  const styles = (0, import_theme.chip)({
+    size,
+    radius,
+    variant,
+    disabled,
+    color,
+    indicator,
+    indicatorColor,
+    indicatorVariant,
+    isCloseable,
+    className
+  });
+  const start = (0, import_react.useMemo)(() => {
+    if (indicator) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.indicator({ class: classNames == null ? void 0 : classNames.indicator }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: styles.indicatorPulse({
+              class: classNames == null ? void 0 : classNames.indicatorPulse
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: styles.indicatorDot({
+              class: classNames == null ? void 0 : classNames.indicatorDot
+            })
+          }
+        )
+      ] });
+    }
+    return startContent;
+  }, [startContent, indicator, styles, classNames]);
+  const end = (0, import_react.useMemo)(() => {
+    if (isCloseable) {
+      return (
+        // biome-ignore lint/a11y/useSemanticElements: we use a span here
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Close",
+            className: styles.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
+            onClick: onClose,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onClose == null ? void 0 : onClose();
+              }
+            },
+            children: endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {})
+          }
+        )
+      );
+    }
+    return endContent;
+  }, [endContent, isCloseable, styles, classNames, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: styles.root({
+        className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.root, className)
+      }),
+      ...rest,
+      children: [
+        start,
+        status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.status({ class: classNames == null ? void 0 : classNames.status }), children: status }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.content({ class: classNames == null ? void 0 : classNames.content }), children }),
+        end
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chip
+});

package/dist/index.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  Chip
+} from "./chunk-DJQHDHYG.mjs";
+export {
+  Chip
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@kopexa/chip",
+  "version": "0.0.0-canary-20250722083945",
+  "description": "A Chip is a small block of essential information that represent an input, attribute, or action.",
+  "keywords": [
+    "chip"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/chip"
+  },
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "motion": ">=12.23.6",
+    "@kopexa/theme": "0.0.0-canary-20250722083945"
+  },
+  "dependencies": {
+    "@kopexa/shared-utils": "1.1.2",
+    "@kopexa/react-utils": "2.0.2",
+    "@kopexa/icons": "0.0.0-canary-20250722083945"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}