ar-design 0.2.8 → 0.2.9

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 (11) hide show
  1. package/dist/assets/css/components/form/checkbox/core/border.css +16 -0
  2. package/dist/assets/css/components/form/switch/core/border.css +10 -0
  3. package/dist/assets/css/core/ar-core.css +1 -0
  4. package/dist/assets/css/core/variants/animation.css +15 -0
  5. package/dist/assets/css/core/variants/borderless/borderless.css +19 -0
  6. package/dist/assets/css/core/variants/dashed/dashed.css +22 -0
  7. package/dist/assets/css/core/variants/filled/filled.css +29 -0
  8. package/dist/assets/css/core/variants/outlined/outlined.css +23 -0
  9. package/dist/components/form/radio/index.js +1 -1
  10. package/dist/libs/types/index.d.ts +1 -1
  11. package/package.json +1 -1
package/dist/assets/css/components/form/checkbox/core/border.css CHANGED
@@ -14,6 +14,22 @@
14
14
  /* #endregion */
15
15
  /* Border Color -> PRIMARY */
16
16
 
17
+ /* #region Border Color -> PRIMARY-LIGHT */
18
+ .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.primary-light::before {
19
+ border-right-color: var(--white);
20
+ border-bottom-color: var(--white);
21
+ }
22
+ .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.primary-light::before {
23
+ border-right-color: var(--primary-light);
24
+ border-bottom-color: var(--primary-light);
25
+ }
26
+ .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.primary-light::before {
27
+ border-right-color: var(--primary-light);
28
+ border-bottom-color: var(--primary-light);
29
+ }
30
+ /* #endregion */
31
+ /* Border Color -> PRIMARY-LIGHT */
32
+
17
33
  /* #region Border Color -> SECONDARY */
18
34
  .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.secondary::before {
19
35
  border-right-color: var(--white);
package/dist/assets/css/components/form/switch/core/border.css CHANGED
@@ -8,6 +8,16 @@
8
8
  /* #endregion */
9
9
  /* Border Color -> PRIMARY */
10
10
 
11
+ /* #region Border Color -> PRIMARY-LIGHT */
12
+ .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light {
13
+ box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), .1);
14
+ }
15
+ .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light > .handle {
16
+ box-shadow: 0 0 0 2px rgba(var(--primary-light-rgb), .5);
17
+ }
18
+ /* #endregion */
19
+ /* Border Color -> PRIMARY-LIGHT */
20
+
11
21
  /* #region Border Color -> SECONDARY */
12
22
  .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary {
13
23
  box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), .1);
package/dist/assets/css/core/ar-core.css CHANGED
@@ -49,6 +49,7 @@
49
49
  /* ... */
50
50
  --primary: #007bff;
51
51
  --primary-active: #005abb;
52
+ --primary-light: #92c7ff;
52
53
  --primary-rgb: 0, 123, 255;
53
54
  --secondary: #6c757d;
54
55
  --secondary-active: #495055;
package/dist/assets/css/core/variants/animation.css CHANGED
@@ -13,6 +13,21 @@
13
13
  /* #endregion */
14
14
  /* Animation -> PRIMARY */
15
15
 
16
+ /* #region Animation -> PRIMARY-LIGHT */
17
+ @keyframes clicked-primary-light {
18
+ 0% {
19
+ box-shadow: 0 0 0 0px rgba(var(--primary-light-rgb), 0);
20
+ }
21
+ 25% {
22
+ box-shadow: 0 0 0 5px rgba(var(--primary-light-rgb), 0.25);
23
+ }
24
+ 100% {
25
+ box-shadow: 0 0 0 7.5px rgba(var(--primary-light-rgb), 0);
26
+ }
27
+ }
28
+ /* #endregion */
29
+ /* Animation -> PRIMARY-LIGHT */
30
+
16
31
  /* #region Animation -> SECONDARY */
