@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/src/icons.tsx

@@ -0,0 +1,287 @@
+export const PlayIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Play"
+			role="img"
+		>
+			<title>Play</title>
+			<path
+				d="M3.76074 1.56153C3.92124 1.47395 4.11669 1.48025 4.27051 1.57911L13.6035 7.57911C13.7466 7.67111 13.833 7.82988 13.833 8.00001C13.833 8.17014 13.7466 8.32891 13.6035 8.42091L4.27051 14.4209C4.11669 14.5198 3.92124 14.5261 3.76074 14.4385C3.60021 14.3508 3.5 14.1829 3.5 14V2.00001C3.5 1.81711 3.60021 1.64918 3.76074 1.56153Z"
+				fill="white"
+			/>
+		</svg>
+	);
+};
+
+export const PinIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Pin"
+			role="img"
+		>
+			<path
+				d="M8 11.3334V14.6667"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M5.9987 7.17337C5.99857 7.42143 5.92924 7.66453 5.79851 7.87534C5.66778 8.08616 5.48084 8.25632 5.2587 8.36671L4.07203 8.96671C3.84989 9.07709 3.66295 9.24726 3.53222 9.45807C3.40149 9.66888 3.33216 9.91198 3.33203 10.16V10.6667C3.33203 10.8435 3.40227 11.0131 3.52729 11.1381C3.65232 11.2631 3.82189 11.3334 3.9987 11.3334H11.9987C12.1755 11.3334 12.3451 11.2631 12.4701 11.1381C12.5951 11.0131 12.6654 10.8435 12.6654 10.6667V10.16C12.6652 9.91198 12.5959 9.66888 12.4652 9.45807C12.3345 9.24726 12.1475 9.07709 11.9254 8.96671L10.7387 8.36671C10.5166 8.25632 10.3296 8.08616 10.1989 7.87534C10.0682 7.66453 9.99883 7.42143 9.9987 7.17337V4.66671C9.9987 4.4899 10.0689 4.32033 10.194 4.1953C10.319 4.07028 10.4886 4.00004 10.6654 4.00004C11.019 4.00004 11.3581 3.85957 11.6082 3.60952C11.8582 3.35947 11.9987 3.02033 11.9987 2.66671C11.9987 2.31309 11.8582 1.97395 11.6082 1.7239C11.3581 1.47385 11.019 1.33337 10.6654 1.33337H5.33203C4.97841 1.33337 4.63927 1.47385 4.38922 1.7239C4.13917 1.97395 3.9987 2.31309 3.9987 2.66671C3.9987 3.02033 4.13917 3.35947 4.38922 3.60952C4.63927 3.85957 4.97841 4.00004 5.33203 4.00004C5.50884 4.00004 5.67841 4.07028 5.80344 4.1953C5.92846 4.32033 5.9987 4.4899 5.9987 4.66671V7.17337Z"
+				fill="#717684"
+			/>
+		</svg>
+	);
+};
+
+export const ResourceIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Resource"
+			role="img"
+		>
+			<path
+				d="M13.9974 11.167H11.3307C10.9625 11.167 10.6641 11.4655 10.6641 11.8337V14.5003C10.6641 14.8685 10.9625 15.167 11.3307 15.167H13.9974C14.3656 15.167 14.6641 14.8685 14.6641 14.5003V11.8337C14.6641 11.4655 14.3656 11.167 13.9974 11.167Z"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M4.66927 11.167H2.0026C1.63441 11.167 1.33594 11.4655 1.33594 11.8337V14.5003C1.33594 14.8685 1.63441 15.167 2.0026 15.167H4.66927C5.03746 15.167 5.33594 14.8685 5.33594 14.5003V11.8337C5.33594 11.4655 5.03746 11.167 4.66927 11.167Z"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M9.33333 1.83301H6.66667C6.29848 1.83301 6 2.13148 6 2.49967V5.16634C6 5.53453 6.29848 5.83301 6.66667 5.83301H9.33333C9.70152 5.83301 10 5.53453 10 5.16634V2.49967C10 2.13148 9.70152 1.83301 9.33333 1.83301Z"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M3.33594 11.1667V9.16667C3.33594 8.98986 3.40618 8.82029 3.5312 8.69526C3.65622 8.57024 3.82579 8.5 4.0026 8.5H12.0026C12.1794 8.5 12.349 8.57024 12.474 8.69526C12.599 8.82029 12.6693 8.98986 12.6693 9.16667V11.1667"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M8 8.49967V5.83301"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export const BackoneElementIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="BackoneElement"
+			role="img"
+		>
+			<path
+				d="M4.0026 9.83333L4.96927 7.9C5.08058 7.6791 5.25114 7.49353 5.46189 7.36402C5.67263 7.23451 5.91525 7.16618 6.1626 7.16667H13.3359M13.3359 7.16667C13.5396 7.16631 13.7407 7.21262 13.9237 7.30206C14.1067 7.39149 14.2668 7.52166 14.3917 7.68258C14.5165 7.8435 14.6029 8.03089 14.6441 8.23037C14.6853 8.42985 14.6802 8.63611 14.6293 8.83333L13.5959 12.8333C13.5219 13.1199 13.3547 13.3738 13.1205 13.5548C12.8864 13.7359 12.5986 13.8339 12.3026 13.8333H2.66927C2.31565 13.8333 1.97651 13.6929 1.72646 13.4428C1.47641 13.1928 1.33594 12.8536 1.33594 12.5V3.83333C1.33594 3.1 1.93594 2.5 2.66927 2.5H5.28927C5.50888 2.50114 5.72481 2.5565 5.91787 2.66117C6.11094 2.76585 6.27515 2.91659 6.39594 3.1L6.9426 3.9C7.06339 4.08341 7.22761 4.23415 7.42067 4.33883C7.61373 4.4435 7.82966 4.49886 8.04927 4.5H12.0026C12.3562 4.5 12.6954 4.64048 12.9454 4.89052C13.1955 5.14057 13.3359 5.47971 13.3359 5.83333V7.16667Z"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export const TypCodeIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Code"
+			role="img"
+		>
+			<path
+				d="M3.33594 2.74969H4.0026C4.53304 2.74969 5.04175 2.96041 5.41682 3.33548C5.79189 3.71055 6.0026 4.21926 6.0026 4.74969C6.0026 4.21926 6.21332 3.71055 6.58839 3.33548C6.96346 2.96041 7.47217 2.74969 8.0026 2.74969H8.66927"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M8.66927 13.4163H8.0026C7.47217 13.4163 6.96346 13.2056 6.58839 12.8305C6.21332 12.4555 6.0026 11.9468 6.0026 11.4163C6.0026 11.9468 5.79189 12.4555 5.41682 12.8305C5.04175 13.2056 4.53304 13.4163 4.0026 13.4163H3.33594"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M3.33594 10.7497H2.66927C2.31565 10.7497 1.97651 10.6092 1.72646 10.3591C1.47641 10.1091 1.33594 9.76994 1.33594 9.41632V6.74965C1.33594 6.39603 1.47641 6.05689 1.72646 5.80685C1.97651 5.5568 2.31565 5.41632 2.66927 5.41632H3.33594"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M8.66406 5.41632H13.3307C13.6844 5.41632 14.0235 5.5568 14.2735 5.80685C14.5236 6.05689 14.6641 6.39603 14.6641 6.74965V9.41632C14.6641 9.76994 14.5236 10.1091 14.2735 10.3591C14.0235 10.6092 13.6844 10.7497 13.3307 10.7497H8.66406"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M6 4.74969V11.4164"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export const ReferenceIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Reference"
+			role="img"
+		>
+			<path
+				d="M10 2.08301H14V6.08301"
+				stroke="#2278E1"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M6.66406 9.41634L13.9974 2.08301"
+				stroke="#2278E1"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M12 8.74967V12.7497C12 13.1033 11.8595 13.4424 11.6095 13.6925C11.3594 13.9425 11.0203 14.083 10.6667 14.083H3.33333C2.97971 14.083 2.64057 13.9425 2.39052 13.6925C2.14048 13.4424 2 13.1033 2 12.7497V5.41634C2 5.06272 2.14048 4.72358 2.39052 4.47353C2.64057 4.22348 2.97971 4.08301 3.33333 4.08301H7.33333"
+				stroke="#2278E1"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export const ComplexTypeIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="ComplexType"
+			role="img"
+		>
+			<g clip-path="url(#clip0_858_18924)">
+				<path
+					d="M3.91406 5.77679L8.00281 8.08304L12.0793 5.77691"
+					stroke="#717684"
+					stroke-width="1.25"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<path
+					d="M8 12.6996V8.08301"
+					stroke="#717684"
+					stroke-width="1.25"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<path
+					d="M14 5.41636C13.9998 5.18254 13.938 4.9529 13.821 4.75047C13.704 4.54803 13.5358 4.37993 13.3333 4.26302L8.66667 1.59636C8.46397 1.47933 8.23405 1.41772 8 1.41772C7.76595 1.41772 7.53603 1.47933 7.33333 1.59636L2.66667 4.26302C2.46418 4.37993 2.29599 4.54803 2.17897 4.75047C2.06196 4.9529 2.00024 5.18254 2 5.41636V10.7497C2.00024 10.9835 2.06196 11.2132 2.17897 11.4156C2.29599 11.618 2.46418 11.7861 2.66667 11.903L7.33333 14.5697C7.53603 14.6867 7.76595 14.7483 8 14.7483C8.23405 14.7483 8.46397 14.6867 8.66667 14.5697L13.3333 11.903C13.5358 11.7861 13.704 11.618 13.821 11.4156C13.938 11.2132 13.9998 10.9835 14 10.7497V5.41636Z"
+					stroke="#717684"
+					stroke-width="1.25"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_858_18924">
+					<rect
+						width="16"
+						height="16"
+						fill="white"
+						transform="translate(0 0.0830078)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};
+
+export const UnionIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Union"
+			role="img"
+		>
+			<g>
+				<path
+					d="M1.21109 6.84206C1.04758 7.0054 0.917866 7.19937 0.829365 7.41287C0.740865 7.62638 0.695313 7.85523 0.695312 8.08635C0.695313 8.31747 0.740865 8.54632 0.829365 8.75983C0.917866 8.97333 1.04758 9.1673 1.21109 9.33064L6.7502 14.8698C6.91354 15.0333 7.10751 15.163 7.32101 15.2515C7.53452 15.34 7.76337 15.3855 7.99449 15.3855C8.22561 15.3855 8.45446 15.34 8.66797 15.2515C8.88147 15.163 9.07544 15.0333 9.23878 14.8698L14.7779 9.33064C14.9414 9.1673 15.0711 8.97333 15.1596 8.75983C15.2481 8.54632 15.2937 8.31747 15.2937 8.08635C15.2937 7.85523 15.2481 7.62638 15.1596 7.41287C15.0711 7.19937 14.9414 7.0054 14.7779 6.84206L9.23878 1.30295C9.07544 1.13944 8.88147 1.00972 8.66797 0.921223C8.45446 0.832723 8.22561 0.78717 7.99449 0.78717C7.76337 0.78717 7.53452 0.832723 7.32101 0.921223C7.10751 1.00972 6.91354 1.13944 6.7502 1.30295L1.21109 6.84206Z"
+					stroke="#2278E1"
+					stroke-width="1.25"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				></path>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M8.18179 5.7278C7.86175 5.67291 7.5326 5.73305 7.25265 5.89758C6.9727 6.06211 6.76001 6.32041 6.65225 6.62673C6.53771 6.95235 6.18089 7.12346 5.85527 7.00891C5.52965 6.89437 5.35854 6.53754 5.47309 6.21192C5.6788 5.62713 6.08484 5.13402 6.6193 4.81992C7.15375 4.50581 7.78212 4.391 8.39312 4.4958C9.00411 4.6006 9.5583 4.91826 9.95753 5.39251C10.3567 5.8667 10.5752 6.46684 10.5743 7.08667C10.574 8.08475 9.83365 8.74761 9.29602 9.10602C9.00813 9.29795 8.72468 9.43923 8.51567 9.53213C8.41028 9.57897 8.32158 9.61449 8.25777 9.6388C8.08575 9.70433 8.22306 9.66463 8.14777 9.67866C8.20338 9.66012 8.22643 9.6509 8.14777 9.67866C7.8203 9.78781 7.46556 9.6111 7.35641 9.28364C7.2474 8.9566 7.42377 8.60314 7.75042 8.49349L7.75172 8.49305L7.76242 8.4893C7.77295 8.48555 7.79005 8.47935 7.81278 8.47069C7.85834 8.45333 7.92589 8.42635 8.008 8.38986C8.17399 8.31609 8.39054 8.20737 8.60265 8.06596C9.0649 7.7578 9.32434 7.42087 9.32434 7.08599C9.32482 6.76127 9.21037 6.44593 9.00125 6.19751C8.79213 5.94909 8.50184 5.7827 8.18179 5.7278Z"
+					fill="#2278E1"
+				></path>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M7.375 11.7526C7.375 11.4074 7.65482 11.1276 8 11.1276H8.00667C8.35184 11.1276 8.63167 11.4074 8.63167 11.7526C8.63167 12.0978 8.35184 12.3776 8.00667 12.3776H8C7.65482 12.3776 7.375 12.0978 7.375 11.7526Z"
+					fill="#2278E1"
+				></path>
+			</g>
+		</svg>
+	);
+};

