hikari-components 0.1.8

Core UI components (40+) for the Hikari design system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

// Hikari Radio Component Styles
// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;

// ============================================
// Hikari Radio Component
// Features: FUI styling, smooth transitions, glow effects
// Uses Layer 2 CSS variables (--hi-component-selection-*)
// ============================================

// ============================================
// Radio Group
// ============================================

.hi-radio-group {
  display: flex;
  gap: 12px;
}

.hi-radio-group-vertical {
  flex-direction: column;
}

.hi-radio-group-horizontal {
  flex-direction: row;
  align-items: center;
}

// ============================================
// Radio Label (wraps input + indicator + text)
// ============================================

.hi-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;

  &:hover .hi-radio-indicator:not([disabled]) {
    border-color: var(--hi-primary);
    box-shadow: 0 0 8px var(--hi-component-selection-glow);
  }
}

// ============================================
// Hidden native input
// ============================================

.hi-radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

// ============================================
// Custom radio indicator (circle)
// Uses Layer 2 variables
// ============================================

.hi-radio-indicator {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--hi-component-selection-border);
  border-radius: 50%;
  background: var(--hi-component-selection-surface);
  transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
  box-sizing: border-box;
}

// ============================================
// Inner dot (uses Layer 2 gradient)
// ============================================

.hi-radio-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--hi-component-selection-bg);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

// ============================================
// Checked state - dot becomes visible
// ============================================

.hi-radio-label input[type="radio"]:checked + .hi-radio-indicator {
  border-color: var(--hi-primary);
  box-shadow:
    0 0 6px var(--hi-component-selection-glow),
    inset 0 0 3px rgba(255, 255, 255, 0.1);
}

.hi-radio-label input[type="radio"]:checked + .hi-radio-indicator .hi-radio-dot {
  transform: translate(-50%, -50%) scale(1);
}

// ============================================
// Hover effect on checked
// ============================================

.hi-radio-label:hover input[type="radio"]:checked + .hi-radio-indicator {
  box-shadow:
    0 0 10px var(--hi-component-selection-glow),
    inset 0 0 4px rgba(255, 255, 255, 0.2);
}

// ============================================
// Disabled state
// ============================================

.hi-radio-label input[type="radio"]:disabled + .hi-radio-indicator {
  opacity: 0.4;
  cursor: not-allowed;
}

.hi-radio-label:has(input[type="radio"]:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

// ============================================
// Label text
// ============================================

.hi-radio-text {
  font-family: vars.$hikari-font-family-sans;
  font-size: vars.$hikari-font-size-base;
  font-weight: 400;
  color: var(--hi-text-primary);
  line-height: 1.5;
  white-space: nowrap;
}