@fastnd/components 1.0.5 → 1.0.7

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    initials: string;
+    name?: string;
+    className?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'outline' | 'ghost';
+    size?: 'sm' | 'md';
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Checklist/Checklist.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ChecklistItemType {
+    id: string;
+    text: string;
+    checked: boolean;
+}
+export interface ChecklistProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: ChecklistItemType[];
+    onChange?: (items: ChecklistItemType[]) => void;
+    editable?: boolean;
+    className?: string;
+}
+export declare const Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/FavoriteButton/FavoriteButton.d.ts

@@ -3,6 +3,8 @@ export interface FavoriteButtonProps extends Omit<React.ButtonHTMLAttributes<HTM
     pressed: boolean;
     projectName: string;
     onToggle?: (nextPressed: boolean) => void;
+    color?: string;
+    activeColor?: string;
     className?: string;
 }
 export declare const FavoriteButton: React.ForwardRefExoticComponent<FavoriteButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/PriorityBadge/PriorityBadge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type PriorityLevel = 'high' | 'medium' | 'low';
+export type PrioritySize = 'small' | 'large';
+export interface PriorityBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    level: PriorityLevel;
+    size?: PrioritySize;
+    className?: string;
+}
+export declare const PriorityBadge: React.ForwardRefExoticComponent<PriorityBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ProjectTable/ProjectTable.d.ts

@@ -7,6 +7,8 @@ export interface ProjectRow {
     app: string;
     status: StatusBadgeStatus;
     favorite: boolean;
+    createdAt: string;
+    updatedAt: string;
 }
 export interface ProjectTableProps extends React.HTMLAttributes<HTMLDivElement> {
     rows: ProjectRow[];

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -3,6 +3,8 @@ export type StatusBadgeStatus = 'neu' | 'offen' | 'in-prufung' | 'validierung' |
 export declare const STATUS_LABELS: Record<StatusBadgeStatus, string>;
 export interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     status: StatusBadgeStatus;
+    color?: string;
+    backgroundColor?: string;
     className?: string;
 }
 export declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/StatusChart/StatusChart.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
+export interface StatusSegment {
+    status: string;
+    label: string;
+    value: number;
+    color: string;
+}
 export interface StatusChartProps extends React.HTMLAttributes<HTMLDivElement> {
-    total: number;
+    data: StatusSegment[];
     totalLabel?: string;
+    onSegmentClick?: (status: string) => void;
     className?: string;
 }
 export declare const StatusChart: React.ForwardRefExoticComponent<StatusChartProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/StatusDropdown/StatusDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface StatusOption {
+    value: string;
+    label: string;
+}
+export interface StatusDropdownProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    options: StatusOption[];
+    className?: string;
+    'aria-label'?: string;
+}
+export declare const StatusDropdown: React.ForwardRefExoticComponent<StatusDropdownProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/StatusLegendItem/StatusLegendItem.d.ts

@@ -5,6 +5,7 @@ export interface StatusLegendItemProps extends React.ButtonHTMLAttributes<HTMLBu
     label: string;
     count: number;
     active?: boolean;
+    color?: string;
     className?: string;
 }
 export declare const StatusLegendItem: React.ForwardRefExoticComponent<StatusLegendItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/index.d.ts

@@ -8,3 +8,15 @@ export { StatusChart } from './StatusChart/StatusChart';
 export type { StatusChartProps } from './StatusChart/StatusChart';
 export { ProjectTable } from './ProjectTable/ProjectTable';
 export type { ProjectTableProps, ProjectRow } from './ProjectTable/ProjectTable';
+export { Avatar, AvatarGroup } from './Avatar/Avatar';
+export type { AvatarProps, AvatarGroupProps } from './Avatar/Avatar';
+export { Button } from './Button/Button';
+export type { ButtonProps } from './Button/Button';
+export { PriorityBadge } from './PriorityBadge/PriorityBadge';
+export type { PriorityBadgeProps, PriorityLevel, PrioritySize } from './PriorityBadge/PriorityBadge';
+export { Badge } from './Badge/Badge';
+export type { BadgeProps } from './Badge/Badge';
+export { StatusDropdown } from './StatusDropdown/StatusDropdown';
+export type { StatusDropdownProps, StatusOption } from './StatusDropdown/StatusDropdown';
+export { Checklist } from './Checklist/Checklist';
+export type { ChecklistProps, ChecklistItemType } from './Checklist/Checklist';

package/dist/components.js