package/src/index.css

@@ -3,6 +3,11 @@
 @import "./tokens.css";
 @import "./typography.css";
 
+.lucide {
+	/* Change this! */
+	stroke-width: 1.5px;
+}
+
 @theme {
 	--color-selection: var(--color-blue-300);
 	--color-ring-red: var(--color-red-200);
@@ -11,7 +16,7 @@
 	--color-ring-purple: var(--color-purple-200);
 	--color-ring-orange: var(--color-orange-200);
 	--color-ring-pink: var(--color-pink-200);
-	--color-ring-blue: var(--color-blue-300);
+	--color-ring-blue: var(--color-blue-200);
 	--color-ring-red: var(--color-red-200);
 	--color-text-primary: var(--color-neutral-900);
 	--color-text-secondary: var(--color-neutral-500);
@@ -19,12 +24,13 @@
 	--color-text-primary_on-brand: var(--color-neutral-50);
 	--color-text-secondary_on-brand: var(--color-neutral-100);
 	--color-text-tertiary: var(--color-neutral-400);
+	--color-text-tertiary_hover: var(--color-neutral-500);
 	--color-text-quternary: var(--color-neutral-400);
 	--color-text-quternary_hover: var(--color-neutral-500);
 	--color-text-quternary_on-brand: var(--color-neutral-200);
 	--color-text-disabled: var(--color-neutral-300);
 	--color-text-link: var(--color-blue-500);
-	--color-text-link_hover: var(--color-blue-600);
+	--color-text-link_hover: var(--color-blue-700);
 	--color-text-link_disabled: var(--color-blue-400);
 	--color-text-brand-primary: var(--color-brand-500);
 	--color-text-brand-secondary: var(--color-brand-300);
@@ -39,6 +45,7 @@
 	--color-border-secondary: var(--color-neutral-200);
 	--color-border-separator: var(--color-neutral-200);
 	--color-border-disabled: var(--color-neutral-100);
+	--color-border-dark: var(--color-neutral-500);
 	--color-border-brand: var(--color-brand-500);
 	--color-border-link: var(--color-blue-500);
 	--color-border-error: var(--color-red-500);
@@ -90,7 +97,6 @@
 	--color-fg-success-secondary: var(--color-green-400);
 	--color-fg-warning-primary: var(--color-yellow-500);
 	--color-fg-warning-secondary: var(--color-yellow-400);
-
 	--color-utility-green: var(--color-green-500);
 	--color-utility-yellow: var(--color-yellow-600);
 	--color-utility-blue: var(--color-blue-500);
@@ -102,3 +108,36 @@
 	--font-family-sans: "Inter", system-ui, sans-serif;
 	--font-family-mono: "JetBrains Mono", monospace;
 }
