@aristobyte-ui/label 2.5.0 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/es/src/main/components/Label/Label.scss +127 -0
  2. package/es/src/main/components/Label/index.d.ts +14 -0
  3. package/es/src/main/components/Label/index.d.ts.map +1 -0
  4. package/es/src/main/components/Label/index.js +6 -6
  5. package/es/src/main/components/index.d.ts +2 -0
  6. package/es/src/main/components/index.d.ts.map +1 -0
  7. package/es/src/main/index.d.ts +2 -0
  8. package/es/src/main/index.d.ts.map +1 -0
  9. package/lib/src/main/components/Label/Label.scss +127 -0
  10. package/lib/src/main/components/Label/index.d.ts +14 -0
  11. package/lib/src/main/components/Label/index.d.ts.map +1 -0
  12. package/lib/src/main/components/Label/index.js +5 -8
  13. package/lib/src/main/components/index.d.ts +2 -0
  14. package/lib/src/main/components/index.d.ts.map +1 -0
  15. package/lib/src/main/index.d.ts +2 -0
  16. package/lib/src/main/index.d.ts.map +1 -0
  17. package/package.json +3 -2
package/es/src/main/components/Label/Label.scss ADDED
@@ -0,0 +1,127 @@
1
+ @use '@aristobyte-ui/utils/styles' as *;
2
+
3
+ // @TODO: update styles currently there is a "#{name}"
4
+
5
+ .label {
6
+ display: inline-flex;
7
+ align-items: center;
8
+ font-weight: 500;
9
+ user-select: none;
10
+ border-width: 1px;
11
+ border-style: solid;
12
+ border-radius: 0.625rem;
13
+ padding: 0.25rem 0.6875rem;
14
+ font-size: 0.875rem;
15
+ line-height: 1rem;
16
+
17
+ &-size {
18
+ &--xsm {
19
+ font-size: 0.75rem;
20
+ padding: 0.125rem 0.5rem;
21
+ }
22
+ &--sm {
23
+ font-size: 0.875rem;
24
+ padding: 0.25rem 0.625rem;
25
+ }
26
+ &--md {
27
+ font-size: 1rem;
28
+ padding: 0.375rem 0.75rem;
29
+ }
30
+ &--lg {
31
+ font-size: 1.125rem;
32
+ padding: 0.5rem 1rem;
33
+ }
34
+ &--xlg {
35
+ font-size: 1.25rem;
36
+ padding: 0.625rem 1.25rem;
37
+ }
38
+ }
39
+
40
+ &-radius {
41
+ &--none {
42
+ border-radius: 0;
43
+ }
44
+ &--sm {
45
+ border-radius: 0.125rem;
46
+ }
47
+ &--md {
48
+ border-radius: 0.375rem;
49
+ }
50
+ &--lg {
51
+ border-radius: 0.75rem;
52
+ }
53
+ &--full {
54
+ border-radius: 9999px;
55
+ }
56
+ }
57
+ }
58
+
59
+ @mixin variant($name, $color) {
60
+ .label-#{$name}-solid {
61
+ background-color: rgba($color, 0.2);
62
+ border-color: $color;
63
+ color: $color;
64
+ }
65
+
66
+ .label-#{$name}-solid:hover {
67
+ background-color: rgba($color, 0.3);
68
+ }
69
+
70
+ .label-#{$name}-outline {
71
+ background-color: transparent;
72
+ border-color: $color;
73
+ color: $color;
74
+ }
75
+
76
+ .label-#{$name}-outline:hover {
77
+ background-color: rgba($color, 0.07);
78
+ }
79
+
80
+ .label-#{$name}-outline-dashed {
81
+ background-color: transparent;
82
+ border-color: $color;
83
+ border-style: dashed;
84
+ color: $color;
85
+ }
86
+
87
+ .label-#{$name}-outline-dashed:hover {
88
+ background-color: rgba($color, 0.07);
89
+ }
90
+
91
+ .label-#{$name}-no-outline {
92
+ background-color: rgba($color, 0.2);
93
+ border-color: transparent;
94
+ color: $color;
95
+ }
96
+
97
+ .label-#{$name}-no-outline:hover {
98
+ background-color: rgba($color, 0.3);
99
+ }
100
+
101
+ .label-#{$name}-glowing {
102
+ background-color: rgba($color, 0.2);
103
+ color: $color;
104
+ box-shadow: 0 0 6px rgba($color, 0.5);
105
+ border-color: transparent;
106
+ }
107
+
108
+ .label-#{$name}-glowing:hover {
109
+ box-shadow: 0 0 8px rgba($color, 0.7);
110
+ }
111
+
112
+ .label-#{$name}-solid:disabled,
113
+ .label-#{$name}-outline:disabled,
114
+ .label-#{$name}-outline-dashed:disabled,
115
+ .label-#{$name}-no-outline:disabled,
116
+ .label-#{$name}-glowing:disabled {
117
+ opacity: 0.5;
118
+ cursor: not-allowed;
119
+ }
120
+ }
121
+
122
+ @include variant('default', #1f2937);
123
+ @include variant('primary', #2563eb);
124
+ @include variant('secondary', #4f46e5);
125
+ @include variant('success', #16a34a);
126
+ @include variant('warning', #d97706);
127
+ @include variant('error', #dc2626);
package/es/src/main/components/Label/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ export interface ILabel {
3
+ text: string;
4
+ variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
5
+ appearance?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
6
+ size?: 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
7
+ radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
8
+ className?: string;
9
+ color?: string;
10
+ backgroundColor?: string;
11
+ borderColor?: string;
12
+ }
13
+ export declare const Label: React.FC<ILabel>;
14
+ //# sourceMappingURL=index.d.ts.map
package/es/src/main/components/Label/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"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 CHANGED
@@ -1,10 +1,10 @@
1
- "use client";
2
- import * as React from "react";
3
- import clsx from "clsx";
1
+ 'use client';
2
+ import * as React from 'react';
4
3
  export var Label = function (_a) {
5
- var text = _a.text, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, _e = _a.className, className = _e === void 0 ? "" : _e, color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor;
6
- var labelClass = clsx("label", "label-".concat(variant, "-solid"), "label-".concat(size), "label-radius-".concat(radius), className);
7
- return (React.createElement("label", { className: labelClass, style: {
4
+ 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;
5
+ return (React.createElement("label", { className: ['label', "label-".concat(variant, "-").concat(appearance), "label-".concat(size), "label-radius-".concat(radius), className]
6
+ .filter(Boolean)
7
+ .join(' '), style: {
8
8
  color: color,
9
9
  backgroundColor: backgroundColor,
10
10
  borderColor: borderColor,
package/es/src/main/components/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './Label';
2
+ //# sourceMappingURL=index.d.ts.map
package/es/src/main/components/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"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/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.d.ts.map
package/es/src/main/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/label/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
package/lib/src/main/components/Label/Label.scss ADDED
@@ -0,0 +1,127 @@
1
+ @use '@aristobyte-ui/utils/styles' as *;
2
+
3
+ // @TODO: update styles currently there is a "#{name}"
4
+
5
+ .label {
6
+ display: inline-flex;
7
+ align-items: center;
8
+ font-weight: 500;
9
+ user-select: none;
10
+ border-width: 1px;
11
+ border-style: solid;
12
+ border-radius: 0.625rem;
13
+ padding: 0.25rem 0.6875rem;
14
+ font-size: 0.875rem;
15
+ line-height: 1rem;
16
+
17
+ &-size {
18
+ &--xsm {
19
+ font-size: 0.75rem;
20
+ padding: 0.125rem 0.5rem;
21
+ }
22
+ &--sm {
23
+ font-size: 0.875rem;
24
+ padding: 0.25rem 0.625rem;
25
+ }
26
+ &--md {
27
+ font-size: 1rem;
28
+ padding: 0.375rem 0.75rem;
29
+ }
30
+ &--lg {
31
+ font-size: 1.125rem;
32
+ padding: 0.5rem 1rem;
33
+ }
34
+ &--xlg {
35
+ font-size: 1.25rem;
36
+ padding: 0.625rem 1.25rem;
37
+ }
38
+ }
39
+
40
+ &-radius {
41
+ &--none {
42
+ border-radius: 0;
43
+ }
44
+ &--sm {
45
+ border-radius: 0.125rem;
46
+ }
47
+ &--md {
48
+ border-radius: 0.375rem;
49
+ }
50
+ &--lg {
51
+ border-radius: 0.75rem;
52
+ }
53
+ &--full {
54
+ border-radius: 9999px;
55
+ }
56
+ }
57
+ }
58
+
59
+ @mixin variant($name, $color) {
60
+ .label-#{$name}-solid {
61
+ background-color: rgba($color, 0.2);
62
+ border-color: $color;
63
+ color: $color;
64
+ }
65
+
66
+ .label-#{$name}-solid:hover {
67
+ background-color: rgba($color, 0.3);
68
+ }
69
+
70
+ .label-#{$name}-outline {
71
+ background-color: transparent;
72
+ border-color: $color;
73
+ color: $color;
74
+ }
75
+
76
+ .label-#{$name}-outline:hover {
77
+ background-color: rgba($color, 0.07);
78
+ }
79
+
80
+ .label-#{$name}-outline-dashed {
81
+ background-color: transparent;
82
+ border-color: $color;
83
+ border-style: dashed;
84
+ color: $color;
85
+ }
86
+
87
+ .label-#{$name}-outline-dashed:hover {
88
+ background-color: rgba($color, 0.07);
89
+ }
90
+
91
+ .label-#{$name}-no-outline {
92
+ background-color: rgba($color, 0.2);
93
+ border-color: transparent;
94
+ color: $color;
95
+ }
96
+
97
+ .label-#{$name}-no-outline:hover {
98
+ background-color: rgba($color, 0.3);
99
+ }
100
+
101
+ .label-#{$name}-glowing {
102
+ background-color: rgba($color, 0.2);
103
+ color: $color;
104
+ box-shadow: 0 0 6px rgba($color, 0.5);
105
+ border-color: transparent;
106
+ }
107
+
108
+ .label-#{$name}-glowing:hover {
109
+ box-shadow: 0 0 8px rgba($color, 0.7);
110
+ }
111
+
112
+ .label-#{$name}-solid:disabled,
113
+ .label-#{$name}-outline:disabled,
114
+ .label-#{$name}-outline-dashed:disabled,
115
+ .label-#{$name}-no-outline:disabled,
116
+ .label-#{$name}-glowing:disabled {
117
+ opacity: 0.5;
118
+ cursor: not-allowed;
119
+ }
120
+ }
121
+
122
+ @include variant('default', #1f2937);
123
+ @include variant('primary', #2563eb);
124
+ @include variant('secondary', #4f46e5);
125
+ @include variant('success', #16a34a);
126
+ @include variant('warning', #d97706);
127
+ @include variant('error', #dc2626);
package/lib/src/main/components/Label/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ export interface ILabel {
3
+ text: string;
4
+ variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
5
+ appearance?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
6
+ size?: 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
7
+ radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
8
+ className?: string;
9
+ color?: string;
10
+ backgroundColor?: string;
11
+ borderColor?: string;
12
+ }
13
+ export declare const Label: React.FC<ILabel>;
14
+ //# sourceMappingURL=index.d.ts.map
package/lib/src/main/components/Label/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"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 CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
- "use client";
2
+ 'use client';
3
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
4
  if (k2 === undefined) k2 = k;
5
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,17 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
33
33
  return result;
34
34
  };
35
35
  })();
36
- var __importDefault = (this && this.__importDefault) || function (mod) {
37
- return (mod && mod.__esModule) ? mod : { "default": mod };
38
- };
39
36
  Object.defineProperty(exports, "__esModule", { value: true });
40
37
  exports.Label = void 0;
41
38
  var React = __importStar(require("react"));
42
- var clsx_1 = __importDefault(require("clsx"));
43
39
  var Label = function (_a) {
44
- var text = _a.text, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, _e = _a.className, className = _e === void 0 ? "" : _e, color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor;
45
- var labelClass = (0, clsx_1.default)("label", "label-".concat(variant, "-solid"), "label-".concat(size), "label-radius-".concat(radius), className);
46
- return (React.createElement("label", { className: labelClass, style: {
40
+ 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;
41
+ return (React.createElement("label", { className: ['label', "label-".concat(variant, "-").concat(appearance), "label-".concat(size), "label-radius-".concat(radius), className]
42
+ .filter(Boolean)
43
+ .join(' '), style: {
47
44
  color: color,
48
45
  backgroundColor: backgroundColor,
49
46
  borderColor: borderColor,
package/lib/src/main/components/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './Label';
2
+ //# sourceMappingURL=index.d.ts.map
package/lib/src/main/components/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"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/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.d.ts.map
package/lib/src/main/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/label/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/label",
3
3
  "description": "AristoByteUI Label component: a reusable, styled label for forms and UI elements.",
4
- "version": "2.5.0",
4
+ "version": "2.5.1",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -42,12 +42,13 @@
42
42
  },
43
43
  "main": "lib/src/main/index.js",
44
44
  "module": "es/src/main/index.js",
45
+ "types": "es/src/main/index.d.ts",
45
46
  "peerDependencies": {
46
47
  "react": "^19.1.0",
47
48
  "react-dom": "^19.1.0",
48
49
  "sass": "^1.97.3"
49
50
  },
50
51
  "dependencies": {
51
- "@aristobyte-ui/utils": "2.5.0"
52
+ "@aristobyte-ui/utils": "2.5.1"
52
53
  }
53
54
  }