@@ -1,202 +1,303 @@
-(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)}})();
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import h from "react";
-function m(t) {
-  var s, n, a = "";
-  if (typeof t == "string" || typeof t == "number") a += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var r = t.length;
-    for (s = 0; s < r; s++) t[s] && (n = m(t[s])) && (a && (a += " "), a += n);
-  } else for (n in t) t[n] && (a && (a += " "), a += n);
-  return a;
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.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}._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}._avatar_1ml48_3{width:1.5rem;height:1.5rem;border-radius:50%;background-color:hsl(var(--secondary));border:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;color:hsl(var(--foreground));text-transform:uppercase}._avatar-group_1ml48_18{display:flex;align-items:center}._group-member_1ml48_23{margin-right:-.5rem;position:relative;z-index:1;border:2px solid hsl(var(--card))}._group-member_1ml48_23:hover{z-index:10}._btn_lw4l4_3{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;border-radius:calc(var(--radius) - 2px);font-size:.875rem;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1);cursor:pointer;border:1px solid transparent}._btn_lw4l4_3:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}._btn_lw4l4_3:active{transform:scale(.98)}._btn--primary_lw4l4_27{background:var(--gradient-header);color:#fff;padding:.5rem 1rem;box-shadow:var(--shadow-sm)}._btn--primary_lw4l4_27:hover{box-shadow:var(--shadow-md);opacity:.9}._btn--outline_lw4l4_39{background-color:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground));padding:.375rem .75rem;min-width:110px}._btn--outline_lw4l4_39:hover{background-color:hsl(var(--secondary));color:hsl(var(--foreground))}._btn--ghost_lw4l4_52{background-color:transparent;color:hsl(var(--muted-foreground));padding:.375rem}._btn--ghost_lw4l4_52:hover{background-color:hsl(var(--secondary));color:hsl(var(--foreground))}._btn--sm_lw4l4_63{padding:.2rem .4rem;font-size:.75rem;min-width:auto!important}._badge_144f0_3{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-grotesk);font-weight:800}._badge--high_144f0_12{background-color:hsl(var(--destructive) / .1);color:hsl(var(--destructive));border:1px solid hsl(var(--destructive) / .2)}._badge--medium_144f0_18{background-color:hsl(var(--score-medium) / .1);color:hsl(var(--score-medium));border:1px solid hsl(var(--score-medium) / .2)}._badge--low_144f0_24{background-color:hsl(var(--secondary));color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}._badge--size-small_144f0_30{width:1.5rem;height:1.5rem;border-radius:.375rem;font-size:.75rem}._badge--size-large_144f0_37{width:2.25rem;height:2.25rem;border-radius:.5rem;font-size:1.125rem}._badge--size-large_144f0_37._badge--low_144f0_24{font-size:.875rem}._badge_1ru08_3{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background-color:hsl(var(--secondary));border-radius:2rem;font-size:.8125rem;font-weight:500}._status-dropdown_1t4xn_3{position:relative;display:inline-block;width:88px}._status-trigger_1t4xn_9{width:100%!important;justify-content:space-between!important}._status-menu_1t4xn_14{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-lg);z-index:100;width:100%;min-width:88px;display:none;padding:.25rem;animation:_fadeIn_1t4xn_1 .15s ease-out}._status-menu_1t4xn_14._is-open_1t4xn_31{display:block}._status-menu-item_1t4xn_35{width:100%;padding:.5rem .75rem;font-size:.8125rem;text-align:left;background:none;border:none;cursor:pointer;border-radius:calc(var(--radius) - 4px);color:hsl(var(--foreground));transition:background-color .1s}._status-menu-item_1t4xn_35:hover{background-color:hsl(var(--secondary))}._status-menu-item_1t4xn_35._is-active_1t4xn_52{font-weight:500}._icon_1t4xn_56{width:1rem;height:1rem;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}._icon-sm_1t4xn_65{width:.875rem;height:.875rem}@keyframes _fadeIn_1t4xn_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}: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%));--gradient-header: linear-gradient(135deg, hsl(207 82% 42%), hsl(209 100% 56%));--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}._checklist_ylbeh_3{display:flex;flex-direction:column;gap:.5rem}._check-item_ylbeh_9{display:flex;align-items:center;gap:.5rem;font-size:.875rem}._check-item_ylbeh_9 input[type=checkbox]{width:1rem;height:1rem;accent-color:hsl(var(--primary));cursor:pointer}._check-item_ylbeh_9 label{cursor:pointer}._check-item_ylbeh_9._is-done_ylbeh_27 label{text-decoration:line-through;color:hsl(var(--muted-foreground))}._checklist--readonly_ylbeh_32 ._check-item_ylbeh_9 label{cursor:pointer}._checklist--readonly_ylbeh_32 ._check-item_ylbeh_9 input[type=checkbox]{pointer-events:all}._form-control_ylbeh_40{width:100%;padding:.125rem;border:none;background:transparent;color:hsl(var(--foreground));font-family:inherit;font-size:.875rem;border-radius:calc(var(--radius) - 2px);transition:background-color .2s}._form-control_ylbeh_40:focus{outline:none;background-color:hsl(var(--background))}._is-done_ylbeh_27 ._form-control_ylbeh_40{text-decoration:line-through;color:hsl(var(--muted-foreground))}')),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import g, { useState as I, useRef as q, useEffect as O } from "react";
+function M(e) {
+  var t, r, s = "";
+  if (typeof e == "string" || typeof e == "number") s += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var n = e.length;
+    for (t = 0; t < n; t++) e[t] && (r = M(e[t])) && (s && (s += " "), s += r);
+  } else for (r in e) e[r] && (s && (s += " "), s += r);
+  return s;
 }
