@fastnd/components 1.0.5 → 1.0.6

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.
@@ -3,6 +3,8 @@ export interface FavoriteButtonProps extends Omit<React.ButtonHTMLAttributes<HTM
3
3
  pressed: boolean;
4
4
  projectName: string;
5
5
  onToggle?: (nextPressed: boolean) => void;
6
+ color?: string;
7
+ activeColor?: string;
6
8
  className?: string;
7
9
  }
8
10
  export declare const FavoriteButton: React.ForwardRefExoticComponent<FavoriteButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -7,6 +7,8 @@ export interface ProjectRow {
7
7
  app: string;
8
8
  status: StatusBadgeStatus;
9
9
  favorite: boolean;
10
+ createdAt: string;
11
+ updatedAt: string;
10
12
  }
11
13
  export interface ProjectTableProps extends React.HTMLAttributes<HTMLDivElement> {
12
14
  rows: ProjectRow[];
@@ -3,6 +3,8 @@ export type StatusBadgeStatus = 'neu' | 'offen' | 'in-prufung' | 'validierung' |
3
3
  export declare const STATUS_LABELS: Record<StatusBadgeStatus, string>;
4
4
  export interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
5
5
  status: StatusBadgeStatus;
6
+ color?: string;
7
+ backgroundColor?: string;
6
8
  className?: string;
7
9
  }
8
10
  export declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
@@ -1,7 +1,14 @@
1
1
  import React from 'react';
2
+ export interface StatusSegment {
3
+ status: string;
4
+ label: string;
5
+ value: number;
6
+ color: string;
7
+ }
2
8
  export interface StatusChartProps extends React.HTMLAttributes<HTMLDivElement> {
3
- total: number;
9
+ data: StatusSegment[];
4
10
  totalLabel?: string;
11
+ onSegmentClick?: (status: string) => void;
5
12
  className?: string;
6
13
  }
7
14
  export declare const StatusChart: React.ForwardRefExoticComponent<StatusChartProps & React.RefAttributes<HTMLDivElement>>;
@@ -5,6 +5,7 @@ export interface StatusLegendItemProps extends React.ButtonHTMLAttributes<HTMLBu
5
5
  label: string;
6
6
  count: number;
7
7
  active?: boolean;
8
+ color?: string;
8
9
  className?: string;
9
10
  }
