@aristobyte-ui/card 1.0.112 → 2.1.0

package/dist/es/main/components/Card/Card.scss

@@ -0,0 +1,61 @@
+.card {
+  align-self: stretch;
+  align-items: flex-start;
+  border-radius: 10px;
+  border: 1px solid #314158; //@TODO: @COLOR
+  background-color: rgba(29, 41, 61, 0.3); //@TODO: @COLOR
+  display: flex;
+  flex-direction: column;
+  padding: 17px 17px 30px;
+  transition: all 150ms ease-out;
+  width: calc(100% - 2 * 17px);
+
+  &__icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__title {
+    align-items: center;
+    color: #e2e8f0; //@TODO: @COLOR
+    display: flex;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    gap: 12px;
+
+    b {
+      border: solid rgba(69, 85, 108, 0.5); // @TODO: @COLOR
+      background-color: rgba(49, 65, 88, 0.4); // @TODO: @COLOR
+      border-radius: 10px;
+      color: $white;
+      padding: 3px 6px;
+    }
+  }
+
+  &__description {
+    color: #90a1b9; //@TODO: @COLOR
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    margin: 14px 0 0;
+
+    b {
+      border: solid rgba(69, 85, 108, 0.5); // @TODO: @COLOR
+      background-color: rgba(49, 65, 88, 0.4); // @TODO: @COLOR
+      border-radius: 10px;
+      color: $white;
+      padding: 3px 6px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    margin: 24px 0 0;
+    width: 100%;
+  }
+}

package/dist/es/main/components/Card/index.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Label } from "@aristobyte-ui/label";
+export var Card = function (_a) {
+    var title = _a.title, description = _a.description, label = _a.label, icon = _a.icon, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c;
+    return (React.createElement("div", { className: "card ".concat(className), style: style },
+        (title || icon || label) && (React.createElement("h3", { className: "card__title" },
+            icon && (React.createElement("div", { className: "card__icon" }, icon.component({
+                size: icon.size || 8,
+                color: icon.color,
+                colors: icon.colors,
+            }))),
+            title && React.createElement("span", { dangerouslySetInnerHTML: { __html: title } }),
+            label && (React.createElement(Label, { text: label.text, backgroundColor: label.backgroundColor, borderColor: label.borderColor, color: label.color })))),
+        description && (React.createElement("p", { className: "card__description", dangerouslySetInnerHTML: { __html: description } })),
+        children && React.createElement("div", { className: "card__content" }, children)));
+};

package/dist/es/main/components/index.js

@@ -0,0 +1 @@
+export * from "./Card";

package/dist/lib/main/components/Card/Card.scss

@@ -0,0 +1,61 @@
+.card {
+  align-self: stretch;
+  align-items: flex-start;
+  border-radius: 10px;
+  border: 1px solid #314158; //@TODO: @COLOR
+  background-color: rgba(29, 41, 61, 0.3); //@TODO: @COLOR
+  display: flex;
+  flex-direction: column;
+  padding: 17px 17px 30px;
+  transition: all 150ms ease-out;
+  width: calc(100% - 2 * 17px);
+
+  &__icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__title {
+    align-items: center;
+    color: #e2e8f0; //@TODO: @COLOR
+    display: flex;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    gap: 12px;
+
+    b {
+      border: solid rgba(69, 85, 108, 0.5); // @TODO: @COLOR
+      background-color: rgba(49, 65, 88, 0.4); // @TODO: @COLOR
+      border-radius: 10px;
+      color: $white;
+      padding: 3px 6px;
+    }
+  }
+
+  &__description {
+    color: #90a1b9; //@TODO: @COLOR
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    margin: 14px 0 0;
+
+    b {
+      border: solid rgba(69, 85, 108, 0.5); // @TODO: @COLOR
+      background-color: rgba(49, 65, 88, 0.4); // @TODO: @COLOR
+      border-radius: 10px;
+      color: $white;
+      padding: 3px 6px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    margin: 24px 0 0;
+    width: 100%;
+  }
+}

package/dist/lib/main/components/Card/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+var React = __importStar(require("react"));
+var label_1 = require("@aristobyte-ui/label");
+var Card = function (_a) {
+    var title = _a.title, description = _a.description, label = _a.label, icon = _a.icon, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c;
+    return (React.createElement("div", { className: "card ".concat(className), style: style },
+        (title || icon || label) && (React.createElement("h3", { className: "card__title" },
+            icon && (React.createElement("div", { className: "card__icon" }, icon.component({
+                size: icon.size || 8,
+                color: icon.color,
+                colors: icon.colors,
+            }))),
+            title && React.createElement("span", { dangerouslySetInnerHTML: { __html: title } }),
+            label && (React.createElement(label_1.Label, { text: label.text, backgroundColor: label.backgroundColor, borderColor: label.borderColor, color: label.color })))),
+        description && (React.createElement("p", { className: "card__description", dangerouslySetInnerHTML: { __html: description } })),
+        children && React.createElement("div", { className: "card__content" }, children)));
+};
+exports.Card = Card;

package/dist/lib/main/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Card"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/card",
   "description": "AristoByteUI Card component: a versatile container for displaying content and UI elements.",
-  "version": "1.0.112",
+  "version": "2.1.0",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -39,38 +39,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "scripts": {
-    "build": "tsup",
-    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit"
-  },
+  "main": "dist/lib/main/index.js",
+  "module": "dist/es/main/index.js",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@aristobyte-ui/label": "^1.0.112",
-    "@aristobyte-ui/utils": "^1.0.112"
-  },
-  "devDependencies": {
-    "@aristobyte-ui/eslint-config": "^1.0.112",
-    "@aristobyte-ui/typescript-config": "^1.0.112",
-    "@turbo/gen": "^2.5.0",
-    "@types/node": "^24.3.0",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
-    "eslint": "^9.27.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "@aristobyte-ui/label": "^2.1.0",
+    "@aristobyte-ui/utils": "^2.1.0"
   }
 }