+
+.no-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+
+.no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+body ::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+body ::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+body ::-webkit-scrollbar-thumb {
+	background-color: var(--color-elements-disabled);
+	border-radius: 4px;
+}
+
+body ::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-elements-assistive);
+}
+@supports not selector(::-webkit-scrollbar) {
+	body {
+		scrollbar-color: var(--color-elements-disabled) rgba(0, 0, 0, 0);
+		scrollbar-width: thin;
+	}
+}

package/src/index.tsx

@@ -1,9 +1,14 @@
 // Shadcn Components
-
-export * from "./components/code-editor";
+export { toast } from "sonner";
 export * from "./components/code-editor";
 export * from "./components/copy-icon";
+export * from "./components/data-table";
+export * from "./components/fhir-structure-view";
 export * from "./components/request-line-editor";
+export * from "./components/segment-control";
+export * from "./components/split-button";
+export * from "./components/tree-view";
+export * from "./icons";
 export * from "./shadcn/components/ui/accordion";
 export * from "./shadcn/components/ui/alert";
 export * from "./shadcn/components/ui/alert-dialog";
@@ -18,6 +23,7 @@ export * from "./shadcn/components/ui/carousel";
 export * from "./shadcn/components/ui/chart";
 export * from "./shadcn/components/ui/checkbox";
 export * from "./shadcn/components/ui/collapsible";
