@fluid-app/ui-primitives 0.1.13 → 0.1.14
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/index.cjs +1 -107
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -15
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +1 -15
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +2 -107
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -6
package/dist/index.cjs
CHANGED
|
@@ -371,111 +371,6 @@ function Badge({ className, variant = "default", asChild = false, ...props }) {
|
|
|
371
371
|
...props
|
|
372
372
|
});
|
|
373
373
|
}
|
|
374
|
-
const badgeColors = {
|
|
375
|
-
white: {
|
|
376
|
-
bg: "bg-white",
|
|
377
|
-
text: "text-gray-600",
|
|
378
|
-
dot: "fill-transparent"
|
|
379
|
-
},
|
|
380
|
-
gray: {
|
|
381
|
-
bg: "bg-gray-100",
|
|
382
|
-
text: "text-gray-600",
|
|
383
|
-
dot: "fill-gray-400"
|
|
384
|
-
},
|
|
385
|
-
red: {
|
|
386
|
-
bg: "bg-red-100",
|
|
387
|
-
text: "text-red-700",
|
|
388
|
-
dot: "fill-red-500"
|
|
389
|
-
},
|
|
390
|
-
yellow: {
|
|
391
|
-
bg: "bg-yellow-100",
|
|
392
|
-
text: "text-yellow-800",
|
|
393
|
-
dot: "fill-yellow-500"
|
|
394
|
-
},
|
|
395
|
-
orange: {
|
|
396
|
-
bg: "bg-orange-100",
|
|
397
|
-
text: "text-orange-700",
|
|
398
|
-
dot: "fill-orange-500"
|
|
399
|
-
},
|
|
400
|
-
green: {
|
|
401
|
-
bg: "bg-green-100",
|
|
402
|
-
text: "text-green-700",
|
|
403
|
-
dot: "fill-green-400"
|
|
404
|
-
},
|
|
405
|
-
blue: {
|
|
406
|
-
bg: "bg-blue-100",
|
|
407
|
-
text: "text-blue-700",
|
|
408
|
-
dot: "fill-blue-500"
|
|
409
|
-
},
|
|
410
|
-
indigo: {
|
|
411
|
-
bg: "bg-indigo-100",
|
|
412
|
-
text: "text-indigo-700",
|
|
413
|
-
dot: "fill-indigo-500"
|
|
414
|
-
},
|
|
415
|
-
purple: {
|
|
416
|
-
bg: "bg-purple-100",
|
|
417
|
-
text: "text-purple-700",
|
|
418
|
-
dot: "fill-purple-500"
|
|
419
|
-
},
|
|
420
|
-
pink: {
|
|
421
|
-
bg: "bg-pink-100",
|
|
422
|
-
text: "text-pink-700",
|
|
423
|
-
dot: "fill-pink-500"
|
|
424
|
-
},
|
|
425
|
-
amber: {
|
|
426
|
-
bg: "bg-amber-100",
|
|
427
|
-
text: "text-amber-700",
|
|
428
|
-
dot: "fill-amber-500"
|
|
429
|
-
},
|
|
430
|
-
cyan: {
|
|
431
|
-
bg: "bg-cyan-100",
|
|
432
|
-
text: "text-cyan-700",
|
|
433
|
-
dot: "fill-cyan-500"
|
|
434
|
-
},
|
|
435
|
-
teal: {
|
|
436
|
-
bg: "bg-teal-100",
|
|
437
|
-
text: "text-teal-700",
|
|
438
|
-
dot: "fill-teal-500"
|
|
439
|
-
},
|
|
440
|
-
emerald: {
|
|
441
|
-
bg: "bg-emerald-100",
|
|
442
|
-
text: "text-emerald-700",
|
|
443
|
-
dot: "fill-emerald-500"
|
|
444
|
-
}
|
|
445
|
-
};
|
|
446
|
-
const colorBadgeSizes = {
|
|
447
|
-
xs: "gap-x-1 rounded-lg px-1.5 py-0.5",
|
|
448
|
-
sm: "h-5 px-3 py-0.5",
|
|
449
|
-
md: "h-6 px-3 py-0.5",
|
|
450
|
-
lg: "h-8 px-3 py-0.5"
|
|
451
|
-
};
|
|
452
|
-
function StatusDot({ colorClass, size }) {
|
|
453
|
-
const d = size === "xs" ? 6 : 8;
|
|
454
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
455
|
-
className: cn("shrink-0", colorClass),
|
|
456
|
-
viewBox: "0 0 8 8",
|
|
457
|
-
width: d,
|
|
458
|
-
height: d,
|
|
459
|
-
"aria-hidden": "true",
|
|
460
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
461
|
-
cx: 4,
|
|
462
|
-
cy: 4,
|
|
463
|
-
r: 3
|
|
464
|
-
})
|
|
465
|
-
});
|
|
466
|
-
}
|
|
467
|
-
function ColorBadge({ color = "gray", dot = false, size = "md", className, children, ...props }) {
|
|
468
|
-
const colors = badgeColors[color];
|
|
469
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
470
|
-
"data-slot": "color-badge",
|
|
471
|
-
className: cn("inline-flex items-center gap-x-1.5 rounded-xl text-xs font-normal whitespace-nowrap", colorBadgeSizes[size], color === "white" && "border border-gray-300", colors.bg, colors.text, className),
|
|
472
|
-
...props,
|
|
473
|
-
children: [dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusDot, {
|
|
474
|
-
colorClass: colors.dot,
|
|
475
|
-
size
|
|
476
|
-
}), children]
|
|
477
|
-
});
|
|
478
|
-
}
|
|
479
374
|
//#endregion
|
|
480
375
|
//#region src/components/Calendar.tsx
|
|
481
376
|
const Calendar = Object.assign(function CalendarComponent({ className, classNames, showOutsideDays = true, ...props }) {
|
|
@@ -1174,7 +1069,7 @@ function Input({ className, type, ...props }) {
|
|
|
1174
1069
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
1175
1070
|
type,
|
|
1176
1071
|
"data-slot": "input",
|
|
1177
|
-
className: cn("border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent
|
|
1072
|
+
className: cn("border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
|
|
1178
1073
|
...props
|
|
1179
1074
|
});
|
|
1180
1075
|
}
|
|
@@ -1788,7 +1683,6 @@ exports.ChartTooltipContent = ChartTooltipContent;
|
|
|
1788
1683
|
exports.Collapsible = Collapsible;
|
|
1789
1684
|
exports.CollapsibleContent = CollapsibleContent;
|
|
1790
1685
|
exports.CollapsibleTrigger = CollapsibleTrigger;
|
|
1791
|
-
exports.ColorBadge = ColorBadge;
|
|
1792
1686
|
exports.DatePicker = DatePicker;
|
|
1793
1687
|
exports.Dialog = Dialog;
|
|
1794
1688
|
exports.DialogClose = DialogClose;
|