package/dist/index.d.mts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { IconPropsType } from '@aristobyte-ui/utils';
-
-interface ICard {
-    title?: string;
-    description?: string;
-    label?: {
-        text: string;
-        backgroundColor?: string;
-        borderColor?: string;
-        color?: string;
-    };
-    icon?: {
-        component: (props: IconPropsType) => React.JSX.Element | React.ReactNode | React.ReactElement;
-        size?: number;
-        color?: string;
-        colors?: string[];
-    };
-    children?: React.ReactNode | React.ReactElement | string;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Card: React.FC<ICard>;
-
-export { Card, type ICard };

package/dist/index.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { IconPropsType } from '@aristobyte-ui/utils';
-
-interface ICard {
-    title?: string;
-    description?: string;
-    label?: {
-        text: string;
-        backgroundColor?: string;
-        borderColor?: string;
-        color?: string;
-    };
-    icon?: {
-        component: (props: IconPropsType) => React.JSX.Element | React.ReactNode | React.ReactElement;
-        size?: number;
-        color?: string;
-        colors?: string[];
-    };
-    children?: React.ReactNode | React.ReactElement | string;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Card: React.FC<ICard>;
-
-export { Card, type ICard };

package/dist/index.js

@@ -1,70 +0,0 @@
-"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);
-
-// index.ts
-var index_exports = {};
-__export(index_exports, {
-  Card: () => Card
-});
-module.exports = __toCommonJS(index_exports);
-
-// components/Card/index.tsx
-var import_label = require("@aristobyte-ui/label");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Card = ({
-  title,
-  description,
-  label,
-  icon,
-  children,
-  className = "",
-  style = {}
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `card ${className}`, style, children: [
-  (title || icon || label) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { className: "card__title", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card__icon", children: icon.component({
-      size: icon.size || 8,
-      color: icon.color,
-      colors: icon.colors
-    }) }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: title } }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_label.Label,
-      {
-        text: label.text,
-        backgroundColor: label.backgroundColor,
-        borderColor: label.borderColor,
-        color: label.color
-      }
-    )
-  ] }),
-  description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "p",
-    {
-      className: "card__description",
-      dangerouslySetInnerHTML: { __html: description }
-    }
-  ),
-  children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card__content", children })
-] });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Card
-});
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../index.ts","../components/Card/index.tsx"],"sourcesContent":["export * from \"./components\";\n","import * as React from \"react\";\nimport { type IconPropsType } from \"@aristobyte-ui/utils\";\nimport { Label } from \"@aristobyte-ui/label\";\n\nexport interface ICard {\n  title?: string;\n  description?: string;\n  label?: {\n    text: string;\n    backgroundColor?: string;\n    borderColor?: string;\n    color?: string;\n  };\n  icon?: {\n    component: (\n      props: IconPropsType\n    ) => React.JSX.Element | React.ReactNode | React.ReactElement;\n    size?: number;\n    color?: string;\n    colors?: string[];\n  };\n  children?: React.ReactNode | React.ReactElement | string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const Card: React.FC<ICard> = ({\n  title,\n  description,\n  label,\n  icon,\n  children,\n  className = \"\",\n  style = {},\n}) => (\n  <div className={`card ${className}`} style={style}>\n    {(title || icon || label) && (\n      <h3 className=\"card__title\">\n        {icon && (\n          <div className=\"card__icon\">\n            {icon.component({\n              size: icon.size || 8,\n              color: icon.color,\n              colors: icon.colors,\n            })}\n          </div>\n        )}\n        {title && <span dangerouslySetInnerHTML={{ __html: title }} />}\n        {label && (\n          <Label\n            text={label.text}\n            backgroundColor={label.backgroundColor}\n            borderColor={label.borderColor}\n            color={label.color}\n          />\n        )}\n      </h3>\n    )}\n    {description && (\n      <p\n        className=\"card__description\"\n        dangerouslySetInnerHTML={{ __html: description }}\n      />\n    )}\n    {children && <div className=\"card__content\">{children}</div>}\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAsB;AAmChB;AAXC,IAAM,OAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MACE,6CAAC,SAAI,WAAW,QAAQ,SAAS,IAAI,OACjC;AAAA,YAAS,QAAQ,UACjB,6CAAC,QAAG,WAAU,eACX;AAAA,YACC,4CAAC,SAAI,WAAU,cACZ,eAAK,UAAU;AAAA,MACd,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC,GACH;AAAA,IAED,SAAS,4CAAC,UAAK,yBAAyB,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC3D,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,iBAAiB,MAAM;AAAA,QACvB,aAAa,MAAM;AAAA,QACnB,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,KAEJ;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,EACjD;AAAA,EAED,YAAY,4CAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GACxD;","names":[]}