17
32
  @keyframes clicked-secondary {
18
33
  0% {
package/dist/assets/css/core/variants/borderless/borderless.css CHANGED
@@ -17,6 +17,25 @@ input.borderless:not(.disabled).primary:focus {
17
17
  /* #endregion */
18
18
  /* PRIMARY */
19
19
 
20
+ /* #region PRIMARY-LIGHT */
21
+ .borderless:not(.disabled).primary-light {
22
+ color: var(--primary-light);
23
+ }
24
+ .borderless:not(.disabled).primary-light:hover {
25
+ background-color: rgba(var(--primary-light-rgb), 0.1);
26
+ }
27
+ input.borderless:not(.disabled).primary-light:focus {
28
+ border-color: var(--primary-light);
29
+ box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.1);
30
+ }
31
+ .borderless:not(.disabled).primary-light.active {
32
+ background-color: transparent;
33
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
34
+ animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
35
+ }
36
+ /* #endregion */
37
+ /* PRIMARY-LIGHT */
38
+
20
39
  /* #region SECONDARY */
21
40
  .borderless:not(.disabled).secondary {
22
41
  color: var(--secondary);
package/dist/assets/css/core/variants/dashed/dashed.css CHANGED
@@ -20,6 +20,28 @@ input[type="checkbox"]:checked + span > .ar-checkbox.dashed:not(.disabled).prima
20
20
  /* #endregion */
21
21
  /* PRIMARY */
22
22
 
23
+ /* #region PRIMARY-LIGHT */
24
+ .dashed:not(.disabled).primary-light {
25
+ border-color: var(--primary-light);
26
+ color: var(--primary-light);
27
+ }
28
+ .dashed:not(.disabled).primary-light:hover {
29
+ border-color: rgba(var(--primary-light-rgb), 0.5);
30
+ }
31
+ input.dashed:not(.disabled).primary-light:focus{
32
+ border-color: var(--primary-light);
33
+ box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
34
+ }
35
+ input[type="checkbox"]:checked + span > .ar-checkbox.dashed:not(.disabled).primary-light{
36
+ box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.1);
37
+ }
38
+ .dashed:not(.disabled).primary-light.active {
39
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
40
+ animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
41
+ }
42
+ /* #endregion */
43
+ /* PRIMARY-LIGHT */
44
+
23
45
  /* #region SECONDARY */
24
46
  .dashed:not(.disabled).secondary {
25
47
  border-color: var(--secondary);
package/dist/assets/css/core/variants/filled/filled.css CHANGED
@@ -27,6 +27,35 @@ button.filled:not(.disabled).primary:focus {
27
27
  /* #endregion */
28
28
  /* PRIMARY */
29
29
 
30
+ /* #region PRIMARY-LIGHT */
31
+ .filled:not(.disabled).primary-light {
32
+ background-color: var(--primary-light);
33
+ color: var(--white)
34
+ }
35
+ input.filled:not(.disabled).primary-light:hover {
36
+ background-color: var(--primary-light-active);
37
+ }
38
+ input.filled:not(.disabled).primary-light:focus {
39
+ background-color: transparent;
40
+ border-color: var(--primary-light);
41
+ box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
42
+ }
43
+ input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).primary-light{
44
+ box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.25);
45
+ }
46
+ button.filled:not(.disabled).primary-light {
47
+ color: var(--white);
48
+ }
49
+ button.filled:not(.disabled).primary-light:focus {
50
+ background-color: var(--primary-light);
51
+ }
52
+ .filled:not(.disabled).primary-light.active {
53
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
54
+ animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
55
+ }
56
+ /* #endregion */
57
+ /* PRIMARY-LIGHT */
58
+
30
59
  /* #region SECONDARY */
31
60
  .filled:not(.disabled).secondary {
32
61
  background-color: var(--secondary);
package/dist/assets/css/core/variants/outlined/outlined.css CHANGED
@@ -21,6 +21,29 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).pri
21
21
  /* #endregion */
22
22
  /* PRIMARY */
23
23
 
24
+ /* #region PRIMARY-LIGHT */
25
+ .outlined:not(.disabled).primary-light {
26
+ border-color: var(--primary-light);
27
+ /* color: var(--primary-light); */
28
+ }
29
+ .outlined:not(.disabled).primary-light:hover {
30
+ border-color: rgba(var(--primary-light-rgb), 0.5);
31
+ }
32
+ input.outlined:not(.disabled).primary-light:focus,
33
+ iframe.outlined:not(.disabled).primary-light.focused{
34
+ border-color: var(--primary-light);
35
+ box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
36
+ }
37
+ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).primary-light{
38
+ box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.1);
39
+ }
40
+ .outlined:not(.disabled).primary-light.active {
41
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
42
+ animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
43
+ }
44
+ /* #endregion */
45
+ /* PRIMARY-LIGHT */
46
+
24
47
  /* #region SECONDARY */
25
48
  .outlined:not(.disabled).secondary {
26
49
  border-color: var(--secondary);
package/dist/components/form/radio/index.js CHANGED
@@ -6,7 +6,7 @@ const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "
6
6
  // refs
7
7
  const _checkbox = useRef(null);
8
8
  const _checkboxClassName = ["ar-radio"];
9
- _checkboxClassName.push(...Utils.GetClassName("filled", undefined, border, size, undefined, attributes.className));
9
+ _checkboxClassName.push(...Utils.GetClassName("filled", status, border, size, undefined, attributes.className));
10
10
  return (React.createElement("div", { className: "ar-radio-wrapper" },
11
11
  React.createElement("label", null,
12
12
  React.createElement("input", { ref: ref, type: "radio", ...attributes, size: 0, onChange: (event) => {
package/dist/libs/types/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  export type Variants = "filled" | "outlined" | "dashed" | "borderless";
3
- export type Status = "primary" | "secondary" | "success" | "danger" | "warning" | "information" | "dark" | "light";
3
+ export type Status = "primary" | "primary-light" | "secondary" | "success" | "danger" | "warning" | "information" | "dark" | "light";
4
4
  export type ParagraphColors = "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900";
5
5
  export type Border = {
6
6
  radius: BorderRadiuses;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.2.8",
3
+ "version": "0.2.9",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",