@fea-ui/styles 0.1.0-alpha.7 → 0.1.0-alpha.8

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fea-ui/styles",
3
- "version": "0.1.0-alpha.7",
3
+ "version": "0.1.0-alpha.8",
4
4
  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
5
5
  "keywords": [
6
6
  "fea-ui",
@@ -28,3 +28,5 @@
28
28
  @import "./fieldset.css";
29
29
  @import "./drawer.css";
30
30
  @import "./popover.css";
31
+ @import "./progress.css";
32
+ @import "./radio.css";
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  .navbar__list {
23
- @apply hidden md:flex md:items-center md:gap-6;
23
+ @apply flex items-center gap-4;
24
24
  }
25
25
 
26
26
  .navbar__list-item {
@@ -0,0 +1,72 @@
1
+ /** Base Styling */
2
+ .progress {
3
+ @apply grid grid-cols-2 items-center gap-1;
4
+ }
5
+
6
+ .progress__label {
7
+ @apply font-medium;
8
+ }
9
+
10
+ .progress__value {
11
+ @apply col-start-2 m-0 text-right text-sm leading-5;
12
+ }
13
+
14
+ .progress__track {
15
+ @apply col-span-2 block w-48 overflow-hidden rounded shadow-inner;
16
+ }
17
+
18
+ .progress__indicator {
19
+ @apply block rounded;
20
+
21
+ @apply transition-[width] motion-reduce:transition-none;
22
+ }
23
+
24
+ /** Variants */
25
+ .progress--primary .progress__track {
26
+ @apply bg-primary/10;
27
+ }
28
+
29
+ .progress--primary .progress__indicator {
30
+ @apply bg-primary;
31
+ }
32
+
33
+ .progress--secondary .progress__track {
34
+ @apply bg-secondary/10;
35
+ }
36
+
37
+ .progress--secondary .progress__indicator {
38
+ @apply bg-secondary;
39
+ }
40
+
41
+ .progress--success .progress__track {
42
+ @apply bg-success/10;
43
+ }
44
+
45
+ .progress--success .progress__indicator {
46
+ @apply bg-success;
47
+ }
48
+
49
+ .progress--danger .progress__track {
50
+ @apply bg-danger/10;
51
+ }
52
+
53
+ .progress--danger .progress__indicator {
54
+ @apply bg-danger;
55
+ }
56
+
57
+ /** Sizes */
58
+ .progress--sm .progress__track {
59
+ @apply h-2;
60
+ }
61
+
62
+ .progress--sm .progress__label {
63
+ @apply text-sm;
64
+ }
65
+
66
+ .progress--md .progress__track {
67
+ @apply h-3;
68
+ }
69
+
70
+ .progress--lg .progress__track {
71
+ @apply h-4;
72
+ }
@@ -0,0 +1,31 @@
1
+ .radio__group {
2
+ @apply flex flex-col gap-4;
3
+ }
4
+
5
+ .radio {
6
+ @apply box-border flex size-5 items-center justify-center rounded-full;
7
+
8
+ &[data-unchecked] {
9
+ @apply border-border bg-secondary;
10
+ }
11
+
12
+ &[data-checked] {
13
+ @apply border-primary bg-primary;
14
+ }
15
+
16
+ &:focus-visible {
17
+ @apply status-focused;
18
+ }
19
+ }
20
+
21
+ .radio__indicator {
22
+ @apply flex items-center justify-center;
23
+
24
+ &[data-unchecked] {
25
+ @apply hidden;
26
+ }
27
+
28
+ &::before {
29
+ @apply block size-2 rounded-full bg-background content-[''];
30
+ }
31
+ }
@@ -1 +1,32 @@
1
1
  /** Base Styling */
2
+ .table {
3
+ @apply w-full border-collapse bg-card;
4
+ }
5
+
6
+ .table__thead {
7
+ @apply bg-secondary text-secondary-foreground;
8
+ }
9
+
10
+ .table__th {
11
+ @apply border-border px-4 py-2 text-left font-medium;
12
+ }
13
+
14
+ .table__tbody {
15
+ @apply divide-y divide-border;
16
+ }
17
+
18
+ .table__tr {
19
+ @apply cursor-pointer;
20
+
21
+ &:hover {
22
+ @apply bg-secondary/50;
23
+ }
24
+ }
25
+
26
+ .table__td {
27
+ @apply border-border px-4 py-2;
28
+ }
29
+
30
+ .table__caption {
31
+ @apply mt-2 text-sm text-secondary-foreground;
32
+ }