-function i() {
-  for (var t, s, n = 0, a = "", r = arguments.length; n < r; n++) (t = arguments[n]) && (s = m(t)) && (a && (a += " "), a += s);
-  return a;
+function d() {
+  for (var e, t, r = 0, s = "", n = arguments.length; r < n; r++) (e = arguments[r]) && (t = M(e)) && (s && (s += " "), s += t);
+  return s;
 }
-const b = {
-  "status-badge": "_status-badge_z2v4m_3",
-  "status-badge--neu": "_status-badge--neu_z2v4m_22",
-  "status-badge--offen": "_status-badge--offen_z2v4m_31",
-  "status-badge--in-prufung": "_status-badge--in-prufung_z2v4m_40",
-  "status-badge--validierung": "_status-badge--validierung_z2v4m_49",
-  "status-badge--abgeschlossen": "_status-badge--abgeschlossen_z2v4m_58"
-}, N = {
+const L = {
+  "status-badge": "_status-badge_1vytb_3",
+  "status-badge--neu": "_status-badge--neu_1vytb_26",
+  "status-badge--offen": "_status-badge--offen_1vytb_31",
+  "status-badge--in-prufung": "_status-badge--in-prufung_1vytb_36",
+  "status-badge--validierung": "_status-badge--validierung_1vytb_41",
+  "status-badge--abgeschlossen": "_status-badge--abgeschlossen_1vytb_46"
+}, W = {
   neu: "Neu",
   offen: "Offen",
   "in-prufung": "In Prüfung",
   validierung: "Validierung",
   abgeschlossen: "Abgeschlossen"
-}, p = h.forwardRef(
-  ({ status: t, className: s, ...n }, a) => /* @__PURE__ */ e(
-    "span",
-    {
-      ref: a,
-      className: i(b["status-badge"], b[`status-badge--${t}`], s),
+}, T = g.forwardRef(
+  ({ status: e, color: t, backgroundColor: r, className: s, style: n, ...l }, c) => {
+    const b = {
       ...n,
-      children: N[t]
-    }
-  )
+      "--custom-color": t,
+      "--custom-bg": r
+    };
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        ref: c,
+        className: d(L["status-badge"], L[`status-badge--${e}`], s),
+        style: b,
+        ...l,
+        children: W[e]
+      }
+    );
+  }
 );
