@aristobyte-ui/label 2.5.1 → 2.6.0

package/README.md

@@ -0,0 +1,81 @@
+# @aristobyte-ui/anchor
+
+<p align="center">
+  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
+  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
+  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
+  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
+  <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
+  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
+  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
+</p>
+
+A fully-typed, ripple-enabled Anchor component for AristoByteUI with multiple variants and seamless integration with SCSS modules and design tokens.
+
+## 📦 Installation
+
+```bash
+# Install via Yarn
+yarn add -D @aristobyte-ui/anchor
+
+# Or via npm
+npm install -D @aristobyte-ui/anchor
+
+# Or via pnpm
+pnpm add -D @aristobyte-ui/anchor
+```
+
+## 🛠 Usage
+
+```tsx
+import { Anchor } from "@aristobyte-ui/anchor";
+
+<Anchor href="https://aristobyte.com" variant="primary">
+  Visit AristoByte
+</Anchor>;
+```
+
+##
+
+📂 Presets Available
+**Variants**: `default` | `primary` | `secondary`
+
+Ripple effect automatically applied on click
+
+## 🔧 Example in a Package
+
+```tsx
+<Anchor href="/docs" variant="secondary">
+  Documentation
+</Anchor>
+```
+
+## 📊 Why This Matters
+
+- **Performance-first**: Lightweight CSS ensures fast rendering and smooth transitions.
+- **Fully typed**: TypeScript-first API ensures predictable usage and IDE autocomplete.
+- **AristoByteUI ready**: Seamlessly integrates with design tokens and SCSS modules.
+- **Flexible**: Supports multiple variants and ripple-enabled interactive feedback.
+
+## 🏆 Philosophy
+
+- **Modular architecture**: Anchor component is fully composable.
+- **Declarative styling**: SCSS modules keep styles maintainable and scoped.
+- **Strict typing & runtime flexibility**: Props fully typed while allowing runtime overrides.
+- **Developer experience optimized**: Easy to use with predictable behavior and minimal boilerplate.
+
+## 📜 License
+
+[MIT](./LICENSE) © AristoByte
+
+## 🛡 Shields Showcase
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
+  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
+  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
+  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
+</p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/label",
   "description": "AristoByteUI Label component: a reusable, styled label for forms and UI elements.",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -40,15 +40,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "lib/src/main/index.js",
-  "module": "es/src/main/index.js",
-  "types": "es/src/main/index.d.ts",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/utils": "2.5.1"
+    "@aristobyte-ui/utils": "^2.6.0"
   }
 }

package/es/src/main/components/Label/Label.scss