10
11
  export declare const StatusLegendItem: React.ForwardRefExoticComponent<StatusLegendItemProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1,215 +1,316 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('._status-badge_z2v4m_3{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:1rem;font-size:.75rem;font-weight:500;line-height:1}._status-badge_z2v4m_3:before{content:"";display:block;width:6px;height:6px;border-radius:50%}._status-badge--neu_z2v4m_22{background-color:hsl(var(--status-neu) / .1);color:hsl(var(--status-neu))}._status-badge--neu_z2v4m_22:before{background-color:hsl(var(--status-neu))}._status-badge--offen_z2v4m_31{background-color:hsl(var(--status-offen) / .1);color:hsl(var(--status-offen))}._status-badge--offen_z2v4m_31:before{background-color:hsl(var(--status-offen))}._status-badge--in-prufung_z2v4m_40{background-color:hsl(var(--status-in-prufung) / .15);color:#aa8109}._status-badge--in-prufung_z2v4m_40:before{background-color:hsl(var(--status-in-prufung))}._status-badge--validierung_z2v4m_49{background-color:hsl(var(--status-validierung) / .15);color:#bd740f}._status-badge--validierung_z2v4m_49:before{background-color:hsl(var(--status-validierung))}._status-badge--abgeschlossen_z2v4m_58{background-color:hsl(var(--status-abgeschlossen) / .15);color:#178267}._status-badge--abgeschlossen_z2v4m_58:before{background-color:hsl(var(--status-abgeschlossen))}._favorite-btn_1q17j_3{background:none;border:none;color:hsl(var(--muted-foreground) / .5);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.375rem;border-radius:var(--radius);transition:all .2s ease}._favorite-btn_1q17j_3:hover,._favorite-btn_1q17j_3:focus-visible{background-color:hsl(var(--muted));color:hsl(var(--score-medium));outline:none}._favorite-btn--active_1q17j_23{color:hsl(var(--score-medium))}._favorite-btn_1q17j_3 svg{width:18px;height:18px;fill:currentColor}._status-legend__item_senma_3{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:background-color .2s ease;border:1px solid transparent;background:none;width:100%}._status-legend__item_senma_3:hover,._status-legend__item_senma_3:focus-visible{background-color:hsl(var(--muted));outline:none}._status-legend__item--active_senma_22{background-color:hsl(var(--muted));border-color:hsl(var(--border))}._status-legend__label-wrap_senma_27{display:flex;align-items:center;gap:.5rem}._status-legend__color_senma_33{width:12px;height:12px;border-radius:50%;flex-shrink:0}._status-legend__label_senma_27{font-size:.875rem;color:hsl(var(--foreground));font-weight:500}._status-legend__count_senma_46{font-family:var(--font-grotesk);font-size:.875rem;color:hsl(var(--muted-foreground));font-weight:600;background-color:hsl(var(--secondary));padding:.125rem .5rem;border-radius:1rem}._color-neu_senma_56{background-color:hsl(var(--status-neu))}._color-offen_senma_60{background-color:hsl(var(--status-offen))}._color-in-prufung_senma_64{background-color:hsl(var(--status-in-prufung))}._color-validierung_senma_68{background-color:hsl(var(--status-validierung))}._color-abgeschlossen_senma_72{background-color:hsl(var(--status-abgeschlossen))}._color-alle_senma_76{background-color:hsl(var(--border))}._status-overview__chart-container_23w3c_3{position:relative;width:200px;height:200px;margin:1rem auto 2rem;display:flex;align-items:center;justify-content:center}._status-chart_23w3c_13{width:100%;height:100%;border-radius:50%;background:conic-gradient(hsl(var(--status-neu)) 0% 35%,hsl(var(--status-offen)) 35% 65%,hsl(var(--status-in-prufung)) 65% 85%,hsl(var(--status-validierung)) 85% 95%,hsl(var(--status-abgeschlossen)) 95% 100%);position:absolute;top:0;left:0;transition:transform .3s ease}._status-chart_23w3c_13:hover{transform:scale(1.02)}._status-chart__hole_23w3c_32{width:140px;height:140px;background-color:hsl(var(--card));border-radius:50%;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset var(--shadow-sm)}._status-chart__total-value_23w3c_46{font-family:var(--font-clash);font-size:2rem;font-weight:600;line-height:1;color:hsl(var(--foreground))}._status-chart__total-label_23w3c_54{font-size:.75rem;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}:root{--primary: 209 100% 56%;--primary-hover: 207 82% 42%;--accent: 207 82% 42%;--background: 0 0% 100%;--foreground: 215 25% 15%;--muted: 210 15% 93%;--muted-foreground: 215 15% 45%;--secondary: 210 12% 94%;--border: 210 20% 90%;--input: 210 15% 92%;--card: 0 0% 100%;--card-foreground: 215 25% 15%;--popover: 0 0% 100%;--popover-foreground: 215 25% 15%;--destructive: 0 72% 51%;--score-high: 165 70% 42%;--score-medium: 45 90% 50%;--score-low: 35 85% 55%;--sidebar-background: 0 0% 100%;--sidebar-foreground: 215 20% 25%;--sidebar-primary: 209 100% 56%;--sidebar-accent: 210 20% 96%;--sidebar-border: 210 15% 92%;--radius: .5rem;--shadow-sm: 0 1px 2px 0 hsl(215 25% 15% / .04);--shadow-md: 0 4px 6px -1px hsl(215 25% 15% / .08);--shadow-lg: 0 10px 15px -3px hsl(215 25% 15% / .1);--shadow-card: 0 2px 8px hsl(215 25% 15% / .06);--gradient-primary: linear-gradient(135deg, hsl(209 100% 56%), hsl(207 82% 42%));--status-neu: var(--primary);--status-offen: 210 15% 45%;--status-in-prufung: var(--score-medium);--status-validierung: var(--score-low);--status-abgeschlossen: var(--score-high);--font-inter: "Inter", sans-serif;--font-clash: "Clash Grotesk", sans-serif;--font-grotesk: "Space Grotesk", sans-serif}._table-container_1nsqr_3{overflow-x:auto}._project-table_1nsqr_7{width:100%;border-collapse:separate;border-spacing:0;text-align:left}._project-table__head_1nsqr_14 th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground));padding:.75rem 1rem;border-bottom:1px solid hsl(var(--border));font-weight:600;white-space:nowrap}._project-table__row_1nsqr_25{transition:background-color .15s ease;cursor:default}._project-table__row_1nsqr_25:hover{background-color:hsl(var(--muted) / .5)}._project-table__row_1nsqr_25 td{padding:1rem;border-bottom:1px solid hsl(var(--border));font-size:.875rem;color:hsl(var(--foreground));vertical-align:middle}._project-table__row_1nsqr_25:last-child td{border-bottom:none}._project-table__name_1nsqr_46{font-weight:500;color:hsl(var(--foreground))}._project-table__client_1nsqr_51{color:hsl(var(--muted-foreground));font-size:.8125rem}')),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