-p.displayName = "StatusBadge";
-const g = {
-  "favorite-btn": "_favorite-btn_1q17j_3",
-  "favorite-btn--active": "_favorite-btn--active_1q17j_23"
-}, f = h.forwardRef(
-  ({ pressed: t, projectName: s, onToggle: n, className: a, onClick: r, ...l }, d) => {
-    const v = t ? `Von Favoriten entfernen: ${s}` : `Zu Favoriten hinzufügen: ${s}`;
-    return /* @__PURE__ */ e(
+T.displayName = "StatusBadge";
+const B = {
+  "favorite-btn": "_favorite-btn_1f4wz_3",
+  "favorite-btn--active": "_favorite-btn--active_1f4wz_23"
+}, z = g.forwardRef(
+  ({ pressed: e, projectName: t, onToggle: r, color: s, activeColor: n, className: l, style: c, onClick: b, ...o }, i) => {
+    const u = {
+      ...c,
+      "--custom-color": s,
+      "--custom-active-color": n
+    }, N = e ? `Von Favoriten entfernen: ${t}` : `Zu Favoriten hinzufügen: ${t}`;
+    return /* @__PURE__ */ a(
       "button",
       {
-        ref: d,
+        ref: i,
         type: "button",
-        className: i(
-          g["favorite-btn"],
-          { [g["favorite-btn--active"]]: t },
-          a
+        className: d(
+          B["favorite-btn"],
+          { [B["favorite-btn--active"]]: e },
+          l
         ),
-        "aria-pressed": t,
-        "aria-label": v,
+        style: u,
+        "aria-pressed": e,
+        "aria-label": N,
         onClick: (j) => {
-          n?.(!t), r?.(j);
+          r?.(!e), b?.(j);
         },
-        ...l,
-        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" }) })
+        ...o,
+        children: /* @__PURE__ */ a(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ a("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" })
+          }
+        )
       }
     );
   }
 );
-f.displayName = "FavoriteButton";
-const _ = {
-  "status-legend__item": "_status-legend__item_senma_3",
-  "status-legend__item--active": "_status-legend__item--active_senma_22",
-  "status-legend__label-wrap": "_status-legend__label-wrap_senma_27",
-  "status-legend__color": "_status-legend__color_senma_33",
-  "status-legend__label": "_status-legend__label_senma_27",
-  "status-legend__count": "_status-legend__count_senma_46",
-  "color-neu": "_color-neu_senma_56",
-  "color-offen": "_color-offen_senma_60",
-  "color-in-prufung": "_color-in-prufung_senma_64",
-  "color-validierung": "_color-validierung_senma_68",
-  "color-abgeschlossen": "_color-abgeschlossen_senma_72",
-  "color-alle": "_color-alle_senma_76"
-}, y = h.forwardRef(
-  ({ status: t, label: s, count: n, active: a = !1, className: r, ...l }, d) => /* @__PURE__ */ c(
-    "button",
-    {
-      ref: d,
-      type: "button",
-      role: "option",
-      "aria-selected": a,
-      className: i(
-        _["status-legend__item"],
-        { [_["status-legend__item--active"]]: a },
-        r
-      ),
-      ...l,
-      children: [
-        /* @__PURE__ */ c("div", { className: _["status-legend__label-wrap"], children: [
-          /* @__PURE__ */ e(
-            "span",
+z.displayName = "FavoriteButton";
+const k = {
+  "status-legend__item": "_status-legend__item_1935r_3",
+  "status-legend__item--active": "_status-legend__item--active_1935r_22",
+  "status-legend__label-wrap": "_status-legend__label-wrap_1935r_27",
+  "status-legend__color": "_status-legend__color_1935r_33",
+  "status-legend__label": "_status-legend__label_1935r_27",
+  "status-legend__count": "_status-legend__count_1935r_47",
+  "color-neu": "_color-neu_1935r_57",
+  "color-offen": "_color-offen_1935r_61",
+  "color-in-prufung": "_color-in-prufung_1935r_65",
+  "color-validierung": "_color-validierung_1935r_69",
+  "color-abgeschlossen": "_color-abgeschlossen_1935r_73",
+  "color-alle": "_color-alle_1935r_77"
+}, F = g.forwardRef(
+  ({ status: e, label: t, count: r, active: s = !1, color: n, className: l, style: c, ...b }, o) => {
+    const i = {
+      ...c,
+      "--custom-color": n
+    };
+    return /* @__PURE__ */ m(
+      "button",
+      {
+        ref: o,
+        type: "button",
+        role: "option",
+        "aria-selected": s,
+        className: d(
+          k["status-legend__item"],
+          { [k["status-legend__item--active"]]: s },
+          l
+        ),
+        style: i,
+        ...b,
+        children: [
+          /* @__PURE__ */ m("div", { className: k["status-legend__label-wrap"], children: [
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: d(k["status-legend__color"], k[`color-${e}`]),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: k["status-legend__label"], children: t })
+          ] }),
+          /* @__PURE__ */ a("span", { className: k["status-legend__count"], children: r })
+        ]
+      }
+    );
+  }
+);
+F.displayName = "StatusLegendItem";
+const v = {
+  "status-overview__chart-container": "_status-overview__chart-container_1f9eq_3",
+  "status-chart-svg": "_status-chart-svg_1f9eq_13",
+  "status-chart__segment": "_status-chart__segment_1f9eq_23",
+  "status-chart__segment--hovered": "_status-chart__segment--hovered_1f9eq_30",
+  "status-chart__segment--dimmed": "_status-chart__segment--dimmed_1f9eq_35",
+  "status-chart__hole": "_status-chart__hole_1f9eq_40",
+  "status-chart__total-value": "_status-chart__total-value_1f9eq_55",
+  "status-chart__total-label": "_status-chart__total-label_1f9eq_63"
+}, G = g.forwardRef(
+  ({ data: e, totalLabel: t = "Gesamt", onSegmentClick: r, className: s, ...n }, l) => {
+    const [c, b] = I(null), o = e.reduce((p, h) => p + h.value, 0), i = 240, u = i / 2, N = 100, j = 40, w = N - j / 2, _ = w * 2 * Math.PI;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: l,
+        className: d(v["status-overview__chart-container"], s),
+        ...n,
+        children: [
+          /* @__PURE__ */ a(
+            "svg",
             {
-              className: i(_["status-legend__color"], _[`color-${t}`]),
-              "aria-hidden": "true"
+              viewBox: `0 0 ${i} ${i}`,
+              className: v["status-chart-svg"],
+              role: "img",
+              "aria-label": "Kreisdiagramm der Projektstatus-Verteilung",
+              overflow: "visible",
+              children: o === 0 ? /* @__PURE__ */ a(
+                "circle",
+                {
+                  cx: u,
+                  cy: u,
+                  r: w,
+                  fill: "none",
+                  stroke: "hsl(var(--border))",
+                  strokeWidth: j
+                }
+              ) : (() => {
+                let p = 0;
+                return e.map((h) => {
+                  if (h.value === 0) return null;
+                  const S = h.value / o * 100, C = S / 100 * _, D = p / 100 * _;
+                  return p += S, /* @__PURE__ */ a(
+                    "circle",
+                    {
+                      cx: u,
+                      cy: u,
+                      r: w,
+                      fill: "none",
+                      stroke: h.color,
+                      strokeWidth: j,
+                      strokeDasharray: `${C} ${_}`,
+                      strokeDashoffset: -D,
+                      transform: `rotate(-90 ${u} ${u})`,
+                      className: d(v["status-chart__segment"], {
+                        [v["status-chart__segment--hovered"]]: c === h.status,
+                        [v["status-chart__segment--dimmed"]]: c && c !== h.status
+                      }),
+                      onClick: () => r?.(h.status),
+                      onMouseEnter: () => b(h.status),
+                      onMouseLeave: () => b(null),
+                      style: { cursor: r ? "pointer" : "default" },
+                      children: /* @__PURE__ */ a("title", { children: `${h.label}: ${h.value}` })
+                    },
+                    h.status
+                  );
+                });
+              })()
             }
           ),
-          /* @__PURE__ */ e("span", { className: _["status-legend__label"], children: s })
-        ] }),
-        /* @__PURE__ */ e("span", { className: _["status-legend__count"], children: n })
-      ]
-    }
-  )
-);
-y.displayName = "StatusLegendItem";
-const u = {
-  "status-overview__chart-container": "_status-overview__chart-container_23w3c_3",
-  "status-chart": "_status-chart_23w3c_13",
-  "status-chart__hole": "_status-chart__hole_23w3c_32",
-  "status-chart__total-value": "_status-chart__total-value_23w3c_46",
-  "status-chart__total-label": "_status-chart__total-label_23w3c_54"
-}, w = h.forwardRef(
-  ({ total: t, totalLabel: s = "Gesamt", className: n, ...a }, r) => /* @__PURE__ */ c(
-    "div",
-    {
-      ref: r,
-      className: i(u["status-overview__chart-container"], n),
-      ...a,
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: u["status-chart"],
-            role: "img",
-            "aria-label": "Kreisdiagramm der Projektstatus-Verteilung"
-          }
-        ),
-        /* @__PURE__ */ c("div", { className: u["status-chart__hole"], children: [
-          /* @__PURE__ */ e("span", { className: u["status-chart__total-value"], children: t }),
-          /* @__PURE__ */ e("span", { className: u["status-chart__total-label"], children: s })
-        ] })
-      ]
-    }
-  )
+          /* @__PURE__ */ m("div", { className: v["status-chart__hole"], children: [
+            /* @__PURE__ */ a("span", { className: v["status-chart__total-value"], children: o }),
+            /* @__PURE__ */ a("span", { className: v["status-chart__total-label"], children: t })
+          ] })
+        ]
+      }
+    );
+  }
 );