@@ -1,127 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-// @TODO: update styles currently there is a "#{name}"
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  user-select: none;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.625rem;
-  padding: 0.25rem 0.6875rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-
-  &-size {
-    &--xsm {
-      font-size: 0.75rem;
-      padding: 0.125rem 0.5rem;
-    }
-    &--sm {
-      font-size: 0.875rem;
-      padding: 0.25rem 0.625rem;
-    }
-    &--md {
-      font-size: 1rem;
-      padding: 0.375rem 0.75rem;
-    }
-    &--lg {
-      font-size: 1.125rem;
-      padding: 0.5rem 1rem;
-    }
-    &--xlg {
-      font-size: 1.25rem;
-      padding: 0.625rem 1.25rem;
-    }
-  }
-
-  &-radius {
-    &--none {
-      border-radius: 0;
-    }
-    &--sm {
-      border-radius: 0.125rem;
-    }
-    &--md {
-      border-radius: 0.375rem;
-    }
-    &--lg {
-      border-radius: 0.75rem;
-    }
-    &--full {
-      border-radius: 9999px;
-    }
-  }
-}
-
-@mixin variant($name, $color) {
-  .label-#{$name}-solid {
-    background-color: rgba($color, 0.2);
-    border-color: $color;
-    color: $color;
-  }
-
-  .label-#{$name}-solid:hover {
-    background-color: rgba($color, 0.3);
-  }
-
-  .label-#{$name}-outline {
-    background-color: transparent;
-    border-color: $color;
-    color: $color;
-  }
-
-  .label-#{$name}-outline:hover {
-    background-color: rgba($color, 0.07);
-  }
-
-  .label-#{$name}-outline-dashed {
-    background-color: transparent;
-    border-color: $color;
-    border-style: dashed;
-    color: $color;
-  }
-
-  .label-#{$name}-outline-dashed:hover {
-    background-color: rgba($color, 0.07);
-  }
-
-  .label-#{$name}-no-outline {
-    background-color: rgba($color, 0.2);
-    border-color: transparent;
-    color: $color;
-  }
-
-  .label-#{$name}-no-outline:hover {
-    background-color: rgba($color, 0.3);
-  }
-
-  .label-#{$name}-glowing {
-    background-color: rgba($color, 0.2);
-    color: $color;
-    box-shadow: 0 0 6px rgba($color, 0.5);
-    border-color: transparent;
-  }
-
-  .label-#{$name}-glowing:hover {
-    box-shadow: 0 0 8px rgba($color, 0.7);
-  }
-
-  .label-#{$name}-solid:disabled,
-  .label-#{$name}-outline:disabled,
-  .label-#{$name}-outline-dashed:disabled,
-  .label-#{$name}-no-outline:disabled,
-  .label-#{$name}-glowing:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-@include variant('default', #1f2937);
-@include variant('primary', #2563eb);
-@include variant('secondary', #4f46e5);
-@include variant('success', #16a34a);
-@include variant('warning', #d97706);
-@include variant('error', #dc2626);

package/es/src/main/components/Label/index.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface ILabel {
-    text: string;
-    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-    appearance?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
-    size?: 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    className?: string;
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-}
-export declare const Label: React.FC<ILabel>;
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/Label/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/label/src/main/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAyBlC,CAAC"}

package/es/src/main/components/Label/index.js

@@ -1,12 +0,0 @@
-'use client';
-import * as React from 'react';
-export var Label = function (_a) {
-    var text = _a.text, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, className = _a.className, color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor;
-    return (React.createElement("label", { className: ['label', "label-".concat(variant, "-").concat(appearance), "label-".concat(size), "label-radius-".concat(radius), className]
-            .filter(Boolean)
-            .join(' '), style: {
-            color: color,
-            backgroundColor: backgroundColor,
-            borderColor: borderColor,
-        } }, text));
-};

package/es/src/main/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Label';
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/label/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

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

@@ -1 +0,0 @@
-export * from './Label';

package/es/src/main/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/label/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/es/src/main/index.js

@@ -1 +0,0 @@
-export * from './components';

package/lib/src/main/components/Label/Label.scss

@@ -1,127 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-// @TODO: update styles currently there is a "#{name}"
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  user-select: none;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.625rem;
-  padding: 0.25rem 0.6875rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-
-  &-size {
-    &--xsm {
-      font-size: 0.75rem;
-      padding: 0.125rem 0.5rem;
-    }
-    &--sm {
-      font-size: 0.875rem;
-      padding: 0.25rem 0.625rem;
-    }
-    &--md {
-      font-size: 1rem;
-      padding: 0.375rem 0.75rem;
-    }
-    &--lg {
-      font-size: 1.125rem;
-      padding: 0.5rem 1rem;
-    }
-    &--xlg {
-      font-size: 1.25rem;
-      padding: 0.625rem 1.25rem;
-    }
-  }
-
-  &-radius {
-    &--none {
-      border-radius: 0;
-    }
-    &--sm {
-      border-radius: 0.125rem;
-    }
-    &--md {
-      border-radius: 0.375rem;
-    }
-    &--lg {
-      border-radius: 0.75rem;
-    }
-    &--full {
-      border-radius: 9999px;
-    }
-  }
-}
-
-@mixin variant($name, $color) {
-  .label-#{$name}-solid {
-    background-color: rgba($color, 0.2);
-    border-color: $color;
-    color: $color;
-  }
-
-  .label-#{$name}-solid:hover {
-    background-color: rgba($color, 0.3);
-  }
-
-  .label-#{$name}-outline {
-    background-color: transparent;
-    border-color: $color;
-    color: $color;
-  }
-
-  .label-#{$name}-outline:hover {
-    background-color: rgba($color, 0.07);
-  }
-
-  .label-#{$name}-outline-dashed {
-    background-color: transparent;
-    border-color: $color;
-    border-style: dashed;
-    color: $color;
-  }
-
-  .label-#{$name}-outline-dashed:hover {
-    background-color: rgba($color, 0.07);
-  }
-
-  .label-#{$name}-no-outline {
-    background-color: rgba($color, 0.2);
-    border-color: transparent;
-    color: $color;
-  }
-
-  .label-#{$name}-no-outline:hover {
-    background-color: rgba($color, 0.3);
-  }
-
-  .label-#{$name}-glowing {
-    background-color: rgba($color, 0.2);
-    color: $color;
-    box-shadow: 0 0 6px rgba($color, 0.5);
-    border-color: transparent;
-  }
-
-  .label-#{$name}-glowing:hover {
-    box-shadow: 0 0 8px rgba($color, 0.7);
-  }
-
-  .label-#{$name}-solid:disabled,
-  .label-#{$name}-outline:disabled,
-  .label-#{$name}-outline-dashed:disabled,
-  .label-#{$name}-no-outline:disabled,
-  .label-#{$name}-glowing:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-@include variant('default', #1f2937);
-@include variant('primary', #2563eb);
-@include variant('secondary', #4f46e5);
-@include variant('success', #16a34a);
-@include variant('warning', #d97706);
-@include variant('error', #dc2626);

package/lib/src/main/components/Label/index.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface ILabel {
-    text: string;
-    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-    appearance?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
-    size?: 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    className?: string;
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-}
-export declare const Label: React.FC<ILabel>;
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/Label/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/label/src/main/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAyBlC,CAAC"}

package/lib/src/main/components/Label/index.js

@@ -1,49 +0,0 @@
-"use strict";
-'use client';
-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.Label = void 0;
-var React = __importStar(require("react"));
-var Label = function (_a) {
-    var text = _a.text, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, className = _a.className, color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor;
-    return (React.createElement("label", { className: ['label', "label-".concat(variant, "-").concat(appearance), "label-".concat(size), "label-radius-".concat(radius), className]
-            .filter(Boolean)
-            .join(' '), style: {
-            color: color,
-            backgroundColor: backgroundColor,
-            borderColor: borderColor,
-        } }, text));
-};
-exports.Label = Label;

package/lib/src/main/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Label';
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/label/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

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

@@ -1,17 +0,0 @@
-"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("./Label"), exports);

package/lib/src/main/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/label/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/src/main/index.js

@@ -1,17 +0,0 @@
-"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("./components"), exports);