- import { jsx as e, jsxs as c } from "react/jsx-runtime";
3
- import h from "react";
4
- function m(t) {
5
- var s, n, a = "";
6
- if (typeof t == "string" || typeof t == "number") a += t;
1
+ (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('._status-badge_1vytb_3{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:1rem;font-size:.75rem;font-weight:500;line-height:1;color:var(--custom-color, var(--current-color));background-color:var(--custom-bg, var(--current-bg));white-space:nowrap}._status-badge_1vytb_3:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background-color:var(--custom-color, var(--current-color))}._status-badge--neu_1vytb_26{--current-color: hsl(var(--status-neu));--current-bg: hsl(var(--status-neu) / .1)}._status-badge--offen_1vytb_31{--current-color: hsl(var(--status-offen));--current-bg: hsl(var(--status-offen) / .1)}._status-badge--in-prufung_1vytb_36{--current-color: hsl(var(--status-in-prufung));--current-bg: hsl(var(--status-in-prufung) / .1)}._status-badge--validierung_1vytb_41{--current-color: hsl(var(--status-validierung));--current-bg: hsl(var(--status-validierung) / .1)}._status-badge--abgeschlossen_1vytb_46{--current-color: hsl(var(--status-abgeschlossen));--current-bg: hsl(var(--status-abgeschlossen) / .1)}._favorite-btn_1f4wz_3{background:none;border:none;color:var(--custom-color, hsl(var(--muted-foreground) / .5));cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.375rem;border-radius:var(--radius);transition:all .2s ease}._favorite-btn_1f4wz_3:hover,._favorite-btn_1f4wz_3:focus-visible{background-color:hsl(var(--muted));color:var(--custom-active-color, hsl(var(--score-medium)));outline:none}._favorite-btn--active_1f4wz_23{color:var(--custom-active-color, hsl(var(--score-medium)))}._favorite-btn_1f4wz_3 svg{width:18px;height:18px;fill:currentColor}._status-legend__item_1935r_3{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:background-color .2s ease;border:1px solid transparent;background:none;width:100%}._status-legend__item_1935r_3:hover,._status-legend__item_1935r_3:focus-visible{background-color:hsl(var(--muted));outline:none}._status-legend__item--active_1935r_22{background-color:hsl(var(--muted));border-color:hsl(var(--border))}._status-legend__label-wrap_1935r_27{display:flex;align-items:center;gap:.5rem}._status-legend__color_1935r_33{width:12px;height:12px;border-radius:50%;flex-shrink:0;background-color:var(--custom-color, var(--current-color))}._status-legend__label_1935r_27{font-size:.875rem;color:hsl(var(--foreground));font-weight:500}._status-legend__count_1935r_47{font-family:var(--font-grotesk);font-size:.875rem;color:hsl(var(--muted-foreground));font-weight:600;background-color:hsl(var(--secondary));padding:.125rem .5rem;border-radius:1rem}._color-neu_1935r_57{--current-color: hsl(var(--status-neu))}._color-offen_1935r_61{--current-color: hsl(var(--status-offen))}._color-in-prufung_1935r_65{--current-color: hsl(var(--status-in-prufung))}._color-validierung_1935r_69{--current-color: hsl(var(--status-validierung))}._color-abgeschlossen_1935r_73{--current-color: hsl(var(--status-abgeschlossen))}._color-alle_1935r_77{--current-color: hsl(var(--status-alle))}._status-overview__chart-container_1f9eq_3{position:relative;width:200px;height:200px;margin:1rem auto 2rem;display:flex;align-items:center;justify-content:center}._status-chart-svg_1f9eq_13{width:100%;height:100%;position:absolute;top:0;left:0;filter:drop-shadow(var(--shadow-sm));pointer-events:none}._status-chart__segment_1f9eq_23{transition:all .3s cubic-bezier(.4,0,.2,1);stroke-linecap:butt;pointer-events:stroke}._status-chart__segment_1f9eq_23:hover,._status-chart__segment--hovered_1f9eq_30{stroke-width:48px;filter:brightness(1.1)}._status-chart__segment--dimmed_1f9eq_35{opacity:.6;filter:grayscale(.2)}._status-chart__hole_1f9eq_40{width:120px;height:120px;background-color:hsl(var(--card));border-radius:50%;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset var(--shadow-sm);clip-path:circle(50%)}._status-chart__total-value_1f9eq_55{font-family:var(--font-clash);font-size:2rem;font-weight:600;line-height:1;color:hsl(var(--foreground))}._status-chart__total-label_1f9eq_63{font-size:.75rem;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}:root{--primary: 209 100% 56%;--primary-hover: 207 82% 42%;--accent: 207 82% 42%;--background: 0 0% 100%;--foreground: 215 25% 15%;--muted: 210 15% 93%;--muted-foreground: 215 15% 45%;--secondary: 210 12% 94%;--border: 210 20% 90%;--input: 210 15% 92%;--card: 0 0% 100%;--card-foreground: 215 25% 15%;--popover: 0 0% 100%;--popover-foreground: 215 25% 15%;--destructive: 0 72% 51%;--score-high: 165 70% 42%;--score-medium: 45 90% 50%;--score-low: 35 85% 55%;--sidebar-background: 0 0% 100%;--sidebar-foreground: 215 20% 25%;--sidebar-primary: 209 100% 56%;--sidebar-accent: 210 20% 96%;--sidebar-border: 210 15% 92%;--radius: .5rem;--shadow-sm: 0 1px 2px 0 hsl(215 25% 15% / .04);--shadow-md: 0 4px 6px -1px hsl(215 25% 15% / .08);--shadow-lg: 0 10px 15px -3px hsl(215 25% 15% / .1);--shadow-card: 0 2px 8px hsl(215 25% 15% / .06);--gradient-primary: linear-gradient(135deg, hsl(209 100% 56%), hsl(207 82% 42%));--status-alle: 215 16% 47%;--status-neu: 210 95% 63%;--status-offen: 38 92% 50%;--status-in-prufung: 350 89% 60%;--status-validierung: 82 84% 44%;--status-abgeschlossen: 142 76% 36%;--font-inter: "Inter", sans-serif;--font-clash: "Clash Grotesk", sans-serif;--font-grotesk: "Space Grotesk", sans-serif}._table-container_fgnrg_3{overflow-x:auto}._project-table_fgnrg_7{width:100%;border-collapse:separate;border-spacing:0;text-align:left;table-layout:fixed}._project-table__head_fgnrg_15 th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground));padding:.75rem 1rem;border-bottom:1px solid hsl(var(--border));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._project-table__head_fgnrg_15 th:nth-child(1){width:auto}._project-table__head_fgnrg_15 th:nth-child(2){width:20%}._project-table__head_fgnrg_15 th:nth-child(3){width:150px}._project-table__head_fgnrg_15 th:nth-child(4){width:160px}._project-table__row_fgnrg_33{transition:background-color .15s ease;cursor:default}._project-table__row_fgnrg_33:hover{background-color:hsl(var(--muted) / .5)}._project-table__row_fgnrg_33 td{padding:1rem;border-bottom:1px solid hsl(var(--border));font-size:.875rem;color:hsl(var(--foreground));vertical-align:middle}._project-table__row_fgnrg_33 td:nth-child(1),._project-table__row_fgnrg_33 td:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._project-table__row_fgnrg_33 td:nth-child(3),._project-table__row_fgnrg_33 td:nth-child(4){overflow:visible}._project-table__row_fgnrg_33:last-child td{border-bottom:none}._project-table__name-cell_fgnrg_66{display:flex;align-items:center;gap:.5rem}._project-table__favorite_fgnrg_72{margin-left:-.5rem}._project-table__name-wrapper_fgnrg_76{display:flex;flex-direction:column;overflow:hidden;min-width:0}._project-table__name_fgnrg_66{font-weight:500;color:hsl(var(--foreground));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._project-table__app_fgnrg_92,._project-table__date-secondary_fgnrg_93{font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._project-table__client_fgnrg_102,._project-table__date-main_fgnrg_103{color:hsl(var(--muted-foreground));font-size:.8125rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._project-table__date-main_fgnrg_103{color:hsl(var(--foreground));font-weight:500}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
+ import { jsx as e, jsxs as u } from "react/jsx-runtime";
3
+ import v, { useState as q } from "react";
4
+ function w(t) {
5
+ var r, l, s = "";
6
+ if (typeof t == "string" || typeof t == "number") s += t;
7
7
  else if (typeof t == "object") if (Array.isArray(t)) {
8
- var r = t.length;
9
- for (s = 0; s < r; s++) t[s] && (n = m(t[s])) && (a && (a += " "), a += n);
10
- } else for (n in t) t[n] && (a && (a += " "), a += n);
11
- return a;
8
+ var n = t.length;
9
+ for (r = 0; r < n; r++) t[r] && (l = w(t[r])) && (s && (s += " "), s += l);
10
+ } else for (l in t) t[l] && (s && (s += " "), s += l);
11
+ return s;
12
12
  }
13
- function i() {
14
- for (var t, s, n = 0, a = "", r = arguments.length; n < r; n++) (t = arguments[n]) && (s = m(t)) && (a && (a += " "), a += s);
15
- return a;
13
+ function p() {
14
+ for (var t, r, l = 0, s = "", n = arguments.length; l < n; l++) (t = arguments[l]) && (r = w(t)) && (s && (s += " "), s += r);
15
+ return s;
16
16
  }
17
- const b = {
18
- "status-badge": "_status-badge_z2v4m_3",
19
- "status-badge--neu": "_status-badge--neu_z2v4m_22",
20
- "status-badge--offen": "_status-badge--offen_z2v4m_31",
21
- "status-badge--in-prufung": "_status-badge--in-prufung_z2v4m_40",
22
- "status-badge--validierung": "_status-badge--validierung_z2v4m_49",
23
- "status-badge--abgeschlossen": "_status-badge--abgeschlossen_z2v4m_58"
24
- }, N = {
17
+ const S = {
18
+ "status-badge": "_status-badge_1vytb_3",
19
+ "status-badge--neu": "_status-badge--neu_1vytb_26",
20
+ "status-badge--offen": "_status-badge--offen_1vytb_31",
21
+ "status-badge--in-prufung": "_status-badge--in-prufung_1vytb_36",
22
+ "status-badge--validierung": "_status-badge--validierung_1vytb_41",
23
+ "status-badge--abgeschlossen": "_status-badge--abgeschlossen_1vytb_46"
24
+ }, R = {
25
25
  neu: "Neu",
26
26
  offen: "Offen",
27
27
  "in-prufung": "In Prüfung",
28
28
  validierung: "Validierung",
29
29
  abgeschlossen: "Abgeschlossen"
30
- }, p = h.forwardRef(
31
- ({ status: t, className: s, ...n }, a) => /* @__PURE__ */ e(
32
- "span",
33
- {
34
- ref: a,
35
- className: i(b["status-badge"], b[`status-badge--${t}`], s),
30
+ }, A = v.forwardRef(
31
+ ({ status: t, color: r, backgroundColor: l, className: s, style: n, ...a }, o) => {
32
+ const i = {
36
33
  ...n,
37
- children: N[t]
38
- }
39
- )
34
+ "--custom-color": r,
35
+ "--custom-bg": l
36
+ };
37
+ return /* @__PURE__ */ e(
38
+ "span",
39
+ {
40
+ ref: o,
41
+ className: p(S["status-badge"], S[`status-badge--${t}`], s),
42
+ style: i,
43
+ ...a,
44
+ children: R[t]
45
+ }
46
+ );
47
+ }
40
48
  );
41
- p.displayName = "StatusBadge";
42
- const g = {
43
- "favorite-btn": "_favorite-btn_1q17j_3",
44
- "favorite-btn--active": "_favorite-btn--active_1q17j_23"
45
- }, f = h.forwardRef(
46
- ({ pressed: t, projectName: s, onToggle: n, className: a, onClick: r, ...l }, d) => {
47
- const v = t ? `Von Favoriten entfernen: ${s}` : `Zu Favoriten hinzufügen: ${s}`;
49
+ A.displayName = "StatusBadge";
50
+ const L = {
51
+ "favorite-btn": "_favorite-btn_1f4wz_3",
52
+ "favorite-btn--active": "_favorite-btn--active_1f4wz_23"
53
+ }, I = v.forwardRef(
54
+ ({ pressed: t, projectName: r, onToggle: l, color: s, activeColor: n, className: a, style: o, onClick: i, ...g }, h) => {
55
+ const d = {
56
+ ...o,
57
+ "--custom-color": s,
58
+ "--custom-active-color": n
59
+ }, y = t ? `Von Favoriten entfernen: ${r}` : `Zu Favoriten hinzufügen: ${r}`;
48
60
  return /* @__PURE__ */ e(
49
61
  "button",
50
62
  {
51
- ref: d,
63
+ ref: h,
52
64
  type: "button",
53
- className: i(
54
- g["favorite-btn"],
55
- { [g["favorite-btn--active"]]: t },
65
+ className: p(
66
+ L["favorite-btn"],
67
+ { [L["favorite-btn--active"]]: t },
56
68
  a
57
69
  ),
70
+ style: d,
58
71
  "aria-pressed": t,
59
- "aria-label": v,
60
- onClick: (j) => {
61
- n?.(!t), r?.(j);
72
+ "aria-label": y,
73
+ onClick: (m) => {
74
+ l?.(!t), i?.(m);
62
75
  },
63
- ...l,
64
- children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }) })
76
+ ...g,
77
+ children: /* @__PURE__ */ e(
78
+ "svg",
79
+ {
80
+ viewBox: "0 0 24 24",
81
+ fill: "none",
82
+ stroke: "currentColor",
83
+ strokeWidth: "2",
84
+ strokeLinecap: "round",
85
+ strokeLinejoin: "round",
86
+ children: /* @__PURE__ */ e("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
87
+ }
88
+ )
65
89
  }
66
90
  );
67
91
  }
68
92
  );
69
- f.displayName = "FavoriteButton";
70
- const _ = {
71
- "status-legend__item": "_status-legend__item_senma_3",
72
- "status-legend__item--active": "_status-legend__item--active_senma_22",
73
- "status-legend__label-wrap": "_status-legend__label-wrap_senma_27",
74
- "status-legend__color": "_status-legend__color_senma_33",
75
- "status-legend__label": "_status-legend__label_senma_27",
76
- "status-legend__count": "_status-legend__count_senma_46",
77
- "color-neu": "_color-neu_senma_56",
78
- "color-offen": "_color-offen_senma_60",
79
- "color-in-prufung": "_color-in-prufung_senma_64",
80
- "color-validierung": "_color-validierung_senma_68",
81
- "color-abgeschlossen": "_color-abgeschlossen_senma_72",
82
- "color-alle": "_color-alle_senma_76"
83
- }, y = h.forwardRef(
84
- ({ status: t, label: s, count: n, active: a = !1, className: r, ...l }, d) => /* @__PURE__ */ c(
85
- "button",
86
- {
87
- ref: d,
88
- type: "button",
89
- role: "option",
90
- "aria-selected": a,
91
- className: i(
92
- _["status-legend__item"],
93
- { [_["status-legend__item--active"]]: a },
94
- r
95
- ),
96
- ...l,
97
- children: [
98
- /* @__PURE__ */ c("div", { className: _["status-legend__label-wrap"], children: [
93
+ I.displayName = "FavoriteButton";
94
+ const b = {
95
+ "status-legend__item": "_status-legend__item_1935r_3",
96
+ "status-legend__item--active": "_status-legend__item--active_1935r_22",
97
+ "status-legend__label-wrap": "_status-legend__label-wrap_1935r_27",
98
+ "status-legend__color": "_status-legend__color_1935r_33",
99
+ "status-legend__label": "_status-legend__label_1935r_27",
100
+ "status-legend__count": "_status-legend__count_1935r_47",
101
+ "color-neu": "_color-neu_1935r_57",
102
+ "color-offen": "_color-offen_1935r_61",
103
+ "color-in-prufung": "_color-in-prufung_1935r_65",
104
+ "color-validierung": "_color-validierung_1935r_69",
105
+ "color-abgeschlossen": "_color-abgeschlossen_1935r_73",
106
+ "color-alle": "_color-alle_1935r_77"
107
+ }, B = v.forwardRef(
108
+ ({ status: t, label: r, count: l, active: s = !1, color: n, className: a, style: o, ...i }, g) => {
109
+ const h = {
110
+ ...o,
111
+ "--custom-color": n
112
+ };
113
+ return /* @__PURE__ */ u(
114
+ "button",
115
+ {
116
+ ref: g,
117
+ type: "button",
118
+ role: "option",
119
+ "aria-selected": s,
120
+ className: p(
121
+ b["status-legend__item"],
122
+ { [b["status-legend__item--active"]]: s },
123
+ a
124
+ ),
125
+ style: h,
126
+ ...i,
127
+ children: [
128
+ /* @__PURE__ */ u("div", { className: b["status-legend__label-wrap"], children: [
129
+ /* @__PURE__ */ e(
130
+ "span",
131
+ {
132
+ className: p(b["status-legend__color"], b[`color-${t}`]),
133
+ "aria-hidden": "true"
134
+ }
135
+ ),
136
+ /* @__PURE__ */ e("span", { className: b["status-legend__label"], children: r })
137
+ ] }),
138
+ /* @__PURE__ */ e("span", { className: b["status-legend__count"], children: l })
139
+ ]
140
+ }
141
+ );
142
+ }
143
+ );
144
+ B.displayName = "StatusLegendItem";
145
+ const f = {
146
+ "status-overview__chart-container": "_status-overview__chart-container_1f9eq_3",
147
+ "status-chart-svg": "_status-chart-svg_1f9eq_13",
148
+ "status-chart__segment": "_status-chart__segment_1f9eq_23",
149
+ "status-chart__segment--hovered": "_status-chart__segment--hovered_1f9eq_30",
150
+ "status-chart__segment--dimmed": "_status-chart__segment--dimmed_1f9eq_35",
151
+ "status-chart__hole": "_status-chart__hole_1f9eq_40",
152
+ "status-chart__total-value": "_status-chart__total-value_1f9eq_55",
153
+ "status-chart__total-label": "_status-chart__total-label_1f9eq_63"
154
+ }, D = v.forwardRef(
155
+ ({ data: t, totalLabel: r = "Gesamt", onSegmentClick: l, className: s, ...n }, a) => {
156
+ const [o, i] = q(null), g = t.reduce((j, c) => j + c.value, 0), h = 240, d = h / 2, y = 100, m = 40, N = y - m / 2, $ = N * 2 * Math.PI;
157
+ return /* @__PURE__ */ u(
158
+ "div",
159
+ {
160
+ ref: a,
161
+ className: p(f["status-overview__chart-container"], s),
162
+ ...n,
163
+ children: [
99
164
  /* @__PURE__ */ e(
100
- "span",
165
+ "svg",
101
166
  {
102
- className: i(_["status-legend__color"], _[`color-${t}`]),
103
- "aria-hidden": "true"
167
+ viewBox: `0 0 ${h} ${h}`,
168
+ className: f["status-chart-svg"],
169
+ role: "img",
170
+ "aria-label": "Kreisdiagramm der Projektstatus-Verteilung",
171
+ overflow: "visible",
172
+ children: g === 0 ? /* @__PURE__ */ e(
173
+ "circle",
174
+ {
175
+ cx: d,
176
+ cy: d,
177
+ r: N,
178
+ fill: "none",
179
+ stroke: "hsl(var(--border))",
180
+ strokeWidth: m
181
+ }
182
+ ) : (() => {
183
+ let j = 0;
184
+ return t.map((c) => {
185
+ if (c.value === 0) return null;
186
+ const k = c.value / g * 100, x = k / 100 * $, T = j / 100 * $;
187
+ return j += k, /* @__PURE__ */ e(
188
+ "circle",
189
+ {
190
+ cx: d,
191
+ cy: d,
192
+ r: N,
193
+ fill: "none",
194
+ stroke: c.color,
195
+ strokeWidth: m,
196
+ strokeDasharray: `${x} ${$}`,
197
+ strokeDashoffset: -T,
198
+ transform: `rotate(-90 ${d} ${d})`,
199
+ className: p(f["status-chart__segment"], {
200
+ [f["status-chart__segment--hovered"]]: o === c.status,
201
+ [f["status-chart__segment--dimmed"]]: o && o !== c.status
202
+ }),
203
+ onClick: () => l?.(c.status),
204
+ onMouseEnter: () => i(c.status),
205
+ onMouseLeave: () => i(null),
206
+ style: { cursor: l ? "pointer" : "default" },
207
+ children: /* @__PURE__ */ e("title", { children: `${c.label}: ${c.value}` })
208
+ },
209
+ c.status
210
+ );
211
+ });
212
+ })()
104
213
  }
105
214
  ),
106
- /* @__PURE__ */ e("span", { className: _["status-legend__label"], children: s })
107
- ] }),
108
- /* @__PURE__ */ e("span", { className: _["status-legend__count"], children: n })
109
- ]
110
- }
111
- )
112
- );
113
- y.displayName = "StatusLegendItem";
114
- const u = {
115
- "status-overview__chart-container": "_status-overview__chart-container_23w3c_3",
116
- "status-chart": "_status-chart_23w3c_13",
117
- "status-chart__hole": "_status-chart__hole_23w3c_32",
118
- "status-chart__total-value": "_status-chart__total-value_23w3c_46",
119
- "status-chart__total-label": "_status-chart__total-label_23w3c_54"
120
- }, w = h.forwardRef(
121
- ({ total: t, totalLabel: s = "Gesamt", className: n, ...a }, r) => /* @__PURE__ */ c(
122
- "div",
123
- {
124
- ref: r,
125
- className: i(u["status-overview__chart-container"], n),
126
- ...a,
127
- children: [
128
- /* @__PURE__ */ e(
129
- "div",
130
- {
131
- className: u["status-chart"],
132
- role: "img",
133
- "aria-label": "Kreisdiagramm der Projektstatus-Verteilung"
134
- }
135
- ),
136
- /* @__PURE__ */ c("div", { className: u["status-chart__hole"], children: [
137
- /* @__PURE__ */ e("span", { className: u["status-chart__total-value"], children: t }),
138
- /* @__PURE__ */ e("span", { className: u["status-chart__total-label"], children: s })
139
- ] })
140
- ]
141
- }
142
- )
215
+ /* @__PURE__ */ u("div", { className: f["status-chart__hole"], children: [
216
+ /* @__PURE__ */ e("span", { className: f["status-chart__total-value"], children: g }),
217
+ /* @__PURE__ */ e("span", { className: f["status-chart__total-label"], children: r })
218
+ ] })
219
+ ]
220
+ }
221
+ );
222
+ }
143
223
  );
144
- w.displayName = "StatusChart";
145
- const o = {
146
- "table-container": "_table-container_1nsqr_3",
147
- "project-table": "_project-table_1nsqr_7",
148
- "project-table__head": "_project-table__head_1nsqr_14",
149
- "project-table__row": "_project-table__row_1nsqr_25",
150
- "project-table__name": "_project-table__name_1nsqr_46",
151
- "project-table__client": "_project-table__client_1nsqr_51"
152
- }, L = h.forwardRef(
153
- ({ rows: t, onToggleFavorite: s, className: n, ...a }, r) => /* @__PURE__ */ e(
224
+ D.displayName = "StatusChart";
225
+ function M(t) {
226
+ const r = new Date(t);
227
+ if (isNaN(r.getTime())) return "Ungültiges Datum";
228
+ const s = (/* @__PURE__ */ new Date()).getTime() - r.getTime(), n = Math.floor(s / (1e3 * 60 * 60 * 24));
229
+ if (n === 0) return "Heute";
230
+ if (n === 1) return "Gestern";
231
+ if (n < 7) return `vor ${n} Tagen`;
232
+ const a = Math.floor(n / 7);
233
+ if (a < 4)
234
+ return a === 1 ? "vor einer Woche" : `vor ${a} Wochen`;
235
+ const o = Math.floor(n / 30);
236
+ if (o < 12)
237
+ return o === 1 ? "vor einem Monat" : `vor ${o} Monaten`;
238
+ const i = Math.floor(n / 365);
239
+ return i === 1 ? "vor einem Jahr" : `vor ${i} Jahren`;
240
+ }
241
+ const _ = {
242
+ "table-container": "_table-container_fgnrg_3",
243
+ "project-table": "_project-table_fgnrg_7",
244
+ "project-table__head": "_project-table__head_fgnrg_15",
245
+ "project-table__row": "_project-table__row_fgnrg_33",
246
+ "project-table__name-cell": "_project-table__name-cell_fgnrg_66",
247
+ "project-table__favorite": "_project-table__favorite_fgnrg_72",
248
+ "project-table__name-wrapper": "_project-table__name-wrapper_fgnrg_76",
249
+ "project-table__name": "_project-table__name_fgnrg_66",
250
+ "project-table__app": "_project-table__app_fgnrg_92",
251
+ "project-table__date-secondary": "_project-table__date-secondary_fgnrg_93",
252
+ "project-table__client": "_project-table__client_fgnrg_102",
253
+ "project-table__date-main": "_project-table__date-main_fgnrg_103"
254
+ }, P = v.forwardRef(
255
+ ({ rows: t, onToggleFavorite: r, className: l, ...s }, n) => /* @__PURE__ */ e(
154
256
  "div",
155
257
  {
156
- ref: r,
157
- className: i(o["table-container"], n),
258
+ ref: n,
259
+ className: p(_["table-container"], l),
158
260
  tabIndex: 0,
159
- ...a,
160
- children: /* @__PURE__ */ c("table", { className: o["project-table"], children: [
161
- /* @__PURE__ */ e("thead", { className: o["project-table__head"], children: /* @__PURE__ */ c("tr", { children: [
162
- /* @__PURE__ */ e("th", { scope: "col", children: "Projektname" }),
261
+ ...s,
262
+ children: /* @__PURE__ */ u("table", { className: _["project-table"], children: [
263
+ /* @__PURE__ */ e("thead", { className: _["project-table__head"], children: /* @__PURE__ */ u("tr", { children: [
264
+ /* @__PURE__ */ e("th", { scope: "col", children: "Projekt / Applikation" }),
163
265
  /* @__PURE__ */ e("th", { scope: "col", children: "Kunde" }),
164
- /* @__PURE__ */ e("th", { scope: "col", children: "Applikation" }),
165
266
  /* @__PURE__ */ e("th", { scope: "col", children: "Status" }),
166
- /* @__PURE__ */ e("th", { scope: "col", "aria-label": "Favorit", children: /* @__PURE__ */ e(
167
- "svg",
168
- {
169
- width: "14",
170
- height: "14",
171
- viewBox: "0 0 24 24",
172
- fill: "none",
173
- stroke: "currentColor",
174
- strokeWidth: "2",
175
- strokeLinecap: "round",
176
- strokeLinejoin: "round",
177
- "aria-hidden": "true",
178
- children: /* @__PURE__ */ e("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
179
- }
180
- ) })
267
+ /* @__PURE__ */ e("th", { scope: "col", children: "Aktivität" })
181
268
  ] }) }),
182
- /* @__PURE__ */ e("tbody", { className: o["project-table__body"], children: t.map((l) => /* @__PURE__ */ c(
269
+ /* @__PURE__ */ e("tbody", { className: _["project-table__body"], children: t.map((a) => /* @__PURE__ */ u(
183
270
  "tr",
184
271
  {
185
- className: o["project-table__row"],
186
- "data-status": l.status,
272
+ className: _["project-table__row"],
273
+ "data-status": a.status,
187
274
  children: [
188
- /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("div", { className: o["project-table__name"], children: l.name }) }),
189
- /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: o["project-table__client"], children: l.client }) }),
190
- /* @__PURE__ */ e("td", { children: l.app }),
191
- /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(p, { status: l.status }) }),
192
- /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
193
- f,
194
- {
195
- pressed: l.favorite,
196
- projectName: l.name,
197
- onToggle: (d) => s?.(l.id, d)
198
- }
199
- ) })
275
+ /* @__PURE__ */ e("td", { children: /* @__PURE__ */ u("div", { className: _["project-table__name-cell"], children: [
276
+ /* @__PURE__ */ e(
277
+ I,
278
+ {
279
+ pressed: a.favorite,
280
+ projectName: a.name,
281
+ onToggle: (o) => r?.(a.id, o),
282
+ className: _["project-table__favorite"]
283
+ }
284
+ ),
285
+ /* @__PURE__ */ u("div", { className: _["project-table__name-wrapper"], title: `${a.name}
286
+ ${a.app}`, children: [
287
+ /* @__PURE__ */ e("div", { className: _["project-table__name"], children: a.name }),
288
+ /* @__PURE__ */ e("div", { className: _["project-table__app"], children: a.app })
289
+ ] })
290
+ ] }) }),
291
+ /* @__PURE__ */ e("td", { title: a.client, children: /* @__PURE__ */ e("span", { className: _["project-table__client"], children: a.client }) }),
292
+ /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(A, { status: a.status }) }),
293
+ /* @__PURE__ */ u("td", { title: `Geändert: ${M(a.updatedAt)}
294
+ Erstellt: ${a.createdAt}`, children: [
295
+ /* @__PURE__ */ e("div", { className: _["project-table__date-main"], children: M(a.updatedAt) }),
296
+ /* @__PURE__ */ u("div", { className: _["project-table__date-secondary"], children: [
297
+ "Erstellt: ",
298
+ a.createdAt
299
+ ] })
300
+ ] })
200
301
  ]
201
302
  },
202
- l.id
303
+ a.id
203
304
  )) })
204
305
  ] })
205
306
  }
206
307
  )
207
308
  );
208
- L.displayName = "ProjectTable";
309
+ P.displayName = "ProjectTable";
209
310
  export {
210
- f as FavoriteButton,
211
- L as ProjectTable,
212
- p as StatusBadge,
213
- w as StatusChart,
214
- y as StatusLegendItem
311
+ I as FavoriteButton,
312
+ P as ProjectTable,
313
+ A as StatusBadge,
314
+ D as StatusChart,
315
+ B as StatusLegendItem
215
316
  };
@@ -0,0 +1 @@
1
+ export declare function formatRelativeDate(dateInput: string | Date | number): string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastnd/components",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "type": "module",
5
5
  "main": "./dist/components.js",
6
6
  "types": "./dist/index.d.ts",