-w.displayName = "StatusChart";
-const o = {
-  "table-container": "_table-container_1nsqr_3",
-  "project-table": "_project-table_1nsqr_7",
-  "project-table__head": "_project-table__head_1nsqr_14",
-  "project-table__row": "_project-table__row_1nsqr_25",
-  "project-table__name": "_project-table__name_1nsqr_46",
-  "project-table__client": "_project-table__client_1nsqr_51"
-}, L = h.forwardRef(
-  ({ rows: t, onToggleFavorite: s, className: n, ...a }, r) => /* @__PURE__ */ e(
+G.displayName = "StatusChart";
+function P(e) {
+  const t = new Date(e);
+  if (isNaN(t.getTime())) return "Ungültiges Datum";
+  const s = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), n = Math.floor(s / (1e3 * 60 * 60 * 24));
+  if (n === 0) return "Heute";
+  if (n === 1) return "Gestern";
+  if (n < 7) return `vor ${n} Tagen`;
+  const l = Math.floor(n / 7);
+  if (l < 4)
+    return l === 1 ? "vor einer Woche" : `vor ${l} Wochen`;
+  const c = Math.floor(n / 30);
+  if (c < 12)
+    return c === 1 ? "vor einem Monat" : `vor ${c} Monaten`;
+  const b = Math.floor(n / 365);
+  return b === 1 ? "vor einem Jahr" : `vor ${b} Jahren`;
+}
+const f = {
+  "table-container": "_table-container_fgnrg_3",
+  "project-table": "_project-table_fgnrg_7",
+  "project-table__head": "_project-table__head_fgnrg_15",
+  "project-table__row": "_project-table__row_fgnrg_33",
+  "project-table__name-cell": "_project-table__name-cell_fgnrg_66",
+  "project-table__favorite": "_project-table__favorite_fgnrg_72",
+  "project-table__name-wrapper": "_project-table__name-wrapper_fgnrg_76",
+  "project-table__name": "_project-table__name_fgnrg_66",
+  "project-table__app": "_project-table__app_fgnrg_92",
+  "project-table__date-secondary": "_project-table__date-secondary_fgnrg_93",
+  "project-table__client": "_project-table__client_fgnrg_102",
+  "project-table__date-main": "_project-table__date-main_fgnrg_103"
+}, V = g.forwardRef(
+  ({ rows: e, onToggleFavorite: t, className: r, ...s }, n) => /* @__PURE__ */ a(
     "div",
     {
-      ref: r,
-      className: i(o["table-container"], n),
+      ref: n,
+      className: d(f["table-container"], r),
       tabIndex: 0,
-      ...a,
-      children: /* @__PURE__ */ c("table", { className: o["project-table"], children: [
-        /* @__PURE__ */ e("thead", { className: o["project-table__head"], children: /* @__PURE__ */ c("tr", { children: [
-          /* @__PURE__ */ e("th", { scope: "col", children: "Projektname" }),
-          /* @__PURE__ */ e("th", { scope: "col", children: "Kunde" }),
-          /* @__PURE__ */ e("th", { scope: "col", children: "Applikation" }),
-          /* @__PURE__ */ e("th", { scope: "col", children: "Status" }),
-          /* @__PURE__ */ e("th", { scope: "col", "aria-label": "Favorit", children: /* @__PURE__ */ e(
-            "svg",
-            {
-              width: "14",
-              height: "14",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              "aria-hidden": "true",
-              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" })
-            }
-          ) })
+      ...s,
+      children: /* @__PURE__ */ m("table", { className: f["project-table"], children: [
+        /* @__PURE__ */ a("thead", { className: f["project-table__head"], children: /* @__PURE__ */ m("tr", { children: [
+          /* @__PURE__ */ a("th", { scope: "col", children: "Projekt / Applikation" }),
+          /* @__PURE__ */ a("th", { scope: "col", children: "Kunde" }),
+          /* @__PURE__ */ a("th", { scope: "col", children: "Status" }),
+          /* @__PURE__ */ a("th", { scope: "col", children: "Aktivität" })
         ] }) }),
-        /* @__PURE__ */ e("tbody", { className: o["project-table__body"], children: t.map((l) => /* @__PURE__ */ c(
+        /* @__PURE__ */ a("tbody", { className: f["project-table__body"], children: e.map((l) => /* @__PURE__ */ m(
           "tr",
           {
-            className: o["project-table__row"],
+            className: f["project-table__row"],
             "data-status": l.status,
             children: [
-              /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("div", { className: o["project-table__name"], children: l.name }) }),
-              /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: o["project-table__client"], children: l.client }) }),
-              /* @__PURE__ */ e("td", { children: l.app }),
-              /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(p, { status: l.status }) }),
-              /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-                f,
-                {
-                  pressed: l.favorite,
-                  projectName: l.name,
-                  onToggle: (d) => s?.(l.id, d)
-                }
-              ) })
+              /* @__PURE__ */ a("td", { children: /* @__PURE__ */ m("div", { className: f["project-table__name-cell"], children: [
+                /* @__PURE__ */ a(
+                  z,
+                  {
+                    pressed: l.favorite,
+                    projectName: l.name,
+                    onToggle: (c) => t?.(l.id, c),
+                    className: f["project-table__favorite"]
+                  }
+                ),
+                /* @__PURE__ */ m("div", { className: f["project-table__name-wrapper"], title: `${l.name}
+${l.app}`, children: [
+                  /* @__PURE__ */ a("div", { className: f["project-table__name"], children: l.name }),
+                  /* @__PURE__ */ a("div", { className: f["project-table__app"], children: l.app })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ a("td", { title: l.client, children: /* @__PURE__ */ a("span", { className: f["project-table__client"], children: l.client }) }),
+              /* @__PURE__ */ a("td", { children: /* @__PURE__ */ a(T, { status: l.status }) }),
+              /* @__PURE__ */ m("td", { title: `Geändert: ${P(l.updatedAt)}
+Erstellt: ${l.createdAt}`, children: [
+                /* @__PURE__ */ a("div", { className: f["project-table__date-main"], children: P(l.updatedAt) }),
+                /* @__PURE__ */ m("div", { className: f["project-table__date-secondary"], children: [
+                  "Erstellt: ",
+                  l.createdAt
+                ] })
+              ] })
             ]
           },
           l.id
@@ -205,11 +306,245 @@ const o = {
     }
   )
 );
-L.displayName = "ProjectTable";
+V.displayName = "ProjectTable";
+const H = "_avatar_1ml48_3", R = {
+  avatar: H,
+  "avatar-group": "_avatar-group_1ml48_18",
+  "group-member": "_group-member_1ml48_23"
+}, J = g.forwardRef(
+  ({ initials: e, name: t, className: r, ...s }, n) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: n,
+      className: d(R.avatar, r),
+      title: t,
+      "aria-label": t,
+      ...s,
+      children: e
+    }
+  )
+);
+J.displayName = "Avatar";
+const K = g.forwardRef(
+  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: s,
+      className: d(R["avatar-group"], t),
+      ...r,
+      children: g.Children.map(e, (n) => g.isValidElement(n) ? g.cloneElement(n, {
+        className: d(n.props.className, R["group-member"])
+      }) : n)
+    }
+  )
+);
+K.displayName = "AvatarGroup";
+const U = "_btn_lw4l4_3", x = {
+  btn: U,
+  "btn--primary": "_btn--primary_lw4l4_27",
+  "btn--outline": "_btn--outline_lw4l4_39",
+  "btn--ghost": "_btn--ghost_lw4l4_52",
+  "btn--sm": "_btn--sm_lw4l4_63"
+}, E = g.forwardRef(
+  ({ variant: e, size: t = "md", className: r, children: s, ...n }, l) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: l,
+      className: d(
+        x.btn,
+        {
+          [x[`btn--${e}`]]: e,
+          [x[`btn--${t}`]]: t && t !== "md"
+        },
+        r
+      ),
+      ...n,
+      children: s
+    }
+  )
+);
+E.displayName = "Button";
+const Y = "_badge_144f0_3", A = {
+  badge: Y,
+  "badge--high": "_badge--high_144f0_12",
+  "badge--medium": "_badge--medium_144f0_18",
+  "badge--low": "_badge--low_144f0_24",
+  "badge--size-small": "_badge--size-small_144f0_30",
+  "badge--size-large": "_badge--size-large_144f0_37"
+}, Z = {
+  high: "!!",
+  medium: "!",
+  low: "-"
+}, Q = {
+  high: "Hohe Priorität",
+  medium: "Mittlere Priorität",
+  low: "Niedrige Priorität"
+}, X = g.forwardRef(
+  ({ level: e, size: t = "small", className: r, "aria-label": s, ...n }, l) => {
+    const c = Q[e];
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        ref: l,
+        className: d(
+          A.badge,
+          A[`badge--${e}`],
+          A[`badge--size-${t}`],
+          r
+        ),
+        "aria-label": s || c,
+        ...n,
+        children: Z[e]
+      }
+    );
+  }
+);
+X.displayName = "PriorityBadge";
+const ee = "_badge_1ru08_3", te = {
+  badge: ee
+}, ae = g.forwardRef(
+  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a(
+    "span",
+    {
+      ref: s,
+      className: d(te.badge, e),
+      ...r,
+      children: t
+    }
+  )
+);
+ae.displayName = "Badge";
+const se = "_icon_1t4xn_56", y = {
+  "status-dropdown": "_status-dropdown_1t4xn_3",
+  "status-trigger": "_status-trigger_1t4xn_9",
+  "status-menu": "_status-menu_1t4xn_14",
+  "is-open": "_is-open_1t4xn_31",
+  "status-menu-item": "_status-menu-item_1t4xn_35",
+  "is-active": "_is-active_1t4xn_52",
+  icon: se,
+  "icon-sm": "_icon-sm_1t4xn_65"
+}, re = g.forwardRef(
+  ({ value: e, onChange: t, options: r, className: s, "aria-label": n, ...l }, c) => {
+    const [b, o] = I(!1), i = q(null), u = (_) => {
+      typeof c == "function" ? c(_) : c && (c.current = _), i.current = _;
+    }, N = r.find((_) => _.value === e) || r[0];
+    O(() => {
+      const _ = (p) => {
+        i.current && !i.current.contains(p.target) && o(!1);
+      };
+      return document.addEventListener("mousedown", _), () => document.removeEventListener("mousedown", _);
+    }, []);
+    const j = (_) => {
+      _.stopPropagation(), o(!b);
+    }, w = (_, p) => {
+      _.stopPropagation(), t && t(p.value), o(!1);
+    };
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: u,
+        className: d(y["status-dropdown"], s),
+        ...l,
+        children: [
+          /* @__PURE__ */ m(
+            E,
+            {
+              variant: "outline",
+              size: "sm",
+              className: y["status-trigger"],
+              onClick: j,
+              "aria-haspopup": "listbox",
+              "aria-expanded": b,
+              "aria-label": n,
+              children: [
+                N?.label,
+                /* @__PURE__ */ a("svg", { className: d(y.icon, y["icon-sm"]), viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ a("path", { d: "m6 9 6 6 6-6" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: d(y["status-menu"], { [y["is-open"]]: b }),
+              role: "listbox",
+              children: r.map((_) => /* @__PURE__ */ a(
+                "button",
+                {
+                  className: d(y["status-menu-item"], {
+                    [y["is-active"]]: _.value === N?.value
+                  }),
+                  role: "option",
+                  "aria-selected": _.value === N?.value,
+                  onClick: (p) => w(p, _),
+                  children: _.label
+                },
+                _.value
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+re.displayName = "StatusDropdown";
+const ne = "_checklist_ylbeh_3", $ = {
+  checklist: ne,
+  "check-item": "_check-item_ylbeh_9",
+  "is-done": "_is-done_ylbeh_27",
+  "checklist--readonly": "_checklist--readonly_ylbeh_32",
+  "form-control": "_form-control_ylbeh_40"
+}, le = g.forwardRef(
+  ({ items: e, onChange: t, editable: r = !1, className: s, ...n }, l) => {
+    const c = (o, i) => {
+      t && t(e.map((u) => u.id === o ? { ...u, checked: i } : u));
+    }, b = (o, i) => {
+      t && t(e.map((u) => u.id === o ? { ...u, text: i } : u));
+    };
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: l,
+        className: d($.checklist, { [$["checklist--readonly"]]: !r }, s),
+        ...n,
+        children: e.map((o) => /* @__PURE__ */ m("div", { className: d($["check-item"], { [$["is-done"]]: o.checked }), children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "checkbox",
+              id: o.id,
+              checked: o.checked,
+              onChange: (i) => c(o.id, i.target.checked)
+            }
+          ),
+          r ? /* @__PURE__ */ a(
+            "input",
+            {
+              type: "text",
+              className: $["form-control"],
+              value: o.text,
+              onChange: (i) => b(o.id, i.target.value),
+              placeholder: "Was ist zu tun?",
+              "aria-label": "Aufgabenbeschreibung bearbeiten"
+            }
+          ) : /* @__PURE__ */ a("label", { htmlFor: o.id, children: o.text })
+        ] }, o.id))
+      }
+    );
+  }
+);
+le.displayName = "Checklist";
 export {
-  f as FavoriteButton,
-  L as ProjectTable,
-  p as StatusBadge,
-  w as StatusChart,
-  y as StatusLegendItem
+  J as Avatar,
+  K as AvatarGroup,
+  ae as Badge,
+  E as Button,
+  le as Checklist,
+  z as FavoriteButton,
+  X as PriorityBadge,
+  V as ProjectTable,
+  T as StatusBadge,
+  G as StatusChart,
+  re as StatusDropdown,
+  F as StatusLegendItem
 };

package/dist/utils/date.d.ts

@@ -0,0 +1 @@
+export declare function formatRelativeDate(dateInput: string | Date | number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastnd/components",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "main": "./dist/components.js",
   "types": "./dist/index.d.ts",