+export * from "./shadcn/components/ui/combobox";
 export * from "./shadcn/components/ui/command";
 export * from "./shadcn/components/ui/context-menu";
 export * from "./shadcn/components/ui/dialog";
@@ -50,6 +56,7 @@ export * from "./shadcn/components/ui/textarea";
 export * from "./shadcn/components/ui/toggle";
 export * from "./shadcn/components/ui/toggle-group";
 export * from "./shadcn/components/ui/tooltip";
+export * from "./shadcn/components/ui/tree";
 
 // Hooks
 export * from "./shadcn/hooks/use-mobile";

package/src/shadcn/components/ui/accordion.tsx

@@ -4,6 +4,65 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Accordion item styles
+const accordionItemStyles = cn(
+	"border-b",
+	"border-border-primary",
+	"last:border-b-0",
+);
+
+// Accordion trigger styles
+const accordionTriggerStyles = cn(
+	// Layout
+	"flex",
+	"flex-1",
+	"items-start",
+	"justify-between",
+	"gap-4",
+	// Shape
+	"rounded-md",
+	// Spacing
+	"py-4",
+	// Typography
+	"text-left",
+	"text-sm",
+	"font-medium",
+	// Interaction
+	"transition-all",
+	"outline-none",
+	"hover:underline",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	// Icon rotation
+	"[&[data-state=open]>svg]:rotate-180",
+);
+
+// Accordion content styles
+const accordionContentStyles = cn(
+	"data-[state=closed]:animate-accordion-up",
+	"data-[state=open]:animate-accordion-down",
+	"overflow-hidden",
+	"text-sm",
+);
+
+// Accordion content inner styles
+const accordionContentInnerStyles = cn("pt-0", "pb-4");
+
+// Accordion chevron styles
+const accordionChevronStyles = cn(
+	"text-text-secondary",
+	"pointer-events-none",
+	"size-4",
+	"shrink-0",
+	"translate-y-0.5",
+	"transition-transform",
+	"duration-200",
+);
+
 function Accordion({
 	...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
@@ -17,7 +76,7 @@ function AccordionItem({
 	return (
 		<AccordionPrimitive.Item
 			data-slot="accordion-item"
-			className={cn("border-b last:border-b-0", className)}
+			className={cn(accordionItemStyles, className)}
 			{...props}
 		/>
 	);
@@ -32,14 +91,11 @@ function AccordionTrigger({
 		<AccordionPrimitive.Header className="flex">
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
-				className={cn(
-					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-					className,
-				)}
+				className={cn(accordionTriggerStyles, className)}
 				{...props}
 			>
 				{children}
-				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+				<ChevronDownIcon className={accordionChevronStyles} />
 			</AccordionPrimitive.Trigger>
 		</AccordionPrimitive.Header>
 	);
@@ -53,10 +109,12 @@ function AccordionContent({
 	return (
 		<AccordionPrimitive.Content
 			data-slot="accordion-content"
-			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			className={accordionContentStyles}
 			{...props}
 		>
-			<div className={cn("pt-0 pb-4", className)}>{children}</div>
+			<div className={cn(accordionContentInnerStyles, className)}>
+				{children}
+			</div>
 		</AccordionPrimitive.Content>
 	);
 }

package/src/shadcn/components/ui/alert-dialog.tsx

@@ -1,4 +1,5 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type { VariantProps } from "class-variance-authority";
 import type * as React from "react";
 import { buttonVariants } from "#shadcn/components/ui/button";
 import { cn } from "#shadcn/lib/utils";
@@ -117,11 +118,14 @@ function AlertDialogDescription({
 
 function AlertDialogAction({
 	className,
+	variant,
+	danger,
 	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+	VariantProps<typeof buttonVariants>) {
 	return (
 		<AlertDialogPrimitive.Action
-			className={cn(buttonVariants(), className)}
+			className={cn(buttonVariants({ variant, danger }), className)}
 			{...props}
 		/>
 	);

package/src/shadcn/components/ui/alert.tsx

@@ -3,21 +3,49 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const alertVariants = cva(
-	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-	{
-		variants: {
-			variant: {
-				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
+const baseAlertStyles = cn(
+	// Layout
+	"relative",
+	"w-full",
+	"grid",
+	"items-start",
+	"grid-cols-[0_1fr]",
+	"has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]",
+	"gap-y-0.5",
+	"has-[>svg]:gap-x-3",
+	// Shape
+	"rounded-lg",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Spacing
+	"px-4",
+	"py-3",
+	// Typography
+	"text-sm",
+	// SVG styles
+	"[&>svg]:size-4",
+	"[&>svg]:translate-y-0.5",
+	"[&>svg]:text-current",
+);
+
+const alertVariants = cva(baseAlertStyles, {
+	variants: {
+		variant: {
+			default: cn("bg-bg-primary", "text-text-primary"),
+			destructive: cn(
+				"text-text-error-primary",
+				"bg-bg-error-primary",
+				"border-border-error",
+				"[&>svg]:text-current",
+				"*:data-[slot=alert-description]:text-fg-error-secondary",
+			),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+	},
+});
 
 function Alert({
 	className,
@@ -39,7 +67,11 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="alert-title"
 			className={cn(
-				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+				"col-start-2",
+				"line-clamp-1",
+				"min-h-4",
+				"font-medium",
+				"tracking-tight",
 				className,
 			)}
 			{...props}
@@ -55,7 +87,13 @@ function AlertDescription({
 		<div
 			data-slot="alert-description"
 			className={cn(
-				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				"text-text-secondary",
+				"col-start-2",
+				"grid",
+				"justify-items-start",
+				"gap-1",
+				"text-sm",
+				"[&_p]:leading-relaxed",
 				className,
 			)}
 			{...props}

package/src/shadcn/components/ui/avatar.tsx

@@ -3,6 +3,15 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+const avatarStyles = cn(
+	"relative",
+	"flex",
+	"size-8",
+	"shrink-0",
+	"overflow-hidden",
+	"rounded-full",
+);
+
 function Avatar({
 	className,
 	...props
@@ -10,10 +19,7 @@ function Avatar({
 	return (
 		<AvatarPrimitive.Root
 			data-slot="avatar"
-			className={cn(
-				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
-				className,
-			)}
+			className={cn(avatarStyles, className)}
 			{...props}
 		/>
 	);
@@ -26,7 +32,7 @@ function AvatarImage({
 	return (
 		<AvatarPrimitive.Image
 			data-slot="avatar-image"
-			className={cn("aspect-square size-full", className)}
+			className={cn("aspect-square", "size-full", className)}
 			{...props}
 		/>
 	);
@@ -40,7 +46,12 @@ function AvatarFallback({
 		<AvatarPrimitive.Fallback
 			data-slot="avatar-fallback"
 			className={cn(
-				"bg-muted flex size-full items-center justify-center rounded-full",
+				"bg-bg-tertiary",
+				"flex",
+				"size-full",
+				"items-center",
+				"justify-center",
+				"rounded-full",
 				className,
 			)}
 			{...props}