@galvyn-io/design 0.1.0 → 0.2.0
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/dist/components/index.cjs +79 -0
- package/dist/components/index.d.cts +33 -5
- package/dist/components/index.d.ts +33 -5
- package/dist/components/index.js +77 -1
- package/dist/galvyn.css +138 -0
- package/package.json +7 -7
|
@@ -120,6 +120,82 @@ var StatusDot = ({ status, label, className }) => /* @__PURE__ */ jsxRuntime.jsx
|
|
|
120
120
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: `galvyn-status-dot galvyn-status-dot-${status}` }),
|
|
121
121
|
label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-status-label", children: label })
|
|
122
122
|
] });
|
|
123
|
+
var StatCard = react.forwardRef(
|
|
124
|
+
({ icon, label, value, sublabel, accent = false, border = "subtle", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
ref,
|
|
128
|
+
className: cn(
|
|
129
|
+
"galvyn-stat-card",
|
|
130
|
+
accent && "galvyn-stat-card-accent",
|
|
131
|
+
galvynBorderClass(border),
|
|
132
|
+
className
|
|
133
|
+
),
|
|
134
|
+
...props,
|
|
135
|
+
children: [
|
|
136
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "galvyn-stat-card-header", children: [
|
|
137
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-stat-card-icon", children: icon }),
|
|
138
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-stat-card-label", children: label })
|
|
139
|
+
] }),
|
|
140
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("galvyn-stat-card-value", accent && "galvyn-stat-card-value-accent"), children: value }),
|
|
141
|
+
sublabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "galvyn-stat-card-sublabel", children: sublabel }),
|
|
142
|
+
children
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
)
|
|
146
|
+
);
|
|
147
|
+
StatCard.displayName = "StatCard";
|
|
148
|
+
function FilterToggle({
|
|
149
|
+
options,
|
|
150
|
+
value,
|
|
151
|
+
onChange,
|
|
152
|
+
size = "md",
|
|
153
|
+
className,
|
|
154
|
+
...props
|
|
155
|
+
}) {
|
|
156
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("galvyn-filter-toggle", `galvyn-filter-toggle-${size}`, className), ...props, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
157
|
+
"button",
|
|
158
|
+
{
|
|
159
|
+
type: "button",
|
|
160
|
+
onClick: () => onChange(opt.value),
|
|
161
|
+
className: cn(
|
|
162
|
+
"galvyn-filter-toggle-btn",
|
|
163
|
+
value === opt.value && "galvyn-filter-toggle-btn-active"
|
|
164
|
+
),
|
|
165
|
+
children: [
|
|
166
|
+
opt.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-filter-toggle-icon", children: opt.icon }),
|
|
167
|
+
opt.label,
|
|
168
|
+
opt.count != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "galvyn-filter-toggle-count", children: [
|
|
169
|
+
"(",
|
|
170
|
+
opt.count,
|
|
171
|
+
")"
|
|
172
|
+
] })
|
|
173
|
+
]
|
|
174
|
+
},
|
|
175
|
+
opt.value
|
|
176
|
+
)) });
|
|
177
|
+
}
|
|
178
|
+
var SectionHeader = react.forwardRef(
|
|
179
|
+
({ icon, title, subtitle, action, size = "md", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
180
|
+
"div",
|
|
181
|
+
{
|
|
182
|
+
ref,
|
|
183
|
+
className: cn("galvyn-section-header", `galvyn-section-header-${size}`, className),
|
|
184
|
+
...props,
|
|
185
|
+
children: [
|
|
186
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "galvyn-section-header-left", children: [
|
|
187
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-section-header-icon", children: icon }),
|
|
188
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
189
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "galvyn-section-header-title", children: title }),
|
|
190
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "galvyn-section-header-subtitle", children: subtitle })
|
|
191
|
+
] })
|
|
192
|
+
] }),
|
|
193
|
+
action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "galvyn-section-header-action", children: action })
|
|
194
|
+
]
|
|
195
|
+
}
|
|
196
|
+
)
|
|
197
|
+
);
|
|
198
|
+
SectionHeader.displayName = "SectionHeader";
|
|
123
199
|
var Spinner = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "galvyn-spinner", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
|
|
124
200
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
|
|
125
201
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 7a5.5 5.5 0 00-5.5-5.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
@@ -128,7 +204,10 @@ var Spinner = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "galvyn-
|
|
|
128
204
|
exports.Badge = Badge;
|
|
129
205
|
exports.Button = Button;
|
|
130
206
|
exports.Card = Card;
|
|
207
|
+
exports.FilterToggle = FilterToggle;
|
|
131
208
|
exports.GradientBorder = GradientBorder;
|
|
132
209
|
exports.Input = Input;
|
|
133
210
|
exports.Kbd = Kbd;
|
|
211
|
+
exports.SectionHeader = SectionHeader;
|
|
212
|
+
exports.StatCard = StatCard;
|
|
134
213
|
exports.StatusDot = StatusDot;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type GalvynVariant = 'default' | 'secondary' | 'ghost' | 'accent' | 'danger';
|
|
4
|
-
type GalvynSize = 'sm' | 'md' | 'lg';
|
|
5
|
-
type GalvynBorderGradient = 'none' | 'subtle' | 'medium' | 'strong' | 'accent' | 'shimmer';
|
|
3
|
+
import { GalvynVariant, GalvynSize, GalvynBorderGradient } from '../index.cjs';
|
|
6
4
|
|
|
7
5
|
interface GradientBorderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
6
|
variant?: GalvynBorderGradient;
|
|
@@ -43,5 +41,35 @@ interface StatusDotProps {
|
|
|
43
41
|
className?: string;
|
|
44
42
|
}
|
|
45
43
|
declare const StatusDot: React.FC<StatusDotProps>;
|
|
44
|
+
interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
icon?: React.ReactNode;
|
|
46
|
+
label: string;
|
|
47
|
+
value: React.ReactNode;
|
|
48
|
+
sublabel?: React.ReactNode;
|
|
49
|
+
accent?: boolean;
|
|
50
|
+
border?: GalvynBorderGradient;
|
|
51
|
+
}
|
|
52
|
+
declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
53
|
+
interface FilterToggleOption<T extends string = string> {
|
|
54
|
+
value: T;
|
|
55
|
+
label: React.ReactNode;
|
|
56
|
+
icon?: React.ReactNode;
|
|
57
|
+
count?: number;
|
|
58
|
+
}
|
|
59
|
+
interface FilterToggleProps<T extends string = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
60
|
+
options: FilterToggleOption<T>[];
|
|
61
|
+
value: T;
|
|
62
|
+
onChange: (value: T) => void;
|
|
63
|
+
size?: 'sm' | 'md';
|
|
64
|
+
}
|
|
65
|
+
declare function FilterToggle<T extends string = string>({ options, value, onChange, size, className, ...props }: FilterToggleProps<T>): react_jsx_runtime.JSX.Element;
|
|
66
|
+
interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
67
|
+
icon?: React.ReactNode;
|
|
68
|
+
title: string;
|
|
69
|
+
subtitle?: React.ReactNode;
|
|
70
|
+
action?: React.ReactNode;
|
|
71
|
+
size?: 'sm' | 'md' | 'lg';
|
|
72
|
+
}
|
|
73
|
+
declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
46
74
|
|
|
47
|
-
export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, GradientBorder, type GradientBorderProps, Input, type InputProps, Kbd, StatusDot, type StatusDotProps };
|
|
75
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, FilterToggle, type FilterToggleOption, type FilterToggleProps, GradientBorder, type GradientBorderProps, Input, type InputProps, Kbd, SectionHeader, type SectionHeaderProps, StatCard, type StatCardProps, StatusDot, type StatusDotProps };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type GalvynVariant = 'default' | 'secondary' | 'ghost' | 'accent' | 'danger';
|
|
4
|
-
type GalvynSize = 'sm' | 'md' | 'lg';
|
|
5
|
-
type GalvynBorderGradient = 'none' | 'subtle' | 'medium' | 'strong' | 'accent' | 'shimmer';
|
|
3
|
+
import { GalvynVariant, GalvynSize, GalvynBorderGradient } from '../index.js';
|
|
6
4
|
|
|
7
5
|
interface GradientBorderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
6
|
variant?: GalvynBorderGradient;
|
|
@@ -43,5 +41,35 @@ interface StatusDotProps {
|
|
|
43
41
|
className?: string;
|
|
44
42
|
}
|
|
45
43
|
declare const StatusDot: React.FC<StatusDotProps>;
|
|
44
|
+
interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
icon?: React.ReactNode;
|
|
46
|
+
label: string;
|
|
47
|
+
value: React.ReactNode;
|
|
48
|
+
sublabel?: React.ReactNode;
|
|
49
|
+
accent?: boolean;
|
|
50
|
+
border?: GalvynBorderGradient;
|
|
51
|
+
}
|
|
52
|
+
declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
53
|
+
interface FilterToggleOption<T extends string = string> {
|
|
54
|
+
value: T;
|
|
55
|
+
label: React.ReactNode;
|
|
56
|
+
icon?: React.ReactNode;
|
|
57
|
+
count?: number;
|
|
58
|
+
}
|
|
59
|
+
interface FilterToggleProps<T extends string = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
60
|
+
options: FilterToggleOption<T>[];
|
|
61
|
+
value: T;
|
|
62
|
+
onChange: (value: T) => void;
|
|
63
|
+
size?: 'sm' | 'md';
|
|
64
|
+
}
|
|
65
|
+
declare function FilterToggle<T extends string = string>({ options, value, onChange, size, className, ...props }: FilterToggleProps<T>): react_jsx_runtime.JSX.Element;
|
|
66
|
+
interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
67
|
+
icon?: React.ReactNode;
|
|
68
|
+
title: string;
|
|
69
|
+
subtitle?: React.ReactNode;
|
|
70
|
+
action?: React.ReactNode;
|
|
71
|
+
size?: 'sm' | 'md' | 'lg';
|
|
72
|
+
}
|
|
73
|
+
declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
46
74
|
|
|
47
|
-
export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, GradientBorder, type GradientBorderProps, Input, type InputProps, Kbd, StatusDot, type StatusDotProps };
|
|
75
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, FilterToggle, type FilterToggleOption, type FilterToggleProps, GradientBorder, type GradientBorderProps, Input, type InputProps, Kbd, SectionHeader, type SectionHeaderProps, StatCard, type StatCardProps, StatusDot, type StatusDotProps };
|
package/dist/components/index.js
CHANGED
|
@@ -118,9 +118,85 @@ var StatusDot = ({ status, label, className }) => /* @__PURE__ */ jsxs("span", {
|
|
|
118
118
|
/* @__PURE__ */ jsx("span", { className: `galvyn-status-dot galvyn-status-dot-${status}` }),
|
|
119
119
|
label && /* @__PURE__ */ jsx("span", { className: "galvyn-status-label", children: label })
|
|
120
120
|
] });
|
|
121
|
+
var StatCard = forwardRef(
|
|
122
|
+
({ icon, label, value, sublabel, accent = false, border = "subtle", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
123
|
+
"div",
|
|
124
|
+
{
|
|
125
|
+
ref,
|
|
126
|
+
className: cn(
|
|
127
|
+
"galvyn-stat-card",
|
|
128
|
+
accent && "galvyn-stat-card-accent",
|
|
129
|
+
galvynBorderClass(border),
|
|
130
|
+
className
|
|
131
|
+
),
|
|
132
|
+
...props,
|
|
133
|
+
children: [
|
|
134
|
+
/* @__PURE__ */ jsxs("div", { className: "galvyn-stat-card-header", children: [
|
|
135
|
+
icon && /* @__PURE__ */ jsx("span", { className: "galvyn-stat-card-icon", children: icon }),
|
|
136
|
+
/* @__PURE__ */ jsx("span", { className: "galvyn-stat-card-label", children: label })
|
|
137
|
+
] }),
|
|
138
|
+
/* @__PURE__ */ jsx("p", { className: cn("galvyn-stat-card-value", accent && "galvyn-stat-card-value-accent"), children: value }),
|
|
139
|
+
sublabel && /* @__PURE__ */ jsx("p", { className: "galvyn-stat-card-sublabel", children: sublabel }),
|
|
140
|
+
children
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
)
|
|
144
|
+
);
|
|
145
|
+
StatCard.displayName = "StatCard";
|
|
146
|
+
function FilterToggle({
|
|
147
|
+
options,
|
|
148
|
+
value,
|
|
149
|
+
onChange,
|
|
150
|
+
size = "md",
|
|
151
|
+
className,
|
|
152
|
+
...props
|
|
153
|
+
}) {
|
|
154
|
+
return /* @__PURE__ */ jsx("div", { className: cn("galvyn-filter-toggle", `galvyn-filter-toggle-${size}`, className), ...props, children: options.map((opt) => /* @__PURE__ */ jsxs(
|
|
155
|
+
"button",
|
|
156
|
+
{
|
|
157
|
+
type: "button",
|
|
158
|
+
onClick: () => onChange(opt.value),
|
|
159
|
+
className: cn(
|
|
160
|
+
"galvyn-filter-toggle-btn",
|
|
161
|
+
value === opt.value && "galvyn-filter-toggle-btn-active"
|
|
162
|
+
),
|
|
163
|
+
children: [
|
|
164
|
+
opt.icon && /* @__PURE__ */ jsx("span", { className: "galvyn-filter-toggle-icon", children: opt.icon }),
|
|
165
|
+
opt.label,
|
|
166
|
+
opt.count != null && /* @__PURE__ */ jsxs("span", { className: "galvyn-filter-toggle-count", children: [
|
|
167
|
+
"(",
|
|
168
|
+
opt.count,
|
|
169
|
+
")"
|
|
170
|
+
] })
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
opt.value
|
|
174
|
+
)) });
|
|
175
|
+
}
|
|
176
|
+
var SectionHeader = forwardRef(
|
|
177
|
+
({ icon, title, subtitle, action, size = "md", className, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
178
|
+
"div",
|
|
179
|
+
{
|
|
180
|
+
ref,
|
|
181
|
+
className: cn("galvyn-section-header", `galvyn-section-header-${size}`, className),
|
|
182
|
+
...props,
|
|
183
|
+
children: [
|
|
184
|
+
/* @__PURE__ */ jsxs("div", { className: "galvyn-section-header-left", children: [
|
|
185
|
+
icon && /* @__PURE__ */ jsx("span", { className: "galvyn-section-header-icon", children: icon }),
|
|
186
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
187
|
+
/* @__PURE__ */ jsx("h3", { className: "galvyn-section-header-title", children: title }),
|
|
188
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "galvyn-section-header-subtitle", children: subtitle })
|
|
189
|
+
] })
|
|
190
|
+
] }),
|
|
191
|
+
action && /* @__PURE__ */ jsx("div", { className: "galvyn-section-header-action", children: action })
|
|
192
|
+
]
|
|
193
|
+
}
|
|
194
|
+
)
|
|
195
|
+
);
|
|
196
|
+
SectionHeader.displayName = "SectionHeader";
|
|
121
197
|
var Spinner = () => /* @__PURE__ */ jsxs("svg", { className: "galvyn-spinner", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
|
|
122
198
|
/* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
|
|
123
199
|
/* @__PURE__ */ jsx("path", { d: "M12.5 7a5.5 5.5 0 00-5.5-5.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
124
200
|
] });
|
|
125
201
|
|
|
126
|
-
export { Badge, Button, Card, GradientBorder, Input, Kbd, StatusDot };
|
|
202
|
+
export { Badge, Button, Card, FilterToggle, GradientBorder, Input, Kbd, SectionHeader, StatCard, StatusDot };
|
package/dist/galvyn.css
CHANGED
|
@@ -476,3 +476,141 @@
|
|
|
476
476
|
.galvyn-status-dot-warning { background: var(--galvyn-warning); }
|
|
477
477
|
.galvyn-status-dot-error { background: var(--galvyn-error); }
|
|
478
478
|
.galvyn-status-label { font-size: 0.75rem; color: var(--galvyn-text-200); }
|
|
479
|
+
|
|
480
|
+
|
|
481
|
+
/* ─── Stat Card ─────────────────────────────────── */
|
|
482
|
+
.galvyn-stat-card {
|
|
483
|
+
background: var(--galvyn-surface-100);
|
|
484
|
+
border-radius: var(--galvyn-radius-lg);
|
|
485
|
+
padding: var(--galvyn-space-4);
|
|
486
|
+
display: flex;
|
|
487
|
+
flex-direction: column;
|
|
488
|
+
gap: var(--galvyn-space-2);
|
|
489
|
+
}
|
|
490
|
+
.galvyn-stat-card-accent {
|
|
491
|
+
border: 1px solid hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55% / 0.3);
|
|
492
|
+
}
|
|
493
|
+
.galvyn-stat-card-header {
|
|
494
|
+
display: flex;
|
|
495
|
+
align-items: center;
|
|
496
|
+
gap: var(--galvyn-space-2);
|
|
497
|
+
}
|
|
498
|
+
.galvyn-stat-card-icon {
|
|
499
|
+
display: flex;
|
|
500
|
+
color: var(--galvyn-accent-text);
|
|
501
|
+
}
|
|
502
|
+
.galvyn-stat-card-label {
|
|
503
|
+
font-family: var(--galvyn-font-mono);
|
|
504
|
+
font-size: 0.6875rem;
|
|
505
|
+
font-weight: 500;
|
|
506
|
+
color: var(--galvyn-text-400);
|
|
507
|
+
text-transform: uppercase;
|
|
508
|
+
letter-spacing: 0.06em;
|
|
509
|
+
}
|
|
510
|
+
.galvyn-stat-card-value {
|
|
511
|
+
font-family: var(--galvyn-font-display);
|
|
512
|
+
font-size: 1.5rem;
|
|
513
|
+
font-weight: 700;
|
|
514
|
+
color: var(--galvyn-text-100);
|
|
515
|
+
line-height: 1.2;
|
|
516
|
+
}
|
|
517
|
+
.galvyn-stat-card-value-accent {
|
|
518
|
+
color: var(--galvyn-accent-text);
|
|
519
|
+
}
|
|
520
|
+
.galvyn-stat-card-sublabel {
|
|
521
|
+
font-size: 0.6875rem;
|
|
522
|
+
color: var(--galvyn-text-400);
|
|
523
|
+
}
|
|
524
|
+
@media (min-width: 768px) {
|
|
525
|
+
.galvyn-stat-card { padding: var(--galvyn-space-5); }
|
|
526
|
+
.galvyn-stat-card-value { font-size: 1.875rem; }
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
|
|
530
|
+
/* ─── Filter Toggle ─────────────────────────────── */
|
|
531
|
+
.galvyn-filter-toggle {
|
|
532
|
+
display: flex;
|
|
533
|
+
align-items: center;
|
|
534
|
+
gap: 2px;
|
|
535
|
+
background: var(--galvyn-surface-100);
|
|
536
|
+
border-radius: var(--galvyn-radius-lg);
|
|
537
|
+
padding: 3px;
|
|
538
|
+
}
|
|
539
|
+
.galvyn-filter-toggle-sm { padding: 2px; }
|
|
540
|
+
.galvyn-filter-toggle-btn {
|
|
541
|
+
display: flex;
|
|
542
|
+
align-items: center;
|
|
543
|
+
gap: 4px;
|
|
544
|
+
padding: 6px 10px;
|
|
545
|
+
border-radius: var(--galvyn-radius-md);
|
|
546
|
+
font-family: var(--galvyn-font-sans);
|
|
547
|
+
font-size: 0.75rem;
|
|
548
|
+
font-weight: 500;
|
|
549
|
+
color: var(--galvyn-text-400);
|
|
550
|
+
background: transparent;
|
|
551
|
+
border: none;
|
|
552
|
+
cursor: pointer;
|
|
553
|
+
white-space: nowrap;
|
|
554
|
+
transition: color var(--galvyn-duration-fast) var(--galvyn-ease-default),
|
|
555
|
+
background var(--galvyn-duration-fast) var(--galvyn-ease-default),
|
|
556
|
+
box-shadow var(--galvyn-duration-fast) var(--galvyn-ease-default);
|
|
557
|
+
}
|
|
558
|
+
.galvyn-filter-toggle-sm .galvyn-filter-toggle-btn {
|
|
559
|
+
padding: 4px 8px;
|
|
560
|
+
font-size: 0.6875rem;
|
|
561
|
+
}
|
|
562
|
+
.galvyn-filter-toggle-btn:hover:not(.galvyn-filter-toggle-btn-active) {
|
|
563
|
+
color: var(--galvyn-text-200);
|
|
564
|
+
}
|
|
565
|
+
.galvyn-filter-toggle-btn-active {
|
|
566
|
+
background: var(--galvyn-bg-000);
|
|
567
|
+
color: var(--galvyn-text-100);
|
|
568
|
+
box-shadow: var(--galvyn-shadow-xs);
|
|
569
|
+
}
|
|
570
|
+
.galvyn-filter-toggle-icon { display: flex; }
|
|
571
|
+
.galvyn-filter-toggle-count {
|
|
572
|
+
font-size: 0.625rem;
|
|
573
|
+
opacity: 0.6;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
|
|
577
|
+
/* ─── Section Header ────────────────────────────── */
|
|
578
|
+
.galvyn-section-header {
|
|
579
|
+
display: flex;
|
|
580
|
+
align-items: center;
|
|
581
|
+
justify-content: space-between;
|
|
582
|
+
gap: var(--galvyn-space-3);
|
|
583
|
+
}
|
|
584
|
+
.galvyn-section-header-left {
|
|
585
|
+
display: flex;
|
|
586
|
+
align-items: center;
|
|
587
|
+
gap: var(--galvyn-space-2-5);
|
|
588
|
+
min-width: 0;
|
|
589
|
+
}
|
|
590
|
+
.galvyn-section-header-icon {
|
|
591
|
+
display: flex;
|
|
592
|
+
flex-shrink: 0;
|
|
593
|
+
color: var(--galvyn-accent-text);
|
|
594
|
+
}
|
|
595
|
+
.galvyn-section-header-title {
|
|
596
|
+
font-family: var(--galvyn-font-sans);
|
|
597
|
+
font-weight: 600;
|
|
598
|
+
color: var(--galvyn-text-100);
|
|
599
|
+
margin: 0;
|
|
600
|
+
line-height: 1.3;
|
|
601
|
+
}
|
|
602
|
+
.galvyn-section-header-sm .galvyn-section-header-title { font-size: 0.8125rem; }
|
|
603
|
+
.galvyn-section-header-md .galvyn-section-header-title { font-size: 0.875rem; }
|
|
604
|
+
.galvyn-section-header-lg .galvyn-section-header-title { font-size: 1.125rem; }
|
|
605
|
+
.galvyn-section-header-subtitle {
|
|
606
|
+
font-size: 0.75rem;
|
|
607
|
+
color: var(--galvyn-text-400);
|
|
608
|
+
margin: 0;
|
|
609
|
+
line-height: 1.4;
|
|
610
|
+
}
|
|
611
|
+
.galvyn-section-header-action {
|
|
612
|
+
display: flex;
|
|
613
|
+
align-items: center;
|
|
614
|
+
gap: var(--galvyn-space-2);
|
|
615
|
+
flex-shrink: 0;
|
|
616
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@galvyn-io/design",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Galvyn Design System — dark-first, monotone with surgical accent color. Tailwind preset + CSS variables + React components.",
|
|
5
5
|
"author": "Yatharth Gupta",
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,20 +14,20 @@
|
|
|
14
14
|
"types": "./dist/index.d.ts",
|
|
15
15
|
"exports": {
|
|
16
16
|
".": {
|
|
17
|
-
"types": "./dist/index.d.ts",
|
|
18
17
|
"import": "./dist/index.js",
|
|
19
|
-
"require": "./dist/index.cjs"
|
|
18
|
+
"require": "./dist/index.cjs",
|
|
19
|
+
"types": "./dist/index.d.ts"
|
|
20
20
|
},
|
|
21
21
|
"./css": "./dist/galvyn.css",
|
|
22
22
|
"./preset": {
|
|
23
|
-
"types": "./dist/preset.d.ts",
|
|
24
23
|
"import": "./dist/preset.js",
|
|
25
|
-
"require": "./dist/preset.cjs"
|
|
24
|
+
"require": "./dist/preset.cjs",
|
|
25
|
+
"types": "./dist/preset.d.ts"
|
|
26
26
|
},
|
|
27
27
|
"./components": {
|
|
28
|
-
"types": "./dist/components/index.d.ts",
|
|
29
28
|
"import": "./dist/components/index.js",
|
|
30
|
-
"require": "./dist/components/index.cjs"
|
|
29
|
+
"require": "./dist/components/index.cjs",
|
|
30
|
+
"types": "./dist/components/index.d.ts"
|
|
31
31
|
},
|
|
32
32
|
"./tokens": "./dist/tokens.json"
|
|
33
33
|
},
|