package/dist/index.mjs

@@ -1,44 +0,0 @@
-"use client";
-
-// components/Card/index.tsx
-import { Label } from "@aristobyte-ui/label";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Card = ({
-  title,
-  description,
-  label,
-  icon,
-  children,
-  className = "",
-  style = {}
-}) => /* @__PURE__ */ jsxs("div", { className: `card ${className}`, style, children: [
-  (title || icon || label) && /* @__PURE__ */ jsxs("h3", { className: "card__title", children: [
-    icon && /* @__PURE__ */ jsx("div", { className: "card__icon", children: icon.component({
-      size: icon.size || 8,
-      color: icon.color,
-      colors: icon.colors
-    }) }),
-    title && /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: title } }),
-    label && /* @__PURE__ */ jsx(
-      Label,
-      {
-        text: label.text,
-        backgroundColor: label.backgroundColor,
-        borderColor: label.borderColor,
-        color: label.color
-      }
-    )
-  ] }),
-  description && /* @__PURE__ */ jsx(
-    "p",
-    {
-      className: "card__description",
-      dangerouslySetInnerHTML: { __html: description }
-    }
-  ),
-  children && /* @__PURE__ */ jsx("div", { className: "card__content", children })
-] });
-export {
-  Card
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/Card/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type IconPropsType } from \"@aristobyte-ui/utils\";\nimport { Label } from \"@aristobyte-ui/label\";\n\nexport interface ICard {\n  title?: string;\n  description?: string;\n  label?: {\n    text: string;\n    backgroundColor?: string;\n    borderColor?: string;\n    color?: string;\n  };\n  icon?: {\n    component: (\n      props: IconPropsType\n    ) => React.JSX.Element | React.ReactNode | React.ReactElement;\n    size?: number;\n    color?: string;\n    colors?: string[];\n  };\n  children?: React.ReactNode | React.ReactElement | string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const Card: React.FC<ICard> = ({\n  title,\n  description,\n  label,\n  icon,\n  children,\n  className = \"\",\n  style = {},\n}) => (\n  <div className={`card ${className}`} style={style}>\n    {(title || icon || label) && (\n      <h3 className=\"card__title\">\n        {icon && (\n          <div className=\"card__icon\">\n            {icon.component({\n              size: icon.size || 8,\n              color: icon.color,\n              colors: icon.colors,\n            })}\n          </div>\n        )}\n        {title && <span dangerouslySetInnerHTML={{ __html: title }} />}\n        {label && (\n          <Label\n            text={label.text}\n            backgroundColor={label.backgroundColor}\n            borderColor={label.borderColor}\n            color={label.color}\n          />\n        )}\n      </h3>\n    )}\n    {description && (\n      <p\n        className=\"card__description\"\n        dangerouslySetInnerHTML={{ __html: description }}\n      />\n    )}\n    {children && <div className=\"card__content\">{children}</div>}\n  </div>\n);\n"],"mappings":";;;AAEA,SAAS,aAAa;AAmChB,SAEI,KAFJ;AAXC,IAAM,OAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MACE,qBAAC,SAAI,WAAW,QAAQ,SAAS,IAAI,OACjC;AAAA,YAAS,QAAQ,UACjB,qBAAC,QAAG,WAAU,eACX;AAAA,YACC,oBAAC,SAAI,WAAU,cACZ,eAAK,UAAU;AAAA,MACd,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC,GACH;AAAA,IAED,SAAS,oBAAC,UAAK,yBAAyB,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC3D,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,iBAAiB,MAAM;AAAA,QACvB,aAAa,MAAM;AAAA,QACnB,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,KAEJ;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,EACjD;AAAA,EAED,YAAY,oBAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GACxD;","names":[]}